feat(site): any-to-any ingress/egress dropdowns on the Translation tab

Pinning the ingress to OpenAI was not principled: it privileged OpenAI-native
gateways and the "fastest egress per gateway" default silently mixed egress
dialects in one column. Instead, two dropdowns pin BOTH ends of the translation
path, so the whole table ranks the identical <in>-><out> pair (truly
apples-to-apples); a gateway that does not serve that pair is simply absent.

- state.xlateIn/xlateOut (default openai->anthropic, the fullest-served pair),
  carried in the URL as xin/xout for shareable links.
- Translation columns read the pinned matrix cell (xlateMatrixCell); the row set
  is the gateways serving that exact pair (servesXlatePair). Path pill dropped
  (the dropdowns are the path). Caption states the pinned pair.
- Full in x out exploration stays; the Matrix tab remains the pass/fail grid,
  this tab is the ranked leaderboard for a chosen cell. 20 tests pass.

Author: MattJackson

site/app.js

@@ -151,17 +151,27 @@ function servesOpenaiPassthrough(g) {
   return !!(cell && cell.served === true);
 }
 
-/* xlateCell: the Translation tab reads the openai-in -> best non-openai egress cell (g.translation_cell,
-   chosen by gen-data on lowest added latency, fixed fair ingress). Absent a matrix, fall back to the
-   legacy xlate suite (anthropic-in / openai-out). Keys are cell.perf keys (added_latency_p99_us, ...). */
+/* xlateMatrixCell: the perf object for a gateway's ingress->egress translation cell, straight from the
+   matrix (upstreams[egress].cells[ingress]). Returns cell.perf when that exact pair is served and
+   measured, else null. The Translation tab pins BOTH ends (state.xlateIn/xlateOut) so every row is the
+   identical translation and the ranking is apples-to-apples. */
+function xlateMatrixCell(g, ingress, egress) {
+  const up = g.matrix && g.matrix.upstreams && g.matrix.upstreams[egress];
+  const cell = up && up.cells && up.cells[ingress];
+  return (cell && cell.served === true && cell.perf) ? cell.perf : null;
+}
+/* Does the gateway serve the pinned translation pair at all (green cell), measured or not? Drives the
+   Translation tab's row set: only gateways that serve this exact ingress->egress path appear. */
+function servesXlatePair(g, ingress, egress) {
+  const up = g.matrix && g.matrix.upstreams && g.matrix.upstreams[egress];
+  const cell = up && up.cells && up.cells[ingress];
+  return !!(cell && cell.served === true);
+}
+/* Column reader for the Translation tab: the pinned-pair cell's metric, n/a when the pair is served
+   but unmeasured (perf sweep did not land). */
 function xlateCell(g, key, fmt) {
-  if (g.translation_cell && g.translation_cell[key] != null)
-    return { v: g.translation_cell[key], text: fmt(g.translation_cell[key]), na: false };
-  if (!g.matrix || !g.matrix.upstreams) {
-    const legacy = { added_latency_p99_us: "xlate_added_latency_p99_us", rps_sustained_20ms: "xlate_rps_sustained_20ms" }[key] || key;
-    return lane(g, "xlate", "xlate_served", "xlate_error", (j) =>
-      j[legacy] != null ? { v: j[legacy], text: fmt(j[legacy]), na: false } : { v: null, text: "n/a", na: true });
-  }
+  const perf = xlateMatrixCell(g, state.xlateIn, state.xlateOut);
+  if (perf && perf[key] != null) return { v: perf[key], text: fmt(perf[key]), na: false };
   return { v: null, text: "n/a", na: true };
 }
 
@@ -215,18 +225,14 @@ const COLUMN_SETS = {
     { id: "mempeak", label: "Mem peak (MiB)", desc: false, title: "Peak process RSS under large-payload load",
       get: (g) => lane(g, "memory", "served", "serve_error", (j) => ({ v: j.peak_rss_mib, text: fmt1(j.peak_rss_mib), na: false })) },
   ],
-  // Translation: openai-in -> best non-openai egress. A path pill shows which egress this row's
-  // number is; only gateways that actually translate appear (view-implicit filter).
+  // Translation: the pinned ingress->egress pair (state.xlateIn/xlateOut), chosen by the two
+  // dropdowns above the table. Every row is the identical translation; the path is the dropdowns,
+  // so there is no per-row Path pill. Only gateways serving this exact pair appear.
   translation: [
     COL_SEL, COL_NAME, COL_LANG,
-    { id: "xlpath", label: "Path", desc: false, title: "OpenAI ingress translated to this egress dialect - the fastest translation path this gateway serves (chosen by lowest added latency)",
-      get: (g) => ({ v: g.translation_cell ? g.translation_cell.egress : "", text: null, na: !g.translation_cell }),
-      render: (g) => g.translation_cell
-        ? `<td class="tested"><span class="tested-pill" title="OpenAI ingress translated to ${esc(g.translation_cell.egress)} upstream">openai&nbsp;&rarr;&nbsp;${esc(g.translation_cell.egress)}</span></td>`
-        : `<td class="tested"><span class="muted">n/a</span></td>` },
-    { id: "xllat", label: "Added latency p99 (µs)", desc: false, title: "Gateway p99 minus direct-to-mock p99 on the OpenAI-in translation path",
+    { id: "xllat", label: "Added latency p99 (µs)", desc: false, title: "Gateway p99 minus direct-to-mock p99 on the selected translation path",
       get: (g) => xlateCell(g, "added_latency_p99_us", fmtAdded) },
-    { id: "xlrps", label: "Sustained RPS @20ms", desc: true, title: "Sustained RPS @20ms on the OpenAI-in translation path (p99 < 1 s, <0.1% errors)",
+    { id: "xlrps", label: "Sustained RPS @20ms", desc: true, title: "Sustained RPS @20ms on the selected translation path (p99 < 1 s, <0.1% errors)",
       get: (g) => xlateCell(g, "rps_sustained_20ms", fmtInt) },
   ],
   // Streaming: SSE passthrough, its own stall-gated ceiling.
@@ -297,6 +303,11 @@ function newState() {
     classes: new Set(),
     needStream: false,
     needXlate: false,
+    // Translation tab: the pinned ingress->egress pair the whole table is ranked on. Both ends are
+    // fixed so every row does the identical translation (apples-to-apples); a gateway that does not
+    // serve this exact pair is absent. Default is the fullest-served pair.
+    xlateIn: "openai",
+    xlateOut: "anthropic",
     cmp: [],        /* gateway keys selected for compare, max 3 */
     cmpOpen: false, /* compare panel visible */
     drawer: null,   /* gateway key open in the drawer */
@@ -331,6 +342,9 @@ function encodeUrl(st) {
   if (st.cmp.length) p.set("cmp", st.cmp.join("|"));
   if (st.cmpOpen) p.set("cv", "1");
   if (st.drawer) p.set("gw", st.drawer);
+  // Carry a non-default translation pair so a shared link opens the same ranking.
+  if (st.xlateIn !== "openai") p.set("xin", st.xlateIn);
+  if (st.xlateOut !== "anthropic") p.set("xout", st.xlateOut);
   const cat = CATEGORIES[st.category] ? st.category : DEFAULT_CATEGORY;
   const path = st.view && st.view !== "passthrough" ? `/${cat}/${st.view}` : `/${cat}`;
   const qs = p.toString();
@@ -378,6 +392,8 @@ function decodeUrl(pathname, search, hash) {
   st.cmp = list("cmp").slice(0, 3);
   st.cmpOpen = p.get("cv") === "1" && st.cmp.length >= 2;
   st.drawer = p.get("gw") || null;
+  if (MATRIX_CELLS.includes(p.get("xin"))) st.xlateIn = p.get("xin");
+  if (MATRIX_CELLS.includes(p.get("xout"))) st.xlateOut = p.get("xout");
   return st;
 }
 
@@ -413,10 +429,10 @@ function applyFilters(gateways, st) {
     if (st.langs.size && !st.langs.has(g.lang)) return false;
     if (st.needStream && !(g.stream && g.stream.stream_served)) return false;
     if (st.needXlate && !hasTranslation(g)) return false;
-    // View-implicit filter: the Translation tab lists only gateways that actually translate, the
-    // Streaming tab only ones that serve SSE. A pure proxy that never translates simply is not in
-    // the translation ranking (rather than sitting there as a row of n/a).
-    if (st.view === "translation" && !hasTranslation(g)) return false;
+    // View-implicit filter: the Translation tab lists only gateways that serve the pinned
+    // ingress->egress pair (so every row is the identical translation); the Streaming tab only ones
+    // that serve SSE. A gateway absent from a pair simply does not serve it.
+    if (st.view === "translation" && !servesXlatePair(g, st.xlateIn, st.xlateOut)) return false;
     if (st.view === "streaming" && !(g.stream && g.stream.stream_served)) return false;
     return true;
   });
@@ -597,12 +613,18 @@ function initThemeToggle() {
    has to guess what the ranking compares. No em dashes (house style). */
 const TABLE_CAPTIONS = {
   passthrough: "OpenAI ingress to OpenAI upstream: pure passthrough, no translation. Every gateway runs the identical dialect, so the ranking is apples-to-apples. A gateway that does not serve OpenAI ingress reads n/a.",
-  translation: "OpenAI ingress translated to another dialect. Each gateway is shown on the fastest translation path it serves (the Path pill). Only gateways that actually translate appear here.",
   streaming: "Server-sent-event passthrough. Streams sustained is each gateway's stall-free concurrent-stream ceiling; added TTFT and per-token are gateway minus direct-to-mock.",
 };
 function updateTableCaption(view) {
   const el = document.getElementById("table-caption");
-  if (el) el.textContent = TABLE_CAPTIONS[view] || TABLE_CAPTIONS.passthrough;
+  if (!el) return;
+  if (view === "translation") {
+    const inL = (MATRIX_LABELS[state.xlateIn] || state.xlateIn);
+    const outL = (MATRIX_LABELS[state.xlateOut] || state.xlateOut);
+    el.textContent = `Client speaks ${inL}, upstream speaks ${outL}: the gateway translates every request and response on this exact path. Only gateways that serve this pair appear, and every row is the identical translation, so the ranking is apples-to-apples.`;
+    return;
+  }
+  el.textContent = TABLE_CAPTIONS[view] || TABLE_CAPTIONS.passthrough;
 }
 function renderTable() {
   const { data } = state;
@@ -706,6 +728,16 @@ function initFilterControls() {
     const el = document.getElementById(`f-${name}`);
     if (el) el.addEventListener("change", () => { state[key] = el.checked; renderTable(); syncUrl(true); });
   }
+  // Translation ingress/egress pickers: populate the six dialects and re-rank on change.
+  const xin = document.getElementById("xlate-in");
+  const xout = document.getElementById("xlate-out");
+  if (xin && xout) {
+    const opts = MATRIX_CELLS.map((d) => `<option value="${esc(d)}">${esc(MATRIX_LABELS[d] || d)}</option>`).join("");
+    xin.innerHTML = opts; xout.innerHTML = opts;
+    const onPick = () => { state.xlateIn = xin.value; state.xlateOut = xout.value; renderTable(); syncUrl(true); };
+    xin.addEventListener("change", onPick);
+    xout.addEventListener("change", onPick);
+  }
 }
 
 function renderFilters() {
@@ -715,6 +747,8 @@ function renderFilters() {
     (l) => LANG_COLORS[l] || LANG_COLORS.Other);
   document.getElementById("search").value = state.q;
   for (const [, name] of CAPS) { const el = document.getElementById(`f-${name}`); if (el) el.checked = state[CAPS.find(([, n]) => n === name)[0]]; }
+  const xin = document.getElementById("xlate-in"); if (xin) xin.value = state.xlateIn;
+  const xout = document.getElementById("xlate-out"); if (xout) xout.value = state.xlateOut;
 }
 
 /* ---- per-gateway drawer ----------------------------------------------------- */
@@ -1148,6 +1182,9 @@ function showView(view) {
     x.setAttribute("href", viewPath(state.category, x.dataset.view));
   });
   document.querySelectorAll(".view").forEach((v) => v.classList.toggle("hidden", v.id !== containerId));
+  // The translation ingress/egress pickers only make sense on the Translation tab.
+  const picker = document.getElementById("xlate-picker");
+  if (picker) picker.classList.toggle("hidden", view !== "translation");
   // Switching between perf tabs changes columns/caption/filtering, so re-render the table.
   if (PERF_VIEWS.has(view) && state.data) renderTable();
   updateTitle();
@@ -1166,6 +1203,7 @@ function applyState(st) {
     category: st.category, view: st.view, q: st.q, sortCol: st.sortCol, sortDesc: st.sortDesc,
     langs: st.langs, classes: st.classes,
     needStream: st.needStream, needXlate: st.needXlate,
+    xlateIn: st.xlateIn, xlateOut: st.xlateOut,
     cmp: st.cmp, cmpOpen: st.cmpOpen, drawer: st.drawer,
   });
 }

site/index.html

@@ -63,6 +63,11 @@ <h1>On the Bench <span class="brand-sub">AI tool benchmarks</span></h1>
       <input type="search" id="search" placeholder="Search gateways" aria-label="Search gateways by name">
       <div class="control-group" id="class-filters" aria-label="Filter by class (each project's own self-description)"></div>
       <div class="control-group" id="lang-filters" aria-label="Filter by language"></div>
+      <div class="control-group xlate-picker hidden" id="xlate-picker">
+        <label>Translate <select id="xlate-in" aria-label="Ingress dialect the client speaks"></select>
+        <span class="xlate-arrow">&rarr;</span>
+        <select id="xlate-out" aria-label="Egress dialect the upstream speaks"></select></label>
+      </div>
       <span id="row-count" class="muted count"></span>
     </div>
     <p id="table-caption" class="fineprint"></p>

site/style.css

@@ -318,6 +318,14 @@ tbody tr { cursor: pointer; }
   white-space: nowrap; font-variant: small-caps; letter-spacing: .02em;
 }
 
+/* Translation ingress/egress picker (Translation tab only) */
+.xlate-picker label { display: inline-flex; align-items: center; gap: .4rem; color: var(--fg-dim); font-size: .85rem; }
+.xlate-picker select {
+  background: var(--bg-raise); color: var(--fg); border: 1px solid var(--border);
+  border-radius: 6px; padding: .25rem .5rem; font-size: .85rem; font-family: inherit;
+}
+.xlate-picker .xlate-arrow { color: var(--fg-mute); }
+
 /* Floating hover popup for matrix cells: a small card that follows the hovered cell. */
 .matrix-pop {
   position: absolute; z-index: 50; max-width: 22rem; pointer-events: none;

site/test.mjs

@@ -184,15 +184,22 @@ test("Passthrough reads the openai diagonal, n/a when openai is not_configurable
   assert.equal(app.passCell(native, "rps_sustained_20ms", String).na, true);
 });
 
-test("Translation tab lists only gateways that translate", () => {
-  const translator = { translation_cell: { egress: "anthropic", rps_sustained_20ms: 100 } };
-  const proxy = { matrix: mkMatrix({ openai: { openai: { served: true } } }) }; // no translation cell
-  assert.equal(app.hasTranslation(translator), true);
-  assert.equal(app.hasTranslation(proxy), false);
+test("Translation tab lists only gateways serving the pinned in->out pair", () => {
+  // g0 serves openai->anthropic (the default pair), g1 serves only openai->gemini.
+  const g0 = { display: "g0", key: "g0", lang: "Rust",
+    matrix: mkMatrix({ anthropic: { openai: { served: true, perf: { rps_sustained_20ms: 100, added_latency_p99_us: 200 } } } }) };
+  const g1 = { display: "g1", key: "g1", lang: "Go",
+    matrix: mkMatrix({ gemini: { openai: { served: true, perf: { rps_sustained_20ms: 90, added_latency_p99_us: 300 } } } }) };
   const st = app.newState();
-  st.view = "translation";
-  const rows = app.applyFilters([translator, proxy].map((g, i) => ({ display: "g" + i, key: "g" + i, lang: "Rust", ...g })), st);
-  assert.deepEqual(rows.map((g) => g.key), ["g0"]);
+  st.view = "translation"; // default pair openai -> anthropic
+  assert.deepEqual(app.applyFilters([g0, g1], st).map((g) => g.key), ["g0"]);
+  // repin to openai -> gemini and the row set follows the pair
+  st.xlateOut = "gemini";
+  assert.deepEqual(app.applyFilters([g0, g1], st).map((g) => g.key), ["g1"]);
+  // the cell reader returns the pinned pair's perf
+  st.xlateOut = "anthropic";
+  assert.equal(app.xlateCell(g0, "rps_sustained_20ms", String).text, "100");
+  assert.equal(app.xlateCell(g0, "rps_sustained_20ms", String).na, false);
 });
 
 // ---- footer timestamps: clean UTC stamp + coarse relative age ----------------