From b89e500f6a12eab1374031025d3313d2aac2afef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20V=C3=A1squez?= <juan@ombulabs.com>
Date: Fri, 9 Oct 2026 01:08:27 -0600
Subject: [PATCH 1/9] Step 1: Make every report relative to the claimed one

The relative view divided each report by its own value on the reference
Ruby, so a slower report could draw far above the claimed one (splat at
about 130x under YJIT while the single Array argument still won).
Dividing every report by the claimed report's median on the reference
keeps one baseline per card, so the higher line is the faster report.
---
 script/build_results_site.rb | 12 ++++++++----
 script/results_site.html     |  9 ++++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/script/build_results_site.rb b/script/build_results_site.rb
index e98e55a..7d0a24f 100644
--- a/script/build_results_site.rb
+++ b/script/build_results_site.rb
@@ -172,17 +172,19 @@ def entry(report, name)
     report["entries"].find { |e| e["name"] == name }
   end
 
-  # Per report: [i/s, error, relative to the reference's median]. Relative is nil for a suspect or zero result, or a report the reference does not have.
+  # Per report: [i/s, error, relative to the reference's median of the claimed report].
+  # Every report of a benchmark shares that one baseline, so on the chart the higher line is the faster report.
+  # Relative is nil for a suspect or zero result, or when the reference has no usable pass of the claimed report.
   def cross_run(report, names, ref_ips)
     entries = names.each_with_index.map do |name, i|
       e = entry(report, name) or next nil
-      rel = ref_ips[i].empty? || !e["ips"].positive? || e["ips"] > SUSPECT_IPS ? nil : (e["ips"] / median(ref_ips[i])).round(4)
+      rel = ref_ips[0].empty? || !e["ips"].positive? || e["ips"] > SUSPECT_IPS ? nil : (e["ips"] / median(ref_ips[0])).round(4)
       [e["ips"].round(3), e["error"].to_f.round(1), rel]
     end
     { entries: entries, pass: report["pass"] }
   end
 
-  # The reference itself: its median pass, 1.0 relative to itself.
+  # The reference itself: its median pass, relative to its own claimed report (1.0 for the claimed report).
   def reference_run(passes, names, ref_ips)
     entries = names.each_with_index.map do |name, i|
       es = passes.filter_map { |r| entry(r, name) }
@@ -190,7 +192,9 @@ def reference_run(passes, names, ref_ips)
 
       usable = es.select { |e| e["ips"].positive? && e["ips"] <= SUSPECT_IPS }
       pick = usable.empty? ? es : usable
-      [median(pick.map { |e| e["ips"] }).round(3), median(pick.map { |e| e["error"].to_f }).round(1), ref_ips[i].empty? ? nil : 1.0]
+      ips = median(pick.map { |e| e["ips"] })
+      rel = ref_ips[0].empty? || ref_ips[i].empty? ? nil : (median(ref_ips[i]) / median(ref_ips[0])).round(4)
+      [ips.round(3), median(pick.map { |e| e["error"].to_f }).round(1), rel]
     end
     { entries: entries, passes: passes.map { |r| r["pass"] }.sort }
   end
diff --git a/script/results_site.html b/script/results_site.html
index be96fcd..4d7936e 100644
--- a/script/results_site.html
+++ b/script/results_site.html
@@ -609,7 +609,7 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
 })();
 </script>
 <script>
-// Across Rubies. Each entry is [i/s, error, relative to the reference's median].
+// Across Rubies. Each entry is [i/s, error, relative to the reference's median of the claimed report].
 (function () {
   const $ = (id) => document.getElementById(id);
   const D = window.ACROSS_RUBIES;
@@ -634,7 +634,7 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
   const sus = (e) => !!e && e[0] > M.suspect;
   // A result that can be drawn and compared: it ran and is not suspect.
   const ok = (e) => !!e && !sus(e) && e[0] > 0;
-  // Relative needs the reference to have that report.
+  // Relative needs the reference to have the claimed report.
   const val = (e) => ok(e) ? (showing === "rel" ? e[2] : e[0]) : null;
   // Two reports of one build, measured seconds apart: same-ish when the error bars overlap, as benchmark-ips says.
   const same = (a, b) => a[0] + a[1] > b[0] - b[1] && a[0] - a[1] < b[0] + b[1];
@@ -824,7 +824,10 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     if (mode && !has(mode)) mode = "";
     $("rmodes").innerHTML = MODES.map(([m, name]) => `<button type="button" class="chip" data-m="${m}" aria-pressed="${m === mode}" ${has(m) ? "" : 'disabled title="Not built in this run"'}>${name}</button>`).join("");
     $("rshow").innerHTML = SHOWS.map(([k, name]) => `<button type="button" class="chip" data-s="${k}" aria-pressed="${k === showing}">${esc(name)}</button>`).join("");
-    $("rhint").textContent = mode ? "Dashed: the same Rubies without the JIT, on the same machine." : "";
+    const hints = [];
+    if (showing === "rel") hints.push(`1× is the claimed idiom on ${nice(REF)}.`);
+    if (mode) hints.push("Dashed: the same Rubies without the JIT, on the same machine.");
+    $("rhint").textContent = hints.join(" ");
     let h = "", sec = null;
     B.forEach((b, n) => {
       if (b.section !== sec) { sec = b.section; h += `<h2>${esc(sec)}<span class="on">${esc(MODES.find(([m]) => m === mode)[1])}</span></h2>`; }

From a2729fa3c0868f595795148689bcfb77ff8af99e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20V=C3=A1squez?= <juan@ombulabs.com>
Date: Fri, 9 Oct 2026 01:10:19 -0600
Subject: [PATCH 2/9] Step 2: Draw the charts on a log scale

A linear axis from 0 let one fast engine or report flatten the rest:
with TruffleRuby near 400M i/s every MRI line of "normal vs &method" sat
on 0, and a 35x to 173x gap left the splat line flat. On a log axis a
100x gap and a 10% change between Rubies are both readable. The axis is
fitted to the drawn values with at least a 4x span, so close lines do
not fill the chart with noise.
---
 script/results_site.html | 64 +++++++++++++++++++++++++++-------------
 1 file changed, 43 insertions(+), 21 deletions(-)

diff --git a/script/results_site.html b/script/results_site.html
index 4d7936e..ed78898 100644
--- a/script/results_site.html
+++ b/script/results_site.html
@@ -699,13 +699,28 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     return s + ".";
   }
 
-  function ticks(max) {
-    if (!(max > 0) || !isFinite(max)) max = 1;
-    const raw = max / 4, mag = Math.pow(10, Math.floor(Math.log10(raw)));
-    const step = [1, 2, 2.5, 5, 10].map((m) => m * mag).find((x) => x >= raw);
-    const t = [];
-    for (let v = 0; ; v += step) { t.push(v); if (v >= max) break; }
-    return t;
+  // The y axis is logarithmic, so a 100× gap between two reports and a 10% change between two Rubies are both readable on one chart.
+  // It spans at least 4×, from the 1-2-5 step under the lowest value to the one over the highest.
+  // Past 7 ticks, the lines in between are powers of ten only (every other one, or fewer, on a very wide span).
+  function ticks(lo, hi) {
+    if (!(lo > 0) || !(hi >= lo) || !isFinite(hi)) { lo = 1; hi = 10; }
+    if (hi / lo < 4) { const g = Math.sqrt(hi * lo); lo = g / 2; hi = g * 2; }
+    const steps = [];
+    for (let k = Math.floor(Math.log10(lo)) - 1; k <= Math.ceil(Math.log10(hi)) + 1; k++) [1, 2, 5].forEach((m) => steps.push(+(m * Math.pow(10, k)).toPrecision(1)));
+    const bottom = steps.filter((t) => t <= lo).pop(), top = steps.find((t) => t >= hi);
+    const t = steps.filter((v) => v >= bottom && v <= top);
+    if (t.length <= 7) return t;
+    const d0 = Math.log10(bottom), d1 = Math.log10(top), every = Math.ceil((d1 - d0) / 6);
+    // Inner powers of ten, none closer than 0.35 of a decade to either end, so labels never overlap.
+    const inner = [];
+    for (let k = Math.ceil(d0); k < d1; k += every) if (k - d0 > 0.35 && d1 - k > 0.35) inner.push(+Math.pow(10, k).toPrecision(1));
+    return [bottom, ...inner, top];
+  }
+  // Tick labels without trailing zeros: 2M, 500k, 0.05×.
+  function tickLabel(t) {
+    const n = (v) => String(+v.toPrecision(3));
+    if (showing === "rel") return n(t) + "×";
+    return t >= 1e9 ? n(t / 1e9) + "B" : t >= 1e6 ? n(t / 1e6) + "M" : t >= 1e3 ? n(t / 1e3) + "k" : n(t);
   }
 
   function path(pts, c, extra, w) {
@@ -722,23 +737,30 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     const band = (W - P.l - P.r - gap) / n;
     const x = (k) => P.l + band * (k + 0.5) + (k >= cols.line.length ? gap : 0);
     const ghost = mode ? cols.line.map(base) : [];
-    const vals = [];
-    b.names.forEach((_, i) => cols.all.concat(ghost).forEach((l) => { const r = b.runs[l]; const v = r && val(r.entries[i]); if (v != null) vals.push(v + (showing === "rel" ? r.entries[i][1] / r.entries[i][0] * v : r.entries[i][1])); }));
-    const tk = ticks(Math.max(...vals, showing === "rel" ? 1 : 1e-9));
-    const top = tk[tk.length - 1];
-    const y = (v) => P.t + (H - P.t - P.b) * (1 - v / top);
-    const lab = (t) => t === 0 ? "0" : showing === "rel" ? t.toFixed(t < 1 ? 2 : 1) + "×" : fmt(t);
+    // Every drawn value with its error bar; a lower end at or under 0 is left out, since a log axis has no 0.
+    const lows = [], highs = [];
+    b.names.forEach((_, i) => cols.all.concat(ghost).forEach((l) => {
+      const r = b.runs[l], v = r && val(r.entries[i]);
+      if (v == null) return;
+      const err = r.entries[i][1] / r.entries[i][0] * v;
+      lows.push(v - err > 0 ? v - err : v);
+      highs.push(v + err);
+    }));
+    const tk = lows.length ? ticks(Math.min(...lows), Math.max(...highs)) : ticks(1, 10);
+    const bottom = tk[0], top = tk[tk.length - 1], span = Math.log10(top / bottom);
+    const y = (v) => P.t + (H - P.t - P.b) * (1 - Math.log10(Math.max(v, bottom) / bottom) / span);
+    const yb = y(bottom);
 
     let s = `<svg viewBox="0 0 ${W} ${H}" role="img" aria-label="${esc(b.names.join(" vs "))} on every Ruby">`;
-    tk.forEach((t) => { s += `<g class="tick"><line x1="${P.l}" x2="${W - P.r}" y1="${y(t)}" y2="${y(t)}"/><text x="${P.l - 8}" y="${y(t) + 4}" text-anchor="end">${lab(t)}</text></g>`; });
-    s += `<line class="base" x1="${P.l}" x2="${W - P.r}" y1="${y(0)}" y2="${y(0)}"/>`;
-    if (showing === "rel") s += `<line x1="${P.l}" x2="${W - P.r}" y1="${y(1)}" y2="${y(1)}" stroke="var(--faint)" stroke-dasharray="2 3"/>`;
+    tk.forEach((t) => { s += `<g class="tick"><line x1="${P.l}" x2="${W - P.r}" y1="${y(t)}" y2="${y(t)}"/><text x="${P.l - 8}" y="${y(t) + 4}" text-anchor="end">${tickLabel(t)}</text></g>`; });
+    s += `<line class="base" x1="${P.l}" x2="${W - P.r}" y1="${yb}" y2="${yb}"/>`;
+    if (showing === "rel" && bottom < 1 && top > 1) s += `<line x1="${P.l}" x2="${W - P.r}" y1="${y(1)}" y2="${y(1)}" stroke="var(--faint)" stroke-dasharray="2 3"/>`;
     cols.all.forEach((l, k) => {
       const parts = short(l).split(" ");
       s += `<text x="${x(k)}" y="${H - P.b + 16}" text-anchor="middle">${esc(parts[0])}</text>`;
       if (parts[1]) s += `<text x="${x(k)}" y="${H - P.b + 29}" text-anchor="middle">${esc(parts.slice(1).join(" "))}</text>`;
     });
-    if (cols.other.length) { const gx = x(cols.line.length) - band / 2 - gap / 2; s += `<line x1="${gx}" x2="${gx}" y1="${P.t}" y2="${y(0)}" stroke="var(--line)"/>`; }
+    if (cols.other.length) { const gx = x(cols.line.length) - band / 2 - gap / 2; s += `<line x1="${gx}" x2="${gx}" y1="${P.t}" y2="${yb}" stroke="var(--line)"/>`; }
     // Under a JIT build: the same Rubies without it, dashed.
     if (ghost.length) b.names.forEach((_, i) => { s += path(ghost.map((l, k) => { const r = b.runs[l], v = r && val(r.entries[i]); return v == null ? null : [x(k), y(v)]; }), color(i), ' stroke-dasharray="4 4" opacity=".55"', 1.5); });
     b.names.forEach((_, i) => {
@@ -750,13 +772,13 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
         if (sus(e)) { const tx = x(k), ty = P.t + 2 + i * 9; s += `<path d="M${tx - 4},${ty + 6} L${tx},${ty} L${tx + 4},${ty + 6}Z" fill="var(--bg)" stroke="${c}" stroke-width="1.5"/>`; return; }
         const v = val(e);
         if (v == null) return;
-        const err = showing === "rel" ? e[1] / e[0] * v : e[1];
-        s += `<line x1="${x(k)}" x2="${x(k)}" y1="${y(Math.max(0, v - err))}" y2="${y(v + err)}" stroke="${c}" stroke-width="1" opacity=".5"/>`;
+        const err = e[1] / e[0] * v;
+        s += `<line x1="${x(k)}" x2="${x(k)}" y1="${v - err > 0 ? y(v - err) : yb}" y2="${y(v + err)}" stroke="${c}" stroke-width="1" opacity=".5"/>`;
         s += `<circle cx="${x(k)}" cy="${y(v)}" r="4" fill="${c}" stroke="var(--bg)" stroke-width="2"/>`;
       });
     });
-    s += `<line class="cross" y1="${P.t}" y2="${y(0)}" x1="0" x2="0"/>`;
-    cols.all.forEach((l, k) => { s += `<rect class="hit" data-k="${k}" x="${x(k) - band / 2}" y="${P.t}" width="${band}" height="${y(0) - P.t}"/>`; });
+    s += `<line class="cross" y1="${P.t}" y2="${yb}" x1="0" x2="0"/>`;
+    cols.all.forEach((l, k) => { s += `<rect class="hit" data-k="${k}" x="${x(k) - band / 2}" y="${P.t}" width="${band}" height="${yb - P.t}"/>`; });
     host.innerHTML = s + "</svg><div class=\"tipbox\" hidden></div>";
 
     const tip = host.querySelector(".tipbox"), cross = host.querySelector(".cross");

From 18631af8ed7b7ee7cffab96d10f655ec5dd00dd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20V=C3=A1squez?= <juan@ombulabs.com>
Date: Fri, 9 Oct 2026 01:12:36 -0600
Subject: [PATCH 3/9] Step 3: Lead each card with what happened on the selected
 build

The card title was the report labels ("normal vs &method"), which says
what was compared but not what happened, and the sentence under it
counted interpreter builds even with YJIT or ZJIT picked. Each card now
opens with a verdict for the selected build: the claim wins everywhere,
wins or ties, wins on some Rubies (and who wins on the others), or
loses. Under it: the win and loss ratios, the claim's own speed across
released Rubies (about the same when within the reference's variation),
the JIT against no JIT, and which Rubies are not counted.

Wins, ties and losses compare the claim with the fastest other report,
not the second one listed. The tooltip and the table use the same rule.
---
 script/results_site.html | 126 +++++++++++++++++++++++++++++----------
 1 file changed, 94 insertions(+), 32 deletions(-)

diff --git a/script/results_site.html b/script/results_site.html
index ed78898..ea4b1dd 100644
--- a/script/results_site.html
+++ b/script/results_site.html
@@ -200,8 +200,14 @@
 
 /* Across Rubies: one card per benchmark, a chart with the Rubies on the x axis. */
 .rcard { border-bottom: 1px solid var(--line); padding-block: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
-.rcard h3 { margin: 0; font-size: 15.5px; line-height: 1.35; color: var(--ink); text-wrap: balance; }
-.rcard h3 code { font-weight: 400; }
+.rcard .what { margin: 0; font-size: 13px; color: var(--muted); }
+.rcard h3 { margin: 0; font-size: 18px; line-height: 1.35; color: var(--ink); display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
+.rcard h3 > span:last-child { text-wrap: pretty; overflow-wrap: anywhere; }
+.rcard h3 code { font-weight: 700; font-size: .85em; }
+.rcard h3 .ico { margin-top: 1px; }
+.ico.mix { background: #fff; color: var(--red); box-shadow: inset 0 0 0 3px var(--red); }
+.rcard .say { padding-left: 36px; }
+.rcard td .lose { color: var(--red); }
 .rcard .say { margin: 0; font-size: 14px; color: var(--text); max-width: 75ch; }
 .rcard .say b { color: var(--ink); }
 .rlegend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--text); }
@@ -669,34 +675,88 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
   const day = M.shards.length ? M.shards[0].from.slice(0, 10) : "";
   $("rrun").innerHTML = `Results from ${runLink}${at}, ${esc(day)}: ${M.labels.length} builds on ${M.shards.length} machine${M.shards.length === 1 ? "" : "s"}, built ${esc(M.built_at)}.`;
 
-  function summary(b) {
-    const plain = M.labels.filter((l) => !variant(l));
-    let wins = 0, ties = 0, ran = 0;
-    const ratios = [];
-    plain.forEach((l) => {
-      const r = b.runs[l];
-      if (!r || !ok(r.entries[0])) return;
-      const c = r.entries[0];
-      const others = r.entries.slice(1).filter(ok);
-      if (!others.length) return;
-      ran++;
-      const top = others.reduce((a, o) => (o[0] > a[0] ? o : a));
-      if (same(c, top)) ties++;
-      else if (c[0] > top[0]) { wins++; ratios.push([c[0] / top[0], l]); }
+  // The claimed report against the fastest other report of one build: { s: "ok" | "eq" | "no", ratio, winner }, or null when they cannot be compared.
+  function versus(r) {
+    const c = r && r.entries[0];
+    if (!ok(c)) return null;
+    let w = -1;
+    r.entries.forEach((e, i) => { if (i && ok(e) && (w < 0 || e[0] > r.entries[w][0])) w = i; });
+    if (w < 0) return null;
+    const o = r.entries[w];
+    if (same(c, o)) return { s: "eq", winner: w };
+    return c[0] > o[0] ? { s: "ok", ratio: c[0] / o[0], winner: w } : { s: "no", ratio: o[0] / c[0], winner: w };
+  }
+  // Card icons, as in "Does it hold?"; "~" when the claim wins on some Rubies and loses on others.
+  const RICON = { ok: "✓", eq: "=", no: "✗", na: "–", mix: "~" };
+  // Ratios as in "Does it hold?": 1.04×, 2.3×, 35×, 12k×, 27M×.
+  const x2 = (r) => r >= 1e6 ? (r / 1e6).toFixed(1) + "M×" : r >= 1e4 ? Math.round(r / 1e3) + "k×" : r >= 10 ? Math.round(r) + "×" : r < 1.1 ? r.toFixed(2) + "×" : r.toFixed(1) + "×";
+  // The Ruby without its build: under YJIT the build is already in the heading.
+  const rb = (l) => nice(base(l));
+  // Rubies next to each other on the axis, as "Ruby 2.1 to 2.6"; a run never spans two engines.
+  function runsOf(labels, cols) {
+    const out = [];
+    let run = [];
+    const flush = () => { if (run.length) out.push(run.length === 1 ? rb(run[0]) : `${rb(run[0])} to ${base(run[run.length - 1]).replace(/^[a-z]+_/, "")}`); run = []; };
+    cols.forEach((l) => {
+      if (!labels.includes(l)) return flush();
+      if (run.length && base(run[0]).split("_")[0] !== base(l).split("_")[0]) flush();
+      run.push(l);
     });
-    let s = `<code>${esc(b.names[0])}</code> is fastest on <b>${wins} of ${ran}</b> builds without a JIT`;
-    if (ties) s += ` (${ties} tie${ties > 1 ? "s" : ""})`;
-    if (ratios.length) {
-      ratios.sort((a, c) => a[0] - c[0]);
-      const lo = ratios[0], hi = ratios[ratios.length - 1];
-      s += lo === hi ? `, by ${lo[0].toFixed(1)}×` : `, by ${lo[0].toFixed(1)}× (${esc(nice(lo[1]))}) to ${hi[0].toFixed(1)}× (${esc(nice(hi[1]))})`;
+    flush();
+    return out.join(", ");
+  }
+
+  // What happened, for the selected build: a headline (icon, sentence) and one line of numbers under it.
+  function verdict(b) {
+    const cols = columns().all;
+    const claim = `<code>${esc(b.names[0])}</code>`, nm = (i) => `<code>${esc(b.names[i])}</code>`;
+    const where = mode ? ` with ${esc(mode.toUpperCase())}` : "";
+    const res = cols.map((l) => [l, versus(b.runs[l])]).filter(([, v]) => v);
+    const n = res.length, of = (s) => res.filter(([, v]) => v.s === s);
+    const wins = of("ok"), ties = of("eq"), losses = of("no");
+    const all = `all ${n} Rubies${where}`;
+    let icon = "ok", head;
+    if (!n) { icon = "na"; head = `Did not run on any Ruby${where}`; }
+    else if (!losses.length && !ties.length) head = b.names.length === 2 ? `${claim} beats ${nm(1)} on <b>${all}</b>` : `${claim} is the fastest on <b>${all}</b>`;
+    else if (!losses.length && !wins.length) { icon = "eq"; head = b.names.length === 2 ? `${claim} and ${nm(1)} are about the same on <b>${all}</b>` : `${claim} ties with the fastest on <b>${all}</b>`; }
+    else if (!losses.length) head = `${claim} wins or ties on <b>${all}</b> (${ties.length} tie${ties.length > 1 ? "s" : ""})`;
+    else {
+      // Who beat the claim, and on which Rubies: the most frequent winner first, at most two named.
+      const by = {};
+      losses.forEach(([l, v]) => { (by[v.winner] = by[v.winner] || []).push(l); });
+      const top = Object.keys(by).sort((a, c) => by[c].length - by[a].length);
+      const named = top.slice(0, 2).map((w) => `${nm(+w)} wins on ${esc(runsOf(by[w], cols))}`);
+      const rest = top.slice(2).reduce((s, w) => s + by[w].length, 0);
+      if (rest) named.push(`others on ${rest} more`);
+      if (losses.length === n && top.length === 1) { icon = "no"; head = `${nm(+top[0])} beats ${claim} on <b>${all}</b>`; }
+      else if (losses.length === n) { icon = "no"; head = `${claim} loses on <b>${all}</b>: ${named.join("; ")}`; }
+      else { icon = "mix"; head = `${claim} wins on <b>${wins.length} of ${n} Rubies${where}</b>${ties.length ? ` (${ties.length} tie${ties.length > 1 ? "s" : ""})` : ""}; ${named.join("; ")}`; }
     }
-    const line = plain.filter((l) => mri(l) && l !== "ruby_head" && b.runs[l] && ok(b.runs[l].entries[0]));
+
+    const facts = [];
+    const span = (list, verb) => {
+      if (!list.length) return;
+      const s = list.slice().sort((a, c) => a[1].ratio - c[1].ratio), lo = s[0], hi = s[s.length - 1];
+      facts.push(lo === hi || x2(lo[1].ratio) === x2(hi[1].ratio) ? `${verb} by ${x2(hi[1].ratio)}` : `${verb} by ${x2(lo[1].ratio)} (${esc(rb(lo[0]))}) to ${x2(hi[1].ratio)} (${esc(rb(hi[0]))})`);
+    };
+    span(wins, "Wins");
+    span(losses, "Loses");
+    // Its own speed over the released Rubies of this build; head changes every week, so it is left out.
+    const line = columns().line.filter((l) => base(l) !== "ruby_head" && b.runs[l] && ok(b.runs[l].entries[0]));
     if (line.length > 1) {
-      const first = line[0], last = line[line.length - 1];
-      s += `. Its own speed from ${esc(nice(first))} to ${esc(nice(last))}: <b>${pct(b.runs[last].entries[0][0], b.runs[first].entries[0][0])}</b>`;
+      const f = b.runs[line[0]].entries[0], t = b.runs[line[line.length - 1]].entries[0];
+      facts.push(`Own speed from ${esc(rb(line[0]))} to ${esc(base(line[line.length - 1]).replace(/^ruby_/, ""))}: ${sameRuby(t, f, b.variation) ? "about the same" : `<b>${pct(t[0], f[0])}</b>`}`);
+    }
+    if (mode && line.length) {
+      const l = line[line.length - 1], j = b.runs[l].entries[0], g = b.runs[base(l)] && b.runs[base(l)].entries[0];
+      if (ok(g)) facts.push(`${esc(mode.toUpperCase())} vs no JIT on ${esc(rb(l))}: ${sameRuby(j, g, b.variation) ? "about the same" : `<b>${pct(j[0], g[0])}</b>`}`);
     }
-    return s + ".";
+    // Rubies on the chart that are not in the count.
+    const left = cols.filter((l) => !res.some(([k]) => k === l));
+    const susp = left.filter((l) => b.runs[l] && b.runs[l].entries.some(sus)), gone = left.filter((l) => !susp.includes(l));
+    if (susp.length) facts.push(`Not counted: ${esc(runsOf(susp, cols))} (suspect)`);
+    if (gone.length) facts.push(`Did not run: ${esc(runsOf(gone, cols))}`);
+    return { icon, head, sub: facts.join(" · ") };
   }
 
   // The y axis is logarithmic, so a 100× gap between two reports and a 10% change between two Rubies are both readable on one chart.
@@ -793,8 +853,8 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
             const e = r.entries[i];
             t += `<div class="r"><i style="background:${color(i)}"></i>${esc(nm)}: ${!e ? "did not run" : fmt(e[0]) + " i/s" + (sus(e) ? " (suspect)" : "")}</div>`;
           });
-          const c = r.entries[0], o = r.entries[1];
-          if (ok(c) && ok(o)) t += `<div class="n">${same(c, o) ? "Same-ish: the gap is within the error." : `${esc(b.names[0])} is ${(c[0] / o[0]).toFixed(2)}× ${esc(b.names[1])}.`}</div>`;
+          const c = r.entries[0], v = versus(r);
+          if (v) t += `<div class="n">${v.s === "eq" ? `Same-ish as ${esc(b.names[v.winner])}: the gap is within the error.` : v.s === "ok" ? `${esc(b.names[0])} is ${v.ratio.toFixed(2)}× faster than ${esc(b.names[v.winner])}.` : `${esc(b.names[v.winner])} is ${v.ratio.toFixed(2)}× faster than ${esc(b.names[0])}.`}</div>`;
           const prev = k > 0 && k < cols.line.length && b.runs[cols.line[k - 1]];
           const pc = prev && prev.entries[0];
           if (ok(pc) && ok(c)) t += `<div class="n">vs ${esc(nice(cols.line[k - 1]))}: ${sameRuby(c, pc, b.variation) ? "same-ish" : pct(c[0], pc[0])}</div>`;
@@ -815,7 +875,7 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
 
   function table(b) {
     const cols = columns();
-    let h = `<tr><th>Build</th>${b.names.map((nm, i) => `<th>${esc(nm)}${i ? "" : " (claimed)"}</th>`).join("")}<th>Gap</th></tr>`;
+    let h = `<tr><th>Build</th>${b.names.map((nm, i) => `<th>${esc(nm)}${i ? "" : " (claimed)"}</th>`).join("")}<th>Claimed vs fastest other</th></tr>`;
     cols.all.forEach((l, k) => {
       const r = b.runs[l], prev = k > 0 && k < cols.line.length ? b.runs[cols.line[k - 1]] : null;
       h += `<tr><td>${esc(nice(l))}${l === REF ? " (reference)" : ""}</td>`;
@@ -828,8 +888,8 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
         const d = ok(pe) ? (sameRuby(e, pe, b.variation) ? ' <small class="sm">same-ish</small>' : ` <small>${pct(e[0], pe[0])}</small>`) : "";
         h += `<td>${fmt(e[0])} <small>±${(e[1] / e[0] * 100).toFixed(1)}%</small>${d}</td>`;
       });
-      const c = r && r.entries[0], o = r && r.entries[1];
-      h += `<td>${ok(c) && ok(o) ? (same(c, o) ? '<span class="sm">tie</span>' : (c[0] / o[0]).toFixed(2) + "×") : ""}</td></tr>`;
+      const v = versus(r);
+      h += `<td>${!v ? "" : v.s === "eq" ? '<span class="sm">tie</span>' : v.s === "ok" ? `${v.ratio.toFixed(2)}× faster` : `<span class="lose">${v.ratio.toFixed(2)}× slower</span>`}</td></tr>`;
     });
     return `<div class="tb"><table>${h}</table></div>`;
   }
@@ -854,7 +914,9 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     B.forEach((b, n) => {
       if (b.section !== sec) { sec = b.section; h += `<h2>${esc(sec)}<span class="on">${esc(MODES.find(([m]) => m === mode)[1])}</span></h2>`; }
       const legend = b.names.map((nm, i) => `<span><i style="background:${color(i)}"></i><code>${esc(nm)}</code>${i ? "" : " (claimed)"}</span>`).join("") + (mode ? '<span class="ghost"><i></i>without the JIT</span>' : "");
-      h += `<article class="rcard"><h3>${md(b.title)}</h3><p class="say">${summary(b)}</p><div class="rlegend">${legend}</div>` +
+      const v = verdict(b);
+      h += `<article class="rcard"><p class="what">${md(b.title)}</p><h3><span class="ico ${v.icon}" aria-hidden="true">${RICON[v.icon]}</span><span>${v.head}</span></h3>` +
+        (v.sub ? `<p class="say">${v.sub}</p>` : "") + `<div class="rlegend">${legend}</div>` +
         `<div class="chart" data-n="${n}"></div>${foot(b)}` +
         `<details data-n="${n}"${open.has(n) ? " open" : ""}><summary>Numbers per build</summary>${table(b)}</details>` +
         `<div class="links"><a href="${M.repo}/blob/main/${encodeURI(b.file)}">View the code</a></div></article>`;

From 44cdcdbbc67a83a04fd3b7086356c2a7b5b2a751 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20V=C3=A1squez?= <juan@ombulabs.com>
Date: Fri, 9 Oct 2026 01:13:55 -0600
Subject: [PATCH 4/9] Step 4: Make sections easy to find, and add a find box

The section headings were small gray capitals in a page of 78 charts,
with no way to get to one. They are now real headings with how many
benchmarks they hold, and the picker has a "Jump to" menu that lands
each heading under the pinned picker. A find box narrows the cards to
those whose title, report names, file or section contain every word
typed; it is kept in the URL as ?find=.
---
 script/results_site.html | 55 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 48 insertions(+), 7 deletions(-)

diff --git a/script/results_site.html b/script/results_site.html
index ea4b1dd..fa4cd0b 100644
--- a/script/results_site.html
+++ b/script/results_site.html
@@ -240,6 +240,14 @@
 .rcard td .sm { color: var(--yellow-ink); }
 .rcard td.off { color: var(--faint); }
 .rcard .links { font-size: 13px; }
+/* Section headings: one per folder under code/, with how many benchmarks it shows. */
+.rsec { font-size: 24px; letter-spacing: -.01em; text-transform: none; color: var(--ink); margin: 40px 0 0; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; scroll-margin-top: calc(var(--rpick, 0px) + 8px); }
+.rsec small { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
+.rsec .on { margin-left: auto; font: 500 13px var(--mono); color: var(--ink); float: none; }
+.find, .jump { font: 14px var(--font); color: var(--text); background: var(--bg); border: 1px solid var(--line); padding: 5px 9px; min-width: 0; max-width: 100%; }
+.find { width: 260px; }
+.find:focus-visible, .jump:focus-visible { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
+#rpicker label.lbl + .find + label.lbl { min-width: 0; margin-left: 10px; }
 .rhow { padding-block: 22px 0; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
 .rhow p { margin: 0; max-width: 75ch; }
 
@@ -288,6 +296,7 @@ <h1>How fast is each idiom on each Ruby?</h1>
   <div class="picker" id="rpicker">
     <div class="prow"><span class="lbl">Build</span><div class="chips" id="rmodes"></div><span class="jkey" id="rhint"></span></div>
     <div class="prow"><span class="lbl">Show</span><div class="chips" id="rshow"></div></div>
+    <div class="prow"><label class="lbl" for="rfind">Find</label><input type="search" id="rfind" class="find" placeholder="A method or idiom, e.g. gsub" autocomplete="off"><label class="lbl" for="rjump">Jump to</label><select id="rjump" class="jump"></select></div>
   </div>
 
   <div id="rout"></div>
@@ -626,7 +635,7 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
   const MODES = [["", "Interpreter"], ["yjit", "YJIT"], ["zjit", "ZJIT"]];
   // Without the reference (its image failed, say), there is nothing to be relative to.
   const SHOWS = REF ? [["ips", "i/s"], ["rel", "Relative to " + nice(REF)]] : [["ips", "i/s"]];
-  let mode = "", showing = "ips";
+  let mode = "", showing = "ips", find = "";
 
   function esc(s) { return String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c])); }
   function md(s) { return esc(s).replace(/`([^`]+)`/g, "<code>$1</code>"); }
@@ -658,6 +667,8 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     const p = new URLSearchParams(location.search);
     mode = MODES.some(([m]) => m && m === p.get("build")) && has(p.get("build")) ? p.get("build") : "";
     showing = p.get("show") === "rel" && REF ? "rel" : "ips";
+    find = (p.get("find") || "").trim();
+    $("rfind").value = find;
   }
 
   if (!M.passed) {
@@ -771,9 +782,9 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     const t = steps.filter((v) => v >= bottom && v <= top);
     if (t.length <= 7) return t;
     const d0 = Math.log10(bottom), d1 = Math.log10(top), every = Math.ceil((d1 - d0) / 6);
-    // Inner powers of ten, none closer than 0.35 of a decade to either end, so labels never overlap.
-    const inner = [];
-    for (let k = Math.ceil(d0); k < d1; k += every) if (k - d0 > 0.35 && d1 - k > 0.35) inner.push(+Math.pow(10, k).toPrecision(1));
+    // Inner powers of ten, kept away from both ends (8% of the axis, at least 0.29 of a decade) so labels never overlap.
+    const room = Math.max(0.29, (d1 - d0) * 0.08), inner = [];
+    for (let k = Math.ceil(d0); k < d1; k += every) if (k - d0 > room && d1 - k > room) inner.push(+Math.pow(10, k).toPrecision(1));
     return [bottom, ...inner, top];
   }
   // Tick labels without trailing zeros: 2M, 500k, 0.05×.
@@ -910,9 +921,14 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     if (showing === "rel") hints.push(`1× is the claimed idiom on ${nice(REF)}.`);
     if (mode) hints.push("Dashed: the same Rubies without the JIT, on the same machine.");
     $("rhint").textContent = hints.join(" ");
+    const shown = B.map((b, n) => [b, n]).filter(([b]) => matches(b));
+    const count = {};
+    shown.forEach(([b]) => { count[b.section] = (count[b.section] || 0) + 1; });
+    const secs = Object.keys(count);
+    $("rjump").innerHTML = `<option value="">${secs.length ? "A section" : "No section"}</option>` + secs.map((x) => `<option value="${esc(slug(x))}">${esc(x)} (${count[x]})</option>`).join("");
     let h = "", sec = null;
-    B.forEach((b, n) => {
-      if (b.section !== sec) { sec = b.section; h += `<h2>${esc(sec)}<span class="on">${esc(MODES.find(([m]) => m === mode)[1])}</span></h2>`; }
+    shown.forEach(([b, n]) => {
+      if (b.section !== sec) { sec = b.section; h += `<h2 class="rsec" id="${esc(slug(sec))}">${esc(sec)}<small>${count[sec]} benchmark${count[sec] > 1 ? "s" : ""}</small><span class="on">${esc(MODES.find(([m]) => m === mode)[1])}</span></h2>`; }
       const legend = b.names.map((nm, i) => `<span><i style="background:${color(i)}"></i><code>${esc(nm)}</code>${i ? "" : " (claimed)"}</span>`).join("") + (mode ? '<span class="ghost"><i></i>without the JIT</span>' : "");
       const v = verdict(b);
       h += `<article class="rcard"><p class="what">${md(b.title)}</p><h3><span class="ico ${v.icon}" aria-hidden="true">${RICON[v.icon]}</span><span>${v.head}</span></h3>` +
@@ -921,12 +937,37 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
         `<details data-n="${n}"${open.has(n) ? " open" : ""}><summary>Numbers per build</summary>${table(b)}</details>` +
         `<div class="links"><a href="${M.repo}/blob/main/${encodeURI(b.file)}">View the code</a></div></article>`;
     });
-    $("rout").innerHTML = h;
+    $("rout").innerHTML = h || `<p class="empty">No benchmark matches "${esc(find)}". Clear the find box to see all ${B.length}.</p>`;
     if (!$("view-across-rubies").hidden) $("rout").querySelectorAll(".chart").forEach((c) => chart(B[+c.dataset.n], c));
+    pinned();
+  }
+  // A section heading reached from "Jump to" lands under the pinned picker, not behind it.
+  function pinned() {
+    const p = $("rpicker");
+    document.documentElement.style.setProperty("--rpick", getComputedStyle(p).position === "sticky" ? p.offsetHeight + "px" : "0px");
+  }
+  const slug = (x) => "section-" + x.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  // Find: every word must appear in the title, a report name, the file or the section.
+  function matches(b) {
+    const words = find.toLowerCase().split(/\s+/).filter(Boolean);
+    if (!words.length) return true;
+    const text = [b.title, b.file, b.section, ...b.names].join(" ").toLowerCase();
+    return words.every((w) => text.includes(w));
   }
 
   $("rmodes").addEventListener("click", (e) => { const c = e.target.closest(".chip"); if (c && !c.disabled) { mode = c.dataset.m; window.SiteViews.setParams({ build: mode || null }, true); render(); } });
   $("rshow").addEventListener("click", (e) => { const c = e.target.closest(".chip"); if (c) { showing = c.dataset.s; window.SiteViews.setParams({ show: showing === "rel" ? "rel" : null }, true); render(); } });
+  // Typing replaces the URL instead of adding to history, so back does not step through every letter.
+  let typing;
+  $("rfind").addEventListener("input", () => {
+    clearTimeout(typing);
+    typing = setTimeout(() => { find = $("rfind").value.trim(); window.SiteViews.setParams({ find: find || null }, false); render(); }, 150);
+  });
+  $("rjump").addEventListener("change", (e) => {
+    const target = e.target.value && document.getElementById(e.target.value);
+    e.target.value = "";
+    if (target) { pinned(); target.scrollIntoView(); }
+  });
   $("rout").addEventListener("toggle", (e) => { const d = e.target; if (d.matches("details")) d.open ? open.add(+d.dataset.n) : open.delete(+d.dataset.n); }, true);
   window.addEventListener("popstate", () => { fromURL(); render(); });
   // Charts are drawn only when the view is shown, at the width it has then.

From 2423d6c694c0940d8494b05d703b3c74cbfbfec5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20V=C3=A1squez?= <juan@ombulabs.com>
Date: Fri, 9 Oct 2026 01:15:26 -0600
Subject: [PATCH 5/9] Step 5: Tidy the chart labels, legend and card footer

The TruffleRuby labels ran into each other ("truffle" twice) and every
tick under a JIT build repeated "+yjit". Columns now show the version,
with the engine once under each group, shortened or thinned when the
chart is narrow. A card with suspect results says what the triangles
are in its legend. The CPU, shard and reference variation, the same on
most cards, moved into "Numbers per build"; a noisy benchmark keeps a
visible warning. The intro links to how to read the charts, which now
explains the verdict icons, the log scale and the relative baseline.
---
 script/results_site.html | 50 +++++++++++++++++++++++++++++-----------
 1 file changed, 36 insertions(+), 14 deletions(-)

diff --git a/script/results_site.html b/script/results_site.html
index fa4cd0b..69c73a7 100644
--- a/script/results_site.html
+++ b/script/results_site.html
@@ -217,6 +217,8 @@
 .chart { position: relative; width: 100%; min-width: 0; }
 .chart svg { display: block; width: 100%; height: auto; overflow: visible; }
 .chart text { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
+.chart text.eng { font-family: var(--font); fill: var(--faint); }
+.rlegend .sus svg { width: 10px; height: 8px; fill: var(--bg); stroke: var(--muted); stroke-width: 1.5; overflow: visible; }
 .chart .tick line { stroke: var(--grid); }
 .chart .base { stroke: var(--line); }
 .chart .cross { stroke: var(--faint); stroke-width: 1; opacity: 0; }
@@ -227,8 +229,8 @@
 .tipbox .r { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; }
 .tipbox .r i { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px #fff; }
 .tipbox .n { color: #cfcfcf; font-size: 12px; margin-top: 3px; }
-.rfoot { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); }
-.rfoot .noisy { color: var(--red); font-weight: 700; }
+.rfoot { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
+.rfoot.noisy { margin: 0; color: var(--red); font-weight: 700; }
 .rcard details summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ink); width: max-content; }
 .rcard .tb { overflow-x: auto; border: 1px solid var(--line); margin-top: 8px; }
 .rcard table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
@@ -290,6 +292,7 @@
     <h1>How fast is each idiom on each Ruby?</h1>
     <p>Every Ruby ran each benchmark on the same machine, one after the other, so here you can compare i/s across Rubies. A reference Ruby ran again and again between them, to show how steady the machine was during the run.</p>
     <p class="run" id="rrun"></p>
+    <p class="run"><a href="#rhow">How to read these charts</a></p>
     <p class="note" id="rnote" hidden></p>
   </div>
 
@@ -302,8 +305,10 @@ <h1>How fast is each idiom on each Ruby?</h1>
   <div id="rout"></div>
 
   <div class="rhow" id="rhow">
+    <p><b>How to read a card.</b> The heading says what happened on the build you picked: ✓ the claimed idiom (the one the benchmark file says is fastest) wins or ties on every Ruby, ~ it wins on some and another idiom wins on others, ✗ another idiom wins everywhere. It compares the claimed idiom with the fastest of the others, and a gap within the measured error is a tie.</p>
+    <p><b>How to read a chart.</b> The y axis is logarithmic: each gridline step is the same ratio, so a 100× gap between two idioms and a 10% change between two Rubies both show. Under "Relative", every line is divided by the claimed idiom on the reference Ruby, so 1× is that idiom there and the higher line is still the faster one.</p>
     <p><b>How this is measured.</b> Each shard of benchmark files ran on one GitHub runner: every build, in a random order, with benchmark-ips' default timing. The numbers are i/s as measured.</p>
-    <p><b>How steady the machine was.</b> The reference Ruby ran first, again after every few builds, and last. It is the same code every time, so how much its i/s varies is the machine, not Ruby. Under each chart is that variation (standard deviation over mean). Over 5% the benchmark is marked noisy, and when the typical benchmark of a run is over 5%, the page warns at the top. Two Rubies whose i/s differ by less than that variation are shown as same-ish.</p>
+    <p><b>How steady the machine was.</b> The reference Ruby ran first, again after every few builds, and last. It is the same code every time, so how much its i/s varies is the machine, not Ruby. "Numbers per build" shows that variation (standard deviation over mean). Over 5% the benchmark is marked noisy under its chart, and when the typical benchmark of a run is over 5%, the page warns at the top. Two Rubies whose i/s differ by less than that variation are shown as same-ish.</p>
     <p>Only Rubies of the same run are compared. Weeks are not compared with each other: each week can land on a different CPU. Results over a billion iterations per second (under 1 ns each) are marked suspect and kept off the chart: the JIT most likely removed the work.</p>
   </div>
   </div>
@@ -826,10 +831,18 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     tk.forEach((t) => { s += `<g class="tick"><line x1="${P.l}" x2="${W - P.r}" y1="${y(t)}" y2="${y(t)}"/><text x="${P.l - 8}" y="${y(t) + 4}" text-anchor="end">${tickLabel(t)}</text></g>`; });
     s += `<line class="base" x1="${P.l}" x2="${W - P.r}" y1="${yb}" y2="${yb}"/>`;
     if (showing === "rel" && bottom < 1 && top > 1) s += `<line x1="${P.l}" x2="${W - P.r}" y1="${y(1)}" y2="${y(1)}" stroke="var(--faint)" stroke-dasharray="2 3"/>`;
-    cols.all.forEach((l, k) => {
-      const parts = short(l).split(" ");
-      s += `<text x="${x(k)}" y="${H - P.b + 16}" text-anchor="middle">${esc(parts[0])}</text>`;
-      if (parts[1]) s += `<text x="${x(k)}" y="${H - P.b + 29}" text-anchor="middle">${esc(parts.slice(1).join(" "))}</text>`;
+    // x labels: the version on each column ("+yjit" is already in the picker), and under it the engine once per group of columns.
+    // About 7 px per character at 11 px: on a narrow chart every other version is labelled, and a long engine name shortens.
+    const cw = 7, every = band < 4 * cw + 2 ? 2 : 1;
+    const groups = [];
+    cols.all.forEach((l, k) => { const e = base(l).split("_")[0]; if (groups.length && groups[groups.length - 1].e === e) groups[groups.length - 1].to = k; else groups.push({ e, from: k, to: k }); });
+    groups.forEach((g) => {
+      for (let k = g.from; k <= g.to; k += every) s += `<text x="${x(k)}" y="${H - P.b + 16}" text-anchor="middle">${esc(base(cols.all[k]).replace(/^[a-z]+_/, ""))}</text>`;
+    });
+    groups.forEach((g) => {
+      const room = band * (g.to - g.from + 1);
+      const name = [{ ruby: "Ruby", jruby: "JRuby", truffleruby: "TruffleRuby" }[g.e] || g.e, { truffleruby: "Truffle" }[g.e], { jruby: "JR", truffleruby: "TR" }[g.e]].filter(Boolean).find((n) => n.length * cw <= room) || "";
+      if (name) s += `<text x="${(x(g.from) + x(g.to)) / 2}" y="${H - P.b + 30}" text-anchor="middle" class="eng">${esc(name)}</text>`;
     });
     if (cols.other.length) { const gx = x(cols.line.length) - band / 2 - gap / 2; s += `<line x1="${gx}" x2="${gx}" y1="${P.t}" y2="${yb}" stroke="var(--line)"/>`; }
     // Under a JIT build: the same Rubies without it, dashed.
@@ -905,11 +918,19 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     return `<div class="tb"><table>${h}</table></div>`;
   }
 
-  function foot(b) {
+  // The machine, inside "Numbers per build": the same on every card but the CPU, so it only shows on the card when the benchmark was noisy.
+  function machine(b) {
     const shard = M.shards.find((x) => x.shard === b.shard) || {};
-    const parts = [`Ran on ${esc(cpu(shard.cpu))}${M.shards_total > 1 ? `, shard ${b.shard + 1} of ${M.shards_total}` : ""}`];
-    if (b.variation != null) parts.push(`<span class="${b.noisy ? "noisy" : ""}">${esc(nice(REF))} ran ${b.reference_passes} times; its i/s varied by ${(b.variation * 100).toFixed(1)}%${b.noisy ? " (noisy)" : ""}</span>`);
-    return `<div class="rfoot">${parts.map((p) => `<span>${p}</span>`).join("")}</div>`;
+    const parts = [`Ran on ${esc(cpu(shard.cpu))}${M.shards_total > 1 ? `, shard ${b.shard + 1} of ${M.shards_total}` : ""}.`];
+    if (b.variation != null) parts.push(`${esc(nice(REF))} ran ${b.reference_passes} times; its i/s varied by ${(b.variation * 100).toFixed(1)}%.`);
+    return `<p class="rfoot">${parts.join(" ")}</p>`;
+  }
+  function noisy(b) {
+    return b.noisy ? `<p class="rfoot noisy">Noisy: ${esc(nice(REF))}'s i/s varied by ${(b.variation * 100).toFixed(1)}% during this benchmark, so gaps that small may be the machine, not Ruby.</p>` : "";
+  }
+  // Suspect results are drawn as triangles along the top of the chart.
+  function hasSuspect(b) {
+    return columns().all.some((l) => b.runs[l] && b.runs[l].entries.some(sus));
   }
 
   const open = new Set();
@@ -929,12 +950,13 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     let h = "", sec = null;
     shown.forEach(([b, n]) => {
       if (b.section !== sec) { sec = b.section; h += `<h2 class="rsec" id="${esc(slug(sec))}">${esc(sec)}<small>${count[sec]} benchmark${count[sec] > 1 ? "s" : ""}</small><span class="on">${esc(MODES.find(([m]) => m === mode)[1])}</span></h2>`; }
-      const legend = b.names.map((nm, i) => `<span><i style="background:${color(i)}"></i><code>${esc(nm)}</code>${i ? "" : " (claimed)"}</span>`).join("") + (mode ? '<span class="ghost"><i></i>without the JIT</span>' : "");
+      const legend = b.names.map((nm, i) => `<span><i style="background:${color(i)}"></i><code>${esc(nm)}</code>${i ? "" : " (claimed)"}</span>`).join("") + (mode ? '<span class="ghost"><i></i>without the JIT</span>' : "") +
+        (hasSuspect(b) ? '<span class="sus"><svg viewBox="0 0 10 8" aria-hidden="true"><path d="M1,7 L5,1 L9,7Z"/></svg>suspect, over 1B i/s: kept off the chart</span>' : "");
       const v = verdict(b);
       h += `<article class="rcard"><p class="what">${md(b.title)}</p><h3><span class="ico ${v.icon}" aria-hidden="true">${RICON[v.icon]}</span><span>${v.head}</span></h3>` +
         (v.sub ? `<p class="say">${v.sub}</p>` : "") + `<div class="rlegend">${legend}</div>` +
-        `<div class="chart" data-n="${n}"></div>${foot(b)}` +
-        `<details data-n="${n}"${open.has(n) ? " open" : ""}><summary>Numbers per build</summary>${table(b)}</details>` +
+        `<div class="chart" data-n="${n}"></div>${noisy(b)}` +
+        `<details data-n="${n}"${open.has(n) ? " open" : ""}><summary>Numbers per build</summary>${machine(b)}${table(b)}</details>` +
         `<div class="links"><a href="${M.repo}/blob/main/${encodeURI(b.file)}">View the code</a></div></article>`;
     });
     $("rout").innerHTML = h || `<p class="empty">No benchmark matches "${esc(find)}". Clear the find box to see all ${B.length}.</p>`;

From 6ba442b66ab0878e99ab6215358bce2d32dec5bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20V=C3=A1squez?= <juan@ombulabs.com>
Date: Fri, 9 Oct 2026 10:00:33 -0600
Subject: [PATCH 6/9] Step 6: Split the card's numbers into labelled tiles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

One line under the verdict held every number ("Wins by 1.05x (Ruby 3.0)
to 1.2x (Ruby head) · Own speed from Ruby 2.1 to 4.0: +40.4% · Not
counted: ..."), and it read as if Ruby 3.0 were being compared with Ruby
head. Each number now has its own tile: a label, the value, and a
caption saying who it is about and where ("attr_accessor over
getter_and_setter, least on Ruby 3.0, most on Ruby head"). The report
labels are the card title again, above the verdict, and the Rubies left
out of the count move under the chart they refer to.
---
 script/results_site.html | 81 ++++++++++++++++++++++++++--------------
 1 file changed, 53 insertions(+), 28 deletions(-)

diff --git a/script/results_site.html b/script/results_site.html
index 69c73a7..cfd8274 100644
--- a/script/results_site.html
+++ b/script/results_site.html
@@ -200,16 +200,24 @@
 
 /* Across Rubies: one card per benchmark, a chart with the Rubies on the x axis. */
 .rcard { border-bottom: 1px solid var(--line); padding-block: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
-.rcard .what { margin: 0; font-size: 13px; color: var(--muted); }
-.rcard h3 { margin: 0; font-size: 18px; line-height: 1.35; color: var(--ink); display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
-.rcard h3 > span:last-child { text-wrap: pretty; overflow-wrap: anywhere; }
-.rcard h3 code { font-weight: 700; font-size: .85em; }
-.rcard h3 .ico { margin-top: 1px; }
+/* Card: the title says what is compared, the verdict what happened, the tiles the numbers behind it. */
+.rcard h3 { margin: 0; font-size: 20px; line-height: 1.3; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
+.rcard h3 code { font-weight: 700; font-size: .9em; }
+.rcard .verdict { margin: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 15.5px; line-height: 1.45; color: var(--text); text-wrap: pretty; overflow-wrap: anywhere; }
+.rcard .verdict code { font-weight: 700; color: var(--ink); }
+.rcard .verdict b { color: var(--ink); }
+.rcard .verdict .ico { width: 20px; height: 20px; font-size: 11px; margin-top: 1px; }
 .ico.mix { background: #fff; color: var(--red); box-shadow: inset 0 0 0 3px var(--red); }
-.rcard .say { padding-left: 36px; }
+.stats { margin: 4px 0 2px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
+.stats > div { border: 1px solid var(--line); padding: 10px 12px; display: grid; align-content: start; gap: 2px; min-width: 0; }
+.stats dt { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+.stats dd { margin: 0; }
+.stats .v { font: 700 22px/1.2 var(--mono); color: var(--ink); }
+.stats .v.up { color: var(--green-dark); }
+.stats .v.down { color: var(--red); }
+.stats .n { font-size: 12.5px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
+.stats .n code { color: var(--text); }
 .rcard td .lose { color: var(--red); }
-.rcard .say { margin: 0; font-size: 14px; color: var(--text); max-width: 75ch; }
-.rcard .say b { color: var(--ink); }
 .rlegend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--text); }
 .rlegend span { display: inline-flex; align-items: center; gap: 6px; }
 .rlegend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
@@ -259,7 +267,7 @@
   .picker { position: static; border-bottom: 1px solid var(--line); }
   .tip::after { position: fixed; left: 16px; right: 16px; top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: none; width: auto; max-width: none; font-size: 14px; padding: 12px 14px; }
 }
-@media (max-width: 560px) { .detail { padding-left: 4px; } }
+@media (max-width: 560px) { .detail { padding-left: 4px; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats > div { padding: 8px 10px; } .stats .v { font-size: 16px; } }
 @media (max-width: 480px) { .services { grid-template-columns: minmax(0, 1fr); } }
 </style>
 </head>
@@ -708,11 +716,11 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
   const x2 = (r) => r >= 1e6 ? (r / 1e6).toFixed(1) + "M×" : r >= 1e4 ? Math.round(r / 1e3) + "k×" : r >= 10 ? Math.round(r) + "×" : r < 1.1 ? r.toFixed(2) + "×" : r.toFixed(1) + "×";
   // The Ruby without its build: under YJIT the build is already in the heading.
   const rb = (l) => nice(base(l));
-  // Rubies next to each other on the axis, as "Ruby 2.1 to 2.6"; a run never spans two engines.
+  // Rubies next to each other on the axis, as "Ruby 2.1 to 2.6" (two: "Ruby 3.1 and 3.2"); a run never spans two engines.
   function runsOf(labels, cols) {
     const out = [];
     let run = [];
-    const flush = () => { if (run.length) out.push(run.length === 1 ? rb(run[0]) : `${rb(run[0])} to ${base(run[run.length - 1]).replace(/^[a-z]+_/, "")}`); run = []; };
+    const flush = () => { if (run.length) out.push(run.length === 1 ? rb(run[0]) : `${rb(run[0])} ${run.length === 2 ? "and" : "to"} ${base(run[run.length - 1]).replace(/^[a-z]+_/, "")}`); run = []; };
     cols.forEach((l) => {
       if (!labels.includes(l)) return flush();
       if (run.length && base(run[0]).split("_")[0] !== base(l).split("_")[0]) flush();
@@ -749,30 +757,46 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
       else { icon = "mix"; head = `${claim} wins on <b>${wins.length} of ${n} Rubies${where}</b>${ties.length ? ` (${ties.length} tie${ties.length > 1 ? "s" : ""})` : ""}; ${named.join("; ")}`; }
     }
 
-    const facts = [];
-    const span = (list, verb) => {
-      if (!list.length) return;
+    // One tile per fact: a label, one number, and a caption saying who it is about and where.
+    const tiles = [];
+    const rival = b.names.length === 2 ? nm(1) : "the fastest other idiom";
+    const range = (list) => {
       const s = list.slice().sort((a, c) => a[1].ratio - c[1].ratio), lo = s[0], hi = s[s.length - 1];
-      facts.push(lo === hi || x2(lo[1].ratio) === x2(hi[1].ratio) ? `${verb} by ${x2(hi[1].ratio)}` : `${verb} by ${x2(lo[1].ratio)} (${esc(rb(lo[0]))}) to ${x2(hi[1].ratio)} (${esc(rb(hi[0]))})`);
+      const one = lo === hi || x2(lo[1].ratio) === x2(hi[1].ratio);
+      return { value: one ? x2(hi[1].ratio) : `${x2(lo[1].ratio)} to ${x2(hi[1].ratio)}`, where: one ? (list.length === 1 ? `on ${esc(rb(hi[0]))}` : "") : `least on ${esc(rb(lo[0]))}, most on ${esc(rb(hi[0]))}` };
     };
-    span(wins, "Wins");
-    span(losses, "Loses");
+    if (wins.length) {
+      const g = range(wins);
+      tiles.push({ label: losses.length ? "Faster, where it wins" : "Faster by", value: g.value, cls: "up", note: `${claim} over ${rival}${g.where ? `<br>${g.where}` : ""}` });
+    }
+    if (losses.length) {
+      const g = range(losses);
+      tiles.push({ label: "Slower, where it loses", value: g.value, cls: "down", note: `${claim} behind the winner${g.where ? `<br>${g.where}` : ""}` });
+    }
     // Its own speed over the released Rubies of this build; head changes every week, so it is left out.
+    const change = (t, f) => sameRuby(t, f, b.variation) ? { value: "Same", cls: "" } : { value: pct(t[0], f[0]), cls: t[0] > f[0] ? "up" : "down" };
     const line = columns().line.filter((l) => base(l) !== "ruby_head" && b.runs[l] && ok(b.runs[l].entries[0]));
     if (line.length > 1) {
-      const f = b.runs[line[0]].entries[0], t = b.runs[line[line.length - 1]].entries[0];
-      facts.push(`Own speed from ${esc(rb(line[0]))} to ${esc(base(line[line.length - 1]).replace(/^ruby_/, ""))}: ${sameRuby(t, f, b.variation) ? "about the same" : `<b>${pct(t[0], f[0])}</b>`}`);
+      const c = change(b.runs[line[line.length - 1]].entries[0], b.runs[line[0]].entries[0]);
+      tiles.push({ label: `${esc(rb(line[0]))} → ${esc(base(line[line.length - 1]).replace(/^ruby_/, ""))}`, value: c.value, cls: c.cls, note: `Its own i/s on the newer Ruby${c.value === "Same" ? ", within the machine's noise" : ""}` });
     }
     if (mode && line.length) {
-      const l = line[line.length - 1], j = b.runs[l].entries[0], g = b.runs[base(l)] && b.runs[base(l)].entries[0];
-      if (ok(g)) facts.push(`${esc(mode.toUpperCase())} vs no JIT on ${esc(rb(l))}: ${sameRuby(j, g, b.variation) ? "about the same" : `<b>${pct(j[0], g[0])}</b>`}`);
+      const l = line[line.length - 1], g = b.runs[base(l)] && b.runs[base(l)].entries[0];
+      if (ok(g)) {
+        const c = change(b.runs[l].entries[0], g);
+        tiles.push({ label: `${esc(mode.toUpperCase())} on ${esc(rb(l))}`, value: c.value, cls: c.cls, note: `Its own i/s with ${esc(mode.toUpperCase())} against the interpreter` });
+      }
     }
     // Rubies on the chart that are not in the count.
-    const left = cols.filter((l) => !res.some(([k]) => k === l));
+    const left = cols.filter((l) => !res.some(([k]) => k === l)), notes = [];
     const susp = left.filter((l) => b.runs[l] && b.runs[l].entries.some(sus)), gone = left.filter((l) => !susp.includes(l));
-    if (susp.length) facts.push(`Not counted: ${esc(runsOf(susp, cols))} (suspect)`);
-    if (gone.length) facts.push(`Did not run: ${esc(runsOf(gone, cols))}`);
-    return { icon, head, sub: facts.join(" · ") };
+    if (susp.length) notes.push(`Not counted: ${esc(runsOf(susp, cols))}, suspect results (over 1B i/s).`);
+    if (gone.length) notes.push(`Did not run: ${esc(runsOf(gone, cols))}.`);
+    return { icon, head, tiles, foot: notes.join(" ") };
+  }
+  function tilesHtml(v) {
+    if (!v.tiles.length) return "";
+    return `<dl class="stats">${v.tiles.map((t) => `<div><dt>${t.label}</dt><dd class="v ${t.cls}">${t.value}</dd><dd class="n">${t.note}</dd></div>`).join("")}</dl>`;
   }
 
   // The y axis is logarithmic, so a 100× gap between two reports and a 10% change between two Rubies are both readable on one chart.
@@ -953,9 +977,10 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
       const legend = b.names.map((nm, i) => `<span><i style="background:${color(i)}"></i><code>${esc(nm)}</code>${i ? "" : " (claimed)"}</span>`).join("") + (mode ? '<span class="ghost"><i></i>without the JIT</span>' : "") +
         (hasSuspect(b) ? '<span class="sus"><svg viewBox="0 0 10 8" aria-hidden="true"><path d="M1,7 L5,1 L9,7Z"/></svg>suspect, over 1B i/s: kept off the chart</span>' : "");
       const v = verdict(b);
-      h += `<article class="rcard"><p class="what">${md(b.title)}</p><h3><span class="ico ${v.icon}" aria-hidden="true">${RICON[v.icon]}</span><span>${v.head}</span></h3>` +
-        (v.sub ? `<p class="say">${v.sub}</p>` : "") + `<div class="rlegend">${legend}</div>` +
-        `<div class="chart" data-n="${n}"></div>${noisy(b)}` +
+      // Title (what is compared), verdict (what happened), the numbers behind it, then the chart.
+      h += `<article class="rcard"><h3>${md(b.title)}</h3><p class="verdict"><span class="ico ${v.icon}" aria-hidden="true">${RICON[v.icon]}</span><span>${v.head}</span></p>` +
+        tilesHtml(v) + `<div class="rlegend">${legend}</div>` +
+        `<div class="chart" data-n="${n}"></div>${v.foot ? `<p class="rfoot">${v.foot}</p>` : ""}${noisy(b)}` +
         `<details data-n="${n}"${open.has(n) ? " open" : ""}><summary>Numbers per build</summary>${machine(b)}${table(b)}</details>` +
         `<div class="links"><a href="${M.repo}/blob/main/${encodeURI(b.file)}">View the code</a></div></article>`;
     });

From 90ecc2204d67ac98c25e968898de577b6e3bdc59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20V=C3=A1squez?= <juan@ombulabs.com>
Date: Fri, 9 Oct 2026 10:25:07 -0600
Subject: [PATCH 7/9] Step 7: Keep long card titles on one line

A title with many report names, like "value.between? vs plain compare vs
range#cover? vs range#include? vs range#member?", broke over two lines
at 20px. A long title now shrinks to fit one line, down to 14px, and
only wraps (at 14px) when it is too long even then: on desktop that is
the two titles over 100 characters.
---
 script/results_site.html | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/script/results_site.html b/script/results_site.html
index cfd8274..ec86eec 100644
--- a/script/results_site.html
+++ b/script/results_site.html
@@ -201,7 +201,9 @@
 /* Across Rubies: one card per benchmark, a chart with the Rubies on the x axis. */
 .rcard { border-bottom: 1px solid var(--line); padding-block: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
 /* Card: the title says what is compared, the verdict what happened, the tiles the numbers behind it. */
-.rcard h3 { margin: 0; font-size: 20px; line-height: 1.3; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
+.rcard h3 { margin: 0; font-size: 20px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
+/* One line when it fits: fitTitles() shrinks a long title down to 14px first, and only lets it wrap past that. */
+.rcard h3.one { white-space: nowrap; overflow-wrap: normal; }
 .rcard h3 code { font-weight: 700; font-size: .9em; }
 .rcard .verdict { margin: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 15.5px; line-height: 1.45; color: var(--text); text-wrap: pretty; overflow-wrap: anywhere; }
 .rcard .verdict code { font-weight: 700; color: var(--ink); }
@@ -986,8 +988,21 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     });
     $("rout").innerHTML = h || `<p class="empty">No benchmark matches "${esc(find)}". Clear the find box to see all ${B.length}.</p>`;
     if (!$("view-across-rubies").hidden) $("rout").querySelectorAll(".chart").forEach((c) => chart(B[+c.dataset.n], c));
+    fitTitles();
     pinned();
   }
+  // A title of many report names stays on one line by getting smaller (20px down to 14px); one too long even at 14px wraps at 14px.
+  function fitTitles() {
+    $("rout").querySelectorAll(".rcard h3").forEach((h) => {
+      h.classList.add("one");
+      h.style.fontSize = "";
+      const room = h.clientWidth, need = h.scrollWidth;
+      if (need <= room) return;
+      const size = Math.floor(20 * room / need * 10) / 10;
+      if (size >= 14) h.style.fontSize = size + "px";
+      else { h.style.fontSize = "14px"; h.classList.remove("one"); }
+    });
+  }
   // A section heading reached from "Jump to" lands under the pinned picker, not behind it.
   function pinned() {
     const p = $("rpicker");

From 60badc3fb9c4721565db8764ab8f8c83f39fb418 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20V=C3=A1squez?= <juan@ombulabs.com>
Date: Fri, 9 Oct 2026 17:14:42 -0600
Subject: [PATCH 8/9] Step 8: Drop the find box, keep Jump to

A free-text box leaves the reader guessing what to type. Sections are the way in.
---
 script/results_site.html | 31 +++++++------------------------
 1 file changed, 7 insertions(+), 24 deletions(-)

diff --git a/script/results_site.html b/script/results_site.html
index ec86eec..89d6ec0 100644
--- a/script/results_site.html
+++ b/script/results_site.html
@@ -256,10 +256,8 @@
 .rsec { font-size: 24px; letter-spacing: -.01em; text-transform: none; color: var(--ink); margin: 40px 0 0; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; scroll-margin-top: calc(var(--rpick, 0px) + 8px); }
 .rsec small { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
 .rsec .on { margin-left: auto; font: 500 13px var(--mono); color: var(--ink); float: none; }
-.find, .jump { font: 14px var(--font); color: var(--text); background: var(--bg); border: 1px solid var(--line); padding: 5px 9px; min-width: 0; max-width: 100%; }
-.find { width: 260px; }
-.find:focus-visible, .jump:focus-visible { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
-#rpicker label.lbl + .find + label.lbl { min-width: 0; margin-left: 10px; }
+.jump { font: 14px var(--font); color: var(--text); background: var(--bg); border: 1px solid var(--line); padding: 5px 9px; min-width: 0; max-width: 100%; }
+.jump:focus-visible { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
 .rhow { padding-block: 22px 0; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
 .rhow p { margin: 0; max-width: 75ch; }
 
@@ -309,7 +307,7 @@ <h1>How fast is each idiom on each Ruby?</h1>
   <div class="picker" id="rpicker">
     <div class="prow"><span class="lbl">Build</span><div class="chips" id="rmodes"></div><span class="jkey" id="rhint"></span></div>
     <div class="prow"><span class="lbl">Show</span><div class="chips" id="rshow"></div></div>
-    <div class="prow"><label class="lbl" for="rfind">Find</label><input type="search" id="rfind" class="find" placeholder="A method or idiom, e.g. gsub" autocomplete="off"><label class="lbl" for="rjump">Jump to</label><select id="rjump" class="jump"></select></div>
+    <div class="prow"><label class="lbl" for="rjump">Jump to</label><select id="rjump" class="jump"></select></div>
   </div>
 
   <div id="rout"></div>
@@ -650,7 +648,7 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
   const MODES = [["", "Interpreter"], ["yjit", "YJIT"], ["zjit", "ZJIT"]];
   // Without the reference (its image failed, say), there is nothing to be relative to.
   const SHOWS = REF ? [["ips", "i/s"], ["rel", "Relative to " + nice(REF)]] : [["ips", "i/s"]];
-  let mode = "", showing = "ips", find = "";
+  let mode = "", showing = "ips";
 
   function esc(s) { return String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c])); }
   function md(s) { return esc(s).replace(/`([^`]+)`/g, "<code>$1</code>"); }
@@ -682,8 +680,6 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     const p = new URLSearchParams(location.search);
     mode = MODES.some(([m]) => m && m === p.get("build")) && has(p.get("build")) ? p.get("build") : "";
     showing = p.get("show") === "rel" && REF ? "rel" : "ips";
-    find = (p.get("find") || "").trim();
-    $("rfind").value = find;
   }
 
   if (!M.passed) {
@@ -968,11 +964,11 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     if (showing === "rel") hints.push(`1× is the claimed idiom on ${nice(REF)}.`);
     if (mode) hints.push("Dashed: the same Rubies without the JIT, on the same machine.");
     $("rhint").textContent = hints.join(" ");
-    const shown = B.map((b, n) => [b, n]).filter(([b]) => matches(b));
+    const shown = B.map((b, n) => [b, n]);
     const count = {};
     shown.forEach(([b]) => { count[b.section] = (count[b.section] || 0) + 1; });
     const secs = Object.keys(count);
-    $("rjump").innerHTML = `<option value="">${secs.length ? "A section" : "No section"}</option>` + secs.map((x) => `<option value="${esc(slug(x))}">${esc(x)} (${count[x]})</option>`).join("");
+    $("rjump").innerHTML = `<option value="">A section</option>` + secs.map((x) => `<option value="${esc(slug(x))}">${esc(x)} (${count[x]})</option>`).join("");
     let h = "", sec = null;
     shown.forEach(([b, n]) => {
       if (b.section !== sec) { sec = b.section; h += `<h2 class="rsec" id="${esc(slug(sec))}">${esc(sec)}<small>${count[sec]} benchmark${count[sec] > 1 ? "s" : ""}</small><span class="on">${esc(MODES.find(([m]) => m === mode)[1])}</span></h2>`; }
@@ -986,7 +982,7 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
         `<details data-n="${n}"${open.has(n) ? " open" : ""}><summary>Numbers per build</summary>${machine(b)}${table(b)}</details>` +
         `<div class="links"><a href="${M.repo}/blob/main/${encodeURI(b.file)}">View the code</a></div></article>`;
     });
-    $("rout").innerHTML = h || `<p class="empty">No benchmark matches "${esc(find)}". Clear the find box to see all ${B.length}.</p>`;
+    $("rout").innerHTML = h;
     if (!$("view-across-rubies").hidden) $("rout").querySelectorAll(".chart").forEach((c) => chart(B[+c.dataset.n], c));
     fitTitles();
     pinned();
@@ -1009,22 +1005,9 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     document.documentElement.style.setProperty("--rpick", getComputedStyle(p).position === "sticky" ? p.offsetHeight + "px" : "0px");
   }
   const slug = (x) => "section-" + x.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-  // Find: every word must appear in the title, a report name, the file or the section.
-  function matches(b) {
-    const words = find.toLowerCase().split(/\s+/).filter(Boolean);
-    if (!words.length) return true;
-    const text = [b.title, b.file, b.section, ...b.names].join(" ").toLowerCase();
-    return words.every((w) => text.includes(w));
-  }
 
   $("rmodes").addEventListener("click", (e) => { const c = e.target.closest(".chip"); if (c && !c.disabled) { mode = c.dataset.m; window.SiteViews.setParams({ build: mode || null }, true); render(); } });
   $("rshow").addEventListener("click", (e) => { const c = e.target.closest(".chip"); if (c) { showing = c.dataset.s; window.SiteViews.setParams({ show: showing === "rel" ? "rel" : null }, true); render(); } });
-  // Typing replaces the URL instead of adding to history, so back does not step through every letter.
-  let typing;
-  $("rfind").addEventListener("input", () => {
-    clearTimeout(typing);
-    typing = setTimeout(() => { find = $("rfind").value.trim(); window.SiteViews.setParams({ find: find || null }, false); render(); }, 150);
-  });
   $("rjump").addEventListener("change", (e) => {
     const target = e.target.value && document.getElementById(e.target.value);
     e.target.value = "";

From ebfaed39e3fb3d4d7b405aaadd942d92cc1f717a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20V=C3=A1squez?= <juan@ombulabs.com>
Date: Mon, 12 Oct 2026 12:30:07 -0600
Subject: [PATCH 9/9] Step 9: Fix what the code review found
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Keep 4 significant digits in the relative value, so a report millions of times slower than the claimed one no longer rounds to 0 and breaks the log axis (26 values on run 37571671870); the axis also skips anything at or below 0, and labels tiny values as 1/50M×.
- A claim that ties on some Rubies and loses on the rest says it never wins (✗), not "wins on 0 of N" (~).
- "the one Ruby" instead of "all 1 Rubies".
- A Ruby where the claim ran but could not be compared says "Not compared", not "Did not run".
- "How to read a card" lists every icon.
- Jump to keeps the chosen section, so arrow keys can move through the list.
- Card titles are measured in one pass and again once the web font loads.
- Drop an unused helper and a leftover from the find box.
---
 script/build_results_site.rb |  9 +++++++--
 script/results_site.html     | 35 ++++++++++++++++++++---------------
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/script/build_results_site.rb b/script/build_results_site.rb
index 7d0a24f..ddce20b 100644
--- a/script/build_results_site.rb
+++ b/script/build_results_site.rb
@@ -178,7 +178,7 @@ def entry(report, name)
   def cross_run(report, names, ref_ips)
     entries = names.each_with_index.map do |name, i|
       e = entry(report, name) or next nil
-      rel = ref_ips[0].empty? || !e["ips"].positive? || e["ips"] > SUSPECT_IPS ? nil : (e["ips"] / median(ref_ips[0])).round(4)
+      rel = ref_ips[0].empty? || !e["ips"].positive? || e["ips"] > SUSPECT_IPS ? nil : sig(e["ips"] / median(ref_ips[0]))
       [e["ips"].round(3), e["error"].to_f.round(1), rel]
     end
     { entries: entries, pass: report["pass"] }
@@ -193,7 +193,7 @@ def reference_run(passes, names, ref_ips)
       usable = es.select { |e| e["ips"].positive? && e["ips"] <= SUSPECT_IPS }
       pick = usable.empty? ? es : usable
       ips = median(pick.map { |e| e["ips"] })
-      rel = ref_ips[0].empty? || ref_ips[i].empty? ? nil : (median(ref_ips[i]) / median(ref_ips[0])).round(4)
+      rel = ref_ips[0].empty? || ref_ips[i].empty? ? nil : sig(median(ref_ips[i]) / median(ref_ips[0]))
       [ips.round(3), median(pick.map { |e| e["error"].to_f }).round(1), rel]
     end
     { entries: entries, passes: passes.map { |r| r["pass"] }.sort }
@@ -208,6 +208,11 @@ def variation(ref_ips)
     cvs.empty? ? nil : median(cvs)
   end
 
+  # Four significant digits: a report 27M times slower than the claimed one keeps its value instead of rounding to 0.
+  def sig(value)
+    Float(format("%.4g", value))
+  end
+
   def median(values)
     s = values.sort
     s.size.odd? ? s[s.size / 2] : (s[s.size / 2 - 1] + s[s.size / 2]) / 2.0
diff --git a/script/results_site.html b/script/results_site.html
index 89d6ec0..634ca8a 100644
--- a/script/results_site.html
+++ b/script/results_site.html
@@ -313,7 +313,7 @@ <h1>How fast is each idiom on each Ruby?</h1>
   <div id="rout"></div>
 
   <div class="rhow" id="rhow">
-    <p><b>How to read a card.</b> The heading says what happened on the build you picked: ✓ the claimed idiom (the one the benchmark file says is fastest) wins or ties on every Ruby, ~ it wins on some and another idiom wins on others, ✗ another idiom wins everywhere. It compares the claimed idiom with the fastest of the others, and a gap within the measured error is a tie.</p>
+    <p><b>How to read a card.</b> The heading says what happened on the build you picked: ✓ the claimed idiom (the one the benchmark file says is fastest) wins on every Ruby, or wins on some and ties on the rest; = it ties on every Ruby; ~ it wins on some and another idiom wins on others; ✗ it never wins; – no Ruby could compare them. It compares the claimed idiom with the fastest of the others, and a gap within the measured error is a tie.</p>
     <p><b>How to read a chart.</b> The y axis is logarithmic: each gridline step is the same ratio, so a 100× gap between two idioms and a 10% change between two Rubies both show. Under "Relative", every line is divided by the claimed idiom on the reference Ruby, so 1× is that idiom there and the higher line is still the faster one.</p>
     <p><b>How this is measured.</b> Each shard of benchmark files ran on one GitHub runner: every build, in a random order, with benchmark-ips' default timing. The numbers are i/s as measured.</p>
     <p><b>How steady the machine was.</b> The reference Ruby ran first, again after every few builds, and last. It is the same code every time, so how much its i/s varies is the machine, not Ruby. "Numbers per build" shows that variation (standard deviation over mean). Over 5% the benchmark is marked noisy under its chart, and when the typical benchmark of a run is over 5%, the page warns at the top. Two Rubies whose i/s differ by less than that variation are shown as same-ish.</p>
@@ -653,7 +653,6 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
   function esc(s) { return String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c])); }
   function md(s) { return esc(s).replace(/`([^`]+)`/g, "<code>$1</code>"); }
   function nice(l) { const [b, m] = l.split("+"); return b.replace(/^ruby_/, "Ruby ").replace(/^jruby_/, "JRuby ").replace(/^truffleruby_/, "TruffleRuby ") + (m ? " + " + m.toUpperCase() : ""); }
-  function short(l) { const [b, m] = l.split("+"); return b.replace(/^ruby_/, "").replace(/^jruby_/, "jruby ").replace(/^truffleruby_/, "truffle ") + (m ? " +" + m : ""); }
   function fmt(v) { return v >= 1e9 ? (v / 1e9).toFixed(1) + "B" : v >= 1e6 ? (v / 1e6).toFixed(v >= 1e7 ? 1 : 2) + "M" : v >= 1e3 ? (v / 1e3).toFixed(v >= 1e5 ? 0 : 1) + "k" : v.toFixed(1); }
   function pct(a, b) { const p = (a / b - 1) * 100; return (p >= 0 ? "+" : "") + p.toFixed(1) + "%"; }
   function cpu(c) { return (c || "unknown CPU").replace(/^AMD /, "").replace(/ \d+-Core Processor$/, "").replace(/^Intel\(R\) Xeon\(R\) Platinum (\S+) CPU.*$/i, "Xeon $1"); }
@@ -663,7 +662,7 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
   // A result that can be drawn and compared: it ran and is not suspect.
   const ok = (e) => !!e && !sus(e) && e[0] > 0;
   // Relative needs the reference to have the claimed report.
-  const val = (e) => ok(e) ? (showing === "rel" ? e[2] : e[0]) : null;
+  const val = (e) => { const v = ok(e) ? (showing === "rel" ? e[2] : e[0]) : null; return v > 0 ? v : null; };
   // Two reports of one build, measured seconds apart: same-ish when the error bars overlap, as benchmark-ips says.
   const same = (a, b) => a[0] + a[1] > b[0] - b[1] && a[0] - a[1] < b[0] + b[1];
   // Two Rubies, measured minutes apart: also same-ish when the gap is within how much the reference varied on that machine, which is larger than benchmark-ips' error bars.
@@ -736,7 +735,7 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     const res = cols.map((l) => [l, versus(b.runs[l])]).filter(([, v]) => v);
     const n = res.length, of = (s) => res.filter(([, v]) => v.s === s);
     const wins = of("ok"), ties = of("eq"), losses = of("no");
-    const all = `all ${n} Rubies${where}`;
+    const all = `${n === 1 ? "the one Ruby" : `all ${n} Rubies`}${where}`;
     let icon = "ok", head;
     if (!n) { icon = "na"; head = `Did not run on any Ruby${where}`; }
     else if (!losses.length && !ties.length) head = b.names.length === 2 ? `${claim} beats ${nm(1)} on <b>${all}</b>` : `${claim} is the fastest on <b>${all}</b>`;
@@ -752,6 +751,7 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
       if (rest) named.push(`others on ${rest} more`);
       if (losses.length === n && top.length === 1) { icon = "no"; head = `${nm(+top[0])} beats ${claim} on <b>${all}</b>`; }
       else if (losses.length === n) { icon = "no"; head = `${claim} loses on <b>${all}</b>: ${named.join("; ")}`; }
+      else if (!wins.length) { icon = "no"; head = `${claim} never wins: it ties on <b>${ties.length} of ${n} Rubies${where}</b>; ${named.join("; ")}`; }
       else { icon = "mix"; head = `${claim} wins on <b>${wins.length} of ${n} Rubies${where}</b>${ties.length ? ` (${ties.length} tie${ties.length > 1 ? "s" : ""})` : ""}; ${named.join("; ")}`; }
     }
 
@@ -787,8 +787,9 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     }
     // Rubies on the chart that are not in the count.
     const left = cols.filter((l) => !res.some(([k]) => k === l)), notes = [];
-    const susp = left.filter((l) => b.runs[l] && b.runs[l].entries.some(sus)), gone = left.filter((l) => !susp.includes(l));
+    const susp = left.filter((l) => b.runs[l] && b.runs[l].entries.some(sus)), gone = left.filter((l) => !b.runs[l]), odd = left.filter((l) => b.runs[l] && !susp.includes(l));
     if (susp.length) notes.push(`Not counted: ${esc(runsOf(susp, cols))}, suspect results (over 1B i/s).`);
+    if (odd.length) notes.push(`Not compared: ${esc(runsOf(odd, cols))}, an idiom has no result there.`);
     if (gone.length) notes.push(`Did not run: ${esc(runsOf(gone, cols))}.`);
     return { icon, head, tiles, foot: notes.join(" ") };
   }
@@ -817,8 +818,10 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
   // Tick labels without trailing zeros: 2M, 500k, 0.05×.
   function tickLabel(t) {
     const n = (v) => String(+v.toPrecision(3));
-    if (showing === "rel") return n(t) + "×";
-    return t >= 1e9 ? n(t / 1e9) + "B" : t >= 1e6 ? n(t / 1e6) + "M" : t >= 1e3 ? n(t / 1e3) + "k" : n(t);
+    const big = (v) => v >= 1e9 ? n(v / 1e9) + "B" : v >= 1e6 ? n(v / 1e6) + "M" : v >= 1e3 ? n(v / 1e3) + "k" : n(v);
+    // Far below the claimed idiom, as a fraction: 1/10M× rather than 1e-7×.
+    if (showing === "rel") return (t < 1e-3 ? "1/" + big(1 / t) : n(t)) + "×";
+    return big(t);
   }
 
   function path(pts, c, extra, w) {
@@ -964,13 +967,12 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     if (showing === "rel") hints.push(`1× is the claimed idiom on ${nice(REF)}.`);
     if (mode) hints.push("Dashed: the same Rubies without the JIT, on the same machine.");
     $("rhint").textContent = hints.join(" ");
-    const shown = B.map((b, n) => [b, n]);
     const count = {};
-    shown.forEach(([b]) => { count[b.section] = (count[b.section] || 0) + 1; });
+    B.forEach((b) => { count[b.section] = (count[b.section] || 0) + 1; });
     const secs = Object.keys(count);
     $("rjump").innerHTML = `<option value="">A section</option>` + secs.map((x) => `<option value="${esc(slug(x))}">${esc(x)} (${count[x]})</option>`).join("");
     let h = "", sec = null;
-    shown.forEach(([b, n]) => {
+    B.forEach((b, n) => {
       if (b.section !== sec) { sec = b.section; h += `<h2 class="rsec" id="${esc(slug(sec))}">${esc(sec)}<small>${count[sec]} benchmark${count[sec] > 1 ? "s" : ""}</small><span class="on">${esc(MODES.find(([m]) => m === mode)[1])}</span></h2>`; }
       const legend = b.names.map((nm, i) => `<span><i style="background:${color(i)}"></i><code>${esc(nm)}</code>${i ? "" : " (claimed)"}</span>`).join("") + (mode ? '<span class="ghost"><i></i>without the JIT</span>' : "") +
         (hasSuspect(b) ? '<span class="sus"><svg viewBox="0 0 10 8" aria-hidden="true"><path d="M1,7 L5,1 L9,7Z"/></svg>suspect, over 1B i/s: kept off the chart</span>' : "");
@@ -988,17 +990,21 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
     pinned();
   }
   // A title of many report names stays on one line by getting smaller (20px down to 14px); one too long even at 14px wraps at 14px.
+  // All writes, then all reads, then all writes: one layout for every card instead of one per card.
   function fitTitles() {
-    $("rout").querySelectorAll(".rcard h3").forEach((h) => {
-      h.classList.add("one");
-      h.style.fontSize = "";
-      const room = h.clientWidth, need = h.scrollWidth;
+    const hs = [...$("rout").querySelectorAll(".rcard h3")];
+    hs.forEach((h) => { h.classList.add("one"); h.style.fontSize = ""; });
+    const fit = hs.map((h) => [h.clientWidth, h.scrollWidth]);
+    hs.forEach((h, i) => {
+      const [room, need] = fit[i];
       if (need <= room) return;
       const size = Math.floor(20 * room / need * 10) / 10;
       if (size >= 14) h.style.fontSize = size + "px";
       else { h.style.fontSize = "14px"; h.classList.remove("one"); }
     });
   }
+  // A title measured before the web font arrived is measured again once it has.
+  if (document.fonts) document.fonts.ready.then(() => { if (!$("view-across-rubies").hidden) fitTitles(); });
   // A section heading reached from "Jump to" lands under the pinned picker, not behind it.
   function pinned() {
     const p = $("rpicker");
@@ -1010,7 +1016,6 @@ <h2 class="bh">FastRuby<span>.io</span> keeps fast-ruby running</h2>
   $("rshow").addEventListener("click", (e) => { const c = e.target.closest(".chip"); if (c) { showing = c.dataset.s; window.SiteViews.setParams({ show: showing === "rel" ? "rel" : null }, true); render(); } });
   $("rjump").addEventListener("change", (e) => {
     const target = e.target.value && document.getElementById(e.target.value);
-    e.target.value = "";
     if (target) { pinned(); target.scrollIntoView(); }
   });
   $("rout").addEventListener("toggle", (e) => { const d = e.target; if (d.matches("details")) d.open ? open.add(+d.dataset.n) : open.delete(+d.dataset.n); }, true);