MedASR Bench: full platform + Hugging Face Docker Space packaging

Multi-dataset leaderboard UI (Next.js 16, Tailwind v4) plus R0 release
packaging: output:'standalone', Dockerfile (node:22-alpine, uid 1000,
port 3000), .dockerignore, and HF Space README front-matter.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.dockerignore

@@ -0,0 +1,17 @@
+node_modules
+.next
+out
+build
+.git
+.gitignore
+Dockerfile
+.dockerignore
+README.md
+.DS_Store
+*.pem
+.env*
+npm-debug.log*
+.vercel
+coverage
+.idea
+.vscode

Dockerfile

@@ -0,0 +1,39 @@
+# syntax=docker/dockerfile:1
+# MedASR Bench — Hugging Face Docker Space (CPU). Next.js 16 standalone output.
+# The Space runtime requires the container to run as uid 1000 and listen on
+# app_port (3000, set in README.md front-matter).
+
+# ---- deps: install full deps for the build ----
+FROM node:22-alpine AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# ---- builder: produce .next/standalone ----
+FROM node:22-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN npm run build
+
+# ---- runner: minimal self-contained image ----
+FROM node:22-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production \
+    NEXT_TELEMETRY_DISABLED=1 \
+    PORT=3000 \
+    HOSTNAME=0.0.0.0
+
+# node:alpine already ships a `node` user at uid 1000 — exactly what HF Spaces
+# expect — so no custom user is created (uid 1000 is already taken).
+# server.js lives at the root of .next/standalone; public/ and .next/static
+# are NOT bundled into standalone and must be copied in explicitly.
+COPY --from=builder --chown=node:node /app/.next/standalone ./
+COPY --from=builder --chown=node:node /app/.next/static ./.next/static
+COPY --from=builder --chown=node:node /app/public ./public
+
+USER node
+EXPOSE 3000
+CMD ["node", "server.js"]

README.md

@@ -1,36 +1,46 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+---
+title: MedASR Bench
+emoji: 🩺
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+app_port: 3000
+pinned: false
+license: mit
+short_description: Vietnamese medical ASR benchmark, code-switching aware
+---
 
-## Getting Started
+# MedASR Bench
 
-First, run the development server:
+A public benchmark for **Vietnamese medical speech recognition with English
+code-switching**, anchored on the [ViMedCSS](https://huggingface.co/datasets/tensorxt/ViMedCSS)
+dataset. Part of the **Clinical Scribe** program.
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+This Space is the **display layer** only — a stateless Next.js app that renders
+the leaderboard, per-model pages, and methodology. It runs on free CPU; no audio
+and no model inference ever happen here. Benchmark numbers are produced by the
+offline harness (`benchmark/medasr_eval.py`) and published as versioned,
+auditable run manifests.
 
-## Learn More
+## Metrics
 
-To learn more about Next.js, take a look at the following resources:
+WER · CER · CS-WER (code-switched-term WER) · N-WER · MTR (medical-term
+recall), each with bootstrap 95% CIs under a pinned text normalizer.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## Running locally
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+```bash
+npm install
+npm run dev        # http://localhost:3000
+```
 
-## Deploy on Vercel
+## Build / deploy
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+This Space is a Docker SDK Space. The image builds the Next.js
+[`standalone`](https://nextjs.org/docs/app/api-reference/config/next-config-js/output)
+output and serves it with `node server.js` as uid 1000 on port 3000.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+```bash
+docker build -t medasr-bench .
+docker run --rm -p 3000:3000 medasr-bench
+```

SKILL.md

@@ -0,0 +1,231 @@
+---
+name: clinicalscribe-taste
+description: Anti-slop frontend skill for ClinicalScribe Medical ASR Benchmark. Premium clinical instrument design with ECG phosphor accents, hairline borders, and orchestrated entrance animations.
+---
+
+# ClinicalScribe Taste Skill
+
+Anti-slop frontend skill for the ClinicalScribe Medical ASR Benchmark platform.
+
+---
+
+## Design Read
+
+**"Reading this as:** B2B medical/scientific benchmark platform for Vietnamese Medical ASR evaluation, with a light "precision instrument" language — paper-white surfaces, ink text, deep violet accents, hairline borders, and IBM Plex Mono numerals. The aesthetic should feel like a premium lab report / modern dev-tool dashboard (Linear/Stripe register) — precise, data-dense, trustworthy.
+
+---
+
+## Dial Settings
+
+Based on the design read:
+
+- **`DESIGN_VARIANCE: 5`** — Scientific/professional environment, moderate asymmetry is acceptable
+- **`MOTION_INTENSITY: 6`** — Orchestrated entrance animations, micro-interactions for interactivity
+- **`VISUAL_DENSITY: 7`** — Data-dense benchmark platform, information-rich layouts
+
+---
+
+## Design System Foundation
+
+### Typography
+
+- **Display:** `Instrument Serif` — Editorial headings with medical gravitas
+- **Body:** `Be Vietnam Pro` — UI text with Vietnamese language support
+- **Mono:** `IBM Plex Mono` — Data/numerals with tabular figures
+
+**Upgrades applied:**
+- Reduce all-caps subheaders where possible
+- Ensure italic descender clearance with `leading-[1.1]` minimum
+- Tighten letter-spacing on large headers
+
+### Color Calibration
+
+ClinicalScribe already has excellent color discipline (theme flipped to
+LIGHT 2026-06-11 at user request — "light theme, tech savvy, professional";
+palette built in OKLCH, all small-text pairings ≥ 4.5:1):
+
+| Token | Value | Purpose |
+|-------|-------|---------|
+| `--bg` | `#f9f9fb` | Cool paper-white background |
+| `--surface` | `#ffffff` | Card surfaces |
+| `--surface-2` | `#eeeef2` | Recessed panels / code blocks |
+| `--text` | `#24242f` | Ink text |
+| `--accent` | `#654abb` | Deep violet — oklch(0.50 0.17 290) |
+| `--warn` | `#a15e00` | Caution states |
+| `--crit` | `#c53637` | Critical/error states |
+
+**No green anywhere** — the user rejected phosphor green, desaturated teal,
+and soft blue; the accent is user-picked violet. Don't drift it back toward
+the green–blue band. The theme is LIGHT — don't reintroduce dark surfaces.
+
+**Preserve:** Single accent color (deep violet), hairline borders, soft
+low-alpha shadows (rgba(20,20,45,…) ≤ 0.10). All tints derive from tokens
+via `color-mix` — never hardcode accent rgba values.
+**Enhance:** Add subtle grain texture, improve hover spotlight effects.
+
+---
+
+## Enhancement Priorities
+
+### 1. Grain & Texture (High Impact)
+
+Add subtle noise overlay for depth:
+
+```css
+/* Subtle film grain for tactile quality */
+.grain-overlay::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 31;
+  pointer-events: none;
+  opacity: 0.03;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+}
+```
+
+### 2. Spotlight Border Cards
+
+Interactive cards that illuminate under cursor:
+
+```css
+.spotlight-card {
+  position: relative;
+  overflow: hidden;
+  transition: border-color 0.3s ease;
+}
+
+.spotlight-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: radial-gradient(
+    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+    rgba(52, 245, 197, 0.15),
+    transparent 40%
+  );
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.spotlight-card:hover::before {
+  opacity: 1;
+}
+```
+
+### 3. Tactile Button States
+
+```css
+.tactile-button:active {
+  transform: scale(0.98) translateY(1px);
+  transition: transform 0.1s ease;
+}
+
+.tactile-button:hover {
+  background-color: var(--surface-2);
+}
+```
+
+### 4. Spring Physics for Animations
+
+Replace linear easing with spring curves:
+
+```css
+.spring-in {
+  animation: spring-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes spring-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+```
+
+### 5. Stagger Refinements
+
+```css
+/* Improved stagger with spring feel */
+.stagger-spring > * {
+  animation: stagger-spring 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes stagger-spring {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+```
+
+---
+
+## Layout Discipline
+
+### Preserved Elements
+- Graph-paper micro-grid background (unique, on-brand)
+- Scanline overlay effect
+- Hairline borders (signature element)
+- Editorial hero with Instrument Serif
+- ECG phosphor accents (used sparingly)
+
+### Enhancements
+- Increase section breathing room
+- Better vertical rhythm with `gap-y-12` or `gap-y-16`
+- Asymmetric hero layout with offset stats
+- Refined table row hover states
+
+---
+
+## Component Upgrades
+
+### Card Component
+- Add spotlight border on hover
+- Subtle inner glow effect
+- Refined border-radius (keep `rounded-sm`)
+
+### Badge Component
+- Add subtle shimmer on accent badges
+- Refine spacing and typography
+- Consistent hover states
+
+### Leaderboard Table
+- Improve row hover transitions
+- Add spotlight row highlighting
+- Better column breathing room
+- Refine sort indicator animations
+
+---
+
+## Accessibility Requirements
+
+- Honor `prefers-reduced-motion` for all animations
+- Maintain WCAG AA contrast ratios
+- Keep focus-visible outlines
+- Screen reader support for all interactive elements
+
+---
+
+## Pre-Flight Checklist
+
+- [ ] All animations respect `prefers-reduced-motion`
+- [ ] Spotlight effects work on interactive cards
+- [ ] Grain texture is subtle (3-5% opacity max)
+- [ ] No broken interactions
+- [ ] Typography hierarchy is clear
+- [ ] Light theme is consistent throughout (no stray dark surfaces)

next.config.ts

@@ -1,7 +1,10 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  // Emit .next/standalone (server.js + traced node_modules) for a small
+  // self-contained Docker image — used by the Hugging Face Space runtime.
+  // Ref: node_modules/next/dist/docs/.../next-config-js/output.md
+  output: "standalone",
 };
 
 export default nextConfig;

package-lock.json

@@ -8,9 +8,13 @@
       "name": "platform",
       "version": "0.1.0",
       "dependencies": {
+        "clsx": "^2.1.1",
+        "framer-motion": "^12.40.0",
+        "lucide-react": "^1.17.0",
         "next": "16.2.9",
         "react": "19.2.4",
-        "react-dom": "19.2.4"
+        "react-dom": "19.2.4",
+        "recharts": "^3.8.1"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -1246,6 +1250,42 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+      "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.1.8",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.8.tgz",
+      "integrity": "sha512-/tbkHMW7y10Lx6i1crLjD4/OhNkRG+Fo7byZHtah0547nIeXYcpIXaUh0IAQY6gO5459qpGGYapcEOHtFXkIuA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1253,6 +1293,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -1544,6 +1596,69 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
@@ -1579,7 +1694,7 @@
       "version": "19.2.17",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
       "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -1595,6 +1710,12 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.61.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.61.0.tgz",
@@ -2680,6 +2801,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2733,9 +2863,130 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -2815,6 +3066,12 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3101,6 +3358,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.47.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.47.0.tgz",
+      "integrity": "sha512-n1GuoD0WEQZMBk5tttoZSqwgyLx01oqa5XsBmCHwPyNe1S9jPBEmtR2pSgp2kJuWE3ciFZ6yRHmY4pM4C3OOkw==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -3530,6 +3797,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3671,6 +3944,33 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.40.0.tgz",
+      "integrity": "sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.40.0",
+        "motion-utils": "^12.39.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -3986,6 +4286,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -4028,6 +4338,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -4929,6 +5248,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.17.0.tgz",
+      "integrity": "sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -4996,6 +5324,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.40.0.tgz",
+      "integrity": "sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.39.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5521,9 +5864,76 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-redux": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/recharts": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.8.1.tgz",
+      "integrity": "sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5568,6 +5978,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "2.0.0-next.7",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.7.tgz",
@@ -6161,6 +6577,12 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -6501,6 +6923,37 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -6,12 +6,17 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "sync-results": "node scripts/sync-results.mjs"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.40.0",
+    "lucide-react": "^1.17.0",
     "next": "16.2.9",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "recharts": "^3.8.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

scripts/sync-results.mjs

@@ -0,0 +1,142 @@
+#!/usr/bin/env node
+/**
+ * sync-results.mjs — pull platform run outputs into src/data/results.json.
+ *
+ * Reads, for each known model and each split (test|hard):
+ *   ../benchmark/results/<model>/<split>/metrics.json
+ *   ../benchmark/results/<model>/<split>/run_manifest.json   (optional, logged)
+ *
+ * metrics.json keys: wer, wer_ci95 [lo,hi], cer, cs_wer, cs_wer_ci95,
+ * n_wer, mtr_exact, mtr_fuzzy, rtfx_infer.
+ *
+ * Upserts the matching slug's metrics into the vimedcss entry of
+ * src/data/results.json (shape: { datasets: [{ info, models }] }) and sets
+ * provenance to "platform-verified". All other rows and fields are preserved.
+ *
+ * Usage: npm run sync-results
+ */
+
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PLATFORM_ROOT = resolve(__dirname, "..");
+const RESULTS_ROOT = resolve(PLATFORM_ROOT, "..", "benchmark", "results");
+const DATA_FILE = join(PLATFORM_ROOT, "src", "data", "results.json");
+
+/** benchmark results dir name → leaderboard slug */
+const MODEL_MAP = {
+  zipformer: "zipformer-30m",
+  qwen3asr: "qwen3-asr-0.6b",
+  gemini: "gemini-3.5-flash",
+  deepgram: "deepgram-nova-3",
+};
+
+const SPLITS = ["test", "hard"];
+
+/** Platform runs land on the anchor dataset's leaderboard. */
+const TARGET_DATASET_ID = "vimedcss";
+
+/** metrics.json key → SplitMetrics field */
+function toSplitMetrics(raw) {
+  const out = {};
+  if (typeof raw.wer === "number") out.wer = raw.wer;
+  if (Array.isArray(raw.wer_ci95)) out.werCi = raw.wer_ci95;
+  if (typeof raw.cer === "number") out.cer = raw.cer;
+  if (typeof raw.cs_wer === "number") out.csWer = raw.cs_wer;
+  if (Array.isArray(raw.cs_wer_ci95)) out.csWerCi = raw.cs_wer_ci95;
+  if (typeof raw.n_wer === "number") out.nWer = raw.n_wer;
+  if (typeof raw.mtr_exact === "number") out.mtrExact = raw.mtr_exact;
+  if (typeof raw.mtr_fuzzy === "number") out.mtrFuzzy = raw.mtr_fuzzy;
+  if (typeof raw.rtfx_infer === "number") out.rtfx = raw.rtfx_infer;
+  return out;
+}
+
+function readJson(path) {
+  return JSON.parse(readFileSync(path, "utf8"));
+}
+
+function main() {
+  if (!existsSync(RESULTS_ROOT)) {
+    console.log(`[sync-results] no results dir at ${RESULTS_ROOT} — nothing to do`);
+    return;
+  }
+
+  const data = readJson(DATA_FILE);
+  const entry = (data.datasets ?? []).find(
+    (d) => d.info?.id === TARGET_DATASET_ID,
+  );
+  if (!entry) {
+    console.error(
+      `[sync-results] dataset "${TARGET_DATASET_ID}" not found in ${DATA_FILE} — aborting`,
+    );
+    process.exitCode = 1;
+    return;
+  }
+  let updates = 0;
+
+  for (const [dir, slug] of Object.entries(MODEL_MAP)) {
+    const row = entry.models.find((m) => m.slug === slug);
+    if (!row) {
+      console.warn(`[sync-results] slug ${slug} not found in results.json — skipped`);
+      continue;
+    }
+
+    for (const split of SPLITS) {
+      const metricsPath = join(RESULTS_ROOT, dir, split, "metrics.json");
+      if (!existsSync(metricsPath)) continue;
+
+      let raw;
+      try {
+        raw = readJson(metricsPath);
+      } catch (err) {
+        console.warn(`[sync-results] unreadable ${metricsPath}: ${err.message} — skipped`);
+        continue;
+      }
+
+      const manifestPath = join(RESULTS_ROOT, dir, split, "run_manifest.json");
+      let manifest;
+      if (existsSync(manifestPath)) {
+        try {
+          manifest = readJson(manifestPath);
+          console.log(
+            `[sync-results] ${slug}/${split} manifest:`,
+            JSON.stringify(manifest),
+          );
+        } catch {
+          console.warn(`[sync-results] unreadable manifest at ${manifestPath}`);
+        }
+      }
+
+      row.metrics = row.metrics ?? {};
+      row.metrics[split] = toSplitMetrics(raw);
+      /* RTFx: the manifest computes audio_s / infer_s at run time and is the
+         authoritative timing record; metrics.json only snapshots it at score
+         time and can go stale across re-runs (observed on qwen3asr). API
+         runners report infer_total=0 -> manifest rtfx_infer null, so RTFx
+         stays absent (network latency ≠ local-hardware throughput). */
+      if (typeof manifest?.rtfx_infer === "number") {
+        row.metrics[split].rtfx = manifest.rtfx_infer;
+      }
+      /* Provenance: locally-run models are platform-verified (pinned
+         revision, our hardware, SOTA-eligible). Commercial APIs run through
+         the same harness but on the vendor's service with no pinned revision,
+         so they are recorded as a date-stamped "api-snapshot" instead. */
+      const isApi = row.category === "api-intl" || row.category === "api-vn";
+      row.provenance = isApi ? "api-snapshot" : "platform-verified";
+      updates += 1;
+      console.log(`[sync-results] upserted ${slug}/${split}`);
+    }
+  }
+
+  if (updates === 0) {
+    console.log("[sync-results] no metrics found — results.json untouched");
+    return;
+  }
+
+  writeFileSync(DATA_FILE, `${JSON.stringify(data, null, 2)}\n`, "utf8");
+  console.log(`[sync-results] wrote ${updates} split result(s) to ${DATA_FILE}`);
+}
+
+main();

src/app/compare/loading.tsx

@@ -0,0 +1,100 @@
+import {
+  Skeleton,
+  SkeletonTable,
+  SkeletonText,
+} from "@/components/ui/LoadingSkeleton";
+
+/* Route-level loading state for /compare — mirrors the page's structure
+   (heading + dataset chips, Pareto canvas, head-to-head card, efficiency
+   canvas) so content streams in without layout shift. Server-safe: all
+   shimmer comes from the .skeleton class, which collapses to a static
+   block under prefers-reduced-motion. */
+
+function HeadingSkeleton({ titleWidth = 320 }: { titleWidth?: number }) {
+  return (
+    <div className="hairline-b flex flex-col gap-3 pb-6">
+      <Skeleton className="h-3" width={130} />
+      <Skeleton className="h-9" width={titleWidth} />
+      <SkeletonText className="max-w-2xl" lines={2} lastLineWidth="45%" />
+    </div>
+  );
+}
+
+function ChartCardSkeleton({ height }: { height: number }) {
+  return (
+    <div className="glass depth-2 rounded-sm p-5">
+      {/* control row: legend chips left, toggle right */}
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap items-center gap-4">
+          {[72, 96, 64, 88].map((w, i) => (
+            <Skeleton key={i} className="h-3" width={w} />
+          ))}
+        </div>
+        <Skeleton className="h-7" width={140} />
+      </div>
+      {/* chart canvas */}
+      <Skeleton className="mt-4 w-full" height={height} />
+      {/* caption */}
+      <div className="hairline-t mt-4 pt-3">
+        <Skeleton className="h-3.5" width="70%" />
+      </div>
+    </div>
+  );
+}
+
+export default function CompareLoading() {
+  return (
+    <div
+      aria-busy="true"
+      aria-label="Loading model comparison"
+      className="flex flex-col gap-12 md:gap-16"
+    >
+      {/* 02 · Compare heading + dataset-scope chips */}
+      <div className="flex flex-col gap-5">
+        <HeadingSkeleton titleWidth={340} />
+        <div className="flex flex-wrap items-center gap-2">
+          <Skeleton className="h-3" width={96} />
+          {[88, 76, 112].map((w, i) => (
+            <Skeleton key={i} className="h-6 rounded-sm" width={w} />
+          ))}
+        </div>
+      </div>
+
+      {/* pulse line strip */}
+      <Skeleton className="h-6 w-full" />
+
+      {/* Pareto frontier card */}
+      <ChartCardSkeleton height={440} />
+
+      {/* 02.1 · Head-to-head */}
+      <HeadingSkeleton titleWidth={300} />
+      <div className="glass depth-2 rounded-sm p-5">
+        {/* three model selectors */}
+        <div className="flex flex-wrap items-end gap-4">
+          {[0, 1, 2].map((i) => (
+            <div key={i} className="flex min-w-52 flex-1 flex-col gap-1.5">
+              <Skeleton className="h-3" width="45%" />
+              <Skeleton className="h-9 w-full" />
+            </div>
+          ))}
+        </div>
+        {/* delta table */}
+        <SkeletonTable className="mt-5" rows={6} columns={4} />
+        {/* profile bars */}
+        <div className="mt-5 grid gap-x-10 gap-y-5 sm:grid-cols-2">
+          {[0, 1, 2, 3].map((i) => (
+            <div key={i} className="flex flex-col gap-2">
+              <Skeleton className="h-3" width="35%" />
+              <Skeleton className="h-1.5 w-full" />
+              <Skeleton className="h-1.5 w-4/5" />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* 02.2 · Efficiency */}
+      <HeadingSkeleton titleWidth={360} />
+      <ChartCardSkeleton height={360} />
+    </div>
+  );
+}

src/app/compare/page.tsx

@@ -0,0 +1,101 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import DatasetChips from "@/components/ui/DatasetChips";
+import { Skeleton, SkeletonTable } from "@/components/ui/LoadingSkeleton";
+import PulseLine from "@/components/ui/PulseLine";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import SectionHeading from "@/components/ui/SectionHeading";
+import EfficiencySection from "@/components/compare/EfficiencySection";
+import HeadToHead from "@/components/compare/HeadToHead";
+import ParetoSection from "@/components/compare/ParetoSection";
+import {
+  getDataset,
+  getDatasets,
+  getModels,
+  NORMALIZER_VERSION,
+} from "@/lib/data";
+
+export const metadata: Metadata = { title: "Compare" };
+
+function HeadToHeadFallback() {
+  return (
+    <div
+      aria-busy="true"
+      aria-label="Loading head-to-head comparison"
+      className="glass depth-2 rounded-sm p-5"
+    >
+      <div className="flex flex-wrap items-end gap-4">
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="flex min-w-52 flex-1 flex-col gap-1.5">
+            <Skeleton className="h-3" width="45%" />
+            <Skeleton className="h-9 w-full" />
+          </div>
+        ))}
+      </div>
+      <SkeletonTable className="mt-5" rows={6} columns={4} />
+    </div>
+  );
+}
+
+export default function ComparePage() {
+  const dataset = getDataset(); // anchor: ViMedCSS, the first live dataset
+  const datasets = getDatasets();
+  const models = getModels(dataset.id);
+
+  return (
+    <div className="flex flex-col gap-12 md:gap-16">
+      {/* above the fold: spring-staggered stack */}
+      <div className="stagger-spring flex flex-col gap-12 md:gap-16">
+        <div className="flex flex-col gap-5">
+          <SectionHeading
+            as="h1"
+            eyebrow="02 · Compare"
+            title="The Pareto frontier"
+            sub={
+              <>
+                Overall WER against CS-WER — errors inside code-switched spans
+                — scoped to {dataset.name}, the hub&rsquo;s first live dataset.
+                Lower-left wins. Bootstrap <span className="num">95%</span>{" "}
+                CIs; normalizer{" "}
+                <span className="num">{NORMALIZER_VERSION}</span>; WER is only
+                comparable within a normalizer version.
+              </>
+            }
+          />
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+            <span className="num text-[11px] uppercase tracking-[0.18em] text-muted">
+              Dataset scope
+            </span>
+            <DatasetChips datasets={datasets} activeId={dataset.id} />
+          </div>
+        </div>
+        <PulseLine compact />
+        <ParetoSection models={models} datasetName={dataset.name} />
+      </div>
+
+      <ScrollReveal>
+        <SectionHeading
+          eyebrow="02.1 · Head-to-head"
+          title="Two models, read closely"
+          sub={`Pick a baseline and up to two challengers — all measured on ${dataset.name}. Deltas are challenger minus baseline — green improves on the baseline, red regresses. Models without measurements stay pickable and show their evidence gap.`}
+        />
+      </ScrollReveal>
+      <ScrollReveal delay={0.08}>
+        <Suspense fallback={<HeadToHeadFallback />}>
+          <HeadToHead models={models} datasetName={dataset.name} />
+        </Suspense>
+      </ScrollReveal>
+
+      <ScrollReveal>
+        <SectionHeading
+          eyebrow="02.2 · Efficiency"
+          title="Accuracy against throughput"
+          sub={`RTFx — audio seconds per wall second on platform hardware — against WER on ${dataset.name}, with bubble area scaling by parameter count. Track E (sub-1B, CPU, under 8 GB VRAM) is config-ready.`}
+        />
+      </ScrollReveal>
+      <ScrollReveal delay={0.08}>
+        <EfficiencySection models={models} datasetName={dataset.name} />
+      </ScrollReveal>
+    </div>
+  );
+}

src/app/datasets/[slug]/page.tsx

@@ -0,0 +1,548 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { ArrowLeft, ArrowUpRight, ExternalLink } from "lucide-react";
+import Badge from "@/components/ui/Badge";
+import DatasetChips from "@/components/ui/DatasetChips";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import SectionHeading from "@/components/ui/SectionHeading";
+import CautionCallout from "@/components/docs/CautionCallout";
+import OnboardingCriteria from "@/components/docs/OnboardingCriteria";
+import PipelineSteps from "@/components/docs/PipelineSteps";
+import RoadmapStrip, { type RoadmapItem } from "@/components/docs/RoadmapStrip";
+import SplitsTable from "@/components/docs/SplitsTable";
+import StatTile from "@/components/docs/StatTile";
+import TopicBars from "@/components/docs/TopicBars";
+import { ANCHOR_DATASET_ID, fmt, getDatasets, getModels } from "@/lib/data";
+import type { DatasetInfo } from "@/lib/types";
+
+interface Props {
+  params: Promise<{ slug: string }>;
+}
+
+export function generateStaticParams() {
+  return getDatasets().map((d) => ({ slug: d.id }));
+}
+
+/* The registry is closed (static JSON) — unknown slugs must be a real
+   HTTP 404, not a streamed 200 with not-found content. */
+export const dynamicParams = false;
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = await params;
+  const dataset = getDatasets().find((d) => d.id === slug);
+  if (!dataset) return { title: "Dataset" };
+  return {
+    title:
+      dataset.status === "live"
+        ? `${dataset.name} dataset`
+        : `${dataset.name} — onboarding`,
+    description: dataset.tagline,
+  };
+}
+
+/* ------------------------------------------------------------------ */
+/* ViMedCSS editorial material — corpus-specific scholarship that has  */
+/* no home in the data API. Scoped to the vimedcss id; other live      */
+/* datasets simply skip these sections.                                */
+/* ------------------------------------------------------------------ */
+
+const VIMEDCSS_TOPICS = [
+  { label: "Medical Sciences", vi: "Khoa học y khoa", hours: 16.3 },
+  { label: "Pathology & Pathogens", vi: "Bệnh học & tác nhân gây bệnh", hours: 10.3 },
+  { label: "Treatments", vi: "Điều trị", hours: 3.8 },
+  { label: "Nutrition", vi: "Dinh dưỡng", hours: 2.1 },
+  { label: "Diagnostics", vi: "Chẩn đoán", hours: 2.0 },
+] as const;
+
+const VIMEDCSS_PIPELINE = [
+  {
+    title: "YouTube crawl",
+    stat: "700+ hours",
+    detail:
+      "Vietnamese medical channels crawled and filtered down to clean lecture-style audio, then segmented into 2–21 second utterances.",
+  },
+  {
+    title: "Meddict lexicon match",
+    stat: "64,232 entries",
+    detail:
+      "Candidate English medical terms located against the 64,232-entry Meddict bilingual medical lexicon to anchor code-switched spans.",
+  },
+  {
+    title: "LLM label seeding",
+    stat: "Gemini 2.5 Pro",
+    detail:
+      "First-pass transcripts and span labels drafted by Gemini 2.5 Pro — the origin of the permanent contamination flag on Gemini-family rows.",
+  },
+  {
+    title: "Levenshtein canonicalization",
+    stat: "889 canonical terms",
+    detail:
+      "Surface variants of the same term collapsed to canonical forms by edit-distance matching, yielding 889 distinct code-switched medical terms.",
+  },
+  {
+    title: "Human verification",
+    stat: "κ = 0.65",
+    detail:
+      "Annotators verified every label; inter-annotator agreement κ = 0.65. Verified — but Gemini-seeded. See the caution below.",
+  },
+];
+
+/** Accent-tinted chip marking a code-switched English medical term. */
+function CS({ children }: { children: React.ReactNode }) {
+  return (
+    <span
+      lang="en"
+      className="rounded-sm border border-accent/25 bg-accent-dim px-1 py-px text-accent"
+    >
+      {children}
+    </span>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Shared bits                                                         */
+/* ------------------------------------------------------------------ */
+
+const chipLink =
+  "num inline-flex items-center gap-1.5 rounded-sm border border-line px-2 py-0.5 text-[11px] leading-4 tracking-wide text-text transition-colors duration-200 hover:border-accent/40 hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";
+
+const actionLink =
+  "num inline-flex items-center gap-1.5 rounded-sm border border-line px-3 py-1.5 text-[12px] tracking-wide text-text transition-colors duration-200 hover:border-accent/40 hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";
+
+const ROADMAP_ROLE: Record<string, RoadmapItem["status"]> = {
+  [ANCHOR_DATASET_ID]: "live",
+  vietmed: "next",
+  "private-clinic": "north-star",
+};
+
+function buildRoadmap(): RoadmapItem[] {
+  return getDatasets().map((d) => ({
+    name: d.name,
+    status:
+      d.status === "live" ? "live" : (ROADMAP_ROLE[d.id] ?? "next"),
+    stat:
+      d.status === "live" && d.hours !== undefined
+        ? `${fmt(d.hours)} h`
+        : undefined,
+    detail: d.tagline,
+  }));
+}
+
+function RegistryStrip({ activeId }: { activeId: string }) {
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-3">
+      <Link
+        href="/datasets"
+        className="num inline-flex items-center gap-1.5 rounded-sm text-[12px] tracking-wide text-muted transition-colors duration-200 hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+      >
+        <ArrowLeft size={13} aria-hidden />
+        All datasets
+      </Link>
+      <DatasetChips datasets={getDatasets()} activeId={activeId} />
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Live dataset profile                                                */
+/* ------------------------------------------------------------------ */
+
+function LiveProfile({ dataset }: { dataset: DatasetInfo }) {
+  const isViMedCSS = dataset.id === "vimedcss";
+  const systems = getModels(dataset.id).length;
+
+  /* sub-section numbering stays dense even when editorial sections are
+     absent on future live datasets */
+  let n = 0;
+  const sec = () => `03.${++n}`;
+
+  return (
+    <div className="spring-up flex flex-col gap-12 md:gap-16">
+      {/* 1 · Header */}
+      <header className="hairline-b flex flex-col gap-6 pb-6">
+        <RegistryStrip activeId={dataset.id} />
+        <div>
+          <p className="num mb-2 text-[11px] uppercase tracking-[0.22em] text-muted">
+            03 · Dataset profile
+          </p>
+          <h1 className="font-display text-4xl leading-tight text-text md:text-5xl">
+            {dataset.name}
+            {dataset.fullName && (
+              <span className="mt-1 block font-display text-xl italic text-muted md:text-2xl">
+                {dataset.fullName}
+              </span>
+            )}
+          </h1>
+          <p className="mt-3 max-w-2xl text-sm leading-relaxed text-muted md:text-[15px]">
+            {dataset.tagline}
+            {dataset.id === ANCHOR_DATASET_ID && (
+              <> The anchor benchmark of MedASR Bench — its first live dataset.</>
+            )}
+          </p>
+          <div className="mt-4 flex flex-wrap items-center gap-2">
+            <Badge variant="accent">
+              <span
+                aria-hidden
+                className="pulse-dot inline-block size-1.5 rounded-full bg-accent"
+              />
+              Live · {systems} systems
+            </Badge>
+            {dataset.license && (
+              <Badge variant="outline" title="License">
+                {dataset.license}
+              </Badge>
+            )}
+            {dataset.arxiv && (
+              <a
+                href={`https://arxiv.org/abs/${dataset.arxiv}`}
+                target="_blank"
+                rel="noreferrer"
+                className={chipLink}
+              >
+                arXiv:{dataset.arxiv}
+                <ExternalLink size={12} aria-hidden />
+              </a>
+            )}
+            {dataset.hf && (
+              <a
+                href={`https://huggingface.co/datasets/${dataset.hf}`}
+                target="_blank"
+                rel="noreferrer"
+                className={chipLink}
+              >
+                HF · {dataset.hf}
+                <ExternalLink size={12} aria-hidden />
+              </a>
+            )}
+          </div>
+        </div>
+      </header>
+
+      {/* 2 · Stat strip */}
+      <section
+        aria-label="Corpus at a glance"
+        className="grid grid-cols-2 gap-3 md:grid-cols-4 stagger-spring"
+      >
+        {dataset.hours !== undefined && (
+          <StatTile label="Audio" value={fmt(dataset.hours)} suffix="h" />
+        )}
+        {dataset.utterances !== undefined && (
+          <StatTile
+            label="Utterances"
+            value={dataset.utterances.toLocaleString("en-US")}
+          />
+        )}
+        {dataset.csTerms !== undefined && (
+          <StatTile
+            label="CS medical terms"
+            value={dataset.csTerms.toLocaleString("en-US")}
+            sub="distinct English terms"
+          />
+        )}
+        {isViMedCSS && <StatTile label="Clip length" value="2–21" suffix="s" />}
+      </section>
+
+      {/* Specimen — ViMedCSS editorial */}
+      {isViMedCSS && (
+        <section className="flex flex-col gap-5">
+          <SectionHeading
+            eyebrow={`${sec()} · Specimen`}
+            title="What an utterance looks like"
+            sub="Two transcript lines from the corpus — Vietnamese clinical speech with the code-switched English terms highlighted, exactly the spans CS-WER scores."
+          />
+          <figure className="hairline depth-1 rounded-sm bg-surface px-5 py-6 md:px-6">
+            <blockquote
+              lang="vi"
+              className="flex flex-col gap-5 text-lg leading-[1.8] text-text md:text-xl"
+            >
+              <p>
+                Bệnh nhân có tiền sử tăng huyết áp, chỉ định siêu âm{" "}
+                <CS>Doppler</CS> động mạch cảnh.
+              </p>
+              <p>
+                Kết quả <CS>MRI</CS> cho thấy tổn thương chất trắng lan tỏa, cần
+                theo dõi <CS>multiple sclerosis</CS>.
+              </p>
+            </blockquote>
+            <figcaption className="num mt-5 border-t border-line pt-3 text-[11px] tracking-wide text-muted uppercase">
+              Lecture-style utterances, 2–21 s ·{" "}
+              <span className="text-accent">highlighted</span> = code-switched
+              English medical term
+              {dataset.csTerms !== undefined && <> ({dataset.csTerms} distinct)</>} ·
+              scored by CS-WER
+            </figcaption>
+          </figure>
+        </section>
+      )}
+
+      {/* Splits — any live dataset with frozen splits */}
+      {dataset.splits && (
+        <section className="flex flex-col gap-5">
+          <SectionHeading
+            eyebrow={`${sec()} · Splits`}
+            title="Four splits, two leaderboards"
+            sub="Test is the primary leaderboard. Hard isolates rare and unseen terms — when a model ranks well on Test but slides on Hard, it memorized the vocabulary instead of learning it."
+          />
+          <SplitsTable splits={dataset.splits} datasetName={dataset.name} />
+        </section>
+      )}
+
+      {/* Topics — ViMedCSS editorial */}
+      {isViMedCSS && (
+        <ScrollReveal>
+          <section className="flex flex-col gap-5">
+            <SectionHeading
+              eyebrow={`${sec()} · Topic distribution`}
+              title="Where the hours live"
+              sub="Five clinical topic areas; bar lengths are relative to the largest topic."
+            />
+            <TopicBars items={VIMEDCSS_TOPICS} />
+          </section>
+        </ScrollReveal>
+      )}
+
+      {/* Construction — ViMedCSS editorial */}
+      {isViMedCSS && (
+        <ScrollReveal>
+          <section className="flex flex-col gap-6">
+            <SectionHeading
+              eyebrow={`${sec()} · Construction`}
+              title="How the corpus was built"
+              sub="Five stages from raw crawl to verified labels. Stage three is why the contamination policy exists."
+            />
+            <PipelineSteps steps={VIMEDCSS_PIPELINE} />
+          </section>
+        </ScrollReveal>
+      )}
+
+      {/* Validity — ViMedCSS editorial */}
+      {isViMedCSS && (
+        <ScrollReveal>
+          <section className="flex flex-col gap-5">
+            <SectionHeading
+              eyebrow={`${sec()} · Validity`}
+              title="Read these before citing a number"
+              sub="Two caveats bound what ViMedCSS results can and cannot claim."
+            />
+            <div className="grid gap-4 lg:grid-cols-2">
+              <CautionCallout
+                eyebrow="Caution · Label provenance"
+                title="Gemini seeded these labels"
+              >
+                <p>
+                  Transcripts and code-switch spans were first drafted by Gemini
+                  2.5 Pro, then human-verified at{" "}
+                  <span className="num text-text">κ = 0.65</span>. Gemini-family
+                  models are therefore structurally advantaged on this benchmark
+                  and carry a{" "}
+                  <strong className="font-medium text-warn">
+                    permanent contamination flag
+                  </strong>{" "}
+                  on every ViMedCSS leaderboard, regardless of score.
+                </p>
+                <p>
+                  Test labels are public, so provenance declarations are
+                  honor-system today. A private canary subset is on the roadmap
+                  to detect test-set training.
+                </p>
+              </CautionCallout>
+              <CautionCallout
+                eyebrow="Caution · Domain mismatch"
+                title="Lecture audio is not a clinic"
+              >
+                <p>
+                  ViMedCSS is lecture-style YouTube audio: clean microphones,
+                  composed delivery, one speaker. The production setting —
+                  noisy, two-speaker clinic conversation — is materially harder.
+                </p>
+                <p>
+                  Never read a ViMedCSS score as progress against the production{" "}
+                  <span className="num text-text">WER &lt; 15%</span> deployment
+                  gate. That gate is scored on conversational clinic data (Track
+                  F, roadmap).
+                </p>
+              </CautionCallout>
+            </div>
+          </section>
+        </ScrollReveal>
+      )}
+
+      {/* Hub roadmap — generic, derived from the registry */}
+      <ScrollReveal>
+        <section className="flex flex-col gap-5">
+          <SectionHeading
+            eyebrow={`${sec()} · The hub`}
+            title="One dataset of several"
+            sub="MedASR Bench is multi-dataset by construction — every corpus mounts into the same harness, normalizer, and provenance rules."
+          />
+          <RoadmapStrip items={buildRoadmap()} />
+          <div className="flex flex-wrap items-center gap-2">
+            <Link href="/datasets" className={actionLink}>
+              <ArrowLeft size={13} aria-hidden />
+              All datasets
+            </Link>
+            <Link href="/methodology#onboarding" className={actionLink}>
+              Onboarding criteria
+              <ArrowUpRight size={13} aria-hidden />
+            </Link>
+          </div>
+        </section>
+      </ScrollReveal>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Coming-soon teaser                                                  */
+/* ------------------------------------------------------------------ */
+
+const LAUNCH_STEPS = [
+  {
+    title: "Profile published",
+    detail:
+      "Provenance, license, and split inventory go live on this page — frozen before any system is scored.",
+  },
+  {
+    title: "Baselines re-run",
+    detail:
+      "The platform harness runs the existing leaderboard systems against the new corpus, manifests and all.",
+  },
+  {
+    title: "Leaderboard opens",
+    detail:
+      "Six metrics with bootstrap CIs and provenance chips from day one — comparable with every other dataset on the hub.",
+  },
+];
+
+function ComingSoonProfile({ dataset }: { dataset: DatasetInfo }) {
+  return (
+    <div className="spring-up flex flex-col gap-12 md:gap-14">
+      {/* Header */}
+      <header className="hairline-b flex flex-col gap-6 pb-6">
+        <RegistryStrip activeId={dataset.id} />
+        <div>
+          <p className="num mb-2 text-[11px] uppercase tracking-[0.22em] text-muted">
+            03 · Dataset profile
+          </p>
+          <h1 className="font-display text-4xl leading-tight text-text md:text-5xl">
+            {dataset.name}
+          </h1>
+          <p className="mt-3 max-w-2xl text-[15px] leading-relaxed text-muted">
+            {dataset.tagline}
+          </p>
+          <div className="mt-4 flex flex-wrap items-center gap-2">
+            <Badge variant="dashed">Onboarding</Badge>
+            {dataset.eta && (
+              <Badge variant="outline" title="Expected availability">
+                ETA {dataset.eta}
+              </Badge>
+            )}
+            {dataset.license && (
+              <Badge variant="outline" title="License">
+                {dataset.license}
+              </Badge>
+            )}
+          </div>
+        </div>
+      </header>
+
+      {/* What's known today */}
+      <section className="flex flex-col gap-5">
+        <SectionHeading
+          eyebrow="03.1 · Status"
+          title="What is known today"
+          sub="No numbers are published before the corpus is frozen — this page carries identity only, never preliminary stats."
+        />
+        <dl className="hairline depth-1 grid gap-px overflow-hidden rounded-sm bg-line sm:grid-cols-3">
+          {[
+            { dt: "Status", dd: "Onboarding — not yet runnable" },
+            { dt: "Source", dd: dataset.source ?? "To be announced" },
+            {
+              dt: "Leaderboard",
+              dd: "Opens after the first platform-verified run",
+            },
+          ].map((row) => (
+            <div key={row.dt} className="flex flex-col gap-1 bg-surface px-4 py-3.5">
+              <dt className="text-[11px] uppercase tracking-[0.14em] text-muted">
+                {row.dt}
+              </dt>
+              <dd className="text-[13px] leading-relaxed text-text">{row.dd}</dd>
+            </div>
+          ))}
+        </dl>
+      </section>
+
+      {/* Onboarding criteria */}
+      <ScrollReveal>
+        <section className="flex flex-col gap-5">
+          <SectionHeading
+            eyebrow="03.2 · Onboarding"
+            title="What onboarding involves"
+            sub="Six criteria every dataset clears before its first leaderboard — the same bar ViMedCSS cleared."
+          />
+          <OnboardingCriteria />
+          <Link
+            href="/methodology#onboarding"
+            className={`${actionLink} self-start`}
+          >
+            Full criteria &amp; versioning policy
+            <ArrowUpRight size={13} aria-hidden />
+          </Link>
+        </section>
+      </ScrollReveal>
+
+      {/* Launch sequence */}
+      <ScrollReveal>
+        <section className="flex flex-col gap-5">
+          <SectionHeading
+            eyebrow="03.3 · At launch"
+            title="What happens when it goes live"
+            sub="The same sequence every dataset follows — nothing is scored before the freeze."
+          />
+          <ol className="grid gap-3 md:grid-cols-3 stagger-spring">
+            {LAUNCH_STEPS.map((step, i) => (
+              <li
+                key={step.title}
+                className="hairline depth-1 flex flex-col gap-2 rounded-sm bg-surface p-5"
+              >
+                <span aria-hidden className="num text-[12px] text-muted">
+                  {String(i + 1).padStart(2, "0")}
+                </span>
+                <h3 className="text-sm font-medium text-text">{step.title}</h3>
+                <p className="text-[13px] leading-relaxed text-muted">
+                  {step.detail}
+                </p>
+              </li>
+            ))}
+          </ol>
+          <div className="flex flex-wrap items-center gap-2">
+            <Link href="/datasets" className={actionLink}>
+              <ArrowLeft size={13} aria-hidden />
+              All datasets
+            </Link>
+            <Link href={`/datasets/${ANCHOR_DATASET_ID}`} className={actionLink}>
+              See the live anchor dataset
+            </Link>
+          </div>
+        </section>
+      </ScrollReveal>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Route                                                               */
+/* ------------------------------------------------------------------ */
+
+export default async function DatasetPage({ params }: Props) {
+  const { slug } = await params;
+  const dataset = getDatasets().find((d) => d.id === slug);
+  if (!dataset) notFound();
+
+  return dataset.status === "live" ? (
+    <LiveProfile dataset={dataset} />
+  ) : (
+    <ComingSoonProfile dataset={dataset} />
+  );
+}

src/app/datasets/loading.tsx

@@ -0,0 +1,43 @@
+import {
+  Skeleton,
+  SkeletonCard,
+  SkeletonStats,
+} from "@/components/ui/LoadingSkeleton";
+
+/** Route-level skeleton for /datasets and its nested dataset profiles. */
+export default function Loading() {
+  return (
+    <div className="flex flex-col gap-10 md:gap-12" aria-busy="true">
+      {/* header */}
+      <div className="hairline-b flex flex-col gap-4 pb-6">
+        <Skeleton width={140} height={12} />
+        <Skeleton width="min(28rem, 80%)" height={36} />
+        <Skeleton width="min(40rem, 100%)" height={14} />
+        <div className="flex gap-2 pt-2">
+          <Skeleton width={88} height={26} />
+          <Skeleton width={88} height={26} />
+          <Skeleton width={120} height={26} />
+        </div>
+      </div>
+
+      {/* registry grid */}
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="hairline depth-1 flex flex-col gap-5 rounded-sm bg-surface p-6 md:col-span-2 md:p-7">
+          <div className="flex gap-2">
+            <Skeleton width={56} height={20} />
+            <Skeleton width={104} height={20} />
+          </div>
+          <Skeleton width="min(20rem, 70%)" height={30} />
+          <Skeleton width="min(34rem, 95%)" height={14} />
+          <SkeletonStats count={3} className="grid-cols-3 max-w-xl" />
+          <Skeleton width="100%" height={10} />
+        </div>
+        <SkeletonCard lines={3} />
+        <SkeletonCard lines={3} />
+        <div className="md:col-span-2">
+          <SkeletonCard lines={2} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/datasets/page.tsx

@@ -0,0 +1,274 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { ArrowRight, ArrowUpRight, ExternalLink } from "lucide-react";
+import Badge from "@/components/ui/Badge";
+import Card from "@/components/ui/Card";
+import DatasetChips from "@/components/ui/DatasetChips";
+import SectionHeading from "@/components/ui/SectionHeading";
+import { ONBOARDING_CRITERIA } from "@/components/docs/OnboardingCriteria";
+import SplitMiniBar from "@/components/docs/SplitMiniBar";
+import { ANCHOR_DATASET_ID, fmt, getDatasets, getModels } from "@/lib/data";
+import type { DatasetInfo } from "@/lib/types";
+
+export const metadata: Metadata = {
+  title: "Datasets",
+  description:
+    "The dataset registry of MedASR Bench — live Vietnamese medical ASR corpora, onboarding corpora, and the criteria a dataset must meet to mount into the harness.",
+};
+
+const chipLink =
+  "num inline-flex items-center gap-1.5 rounded-sm border border-line px-2 py-0.5 text-[11px] leading-4 tracking-wide text-text transition-colors duration-200 hover:border-accent/40 hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";
+
+const actionPrimary =
+  "num inline-flex items-center gap-1.5 rounded-sm border border-accent/40 bg-accent-dim px-3 py-1.5 text-[12px] tracking-wide text-accent transition-colors duration-200 hover:bg-accent/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";
+
+const actionSecondary =
+  "num inline-flex items-center gap-1.5 rounded-sm border border-line px-3 py-1.5 text-[12px] tracking-wide text-text transition-colors duration-200 hover:border-accent/40 hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";
+
+/** Rich profile card for a live dataset — stats, split bars, links. */
+function LiveDatasetCard({ dataset }: { dataset: DatasetInfo }) {
+  const systems = getModels(dataset.id).length;
+
+  return (
+    <Card depth={2} className="h-full">
+      <div className="flex h-full flex-col gap-6 p-6 md:p-7">
+        <div className="flex flex-wrap items-center gap-2">
+          <Badge variant="accent">
+            <span
+              aria-hidden
+              className="pulse-dot inline-block size-1.5 rounded-full bg-accent"
+            />
+            Live
+          </Badge>
+          {dataset.id === ANCHOR_DATASET_ID && (
+            <Badge variant="outline">Anchor dataset</Badge>
+          )}
+          {dataset.license && (
+            <Badge variant="outline" title="License">
+              {dataset.license}
+            </Badge>
+          )}
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-[1.15fr_1fr] md:gap-10">
+          {/* identity */}
+          <div className="flex flex-col gap-4">
+            <h2 className="font-display text-3xl leading-tight text-text md:text-4xl">
+              {dataset.name}
+              {dataset.fullName && (
+                <span className="mt-1 block font-display text-lg italic text-muted md:text-xl">
+                  {dataset.fullName}
+                </span>
+              )}
+            </h2>
+            <p className="max-w-xl text-sm leading-relaxed text-muted md:text-[15px]">
+              {dataset.tagline}
+            </p>
+            {dataset.source && (
+              <p className="num text-[11px] uppercase tracking-[0.16em] text-muted">
+                Source · {dataset.source}
+              </p>
+            )}
+            <div className="flex flex-wrap items-center gap-2">
+              {dataset.arxiv && (
+                <a
+                  href={`https://arxiv.org/abs/${dataset.arxiv}`}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={chipLink}
+                >
+                  arXiv:{dataset.arxiv}
+                  <ExternalLink size={12} aria-hidden />
+                </a>
+              )}
+              {dataset.hf && (
+                <a
+                  href={`https://huggingface.co/datasets/${dataset.hf}`}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={chipLink}
+                >
+                  HF · {dataset.hf}
+                  <ExternalLink size={12} aria-hidden />
+                </a>
+              )}
+            </div>
+            <div className="mt-auto flex flex-wrap items-center gap-2 pt-2">
+              <Link href={`/datasets/${dataset.id}`} className={actionPrimary}>
+                Dataset profile
+                <ArrowRight size={13} aria-hidden />
+              </Link>
+              <Link href="/" className={actionSecondary}>
+                Leaderboard · {systems} systems
+                <ArrowRight size={13} aria-hidden />
+              </Link>
+            </div>
+          </div>
+
+          {/* instrument readout */}
+          <div className="flex flex-col gap-5 border-line md:border-l md:pl-8">
+            <dl className="grid grid-cols-3 gap-4">
+              {dataset.hours !== undefined && (
+                <div>
+                  <dt className="text-[11px] uppercase tracking-[0.14em] text-muted">
+                    Audio
+                  </dt>
+                  <dd className="num mt-1 text-2xl leading-none text-text">
+                    {fmt(dataset.hours)}
+                    <span className="ml-0.5 text-base text-muted">h</span>
+                  </dd>
+                </div>
+              )}
+              {dataset.utterances !== undefined && (
+                <div>
+                  <dt className="text-[11px] uppercase tracking-[0.14em] text-muted">
+                    Utterances
+                  </dt>
+                  <dd className="num mt-1 text-2xl leading-none text-text">
+                    {dataset.utterances.toLocaleString("en-US")}
+                  </dd>
+                </div>
+              )}
+              {dataset.csTerms !== undefined && (
+                <div>
+                  <dt className="text-[11px] uppercase tracking-[0.14em] text-muted">
+                    CS terms
+                  </dt>
+                  <dd className="num mt-1 text-2xl leading-none text-text">
+                    {dataset.csTerms.toLocaleString("en-US")}
+                  </dd>
+                </div>
+              )}
+            </dl>
+            {dataset.splits && (
+              <div className="flex flex-col gap-2">
+                <p className="num text-[11px] uppercase tracking-[0.16em] text-muted">
+                  Frozen splits · share of audio
+                </p>
+                <SplitMiniBar splits={dataset.splits} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+/** Muted teaser card for an onboarding dataset. */
+function ComingSoonCard({ dataset }: { dataset: DatasetInfo }) {
+  return (
+    <div className="depth-1 flex h-full flex-col gap-3 rounded-sm border border-dashed border-line bg-surface/40 p-6 transition-colors duration-200 hover:border-line hover:bg-surface/60">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <Badge variant="dashed">Onboarding</Badge>
+        <span className="num text-[11px] uppercase tracking-[0.16em] text-muted">
+          {dataset.eta ? `ETA ${dataset.eta}` : "soon"}
+        </span>
+      </div>
+      <h2 className="font-display text-2xl leading-tight text-text">
+        {dataset.name}
+      </h2>
+      <p className="text-[13px] leading-relaxed text-muted">{dataset.tagline}</p>
+      {dataset.source && (
+        <p className="num text-[11px] uppercase tracking-[0.16em] text-muted">
+          Source · {dataset.source}
+        </p>
+      )}
+      <Link
+        href={`/datasets/${dataset.id}`}
+        className="num mt-auto inline-flex items-center gap-1.5 self-start rounded-sm pt-2 text-[12px] tracking-wide text-muted transition-colors duration-200 hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+      >
+        What onboarding involves
+        <ArrowRight size={13} aria-hidden />
+      </Link>
+    </div>
+  );
+}
+
+export default function DatasetsPage() {
+  const datasets = getDatasets();
+  const live = datasets.filter((d) => d.status === "live");
+  const comingSoon = datasets.filter((d) => d.status === "coming-soon");
+
+  return (
+    <div className="flex flex-col gap-10 md:gap-12">
+      {/* 1 · Header */}
+      <div className="spring-up">
+        <SectionHeading
+          as="h1"
+          eyebrow="03 · Datasets"
+          title="One instrument, many corpora"
+          sub={
+            <>
+              MedASR Bench is a benchmark hub for Vietnamese medical ASR. Every
+              dataset mounts into the same harness — same normalizer, same six
+              metrics, same provenance rules — so scores stay comparable across
+              corpora. <span className="num text-text">{live.length}</span> live
+              today, <span className="num text-text">{comingSoon.length}</span>{" "}
+              onboarding.
+            </>
+          }
+        />
+        <DatasetChips datasets={datasets} className="mt-5" />
+      </div>
+
+      {/* 2 · Bento registry */}
+      <section aria-label="Dataset registry" className="grid gap-4 md:grid-cols-2">
+        {live.map((dataset) => (
+          <div key={dataset.id} className="spring-up delay-1 md:col-span-2">
+            <LiveDatasetCard dataset={dataset} />
+          </div>
+        ))}
+        {comingSoon.map((dataset, i) => (
+          <div
+            key={dataset.id}
+            className={`spring-up ${i % 2 === 0 ? "delay-2" : "delay-3"}`}
+          >
+            <ComingSoonCard dataset={dataset} />
+          </div>
+        ))}
+
+        {/* 3 · Onboarding CTA — glass treatment */}
+        <div className="spring-up delay-4 md:col-span-2">
+          <aside
+            aria-label="Onboard a dataset"
+            className="glass depth-2 rounded-sm p-6 md:p-7"
+          >
+            <div className="grid gap-6 md:grid-cols-[1fr_auto] md:items-end md:gap-10">
+              <div className="flex flex-col gap-3">
+                <p className="num text-[11px] uppercase tracking-[0.22em] text-muted">
+                  Onboard a dataset
+                </p>
+                <h2 className="font-display text-2xl leading-tight text-text md:text-3xl">
+                  Run your corpus on the same instrument
+                </h2>
+                <p className="max-w-2xl text-sm leading-relaxed text-muted">
+                  Any Vietnamese medical speech corpus that meets six criteria
+                  can mount into the harness, and its scores are comparable from
+                  the first run. Datasets are frozen, versioned snapshots —
+                  never moving targets.
+                </p>
+                <ul className="mt-1 flex flex-wrap gap-2" aria-label="Onboarding criteria">
+                  {ONBOARDING_CRITERIA.map((c) => (
+                    <li key={c.title}>
+                      <span
+                        title={c.detail}
+                        className="num inline-flex items-center rounded-sm border border-line bg-surface/60 px-2 py-0.5 text-[11px] leading-4 tracking-wide text-text"
+                      >
+                        {c.title}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <Link href="/methodology#onboarding" className={actionPrimary}>
+                Criteria &amp; versioning policy
+                <ArrowUpRight size={13} aria-hidden />
+              </Link>
+            </div>
+          </aside>
+        </div>
+      </section>
+    </div>
+  );
+}

src/app/globals.css

@@ -1,26 +1,823 @@
 @import "tailwindcss";
 
+/* ------------------------------------------------------------------ */
+/* MedASR Bench — "Clinical Instrument" token system                   */
+/* ------------------------------------------------------------------ */
+
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  color-scheme: light;
+
+  /* Palette — light "precision instrument": cool paper-white surfaces, ink
+     text, deep violet accent (user-picked hue; deepened for light-mode
+     contrast: oklch(0.50 0.17 290) = 6.1:1 on --bg). Built in OKLCH; all
+     small-text pairings clear WCAG 4.5:1. Saturated hues are reserved for
+     meaning (accent/warn/crit). NO green — repeatedly rejected by the user. */
+  --bg: #f9f9fb;
+  --surface: #ffffff;
+  --surface-2: #eeeef2;
+  --line: rgba(36, 36, 60, 0.13);
+  --text: #24242f;
+  --muted: #62626f;
+  --accent: #654abb; /* deep violet — sparingly */
+  --warn: #a15e00; /* contamination / caution only */
+  --crit: #c53637; /* critical / error only */
+
+  /* Derived tints — single-source: everything mixes from the tokens above */
+  --accent-dim: color-mix(in srgb, var(--accent) 12%, transparent);
+  --warn-dim: color-mix(in srgb, var(--warn) 12%, transparent);
+  --crit-dim: color-mix(in srgb, var(--crit) 10%, transparent);
+  --grid-ink: rgba(36, 36, 80, 0.045);
+  --grid-ink-major: rgba(36, 36, 80, 0.065);
 }
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  /* Colors → Tailwind utilities (bg-bg, text-muted, border-line, …) */
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-surface-2: var(--surface-2);
+  --color-line: var(--line);
+  --color-text: var(--text);
+  --color-muted: var(--muted);
+  --color-accent: var(--accent);
+  --color-warn: var(--warn);
+  --color-crit: var(--crit);
+  --color-accent-dim: var(--accent-dim);
+  --color-warn-dim: var(--warn-dim);
+  --color-crit-dim: var(--crit-dim);
+
+  /* Fonts → font-display / font-body / font-mono utilities.
+     The var() chain resolves to next/font variables set on <html>. */
+  --font-display: var(--font-display), "Instrument Serif", Georgia, serif;
+  --font-body: var(--font-body), "Be Vietnam Pro", system-ui, sans-serif;
+  --font-sans: var(--font-body), "Be Vietnam Pro", system-ui, sans-serif;
+  --font-mono: var(--font-mono), "IBM Plex Mono", ui-monospace, SFMono-Regular,
+    monospace;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+/* ------------------------------------------------------------------ */
+/* Base + atmosphere: graph-paper micro-grid + scanline layer          */
+/* ------------------------------------------------------------------ */
+
+html {
+  background-color: var(--bg);
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  /* solid color lives on <html>; body stays transparent so the fixed
+     negative-z ambient glow layers (AmbientEffects) shine through the grid */
+  background-color: transparent;
+  color: var(--text);
+  font-family: var(--font-body), "Be Vietnam Pro", system-ui, sans-serif;
+  /* graph-paper grid: 140px major rhythm over the 28px minor micro-grid */
+  background-image: linear-gradient(var(--grid-ink-major) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-ink-major) 1px, transparent 1px),
+    linear-gradient(var(--grid-ink) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
+  background-size:
+    140px 140px,
+    140px 140px,
+    28px 28px,
+    28px 28px;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ------------------------------------------------------------------ */
+/* Grain texture — subtle film noise for tactile depth                     */
+/* ------------------------------------------------------------------ */
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 29;
+  pointer-events: none;
+  opacity: 0.02;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+/* scanline veil — fixed, non-interactive, layered above grain */
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--text) 1.2%, transparent) 0px,
+    color-mix(in srgb, var(--text) 1.2%, transparent) 1px,
+    transparent 1px,
+    transparent 3px
+  );
+}
+
+::selection {
+  background: var(--accent-dim);
+  color: var(--text);
+}
+
+/* ------------------------------------------------------------------ */
+/* Ambient light — fixed phosphor glow washes behind all content       */
+/* (rendered by components/ui/AmbientEffects; GPU-cheap transform drift) */
+/* ------------------------------------------------------------------ */
+
+@keyframes ambient-drift-a {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(4%, 3%, 0) scale(1.08);
+  }
+}
+
+@keyframes ambient-drift-b {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(-3%, -4%, 0) scale(1.06);
+  }
+}
+
+.ambient-glow {
+  position: absolute;
+  pointer-events: none;
+  will-change: transform;
+}
+
+/* top-center wash — the room's key light */
+.ambient-glow-top {
+  top: -32vh;
+  left: -12vw;
+  right: -12vw;
+  height: 78vh;
+  background: radial-gradient(
+    ellipse 55% 55% at 50% 45%,
+    color-mix(in srgb, var(--accent) 9%, transparent),
+    transparent 70%
+  );
+  animation: ambient-drift-a 70s ease-in-out infinite;
+}
+
+/* lower-right fill — faint counter-glow */
+.ambient-glow-corner {
+  right: -22vw;
+  bottom: -30vh;
+  width: 72vw;
+  height: 75vh;
+  background: radial-gradient(
+    ellipse 50% 50% at 55% 55%,
+    color-mix(in srgb, var(--accent) 5.5%, transparent),
+    transparent 70%
+  );
+  animation: ambient-drift-b 90s ease-in-out infinite;
+}
+
+/* ------------------------------------------------------------------ */
+/* Glass morphism — translucent surfaces tuned to the lifted palette   */
+/* ------------------------------------------------------------------ */
+
+/* layered as components so Tailwind utilities (bg-surface/55 …) can
+   override the surface opacity per-instance */
+@layer components {
+  /* veil only: translucent surface + blur, no border (compose freely) */
+  .glass-veil {
+    background: color-mix(in srgb, var(--surface) 66%, transparent);
+    -webkit-backdrop-filter: blur(16px) saturate(1.2);
+    backdrop-filter: blur(16px) saturate(1.2);
+  }
+
+  /* full glass panel: veil + hairline + machined top-edge relief */
+  .glass {
+    background: color-mix(in srgb, var(--surface) 72%, transparent);
+    -webkit-backdrop-filter: blur(14px) saturate(1.2);
+    backdrop-filter: blur(14px) saturate(1.2);
+    border: 1px solid var(--line);
+    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Hairline utilities (1px --line rules, the only "shadows" we use)    */
+/* ------------------------------------------------------------------ */
+
+.hairline {
+  border: 1px solid var(--line);
+  /* machined top-edge relief — the only "shadow" beyond hairlines */
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
+}
+.hairline-t {
+  border-top: 1px solid var(--line);
+}
+.hairline-b {
+  border-bottom: 1px solid var(--line);
+}
+.hairline-l {
+  border-left: 1px solid var(--line);
+}
+.hairline-r {
+  border-right: 1px solid var(--line);
+}
+
+/* ------------------------------------------------------------------ */
+/* Spring animations — physics-based motion                               */
+/* ------------------------------------------------------------------ */
+
+@keyframes spring-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes spring-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes soft-appear {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Spring-based entrance animations */
+.spring-in {
+  animation: spring-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+.spring-up {
+  animation: spring-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.soft-appear {
+  animation: soft-appear 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+/* Improved stagger with spring feel */
+.stagger-spring > * {
+  animation: spring-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.stagger-spring > :nth-child(1) { animation-delay: 0ms; }
+.stagger-spring > :nth-child(2) { animation-delay: 60ms; }
+.stagger-spring > :nth-child(3) { animation-delay: 120ms; }
+.stagger-spring > :nth-child(4) { animation-delay: 180ms; }
+.stagger-spring > :nth-child(5) { animation-delay: 240ms; }
+.stagger-spring > :nth-child(6) { animation-delay: 300ms; }
+.stagger-spring > :nth-child(7) { animation-delay: 360ms; }
+.stagger-spring > :nth-child(8) { animation-delay: 420ms; }
+
+/* ------------------------------------------------------------------ */
+/* Spotlight border effect — card illumination on hover                    */
+/* ------------------------------------------------------------------ */
+
+.spotlight-card {
+  position: relative;
+  isolation: isolate;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.spotlight-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+    500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+    color-mix(in srgb, var(--accent) 12%, transparent),
+    transparent 40%
+  );
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.spotlight-card:hover {
+  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 8%, transparent);
+}
+
+.spotlight-card:hover::before {
+  opacity: 1;
+}
+
+/* Spotlight row for tables.
+   IMPORTANT: no ::before/::after on this class — it sits on <tr>, and a
+   generated box on a table row gets wrapped in an ANONYMOUS CELL, silently
+   shifting every real cell one column right of the headers. The hover
+   sweep is painted as the row's own background instead. */
+.spotlight-row {
+  transition: background-color 0.2s ease;
+}
+
+.spotlight-row:hover {
+  background-color: var(--surface-2);
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--accent) 4%, transparent) 50%,
+    transparent 100%
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Tactile button states                                                */
+/* ------------------------------------------------------------------ */
+
+.tactile {
+  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
+              background-color 0.2s ease,
+              border-color 0.2s ease;
+}
+
+.tactile:active {
+  transform: scale(0.975) translateY(1px);
+}
+
+.tactile:hover:not(:disabled) {
+  background-color: var(--surface-2);
+}
+
+/* Interactive elements with subtle lift */
+.hover-lift {
+  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
+              box-shadow 0.2s ease;
+}
+
+.hover-lift:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 4px 14px rgba(20, 20, 45, 0.1),
+    inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
+}
+
+/* ------------------------------------------------------------------ */
+/* Accent glow effects                                                  */
+/* ------------------------------------------------------------------ */
+
+.glow-accent-subtle {
+  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+/* ------------------------------------------------------------------ */
+/* Edge accent bar — vertical phosphor line                               */
+/* ------------------------------------------------------------------ */
+
+.edge-accent {
+  position: relative;
+}
+
+.edge-accent::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    var(--accent) 20%,
+    var(--accent) 80%,
+    transparent
+  );
+  opacity: 0.6;
+}
+
+/* Mono numerals everywhere data lives */
+.num {
+  font-family: var(--font-mono), "IBM Plex Mono", ui-monospace, monospace;
+  font-variant-numeric: tabular-nums;
+}
+.tabular {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ------------------------------------------------------------------ */
+/* Keyframes                                                           */
+/* ------------------------------------------------------------------ */
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* pair with pathLength={1} + stroke-dasharray: 1 on an SVG path */
+@keyframes drawLine {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* ambient ECG sweep: a short bright tracer cycling over the dim base path */
+@keyframes sweep {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes shimmer {
+  from {
+    background-position: -200% 0;
+  }
+  to {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes pulseDot {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.35;
+    transform: scale(0.78);
+  }
+}
+
+@keyframes scaleInX {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Motion helpers — one orchestrated load per route                    */
+/* ------------------------------------------------------------------ */
+
+/* stagger container: children rise with 55ms steps */
+.stagger > * {
+  animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.stagger > :nth-child(1) {
+  animation-delay: 0ms;
+}
+.stagger > :nth-child(2) {
+  animation-delay: 55ms;
+}
+.stagger > :nth-child(3) {
+  animation-delay: 110ms;
+}
+.stagger > :nth-child(4) {
+  animation-delay: 165ms;
+}
+.stagger > :nth-child(5) {
+  animation-delay: 220ms;
+}
+.stagger > :nth-child(6) {
+  animation-delay: 275ms;
+}
+.stagger > :nth-child(7) {
+  animation-delay: 330ms;
+}
+.stagger > :nth-child(8) {
+  animation-delay: 385ms;
+}
+.stagger > :nth-child(9) {
+  animation-delay: 440ms;
+}
+.stagger > :nth-child(10) {
+  animation-delay: 495ms;
+}
+.stagger > :nth-child(11) {
+  animation-delay: 550ms;
+}
+.stagger > :nth-child(12) {
+  animation-delay: 605ms;
+}
+
+/* manual stagger steps for non-sibling layouts */
+.delay-1 {
+  animation-delay: 55ms;
+}
+.delay-2 {
+  animation-delay: 110ms;
+}
+.delay-3 {
+  animation-delay: 165ms;
+}
+.delay-4 {
+  animation-delay: 220ms;
+}
+
+/* skeleton block: surface placeholder swept by the shimmer keyframes */
+.skeleton {
+  position: relative;
+  overflow: hidden;
+  border-radius: 2px;
+  background-color: var(--surface-2);
+  background-image: linear-gradient(
+    100deg,
+    transparent 40%,
+    color-mix(in srgb, var(--text) 7%, transparent) 50%,
+    transparent 60%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.8s linear infinite;
+}
+
+/* shimmering surface for status=running chips */
+.chip-shimmer {
+  background-image: linear-gradient(
+    100deg,
+    color-mix(in srgb, var(--accent) 7%, transparent) 40%,
+    color-mix(in srgb, var(--accent) 22%, transparent) 50%,
+    color-mix(in srgb, var(--accent) 7%, transparent) 60%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2.4s linear infinite;
+}
+
+.pulse-dot {
+  animation: pulseDot 1.4s ease-in-out infinite;
+}
+
+.draw-line {
+  stroke-dasharray: 1;
+  animation: drawLine 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
+}
+
+/* pair with pathLength={1}: 6%-long phosphor tracer, ~7s per pass */
+.pulse-sweep {
+  stroke-dasharray: 0.06 0.94;
+  animation: sweep 7s linear infinite;
+}
+
+/* CI whisker draw-in: the micro-bar sweeps open left → right once */
+.ci-draw {
+  transform-origin: left center;
+  animation: scaleInX 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+/* NOTE: scroll-driven entrances (animation-timeline: view()) were tried
+   and removed — with fill-mode both, content whose timeline binds to the
+   wrong scroll container (e.g. rows inside overflow-x-auto) can be stuck
+   at opacity 0 forever. Entrances are load-orchestrated only. */
+
+/* ------------------------------------------------------------------ */
+/* Scroll-triggered animations (Intersection Observer based)            */
+/* ------------------------------------------------------------------ */
+
+/* Base scroll animation classes */
+.scroll-animate {
+  opacity: 0;
+  transform: translateY(24px);
+  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
+              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.scroll-animate.in-view {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Scroll scale animation */
+.scroll-scale {
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
+              transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.scroll-scale.in-view {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Scroll slide animations */
+.scroll-slide-left {
+  opacity: 0;
+  transform: translateX(-24px);
+  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.scroll-slide-left.in-view {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.scroll-slide-right {
+  opacity: 0;
+  transform: translateX(24px);
+  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.scroll-slide-right.in-view {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.scroll-slide-down {
+  opacity: 0;
+  transform: translateY(-24px);
+  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.scroll-slide-down.in-view {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Scroll fade animation */
+.scroll-fade {
+  opacity: 0;
+  transition: opacity 0.4s ease-out;
+}
+
+.scroll-fade.in-view {
+  opacity: 1;
+}
+
+/* Stagger children on scroll */
+.scroll-stagger > * {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 0.4s ease-out,
+              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.scroll-stagger.in-view > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
+.scroll-stagger.in-view > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 60ms; }
+.scroll-stagger.in-view > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 120ms; }
+.scroll-stagger.in-view > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
+.scroll-stagger.in-view > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
+.scroll-stagger.in-view > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
+.scroll-stagger.in-view > *:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 360ms; }
+.scroll-stagger.in-view > *:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 420ms; }
+
+/* ------------------------------------------------------------------ */
+/* Micro-interactions                                                  */
+/* ------------------------------------------------------------------ */
+
+/* ------------------------------------------------------------------ */
+/* Card depth variations                                              */
+/* ------------------------------------------------------------------ */
+
+.depth-1 {
+  box-shadow: 0 1px 3px rgba(20, 20, 45, 0.06);
+}
+
+.depth-2 {
+  box-shadow: 0 2px 10px rgba(20, 20, 45, 0.07);
+}
+
+.depth-3 {
+  box-shadow:
+    0 8px 28px rgba(20, 20, 45, 0.09),
+    0 2px 6px rgba(20, 20, 45, 0.05);
+}
+
+/* ------------------------------------------------------------------ */
+/* Full-bleed breakout — a block wider than the page container,        */
+/* centered on the viewport (parent must be a centered max-w column)   */
+/* ------------------------------------------------------------------ */
+
+@media (min-width: 80rem) {
+  .breakout-wide {
+    --breakout-w: min(100vw - 5rem, 85rem);
+    width: var(--breakout-w);
+    margin-left: calc(50% - var(--breakout-w) / 2);
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Nav sweep — a phosphor tracer riding the sticky nav's bottom        */
+/* hairline; the instrument is always on                               */
+/* ------------------------------------------------------------------ */
+
+.nav-sweep {
+  position: absolute;
+  inset-inline: 0;
+  bottom: -1px;
+  height: 1px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.nav-sweep::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 140px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--accent) 55%, transparent),
+    transparent
+  );
+  animation: nav-sweep 9s linear infinite;
+}
+
+@keyframes nav-sweep {
+  from {
+    transform: translateX(-140px);
+  }
+  to {
+    transform: translateX(100vw);
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* Reduced motion: everything settles instantly                        */
+/* ------------------------------------------------------------------ */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-delay: 0ms !important;
+    animation-iteration-count: 1 !important;
+    animation-timeline: auto !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+  /* ambient effects are pure ambience — remove them when motion is reduced */
+  .pulse-sweep {
+    visibility: hidden;
+  }
+  .nav-sweep {
+    display: none;
+  }
+  /* ambient glow drift stops; the static light wash may remain */
+  .ambient-glow {
+    animation: none;
+    will-change: auto;
+  }
+  /* skeletons settle to a static placeholder */
+  .skeleton {
+    animation: none;
+    background-image: none;
+  }
+  /* grain and scanline remain as they don't animate */
+  body::before,
+  body::after {
+    display: none;
+  }
+  /* spotlight effects collapse to static */
+  .spotlight-card::before {
+    display: none;
+  }
+  /* hover lifts settle */
+  .hover-lift:hover {
+    transform: none;
+  }
+  /* glows collapse */
+  .glow-accent-subtle {
+    box-shadow: none;
+  }
+  /* scroll animations resolve immediately */
+  .scroll-animate,
+  .scroll-scale,
+  .scroll-slide-left,
+  .scroll-slide-right,
+  .scroll-slide-down,
+  .scroll-fade {
+    opacity: 1;
+    transform: none;
+  }
+  .scroll-stagger > * {
+    opacity: 1;
+    transform: none;
+  }
 }

src/app/layout.tsx

@@ -1,33 +1,140 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import Link from "next/link";
+import { Be_Vietnam_Pro, IBM_Plex_Mono, Instrument_Serif } from "next/font/google";
+import SiteNav from "@/components/SiteNav";
+import AmbientEffects from "@/components/ui/AmbientEffects";
+import { getDataset, HARNESS_VERSION, NORMALIZER_VERSION } from "@/lib/data";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const display = Instrument_Serif({
+  weight: "400",
+  style: ["normal", "italic"],
   subsets: ["latin"],
+  variable: "--font-display",
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const body = Be_Vietnam_Pro({
+  weight: ["400", "500", "600", "700"],
+  subsets: ["vietnamese", "latin"],
+  variable: "--font-body",
+});
+
+const mono = IBM_Plex_Mono({
+  weight: ["400", "500", "600"],
   subsets: ["latin"],
+  variable: "--font-mono",
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: {
+    default: "MedASR Bench — Vietnamese Medical ASR Benchmark",
+    template: "%s · MedASR Bench",
+  },
+  description:
+    "Public benchmark for Vietnamese medical speech recognition with English code-switching, anchored on ViMedCSS. Part of the Clinical Scribe program.",
 };
 
+const footerLink =
+  "transition-colors duration-200 ease-out hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent/70";
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const dataset = getDataset();
   return (
     <html
       lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${display.variable} ${body.variable} ${mono.variable} h-full antialiased`}
     >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="flex min-h-full flex-col scroll-smooth">
+        <AmbientEffects />
+        <SiteNav />
+        <main className="mx-auto w-full max-w-6xl flex-1 px-4 py-10 md:px-6">
+          {children}
+        </main>
+        <footer className="edge-accent hairline-t mt-16">
+          <div className="mx-auto grid max-w-6xl gap-8 px-4 py-7 md:grid-cols-3 md:px-6">
+            {/* wordmark + program */}
+            <div className="flex flex-col gap-1.5">
+              <p className="font-display text-lg leading-none text-text">
+                <em className="italic">Med</em>ASR&nbsp;Bench
+              </p>
+              <p className="text-[12px] leading-relaxed text-muted">
+                Part of the <span className="text-text">Clinical Scribe</span>{" "}
+                program — Vietnamese medical ASR, measured in the open.
+              </p>
+            </div>
+
+            {/* navigation echo + citation */}
+            <nav aria-label="Footer" className="text-[12px] text-muted">
+              <ul className="grid grid-cols-2 gap-x-6 gap-y-1.5">
+                <li>
+                  <Link href="/" className={footerLink}>
+                    Leaderboard
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/compare" className={footerLink}>
+                    Compare
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/datasets" className={footerLink}>
+                    Datasets
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/methodology" className={footerLink}>
+                    Methodology
+                  </Link>
+                </li>
+                <li>
+                  <a
+                    href={`https://arxiv.org/abs/${dataset.arxiv}`}
+                    target="_blank"
+                    rel="noreferrer"
+                    className={`num ${footerLink}`}
+                  >
+                    Cite · arXiv:{dataset.arxiv}
+                  </a>
+                </li>
+                <li>
+                  <a
+                    href={`https://huggingface.co/datasets/${dataset.hf}`}
+                    target="_blank"
+                    rel="noreferrer"
+                    className={`num ${footerLink}`}
+                  >
+                    HF · {dataset.hf}
+                  </a>
+                </li>
+              </ul>
+            </nav>
+
+            {/* mono colophon */}
+            <dl className="num flex flex-col gap-1.5 text-[11px] tracking-wide text-muted/80 md:text-right">
+              <div>
+                <dt className="sr-only">Normalizer</dt>
+                <dd>normalizer {NORMALIZER_VERSION}</dd>
+              </div>
+              <div>
+                <dt className="sr-only">Harness</dt>
+                <dd>{HARNESS_VERSION}</dd>
+              </div>
+              <div>
+                <dt className="sr-only">License</dt>
+                <dd>benchmark data {dataset.license}</dd>
+              </div>
+              <div>
+                <dt className="sr-only">API snapshot policy</dt>
+                <dd>API results are date-stamped snapshots</dd>
+              </div>
+            </dl>
+          </div>
+        </footer>
+      </body>
     </html>
   );
 }

src/app/loading.tsx

@@ -0,0 +1,59 @@
+import {
+  Skeleton,
+  SkeletonStats,
+  SkeletonTable,
+  SkeletonText,
+} from "@/components/ui/LoadingSkeleton";
+
+/**
+ * Route-level loading state for the leaderboard home. Mirrors the page
+ * skeleton-for-skeleton: kicker + headline + lede, dataset chip strip,
+ * anchor-dataset stats band, then filter controls and the table. All shimmer
+ * comes from the `.skeleton` class, which the global prefers-reduced-motion
+ * override settles to a static placeholder.
+ */
+export default function Loading() {
+  return (
+    <div aria-busy="true" className="flex flex-col gap-12 md:gap-16">
+      <p role="status" className="sr-only">
+        Loading the leaderboard…
+      </p>
+
+      {/* ---------- hero ---------- */}
+      <section aria-hidden>
+        <Skeleton className="h-3" width={220} />
+        <Skeleton className="mt-5 h-12 md:h-14" width="min(38rem, 95%)" />
+        <Skeleton className="mt-3 h-12 md:h-14" width="min(22rem, 65%)" />
+        <SkeletonText className="mt-6 max-w-xl" lines={2} lastLineWidth="45%" />
+        {/* dataset chip strip */}
+        <div className="mt-8 flex flex-wrap items-center gap-2">
+          <Skeleton className="h-3.5" width={64} />
+          <Skeleton className="h-[26px]" width={92} />
+          <Skeleton className="h-[26px]" width={108} />
+          <Skeleton className="h-[26px]" width={132} />
+        </div>
+      </section>
+
+      {/* ---------- anchor-dataset stats band ---------- */}
+      <section aria-hidden className="flex flex-col gap-px">
+        <Skeleton className="h-9 rounded-b-none" />
+        <SkeletonStats
+          className="grid-cols-2 rounded-t-none md:grid-cols-4"
+          count={4}
+        />
+      </section>
+
+      {/* ---------- leaderboard: title + controls + table ---------- */}
+      <section aria-hidden className="flex flex-col gap-4">
+        <Skeleton className="h-8" width="min(24rem, 80%)" />
+        <div className="flex flex-wrap items-center gap-2">
+          <Skeleton className="h-7" width={140} />
+          <Skeleton className="h-7" width={176} />
+          <Skeleton className="h-7" width={232} />
+          <Skeleton className="ml-auto h-8 w-full max-w-52" />
+        </div>
+        <SkeletonTable rows={10} columns={8} />
+      </section>
+    </div>
+  );
+}

src/app/methodology/page.tsx

@@ -0,0 +1,304 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { AlertTriangle, ArrowRight } from "lucide-react";
+import Badge from "@/components/ui/Badge";
+import CIBar from "@/components/ui/CIBar";
+import Card from "@/components/ui/Card";
+import ScrollReveal, { Stagger } from "@/components/ui/ScrollReveal";
+import SectionHeading from "@/components/ui/SectionHeading";
+import ManifestCard from "@/components/docs/ManifestCard";
+import MetricDefCard from "@/components/docs/MetricDefCard";
+import OnboardingCriteria from "@/components/docs/OnboardingCriteria";
+import ProvenanceLadder from "@/components/docs/ProvenanceLadder";
+import TracksTable from "@/components/docs/TracksTable";
+
+export const metadata: Metadata = {
+  title: "Methodology",
+  description:
+    "Metric definitions, evaluation tracks, provenance classes, reproducibility policy, and dataset onboarding criteria for MedASR Bench.",
+};
+
+const NORMALIZER_STEPS = [
+  "Unicode NFC normalization",
+  "Lowercase",
+  "Punctuation → space",
+  "Collapse repeated whitespace",
+  "Digits kept as-is",
+];
+
+export default function MethodologyPage() {
+  return (
+    <div className="spring-up flex flex-col gap-12 md:gap-16">
+      {/* 1 · Header */}
+      <SectionHeading
+        as="h1"
+        eyebrow="04 · Methodology"
+        title="The instrument’s calibration sheet"
+        sub="What every metric means, what each track allows, how much to trust a row, how to reproduce it — and what a dataset must clear to join the hub. Every number on this platform is a measurement; this page defines the measurement, identically for every dataset."
+      />
+
+      {/* 2 · Metrics */}
+      <section className="flex flex-col gap-5">
+        <SectionHeading
+          eyebrow="04.1 · Metrics"
+          title="Six numbers per run"
+          sub="All metrics are computed by the platform harness from raw transcripts after normalization — WER-family values are percentages, lower is better unless marked otherwise."
+        />
+        <Stagger className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          <MetricDefCard
+            abbr="WER"
+            name="Word error rate"
+            formula={"WER = (S + D + I) / N × 100"}
+            direction="lower is better"
+          >
+            The headline metric: word-level edit distance against the
+            human-verified reference, after normalizer v0.1. S, D, I are
+            substitutions, deletions, insertions; N is reference words.
+          </MetricDefCard>
+          <MetricDefCard
+            abbr="CER"
+            name="Character error rate"
+            formula={"CER = (S + D + I) / N_chars × 100"}
+            direction="lower is better"
+          >
+            The same edit distance at character level — robust to tokenization
+            choices and a fairer lens on Vietnamese diacritics.
+          </MetricDefCard>
+          <MetricDefCard
+            abbr="CS-WER"
+            name="Code-switch word error rate"
+            formula={"WER over tokens ∈ code-switched spans"}
+            direction="lower is better"
+          >
+            WER restricted to code-switched English spans — the clinical
+            failure mode this benchmark exists to expose. Vietnamese-specialized
+            models win overall WER yet lose here.
+          </MetricDefCard>
+          <MetricDefCard
+            abbr="N-WER"
+            name="Native word error rate"
+            formula={"WER over Vietnamese-only tokens"}
+            direction="lower is better"
+          >
+            The mirror image of CS-WER: WER over Vietnamese-only tokens with
+            code-switched spans excluded. Multilingual models invert the
+            pattern — strong here is rare when CS-WER is strong too.
+          </MetricDefCard>
+          <MetricDefCard
+            abbr="MTR"
+            name="Medical term recall"
+            formula={"MTR = |terms recovered| / |terms in reference|"}
+            direction="higher is better"
+          >
+            Share of reference medical terms recovered in the hypothesis. The
+            exact tier requires verbatim recovery; the fuzzy tier tolerates
+            minor surface variation.
+          </MetricDefCard>
+          <MetricDefCard
+            abbr="RTFx"
+            name="Real-time factor (inverted)"
+            formula={"RTFx = audio seconds / wall-clock seconds"}
+            direction="higher is better"
+          >
+            Throughput during the platform run on the manifest’s declared
+            hardware. Above 1.0 means faster than real time.
+          </MetricDefCard>
+        </Stagger>
+
+        <div className="grid gap-4 lg:grid-cols-2">
+          <Card className="flex flex-col gap-3">
+            <h3 className="font-display text-xl text-text">
+              Confidence intervals &amp; the SOTA rule
+            </h3>
+            <p className="text-[13px] leading-relaxed text-muted">
+              Headline metrics carry bootstrap 95% confidence intervals from
+              utterance-level resampling, rendered as whisker micro-bars beside
+              every value. The policy is strict:{" "}
+              <strong className="font-medium text-text">
+                no SOTA badge without significance
+              </strong>{" "}
+              — a model is never promoted while its CI overlaps the
+              incumbent’s.
+            </p>
+            <div className="hairline flex flex-col gap-2 rounded-sm bg-surface-2 px-4 py-3">
+              <p className="num text-[10px] uppercase tracking-[0.16em] text-muted">
+                Illustration — overlapping CIs, no badge awarded
+              </p>
+              <div className="flex items-center gap-3">
+                <span className="num w-24 text-[12px] text-muted">incumbent</span>
+                <span className="num text-[13px] text-text">24.80</span>
+                <CIBar value={24.8} ci={[23.9, 25.7]} />
+              </div>
+              <div className="flex items-center gap-3">
+                <span className="num w-24 text-[12px] text-muted">candidate</span>
+                <span className="num text-[13px] text-text">23.90</span>
+                <CIBar value={23.9} ci={[23.0, 24.8]} />
+              </div>
+            </div>
+          </Card>
+
+          <Card className="flex flex-col gap-3">
+            <h3 className="font-display text-xl text-text">Normalizer v0.1</h3>
+            <p className="text-[13px] leading-relaxed text-muted">
+              Both reference and hypothesis pass through the same normalizer
+              before scoring. The version is recorded in every run manifest.
+            </p>
+            <ol className="num flex flex-col gap-1.5 text-[12px] text-text">
+              {NORMALIZER_STEPS.map((step, i) => (
+                <li key={step} className="flex items-baseline gap-3">
+                  <span className="text-muted">{String(i + 1).padStart(2, "0")}</span>
+                  {step}
+                </li>
+              ))}
+            </ol>
+            <p className="mt-auto flex items-start gap-2 border-t border-warn/20 pt-3 text-[12px] leading-relaxed text-warn">
+              <AlertTriangle size={14} aria-hidden className="mt-0.5 shrink-0" />
+              WER is only comparable within a normalizer version. Cross-version
+              numbers are never ranked against each other.
+            </p>
+          </Card>
+        </div>
+
+        <Stagger className="grid gap-4 md:grid-cols-3">
+          <MetricDefCard abbr="MTR-fb" name="Frequency-bucketed MTR" roadmap>
+            Term recall split by training-frequency buckets — separates
+            memorized vocabulary from genuine generalization.
+          </MetricDefCard>
+          <MetricDefCard abbr="CTER" name="Critical term error rate" roadmap>
+            Error rate over confusable drug-name pairs, where a substitution is
+            a patient-safety event rather than a typo.
+          </MetricDefCard>
+          <MetricDefCard abbr="LAT / $" name="API latency & cost" roadmap>
+            p50/p90 latency and dollars per audio-hour for commercial APIs,
+            captured during date-stamped snapshot runs.
+          </MetricDefCard>
+        </Stagger>
+      </section>
+
+      {/* 3 · Tracks */}
+      <ScrollReveal>
+        <section className="flex flex-col gap-5">
+          <SectionHeading
+            eyebrow="04.2 · Tracks"
+            title="Six tracks, one axis: allowed signal"
+            sub="A track defines exactly what a system may know about a dataset's audio and labels before it transcribes a single clip. Rows only compete within their track, on the same dataset."
+          />
+          <TracksTable />
+        </section>
+      </ScrollReveal>
+
+      {/* 4 · Provenance */}
+      <ScrollReveal>
+        <section className="flex flex-col gap-5">
+          <SectionHeading
+            eyebrow="04.3 · Provenance"
+            title="Trust is a ladder, not a boolean"
+            sub="Every row declares where its numbers came from, and the chip follows the number everywhere it appears."
+          />
+          <ProvenanceLadder />
+          <Card className="flex flex-col gap-2">
+            <div className="flex flex-wrap items-center gap-2">
+              <h3 className="font-display text-xl text-text">
+                Commercial APIs are snapshots
+              </h3>
+              <Badge variant="outline">date-stamped</Badge>
+              <Badge variant="ghost">quarterly drift re-runs · roadmap</Badge>
+            </div>
+            <p className="text-[13px] leading-relaxed text-muted">
+              API systems change behind stable names, so their rows are
+              date-stamped snapshots of the service on the day of the run.
+              Quarterly drift re-runs are on the roadmap; superseded snapshots
+              stay visible with their dates instead of being overwritten.
+            </p>
+          </Card>
+        </section>
+      </ScrollReveal>
+
+      {/* 5 · Reproducibility */}
+      <ScrollReveal>
+        <section className="flex flex-col gap-5">
+          <SectionHeading
+            eyebrow="04.4 · Reproducibility"
+            title="Every number carries its manifest"
+            sub="A result you cannot reproduce is an anecdote. Platform-verified runs publish the complete manifest below."
+          />
+          <ManifestCard />
+          <Card className="flex flex-col gap-3">
+            <h3 className="font-display text-xl text-text">Anti-gaming policy</h3>
+            <ul className="flex flex-col gap-2.5 text-[13px] leading-relaxed text-muted">
+              <li className="flex gap-3">
+                <span aria-hidden className="num text-muted/60">01</span>
+                Provenance is declared per row and rendered beside the number
+                everywhere it appears — it never washes out in aggregation.
+              </li>
+              <li className="flex gap-3">
+                <span aria-hidden className="num text-muted/60">02</span>
+                Contamination flags are permanent and scoped per dataset. On
+                ViMedCSS, Gemini-family models seeded the labels and carry the
+                amber flag forever, regardless of later scores.
+              </li>
+              <li className="flex gap-3">
+                <span aria-hidden className="num text-muted/60">03</span>
+                Where a dataset’s test labels are public — as ViMedCSS’s are —
+                self-reported numbers are honor-system today. A private canary
+                subset is on the roadmap to detect test-set training.
+              </li>
+              <li className="flex gap-3">
+                <span aria-hidden className="num text-muted/60">04</span>
+                Commercial APIs are evaluated as date-stamped snapshots; history
+                is preserved, never overwritten.
+              </li>
+            </ul>
+          </Card>
+        </section>
+      </ScrollReveal>
+
+      {/* 6 · Dataset onboarding */}
+      <ScrollReveal>
+        <section id="onboarding" className="flex scroll-mt-28 flex-col gap-5">
+          <SectionHeading
+            eyebrow="04.5 · Onboarding"
+            title="What it takes to join the hub"
+            sub="MedASR Bench is a multi-dataset hub: any Vietnamese medical speech corpus clearing six criteria mounts into the same harness and becomes directly comparable. ViMedCSS cleared this bar first; VietMed and the private clinic set are next."
+          />
+          <OnboardingCriteria />
+          <Card className="flex flex-col gap-3">
+            <h3 className="font-display text-xl text-text">
+              Snapshots &amp; versioning
+            </h3>
+            <ul className="flex flex-col gap-2.5 text-[13px] leading-relaxed text-muted">
+              <li className="flex gap-3">
+                <span aria-hidden className="num text-muted/60">01</span>
+                <span>
+                  Datasets mount as frozen, versioned snapshots (e.g.{" "}
+                  <span className="num text-text">vimedcss v1</span>). Split
+                  membership never changes within a version.
+                </span>
+              </li>
+              <li className="flex gap-3">
+                <span aria-hidden className="num text-muted/60">02</span>
+                Any revision — new clips, relabeled spans, re-frozen splits —
+                creates a new dataset version and re-runs the affected
+                leaderboards. Old numbers stay visible, scoped to their version,
+                never silently edited.
+              </li>
+              <li className="flex gap-3">
+                <span aria-hidden className="num text-muted/60">03</span>
+                Every run manifest records the dataset version alongside the
+                normalizer and harness versions; numbers are only ranked within
+                matching versions.
+              </li>
+            </ul>
+            <Link
+              href="/datasets"
+              className="num mt-1 inline-flex items-center gap-1.5 self-start rounded-sm border border-line px-3 py-1.5 text-[12px] tracking-wide text-text transition-colors duration-200 hover:border-accent/40 hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+            >
+              See the dataset registry
+              <ArrowRight size={13} aria-hidden />
+            </Link>
+          </Card>
+        </section>
+      </ScrollReveal>
+    </div>
+  );
+}

src/app/models/[slug]/loading.tsx

@@ -0,0 +1,83 @@
+import {
+  Skeleton,
+  SkeletonCard,
+  SkeletonStats,
+  SkeletonText,
+} from "@/components/ui/LoadingSkeleton";
+
+/**
+ * Route-level skeleton for the model-detail page. Mirrors the real layout:
+ * identity header, dataset scope bar, the Results — <dataset> metric grid
+ * (with the frontier thumb column on lg), then generalization + manifest
+ * cards. Server-safe — all shimmer comes from the .skeleton CSS class, so
+ * prefers-reduced-motion collapses it to static blocks.
+ */
+export default function Loading() {
+  return (
+    <div
+      aria-busy="true"
+      aria-label="Loading model profile"
+      className="flex flex-col gap-10"
+    >
+      {/* 01 — model identity header */}
+      <div className="hairline-b pb-6">
+        <Skeleton className="mb-3 h-3" width={210} />
+        <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+          <Skeleton className="h-10 md:h-12" width="48%" />
+          <Skeleton className="h-6" width={132} />
+        </div>
+        <div className="mt-4 flex flex-wrap items-center gap-3">
+          <Skeleton className="h-4" width={96} />
+          <Skeleton className="h-5" width={72} />
+          <Skeleton className="h-5" width={150} />
+        </div>
+        <SkeletonText className="mt-4 max-w-2xl" lines={2} lastLineWidth="40%" />
+      </div>
+
+      {/* dataset scope bar */}
+      <div className="hairline flex items-center justify-between gap-6 rounded-sm px-4 py-3">
+        <div className="flex items-center gap-3">
+          <Skeleton className="h-3" width={72} />
+          <Skeleton className="h-5" width={110} />
+          <Skeleton className="hidden h-3 sm:block" width={220} />
+        </div>
+        <Skeleton className="h-3" width={96} />
+      </div>
+
+      {/* 02 — results grid + frontier thumb column */}
+      <div className="grid gap-8 lg:grid-cols-[1fr_272px] lg:items-start">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-wrap items-end justify-between gap-3">
+            <Skeleton className="h-6" width={230} />
+            <Skeleton className="h-7" width={140} />
+          </div>
+          <SkeletonStats
+            count={6}
+            className="grid-cols-2 md:grid-cols-3"
+          />
+          <Skeleton className="h-3" width="70%" />
+        </div>
+        <div className="flex flex-col gap-4">
+          <Skeleton className="h-3" width={170} />
+          <div className="hairline rounded-sm bg-surface p-4">
+            <Skeleton className="h-44 w-full" />
+            <Skeleton className="mt-3 h-3" width="85%" />
+          </div>
+        </div>
+      </div>
+
+      {/* 03 — generalization strip */}
+      <div className="flex flex-col gap-4">
+        <Skeleton className="h-6" width={190} />
+        <div className="flex flex-wrap gap-3">
+          <SkeletonCard className="min-w-[160px] flex-none" lines={1} />
+          <SkeletonCard className="min-w-[160px] flex-none" lines={1} />
+        </div>
+      </div>
+
+      {/* 04/05 — per-topic + run manifest */}
+      <SkeletonCard lines={3} />
+      <SkeletonCard lines={4} />
+    </div>
+  );
+}

src/app/models/[slug]/page.tsx

@@ -0,0 +1,230 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { ArrowLeft, ArrowUpRight } from "lucide-react";
+import DatasetScope from "@/components/model/DatasetScope";
+import FrontierThumb from "@/components/model/FrontierThumb";
+import GeneralizationStrip from "@/components/model/GeneralizationStrip";
+import MetricPanel from "@/components/model/MetricPanel";
+import ModelHeader from "@/components/model/ModelHeader";
+import RunManifest from "@/components/model/RunManifest";
+import StatusNotice from "@/components/model/StatusNotice";
+import TopicBreakdown from "@/components/model/TopicBreakdown";
+import PulseLine from "@/components/ui/PulseLine";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import {
+  ANCHOR_DATASET_ID,
+  getDataset,
+  getModel,
+  getModels,
+} from "@/lib/data";
+import type { ModelRow } from "@/lib/types";
+
+interface Props {
+  params: Promise<{ slug: string }>;
+}
+
+/* Model pages are generated over the anchor dataset's leaderboard. */
+export function generateStaticParams() {
+  return getModels(ANCHOR_DATASET_ID).map((m) => ({ slug: m.slug }));
+}
+
+/* The leaderboard is closed (static JSON) — unknown slugs must be a real
+   HTTP 404, not a streamed 200 with not-found content. */
+export const dynamicParams = false;
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = await params;
+  const model = getModel(slug);
+  if (!model) return { title: "Model" };
+  const dataset = getDataset();
+  return {
+    title: model.name,
+    description: `${model.name} (${model.org}) — results on the ${dataset.name} benchmark, MedASR Bench.`,
+  };
+}
+
+const footerLink =
+  "num inline-flex items-center gap-1.5 rounded-sm border border-line px-3 py-1.5 text-[13px] tracking-wide transition-colors duration-200 ease-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";
+
+/** Everything a first platform run writes — listed in the awaiting panel. */
+const PENDING_CHIPS = [
+  "WER",
+  "CS-WER",
+  "N-WER",
+  "CER",
+  "MTR",
+  "RTFx",
+  "Test → Hard Δ",
+  "per-topic WER",
+] as const;
+
+function hasAnyMeasurement(model: ModelRow): boolean {
+  return (["test", "hard"] as const).some((s) =>
+    Object.values(model.metrics?.[s] ?? {}).some((v) => typeof v === "number"),
+  );
+}
+
+function PageFooter({ slug }: { slug: string }) {
+  return (
+    <footer className="hairline-t flex flex-wrap items-center justify-between gap-4 pt-6">
+      <Link
+        href="/"
+        className={`${footerLink} text-muted hover:border-line hover:text-text`}
+      >
+        <ArrowLeft size={14} aria-hidden />
+        Back to leaderboard
+      </Link>
+      <Link
+        href={`/compare?m=${slug}`}
+        className={`${footerLink} text-text hover:border-accent/40 hover:text-accent`}
+      >
+        Compare this model
+        <ArrowUpRight size={14} aria-hidden />
+      </Link>
+    </footer>
+  );
+}
+
+export default async function ModelPage({ params }: Props) {
+  const { slug } = await params;
+  const model = getModel(slug);
+  if (!model) notFound();
+
+  /* Anchor dataset (ViMedCSS) — the dataset every number on this page is
+     scoped to. It is live, so split statistics are guaranteed present. */
+  const dataset = getDataset();
+  const splits = dataset.splits;
+  if (!splits) {
+    throw new Error(
+      `Dataset "${dataset.id}" has no split statistics — model pages require a live dataset.`,
+    );
+  }
+  const models = getModels();
+
+  const showStatus =
+    model.provenance === "running" || model.provenance === "planned";
+  const hasParetoPoint =
+    typeof model.metrics?.test?.wer === "number" &&
+    typeof model.metrics?.test?.csWer === "number";
+  const measured = hasAnyMeasurement(model);
+
+  /* unmeasured pages collapse sections 02–04 into one composed panel and
+     promote the run manifest — the only real data — under the header */
+  if (!measured) {
+    const queue = models.filter((m) => !hasAnyMeasurement(m));
+    const queuePos = queue.findIndex((m) => m.slug === model.slug) + 1;
+
+    return (
+      <div className="flex flex-col gap-10">
+        <div className="stagger flex flex-col gap-10">
+          <ModelHeader model={model} />
+
+          <DatasetScope dataset={dataset} />
+
+          <RunManifest model={model} index="02" />
+
+          <section
+            aria-label="Awaiting first platform run"
+            className="flex flex-col gap-4"
+          >
+            {showStatus && (
+              <StatusNotice model={model} datasetName={dataset.name} />
+            )}
+            <div className="hairline depth-1 rounded-sm bg-surface px-5 py-6">
+              <div aria-hidden className="flex items-center">
+                <span className="h-px flex-1 bg-accent/20" />
+                <span className="pulse-dot size-2 shrink-0 rounded-full bg-accent" />
+              </div>
+              <p className="mt-4 font-display text-lg italic text-text">
+                awaiting first platform run
+              </p>
+              <p className="mt-1.5 max-w-xl text-[13px] leading-relaxed text-muted">
+                No trace exists for this model on {dataset.name} yet —
+                measurements, Test&nbsp;→&nbsp;Hard generalization and the
+                per-topic breakdown all land with its first run on{" "}
+                <span className="num">Test</span> +{" "}
+                <span className="num">Hard</span>.
+              </p>
+              <p className="num mt-3 text-[11px] tracking-[0.14em] text-muted uppercase">
+                Queue position {queuePos} of {queue.length} unmeasured systems
+              </p>
+              <ul
+                className="mt-4 flex flex-wrap gap-1.5"
+                aria-label="What the first run will populate"
+              >
+                {PENDING_CHIPS.map((c) => (
+                  <li
+                    key={c}
+                    className="num rounded-sm border border-line/70 px-1.5 py-0.5 text-[11px] tracking-wide text-muted"
+                  >
+                    {c}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </section>
+        </div>
+
+        <PageFooter slug={model.slug} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-10">
+      {/* above the fold: load-orchestrated — header first, then panels */}
+      <div className="stagger flex flex-col gap-10">
+        <ModelHeader model={model} />
+
+        <DatasetScope dataset={dataset} />
+
+        {showStatus && (
+          <StatusNotice model={model} datasetName={dataset.name} />
+        )}
+
+        {hasParetoPoint ? (
+          <div className="grid gap-8 lg:grid-cols-[1fr_272px] lg:items-start">
+            <MetricPanel
+              datasetName={dataset.name}
+              metrics={model.metrics}
+              splits={{ test: splits.test, hard: splits.hard }}
+              provenance={model.provenance}
+            />
+            <FrontierThumb
+              models={models}
+              slug={model.slug}
+              datasetName={dataset.name}
+            />
+          </div>
+        ) : (
+          <MetricPanel
+            datasetName={dataset.name}
+            metrics={model.metrics}
+            splits={{ test: splits.test, hard: splits.hard }}
+            provenance={model.provenance}
+          />
+        )}
+      </div>
+
+      {/* below the fold: scroll-revealed sections */}
+      <ScrollReveal direction="fade">
+        <PulseLine compact />
+      </ScrollReveal>
+
+      <ScrollReveal>
+        <GeneralizationStrip model={model} hardInfo={splits.hard} />
+      </ScrollReveal>
+
+      <ScrollReveal>
+        <TopicBreakdown model={model} />
+      </ScrollReveal>
+
+      <ScrollReveal>
+        <RunManifest model={model} />
+      </ScrollReveal>
+
+      <PageFooter slug={model.slug} />
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,65 +1,183 @@
-import Image from "next/image";
+import type { Metadata } from "next";
+import PulseLine from "@/components/ui/PulseLine";
+import DatasetChips from "@/components/ui/DatasetChips";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import HeroStats from "@/components/leaderboard/HeroStats";
+import LeaderboardTable from "@/components/leaderboard/LeaderboardTable";
+import {
+  ANCHOR_DATASET_ID,
+  getDataset,
+  getDatasets,
+  getLiveDatasets,
+  getModels,
+  HARNESS_VERSION,
+  NORMALIZER_VERSION,
+} from "@/lib/data";
+
+export const metadata: Metadata = {
+  title: "Leaderboard",
+};
+
+export default function LeaderboardPage() {
+  const datasets = getDatasets();
+  const liveCount = getLiveDatasets().length;
+  /* The home leaderboard reads the anchor dataset. vimedcss is live, so its
+     measured fields are always present — hence the non-null assertions below. */
+  const dataset = getDataset(ANCHOR_DATASET_ID);
+  const models = getModels(ANCHOR_DATASET_ID);
 
-export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+    <div className="spring-up flex flex-col gap-12 md:gap-16">
+      {/* ---------- hero ---------- */}
+      <section aria-labelledby="hero-title" className="stagger-spring">
+        <div className="md:grid md:grid-cols-[1fr_auto] md:items-start md:gap-12">
+          <div>
+            <p className="num mb-4 text-[11px] tracking-[0.22em] text-muted uppercase spring-in">
+              MedASR Bench · Clinical Scribe Program
+            </p>
+            <h1
+              id="hero-title"
+              className="font-display max-w-3xl text-[clamp(2.6rem,11.5vw,3.75rem)] leading-[1.04] tracking-tight text-text spring-in"
+              style={{ animationDelay: "60ms" }}
             >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+              The Vietnamese Medical <em className="italic">ASR</em> Benchmark
+            </h1>
+            <p
+              className="mt-5 max-w-2xl text-[15px] leading-relaxed text-muted md:text-base spring-in"
+              style={{ animationDelay: "120ms" }}
             >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+              One harness measuring how speech recognition survives real
+              Vietnamese medical speech — and the English clinical terms
+              code-switched through it — across a growing registry of
+              datasets. Six metrics, bootstrap{" "}
+              <span className="num text-text">95%</span> CIs, transparent
+              provenance on every number.
+            </p>
+          </div>
+
+          {/* instrument readout — quiet counterweight to the headline */}
+          <dl
+            aria-label="Platform readout"
+            className="num hidden flex-col gap-3 border-l border-line pl-6 text-[11px] tracking-[0.14em] text-muted md:flex spring-in"
+            style={{ animationDelay: "180ms" }}
           >
-            Documentation
-          </a>
+            <div className="flex items-baseline justify-between gap-8">
+              <dt className="uppercase text-muted/70">Datasets</dt>
+              <dd className="text-text">
+                {liveCount} live · {datasets.length - liveCount} onboarding
+              </dd>
+            </div>
+            <div className="flex items-baseline justify-between gap-8">
+              <dt className="uppercase text-muted/70">Anchor set</dt>
+              <dd className="text-text">{dataset.name} v1</dd>
+            </div>
+            <div className="flex items-baseline justify-between gap-8">
+              <dt className="uppercase text-muted/70">Normalizer</dt>
+              <dd className="text-text">{NORMALIZER_VERSION}</dd>
+            </div>
+            <div className="flex items-baseline justify-between gap-8">
+              <dt className="uppercase text-muted/70">Harness</dt>
+              <dd className="text-text">{HARNESS_VERSION}</dd>
+            </div>
+            <div className="flex items-baseline justify-between gap-8">
+              <dt className="uppercase text-muted/70">Systems on anchor</dt>
+              <dd className="text-text">{models.length}</dd>
+            </div>
+          </dl>
+        </div>
+
+        {/* dataset registry */}
+        <div
+          className="mt-8 flex flex-wrap items-center gap-3 spring-in"
+          style={{ animationDelay: "240ms" }}
+        >
+          <span className="num text-[11px] tracking-[0.18em] text-muted uppercase">
+            Datasets
+          </span>
+          <DatasetChips datasets={datasets} activeId={ANCHOR_DATASET_ID} />
         </div>
-      </main>
+      </section>
+
+      {/* ---------- anchor-dataset stats band ---------- */}
+      <HeroStats
+        hours={dataset.hours!}
+        utterances={dataset.utterances!}
+        csTerms={dataset.csTerms!}
+        datasetName={dataset.name}
+        datasetHref={`/datasets/${dataset.id}`}
+      />
+
+      {/* ---------- ECG divider ---------- */}
+      <PulseLine />
+
+      {/* ---------- editorial insight — scoped to the anchor dataset ---------- */}
+      <p className="font-display max-w-3xl text-xl leading-snug text-muted italic md:text-2xl spring-in">
+        On {dataset.name}, Vietnamese-specialized models win the overall word
+        error rate but lose the code-switched spans; multilingual models invert
+        the trade — <span className="text-text">adaptation closes both.</span>
+      </p>
+
+      {/* ---------- leaderboard ---------- */}
+      <LeaderboardTable
+        models={models}
+        datasetName={dataset.name}
+        hardSplit={dataset.splits!.hard}
+      />
+
+      {/* ---------- footnotes ---------- */}
+      <ScrollReveal direction="fade">
+        <section aria-label="Methodology notes" className="hairline-t pt-6">
+          <ol className="flex max-w-[72ch] flex-col gap-3 text-[12px] leading-relaxed text-muted">
+            <li className="flex gap-3">
+              <span className="num shrink-0 text-muted/80">[1]</span>
+              <span>
+                All WER-family numbers were computed under text normalizer{" "}
+                <span className="num text-text">v0.1</span>. WER is only
+                comparable within a normalizer version; the version is recorded
+                per run.
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="num shrink-0 text-muted/80">[2]</span>
+              <span>
+                Paper-imported rows (dashed chips) reproduce numbers from{" "}
+                <span className="num">arXiv:{dataset.arxiv}</span> as published
+                — not yet re-verified on this platform.
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="num shrink-0 text-muted/80">[3]</span>
+              <span>
+                Contamination flag: {dataset.name} labels were seeded by Gemini
+                2.5 Pro before human verification (κ ={" "}
+                <span className="num">0.65</span>), so Gemini-family models
+                carry a permanent contamination flag. With public labels,
+                provenance declarations are honor-system for now; a private
+                canary subset is on the roadmap.
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="num shrink-0 text-muted/80">[4]</span>
+              <span>
+                Domain caveat: {dataset.name}{" "}
+                is lecture-style YouTube audio, not noisy two-speaker clinic
+                conversation. Scores here do not
+                certify the production deployment gate (WER &lt;{" "}
+                <span className="num">15%</span> on clinic speech).
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="num shrink-0 text-muted/80">[5]</span>
+              <span>
+                Bars under WER and CS-WER place the value on a fixed{" "}
+                <span className="num">15–65</span> scale; whiskers appear when
+                bootstrap <span className="num">95%</span> CIs are available —
+                platform runs record them, paper imports rarely publish them.
+              </span>
+            </li>
+          </ol>
+        </section>
+      </ScrollReveal>
     </div>
   );
 }

src/app/template.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import PageTransition from "@/components/ui/PageTransition";
+
+/**
+ * Root template — wraps every route's content in a fade + rise entrance.
+ * PageTransition keys itself by pathname, so the animation also fires on
+ * deep navigations that don't remount this template (e.g. between models).
+ */
+export default function Template({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <PageTransition>{children}</PageTransition>;
+}

src/components/SiteNav.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import clsx from "clsx";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { motion } from "framer-motion";
+import Badge from "@/components/ui/Badge";
+import { NORMALIZER_VERSION } from "@/lib/data";
+
+const LINKS = [
+  { href: "/", label: "Leaderboard" },
+  { href: "/compare", label: "Compare" },
+  { href: "/datasets", label: "Datasets" },
+  { href: "/methodology", label: "Methodology" },
+] as const;
+
+function isActive(pathname: string, href: string): boolean {
+  if (href === "/") return pathname === "/" || pathname.startsWith("/models");
+  return pathname === href || pathname.startsWith(`${href}/`);
+}
+
+/**
+ * Top navigation: wordmark + section links with animated active-route styling +
+ * normalizer chip. Features smooth animated indicator for active state.
+ */
+export default function SiteNav() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="glass-veil hairline-b sticky top-0 z-40">
+      {/* phosphor tracer riding the bottom hairline — the instrument is on */}
+      <span aria-hidden className="nav-sweep" />
+      <div className="mx-auto max-w-6xl px-4 md:px-6">
+        <div className="flex flex-col md:h-14 md:flex-row md:items-center md:gap-6">
+          {/* row 1 on mobile · the whole bar on md+ */}
+          <div className="flex h-12 items-center justify-between gap-4 md:h-auto md:flex-1 md:justify-start md:gap-6">
+            <Link
+              href="/"
+              className="group flex shrink-0 items-center gap-2.5"
+            >
+              <span className="font-display text-xl leading-none text-text transition-all duration-200 group-hover:brightness-110">
+                <em className="italic">Med</em>
+                <span className="not-italic">ASR&nbsp;Bench</span>
+              </span>
+              <span className="hidden min-[420px]:inline-flex">
+                <Badge variant="outline">ViMedCSS v1</Badge>
+              </span>
+            </Link>
+
+            <div className="hidden min-w-0 flex-1 items-center gap-1 md:flex">
+              {LINKS.map(({ href, label }) => {
+                const active = isActive(pathname, href);
+                return (
+                  <Link
+                    key={href}
+                    href={href}
+                    aria-current={active ? "page" : undefined}
+                    className={clsx(
+                      "relative shrink-0 whitespace-nowrap rounded-sm px-2.5 py-1.5 text-[13px]",
+                      "transition-colors duration-200 ease-out",
+                      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent/70",
+                      active
+                        ? "text-text"
+                        : "text-muted hover:text-text hover:bg-surface/50",
+                    )}
+                  >
+                    {label}
+                    {/* Animated underline for active state */}
+                    {active && (
+                      <motion.span
+                        layoutId="nav-indicator"
+                        className="absolute inset-x-2 bottom-1 h-px bg-accent"
+                        initial={false}
+                        transition={{
+                          type: "spring",
+                          stiffness: 500,
+                          damping: 35,
+                        }}
+                      />
+                    )}
+                  </Link>
+                );
+              })}
+            </div>
+
+            <span className="hidden shrink-0 sm:inline-flex">
+              <Badge variant="outline">normalizer {NORMALIZER_VERSION}</Badge>
+            </span>
+          </div>
+
+          {/* row 2, mobile only: scrollable link strip with edge fade */}
+          <div className="relative -mx-4 md:hidden">
+            <div className="flex items-center gap-1 overflow-x-auto px-4 pb-2.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+              {LINKS.map(({ href, label }) => {
+                const active = isActive(pathname, href);
+                return (
+                  <Link
+                    key={href}
+                    href={href}
+                    aria-current={active ? "page" : undefined}
+                    className={clsx(
+                      "relative shrink-0 whitespace-nowrap rounded-sm px-2.5 py-1.5 text-[13px]",
+                      "transition-colors duration-200 ease-out",
+                      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent/70",
+                      active
+                        ? "hairline bg-surface text-text"
+                        : "text-muted hover:text-text hover:bg-surface/50",
+                    )}
+                  >
+                    {label}
+                    {/* Animated dot indicator for mobile */}
+                    {active && (
+                      <motion.span
+                        layoutId="nav-dot"
+                        className="absolute bottom-0.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-accent"
+                        initial={false}
+                        transition={{
+                          type: "spring",
+                          stiffness: 500,
+                          damping: 35,
+                        }}
+                      />
+                    )}
+                  </Link>
+                );
+              })}
+            </div>
+            <span
+              aria-hidden
+              className="pointer-events-none absolute inset-y-0 right-0 w-10 bg-gradient-to-l from-surface/80 to-transparent"
+            />
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}

src/components/compare/EfficiencySection.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import type { ReactElement } from "react";
+import {
+  CartesianGrid,
+  ResponsiveContainer,
+  Scatter,
+  ScatterChart,
+  Tooltip,
+  XAxis,
+  YAxis,
+  ZAxis,
+} from "recharts";
+import ProvenanceChip from "@/components/ui/ProvenanceChip";
+import { categoryLabels, fmt } from "@/lib/data";
+import type { ModelRow } from "@/lib/types";
+import {
+  CHART_AXIS_LABEL,
+  CHART_AXIS_TICK,
+  CHART_LABEL_FILL,
+  CHART_LABEL_KNOCKOUT,
+  categoryColor,
+  isApiCategory,
+  shortName,
+} from "./compare-utils";
+
+interface EffDatum {
+  rtfx: number;
+  wer: number;
+  paramsB: number;
+  model: ModelRow;
+}
+
+function renderBubble(props: unknown): ReactElement {
+  const { cx, cy, size, payload } = props as {
+    cx?: number;
+    cy?: number;
+    size?: number;
+    payload?: EffDatum;
+  };
+  if (typeof cx !== "number" || typeof cy !== "number" || !payload) {
+    return <g />;
+  }
+  const color = categoryColor[payload.model.category];
+  const r = Math.max(Math.sqrt((size ?? 64) / Math.PI), 4);
+  const side = r * Math.SQRT2; // diamond with the same half-diagonal
+  return (
+    <g>
+      {isApiCategory(payload.model.category) ? (
+        <rect
+          x={cx - side / 2}
+          y={cy - side / 2}
+          width={side}
+          height={side}
+          transform={`rotate(45 ${cx} ${cy})`}
+          style={{ fill: color }}
+          fillOpacity={0.14}
+          stroke={color}
+          strokeWidth={1.25}
+        />
+      ) : (
+        <circle
+          cx={cx}
+          cy={cy}
+          r={r}
+          style={{ fill: color }}
+          fillOpacity={0.14}
+          stroke={color}
+          strokeWidth={1.25}
+        />
+      )}
+      <circle cx={cx} cy={cy} r={1.6} style={{ fill: color }} />
+      <text
+        x={cx}
+        y={cy - r - 6}
+        textAnchor="middle"
+        style={{
+          fill: CHART_LABEL_FILL,
+          fontSize: 11,
+          fontFamily: "var(--font-mono), 'IBM Plex Mono', monospace",
+          ...CHART_LABEL_KNOCKOUT,
+        }}
+      >
+        {shortName(payload.model)}
+      </text>
+    </g>
+  );
+}
+
+function EffTooltip(props: unknown) {
+  const { active, payload } = props as {
+    active?: boolean;
+    payload?: ReadonlyArray<{ payload?: EffDatum }>;
+  };
+  const d = payload?.[0]?.payload;
+  if (!active || !d) return null;
+  return (
+    <div className="glass depth-2 min-w-48 rounded-sm bg-surface-2/85 px-3 py-2.5">
+      <p className="text-sm leading-snug text-text">{d.model.name}</p>
+      <p className="num mt-0.5 text-[11px] tracking-wide text-muted">
+        {d.model.org} · {categoryLabels[d.model.category]}
+      </p>
+      <dl className="num mt-2 space-y-1 text-[12px]">
+        <div className="flex items-baseline justify-between gap-6">
+          <dt className="text-muted">RTFx</dt>
+          <dd className="text-text">{fmt(d.rtfx)}×</dd>
+        </div>
+        <div className="flex items-baseline justify-between gap-6">
+          <dt className="text-muted">WER</dt>
+          <dd className="text-text">{fmt(d.wer)}</dd>
+        </div>
+        <div className="flex items-baseline justify-between gap-6">
+          <dt className="text-muted">Params</dt>
+          <dd className="text-text">{fmt(d.paramsB, 3)}B</dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
+
+export interface EfficiencySectionProps {
+  models: ModelRow[];
+  /** Name of the dataset the comparison is scoped to (e.g. "ViMedCSS"). */
+  datasetName?: string;
+}
+
+export default function EfficiencySection({
+  models,
+  datasetName = "ViMedCSS",
+}: EfficiencySectionProps) {
+  const data: EffDatum[] = models.flatMap((m) => {
+    const s = m.metrics?.test;
+    if (typeof s?.rtfx !== "number" || typeof s?.wer !== "number") return [];
+    return [{ rtfx: s.rtfx, wer: s.wer, paramsB: m.paramsB ?? 0.1, model: m }];
+  });
+  const running = models.filter((m) => m.provenance === "running");
+  /* a sparse plot reads as broken unless the gap is named: when most
+     systems are unmeasured, say so inside the plot itself */
+  const unmeasured = models.length - data.length;
+  const sparse = data.length > 0 && unmeasured > models.length / 2;
+
+  return (
+    <section aria-label="Efficiency: throughput against accuracy">
+      <div className="glass depth-2 spotlight-card rounded-sm p-5">
+        {data.length > 0 ? (
+          <figure>
+            <div
+              className="relative h-[360px] w-full"
+              role="img"
+              aria-label={`Bubble chart of RTFx throughput against WER on the ${datasetName} Test split; bubble area scales with parameter count. ${data.length} platform-measured models plotted.`}
+            >
+              {sparse && (
+                <p className="num absolute top-10 left-16 z-10 max-w-[34ch] rounded-sm border border-dashed border-line bg-surface/70 px-2.5 py-1.5 text-[11px] leading-relaxed tracking-wide text-muted">
+                  {data.length} of {models.length} systems measured — RTFx only
+                  ships with platform-verified runs; the rest of this plane is
+                  the evidence gap, not the field.
+                </p>
+              )}
+              <ResponsiveContainer width="100%" height="100%">
+                <ScatterChart
+                  margin={{ top: 28, right: 36, bottom: 16, left: 8 }}
+                >
+                  <CartesianGrid stroke="var(--line)" strokeWidth={1} />
+                  <XAxis
+                    type="number"
+                    dataKey="rtfx"
+                    name="RTFx"
+                    domain={[0, "auto"]}
+                    tick={CHART_AXIS_TICK}
+                    tickLine={{ stroke: "var(--line)" }}
+                    axisLine={{ stroke: "var(--line)" }}
+                    label={{
+                      value: "RTFX × · BETTER →",
+                      position: "insideBottomRight",
+                      offset: -8,
+                      style: CHART_AXIS_LABEL,
+                    }}
+                  />
+                  <YAxis
+                    type="number"
+                    dataKey="wer"
+                    name="WER"
+                    domain={[15, 65]}
+                    tick={CHART_AXIS_TICK}
+                    tickLine={{ stroke: "var(--line)" }}
+                    axisLine={{ stroke: "var(--line)" }}
+                    width={44}
+                    label={{
+                      value: "WER % · ↓ BETTER",
+                      angle: -90,
+                      position: "insideLeft",
+                      offset: 8,
+                      style: { ...CHART_AXIS_LABEL, textAnchor: "middle" },
+                    }}
+                  />
+                  <ZAxis
+                    type="number"
+                    dataKey="paramsB"
+                    range={[80, 640]}
+                    name="Params (B)"
+                  />
+                  <Tooltip
+                    cursor={{ stroke: "var(--line)", strokeDasharray: "3 3" }}
+                    content={EffTooltip}
+                  />
+                  <Scatter data={data} shape={renderBubble} />
+                </ScatterChart>
+              </ResponsiveContainer>
+            </div>
+            <figcaption className="hairline-t mt-4 pt-3 text-[13px] text-muted">
+              RTFx = audio seconds ÷ wall seconds, measured on platform
+              hardware. Bubble area scales with parameter count. {datasetName}{" "}
+              test split · normalizer v0.1.
+            </figcaption>
+          </figure>
+        ) : (
+          /* slim status banner — the tall canvas is reserved for real data */
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-2 rounded-sm border border-dashed border-line bg-surface-2/40 px-4 py-3">
+            <span
+              aria-hidden
+              className="pulse-dot inline-block size-2 shrink-0 rounded-full bg-accent"
+            />
+            <p
+              className="num text-[12px] tracking-[0.18em] text-muted"
+              title="Throughput is only recorded when this platform executes the model itself; paper-imported rows never carry RTFx."
+            >
+              AWAITING PILOT DATA — RTFX REQUIRES A PLATFORM-VERIFIED RUN
+            </p>
+            {running.length > 0 && (
+              <ul className="flex flex-wrap items-center gap-x-4 gap-y-2">
+                {running.map((m) => (
+                  <li key={m.slug} className="flex items-center gap-2">
+                    <span className="num text-[12px] text-text">{m.name}</span>
+                    <ProvenanceChip provenance={m.provenance} />
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

src/components/compare/HeadToHead.tsx

@@ -0,0 +1,439 @@
+"use client";
+
+import clsx from "clsx";
+import { motion, MotionConfig } from "framer-motion";
+import { useSearchParams } from "next/navigation";
+import { useState } from "react";
+import FlagBadges from "@/components/ui/FlagBadges";
+import ProvenanceChip from "@/components/ui/ProvenanceChip";
+import {
+  categoryLabels,
+  fmt,
+  metricLabels,
+  provenanceLabels,
+} from "@/lib/data";
+import type { Category, MetricKey, ModelRow } from "@/lib/types";
+import {
+  H2H_METRICS,
+  METRIC_UNIT,
+  deltaTone,
+  fmtDelta,
+  hasEvidenceGap,
+  seriesColor,
+  type DeltaTone,
+} from "./compare-utils";
+
+const DEFAULT_A = "phowhisper-large";
+const DEFAULT_B = "whisper-large-v3";
+
+const toneClass: Record<DeltaTone, string> = {
+  better: "text-accent",
+  worse: "text-crit/90",
+  flat: "text-muted",
+};
+
+/* Entrance for freshly-selected column values: a short fade with a 2px
+   rise. MotionConfig reducedMotion="user" strips the transform for
+   reduced-motion users, leaving an instant-feeling opacity settle. */
+const VALUE_FADE = {
+  initial: { opacity: 0, y: 2 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.3, ease: "easeOut" },
+} as const;
+
+/* custom select caret: 1.5px-stroke chevron in the --muted token, painted
+   as a background so the native OS glyph never appears */
+const SELECT_CARET: React.CSSProperties = {
+  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23b9c9c2' stroke-width='1.5'/%3E%3C/svg%3E")`,
+  backgroundPosition: "right 10px center",
+  backgroundRepeat: "no-repeat",
+};
+
+/** [A, B, C] slugs; C may be "" (off). Honors ?m=slug,slug(,slug). */
+function parseM(raw: string | null, models: ModelRow[]): [string, string, string] {
+  const valid =
+    raw
+      ?.split(",")
+      .map((s) => s.trim())
+      .filter((s) => models.some((m) => m.slug === s)) ?? [];
+  const uniq = [...new Set(valid)];
+  const a = uniq[0] ?? DEFAULT_A;
+  let b = uniq[1] ?? DEFAULT_B;
+  if (b === a) b = a === DEFAULT_B ? DEFAULT_A : DEFAULT_B;
+  const c = uniq[2] && uniq[2] !== a && uniq[2] !== b ? uniq[2] : "";
+  return [a, b, c];
+}
+
+function syncUrl(sel: [string, string, string]) {
+  if (typeof window === "undefined") return;
+  const url = new URL(window.location.href);
+  url.searchParams.set("m", sel.filter(Boolean).join(","));
+  window.history.replaceState(null, "", url);
+}
+
+function ModelSelect({
+  id,
+  label,
+  value,
+  models,
+  allowNone,
+  onChange,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  models: ModelRow[];
+  allowNone?: boolean;
+  onChange: (slug: string) => void;
+}) {
+  const groups = (Object.keys(categoryLabels) as Category[])
+    .map((c) => ({ c, rows: models.filter((m) => m.category === c) }))
+    .filter((g) => g.rows.length > 0);
+  return (
+    <div className="flex min-w-52 flex-1 flex-col gap-1.5">
+      <label
+        htmlFor={id}
+        className="num text-[11px] uppercase tracking-[0.18em] text-muted"
+      >
+        {label}
+      </label>
+      <select
+        id={id}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="hairline num tactile w-full cursor-pointer appearance-none rounded-sm bg-surface-2 py-2 pr-8 pl-2.5 text-[12px] tracking-wide text-text outline-none transition-colors duration-200 ease-out hover:border-accent/40 focus-visible:border-accent/60 focus-visible:ring-1 focus-visible:ring-accent/40"
+        style={SELECT_CARET}
+      >
+        {allowNone && <option value="">— none —</option>}
+        {groups.map((g) => (
+          <optgroup key={g.c} label={categoryLabels[g.c]}>
+            {g.rows.map((m) => (
+              <option key={m.slug} value={m.slug}>
+                {m.name}
+                {hasEvidenceGap(m, "test")
+                  ? ` (${provenanceLabels[m.provenance].toLowerCase()})`
+                  : ""}
+              </option>
+            ))}
+          </optgroup>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+export interface HeadToHeadProps {
+  models: ModelRow[];
+  /** Name of the dataset the comparison is scoped to (e.g. "ViMedCSS"). */
+  datasetName?: string;
+}
+
+export default function HeadToHead({
+  models,
+  datasetName = "ViMedCSS",
+}: HeadToHeadProps) {
+  const searchParams = useSearchParams();
+  const [sel, setSel] = useState<[string, string, string]>(() =>
+    parseM(searchParams.get("m"), models),
+  );
+  const [showUnmeasured, setShowUnmeasured] = useState(false);
+
+  const pick = (i: 0 | 1 | 2) => (slug: string) => {
+    setSel((prev) => {
+      const next: [string, string, string] = [...prev];
+      next[i] = slug;
+      syncUrl(next);
+      return next;
+    });
+  };
+
+  const cols = sel
+    .filter(Boolean)
+    .map((s) => models.find((m) => m.slug === s))
+    .filter((m): m is ModelRow => Boolean(m));
+  const baseline = cols[0];
+  const gapModels = cols.filter((m) => hasEvidenceGap(m, "test"));
+  /* metrics at least one selected model has measured drive the table rows
+     and the profile bars; the rest collapse into one quiet expandable row */
+  const measuredMetrics = H2H_METRICS.filter((k) =>
+    cols.some((m) => typeof m.metrics?.test?.[k] === "number"),
+  );
+  const unmeasuredMetrics = H2H_METRICS.filter(
+    (k) => !cols.some((m) => typeof m.metrics?.test?.[k] === "number"),
+  );
+  const barMetrics = measuredMetrics;
+
+  return (
+    <MotionConfig reducedMotion="user">
+      <section aria-label="Head-to-head model comparison">
+        <div className="glass depth-2 spotlight-card rounded-sm p-5">
+          {/* selectors */}
+          <div className="flex flex-wrap items-end gap-4">
+            <ModelSelect
+              id="h2h-a"
+              label="Model A · baseline"
+              value={sel[0]}
+              models={models}
+              onChange={pick(0)}
+            />
+            <ModelSelect
+              id="h2h-b"
+              label="Model B"
+              value={sel[1]}
+              models={models}
+              onChange={pick(1)}
+            />
+            <ModelSelect
+              id="h2h-c"
+              label="Model C · optional"
+              value={sel[2]}
+              models={models}
+              allowNone
+              onChange={pick(2)}
+            />
+          </div>
+
+          {/* evidence-gap notices */}
+          {gapModels.length > 0 && (
+            <div className="mt-4 flex flex-col gap-2">
+              {gapModels.map((m) => (
+                <motion.p
+                  key={m.slug}
+                  {...VALUE_FADE}
+                  className="flex flex-wrap items-center gap-2 rounded-sm border border-dashed border-line bg-surface-2/40 px-3 py-2 text-[12px] text-muted"
+                >
+                  <span className="num tracking-wide">
+                    EVIDENCE GAP — {m.name} has no measurements on Test yet.
+                  </span>
+                  <ProvenanceChip provenance={m.provenance} />
+                </motion.p>
+              ))}
+            </div>
+          )}
+
+          {/* delta table */}
+          <div className="mt-5 overflow-x-auto">
+            <table className="w-full min-w-[560px] border-collapse text-sm">
+              <caption className="sr-only">
+                Metric comparison on the {datasetName} Test split. Deltas are
+                challenger minus baseline; green improves on the baseline, red
+                regresses.
+              </caption>
+              <thead>
+                <tr className="hairline-b text-left align-bottom">
+                  <th
+                    scope="col"
+                    className="num py-2.5 pr-3 text-[11px] font-normal uppercase tracking-[0.18em] text-muted"
+                  >
+                    Metric · Test
+                  </th>
+                  {cols.map((m, i) => (
+                    <th
+                      key={m.slug}
+                      scope="col"
+                      className="py-2.5 pr-3 font-normal"
+                    >
+                      <motion.span
+                        {...VALUE_FADE}
+                        className="flex flex-wrap items-center gap-2"
+                      >
+                        <span
+                          aria-hidden
+                          className="inline-block size-2 rounded-full"
+                          style={{ background: seriesColor[i] }}
+                        />
+                        <span className="text-text">{m.name}</span>
+                        <FlagBadges flags={m.flags} />
+                        {i === 0 && (
+                          <span className="num rounded-sm border border-line px-1.5 py-0.5 text-[11px] tracking-wide text-muted">
+                            BASELINE
+                          </span>
+                        )}
+                      </motion.span>
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {(showUnmeasured
+                  ? [...measuredMetrics, ...unmeasuredMetrics]
+                  : measuredMetrics
+                ).map((k: MetricKey) => {
+                  const base = baseline?.metrics?.test?.[k];
+                  return (
+                    <tr key={k} className="hairline-b">
+                      <th
+                        scope="row"
+                        className="num py-2.5 pr-3 text-left text-[12px] font-normal text-muted"
+                      >
+                        {metricLabels[k]}{" "}
+                        <span className="text-muted/60">{METRIC_UNIT[k]}</span>
+                      </th>
+                      {cols.map((m, i) => {
+                        const v = m.metrics?.test?.[k];
+                        const showDelta =
+                          i > 0 &&
+                          typeof v === "number" &&
+                          typeof base === "number";
+                        const d = showDelta ? v - base : 0;
+                        return (
+                          /* keyed by slug: swapping a model remounts the
+                             cell, so the fresh value fades in */
+                          <td key={m.slug} className="num py-2.5 pr-3">
+                            <motion.span
+                              {...VALUE_FADE}
+                              className="inline-block"
+                            >
+                              <span
+                                className={
+                                  typeof v === "number"
+                                    ? "text-text"
+                                    : "text-muted/60"
+                                }
+                              >
+                                {fmt(v)}
+                              </span>
+                              {showDelta && (
+                                <span
+                                  className={clsx(
+                                    "ml-2 text-[12px]",
+                                    toneClass[deltaTone(d, k)],
+                                  )}
+                                >
+                                  {fmtDelta(d)}
+                                </span>
+                              )}
+                            </motion.span>
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  );
+                })}
+                {unmeasuredMetrics.length > 0 && (
+                  <tr className="hairline-b">
+                    <td colSpan={cols.length + 1} className="py-2">
+                      <button
+                        type="button"
+                        aria-expanded={showUnmeasured}
+                        onClick={() => setShowUnmeasured((v) => !v)}
+                        className="num tactile inline-flex items-center gap-1.5 rounded-sm px-1 py-1 text-[11px] tracking-wide text-muted transition-colors duration-150 ease-out hover:text-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent/70"
+                      >
+                        <span aria-hidden>{showUnmeasured ? "▴" : "▸"}</span>
+                        {unmeasuredMetrics.length}{" "}
+                        {unmeasuredMetrics.length === 1 ? "metric" : "metrics"}{" "}
+                        · no platform trace yet for the selected models
+                      </button>
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {/* grouped horizontal bars */}
+          {barMetrics.length > 0 && (
+            <div className="hairline-t mt-5 pt-5">
+              <h3 className="num text-[11px] uppercase tracking-[0.18em] text-muted">
+                Profile — grouped bars, Test split
+              </h3>
+              <div className="mt-4 grid gap-x-10 gap-y-5 sm:grid-cols-2">
+                {barMetrics.map((k) => {
+                  const values = cols.map((m) => m.metrics?.test?.[k]);
+                  const max = Math.max(
+                    ...values.map((v) => (typeof v === "number" ? v : 0)),
+                  );
+                  /* %-unit metrics share one fixed 0–100 domain so equal bar
+                     lengths always encode equal values; RTFx (open-ended)
+                     keeps local-max scaling */
+                  const isPct = METRIC_UNIT[k] === "%";
+                  const widthPct = (v: number) =>
+                    isPct
+                      ? Math.min(v, 100)
+                      : max > 0
+                        ? Math.max((v / (max * 1.08)) * 100, 1.5)
+                        : 0;
+                  return (
+                    <div key={k}>
+                      <p className="num text-[11px] tracking-wide text-muted">
+                        {metricLabels[k]}{" "}
+                        <span className="text-muted/60">
+                          {METRIC_UNIT[k]}
+                          {isPct && " · 0–100"}
+                        </span>
+                      </p>
+                      <div className="mt-1.5 flex flex-col gap-1.5">
+                        {/* rows are keyed by SLOT, not slug — the bar element
+                            survives a model swap, so its width tweens to the
+                            new value (CSS transition; reduced-motion safe) */}
+                        {cols.map((m, i) => {
+                          const v = values[i];
+                          return (
+                            <div
+                              key={`slot-${i}`}
+                              className="flex items-center gap-2"
+                            >
+                              <div
+                                aria-hidden
+                                className="relative h-1.5 flex-1 rounded-sm bg-surface-2"
+                              >
+                                {/* scale ticks at 25 / 50 / 75 */}
+                                {isPct &&
+                                  [25, 50, 75].map((t) => (
+                                    <span
+                                      key={t}
+                                      className="absolute inset-y-0 w-px bg-line"
+                                      style={{ left: `${t}%` }}
+                                    />
+                                  ))}
+                                {typeof v === "number" &&
+                                  (i === 2 ? (
+                                    /* series 3: hairline-outlined, transparent
+                                       fill — distinct without more accent */
+                                    <span
+                                      className="absolute inset-y-0 left-0 rounded-sm border border-muted/70 bg-transparent transition-[width] duration-500 ease-out"
+                                      style={{
+                                        width: `${widthPct(v).toFixed(2)}%`,
+                                      }}
+                                    />
+                                  ) : (
+                                    <span
+                                      className="absolute inset-y-0 left-0 rounded-sm transition-[width] duration-500 ease-out"
+                                      style={{
+                                        width: `${widthPct(v).toFixed(2)}%`,
+                                        background: seriesColor[i],
+                                        opacity: 0.85,
+                                      }}
+                                    />
+                                  ))}
+                              </div>
+                              <span
+                                className={clsx(
+                                  "num w-14 text-right text-[11px]",
+                                  typeof v === "number"
+                                    ? "text-text"
+                                    : "text-muted/60",
+                                )}
+                              >
+                                {fmt(v)}
+                              </span>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          <p className="num mt-5 text-[11px] tracking-wide text-muted">
+            ALL VALUES: {datasetName.toUpperCase()} TEST SPLIT · NORMALIZER v0.1
+            — WER IS ONLY COMPARABLE WITHIN A NORMALIZER VERSION.
+          </p>
+        </div>
+      </section>
+    </MotionConfig>
+  );
+}

src/components/compare/ParetoChart.tsx

@@ -0,0 +1,350 @@
+"use client";
+
+import type { ReactElement } from "react";
+import {
+  CartesianGrid,
+  ReferenceArea,
+  ReferenceDot,
+  ReferenceLine,
+  ResponsiveContainer,
+  Scatter,
+  ScatterChart,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import ProvenanceChip from "@/components/ui/ProvenanceChip";
+import { categoryLabels, fmt, fmtCI } from "@/lib/data";
+import {
+  CHART_AXIS_LABEL,
+  CHART_AXIS_TICK,
+  CHART_LABEL_FILL,
+  CHART_LABEL_KNOCKOUT,
+  categoryColor,
+  dominatedBands,
+  domainTicks,
+  frontierSegments,
+  isApiCategory,
+  niceDomain,
+  paretoFrontier,
+  shortName,
+  type ParetoDatum,
+} from "./compare-utils";
+
+/* Datum enriched with chart-level placement hints. `annotated` marks the
+   frontier point the serif "adapted frontier" annotation anchors to — its
+   FRONTIER tag is suppressed so captions never pile onto one point. */
+type PlottedDatum = ParetoDatum & {
+  onFrontier: boolean;
+  flip: boolean;
+  annotated: boolean;
+};
+
+/* ------------------------------------------------------------------ */
+/* Point glyph: category-colored dot (diamond for API systems) ·       */
+/* dashed ring = paper-imported · amber ring = contamination ·         */
+/* concentric accent ring + FRONTIER tag for frontier members ·        */
+/* tiny mono label                                                     */
+/* ------------------------------------------------------------------ */
+
+function renderPoint(props: unknown): ReactElement {
+  const { cx, cy, payload } = props as {
+    cx?: number;
+    cy?: number;
+    payload?: PlottedDatum;
+  };
+  if (typeof cx !== "number" || typeof cy !== "number" || !payload) {
+    return <g />;
+  }
+  const m = payload.model;
+  const color = categoryColor[m.category];
+  const dashed = m.provenance === "paper-imported";
+  const contaminated = Boolean(m.flags?.contamination);
+  const frontier = payload.onFrontier;
+  const flip = payload.flip;
+  const annotated = payload.annotated;
+  return (
+    <g>
+      {contaminated && (
+        <circle
+          cx={cx}
+          cy={cy}
+          r={9.5}
+          fill="none"
+          stroke="var(--warn)"
+          strokeWidth={1}
+          opacity={0.85}
+        />
+      )}
+      {frontier && (
+        <circle
+          cx={cx}
+          cy={cy}
+          r={8.5}
+          fill="none"
+          stroke="var(--accent)"
+          strokeOpacity={0.6}
+          strokeWidth={1}
+        />
+      )}
+      {isApiCategory(m.category) ? (
+        <rect
+          x={cx - 4.4}
+          y={cy - 4.4}
+          width={8.8}
+          height={8.8}
+          transform={`rotate(45 ${cx} ${cy})`}
+          style={{ fill: color }}
+          fillOpacity={0.3}
+          stroke={color}
+          strokeWidth={1.25}
+          strokeDasharray={dashed ? "2.5 2.2" : undefined}
+        />
+      ) : (
+        <circle
+          cx={cx}
+          cy={cy}
+          r={5.5}
+          style={{ fill: color }}
+          fillOpacity={0.3}
+          stroke={color}
+          strokeWidth={1.25}
+          strokeDasharray={dashed ? "2.5 2.2" : undefined}
+        />
+      )}
+      <circle cx={cx} cy={cy} r={1.6} style={{ fill: color }} />
+      {/* frontier members: name lifted clear above the dot + mono tag below */}
+      <text
+        x={frontier ? cx : flip ? cx - 11 : cx + 11}
+        y={frontier ? cy - 14 : cy + 3.5}
+        textAnchor={frontier ? "middle" : flip ? "end" : "start"}
+        style={{
+          fill: CHART_LABEL_FILL,
+          fontSize: 11,
+          fontFamily: "var(--font-mono), 'IBM Plex Mono', monospace",
+          ...CHART_LABEL_KNOCKOUT,
+        }}
+      >
+        {shortName(m)}
+      </text>
+      {frontier && !annotated && (
+        <text
+          x={cx}
+          y={cy + 21}
+          textAnchor="middle"
+          style={{
+            fill: "var(--accent)",
+            fillOpacity: 0.9,
+            fontSize: 9,
+            letterSpacing: "0.18em",
+            fontFamily: "var(--font-mono), 'IBM Plex Mono', monospace",
+            ...CHART_LABEL_KNOCKOUT,
+          }}
+        >
+          FRONTIER
+        </text>
+      )}
+    </g>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Instrument tooltip — glass over the chart, never opaque black       */
+/* ------------------------------------------------------------------ */
+
+function ParetoTooltip(props: unknown) {
+  const { active, payload } = props as {
+    active?: boolean;
+    payload?: ReadonlyArray<{ payload?: ParetoDatum }>;
+  };
+  const d = payload?.[0]?.payload;
+  if (!active || !d) return null;
+  const m = d.model;
+  return (
+    <div className="glass depth-2 min-w-52 rounded-sm bg-surface-2/85 px-3 py-2.5">
+      <p className="text-sm leading-snug text-text">{m.name}</p>
+      <p className="num mt-0.5 text-[11px] tracking-wide text-muted">
+        {m.org} · {categoryLabels[m.category]}
+      </p>
+      <dl className="num mt-2 space-y-1 text-[12px]">
+        <div className="flex items-baseline justify-between gap-6">
+          <dt className="text-muted">WER</dt>
+          <dd className="text-right text-text">
+            {fmt(d.wer)}
+            {d.werCi && (
+              <span className="ml-1.5 text-[11px] text-muted">
+                {fmtCI(d.werCi)}
+              </span>
+            )}
+          </dd>
+        </div>
+        <div className="flex items-baseline justify-between gap-6">
+          <dt className="text-muted">CS-WER</dt>
+          <dd className="text-right text-text">
+            {fmt(d.csWer)}
+            {d.csWerCi && (
+              <span className="ml-1.5 text-[11px] text-muted">
+                {fmtCI(d.csWerCi)}
+              </span>
+            )}
+          </dd>
+        </div>
+      </dl>
+      <div className="mt-2">
+        <ProvenanceChip provenance={m.provenance} />
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Chart                                                               */
+/* ------------------------------------------------------------------ */
+
+export interface ParetoChartProps {
+  data: ParetoDatum[];
+  splitLabel: string;
+}
+
+export default function ParetoChart({ data, splitLabel }: ParetoChartProps) {
+  /* axis domains track the data extent (padded, snapped to 5s) so the
+     points command the canvas instead of huddling in a corner */
+  const xDomain = niceDomain(data.map((d) => d.wer));
+  const yDomain = niceDomain(data.map((d) => d.csWer));
+  const xTicks = domainTicks(xDomain);
+  const yTicks = domainTicks(yDomain);
+
+  const frontier = paretoFrontier(data);
+  const frontierSet = new Set(frontier.map((d) => d.model.slug));
+  const segments = frontierSegments(frontier, xDomain[1], yDomain[1]);
+  const bands = dominatedBands(frontier, xDomain[1], yDomain[1]);
+  const last = frontier[frontier.length - 1];
+
+  const plotted: PlottedDatum[] = data.map((d) => ({
+    ...d,
+    onFrontier: frontierSet.has(d.model.slug),
+    flip: d.wer > (xDomain[0] + xDomain[1]) / 2,
+    annotated: Boolean(last) && d.model.slug === last.model.slug,
+  }));
+
+  return (
+    <div
+      className="relative h-[440px] w-full"
+      role="img"
+      aria-label={`Scatter plot of overall WER against code-switch WER on the ${splitLabel} split, with the Pareto frontier drawn as a stepped line and the dominated region lightly shaded. ${data.length} models plotted; lower-left is better.`}
+    >
+      <ResponsiveContainer width="100%" height="100%">
+        <ScatterChart margin={{ top: 24, right: 36, bottom: 16, left: 8 }}>
+          <CartesianGrid stroke="var(--line)" strokeWidth={1} />
+          <XAxis
+            type="number"
+            dataKey="wer"
+            name="WER"
+            domain={xDomain}
+            ticks={xTicks}
+            tick={CHART_AXIS_TICK}
+            tickLine={{ stroke: "var(--line)" }}
+            axisLine={{ stroke: "var(--line)" }}
+            label={{
+              value: "WER % · ← BETTER",
+              position: "insideBottomRight",
+              offset: -8,
+              style: CHART_AXIS_LABEL,
+            }}
+          />
+          <YAxis
+            type="number"
+            dataKey="csWer"
+            name="CS-WER"
+            domain={yDomain}
+            ticks={yTicks}
+            tick={CHART_AXIS_TICK}
+            tickLine={{ stroke: "var(--line)" }}
+            axisLine={{ stroke: "var(--line)" }}
+            width={44}
+            label={{
+              value: "CS-WER % · ↓ BETTER",
+              angle: -90,
+              position: "insideLeft",
+              offset: 8,
+              style: { ...CHART_AXIS_LABEL, textAnchor: "middle" },
+            }}
+          />
+          {/* dominated region: the staircase boundary reads as a region edge */}
+          {bands.map((b, i) => (
+            <ReferenceArea
+              key={`dominated-${i}`}
+              x1={b.x1}
+              x2={b.x2}
+              y1={b.y1}
+              y2={b.y2}
+              fill="var(--accent)"
+              fillOpacity={0.06}
+              stroke="none"
+              ifOverflow="hidden"
+            />
+          ))}
+          {segments.map(([a, b], i) => (
+            <ReferenceLine
+              key={`frontier-${i}`}
+              segment={[a, b]}
+              stroke="var(--accent)"
+              strokeWidth={1}
+              strokeDasharray="4 3"
+              strokeOpacity={0.6}
+              ifOverflow="hidden"
+            />
+          ))}
+          {/* data-anchored frontier annotation — floats above the frontier's
+              horizontal run-out, clear of the frontier point's own label */}
+          {last && (
+            <ReferenceDot
+              x={last.wer + (xDomain[1] - xDomain[0]) * 0.18}
+              y={last.csWer + (yDomain[1] - yDomain[0]) * 0.06}
+              r={0}
+              fill="none"
+              stroke="none"
+              ifOverflow="hidden"
+              label={{
+                value: "adapted frontier",
+                position: "right",
+                offset: 0,
+                style: {
+                  textAnchor: "start",
+                  fill: "var(--accent)",
+                  fillOpacity: 0.85,
+                  fontSize: 16,
+                  fontStyle: "italic",
+                  fontFamily:
+                    "var(--font-display), 'Instrument Serif', Georgia, serif",
+                  ...CHART_LABEL_KNOCKOUT,
+                },
+              }}
+            />
+          )}
+          <Tooltip
+            cursor={{ stroke: "var(--line)", strokeDasharray: "3 3" }}
+            content={ParetoTooltip}
+          />
+          <Scatter data={plotted} shape={renderPoint} />
+        </ScatterChart>
+      </ResponsiveContainer>
+
+      {/* Quadrant captions — editorial, pinned at fixed insets from the
+          plot corners (plot edges: left 52px, top 24px, right 36px,
+          bottom ≈46px) so they frame the data */}
+      <p
+        aria-hidden
+        className="pointer-events-none absolute left-[68px] top-28 max-w-56 font-display text-[16px] italic leading-snug text-muted [text-shadow:0_0_6px_var(--surface),0_0_6px_var(--surface),0_0_6px_var(--surface)]"
+      >
+        Vietnamese-specialized: strong overall, weak CS
+      </p>
+      <p
+        aria-hidden
+        className="pointer-events-none absolute bottom-[58px] right-[52px] whitespace-nowrap text-right font-display text-[16px] italic leading-snug text-muted [text-shadow:0_0_6px_var(--surface),0_0_6px_var(--surface),0_0_6px_var(--surface)]"
+      >
+        multilingual: strong CS, weak overall
+      </p>
+    </div>
+  );
+}

src/components/compare/ParetoSection.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import SplitToggle from "@/components/ui/SplitToggle";
+import ProvenanceChip from "@/components/ui/ProvenanceChip";
+import { categoryLabels, splitLabels } from "@/lib/data";
+import type { Category, ModelRow, Split } from "@/lib/types";
+import { categoryColor, isApiCategory, paretoData } from "./compare-utils";
+import ParetoChart from "./ParetoChart";
+
+export interface ParetoSectionProps {
+  models: ModelRow[];
+  /** Name of the dataset the comparison is scoped to (e.g. "ViMedCSS"). */
+  datasetName?: string;
+}
+
+export default function ParetoSection({
+  models,
+  datasetName = "ViMedCSS",
+}: ParetoSectionProps) {
+  const [split, setSplit] = useState<Split>("test");
+  const data = useMemo(() => paretoData(models, split), [models, split]);
+  const running = models.filter((m) => m.provenance === "running");
+
+  const categories = useMemo(() => {
+    const present = new Set<Category>(data.map((d) => d.model.category));
+    return (Object.keys(categoryLabels) as Category[]).filter((c) =>
+      present.has(c),
+    );
+  }, [data]);
+
+  return (
+    <section aria-label="WER versus CS-WER Pareto frontier">
+      <div className="glass depth-2 spotlight-card rounded-sm p-5">
+        {/* control row: legend chips left, split toggle right */}
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <ul className="num flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[11px] tracking-wide text-muted">
+            {categories.map((c) => (
+              <li key={c} className="flex items-center gap-1.5">
+                <span
+                  aria-hidden
+                  className={
+                    isApiCategory(c)
+                      ? "inline-block size-2 rotate-45"
+                      : "inline-block size-2 rounded-full"
+                  }
+                  style={{ background: categoryColor[c] }}
+                />
+                {categoryLabels[c]}
+              </li>
+            ))}
+            <li className="flex items-center gap-1.5">
+              <span
+                aria-hidden
+                className="inline-block size-2.5 rounded-full border border-dashed border-muted/70"
+              />
+              paper-imported
+            </li>
+            <li className="flex items-center gap-1.5">
+              <span
+                aria-hidden
+                className="inline-block size-2.5 rounded-full border border-warn/80"
+              />
+              contamination
+            </li>
+            <li className="flex items-center gap-1.5">
+              <span
+                aria-hidden
+                className="inline-block h-px w-4 border-t border-dashed border-accent/60"
+              />
+              Pareto frontier
+            </li>
+          </ul>
+          <SplitToggle value={split} onChange={setSplit} />
+        </div>
+
+        {/* keyed on split so toggling cross-fades the whole canvas in;
+            soft-appear collapses under the global reduced-motion override */}
+        <figure key={split} className="soft-appear mt-4">
+          {data.length > 0 ? (
+            <ParetoChart data={data} splitLabel={splitLabels[split]} />
+          ) : (
+            <div className="flex h-[440px] flex-col items-center justify-center gap-4 rounded-sm border border-dashed border-line bg-surface-2/40 px-6 text-center">
+              <span
+                aria-hidden
+                className="pulse-dot inline-block size-2 rounded-full bg-accent"
+              />
+              <p className="num text-[12px] tracking-[0.18em] text-muted">
+                NO PAIRED WER / CS-WER RESULTS ON THE {datasetName.toUpperCase()}{" "}
+                {splitLabels[split].toUpperCase()} SPLIT YET
+              </p>
+              <p className="max-w-md text-[13px] leading-relaxed text-muted">
+                Published baselines did not report this split. The first
+                platform-verified points will land here when the pilot runs
+                complete.
+              </p>
+              {running.length > 0 && (
+                <ul className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2">
+                  {running.map((m) => (
+                    <li key={m.slug} className="flex items-center gap-2">
+                      <span className="num text-[12px] text-text">
+                        {m.name}
+                      </span>
+                      <ProvenanceChip provenance={m.provenance} />
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          )}
+          <figcaption className="hairline-t mt-4 pt-3 text-[13px] leading-relaxed text-muted">
+            <span className="font-display italic text-text/90">
+              The trade-off, in one plot:
+            </span>{" "}
+            on {datasetName}, Vietnamese-specialized models hold the left wall
+            but drift high on code-switched spans, multilingual models sink
+            lower on the right — and only adaptation reaches the lower-left,
+            where PhoWhisper-small + Attention-Guide sets the frontier at{" "}
+            <span className="num text-text">23.67</span> WER /{" "}
+            <span className="num text-text">19.50</span> CS-WER.
+          </figcaption>
+        </figure>
+      </div>
+    </section>
+  );
+}

src/components/compare/compare-utils.ts

@@ -0,0 +1,268 @@
+import type { Category, MetricKey, ModelRow, Split } from "@/lib/types";
+import { HIGHER_IS_BETTER } from "@/lib/data";
+
+/* ------------------------------------------------------------------ */
+/* Category color mapping — derived ONLY from globals.css tokens.      */
+/* vn-open = phosphor accent · multilingual = cool ice (accent→text)   */
+/* medical = sage · api-* = cool/neutral mixes drawn as DIAMONDS, so   */
+/* the warm --warn channel belongs exclusively to contamination.       */
+/* ------------------------------------------------------------------ */
+
+export const categoryColor: Record<Category, string> = {
+  "vn-open": "var(--accent)",
+  "multilingual-open": "color-mix(in srgb, var(--accent) 65%, var(--text) 35%)",
+  medical: "var(--text)",
+  "api-intl": "color-mix(in srgb, var(--text) 55%, var(--muted) 45%)",
+  "api-vn": "var(--muted)",
+};
+
+/** API points render as 45°-rotated squares instead of dots. */
+export function isApiCategory(c: Category): boolean {
+  return c === "api-intl" || c === "api-vn";
+}
+
+/* ------------------------------------------------------------------ */
+/* Shared Recharts text styles — single source for both compare        */
+/* charts. 11px floor and token-driven fills keep SVG text legible on  */
+/* the lighter glass panels.                                           */
+/* ------------------------------------------------------------------ */
+
+export const CHART_AXIS_TICK = {
+  fill: "var(--muted)",
+  fontSize: 11,
+  fontFamily: "var(--font-mono), 'IBM Plex Mono', monospace",
+} as const;
+
+export const CHART_AXIS_LABEL = {
+  fill: "var(--muted)",
+  fontSize: 11,
+  letterSpacing: "0.14em",
+  fontFamily: "var(--font-mono), 'IBM Plex Mono', monospace",
+} as const;
+
+/** Point labels knock out lines beneath them with a panel-toned halo —
+    charts now sit on glass surfaces, so the halo matches --surface,
+    not the page background. */
+export const CHART_LABEL_KNOCKOUT = {
+  paintOrder: "stroke",
+  stroke: "var(--surface)",
+  strokeWidth: 4,
+} as const;
+
+/** Near-text fill for chart point labels (brighter than --muted). */
+export const CHART_LABEL_FILL =
+  "color-mix(in srgb, var(--text) 86%, var(--muted) 14%)";
+
+/** Selection-order palette for head-to-head columns and profile bars.
+    Series 2 reads as bone-white with a teal cast so it never doubles the
+    accent; series 3 bars render hairline-outlined with transparent fill. */
+export const seriesColor: readonly string[] = [
+  "var(--accent)",
+  "color-mix(in srgb, var(--accent) 15%, var(--text) 85%)",
+  "var(--muted)",
+];
+
+/* ------------------------------------------------------------------ */
+/* Compact display names for chart point labels                        */
+/* ------------------------------------------------------------------ */
+
+const SHORT_NAMES: Record<string, string> = {
+  "phowhisper-small-ag": "PhoWhisper-S ·AG",
+  "phowhisper-small-lora": "PhoWhisper-S ·LoRA",
+  vietasr: "VietASR 68M",
+  "phowhisper-large": "PhoWhisper-L",
+  "whisper-large-v3": "Whisper-L v3",
+  "phowhisper-small": "PhoWhisper-S",
+  "wav2vec2-base-vi": "w2v2-base-vi",
+  "whisper-small": "Whisper-S",
+  "mms-1b": "MMS-1B",
+  "zipformer-30m": "Zipformer-30M",
+  "qwen3-asr-0.6b": "Qwen3-ASR-0.6B",
+  "gemini-2.5-pro": "Gemini 2.5 Pro",
+  "gpt-4o-transcribe": "gpt-4o-transcribe",
+  "elevenlabs-scribe-v2": "Scribe v2",
+  "fpt-ai-stt": "FPT.AI STT",
+};
+
+export function shortName(m: ModelRow): string {
+  return SHORT_NAMES[m.slug] ?? m.name;
+}
+
+/* ------------------------------------------------------------------ */
+/* Pareto math (minimize both axes; lower-left is better)              */
+/* ------------------------------------------------------------------ */
+
+export interface ParetoDatum {
+  wer: number;
+  csWer: number;
+  werCi?: [number, number];
+  csWerCi?: [number, number];
+  model: ModelRow;
+}
+
+/** One datum per model holding BOTH wer and csWer on the split. */
+export function paretoData(models: ModelRow[], split: Split): ParetoDatum[] {
+  return models.flatMap((m) => {
+    const s = m.metrics?.[split];
+    if (typeof s?.wer !== "number" || typeof s?.csWer !== "number") return [];
+    return [
+      {
+        wer: s.wer,
+        csWer: s.csWer,
+        werCi: s.werCi,
+        csWerCi: s.csWerCi,
+        model: m,
+      },
+    ];
+  });
+}
+
+/** Non-dominated subset, sorted by WER ascending (csWer strictly falls). */
+export function paretoFrontier(points: ParetoDatum[]): ParetoDatum[] {
+  const sorted = [...points].sort((a, b) => a.wer - b.wer || a.csWer - b.csWer);
+  const out: ParetoDatum[] = [];
+  let best = Infinity;
+  for (const p of sorted) {
+    if (p.csWer < best) {
+      out.push(p);
+      best = p.csWer;
+    }
+  }
+  return out;
+}
+
+export type Segment = readonly [
+  { x: number; y: number },
+  { x: number; y: number },
+];
+
+/**
+ * Staircase boundary of the region dominated by the frontier,
+ * extended to the chart domain edges. Steps go right, then down.
+ */
+export function frontierSegments(
+  frontier: ParetoDatum[],
+  xMax: number,
+  yMax: number,
+): Segment[] {
+  if (frontier.length === 0) return [];
+  const segs: Segment[] = [];
+  const first = frontier[0];
+  const last = frontier[frontier.length - 1];
+  // drop in from the top edge to the best-WER point
+  segs.push([
+    { x: first.wer, y: yMax },
+    { x: first.wer, y: first.csWer },
+  ]);
+  for (let i = 0; i < frontier.length - 1; i += 1) {
+    const a = frontier[i];
+    const b = frontier[i + 1];
+    segs.push([
+      { x: a.wer, y: a.csWer },
+      { x: b.wer, y: a.csWer },
+    ]);
+    segs.push([
+      { x: b.wer, y: a.csWer },
+      { x: b.wer, y: b.csWer },
+    ]);
+  }
+  // run out to the right edge at the best CS-WER level
+  segs.push([
+    { x: last.wer, y: last.csWer },
+    { x: xMax, y: last.csWer },
+  ]);
+  return segs;
+}
+
+/**
+ * Non-overlapping vertical bands covering the dominated region (up-right
+ * of the staircase): band i spans x from frontier[i] to frontier[i+1]
+ * (last band runs to xMax), y from frontier[i].csWer to yMax.
+ */
+export function dominatedBands(
+  frontier: ParetoDatum[],
+  xMax: number,
+  yMax: number,
+): Array<{ x1: number; x2: number; y1: number; y2: number }> {
+  return frontier.map((p, i) => ({
+    x1: p.wer,
+    x2: frontier[i + 1]?.wer ?? xMax,
+    y1: p.csWer,
+    y2: yMax,
+  }));
+}
+
+/* ------------------------------------------------------------------ */
+/* Axis domain helpers (data-driven, padded, rounded to 2s or 5s)      */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Data extent padded ~10–15% and snapped outward — to multiples of 2 when
+ * the span is tight (< 15 units) so the points command the canvas, else 5.
+ */
+export function niceDomain(values: number[]): [number, number] {
+  if (values.length === 0) return [0, 100];
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const pad = Math.max((max - min) * 0.1, 1.5);
+  const snap = max - min < 15 ? 2 : 5;
+  return [
+    Math.floor((min - pad) / snap) * snap,
+    Math.ceil((max + pad) / snap) * snap,
+  ];
+}
+
+/** Tick positions for a niceDomain: every 2 / 5 / 10 by span width. */
+export function domainTicks([lo, hi]: [number, number]): number[] {
+  const span = hi - lo;
+  const step = span <= 16 ? 2 : span <= 30 ? 5 : 10;
+  const out: number[] = [];
+  for (let t = lo; t <= hi; t += step) out.push(t);
+  return out;
+}
+
+/* ------------------------------------------------------------------ */
+/* Head-to-head helpers                                                */
+/* ------------------------------------------------------------------ */
+
+export const H2H_METRICS: readonly MetricKey[] = [
+  "wer",
+  "csWer",
+  "nWer",
+  "cer",
+  "mtrExact",
+  "mtrFuzzy",
+  "rtfx",
+];
+
+export const METRIC_UNIT: Record<MetricKey, string> = {
+  wer: "%",
+  cer: "%",
+  csWer: "%",
+  nWer: "%",
+  mtrExact: "%",
+  mtrFuzzy: "%",
+  rtfx: "×",
+};
+
+export type DeltaTone = "better" | "worse" | "flat";
+
+/** Sign-aware quality of a challenger-minus-baseline delta. */
+export function deltaTone(delta: number, metric: MetricKey): DeltaTone {
+  if (delta === 0) return "flat";
+  const improved = HIGHER_IS_BETTER.has(metric) ? delta > 0 : delta < 0;
+  return improved ? "better" : "worse";
+}
+
+/** "+3.23" / "−1.40" / "±0.00" (true minus sign for mono alignment). */
+export function fmtDelta(delta: number, digits = 2): string {
+  const sign = delta > 0 ? "+" : delta < 0 ? "−" : "±";
+  return `${sign}${Math.abs(delta).toFixed(digits)}`;
+}
+
+/** True when the model has no numeric metric at all on the split. */
+export function hasEvidenceGap(m: ModelRow, split: Split): boolean {
+  const s = m.metrics?.[split];
+  if (!s) return true;
+  return !H2H_METRICS.some((k) => typeof s[k] === "number");
+}

src/components/docs/CautionCallout.tsx

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+import { AlertTriangle } from "lucide-react";
+import type { ReactNode } from "react";
+
+export interface CautionCalloutProps {
+  /** mono kicker, e.g. "Caution · Label provenance" */
+  eyebrow?: string;
+  title: string;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Prominent amber caution block — reserved for contamination and
+ * domain-validity warnings (--warn semantics only).
+ */
+export default function CautionCallout({
+  eyebrow = "Caution",
+  title,
+  children,
+  className,
+}: CautionCalloutProps) {
+  return (
+    <aside
+      role="note"
+      className={clsx(
+        "depth-1 rounded-sm border border-warn/30 bg-warn-dim p-5",
+        className,
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <AlertTriangle size={18} aria-hidden className="mt-0.5 shrink-0 text-warn" />
+        <div>
+          <p className="num text-[11px] uppercase tracking-[0.2em] text-warn">
+            {eyebrow}
+          </p>
+          <h3 className="mt-1 font-display text-xl text-text">{title}</h3>
+          <div className="mt-2 flex flex-col gap-2 text-[13px] leading-relaxed text-muted">
+            {children}
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}

src/components/docs/HourBar.tsx

@@ -0,0 +1,43 @@
+import clsx from "clsx";
+
+export interface HourBarProps {
+  /** 0..1 portion of the track to fill */
+  share: number;
+  /** accent = primary leaderboard data · accent-soft = secondary live data · muted = everything else */
+  tone?: "muted" | "accent" | "accent-soft";
+  className?: string;
+}
+
+const tones: Record<NonNullable<HourBarProps["tone"]>, string> = {
+  /* token-derived teal-tinted fill so even "everything else" bars carry
+     a quiet phosphor cast instead of grey-on-grey */
+  muted: "bg-[color-mix(in_srgb,var(--accent)_18%,var(--muted)_50%)]",
+  accent: "bg-accent/75",
+  "accent-soft": "bg-accent/40",
+};
+
+/**
+ * Proportional hour bar. Purely decorative — always pair with the printed
+ * number; the bar itself is aria-hidden.
+ */
+export default function HourBar({
+  share,
+  tone = "muted",
+  className,
+}: HourBarProps) {
+  const clamped = Math.max(0, Math.min(1, share));
+  return (
+    <div
+      aria-hidden
+      className={clsx(
+        "hairline h-2 w-full overflow-hidden rounded-sm bg-surface-2",
+        className,
+      )}
+    >
+      <div
+        className={clsx("h-full", tones[tone])}
+        style={{ width: `${clamped * 100}%` }}
+      />
+    </div>
+  );
+}

src/components/docs/ManifestCard.tsx

@@ -0,0 +1,79 @@
+import { ANCHOR_DATASET_ID, HARNESS_VERSION, NORMALIZER_VERSION } from "@/lib/data";
+
+export interface ManifestCardProps {
+  /** Registry id rendered in the exemplar's dataset field. */
+  datasetId?: string;
+  className?: string;
+}
+
+const manifestFor = (datasetId: string) => `{
+  "run_id":     "2026-06-09T21:14:02Z-a41f",
+  "model":      { "id": "vinai/PhoWhisper-small", "revision": "84f3c1d" },
+  "harness":    "${HARNESS_VERSION}",
+  "normalizer": "${NORMALIZER_VERSION}",
+  "dataset":    { "id": "${datasetId}", "split": "test" },
+  "hardware":   "1x RTX 4090 24GB / CUDA 12.4",
+  "seeds":      { "global": 1337 },
+  "decode":     { "beam_size": 5, "temperature": 0.0, "bias_list": null }
+}`;
+
+const FIELDS: ReadonlyArray<{ key: string; gloss: string }> = [
+  {
+    key: "model.revision",
+    gloss: "Pins exact weights — a commit hash, never a moving tag.",
+  },
+  {
+    key: "harness",
+    gloss: "Version of the scoring code that produced every number in the row.",
+  },
+  {
+    key: "normalizer",
+    gloss: "Text-normalization version. WER is only comparable within it.",
+  },
+  {
+    key: "dataset",
+    gloss:
+      "Registry id and split the run scored — every manifest is scoped to exactly one dataset.",
+  },
+  {
+    key: "hardware",
+    gloss: "The machine behind RTFx — published so speed claims have context.",
+  },
+  {
+    key: "seeds",
+    gloss: "Decode determinism: same manifest in, same transcript out.",
+  },
+  {
+    key: "decode",
+    gloss: "Beam, temperature, bias list — Track B records the bias-list hash here.",
+  },
+];
+
+/** Anatomy of a run manifest: schematic mono block plus field glosses. */
+export default function ManifestCard({
+  datasetId = ANCHOR_DATASET_ID,
+  className,
+}: ManifestCardProps) {
+  return (
+    <div
+      className={`hairline spotlight-card depth-1 flex flex-col gap-4 rounded-sm bg-surface p-5${className ? ` ${className}` : ""}`}
+    >
+      <p className="num text-[11px] uppercase tracking-[0.18em] text-muted">
+        run_manifest.json — published with every platform-verified run
+      </p>
+      <pre className="num hairline overflow-x-auto rounded-sm bg-surface-2 p-4 text-[12px] leading-relaxed text-text">
+        {manifestFor(datasetId)}
+      </pre>
+      <dl className="grid gap-x-6 gap-y-3 sm:grid-cols-2">
+        {FIELDS.map((f) => (
+          <div key={f.key}>
+            <dt className="num text-[12px] text-text">{f.key}</dt>
+            <dd className="mt-0.5 text-[12px] leading-relaxed text-muted">
+              {f.gloss}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+}

src/components/docs/MetricDefCard.tsx

@@ -0,0 +1,77 @@
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import Badge from "@/components/ui/Badge";
+
+export interface MetricDefCardProps {
+  /** short symbol, e.g. "CS-WER" */
+  abbr: string;
+  /** spelled-out name, e.g. "Code-switch word error rate" */
+  name: string;
+  /** mono formula line; omit on roadmap ghosts without a fixed definition */
+  formula?: string;
+  /** "lower is better" / "higher is better" */
+  direction?: string;
+  /** ghost treatment for roadmap metrics */
+  roadmap?: boolean;
+  children: ReactNode;
+  className?: string;
+}
+
+/** Typeset metric definition card: serif symbol, mono formula, prose gloss. */
+export default function MetricDefCard({
+  abbr,
+  name,
+  formula,
+  direction,
+  roadmap = false,
+  children,
+  className,
+}: MetricDefCardProps) {
+  return (
+    <div
+      className={clsx(
+        "flex flex-col gap-2.5 rounded-sm p-5 spotlight-card",
+        roadmap
+          ? "border border-dashed border-line bg-transparent"
+          : "hairline depth-1 bg-surface",
+        className,
+      )}
+    >
+      <div className="flex items-baseline justify-between gap-3">
+        <h3
+          className={clsx(
+            "font-display text-2xl leading-none",
+            roadmap ? "text-muted" : "text-text",
+          )}
+        >
+          {abbr}
+        </h3>
+        {roadmap ? (
+          <Badge variant="ghost">Roadmap</Badge>
+        ) : (
+          direction && (
+            <span className="num whitespace-nowrap text-[11px] uppercase tracking-[0.14em] text-muted">
+              {direction}
+            </span>
+          )
+        )}
+      </div>
+      <p className="text-[11px] uppercase tracking-[0.14em] text-muted">
+        {name}
+      </p>
+      {formula && (
+        <code
+          className={clsx(
+            "num block whitespace-pre-wrap rounded-sm px-3 py-2 text-[12px]",
+            roadmap
+              ? "border border-dashed border-line text-muted"
+              : "hairline bg-surface-2 text-text",
+          )}
+        >
+          {formula}
+        </code>
+      )}
+      <p className="text-[13px] leading-relaxed text-muted">{children}</p>
+    </div>
+  );
+}

src/components/docs/OnboardingCriteria.tsx

@@ -0,0 +1,76 @@
+import clsx from "clsx";
+
+export interface OnboardingCriterion {
+  title: string;
+  detail: string;
+}
+
+/**
+ * The six onboarding criteria — single source of truth, consumed by the
+ * methodology #onboarding section, the datasets index CTA card, and the
+ * coming-soon dataset teasers.
+ */
+export const ONBOARDING_CRITERIA: ReadonlyArray<OnboardingCriterion> = [
+  {
+    title: "Open or contracted license",
+    detail:
+      "Redistribution rights documented up front — an open license, or a signed contract for held-out corpora like the private clinic set.",
+  },
+  {
+    title: "Transparent provenance",
+    detail:
+      "Where every clip came from, how transcripts were produced, and who verified them — published as part of the dataset profile.",
+  },
+  {
+    title: "Fixed frozen splits",
+    detail:
+      "Train, Valid, Test (and Hard where defined) frozen before the first run. Any revision creates a new dataset version — never a silent edit.",
+  },
+  {
+    title: "Contamination policy",
+    detail:
+      "Systems that touched the labels — for example LLM-seeded transcripts — are declared and flagged permanently on that dataset's leaderboards.",
+  },
+  {
+    title: "Normalizer compatibility",
+    detail:
+      "References must score cleanly under the platform normalizer; orthographic quirks are documented and resolved before the first run.",
+  },
+  {
+    title: "Six-metric coverage",
+    detail:
+      "WER, CER, CS-WER, N-WER, MTR, and RTFx must be computable from the references — or the gaps declared on the dataset profile.",
+  },
+];
+
+export interface OnboardingCriteriaProps {
+  items?: ReadonlyArray<OnboardingCriterion>;
+  className?: string;
+}
+
+/** Numbered grid of dataset-onboarding criteria. */
+export default function OnboardingCriteria({
+  items = ONBOARDING_CRITERIA,
+  className,
+}: OnboardingCriteriaProps) {
+  return (
+    <ol className={clsx("grid gap-3 sm:grid-cols-2 lg:grid-cols-3", className)}>
+      {items.map((item, i) => (
+        <li
+          key={item.title}
+          className="hairline spotlight-card depth-1 flex flex-col gap-1.5 rounded-sm bg-surface p-4"
+        >
+          <div className="flex items-baseline gap-2.5">
+            <span aria-hidden className="num text-[12px] text-muted">
+              {String(i + 1).padStart(2, "0")}
+            </span>
+            <h3 className="text-[14px] font-medium text-text">{item.title}</h3>
+          </div>
+          <p className="pl-[1.85rem] text-[13px] leading-relaxed text-muted">
+            {item.detail}
+          </p>
+        </li>
+      ))}
+    </ol>
+  );
+}

src/components/docs/PipelineSteps.tsx

@@ -0,0 +1,48 @@
+export interface PipelineStep {
+  title: string;
+  detail: string;
+  /** mono stat shown beside the title, e.g. "64,232 entries" */
+  stat?: string;
+}
+
+export interface PipelineStepsProps {
+  steps: PipelineStep[];
+}
+
+/** Numbered construction-pipeline steps with a hairline connector spine. */
+export default function PipelineSteps({ steps }: PipelineStepsProps) {
+  return (
+    <ol className="flex flex-col stagger-spring">
+      {steps.map((step, i) => (
+        <li
+          key={step.title}
+          className="relative grid grid-cols-[2.5rem_1fr] gap-x-4 pb-7 last:pb-0"
+        >
+          {i < steps.length - 1 && (
+            <span
+              aria-hidden
+              className="absolute bottom-0 left-5 top-11 w-px bg-line"
+            />
+          )}
+          <span
+            aria-hidden
+            className="num hairline flex size-10 items-center justify-center rounded-sm bg-surface-2 text-[13px] text-text"
+          >
+            {String(i + 1).padStart(2, "0")}
+          </span>
+          <div className="pt-1.5">
+            <div className="flex flex-wrap items-baseline gap-x-3 gap-y-0.5">
+              <h3 className="text-sm font-medium text-text">{step.title}</h3>
+              {step.stat && (
+                <span className="num text-[12px] text-muted">{step.stat}</span>
+              )}
+            </div>
+            <p className="mt-1 max-w-xl text-[13px] leading-relaxed text-muted">
+              {step.detail}
+            </p>
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}

src/components/docs/ProvenanceLadder.tsx

@@ -0,0 +1,82 @@
+import ProvenanceChip from "@/components/ui/ProvenanceChip";
+import type { Provenance } from "@/lib/types";
+
+const LADDER: ReadonlyArray<{ p: Provenance; desc: string }> = [
+  {
+    p: "platform-verified",
+    desc: "Run by the platform harness, on platform hardware, from a pinned model revision. The full run manifest is published beside the number. The only class eligible for a SOTA badge.",
+  },
+  {
+    p: "self-reported",
+    desc: "Submitted by the system’s authors with a manifest, reproduced on their hardware rather than ours. Honor-system until the private canary subset ships.",
+  },
+  {
+    p: "api-snapshot",
+    desc: "Run through the platform harness against the live commercial API on a given date. We hold the hypotheses and bootstrap CIs, but the service has no pinned revision and runs on the vendor’s hardware — so RTFx is omitted and the row is never SOTA-eligible. Re-run on a quarterly drift schedule.",
+  },
+  {
+    p: "paper-imported",
+    desc: "Transcribed from a published paper. Normalizer and decode settings may differ from ours, so these rows wear a dashed outline everywhere they appear.",
+  },
+];
+
+const STATES: ReadonlyArray<{ p: Provenance; desc: string }> = [
+  {
+    p: "running",
+    desc: "A platform run is executing right now. Metrics appear the moment the run completes and is verified.",
+  },
+  {
+    p: "planned",
+    desc: "Queued for a platform run. No numbers yet — the row exists so the roadmap is legible.",
+  },
+];
+
+/** Trust ladder: three provenance classes ranked, plus the two row states. */
+export default function ProvenanceLadder() {
+  return (
+    <div className="flex flex-col gap-4 stagger-spring">
+      <ol className="hairline spotlight-card depth-1 flex flex-col rounded-sm bg-surface px-5 py-1">
+        {LADDER.map((item, i) => (
+          <li
+            key={item.p}
+            className={
+              "grid grid-cols-[2rem_minmax(9.5rem,11rem)_1fr] items-start gap-x-4 py-4 " +
+              (i < LADDER.length - 1 ? "hairline-b" : "")
+            }
+          >
+            <span className="num pt-0.5 text-[12px] text-muted">
+              {String(i + 1).padStart(2, "0")}
+            </span>
+            <ProvenanceChip provenance={item.p} className="justify-self-start" />
+            <p className="text-[13px] leading-relaxed text-muted">{item.desc}</p>
+          </li>
+        ))}
+      </ol>
+
+      <div className="hairline spotlight-card depth-1 flex flex-col rounded-sm bg-surface px-5 py-1">
+        <p className="num hairline-b py-3 text-[11px] uppercase tracking-[0.18em] text-muted">
+          Row states — not trust classes
+        </p>
+        <ul className="flex flex-col">
+          {STATES.map((item, i) => (
+            <li
+              key={item.p}
+              className={
+                "grid grid-cols-[2rem_minmax(9.5rem,11rem)_1fr] items-start gap-x-4 py-4 " +
+                (i < STATES.length - 1 ? "hairline-b" : "")
+              }
+            >
+              <span aria-hidden className="num pt-0.5 text-[12px] text-muted/50">
+                —
+              </span>
+              <ProvenanceChip provenance={item.p} className="justify-self-start" />
+              <p className="text-[13px] leading-relaxed text-muted">
+                {item.desc}
+              </p>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

src/components/docs/RoadmapStrip.tsx

@@ -0,0 +1,81 @@
+import clsx from "clsx";
+import Badge from "@/components/ui/Badge";
+
+export interface RoadmapItem {
+  name: string;
+  status: "live" | "next" | "north-star";
+  /** leading data figure, typeset in mono (e.g. "34.57 h") */
+  stat?: string;
+  detail: string;
+}
+
+export interface RoadmapStripProps {
+  items: RoadmapItem[];
+}
+
+const statusMeta: Record<
+  RoadmapItem["status"],
+  { label: string; variant: "accent" | "outline" | "ghost"; card: string }
+> = {
+  live: {
+    label: "Live",
+    variant: "accent",
+    card: "hairline depth-1 bg-surface",
+  },
+  next: {
+    label: "Next",
+    variant: "outline",
+    card: "hairline depth-1 bg-surface",
+  },
+  "north-star": {
+    label: "North star",
+    variant: "ghost",
+    card: "border border-dashed border-line bg-transparent",
+  },
+};
+
+/** Multi-dataset roadmap: live anchor → next corpus → north-star evaluation. */
+export default function RoadmapStrip({ items }: RoadmapStripProps) {
+  return (
+    <ol className="grid gap-3 md:grid-cols-3 stagger-spring">
+      {items.map((item, i) => {
+        const meta = statusMeta[item.status];
+        return (
+          <li
+            key={item.name}
+            className={clsx("flex flex-col gap-2 rounded-sm p-5", meta.card)}
+          >
+            <div className="flex items-center justify-between gap-2">
+              <span className="num text-[11px] tracking-[0.18em] text-muted">
+                {String(i + 1).padStart(2, "0")}
+              </span>
+              <Badge variant={meta.variant}>
+                {item.status === "live" && (
+                  <span
+                    aria-hidden
+                    className="pulse-dot inline-block size-1.5 rounded-full bg-accent"
+                  />
+                )}
+                {meta.label}
+              </Badge>
+            </div>
+            <h3
+              className={clsx(
+                "font-display text-xl",
+                item.status === "north-star" ? "text-muted" : "text-text",
+              )}
+            >
+              {item.name}
+            </h3>
+            <p className="text-[13px] leading-relaxed text-muted">
+              {item.stat && (
+                <span className="num text-text">{item.stat} </span>
+              )}
+              {item.detail}
+            </p>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

src/components/docs/SplitMiniBar.tsx

@@ -0,0 +1,74 @@
+import clsx from "clsx";
+import { fmt } from "@/lib/data";
+import type { DatasetInfo } from "@/lib/types";
+
+type Splits = NonNullable<DatasetInfo["splits"]>;
+
+export interface SplitMiniBarProps {
+  splits: Splits;
+  className?: string;
+}
+
+/* Segment palette mirrors HourBar tones: Test carries the phosphor note,
+   Hard a softer echo, Train/Valid stay quiet teal-greys. */
+const SEGMENTS: ReadonlyArray<{
+  key: keyof Splits;
+  label: string;
+  fill: string;
+}> = [
+  {
+    key: "train",
+    label: "Train",
+    fill: "bg-[color-mix(in_srgb,var(--accent)_16%,var(--muted)_46%)]",
+  },
+  {
+    key: "valid",
+    label: "Valid",
+    fill: "bg-[color-mix(in_srgb,var(--accent)_10%,var(--muted)_30%)]",
+  },
+  { key: "test", label: "Test", fill: "bg-accent/75" },
+  { key: "hard", label: "Hard", fill: "bg-accent/40" },
+];
+
+/**
+ * Compact split-distribution readout for dataset cards: one segmented
+ * hour bar plus a mono legend. The bar is decorative; the legend carries
+ * the numbers.
+ */
+export default function SplitMiniBar({ splits, className }: SplitMiniBarProps) {
+  const total = SEGMENTS.reduce((sum, s) => sum + splits[s.key].hours, 0);
+
+  return (
+    <div className={clsx("flex flex-col gap-2.5", className)}>
+      <div
+        aria-hidden
+        className="hairline flex h-2.5 w-full gap-px overflow-hidden rounded-sm bg-surface-2"
+      >
+        {SEGMENTS.map((s) => (
+          <div
+            key={s.key}
+            className={clsx("h-full", s.fill)}
+            style={{ width: `${(splits[s.key].hours / total) * 100}%` }}
+          />
+        ))}
+      </div>
+      {/* 2×2 legend — four columns crowd the card's narrow readout column
+          and wrap the unit onto its own line */}
+      <dl className="grid grid-cols-2 gap-x-8 gap-y-1.5">
+        {SEGMENTS.map((s) => (
+          <div key={s.key} className="flex items-baseline gap-1.5">
+            <span
+              aria-hidden
+              className={clsx("size-2 shrink-0 self-center rounded-[1px]", s.fill)}
+            />
+            <dt className="text-[12px] text-muted">{s.label}</dt>
+            <dd className="num ml-auto text-[12px] whitespace-nowrap text-text">
+              {fmt(splits[s.key].hours)}
+              <span className="text-muted"> h</span>
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+}

src/components/docs/SplitsTable.tsx

@@ -0,0 +1,138 @@
+import Badge from "@/components/ui/Badge";
+import { fmt } from "@/lib/data";
+import type { DatasetInfo } from "@/lib/types";
+import HourBar from "./HourBar";
+
+export interface SplitsTableProps {
+  /** Frozen split inventory of a live dataset. */
+  splits: NonNullable<DatasetInfo["splits"]>;
+  /** Dataset name for the accessible caption, e.g. "ViMedCSS". */
+  datasetName?: string;
+}
+
+const ROWS: ReadonlyArray<{
+  key: keyof NonNullable<DatasetInfo["splits"]>;
+  name: string;
+  tone: "muted" | "accent" | "accent-soft";
+  badge?: { label: string; variant: "accent" | "outline" };
+  role: string;
+}> = [
+  {
+    key: "train",
+    name: "Train",
+    tone: "muted",
+    role: "Adaptation corpus — Track C systems may train on this split and nothing else.",
+  },
+  {
+    key: "valid",
+    name: "Valid",
+    tone: "muted",
+    role: "Hyperparameter tuning and checkpoint selection. Never reported as a result.",
+  },
+  {
+    key: "test",
+    name: "Test",
+    tone: "accent",
+    badge: { label: "Primary", variant: "accent" },
+    role: "The primary leaderboard — every headline number on the home page is scored here.",
+  },
+  {
+    key: "hard",
+    name: "Hard",
+    tone: "accent-soft",
+    badge: { label: "Generalization", variant: "outline" },
+    role: "Rare and unseen terms, disjoint from Train — the generalization leaderboard.",
+  },
+];
+
+/** Dataset split table with proportional hour-bars and role captions. */
+export default function SplitsTable({ splits, datasetName }: SplitsTableProps) {
+  const totalHours = ROWS.reduce((sum, r) => sum + splits[r.key].hours, 0);
+
+  return (
+    <div className="hairline spotlight-row depth-1 overflow-x-auto rounded-sm bg-surface">
+      <table className="w-full min-w-[680px] border-collapse text-sm">
+        <caption className="sr-only">
+          {datasetName ?? "Dataset"} splits: hours, utterances, share of total
+          audio, and the role of each split
+        </caption>
+        <thead>
+          <tr className="hairline-b text-left">
+            <th
+              scope="col"
+              className="num px-4 py-3 text-[11px] font-normal uppercase tracking-[0.14em] text-muted"
+            >
+              Split
+            </th>
+            <th
+              scope="col"
+              className="num px-4 py-3 text-right text-[11px] font-normal uppercase tracking-[0.14em] text-muted"
+            >
+              Hours
+            </th>
+            <th
+              scope="col"
+              className="num px-4 py-3 text-right text-[11px] font-normal uppercase tracking-[0.14em] text-muted"
+            >
+              Utterances
+            </th>
+            <th
+              scope="col"
+              className="num px-4 py-3 text-[11px] font-normal uppercase tracking-[0.14em] text-muted"
+            >
+              Share of audio
+            </th>
+            <th
+              scope="col"
+              className="num px-4 py-3 text-[11px] font-normal uppercase tracking-[0.14em] text-muted"
+            >
+              Role
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {ROWS.map((row, i) => {
+            const s = splits[row.key];
+            const share = s.hours / totalHours;
+            return (
+              <tr
+                key={row.key}
+                className={i < ROWS.length - 1 ? "hairline-b align-top" : "align-top"}
+              >
+                <th
+                  scope="row"
+                  className="whitespace-nowrap px-4 py-3.5 text-left font-medium text-text"
+                >
+                  <span className="inline-flex items-center gap-2">
+                    {row.name}
+                    {row.badge && (
+                      <Badge variant={row.badge.variant}>{row.badge.label}</Badge>
+                    )}
+                  </span>
+                </th>
+                <td className="num whitespace-nowrap px-4 py-3.5 text-right text-text">
+                  {fmt(s.hours)}
+                  <span className="text-muted"> h</span>
+                </td>
+                <td className="num whitespace-nowrap px-4 py-3.5 text-right text-text">
+                  {s.utts.toLocaleString("en-US")}
+                </td>
+                <td className="px-4 py-3.5">
+                  <div className="flex items-center gap-2.5">
+                    <HourBar share={share} tone={row.tone} className="w-24 md:w-32" />
+                    <span className="num text-[11px] text-muted">
+                      {(share * 100).toFixed(1)}%
+                    </span>
+                  </div>
+                </td>
+                <td className="min-w-[16rem] px-4 py-3.5 text-[13px] leading-relaxed text-muted">
+                  {row.role}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}

src/components/docs/StatTile.tsx

@@ -0,0 +1,42 @@
+import clsx from "clsx";
+
+export interface StatTileProps {
+  label: string;
+  /** pre-formatted value, e.g. "34.57" or "2–21" */
+  value: string;
+  /** rendered after the value, muted, e.g. "h" or "s" */
+  suffix?: string;
+  /** small mono sub-line */
+  sub?: string;
+  className?: string;
+}
+
+/**
+ * Static stat tile for docs pages — visually identical to MetricCard but
+ * server-rendered and string-valued (handles ranges like "2–21 s").
+ */
+export default function StatTile({
+  label,
+  value,
+  suffix,
+  sub,
+  className,
+}: StatTileProps) {
+  return (
+    <div
+      className={clsx(
+        "hairline spotlight-card depth-1 flex flex-col gap-1 rounded-sm bg-surface px-4 py-3",
+        className,
+      )}
+    >
+      <span className="text-[11px] uppercase tracking-[0.14em] text-muted">
+        {label}
+      </span>
+      <span className="num text-2xl leading-none text-text">
+        {value}
+        {suffix && <span className="ml-0.5 text-base text-muted">{suffix}</span>}
+      </span>
+      {sub && <span className="num text-[11px] text-muted">{sub}</span>}
+    </div>
+  );
+}

src/components/docs/TopicBars.tsx

@@ -0,0 +1,47 @@
+import { fmt } from "@/lib/data";
+import HourBar from "./HourBar";
+
+export interface TopicBarsProps {
+  items: ReadonlyArray<{ label: string; vi?: string; hours: number }>;
+}
+
+/** Horizontal topic-distribution bars (widths relative to the largest topic). */
+export default function TopicBars({ items }: TopicBarsProps) {
+  const max = Math.max(...items.map((t) => t.hours));
+  const total = items.reduce((sum, t) => sum + t.hours, 0);
+
+  return (
+    <ul className="hairline depth-1 flex flex-col rounded-sm bg-surface px-4 py-1">
+      {items.map((t, i) => (
+        <li
+          key={t.label}
+          className={
+            "grid grid-cols-[minmax(9rem,12rem)_1fr_auto] items-center gap-x-4 py-3 " +
+            (i < items.length - 1 ? "hairline-b" : "")
+          }
+        >
+          <span className="flex flex-col">
+            <span className="text-[13px] text-text">{t.label}</span>
+            {t.vi && (
+              <span lang="vi" className="text-[11px] leading-snug text-muted">
+                {t.vi}
+              </span>
+            )}
+          </span>
+          {/* the dominant domain carries the one quiet phosphor note */}
+          <HourBar
+            share={t.hours / max}
+            tone={t.hours === max ? "accent-soft" : "muted"}
+          />
+          <span className="num whitespace-nowrap text-right text-[12px] text-text">
+            {fmt(t.hours, 1)}
+            <span className="text-muted"> h</span>
+            <span className="ml-2 hidden text-muted sm:inline">
+              {((t.hours / total) * 100).toFixed(0)}%
+            </span>
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+}

src/components/docs/TracksTable.tsx

@@ -0,0 +1,140 @@
+import clsx from "clsx";
+import Badge from "@/components/ui/Badge";
+
+type TrackStatus = "live" | "config-ready" | "roadmap";
+
+const STATUS: Record<
+  TrackStatus,
+  { label: string; variant: "accent" | "outline" | "ghost" }
+> = {
+  live: { label: "Live", variant: "accent" },
+  "config-ready": { label: "Config-ready", variant: "outline" },
+  roadmap: { label: "Roadmap", variant: "ghost" },
+};
+
+const TRACKS: ReadonlyArray<{
+  id: string;
+  name: string;
+  rule: string;
+  status: TrackStatus;
+}> = [
+  {
+    id: "A",
+    name: "Zero-shot",
+    rule: "The model exactly as released. No dataset-specific signal of any kind — no prompts, no bias lists, no weight updates.",
+    status: "live",
+  },
+  {
+    id: "B",
+    name: "Contextual biasing",
+    rule: "Bias lists (medical-term hotwords or prompts) allowed at decode time. No weight updates; the bias list is recorded in the run manifest.",
+    status: "live",
+  },
+  {
+    id: "C",
+    name: "Adapted",
+    rule: "Weights updated using the dataset's frozen Train split only; Valid for tuning. No other in-domain data of any kind.",
+    status: "live",
+  },
+  {
+    id: "D",
+    name: "Open",
+    rule: "Any external data or method, fully disclosed. The anything-goes track.",
+    status: "roadmap",
+  },
+  {
+    id: "E",
+    name: "Efficiency",
+    rule: "Deployment-realistic constraints: under 1B parameters, CPU decode, under 8GB VRAM.",
+    status: "config-ready",
+  },
+  {
+    id: "F",
+    name: "Conversational",
+    rule: "WER + DER on multi-speaker dialogue. Requires conversational corpora (VietMed, clinic data) — the track closest to production.",
+    status: "roadmap",
+  },
+];
+
+/** Tracks A–F: what each track allows, with launch-status chips. */
+export default function TracksTable() {
+  return (
+    <div className="hairline spotlight-row depth-1 overflow-x-auto rounded-sm bg-surface">
+      <table className="w-full min-w-[640px] border-collapse text-sm">
+        <caption className="sr-only">
+          Evaluation tracks A through F with their rules and launch status
+        </caption>
+        <thead>
+          <tr className="hairline-b text-left">
+            <th
+              scope="col"
+              className="num px-4 py-3 text-[11px] font-normal uppercase tracking-[0.14em] text-muted"
+            >
+              Track
+            </th>
+            <th
+              scope="col"
+              className="num px-4 py-3 text-[11px] font-normal uppercase tracking-[0.14em] text-muted"
+            >
+              Allowed signal
+            </th>
+            <th
+              scope="col"
+              className="num px-4 py-3 text-[11px] font-normal uppercase tracking-[0.14em] text-muted"
+            >
+              Status
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {TRACKS.map((t, i) => {
+            const dim = t.status === "roadmap";
+            return (
+              <tr
+                key={t.id}
+                className={i < TRACKS.length - 1 ? "hairline-b align-top" : "align-top"}
+              >
+                <th
+                  scope="row"
+                  className="whitespace-nowrap px-4 py-3.5 text-left"
+                >
+                  <span className="inline-flex items-baseline gap-2.5">
+                    <span
+                      className={clsx(
+                        "num text-base",
+                        dim ? "text-muted/70" : "text-text",
+                      )}
+                    >
+                      {t.id}
+                    </span>
+                    <span
+                      className={clsx(
+                        "text-sm font-medium",
+                        dim ? "text-muted/70" : "text-text",
+                      )}
+                    >
+                      {t.name}
+                    </span>
+                  </span>
+                </th>
+                <td
+                  className={clsx(
+                    "min-w-[20rem] px-4 py-3.5 text-[13px] leading-relaxed",
+                    dim ? "text-muted/70" : "text-muted",
+                  )}
+                >
+                  {t.rule}
+                </td>
+                <td className="whitespace-nowrap px-4 py-3.5">
+                  <Badge variant={STATUS[t.status].variant}>
+                    {STATUS[t.status].label}
+                  </Badge>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}

src/components/leaderboard/HeroStats.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { ArrowUpRight } from "lucide-react";
+
+/* layout effect on the client, plain effect during SSR (where it never
+   runs) — silences React's useLayoutEffect-on-server warning */
+const useIsoLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+export interface HeroStatsProps {
+  /** total audio hours, e.g. 34.57 */
+  hours: number;
+  /** utterance count, e.g. 16576 */
+  utterances: number;
+  /** distinct code-switched terms, e.g. 889 */
+  csTerms: number;
+  /** dataset the snapshot belongs to, e.g. "ViMedCSS" */
+  datasetName: string;
+  /** dataset card route, e.g. "/datasets/vimedcss" */
+  datasetHref: string;
+}
+
+/** Spring-based easing for smooth, physical feel */
+function springEase(t: number): number {
+  return 1 - Math.pow(1 - t, 3);
+}
+
+/** Shared 0→1 spring ease progress over ~700ms (instant under reduced motion).
+    Starts at 1 so server markup (and no-JS readers) carry the real values —
+    the pre-paint layout effect rewinds to 0 before the count-up plays. */
+function useSpringCount(duration = 700): number {
+  const [progress, setProgress] = useState(1);
+  const raf = useRef<number>(0);
+
+  useIsoLayoutEffect(() => {
+    const reduced = window.matchMedia(
+      "(prefers-reduced-motion: reduce)",
+    ).matches;
+    if (reduced) return;
+    /* rewind before first paint, then spring up to the real values */
+    setProgress(0);
+    let t0: number | undefined;
+    const tick = (t: number) => {
+      t0 ??= t;
+      const p = Math.min((t - t0) / duration, 1);
+      setProgress(springEase(p));
+      if (p < 1) raf.current = requestAnimationFrame(tick);
+    };
+    raf.current = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf.current);
+  }, [duration]);
+
+  return progress;
+}
+
+/**
+ * Anchor-dataset snapshot band: a bento panel with a scope strip naming the
+ * dataset the numbers belong to (the hub hosts several datasets, so these
+ * stats must never read as platform totals), then four stat tiles whose
+ * numerals spring-count in once on mount.
+ */
+export default function HeroStats({
+  hours,
+  utterances,
+  csTerms,
+  datasetName,
+  datasetHref,
+}: HeroStatsProps) {
+  const p = useSpringCount();
+
+  const cells: { value: string; unit?: string; label: string }[] = [
+    { value: (hours * p).toFixed(2), unit: "h", label: "audio" },
+    {
+      value: Math.round(utterances * p).toLocaleString("en-US"),
+      label: "utterances",
+    },
+    {
+      value: Math.round(csTerms * p).toLocaleString("en-US"),
+      label: "CS medical terms",
+    },
+    { value: "2–21", unit: "s", label: "clip length" },
+  ];
+
+  return (
+    <section
+      aria-label={`${datasetName} anchor-dataset snapshot`}
+      className="hairline depth-2 overflow-hidden rounded-sm"
+    >
+      {/* scope strip — these numbers describe the anchor dataset, not the hub */}
+      <header className="hairline-b flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 bg-surface-2/60 px-4 py-2.5 backdrop-blur-sm">
+        <p className="num text-[11px] tracking-[0.2em] text-muted uppercase">
+          Anchor dataset snapshot —{" "}
+          <span className="text-text">{datasetName} v1</span>
+        </p>
+        <Link
+          href={datasetHref}
+          className="num inline-flex items-center gap-1 rounded-sm text-[11px] tracking-[0.14em] text-muted uppercase transition-colors duration-150 ease-out hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent/70"
+        >
+          Dataset card
+          <ArrowUpRight size={12} aria-hidden />
+        </Link>
+      </header>
+
+      <dl className="grid grid-cols-2 gap-px bg-line md:grid-cols-4">
+        {cells.map((c, i) => (
+          <div
+            key={c.label}
+            className="flex flex-col-reverse gap-1.5 bg-surface px-4 py-4 spring-in"
+            style={{ animationDelay: `${120 + i * 60}ms` }}
+          >
+            <dt className="text-[11px] uppercase tracking-[0.16em] text-muted">
+              {c.label}
+            </dt>
+            <dd className="num text-3xl leading-none text-text">
+              {c.value}
+              {c.unit && (
+                <span className="ml-1 text-lg text-muted">{c.unit}</span>
+              )}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </section>
+  );
+}

src/components/leaderboard/LeaderboardTable.tsx

@@ -0,0 +1,1013 @@
+"use client";
+
+import clsx from "clsx";
+import Link from "next/link";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ArrowUp, ChevronsUpDown, Search, ShieldCheck } from "lucide-react";
+import { MotionConfig, motion } from "framer-motion";
+import Badge from "@/components/ui/Badge";
+import CIBar from "@/components/ui/CIBar";
+import FlagBadges from "@/components/ui/FlagBadges";
+import ProvenanceChip from "@/components/ui/ProvenanceChip";
+import SplitToggle from "@/components/ui/SplitToggle";
+import {
+  HIGHER_IS_BETTER,
+  categoryLabels,
+  fmt,
+  metricLabels,
+  splitLabels,
+  trackLabels,
+} from "@/lib/data";
+import type {
+  Category,
+  MetricKey,
+  ModelRow,
+  Split,
+  SplitInfo,
+  Track,
+} from "@/lib/types";
+
+export interface LeaderboardTableProps {
+  models: ModelRow[];
+  /** Dataset the board is scoped to, e.g. "ViMedCSS" — shown in the title. */
+  datasetName: string;
+  /** Hard-split profile, for the explanatory note when Hard is selected. */
+  hardSplit: SplitInfo;
+}
+
+/* ------------------------------------------------------------------ */
+/* Column + filter configuration                                       */
+/* ------------------------------------------------------------------ */
+
+interface MetricCol {
+  key: MetricKey;
+  label: string;
+  title: string;
+}
+
+const METRIC_COLS: MetricCol[] = [
+  { key: "wer", label: "WER", title: "Word error rate (%) — lower is better" },
+  {
+    key: "csWer",
+    label: "CS-WER",
+    title: "Errors inside code-switched English spans (%) — lower is better",
+  },
+  {
+    key: "nWer",
+    label: "N-WER",
+    title: "WER on Vietnamese-only tokens (%) — lower is better",
+  },
+  {
+    key: "cer",
+    label: "CER",
+    title: "Character error rate (%) — lower is better",
+  },
+  {
+    key: "mtrExact",
+    label: "MTR",
+    title:
+      "Medical term recall, exact over fuzzy tier (%) — higher is better; sorts by exact",
+  },
+  {
+    key: "rtfx",
+    label: "RTFx",
+    title: "Audio seconds ÷ wall seconds — higher is faster",
+  },
+];
+
+const TRACKS: ("all" | Track)[] = ["all", "A", "B", "C"];
+
+const CATEGORY_SHORT: Record<Category, string> = {
+  "vn-open": "VN open",
+  "multilingual-open": "Multilingual",
+  medical: "Medical",
+  "api-intl": "API · intl",
+  "api-vn": "API · VN",
+};
+
+const CATEGORIES: ("all" | Category)[] = [
+  "all",
+  "vn-open",
+  "multilingual-open",
+  "medical",
+  "api-intl",
+  "api-vn",
+];
+
+/* ------------------------------------------------------------------ */
+/* Small local pieces                                                   */
+/* ------------------------------------------------------------------ */
+
+function FilterChip({
+  active,
+  onClick,
+  title,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  title?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      aria-pressed={active}
+      onClick={onClick}
+      title={title}
+      className={clsx(
+        "num rounded-sm border px-2 py-1 text-[11px] leading-4 tracking-wide whitespace-nowrap",
+        "transition-[color,background-color,border-color,transform] duration-150 ease-out active:scale-[0.96]",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent/70",
+        active
+          ? "border-muted/40 bg-surface-2 text-text"
+          : "border-line bg-transparent text-muted hover:bg-surface-2/60 hover:text-text",
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+/** 244M / 1.55B from the paramsB field. */
+function fmtParams(b?: number): string {
+  if (b === undefined) return "";
+  return b < 1 ? `${Math.round(b * 1000)}M` : `${b}B`;
+}
+
+/* ------------------------------------------------------------------ */
+/* Table                                                                */
+/* ------------------------------------------------------------------ */
+
+export default function LeaderboardTable({
+  models,
+  datasetName,
+  hardSplit,
+}: LeaderboardTableProps) {
+  const [split, setSplit] = useState<Split>("test");
+  const [track, setTrack] = useState<"all" | Track>("all");
+  const [category, setCategory] = useState<"all" | Category>("all");
+  const [zone1Only, setZone1Only] = useState(false);
+  const [query, setQuery] = useState("");
+  const [sortKey, setSortKey] = useState<MetricKey>("wer");
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+  const [showEmptyCols, setShowEmptyCols] = useState(false);
+
+  /* horizontal-scroll affordance: a right-edge fade that lifts once the
+     table is scrolled to its end (or fits without scrolling) */
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [moreRight, setMoreRight] = useState(false);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const update = () =>
+      setMoreRight(el.scrollWidth - el.clientWidth - el.scrollLeft > 8);
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", update);
+      ro.disconnect();
+    };
+  }, []);
+
+  const bestFirstDir = HIGHER_IS_BETTER.has(sortKey) ? "desc" : "asc";
+
+  function onSort(key: MetricKey) {
+    if (key === sortKey) {
+      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setSortKey(key);
+      setSortDir(HIGHER_IS_BETTER.has(key) ? "desc" : "asc");
+    }
+  }
+
+  const { scored, unscored } = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const filtered = models.filter(
+      (m) =>
+        (track === "all" || m.track === track) &&
+        (category === "all" || m.category === category) &&
+        (!zone1Only || m.flags?.zone1 === true) &&
+        (!q || `${m.name} ${m.org} ${m.slug}`.toLowerCase().includes(q)),
+    );
+    const hasMetric = (m: ModelRow) =>
+      typeof m.metrics?.[split]?.[sortKey] === "number";
+    const dir = sortDir === "asc" ? 1 : -1;
+    const scored = filtered
+      .filter(hasMetric)
+      .sort(
+        (a, b) =>
+          dir *
+          ((a.metrics![split]![sortKey] as number) -
+            (b.metrics![split]![sortKey] as number)),
+      );
+    /* unscored order: measured-elsewhere rows, then running, then planned */
+    const statusRank = (m: ModelRow) =>
+      m.provenance === "planned" ? 2 : m.provenance === "running" ? 1 : 0;
+    const unscored = filtered
+      .filter((m) => !hasMetric(m))
+      .sort((a, b) => statusRank(a) - statusRank(b));
+    return { scored, unscored };
+  }, [models, split, track, category, zone1Only, query, sortKey, sortDir]);
+
+  /** Best-first rank regardless of the current sort direction. */
+  const rankOf = (i: number) =>
+    sortDir === bestFirstDir ? i + 1 : scored.length - i;
+
+  /* metric columns with no measured value in the current view: header and
+     dashes drop to whisper weight so absence never outshouts presence */
+  const emptyCols = useMemo(() => {
+    const rows = [...scored, ...unscored];
+    return new Set(
+      METRIC_COLS.filter(
+        (c) =>
+          !rows.some((m) => typeof m.metrics?.[split]?.[c.key] === "number"),
+      ).map((c) => c.key),
+    );
+  }, [scored, unscored, split]);
+
+  /* fully-empty secondary columns collapse into one ghost column by
+     default (WER / CS-WER, the headline pair, never collapse); the moment
+     any row carries a value, the column restores automatically */
+  const collapsible = METRIC_COLS.filter(
+    (c) => c.key !== "wer" && c.key !== "csWer" && emptyCols.has(c.key),
+  );
+  const collapsed = !showEmptyCols && collapsible.length > 0;
+  const visibleCols = collapsed
+    ? METRIC_COLS.filter((c) => !collapsible.some((e) => e.key === c.key))
+    : METRIC_COLS;
+  const visibleKeys = new Set(visibleCols.map((c) => c.key));
+  const collapsedLabels = collapsible.map((c) => c.label).join(", ");
+  /* 6 fixed columns (#, model, params, track, license, provenance) +
+     metric columns + the ghost/toggle column when anything is collapsible */
+  const colCount = 6 + visibleCols.length + (collapsible.length > 0 ? 1 : 0);
+  /* undefined = no ghost column · "" = column present but expanded */
+  const ghostCell =
+    collapsible.length > 0 ? (collapsed ? collapsedLabels : "") : undefined;
+
+  return (
+    /* reducedMotion="user" makes framer-motion honor prefers-reduced-motion
+       (transforms freeze, opacity still resolves) — the CSS-side animations
+       are already covered by the global override in globals.css */
+    <MotionConfig reducedMotion="user">
+      <section
+        aria-labelledby="leaderboard-heading"
+        className="flex flex-col gap-3"
+      >
+        {/* ----- title — the board is scoped to one dataset + split ----- */}
+        <h2
+          id="leaderboard-heading"
+          className="font-display mb-1 text-[1.7rem] leading-tight tracking-tight text-text md:text-3xl"
+        >
+          Leaderboard — {datasetName}{" "}
+          <span className="text-muted italic">
+            {splitLabels[split].toLowerCase()} split
+          </span>
+        </h2>
+
+        {/* ----- controls ----- */}
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
+          <SplitToggle value={split} onChange={setSplit} />
+
+          <div
+            role="group"
+            aria-label="Track filter"
+            className="flex items-center gap-1.5"
+          >
+            <span className="num text-[11px] uppercase tracking-[0.18em] text-muted">
+              Track
+            </span>
+            {TRACKS.map((t) => (
+              <FilterChip
+                key={t}
+                active={track === t}
+                onClick={() => setTrack(t)}
+                title={t === "all" ? "All tracks" : trackLabels[t]}
+              >
+                {t === "all" ? "All" : t}
+              </FilterChip>
+            ))}
+          </div>
+
+          <div
+            role="group"
+            aria-label="Category filter"
+            className="flex flex-wrap items-center gap-1.5"
+          >
+            <span className="num text-[11px] uppercase tracking-[0.18em] text-muted">
+              Class
+            </span>
+            {CATEGORIES.map((c) => (
+              <FilterChip
+                key={c}
+                active={category === c}
+                onClick={() => setCategory(c)}
+                title={c === "all" ? "All model classes" : categoryLabels[c]}
+              >
+                {c === "all" ? "All" : CATEGORY_SHORT[c]}
+              </FilterChip>
+            ))}
+          </div>
+
+          <button
+            type="button"
+            aria-pressed={zone1Only}
+            onClick={() => setZone1Only((v) => !v)}
+            title="Zone 1: self-hostable on one 24GB GPU, license-clean"
+            className={clsx(
+              "num inline-flex items-center gap-1.5 rounded-sm border px-2 py-1 text-[11px] leading-4 tracking-wide",
+              "transition-[color,background-color,border-color,transform] duration-150 ease-out active:scale-[0.96]",
+              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent/70",
+              zone1Only
+                ? "border-accent/30 bg-accent-dim text-accent"
+                : "border-line text-muted hover:bg-surface-2/60 hover:text-text",
+            )}
+          >
+            <ShieldCheck size={13} aria-hidden />
+            Zone-1 deployable
+          </button>
+
+          <label className="relative ml-auto">
+            <span className="sr-only">Search models</span>
+            <Search
+              size={14}
+              aria-hidden
+              className="absolute top-1/2 left-2.5 -translate-y-1/2 text-muted"
+            />
+            <input
+              type="search"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search model or org…"
+              className={clsx(
+                "hairline num w-52 rounded-sm bg-surface py-1.5 pr-2 pl-8 text-[12px] text-text",
+                "placeholder:text-muted/70",
+                "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-accent/60",
+              )}
+            />
+          </label>
+        </div>
+
+        {/* ----- hard-split note ----- */}
+        {split === "hard" && (
+          <p className="hairline rounded-sm bg-surface-2/60 px-3 py-2 text-[12px] leading-relaxed text-muted">
+            <span className="num text-text">Hard split</span> —{" "}
+            <span className="num">{fmt(hardSplit.hours)} h</span> /{" "}
+            <span className="num">
+              {hardSplit.utts.toLocaleString("en-US")}
+            </span>{" "}
+            utterances of rare or unseen code-switched terms: the generalization
+            leaderboard. Paper-imported rows have not published Hard-split
+            numbers, so fewer rows are scored here.
+          </p>
+        )}
+
+        {/* ----- mobile stacked rows (below md): rank + name, then WER ----- */}
+        <div className="hairline overflow-hidden rounded-sm bg-surface md:hidden">
+          <ol className="divide-y divide-line">
+            {scored.map((m, i) => (
+              <MobileRow
+                key={m.slug}
+                model={m}
+                split={split}
+                rank={rankOf(i)}
+              />
+            ))}
+          </ol>
+          {unscored.length > 0 && (
+            <>
+              <p className="num hairline-t bg-surface-2/40 px-3 py-2 text-[10.5px] tracking-[0.2em] text-muted uppercase">
+                Unscored on {splitLabels[split]} — awaiting runs or imports
+              </p>
+              <ul className="hairline-t divide-y divide-line">
+                {unscored.map((m) => (
+                  <MobileRow key={m.slug} model={m} split={split} />
+                ))}
+              </ul>
+            </>
+          )}
+          {scored.length === 0 && unscored.length === 0 && (
+            <p className="px-3 py-10 text-center text-sm text-muted">
+              No models match the current filters.
+            </p>
+          )}
+        </div>
+
+        {/* ----- full table (md and up) -----
+          breakout-wide lets the board outgrow the editorial column on xl+
+          screens — every column fits without horizontal scroll */}
+        <div className="breakout-wide">
+          <div className="relative">
+            <motion.div
+              ref={scrollRef}
+              className="hairline hidden overflow-x-auto rounded-sm bg-surface md:block"
+              initial={{ opacity: 0, y: 16 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.5,
+                delay: 0.2,
+                ease: [0.22, 1, 0.36, 1],
+              }}
+            >
+              <table className="w-full min-w-[1024px] border-collapse text-left">
+                <caption className="sr-only">
+                  Model leaderboard on the {datasetName} {splitLabels[split]}{" "}
+                  split, sorted by {metricLabels[sortKey]}
+                </caption>
+                <thead>
+                  <tr className="hairline-b bg-surface-2/50">
+                    <th
+                      scope="col"
+                      className="num py-2.5 pr-1 pl-3 text-right text-[11px] font-normal tracking-[0.14em] text-muted uppercase"
+                    >
+                      #
+                    </th>
+                    <th
+                      scope="col"
+                      className="num px-3 py-2.5 text-[11px] font-normal tracking-[0.14em] text-muted uppercase"
+                    >
+                      Model
+                    </th>
+                    <th
+                      scope="col"
+                      title="Parameter count"
+                      className="num px-2 py-2.5 text-right text-[11px] font-normal tracking-[0.14em] text-muted uppercase"
+                    >
+                      Params
+                    </th>
+                    <th
+                      scope="col"
+                      className="num px-2 py-2.5 text-[11px] font-normal tracking-[0.14em] text-muted uppercase"
+                    >
+                      Track
+                    </th>
+                    <th
+                      scope="col"
+                      className="num px-2 py-2.5 text-[11px] font-normal tracking-[0.14em] text-muted uppercase"
+                    >
+                      License
+                    </th>
+                    {visibleCols.map((col) => {
+                      const active = sortKey === col.key;
+                      const empty = emptyCols.has(col.key);
+                      return (
+                        <th
+                          key={col.key}
+                          scope="col"
+                          aria-sort={
+                            active
+                              ? sortDir === "asc"
+                                ? "ascending"
+                                : "descending"
+                              : "none"
+                          }
+                          className="px-2 py-1.5 text-right"
+                        >
+                          <button
+                            type="button"
+                            onClick={() => onSort(col.key)}
+                            title={col.title}
+                            className={clsx(
+                              "group num inline-flex items-center gap-1 rounded-sm px-1.5 py-1 text-[11px] font-normal tracking-[0.14em] uppercase",
+                              "transition-[color,background-color,transform] duration-150 ease-out",
+                              "hover:bg-surface-2/70 active:scale-[0.95]",
+                              "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent/70",
+                              active
+                                ? "text-text"
+                                : empty
+                                  ? "text-muted/50 hover:text-muted"
+                                  : "text-muted hover:text-text",
+                            )}
+                          >
+                            {col.label}
+                            {active ? (
+                              /* one arrow that flips — direction toggles read as a
+                           rotation instead of an icon swap */
+                              <ArrowUp
+                                size={11}
+                                aria-hidden
+                                className={clsx(
+                                  "text-accent transition-transform duration-200 ease-out",
+                                  sortDir === "desc" && "rotate-180",
+                                )}
+                              />
+                            ) : (
+                              <ChevronsUpDown
+                                size={11}
+                                aria-hidden
+                                className="opacity-50 transition-opacity duration-150 ease-out group-hover:opacity-90"
+                              />
+                            )}
+                          </button>
+                        </th>
+                      );
+                    })}
+                    {collapsible.length > 0 && (
+                      <th scope="col" className="px-2 py-1.5 text-right">
+                        <button
+                          type="button"
+                          aria-pressed={showEmptyCols}
+                          onClick={() => setShowEmptyCols((v) => !v)}
+                          title={
+                            showEmptyCols
+                              ? "Collapse the unmeasured columns"
+                              : `Awaiting platform runs: ${collapsedLabels}`
+                          }
+                          className={clsx(
+                            "num inline-flex items-center gap-1 rounded-sm border border-line/60 px-1.5 py-1",
+                            "text-[10.5px] font-normal tracking-[0.14em] whitespace-nowrap uppercase",
+                            "text-muted/60 transition-[color,background-color,transform] duration-150 ease-out",
+                            "hover:bg-surface-2/70 hover:text-text active:scale-[0.96]",
+                            "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent/70",
+                          )}
+                        >
+                          {showEmptyCols
+                            ? "− collapse"
+                            : `+${collapsible.length} awaiting runs`}
+                        </button>
+                      </th>
+                    )}
+                    <th
+                      scope="col"
+                      className="num py-2.5 pr-3 pl-2 text-right text-[11px] font-normal tracking-[0.14em] text-muted uppercase"
+                    >
+                      Provenance
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {scored.map((m, i) => (
+                    <Row
+                      key={m.slug}
+                      model={m}
+                      split={split}
+                      rank={rankOf(i)}
+                      emptyCols={emptyCols}
+                      visibleKeys={visibleKeys}
+                      ghostCell={ghostCell}
+                      index={i}
+                    />
+                  ))}
+
+                  {unscored.length > 0 && (
+                    <tr className="hairline-t">
+                      <td
+                        colSpan={colCount}
+                        className="num bg-surface-2/40 px-3 pt-2.5 pb-2 text-[10.5px] tracking-[0.2em] text-muted uppercase"
+                      >
+                        Unscored on {splitLabels[split]} ·{" "}
+                        {metricLabels[sortKey]} — awaiting runs or imports
+                      </td>
+                    </tr>
+                  )}
+                  {unscored.map((m, i) => (
+                    <Row
+                      key={m.slug}
+                      model={m}
+                      split={split}
+                      rank={undefined}
+                      emptyCols={emptyCols}
+                      visibleKeys={visibleKeys}
+                      ghostCell={ghostCell}
+                      index={scored.length + i}
+                    />
+                  ))}
+
+                  {scored.length === 0 && unscored.length === 0 && (
+                    <tr>
+                      <td
+                        colSpan={colCount}
+                        className="px-3 py-10 text-center text-sm text-muted"
+                      >
+                        No models match the current filters.
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </motion.div>
+
+            {/* right-edge fade: columns continue past the fold — lifts at scroll end */}
+            <div
+              aria-hidden
+              className={clsx(
+                "pointer-events-none absolute inset-y-0 right-0 hidden w-14 rounded-r-sm",
+                "bg-gradient-to-l from-surface to-transparent",
+                "transition-opacity duration-300 ease-out md:block",
+                moreRight ? "opacity-100" : "opacity-0",
+              )}
+            />
+          </div>
+
+          <p className="num mt-3 text-right text-[11px] text-muted">
+            {scored.length + unscored.length} / {models.length} models ·{" "}
+            {splitLabels[split]} split · sorted by {metricLabels[sortKey]}
+          </p>
+        </div>
+      </section>
+    </MotionConfig>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Row                                                                  */
+/* ------------------------------------------------------------------ */
+
+function Row({
+  model: m,
+  split,
+  rank,
+  emptyCols,
+  visibleKeys,
+  ghostCell,
+  index = 0,
+}: {
+  model: ModelRow;
+  split: Split;
+  rank?: number;
+  emptyCols: ReadonlySet<MetricKey>;
+  /** metric columns currently rendered (empty ones collapse away) */
+  visibleKeys: ReadonlySet<MetricKey>;
+  /** undefined = no ghost column · "" = present but expanded ·
+      non-empty = collapsed, labels for the tooltip */
+  ghostCell?: string;
+  index?: number;
+}) {
+  const s = m.metrics?.[split];
+  const isTop = rank === 1;
+  const running = m.provenance === "running";
+  const dimmed = rank === undefined;
+  const show = (key: MetricKey) => visibleKeys.has(key);
+  const missing = (key: MetricKey) => (
+    <MissingCell
+      running={running}
+      provenance={m.provenance}
+      dim={emptyCols.has(key)}
+    />
+  );
+
+  return (
+    <motion.tr
+      /* hover surface + phosphor sweep come from .spotlight-row */
+      className="spotlight-row hairline-t"
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{
+        duration: 0.3,
+        /* cap the stagger so deep rows don't appear seconds late */
+        delay: Math.min(index, 12) * 0.04,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+    >
+      {/* rank + accent rail for #1 · soft accent rail for running rows */}
+      <td
+        className={clsx(
+          "num border-l-2 py-3 pr-1 pl-3 text-right align-top text-[13px]",
+          isTop
+            ? "border-l-accent text-accent"
+            : running
+              ? "border-l-accent/40 text-muted"
+              : "border-l-transparent text-muted",
+        )}
+      >
+        {rank ?? "—"}
+      </td>
+
+      {/* model */}
+      <td className="px-3 py-3 align-top">
+        <div className="flex items-center gap-2">
+          <Link
+            href={`/models/${m.slug}`}
+            title={m.note}
+            className={clsx(
+              "max-w-[26ch] truncate text-[13px] leading-snug lg:max-w-[36ch]",
+              dimmed ? "text-muted" : "text-text",
+              "transition-colors duration-150 ease-out hover:text-accent",
+              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent/70",
+              m.provenance === "paper-imported" &&
+                "underline decoration-line decoration-dashed underline-offset-4",
+            )}
+          >
+            {m.name}
+          </Link>
+          <FlagBadges flags={m.flags} className="shrink-0" />
+        </div>
+        <div className="mt-0.5 text-[11px] text-muted">{m.org}</div>
+      </td>
+
+      {/* params — split out of the org sub-line into its own column */}
+      <td className="num px-2 py-3 text-right align-top text-[12px]">
+        {m.paramsB !== undefined ? (
+          <span className={dimmed ? "text-muted" : "text-text"}>
+            {fmtParams(m.paramsB)}
+          </span>
+        ) : (
+          <span className="text-muted/70" aria-label="parameter count unknown">
+            —
+          </span>
+        )}
+      </td>
+
+      {/* track */}
+      <td className="px-2 py-3 align-top">
+        <Badge variant="outline" title={trackLabels[m.track]}>
+          {m.track}
+        </Badge>
+      </td>
+
+      {/* license */}
+      <td className="num max-w-[14ch] px-2 py-3 align-top text-[11px] leading-[1.45] break-words text-muted">
+        {m.license}
+      </td>
+
+      {/* WER — the headline number, with fixed-scale range bar */}
+      <td className="px-2 py-3 text-right align-top">
+        {typeof s?.wer === "number" ? (
+          <div className="flex flex-col items-end gap-1">
+            <span
+              className={clsx(
+                "num text-[15px] leading-none",
+                isTop ? "text-accent" : "text-text",
+              )}
+              title={
+                s.werCi
+                  ? `95% CI ${fmt(s.werCi[0])}–${fmt(s.werCi[1])}`
+                  : undefined
+              }
+            >
+              {fmt(s.wer)}
+            </span>
+            <CIBar value={s.wer} ci={s.werCi} />
+          </div>
+        ) : (
+          missing("wer")
+        )}
+      </td>
+
+      {/* CS-WER — the code-switching metric gets the same micro-bar as WER */}
+      <td className="px-2 py-3 text-right align-top">
+        {typeof s?.csWer === "number" ? (
+          <div className="flex flex-col items-end gap-1">
+            <span
+              className="num text-[13px] leading-none text-text"
+              title={
+                s.csWerCi
+                  ? `95% CI ${fmt(s.csWerCi[0])}–${fmt(s.csWerCi[1])}`
+                  : undefined
+              }
+            >
+              {fmt(s.csWer)}
+            </span>
+            <CIBar value={s.csWer} ci={s.csWerCi} />
+          </div>
+        ) : (
+          missing("csWer")
+        )}
+      </td>
+
+      {/* N-WER */}
+      {show("nWer") && (
+        <td className="num px-2 py-3 text-right align-top text-[12px] text-text">
+          {typeof s?.nWer === "number" ? fmt(s.nWer) : missing("nWer")}
+        </td>
+      )}
+
+      {/* CER */}
+      {show("cer") && (
+        <td className="num px-2 py-3 text-right align-top text-[12px] text-text">
+          {typeof s?.cer === "number" ? fmt(s.cer) : missing("cer")}
+        </td>
+      )}
+
+      {/* MTR exact / fuzzy, stacked */}
+      {show("mtrExact") && (
+        <td className="px-2 py-3 text-right align-top">
+          {typeof s?.mtrExact === "number" ||
+          typeof s?.mtrFuzzy === "number" ? (
+            <div className="flex flex-col items-end gap-0.5">
+              <span className="num text-[12px] leading-none text-text">
+                {fmt(s?.mtrExact, 1)}
+              </span>
+              <span
+                className="num text-[11px] leading-none text-muted"
+                title="Fuzzy tier"
+              >
+                {fmt(s?.mtrFuzzy, 1)} fz
+              </span>
+            </div>
+          ) : (
+            missing("mtrExact")
+          )}
+        </td>
+      )}
+
+      {/* RTFx */}
+      {show("rtfx") && (
+        <td className="num px-2 py-3 text-right align-top text-[12px] text-text">
+          {typeof s?.rtfx === "number" ? (
+            <>
+              {fmt(s.rtfx, 1)}
+              <span className="text-muted">×</span>
+            </>
+          ) : (
+            missing("rtfx")
+          )}
+        </td>
+      )}
+
+      {/* collapsed empty columns: one narrow ghost cell */}
+      {ghostCell !== undefined && (
+        <td className="px-2 py-3 text-right align-top">
+          {ghostCell !== "" && (
+            <span
+              className="num text-[11px] tracking-[0.2em] text-muted/40"
+              title={`${ghostCell} — awaiting platform runs`}
+              aria-label={`${ghostCell}: awaiting platform runs`}
+            >
+              · · ·
+            </span>
+          )}
+        </td>
+      )}
+
+      {/* provenance */}
+      <td className="py-3 pr-3 pl-2 text-right align-top">
+        <ProvenanceChip provenance={m.provenance} />
+      </td>
+    </motion.tr>
+  );
+}
+
+/**
+ * Evidence-gap placeholder: "…" for in-flight runs, a dotted ghost dash for
+ * paper-imported gaps (footnote [2] — the paper never published the value),
+ * an em-dash otherwise. `dim` drops fully-empty columns to whisper weight.
+ */
+function MissingCell({
+  running,
+  provenance,
+  dim,
+}: {
+  running: boolean;
+  provenance: ModelRow["provenance"];
+  dim?: boolean;
+}) {
+  if (running) {
+    return (
+      <span
+        className="num text-[12px] text-muted/80"
+        aria-label="run in progress"
+      >
+        …
+      </span>
+    );
+  }
+  if (provenance === "paper-imported") {
+    return (
+      <span
+        role="img"
+        title="not published in source paper"
+        aria-label="not published in source paper"
+        className={clsx(
+          "inline-block w-4 border-b border-dotted align-middle",
+          dim ? "border-muted/40" : "border-muted/70",
+        )}
+      />
+    );
+  }
+  return (
+    <span
+      className={clsx(
+        "num text-[12px]",
+        dim ? "text-muted/40" : "text-muted/70",
+      )}
+      aria-label="not measured"
+    >
+      —
+    </span>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Mobile row (below md): rank + name, then WER — the headline metric  */
+/* stays on screen without horizontal scroll                            */
+/* ------------------------------------------------------------------ */
+
+function MobileRow({
+  model: m,
+  split,
+  rank,
+}: {
+  model: ModelRow;
+  split: Split;
+  rank?: number;
+}) {
+  const s = m.metrics?.[split];
+  const isTop = rank === 1;
+  const running = m.provenance === "running";
+  const dimmed = rank === undefined;
+
+  return (
+    <li
+      className={clsx(
+        "spotlight-row border-l-2 px-3 py-3",
+        isTop
+          ? "border-l-accent"
+          : running
+            ? "border-l-accent/40"
+            : "border-l-transparent",
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <span
+          className={clsx(
+            "num w-5 shrink-0 text-right text-[13px]",
+            isTop ? "text-accent" : "text-muted",
+          )}
+        >
+          {rank ?? "—"}
+        </span>
+        <Link
+          href={`/models/${m.slug}`}
+          title={m.note}
+          className={clsx(
+            "min-w-0 line-clamp-2 text-[13px] leading-snug",
+            dimmed ? "text-muted" : "text-text",
+            "transition-colors duration-150 ease-out hover:text-accent",
+            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent/70",
+            m.provenance === "paper-imported" &&
+              "underline decoration-line decoration-dashed underline-offset-4",
+          )}
+        >
+          {m.name}
+        </Link>
+        <FlagBadges flags={m.flags} className="shrink-0" />
+      </div>
+      <div className="mt-1.5 flex items-end justify-between gap-3 pl-7">
+        <div className="min-w-0 text-[11px] text-muted">
+          <p className="truncate">
+            {m.org}
+            {m.paramsB !== undefined && (
+              <span className="num"> · {fmtParams(m.paramsB)}</span>
+            )}
+          </p>
+          <div className="mt-1.5">
+            <ProvenanceChip provenance={m.provenance} />
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-end gap-1">
+          {typeof s?.wer === "number" ? (
+            <>
+              <span
+                className={clsx(
+                  "num text-[15px] leading-none",
+                  isTop ? "text-accent" : "text-text",
+                )}
+                title={
+                  s.werCi
+                    ? `95% CI ${fmt(s.werCi[0])}–${fmt(s.werCi[1])}`
+                    : undefined
+                }
+              >
+                {fmt(s.wer)}
+                <span className="ml-1 text-[10.5px] tracking-wide text-muted">
+                  WER
+                </span>
+              </span>
+              <CIBar value={s.wer} ci={s.werCi} />
+              {/* CS-WER — the benchmark's defining metric stays on mobile */}
+              {typeof s.csWer === "number" && (
+                <>
+                  <span
+                    className="num mt-1 text-[12px] leading-none text-text"
+                    title={
+                      s.csWerCi
+                        ? `95% CI ${fmt(s.csWerCi[0])}–${fmt(s.csWerCi[1])}`
+                        : undefined
+                    }
+                  >
+                    {fmt(s.csWer)}
+                    <span className="ml-1 text-[10.5px] tracking-wide text-muted">
+                      CS-WER
+                    </span>
+                  </span>
+                  <CIBar value={s.csWer} ci={s.csWerCi} />
+                </>
+              )}
+            </>
+          ) : (
+            <span
+              className="num text-[12px] text-muted/60"
+              aria-label={running ? "run in progress" : "not measured"}
+            >
+              {running ? "…" : "—"}
+            </span>
+          )}
+        </div>
+      </div>
+    </li>
+  );
+}

src/components/model/DatasetScope.tsx

@@ -0,0 +1,53 @@
+import Link from "next/link";
+import { ArrowUpRight } from "lucide-react";
+import type { DatasetInfo } from "@/lib/types";
+
+export interface DatasetScopeProps {
+  dataset: DatasetInfo;
+}
+
+/**
+ * Scope bar pinned under the model header: MedASR Bench is a multi-dataset
+ * hub, so every number on a model page is measured on exactly ONE dataset.
+ * Today that is the anchor (ViMedCSS); when a second dataset goes live this
+ * bar is the natural home for a dataset switcher.
+ */
+export default function DatasetScope({ dataset }: DatasetScopeProps) {
+  const stats = [
+    typeof dataset.hours === "number" ? `${dataset.hours} h` : null,
+    typeof dataset.utterances === "number"
+      ? `${dataset.utterances.toLocaleString("en-US")} utts`
+      : null,
+    typeof dataset.csTerms === "number"
+      ? `${dataset.csTerms} CS terms`
+      : null,
+  ].filter((s): s is string => s !== null);
+
+  return (
+    <div className="glass depth-1 flex flex-wrap items-center justify-between gap-x-6 gap-y-2 rounded-sm px-4 py-3">
+      <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+        <span className="num text-[11px] uppercase tracking-[0.18em] text-muted">
+          Results on
+        </span>
+        <span className="font-display text-lg leading-none text-text">
+          {dataset.name}
+        </span>
+        {dataset.fullName && (
+          <span className="text-[13px] text-muted">{dataset.fullName}</span>
+        )}
+        {stats.length > 0 && (
+          <span className="num text-[11px] text-muted">
+            {stats.join(" · ")}
+          </span>
+        )}
+      </div>
+      <Link
+        href={`/datasets/${dataset.id}`}
+        className="num inline-flex items-center gap-1 text-[12px] tracking-wide text-text transition-colors duration-200 ease-out hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+      >
+        Dataset profile
+        <ArrowUpRight size={13} aria-hidden />
+      </Link>
+    </div>
+  );
+}

src/components/model/FlagNotes.tsx

@@ -0,0 +1,79 @@
+import clsx from "clsx";
+import type { ComponentType } from "react";
+import { AlertTriangle, Lock, ShieldCheck, Snowflake } from "lucide-react";
+import type { ModelFlags } from "@/lib/types";
+
+export interface FlagNotesProps {
+  flags?: ModelFlags;
+  className?: string;
+}
+
+interface Note {
+  key: keyof ModelFlags;
+  Icon: ComponentType<{ size?: number | string; className?: string }>;
+  iconClass: string;
+  labelClass: string;
+  label: string;
+  text: string;
+}
+
+const NOTES: Note[] = [
+  {
+    key: "contamination",
+    Icon: AlertTriangle,
+    iconClass: "text-warn",
+    labelClass: "text-warn",
+    label: "Contamination",
+    text: "this model’s family seeded the ViMedCSS labels (Gemini 2.5 Pro, then human-verified at κ 0.65), so its scores carry a permanent contamination flag.",
+  },
+  {
+    key: "referenceOnly",
+    Icon: Lock,
+    iconClass: "text-muted",
+    labelClass: "text-text",
+    label: "Reference-only",
+    text: "CC-BY-NC-ND — cannot be fine-tuned or deployed commercially; shown as a yardstick.",
+  },
+  {
+    key: "frozen",
+    Icon: Snowflake,
+    iconClass: "text-muted",
+    labelClass: "text-text",
+    label: "Frozen",
+    text: "the maintaining organization has stopped updates; results are pinned to the last public checkpoint.",
+  },
+  {
+    key: "zone1",
+    Icon: ShieldCheck,
+    iconClass: "text-accent",
+    labelClass: "text-text",
+    label: "Zone 1",
+    text: "self-hostable on a single 24 GB GPU with a license clean for deployment.",
+  },
+];
+
+/** Plain-language explanations for each active flag (pairs with FlagBadges icons). */
+export default function FlagNotes({ flags, className }: FlagNotesProps) {
+  if (!flags) return null;
+  const active = NOTES.filter((n) => flags[n.key]);
+  if (active.length === 0) return null;
+
+  return (
+    <ul className={clsx("flex flex-col gap-2", className)}>
+      {active.map(({ key, Icon, iconClass, labelClass, label, text }) => (
+        <li
+          key={key}
+          className="flex items-start gap-2.5 text-[13px] leading-relaxed text-muted"
+        >
+          <span aria-hidden className={clsx("mt-[3px] shrink-0", iconClass)}>
+            <Icon size={14} />
+          </span>
+          <span>
+            <span className={clsx("font-medium", labelClass)}>{label}</span>{" "}
+            — {text}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+}

src/components/model/FrontierThumb.tsx

@@ -0,0 +1,163 @@
+import {
+  frontierSegments,
+  niceDomain,
+  paretoData,
+  paretoFrontier,
+} from "@/components/compare/compare-utils";
+import { fmt } from "@/lib/data";
+import type { ModelRow } from "@/lib/types";
+
+export interface FrontierThumbProps {
+  models: ModelRow[];
+  /** slug of the model this page profiles — drawn in accent */
+  slug: string;
+  /** dataset the frontier is computed on, e.g. "ViMedCSS" */
+  datasetName?: string;
+}
+
+const W = 232;
+const H = 192;
+const PAD = 12;
+
+/**
+ * "Position on the frontier" thumbnail: the Pareto domain (Test split,
+ * WER × CS-WER) with this model's dot in accent and every other system
+ * ghosted. Pure inline SVG — no chart runtime.
+ */
+export default function FrontierThumb({
+  models,
+  slug,
+  datasetName,
+}: FrontierThumbProps) {
+  const data = paretoData(models, "test");
+  const self = data.find((d) => d.model.slug === slug);
+  if (!self || data.length < 2) return null;
+
+  const [xLo, xHi] = niceDomain(data.map((d) => d.wer));
+  const [yLo, yHi] = niceDomain(data.map((d) => d.csWer));
+  const sx = (v: number) => PAD + ((v - xLo) / (xHi - xLo)) * (W - 2 * PAD);
+  const sy = (v: number) =>
+    PAD + (1 - (v - yLo) / (yHi - yLo)) * (H - 2 * PAD);
+
+  const frontier = paretoFrontier(data);
+  const segments = frontierSegments(frontier, xHi, yHi);
+  const onFrontier = frontier.some((d) => d.model.slug === slug);
+
+  return (
+    <aside
+      aria-label="Position on the Pareto frontier"
+      className="flex flex-col gap-4"
+    >
+      <p className="num text-[11px] uppercase tracking-[0.18em] text-muted">
+        Position on the frontier
+      </p>
+      <div className="hairline depth-1 rounded-sm bg-surface p-4">
+        <svg
+          viewBox={`0 0 ${W} ${H}`}
+          className="block w-full"
+          role="img"
+          aria-label={`Thumbnail scatter of the WER versus CS-WER trade-off on the ${datasetName ? `${datasetName} ` : ""}Test split. This model sits at ${fmt(self.wer)} WER and ${fmt(self.csWer)} CS-WER${onFrontier ? " and defines the Pareto frontier" : ""}.`}
+        >
+          {/* plot frame */}
+          <rect
+            x={PAD}
+            y={PAD}
+            width={W - 2 * PAD}
+            height={H - 2 * PAD}
+            fill="none"
+            stroke="var(--line)"
+            strokeWidth={1}
+          />
+          {/* frontier staircase */}
+          {segments.map(([a, b], i) => (
+            <line
+              key={i}
+              x1={sx(a.x)}
+              y1={sy(a.y)}
+              x2={sx(b.x)}
+              y2={sy(b.y)}
+              stroke="var(--accent)"
+              strokeWidth={1}
+              strokeDasharray="3 2.5"
+              strokeOpacity={0.55}
+            />
+          ))}
+          {/* ghosted peers */}
+          {data
+            .filter((d) => d.model.slug !== slug)
+            .map((d) => (
+              <circle
+                key={d.model.slug}
+                cx={sx(d.wer)}
+                cy={sy(d.csWer)}
+                r={3}
+                style={{ fill: "var(--muted)" }}
+                fillOpacity={0.45}
+              />
+            ))}
+          {/* this model */}
+          <circle
+            cx={sx(self.wer)}
+            cy={sy(self.csWer)}
+            r={8}
+            fill="none"
+            stroke="var(--accent)"
+            strokeOpacity={0.5}
+            strokeWidth={1}
+          />
+          <circle
+            cx={sx(self.wer)}
+            cy={sy(self.csWer)}
+            r={4.5}
+            style={{ fill: "var(--accent)" }}
+            fillOpacity={0.3}
+            stroke="var(--accent)"
+            strokeWidth={1.25}
+          />
+          <circle
+            cx={sx(self.wer)}
+            cy={sy(self.csWer)}
+            r={1.6}
+            style={{ fill: "var(--accent)" }}
+          />
+          {/* axis cues */}
+          <text
+            x={W - PAD}
+            y={H - 2}
+            textAnchor="end"
+            style={{
+              fill: "var(--muted)",
+              fontSize: 9,
+              letterSpacing: "0.14em",
+              fontFamily: "var(--font-mono), 'IBM Plex Mono', monospace",
+            }}
+          >
+            WER % · ← BETTER
+          </text>
+          <text
+            x={8}
+            y={PAD + 4}
+            textAnchor="end"
+            transform={`rotate(-90 8 ${PAD + 4})`}
+            style={{
+              fill: "var(--muted)",
+              fontSize: 9,
+              letterSpacing: "0.14em",
+              fontFamily: "var(--font-mono), 'IBM Plex Mono', monospace",
+            }}
+          >
+            CS-WER % · ↓ BETTER
+          </text>
+        </svg>
+        <p className="num mt-3 text-[11px] tracking-wide text-muted">
+          <span className="text-accent">●</span> this model ·{" "}
+          {fmt(self.wer)} WER / {fmt(self.csWer)} CS-WER ·{" "}
+          {datasetName ? `${datasetName} · ` : ""}Test split
+          {onFrontier && (
+            <span className="text-accent"> · on the frontier</span>
+          )}
+        </p>
+      </div>
+    </aside>
+  );
+}

src/components/model/GeneralizationStrip.tsx

@@ -0,0 +1,136 @@
+import clsx from "clsx";
+import { FlaskConical } from "lucide-react";
+import { fmt } from "@/lib/data";
+import type { ModelRow, Provenance, SplitInfo, SplitMetrics } from "@/lib/types";
+import SectionLabel from "./SectionLabel";
+
+export interface GeneralizationStripProps {
+  model: ModelRow;
+  hardInfo: SplitInfo;
+}
+
+function hasNumbers(m?: SplitMetrics): boolean {
+  return !!m && Object.values(m).some((v) => typeof v === "number");
+}
+
+function DeltaTile({
+  label,
+  test,
+  hard,
+}: {
+  label: string;
+  test?: number;
+  hard?: number;
+}) {
+  const d =
+    typeof test === "number" && typeof hard === "number" ? hard - test : null;
+  const degrading = d !== null && d > 0;
+  return (
+    <div className="hairline depth-1 hover-lift flex min-w-[160px] flex-col gap-1 rounded-sm bg-surface px-4 py-3">
+      <span className="text-[11px] uppercase tracking-[0.14em] text-muted">
+        Δ {label}
+      </span>
+      <span
+        className={clsx(
+          "num text-2xl leading-none",
+          d === null ? "text-muted/50" : degrading ? "text-warn" : "text-text",
+        )}
+      >
+        {d === null ? "—" : `${d >= 0 ? "+" : "−"}${Math.abs(d).toFixed(2)}`}
+      </span>
+      <span className="num text-[11px] text-muted">
+        {fmt(test)} → {fmt(hard)}
+      </span>
+    </div>
+  );
+}
+
+function GhostTile({ label }: { label: string }) {
+  return (
+    <div
+      aria-hidden
+      className="flex min-w-[160px] flex-col gap-1 rounded-sm border border-dashed border-line px-4 py-3"
+    >
+      <span className="text-[11px] uppercase tracking-[0.14em] text-muted/70">
+        Δ {label}
+      </span>
+      <span className="num text-2xl leading-none text-muted/50">—</span>
+      <span className="num text-[11px] text-muted/50">test → hard</span>
+    </div>
+  );
+}
+
+function gapCopy(provenance: Provenance): string {
+  if (provenance === "running")
+    return "This model’s pilot run is executing on Test + Hard right now — the delta lands here the moment it commits.";
+  if (provenance === "planned")
+    return "A platform run covering Test + Hard is on the roadmap for this model.";
+  return "Published results cover Test only; the platform pilot re-runs every model on Test + Hard, and this gap closes when its run lands.";
+}
+
+/**
+ * Test → Hard generalization: signed delta tiles when both splits are
+ * measured (amber when degrading), otherwise a dashed evidence-gap callout
+ * with ghost tiles showing the shape of what will appear.
+ */
+export default function GeneralizationStrip({
+  model,
+  hardInfo,
+}: GeneralizationStripProps) {
+  const test = model.metrics?.test;
+  const hard = model.metrics?.hard;
+  const measured = hasNumbers(test) && hasNumbers(hard);
+
+  return (
+    <section className="flex flex-col gap-4">
+      <SectionLabel
+        index="03"
+        title="Generalization"
+        hint="Test → Hard delta"
+      />
+
+      {measured ? (
+        <div className="flex flex-col gap-5 md:flex-row md:items-center md:justify-between">
+          <div className="flex flex-wrap gap-3">
+            <DeltaTile label="WER" test={test?.wer} hard={hard?.wer} />
+            <DeltaTile label="CS-WER" test={test?.csWer} hard={hard?.csWer} />
+          </div>
+          <p className="max-w-sm text-[13px] leading-relaxed text-muted">
+            The Hard split holds{" "}
+            <span className="num">{fmt(hardInfo.hours)}</span>
+            <span className="num text-[11px]">{" "}h</span> of rare and
+            unseen code-switched terms. A positive Δ (amber) means the model
+            degrades off the common-term distribution.
+          </p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-5 rounded-sm border border-dashed border-line p-5 md:flex-row md:items-center md:justify-between md:p-6">
+          <div className="flex max-w-xl items-start gap-4">
+            <span aria-hidden className="mt-1 shrink-0 text-muted">
+              <FlaskConical size={18} />
+            </span>
+            <div>
+              <h3 className="font-display text-lg italic text-text">
+                Evidence gap — no Hard-split measurement yet
+              </h3>
+              <p className="mt-1.5 text-[13px] leading-relaxed text-muted">
+                The Hard split holds{" "}
+                <span className="num">{fmt(hardInfo.hours)}</span>
+                <span className="num text-[11px]">{" "}h</span> /{" "}
+                <span className="num">
+                  {hardInfo.utts.toLocaleString("en-US")}
+                </span>{" "}
+                utterances of rare and unseen code-switched terms — the
+                generalization leaderboard. {gapCopy(model.provenance)}
+              </p>
+            </div>
+          </div>
+          <div className="flex shrink-0 flex-wrap gap-3">
+            <GhostTile label="WER" />
+            <GhostTile label="CS-WER" />
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}

src/components/model/MetricPanel.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { useState } from "react";
+import MetricCard from "@/components/ui/MetricCard";
+import SplitToggle from "@/components/ui/SplitToggle";
+import { NORMALIZER_VERSION, splitLabels } from "@/lib/data";
+import type {
+  ModelRow,
+  Provenance,
+  Split,
+  SplitInfo,
+  SplitMetrics,
+} from "@/lib/types";
+import SectionLabel from "./SectionLabel";
+
+export interface MetricPanelProps {
+  /** dataset these results are scoped to, e.g. "ViMedCSS" — the hub hosts
+      multiple datasets, so the section header names the one being shown */
+  datasetName: string;
+  metrics?: ModelRow["metrics"];
+  splits: { test: SplitInfo; hard: SplitInfo };
+  provenance: Provenance;
+}
+
+const VALUE_KEYS = [
+  "wer",
+  "csWer",
+  "nWer",
+  "cer",
+  "mtrExact",
+  "rtfx",
+] as const;
+
+const METRIC_CHIPS = ["WER", "CS-WER", "N-WER", "CER", "MTR", "RTFx"] as const;
+
+function emptyNote(provenance: Provenance, split: Split): string {
+  if (provenance === "running")
+    return "No committed measurements yet — the pilot run executing now will populate this panel.";
+  if (provenance === "planned")
+    return "No measurements yet — this model is on the evaluation roadmap.";
+  return `No measurements recorded on the ${splitLabels[split]} split yet.`;
+}
+
+/** Per-card microcopy for a missing value, by row provenance. */
+function gapReason(provenance: Provenance): string {
+  if (provenance === "paper-imported") return "not published";
+  if (provenance === "running" || provenance === "planned")
+    return "awaiting pilot run";
+  return "not recorded";
+}
+
+/**
+ * Split-toggleable metric grid: WER / CS-WER / N-WER / CER / MTR (exact) /
+ * RTFx as count-up MetricCards, with 95% CI sub-lines where measured.
+ */
+export default function MetricPanel({
+  datasetName,
+  metrics,
+  splits,
+  provenance,
+}: MetricPanelProps) {
+  const [split, setSplit] = useState<Split>("test");
+  const m: SplitMetrics | undefined = metrics?.[split];
+  const info = splits[split];
+  const hasAny = VALUE_KEYS.some((k) => typeof m?.[k] === "number");
+
+  return (
+    <section className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-end justify-between gap-3">
+        <SectionLabel
+          index="02"
+          title={`Results — ${datasetName}`}
+          hint={`${splitLabels[split]} — ${info.hours} h · ${info.utts.toLocaleString("en-US")} utterances`}
+        />
+        <SplitToggle value={split} onChange={setSplit} />
+      </div>
+
+      {hasAny ? (
+        /* Stable keys: toggling splits updates values in place instead of
+           remounting cards and replaying the one-shot count-up. */
+        <div className="glass depth-2 grid grid-cols-2 gap-3 rounded-sm p-3 md:grid-cols-3">
+          <MetricCard
+            key="wer"
+            label="WER"
+            value={m?.wer}
+            suffix="%"
+            ci={m?.werCi}
+            gapReason={gapReason(provenance)}
+          />
+          <MetricCard
+            key="cswer"
+            label="CS-WER"
+            value={m?.csWer}
+            suffix="%"
+            ci={m?.csWerCi}
+            gapReason={gapReason(provenance)}
+          />
+          <MetricCard
+            key="nwer"
+            label="N-WER"
+            value={m?.nWer}
+            suffix="%"
+            gapReason={gapReason(provenance)}
+          />
+          <MetricCard
+            key="cer"
+            label="CER"
+            value={m?.cer}
+            suffix="%"
+            gapReason={gapReason(provenance)}
+          />
+          <MetricCard
+            key="mtr"
+            label="MTR (exact)"
+            value={m?.mtrExact}
+            suffix="%"
+            gapReason={gapReason(provenance)}
+          />
+          <MetricCard
+            key="rtfx"
+            label="RTFx"
+            value={m?.rtfx}
+            suffix="×"
+            gapReason={gapReason(provenance)}
+          />
+        </div>
+      ) : (
+        /* flatlined-ECG empty state: one composed panel instead of a
+           checkerboard of em-dash cards */
+        <div className="hairline depth-1 rounded-sm bg-surface px-5 py-6">
+          <div aria-hidden className="flex items-center">
+            <span className="h-px flex-1 bg-accent/20" />
+            <span className="pulse-dot size-2 shrink-0 rounded-full bg-accent" />
+          </div>
+          <p className="mt-4 font-display text-lg italic text-text">
+            no trace yet — awaiting platform run
+          </p>
+          <p className="mt-1.5 max-w-xl text-[13px] leading-relaxed text-muted">
+            {emptyNote(provenance, split)}
+          </p>
+          <ul className="mt-4 flex flex-wrap gap-1.5" aria-label="Metrics this run will record">
+            {METRIC_CHIPS.map((c) => (
+              <li
+                key={c}
+                className="num rounded-sm border border-line/70 px-1.5 py-0.5 text-[11px] tracking-wide text-muted"
+              >
+                {c}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      <p className="num text-[11px] text-muted">
+        WER family in %, lower is better · MTR higher is better · RTFx = audio
+        s ÷ wall s, higher is faster · normalizer {NORMALIZER_VERSION}
+      </p>
+    </section>
+  );
+}

src/components/model/ModelHeader.tsx

@@ -0,0 +1,66 @@
+import Badge from "@/components/ui/Badge";
+import FlagBadges from "@/components/ui/FlagBadges";
+import ProvenanceChip from "@/components/ui/ProvenanceChip";
+import { categoryLabels, trackLabels } from "@/lib/data";
+import type { ModelRow } from "@/lib/types";
+import FlagNotes from "./FlagNotes";
+
+export interface ModelHeaderProps {
+  model: ModelRow;
+}
+
+/** "0.6" → "0.6B"; undefined → "—". */
+function fmtParams(paramsB?: number): string {
+  return paramsB === undefined ? "—" : `${paramsB}B`;
+}
+
+/**
+ * Model identity block: serif name, org, mono param count, license /
+ * track chips, provenance chip, flag icons + plain-language flag notes,
+ * and the editorial note line.
+ */
+export default function ModelHeader({ model }: ModelHeaderProps) {
+  return (
+    <header className="hairline-b pb-6 spring-up">
+      <p className="num mb-3 text-[11px] uppercase tracking-[0.22em] text-muted spring-in">
+        Model profile · {categoryLabels[model.category]}
+      </p>
+
+      <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+        <h1 className="font-display text-4xl leading-[1.05] text-text md:text-5xl spring-in" style={{ animationDelay: "60ms" }}>
+          {model.name}
+        </h1>
+        <div className="mb-1.5 spring-in" style={{ animationDelay: "90ms" }}>
+          <ProvenanceChip provenance={model.provenance} />
+        </div>
+      </div>
+
+      <div className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-2 spring-in" style={{ animationDelay: "120ms" }}>
+        <span className="text-sm text-muted">{model.org}</span>
+        <span aria-hidden className="text-muted/40">
+          ·
+        </span>
+        <span className="num text-sm text-text" title="Parameter count">
+          {fmtParams(model.paramsB)}
+        </span>
+        <Badge variant="outline" title={`License: ${model.license}`}>
+          {model.license}
+        </Badge>
+        <Badge variant="neutral" title={trackLabels[model.track]}>
+          {trackLabels[model.track]}
+        </Badge>
+        <FlagBadges flags={model.flags} />
+      </div>
+
+      {model.note && (
+        <p className="mt-4 font-display text-lg italic text-muted spring-in" style={{ animationDelay: "180ms" }}>
+          {model.note}
+        </p>
+      )}
+
+      <div className="mt-4 max-w-2xl spring-in" style={{ animationDelay: "240ms" }}>
+        <FlagNotes flags={model.flags} />
+      </div>
+    </header>
+  );
+}