Blame for app.js

/* Aligned benchmarks renderer. Plain JS, no dependencies. Reads window.BENCH_DATA from data.js. */
(function () {
  "use strict";
  var D = window.BENCH_DATA;
  var app = document.getElementById("app");
  var tip = document.getElementById("tooltip");
  if (!D || !app) return;

  var VENDORS = ["openai", "anthropic", "google", "xai", "meta", "mistral", "deepseek", "qwen", "groq", "other"];
  var MARK = "./sidebar-logo-a.svg";
  var WORDMARK = "./aligned-ai-lockup-no-beta-54.png";

  function esc(s) {
    return String(s == null ? "" : s).replace(/[&<>"']/g, function (c) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
    });
  }
  function fmt(v) { return v === 100 || v === 0 ? v + "%" : Number(v).toFixed(1) + "%"; }
  function vendorLogo(v) { return "./" + (VENDORS.indexOf(v) >= 0 ? v : "other") + ".png"; }
  function hostOf(u) { try { return new URL(u).hostname.replace(/^www\./, ""); } catch (e) { return u; } }

  // Only boards with a real Aligned score are rendered. pending:true boards stay hidden.
  var boards = D.boards.filter(function (b) {
    return !b.pending && b.aligned && typeof b.aligned.score === "number" && isFinite(b.aligned.score);
  });
  var byId = {};
  boards.forEach(function (b) { byId[b.id] = b; });

  // Rows for a board: Aligned plus any cited competitors, sorted honestly by score.
  function rows(b) {
    var hib = b.higherIsBetter !== false;
    var list = [{ model: "Aligned AI", vendor: "aligned", score: b.aligned.score, aligned: true }];
    (b.competitors || []).forEach(function (c) {
      if (c && typeof c.score === "number" && isFinite(c.score) && c.source) list.push(c);
    });
    list.sort(function (x, y) { return hib ? y.score - x.score : x.score - y.score; });
    return list;
  }
  // "#N of M" (competition ranking: ties share a rank). Only when real competitors exist.
  function rank(b) {
    var r = rows(b);
    if (r.length < 2) return null;
    var hib = b.higherIsBetter !== false, a = b.aligned.score;
    var better = r.filter(function (x) { return !x.aligned && (hib ? x.score > a : x.score < a); }).length;
    return { n: b.aligned.rank || (better + 1), of: Math.max(r.length, b.fieldSize || 0) };
  }

  function tag(cat) {
    var c = D.categories[cat] || {};
    return '<span class="tag" style="background:' + c.tagBg + ";color:" + c.tagText + ";box-shadow:inset 0 0 0 1px " + c.tagRing + '">' +
      '<span class="dot" style="background:' + c.dot + '"></span>' + esc(cat) + "</span>";
  }

  function chart(b) {
    var r = rows(b), rk = rank(b), hasComp = r.length > 1;
    var hib = b.higherIsBetter !== false;
    var list = r.map(function (x) {
      var n = x.aligned ? (rk ? rk.n : 1) : (typeof x.rank === "number" ? x.rank :
        1 + r.filter(function (y) { return hib ? y.score > x.score : y.score < x.score; }).length);
      var w = Math.max(0, Math.min(100, x.score));
      var tip = x.aligned
        ? 'data-tip-model="Aligned AI" data-tip-score="' + esc(fmt(x.score)) + '" data-tip-src="' + esc(b.aligned.sample || "Measured " + D.meta.measured) + '"'
        : 'data-tip-model="' + esc(x.model) + '" data-tip-score="' + esc(fmt(x.score)) + '" data-tip-src="' + esc("Source: " + (x.sourceLabel || hostOf(x.source))) + '"';
      return '<li class="lb-row' + (x.aligned ? " aligned" : "") + '" tabindex="0" ' + tip + '>' +
        '<span class="lb-rank">#' + n + '</span>' +
        '<img class="lb-logo" src="' + (x.aligned ? MARK : vendorLogo(x.vendor)) + '" alt="" />' +
        '<span class="lb-name">' + esc(x.model) + (x.lab && !x.aligned ? '<small>' + esc(x.lab) + '</small>' : '') + '</span>' +
        '<span class="lb-track"><span class="lb-fill" style="width:' + w + '%"></span></span>' +
        '<span class="lb-score">' + esc(fmt(x.score)) + '</span></li>';
    }).join("");
    var pendingSlot = hasComp ? "" : '<div class="pending-slot">Competitor scores pending</div>';
    return '<div class="chart">' +
      '<div class="chart-top"><span>' + esc(b.unit) + (hib ? " · higher is better" : " · lower is better") + "</span>" +
      (rk ? '<span class="rank">#' + rk.n + " of " + rk.of + "</span>" : "") + "</div>" +
      (hasComp ? '<ol class="lb">' + list + '</ol>' : pendingSlot) +
      (rk && rk.of > r.length ? '<p class="lb-foot">Showing ' + r.length + ' of ' + rk.of + ' ranked models.</p>' : '') +
      "</div>";
  }

  function card(b) {
    var a = b.aligned, rk = rank(b), L = b.links || {};
    var prov = ["Measured " + esc(D.meta.measured)];
    if (a.sample) prov.push(esc(a.sample));
    if (a.runId) prov.push("run " + esc(a.runId));
    var links = [];
    if (L.dataset) links.push('<a href="' + esc(L.dataset) + '" target="_blank" rel="noopener">' + esc(L.datasetLabel || "Dataset") + "</a>");
    if (L.paper) links.push('<a href="' + esc(L.paper) + '" target="_blank" rel="noopener">' + esc(L.paperLabel || "Paper") + "</a>");
    (L.extra || []).forEach(function (e) { links.push('<a href="' + esc(e.url) + '" target="_blank" rel="noopener">' + esc(e.label) + "</a>"); });
    return '<article class="card" id="board-' + esc(b.id) + '">' +
      '<div class="card-head"><h3>' + esc(b.name) + "</h3>" + tag(b.category) + "</div>" +
      '<p class="desc">' + esc(b.description) + "</p>" +
      chart(b) +
      '<div class="callout"><img src="' + MARK + '" alt="" /><b>Aligned AI</b><span class="score">' + esc(fmt(a.score)) + "</span>" +
      (rk ? "<span>· #" + rk.n + " of " + rk.of + "</span>" : "") +
      ((b.competitors || []).length ? "" : '<span class="pending">Competitor scores pending</span>') + "</div>" +
      '<div class="card-foot"><div class="src">' + links.join(" · ") + "</div></div>" +
      "</article>";
  }

  function hero() {
    var m = D.meta;
    var stats = m.headlineStats ? m.headlineStats.slice(0, 5).map(function (s) {
      return '<a class="stat" href="#' + esc(s.jump || "") + '">' + '<div class="stat-label">' + esc(s.label) + "</div>" +
        '<div class="stat-value">' + esc(s.value) + "</div>" + (s.detail ? '<div class="stat-detail">' + esc(s.detail) + "</div>" : "") + "</a>";
    }).join("") : (m.headlineBoards || []).map(function (id) { return byId[id]; }).filter(Boolean).slice(0, 4).map(function (b) {
      var rk = rank(b);
      return '<a class="stat" href="#board-' + esc(b.id) + '" data-jump="' + esc(b.id) + '">' +
        '<div class="stat-label">' + esc(b.name) + "</div>" +
        '<div class="stat-value">' + (rk ? "#" + rk.n + " · " : "") + esc(fmt(b.aligned.score)) + "</div>" +
        '<div class="stat-detail">' + (b.aligned.sample ? esc(b.aligned.sample) : "Measured " + esc(m.measured)) + "</div></a>";
    }).join("");
    var withComp = boards.filter(function (b) { return (b.competitors || []).length; }).length;
    var meta = ["Measured " + m.measured, boards.length + " boards", "Official graders", "Scores from Aligned AI's production pipeline",
      withComp ? withComp + " boards with competitor rankings" : "Competitor scores pending"];
    return '<section class="hero">' +
      '<div class="hero-top"><span class="wordmark"><img src="' + WORDMARK + '" alt="Aligned AI" /></span>' +
      "<h1>" + esc(m.title) + '</h1><span class="badge">' + esc(m.badge) + "</span>" +
      (m.preview ? '<span class="pill-preview">Preview</span>' : "") + "</div>" +
      '<div class="stats">' + stats + "</div>" +
      "</section>";
  }

  function strengths() {
    var items = (D.meta.strengths || []).filter(function (s) { return byId[s.id]; }).slice(0, 3);
    if (!items.length) return { html: "", ids: [] };
    var html = '<section><div class="section-head"><h2>Where Aligned AI is strong</h2>' +
      "<p>Where Aligned AI ranks at or near the top of recent models.</p></div>" +
      '<div class="strengths">' + items.map(function (s) {
        var b = byId[s.id], rk = rank(b);
        return '<div class="strength"><p class="strength-why" style="margin:0"><b>' +
          (rk ? "#" + rk.n + " of " + rk.of + " · " : "") + esc(fmt(b.aligned.score)) + " · " + esc(b.name) + "</b>" + esc(s.why) + "</p>" +
          card(b) + "</div>";
      }).join("") + "</div></section>";
    return { html: html, ids: items.map(function (s) { return s.id; }) };
  }

  var state = { cat: "all" };
  function suite(strengthIds) {
    var cats = [];
    boards.forEach(function (b) { if (cats.indexOf(b.category) < 0) cats.push(b.category); });
    var order = Object.keys(D.categories);
    cats.sort(function (a, b) { return order.indexOf(a) - order.indexOf(b); });
    var chips = '<button class="chip" data-cat="all" aria-pressed="' + (state.cat === "all") + '">All · ' + boards.length + "</button>" +
      cats.map(function (c) {
        var n = boards.filter(function (b) { return b.category === c; }).length;
        return '<button class="chip" data-cat="' + esc(c) + '" aria-pressed="' + (state.cat === c) + '"><span class="dot" style="background:' + D.categories[c].dot + '"></span>' + esc(c) + " · " + n + "</button>";
      }).join("");
    // "All" shows every board except the three featured above (same as the previous page); a category shows all of its boards.
    var list = state.cat === "all" ? boards.filter(function (b) { return strengthIds.indexOf(b.id) < 0; }) : boards.filter(function (b) { return b.category === state.cat; });
    return '<section id="suite"><div class="section-head"><h2>Full suite</h2>' +
      "<p>Every scored board. The three featured above appear under their category filters. Each card states its sample size and shows its run ID, with links to the dataset and paper.</p></div>" +
      '<div class="chips" role="group" aria-label="Filter by category">' + chips + "</div>" +
      '<div class="grid">' + list.map(card).join("") + "</div></section>";
  }

  function costSection() {
    var C = D.cost; if (!C) return "";
    var all = [C.aligned]; C.groups.forEach(function (g) { g.rows.forEach(function (r) { all.push(r[2]); }); });
    var max = Math.max.apply(null, all);
    function money(v) { return "$" + v.toFixed(5); }
    function row(name, vendor, v, isA) {
      return '<tr class="' + (isA ? "c-aligned" : "") + '"><td class="c-model"><img src="' + (isA ? MARK : vendorLogo(vendor)) + '" alt="" />' + esc(name) + '</td>' +
        '<td class="c-bar"><span class="c-track"><span class="c-fill" style="width:' + Math.max(0.6, v / max * 100) + '%"></span></span></td>' +
        '<td class="c-num">' + money(v) + '</td><td class="c-num">$' + (v * 1000).toFixed(2) + '</td>' +
        '<td class="c-x">' + (isA ? "\u2014" : (v / C.aligned < 10 ? (v / C.aligned).toFixed(1) : Math.round(v / C.aligned)) + "\u00d7") + '</td></tr>';
    }
    var body = C.groups.map(function (g, i) {
      return '<tr class="c-group"><td colspan="5">' + esc(g.name) + '</td></tr>' + (i === 0 ? row("Aligned AI", "aligned", C.aligned, true) : "") +
        g.rows.map(function (r) { return row(r[0], r[1], r[2], false); }).join("");
    }).join("");
    return '<section class="cost card" id="cost"><h2>' + esc(C.title) + '<sup>[1]</sup></h2><p class="c-sum">' + esc(C.summary) + '</p>' +
      '<div class="c-explain">' + esc(C.explainer) + '</div>' +
      '<table class="c-table"><thead><tr><th>Model</th><th></th><th class="c-num">Per answer</th><th class="c-num">Per 1,000<br>answers</th><th class="c-x">vs.<br>Aligned AI</th></tr></thead><tbody>' + body + '</tbody></table>' +
      '<p class="c-foot">' + esc(C.footnote) + '</p></section>';
  }

  function method() {
    return '<section class="method" id="methodology"><div class="section-head"><h2>Methodology</h2></div><ol>' +
      (D.meta.methodology || []).map(function (p) { return "<li><span>" + esc(p) + "</span></li>"; }).join("") + "</ol></section>";
  }

  function footer() {
    return '<footer class="site-foot"><span class="brand"><img src="' + MARK + '" alt="" />Aligned AI</span>' +
      "<span>" + esc(D.meta.summary) + " Measured " + esc(D.meta.measured) + ".</span>" +
      '<span class="right"><a href="https://joinaligned.ai" target="_blank" rel="noopener">joinaligned.ai</a> · <a href="#methodology">Methodology</a></span></footer>';
  }

  function render() {
    var st = strengths();
    app.innerHTML = hero() + st.html + suite(st.ids) + costSection() + method() + footer();
  }
  render();

  // Chip filter (event delegation survives re-render).
  app.addEventListener("click", function (e) {
    var chip = e.target.closest(".chip");
    if (chip) {
      state.cat = chip.getAttribute("data-cat");
      var st = strengths();
      var old = document.getElementById("suite");
      var tmp = document.createElement("div");
      tmp.innerHTML = suite(st.ids);
      old.replaceWith(tmp.firstChild);
      return;
    }
    var jump = e.target.closest("[data-jump]");
    if (jump) {
      var el = document.getElementById("board-" + jump.getAttribute("data-jump"));
      if (el) {
        e.preventDefault();
        el.scrollIntoView({ behavior: "smooth", block: "start" });
        el.classList.add("flash");
        setTimeout(function () { el.classList.remove("flash"); }, 1800);
      }
    }
  });

  // Bar tooltip.
  function showTip(col) {
    tip.innerHTML = "<b>" + esc(col.getAttribute("data-tip-model")) + ' <span class="tv">' + esc(col.getAttribute("data-tip-score")) + "</span></b>" +
      '<span class="ts">' + esc(col.getAttribute("data-tip-src")) + "</span>";
    var bar = col.querySelector(".bar").getBoundingClientRect();
    tip.hidden = false;
    tip.style.left = Math.max(140, Math.min(window.innerWidth - 140, bar.left + bar.width / 2)) + "px";
    tip.style.top = bar.top + "px";
    requestAnimationFrame(function () { tip.classList.add("show"); });
  }
  function hideTip() { tip.classList.remove("show"); }
  app.addEventListener("mouseover", function (e) { var c = e.target.closest(".lb-row"); if (c) showTip(c); });
  app.addEventListener("mouseout", function (e) { var c = e.target.closest(".lb-row"); if (c && !c.contains(e.relatedTarget)) hideTip(); });
  app.addEventListener("focusin", function (e) { var c = e.target.closest(".lb-row"); if (c) showTip(c); });
  app.addEventListener("focusout", hideTip);
  window.addEventListener("scroll", hideTip, { passive: true });
})();