serialbench 0.2.0 → 0.4.0

data/site/package.json

@@ -1,22 +0,0 @@
-{
-  "name": "serialbench-site",
-  "type": "module",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "generate:sample-data": "node scripts/gen-sample-data.mjs"
-  },
-  "dependencies": {
-    "@astrojs/vue": "^7.0.2",
-    "@fontsource/ibm-plex-mono": "^5.3.0",
-    "@fontsource/ibm-plex-sans": "^5.3.0",
-    "@tailwindcss/vite": "^4.3.3",
-    "astro": "^7.2.4",
-    "chart.js": "^4.5.1",
-    "tailwindcss": "^4.3.3",
-    "vue": "^3.5.41"
-  }
-}

data/site/public/favicon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <rect width="24" height="24" rx="3" fill="#0b101b"/>
-  <path d="M4 15 L8 15 L10 8 L13 17 L15 11 L17 15 L20 15" stroke="#5fd4e8" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

data/site/scripts/gen-sample-data.mjs

@@ -1,154 +0,0 @@
-// Generates src/data/sample.json in the exact shape the Ruby CLI's
-// resultset export will produce: combined_results[op][size][format][serializer][envKey]
-// plus environments{} and metadata{}. Numbers are anchored to the real
-// 2026-08-23 local race (leptris 1.1.0, macOS arm64, Ruby 3.4.8) and scaled
-// per environment with deterministic factors -- plausible, never random.
-//
-// In CI the real payload replaces this file before `astro build`.
-
-import { mkdirSync, writeFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const here = dirname(fileURLToPath(import.meta.url));
-const outPath = join(here, '..', 'src', 'data', 'sample.json');
-
-const envs = [
-  { key: 'macos-26-ruby-3.4.8', os: 'macos', arch: 'arm64', ruby: '3.4.8', factor: 1.0 },
-  { key: 'macos-26-intel-ruby-3.4.8', os: 'macos', arch: 'x86_64', ruby: '3.4.8', factor: 0.62 },
-  { key: 'macos-15-intel-ruby-3.4.8', os: 'macos', arch: 'x86_64', ruby: '3.4.8', factor: 0.58 },
-  { key: 'ubuntu-24.04-arm-ruby-3.4.8', os: 'ubuntu-24.04', arch: 'arm64', ruby: '3.4.8', factor: 0.88 },
-  { key: 'ubuntu-24.04-ruby-3.3.12', os: 'ubuntu-24.04', arch: 'x86_64', ruby: '3.3.12', factor: 0.79 },
-  { key: 'ubuntu-22.04-ruby-3.2.11', os: 'ubuntu-22.04', arch: 'x86_64', ruby: '3.2.11', factor: 0.71 },
-];
-
-// Base rates in iterations/second on the reference env (macos arm64, ruby 3.4).
-// [small, medium, large]
-const base = {
-  xml: {
-    leptris: { parsing: [8400, 1190, 123], generation: [7400, 746, 12.4], streaming: [12400, 1695, 68] },
-    nokogiri: { parsing: [1900, 204, 9.9], generation: [3100, 125, 11.3], streaming: [1500, 20.7, 4.7] },
-    ox: { parsing: [2600, 278, 9.9], generation: [5200, 192, 8.0], streaming: [1100, 9.3, 6.3] },
-    oga: { parsing: [720, 71, 3.1], generation: [1400, 58, 2.4], streaming: [420, 5.4, 1.9] },
-    rexml: { parsing: [410, 39, 1.6], generation: [900, 34, 1.1], streaming: [260, 3.1, 1.2] },
-    'libxml-ruby': { parsing: [2300, 255, 12.1], generation: [2900, 118, 10.8], streaming: [null, null, null] },
-  },
-  json: {
-    oj: { parsing: [9600, 1580, 96], generation: [11200, 1350, 88] },
-    rapidjson: { parsing: [8900, 1420, 91], generation: [9400, 1180, 79] },
-    json: { parsing: [5200, 690, 51], generation: [6100, 705, 47] },
-    yajl: { parsing: [6100, 830, 58], generation: [6800, 910, 62] },
-  },
-  yaml: {
-    psych: { parsing: [2100, 230, 15], generation: [2400, 210, 12] },
-  },
-  toml: {
-    tomlib: { parsing: [3600, 430, 27], generation: [4100, 470, 31] },
-    'toml-rb': { parsing: [1300, 140, 9], generation: [1700, 160, 11] },
-    tomlrb: { parsing: [2400, 300, 19], generation: [null, null, null] },
-  },
-};
-
-// Allocated MB during parse of the large document, reference env.
-const memoryLarge = {
-  xml: { leptris: 0.01, nokogiri: 539.9, ox: 237.4, oga: 612.0, rexml: 890.5, 'libxml-ruby': 301.2 },
-  json: { oj: 82.0, rapidjson: 96.0, json: 168.0, yajl: 142.0 },
-  yaml: { psych: 210.0 },
-  toml: { tomlib: 190.0, 'toml-rb': 420.0, tomlrb: 355.0 },
-};
-
-// libs unavailable per env (glibc / platform gaps) -- mirrors real coverage
-const unavailable = new Set([
-  'ubuntu-22.04-ruby-3.2.11|xml|leptris', // ubuntu-22.04 glibc: precompiled gem skips
-  'ubuntu-22.04-ruby-3.2.11|xml|libxml-ruby',
-  'macos-26-ruby-3.4.8|toml|tomlrb',
-]);
-
-const sizes = ['small', 'medium', 'large'];
-const sizeScale = { small: 1.0, medium: 0.16, large: 0.02 };
-const memRetainedRatio = 0.22;
-
-const combined = {};
-const environments = {};
-
-for (const env of envs) {
-  environments[env.key] = {
-    ruby_version: env.ruby,
-    ruby_platform: `${env.arch}-${env.os.startsWith('macos') ? 'darwin' : 'linux'}`,
-    os: env.os,
-    arch: env.arch,
-    timestamp: '2026-08-23T09:00:00Z',
-    source_file: `data/${env.key}.yaml`,
-  };
-
-  for (const [format, serializers] of Object.entries(base)) {
-    for (const [serializer, ops] of Object.entries(serializers)) {
-      if (unavailable.has(`${env.key}|${format}|${serializer}`)) continue;
-
-      for (const [op, rates] of Object.entries(ops)) {
-        rates.forEach((ips, i) => {
-          if (ips == null) return;
-          const size = sizes[i];
-          combined[op] ??= {};
-          combined[op][size] ??= {};
-          combined[op][size][format] ??= {};
-          combined[op][size][format][serializer] ??= {};
-          const scaled = ips * env.factor;
-          combined[op][size][format][serializer][env.key] = {
-            iterations_per_second: Number(scaled.toFixed(scaled < 10 ? 2 : 1)),
-            time_per_iteration: Number((1000 / scaled).toFixed(4)),
-          };
-        });
-      }
-
-      const mem = memoryLarge[format]?.[serializer];
-      if (mem != null) {
-        combined.memory ??= {};
-        for (const size of sizes) {
-          const factor = size === 'large' ? 1 : size === 'medium' ? 0.14 : 0.012;
-          combined.memory[size] ??= {};
-          combined.memory[size][format] ??= {};
-          combined.memory[size][format][serializer] ??= {};
-          const allocated = mem * env.factor * factor;
-          combined.memory[size][format][serializer][env.key] = {
-            allocated_memory: Number(allocated.toFixed(2)),
-            retained_memory: Number((allocated * memRetainedRatio).toFixed(2)),
-          };
-        }
-      }
-    }
-  }
-}
-
-const libraries = [
-  { name: 'leptris', format: 'xml', version: '1.6.0', features: { xpath: true, namespaces: true, validation: false, streaming: true, stax: true } },
-  { name: 'nokogiri', format: 'xml', version: '1.19.4', features: { xpath: true, namespaces: true, validation: false, streaming: true, stax: true } },
-  { name: 'ox', format: 'xml', version: '2.14.23', features: { xpath: false, namespaces: true, validation: false, streaming: true, stax: false } },
-  { name: 'oga', format: 'xml', version: '3.4', features: { xpath: true, namespaces: true, validation: false, streaming: true, stax: false } },
-  { name: 'rexml', format: 'xml', version: '3.4.1', features: { xpath: true, namespaces: true, validation: false, streaming: false, stax: false } },
-  { name: 'libxml-ruby', format: 'xml', version: '5.0.6', features: { xpath: true, namespaces: true, validation: false, streaming: true, stax: true } },
-  { name: 'oj', format: 'json', version: '3.16.11', features: { pretty_print: true, streaming: true, symbol_keys: true, custom_types: true } },
-  { name: 'json', format: 'json', version: '2.21.2', features: { pretty_print: true, streaming: false, symbol_keys: false, custom_types: false } },
-  { name: 'rapidjson', format: 'json', version: '0.4.0', features: { pretty_print: true, streaming: false, symbol_keys: false, custom_types: false } },
-  { name: 'yajl', format: 'json', version: '1.4.3', features: { pretty_print: true, streaming: true, symbol_keys: false, custom_types: false } },
-  { name: 'psych', format: 'yaml', version: '4.0.4', features: { streaming: false } },
-  { name: 'toml-rb', format: 'toml', version: '4.2.1', features: { comments: false, arrays_of_tables: true, inline_tables: true, multiline_strings: true } },
-  { name: 'tomlib', format: 'toml', version: '0.7.3', features: { comments: false, arrays_of_tables: true, inline_tables: true, multiline_strings: true } },
-  { name: 'tomlrb', format: 'toml', version: '2.0.4', features: { comments: false, arrays_of_tables: true, inline_tables: true, multiline_strings: true } },
-];
-
-const payload = {
-  combined_results: combined,
-  environments,
-  libraries,
-  metadata: {
-    resultset_name: 'weekly-benchmark',
-    resultset_description: 'Sample data for development; CI replaces this with the live resultset',
-    total_runs: envs.length,
-    generated_at: '2026-08-23T09:00:00Z',
-  },
-};
-
-mkdirSync(dirname(outPath), { recursive: true });
-writeFileSync(outPath, JSON.stringify(payload, null, 2) + '\n');
-console.log(`wrote ${outPath} (${envs.length} environments)`);

data/site/src/components/AvailabilityMatrix.astro

@@ -1,61 +0,0 @@
----
-import type { Payload } from '../lib/dashboard';
-import { availability, environmentLabel, environmentList, runnerShortLabel } from '../lib/dashboard';
-import { channelColor } from '../lib/channels';
-
-interface Props {
-  payload: Payload;
-}
-
-const { payload } = Astro.props;
-const { serializers, envKeys, cells } = availability(payload);
-const envs = environmentList(payload);
----
-
-<section aria-label="Availability matrix" class="mt-12">
-  <div class="mb-3">
-    <p class="font-mono text-[10px] uppercase tracking-[0.14em] text-inkmute">Will it run on my stack — coverage across measured environments</p>
-    <p class="font-mono text-[11px] text-inkmute mt-1">Derived from the runs themselves: a dot means the library loaded and completed the benchmark on that platform.</p>
-  </div>
-
-  <div class="overflow-x-auto border border-line bg-panel">
-    <table class="w-full border-collapse">
-      <thead>
-        <tr>
-          <th class="text-left font-mono text-[10px] uppercase tracking-[0.14em] text-inkmute font-normal px-3 py-2 border-b border-line">Library</th>
-          {
-            envs.map(({ key, env }) => (
-              <th class="font-mono text-[10px] uppercase tracking-wider text-inkmute font-normal px-2 py-2 border-b border-line text-center whitespace-nowrap">
-                <span class="block">{runnerShortLabel(key, env)}</span>
-                <span class="block text-inkmute/70">{env.arch === 'x86_64' ? 'x64' : 'arm64'} · {env.ruby_version}</span>
-              </th>
-            ))
-          }
-        </tr>
-      </thead>
-      <tbody>
-        {
-          serializers.map((serializer) => (
-            <tr>
-              <td class="px-3 py-1.5 border-b border-line/50 font-mono text-[12px] whitespace-nowrap">
-                <a class="flex items-center gap-2 hover:text-phosphor transition-colors" href={`${import.meta.env.BASE_URL}library/${serializer}/`}>
-                  <span class="h-2 w-2 rounded-full" style={`background: ${channelColor(serializer)}`} />
-                  {serializer}
-                </a>
-              </td>
-              {envKeys.map((envKey) => (
-                <td class="px-2 py-1.5 border-b border-line/50 text-center">
-                  {cells.get(serializer)?.has(envKey) ? (
-                    <span class="inline-block h-2 w-2 rounded-full" style={`background: ${channelColor(serializer)}`} title={`measured on ${environmentLabel(envKey, payload.environments[envKey])}`} />
-                  ) : (
-                    <span class="inline-block h-2 w-2 rounded-full border border-line" title="not measured on this environment" />
-                  )}
-                </td>
-              ))}
-            </tr>
-          ))
-        }
-      </tbody>
-    </table>
-  </div>
-</section>

data/site/src/components/CalibratedLeaderboard.vue

@@ -1,134 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import type { LeaderRow } from '../lib/dashboard';
-import { formatIps } from '../lib/dashboard';
-import { channelColor } from '../lib/channels';
-
-const props = defineProps<{
-  rows: LeaderRow[];
-  reference: string | null;
-  caption: string;
-}>();
-
-const emit = defineEmits<{ pin: [serializer: string] }>();
-
-const baseUrl = import.meta.env.BASE_URL;
-
-const logScale = ref(false);
-
-const effectiveReference = computed(() => props.reference ?? props.rows[0]?.serializer ?? null);
-
-const maxIps = computed(() => props.rows[0]?.ips ?? 0);
-const minIps = computed(() => props.rows[props.rows.length - 1]?.ips ?? 0);
-
-const logSpan = computed(() => ({
-  lo: Math.log10(Math.max(minIps.value * 0.8, 0.01)),
-  hi: Math.log10(maxIps.value * 1.05),
-}));
-
-function widthFor(row: LeaderRow): number {
-  if (maxIps.value <= 0) return 0;
-  if (!logScale.value) return (row.ips / maxIps.value) * 100;
-  const { lo, hi } = logSpan.value;
-  return ((Math.log10(row.ips) - lo) / (hi - lo)) * 100;
-}
-
-const ticks = computed(() => {
-  const positions = [0, 0.25, 0.5, 0.75, 1];
-  return positions.map((p) => {
-    const value = logScale.value
-      ? 10 ** (logSpan.value.lo + p * (logSpan.value.hi - logSpan.value.lo))
-      : p * maxIps.value;
-    return { pct: p * 100, label: formatIps(value) };
-  });
-});
-</script>
-
-<template>
-  <div>
-    <div class="flex items-baseline justify-between gap-4 mb-3 flex-wrap">
-      <div>
-        <p class="font-mono text-[10px] uppercase tracking-[0.14em] text-inkmute">Field ranking — iterations per second, higher is better</p>
-        <p class="font-mono text-[11px] text-inkmute mt-1">{{ caption }}</p>
-      </div>
-      <div class="flex border border-line divide-x divide-line" role="group" aria-label="Scale">
-        <button
-          type="button"
-          class="px-2.5 py-1 font-mono text-[10px] uppercase tracking-wider transition-colors"
-          :class="!logScale ? 'bg-panel2 text-ink' : 'text-inkmute hover:text-inkdim'"
-          :aria-pressed="!logScale"
-          @click="logScale = false"
-        >
-          Linear
-        </button>
-        <button
-          type="button"
-          class="px-2.5 py-1 font-mono text-[10px] uppercase tracking-wider transition-colors"
-          :class="logScale ? 'bg-panel2 text-ink' : 'text-inkmute hover:text-inkdim'"
-          :aria-pressed="logScale"
-          @click="logScale = true"
-        >
-          Log
-        </button>
-      </div>
-    </div>
-
-    <!-- axis -->
-    <div class="grid grid-cols-[minmax(7rem,10rem)_1fr_minmax(8rem,9rem)] gap-x-3 items-center mb-1">
-      <span />
-      <div class="relative h-4">
-        <span
-          v-for="tick in ticks"
-          :key="tick.pct"
-          class="absolute top-0 font-mono text-[10px] text-inkmute tabular -translate-x-1/2"
-          :style="{ left: `${tick.pct}%` }"
-        >{{ tick.label }}</span>
-      </div>
-      <span class="font-mono text-[10px] uppercase tracking-[0.14em] text-inkmute text-right">vs ref</span>
-    </div>
-
-    <ul class="space-y-1.5" role="list">
-      <li v-for="(row, i) in rows" :key="row.serializer">
-        <div class="grid grid-cols-[minmax(7rem,10rem)_1fr_minmax(8rem,9rem)] gap-x-3 items-center py-0.5 group">
-          <a
-            :href="`${baseUrl}library/${row.serializer}/`"
-            class="flex items-center gap-2 font-mono text-[13px] truncate min-w-0"
-            :style="{ color: channelColor(row.serializer) }"
-            :title="`${row.serializer} — library page`"
-          >
-            <span class="h-2 w-2 shrink-0 rounded-full" :style="{ background: channelColor(row.serializer) }" />
-            <span class="truncate group-hover:translate-x-0.5 transition-transform">{{ row.serializer }}</span>
-          </a>
-
-          <button
-            type="button"
-            class="relative h-7 graticule rounded-sm overflow-hidden w-full text-left"
-            :aria-pressed="row.serializer === reference"
-            :title="row.serializer === reference ? 'Unpin reference' : 'Pin as reference'"
-            :aria-label="`Pin ${row.serializer} as reference`"
-            @click="emit('pin', row.serializer)"
-          >
-            <span
-              class="absolute inset-y-[3px] left-0 rounded-[2px] trace-in"
-              :style="{
-                width: `${Math.max(widthFor(row), 0.75)}%`,
-                background: channelColor(row.serializer),
-                opacity: row.serializer === effectiveReference || !reference ? 0.95 : 0.6,
-                animationDelay: `${i * 60}ms`,
-              }"
-            />
-          </button>
-
-          <span class="flex items-baseline justify-end gap-2 whitespace-nowrap">
-            <span class="tabular font-mono text-[13px] text-ink">{{ formatIps(row.ips) }}<span class="text-inkmute text-[11px]"> ips</span></span>
-            <span
-              v-if="row.serializer === effectiveReference"
-              class="font-mono text-[10px] uppercase tracking-wider border border-phosphor text-phosphor px-1.5 py-px"
-            >ref</span>
-            <span v-else-if="row.ratioToRef" class="tabular font-mono text-[11px] text-inkmute">×{{ row.ratioToRef.toFixed(1) }}</span>
-          </span>
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>

data/site/src/components/CitationBox.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import type { LeaderRow } from '../lib/dashboard';
-
-const props = defineProps<{
-  rows: LeaderRow[];
-  reference: string | null;
-  format: string;
-  op: string;
-  size: string;
-  envLabel: string;
-  generatedAt: string;
-}>();
-
-const copied = ref(false);
-
-const effectiveReference = computed(() => props.reference ?? props.rows[0]?.serializer ?? null);
-const second = computed(() => props.rows.find((r) => r.serializer !== effectiveReference.value));
-const ratio = computed(() => second.value?.ratioToRef ?? null);
-
-const opVerb = computed(() => ({ parsing: 'parses', generation: 'generates', streaming: 'streams' })[props.op] ?? props.op);
-
-const citation = computed(() => {
-  const date = props.generatedAt.slice(0, 10);
-  if (!effectiveReference.value || !second.value || !ratio.value) {
-    return 'Pin a reference library to generate a citable claim.';
-  }
-  return `${effectiveReference.value} ${opVerb.value} ${props.size} ${props.format.toUpperCase()} ${ratio.value.toFixed(1)}× faster than ${second.value.serializer} on ${props.envLabel} — serialbench, ${date}`;
-});
-
-async function copy() {
-  await navigator.clipboard.writeText(citation.value);
-  copied.value = true;
-  setTimeout(() => (copied.value = false), 1600);
-}
-</script>
-
-<template>
-  <figure class="border border-line bg-panel px-4 py-3 flex flex-wrap items-center gap-4">
-    <span class="font-mono text-[10px] uppercase tracking-[0.14em] text-inkmute shrink-0">Cite this</span>
-    <blockquote class="flex-1 min-w-64 font-mono text-[12px] leading-relaxed text-inkdim">“{{ citation }}”</blockquote>
-    <button
-      type="button"
-      class="shrink-0 font-mono text-[10px] uppercase tracking-wider border border-line px-2.5 py-1 text-inkdim hover:border-phosphor hover:text-phosphor transition-colors"
-      @click="copy"
-    >
-      {{ copied ? 'Copied' : 'Copy' }}
-    </button>
-  </figure>
-</template>

data/site/src/components/DashboardConsole.vue

@@ -1,193 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
-import type { Payload } from '../lib/dashboard';
-import {
-  availableFormats,
-  availableOperations,
-  availableSizes,
-  environmentLabel,
-  environmentList,
-  leaderboard,
-  memoryRows,
-  OPERATIONS,
-  OPERATION_LABELS,
-  serializersFor,
-} from '../lib/dashboard';
-import CalibratedLeaderboard from './CalibratedLeaderboard.vue';
-import OpsChart from './OpsChart.vue';
-import MemoryPanel from './MemoryPanel.vue';
-import CitationBox from './CitationBox.vue';
-
-const props = defineProps<{ payload: Payload }>();
-
-const formats = computed(() => availableFormats(props.payload));
-const format = ref(formats.value[0] ?? 'xml');
-
-const operations = computed(() => availableOperations(props.payload, format.value));
-const op = ref<string>('parsing');
-
-const sizes = computed(() => availableSizes(props.payload, op.value, format.value));
-const size = ref<string>('large');
-
-const envs = computed(() => environmentList(props.payload));
-const envKey = ref(envs.value[0]?.key ?? '');
-
-const reference = ref<string | null>(null);
-
-function syncToAvailable() {
-  if (!operations.value.includes(op.value as (typeof OPERATIONS)[number])) {
-    op.value = operations.value[0] ?? 'parsing';
-  }
-  if (!sizes.value.includes(size.value)) {
-    size.value = sizes.value[sizes.value.length - 1] ?? 'small';
-  }
-  if (!envs.value.some((e) => e.key === envKey.value)) {
-    envKey.value = envs.value[0]?.key ?? '';
-  }
-}
-
-const state = computed(() => ({ format: format.value, op: op.value, size: size.value, env: envKey.value, ref: reference.value }));
-
-function syncUrl() {
-  const params = new URLSearchParams();
-  params.set('f', format.value);
-  params.set('op', op.value);
-  if (sizes.value.length > 1) params.set('sz', size.value);
-  params.set('env', envKey.value);
-  if (reference.value) params.set('ref', reference.value);
-  history.replaceState(null, '', `?${params.toString()}`);
-}
-
-watch(state, syncUrl);
-watch([format], () => {
-  reference.value = null;
-  syncToAvailable();
-});
-watch([op], syncToAvailable);
-
-onMounted(() => {
-  const params = new URLSearchParams(location.search);
-  const f = params.get('f');
-  if (f && formats.value.includes(f)) format.value = f;
-  syncToAvailable();
-  const opParam = params.get('op');
-  if (opParam && operations.value.includes(opParam as (typeof OPERATIONS)[number])) op.value = opParam;
-  const sz = params.get('sz');
-  if (sz && sizes.value.includes(sz)) size.value = sz;
-  const env = params.get('env');
-  if (env && envs.value.some((e) => e.key === env)) envKey.value = env;
-  reference.value = params.get('ref');
-});
-
-const rows = computed(() =>
-  leaderboard(props.payload, op.value, size.value, format.value, envKey.value, reference.value),
-);
-
-const mem = computed(() => memoryRows(props.payload, size.value, format.value, envKey.value));
-
-const serializers = computed(() => serializersFor(props.payload, format.value));
-
-const envLabel = computed(() => {
-  const entry = envs.value.find((e) => e.key === envKey.value);
-  return entry ? environmentLabel(entry.key, entry.env) : '';
-});
-</script>
-
-<template>
-  <section aria-label="Benchmark console">
-    <!-- control rail -->
-    <div class="flex flex-wrap items-end gap-x-8 gap-y-4 border-y border-line py-3 mb-8">
-      <fieldset>
-        <legend class="font-mono text-[10px] uppercase tracking-[0.14em] text-inkmute mb-1.5">Format</legend>
-        <div class="flex border border-line divide-x divide-line" role="group">
-          <button
-            v-for="f in formats"
-            :key="f"
-            type="button"
-            class="px-3 py-1.5 font-mono text-xs uppercase tracking-wide transition-colors"
-            :class="f === format ? 'bg-phosphor text-phosphorink' : 'text-inkdim hover:text-ink'"
-            :aria-pressed="f === format"
-            @click="format = f"
-          >
-            {{ f }}
-          </button>
-        </div>
-      </fieldset>
-
-      <fieldset>
-        <legend class="font-mono text-[10px] uppercase tracking-[0.14em] text-inkmute mb-1.5">Operation</legend>
-        <div class="flex border border-line divide-x divide-line" role="group">
-          <button
-            v-for="o in operations"
-            :key="o"
-            type="button"
-            class="px-3 py-1.5 font-mono text-xs uppercase tracking-wide transition-colors"
-            :class="o === op ? 'bg-phosphor text-phosphorink' : 'text-inkdim hover:text-ink'"
-            :aria-pressed="o === op"
-            @click="op = o"
-          >
-            {{ OPERATION_LABELS[o as keyof typeof OPERATION_LABELS] ?? o }}
-          </button>
-        </div>
-      </fieldset>
-
-      <fieldset v-if="sizes.length > 1">
-        <legend class="font-mono text-[10px] uppercase tracking-[0.14em] text-inkmute mb-1.5">Input size</legend>
-        <div class="flex border border-line divide-x divide-line" role="group">
-          <button
-            v-for="s in sizes"
-            :key="s"
-            type="button"
-            class="px-3 py-1.5 font-mono text-xs uppercase tracking-wide transition-colors"
-            :class="s === size ? 'bg-phosphor text-phosphorink' : 'text-inkdim hover:text-ink'"
-            :aria-pressed="s === size"
-            @click="size = s"
-          >
-            {{ s }}
-          </button>
-        </div>
-      </fieldset>
-
-      <label class="ml-auto">
-        <span class="block font-mono text-[10px] uppercase tracking-[0.14em] text-inkmute mb-1.5">Environment</span>
-        <select
-          v-model="envKey"
-          class="bg-panel border border-line px-3 py-1.5 font-mono text-xs text-inkdim hover:text-ink focus:text-ink transition-colors max-w-64"
-        >
-          <option v-for="e in envs" :key="e.key" :value="e.key">{{ environmentLabel(e.key, e.env) }}</option>
-        </select>
-      </label>
-    </div>
-
-    <CalibratedLeaderboard
-      :rows="rows"
-      :reference="reference"
-      :caption="`${envLabel} · ${OPERATION_LABELS[op as keyof typeof OPERATION_LABELS] ?? op} · ${size} input`"
-      @pin="(name: string) => (reference = reference === name ? null : name)"
-    />
-
-    <div class="grid lg:grid-cols-2 gap-6 mt-10">
-      <OpsChart
-        v-if="sizes.length > 1"
-        :payload="payload"
-        :op="op"
-        :format="format"
-        :sizes="sizes"
-        :env-key="envKey"
-        :serializers="serializers"
-      />
-      <MemoryPanel v-if="mem.length > 0" :rows="mem" :size="size" />
-    </div>
-
-    <CitationBox
-      class="mt-6"
-      :rows="rows"
-      :reference="reference"
-      :format="format"
-      :op="op"
-      :size="size"
-      :env-label="envLabel"
-      :generated-at="payload.metadata.generated_at"
-    />
-  </section>
-</template>