npm - @hackerrank/astra-cli - Versions diffs - 0.1.0 → 0.1.2 - Mend

@hackerrank/astra-cli 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/src/report.html ADDED Viewed

@@ -0,0 +1,569 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>astra bench report</title>
+<style>
+  :root {
+    --bg: #0f1115;
+    --panel: #171a21;
+    --panel-2: #1d212b;
+    --border: #262b36;
+    --text: #e6e8ee;
+    --muted: #8b93a7;
+    --accent: #5b9dff;
+    --good: #3ecf8e;
+    --bad: #ef5a6f;
+    --warn: #e8b339;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; }
+  a { color: var(--accent); }
+  .wrap { max-width: 1180px; margin: 0 auto; padding: 28px 20px 64px; }
+  header.top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; gap: 8px; }
+  header.top h1 { font-size: 20px; margin: 0; font-weight: 650; letter-spacing: .2px; }
+  header.top .meta { color: var(--muted); font-size: 12.5px; }
+  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 20px 0 28px; }
+  .kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
+  .kpi .v { font-size: 22px; font-weight: 700; }
+  .kpi .l { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
+  section { margin: 34px 0; }
+  section > h2 { font-size: 15px; margin: 0 0 12px; font-weight: 650; color: var(--text); display: flex; align-items: center; gap: 8px; }
+  section > h2 .sub { color: var(--muted); font-weight: 400; font-size: 12px; }
+  .grid2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
+  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
+  @media (max-width: 900px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
+  .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
+  .panel h3 { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
+  table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
+  th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; user-select: none; }
+  th:hover { color: var(--text); }
+  th .arrow { opacity: .5; font-size: 10px; margin-left: 3px; }
+  tbody tr:hover { background: rgba(255,255,255,0.02); }
+  tbody tr.run-row { cursor: pointer; }
+  .pill { display: inline-block; padding: 1px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; }
+  .pill.ok { background: rgba(62,207,142,.15); color: var(--good); }
+  .pill.bad { background: rgba(239,90,111,.15); color: var(--bad); }
+  .pill.warn { background: rgba(232,179,57,.15); color: var(--warn); }
+  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
+  .muted { color: var(--muted); }
+  .bar-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
+  .bar-row .lbl { width: 150px; flex: 0 0 150px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
+  .bar-track { flex: 1; height: 14px; background: var(--panel-2); border-radius: 6px; overflow: hidden; display: flex; }
+  .bar-seg { height: 100%; }
+  .bar-val { width: 64px; flex: 0 0 64px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
+  .legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
+  .legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
+  .heat-table td { text-align: center; font-variant-numeric: tabular-nums; }
+  .heat-cell { display: inline-block; min-width: 44px; padding: 3px 6px; border-radius: 5px; font-size: 12px; }
+  details.run-detail { margin: 0; }
+  details.run-detail > summary { display: none; }
+  .timeline { margin: 0 0 18px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
+  .timeline .step { padding: 10px 14px; border-bottom: 1px solid var(--border); }
+  .timeline .step:last-child { border-bottom: none; }
+  .timeline .step .head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 4px; }
+  .timeline .step .n { color: var(--accent); font-weight: 700; font-size: 12px; }
+  .timeline .step .stats { color: var(--muted); font-size: 11.5px; }
+  .timeline .step .thought { color: var(--muted); font-size: 12.5px; margin-bottom: 6px; }
+  .timeline .step pre { background: var(--panel-2); border-radius: 6px; padding: 8px 10px; margin: 4px 0; font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
+  .rc0 { color: var(--good); } .rcN { color: var(--bad); }
+  .toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
+  .toolbar select, .toolbar input { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 9px; font-size: 12.5px; }
+  .toolbar label { color: var(--muted); font-size: 12px; }
+  footer { color: var(--muted); font-size: 11.5px; margin-top: 40px; text-align: center; }
+  svg text { fill: var(--muted); font-size: 10.5px; }
+  .axis line, .axis path { stroke: var(--border); }
+  .n-a { color: var(--muted); }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header class="top">
+    <h1>astra bench report</h1>
+    <div class="meta" id="generated"></div>
+  </header>
+  <div class="kpis" id="kpis"></div>
+  <section>
+    <h2>Leaderboard <span class="sub">one row per model · reasoning</span></h2>
+    <div class="grid2">
+      <div class="panel">
+        <h3>Solve rate</h3>
+        <div id="chart-solve"></div>
+      </div>
+      <div class="panel">
+        <h3>Outcomes</h3>
+        <div id="chart-outcomes"></div>
+        <div class="legend" id="legend-outcomes"></div>
+      </div>
+    </div>
+    <div class="panel" style="margin-top:16px;">
+      <table id="tbl-leaderboard"></table>
+    </div>
+  </section>
+  <section>
+    <h2>Cost &amp; tokens</h2>
+    <div class="grid2">
+      <div class="panel">
+        <h3>Cost vs. solve rate</h3>
+        <div id="chart-scatter"></div>
+      </div>
+      <div class="panel">
+        <h3>Token mix (prompt / completion / reasoning / cached)</h3>
+        <div id="chart-tokens"></div>
+        <div class="legend" id="legend-tokens"></div>
+      </div>
+    </div>
+  </section>
+  <section id="section-series">
+    <h2>Per-step trend <span class="sub">median tokens &amp; cumulative cost across the trajectory</span></h2>
+    <div class="grid2">
+      <div class="panel">
+        <h3>Prompt tokens (context) vs. step</h3>
+        <div id="chart-line-tokens"></div>
+      </div>
+      <div class="panel">
+        <h3>Cumulative cost vs. step</h3>
+        <div id="chart-line-cost"></div>
+      </div>
+    </div>
+    <div class="legend" id="legend-series"></div>
+  </section>
+  <section id="section-matrix">
+    <h2>Model &times; task <span class="sub">pass@k</span></h2>
+    <div class="panel">
+      <table id="tbl-matrix" class="heat-table"></table>
+    </div>
+  </section>
+  <section>
+    <h2>Runs <span class="sub">every attempt · click a row to expand the command timeline</span></h2>
+    <div class="toolbar">
+      <label>Model
+        <select id="filter-model"><option value="">all</option></select>
+      </label>
+      <label>Task
+        <select id="filter-task"><option value="">all</option></select>
+      </label>
+      <label>Outcome
+        <select id="filter-outcome"><option value="">all</option></select>
+      </label>
+    </div>
+    <div class="panel">
+      <table id="tbl-runs"></table>
+    </div>
+  </section>
+  <footer>generated by <span class="mono">astra bench --report</span> · schema <span id="schema"></span></footer>
+</div>
+<script>
+/*__ASTRA_DATA__*/
+</script>
+<script>
+(function () {
+  var DATA = window.DATA || { kpis: {}, leaderboard: [], matrix: [], runs: [], step_series: [] };
+  var PALETTE = ["#5b9dff", "#3ecf8e", "#e8b339", "#ef5a6f", "#b57bff", "#33c2c2", "#ff8a5b", "#a3d977"];
+  var colorCache = {};
+  function colorFor(key) {
+    if (!colorCache[key]) {
+      var n = Object.keys(colorCache).length;
+      colorCache[key] = PALETTE[n % PALETTE.length];
+    }
+    return colorCache[key];
+  }
+  function fmt(n) { return Number(n || 0).toLocaleString("en-US"); }
+  function fmt1(n) { return (Number(n) || 0).toFixed(1); }
+  function pct(n) { return Math.round((Number(n) || 0) * 100) + "%"; }
+  function fmtUsd(n) {
+    if (n == null) return '<span class="n-a">n/a</span>';
+    var v = Number(n) || 0;
+    if (v === 0) return "$0";
+    if (v < 0.01) return "$" + v.toFixed(5);
+    if (v < 1) return "$" + v.toFixed(4);
+    return "$" + v.toFixed(2);
+  }
+  function esc(s) {
+    return String(s == null ? "" : s).replace(/[&<>"']/g, function (c) {
+      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
+    });
+  }
+  function el(tag, attrs, html) {
+    var e = document.createElement(tag);
+    for (var k in attrs || {}) e.setAttribute(k, attrs[k]);
+    if (html != null) e.innerHTML = html;
+    return e;
+  }
+  function svgEl(tag, attrs) {
+    var e = document.createElementNS("http://www.w3.org/2000/svg", tag);
+    for (var k in attrs || {}) e.setAttribute(k, attrs[k]);
+    return e;
+  }
+  // ---------------------------------------------------------------- header
+  document.getElementById("generated").textContent = "generated " + (DATA.generated_at || "");
+  document.getElementById("schema").textContent = DATA.schema || "";
+  // ---------------------------------------------------------------- KPIs
+  (function renderKpis() {
+    var k = DATA.kpis || {};
+    var cards = [
+      ["Runs", fmt(k.runs)],
+      ["Models", fmt(k.models)],
+      ["Tasks", fmt(k.tasks)],
+      ["Solved", fmt(k.solved) + " / " + fmt(k.runs)],
+      ["Solve rate", pct(k.solved_rate)],
+      ["Total tokens", fmt(k.tokens)],
+      ["Total cost", fmtUsd(k.cost_usd) + (k.cost_source === "estimated" ? "~" : "")],
+      ["Elapsed", fmt(k.elapsed_seconds) + "s"],
+    ];
+    var host = document.getElementById("kpis");
+    cards.forEach(function (c) {
+      host.appendChild(el("div", { class: "kpi" }, '<div class="v">' + c[1] + '</div><div class="l">' + esc(c[0]) + "</div>"));
+    });
+  })();
+  // ---------------------------------------------------------------- sortable table helper
+  function sortableTable(container, columns, rows, opts) {
+    opts = opts || {};
+    var state = { key: opts.defaultKey || columns[0].key, dir: opts.defaultDir || -1 };
+    function draw() {
+      var sorted = rows.slice().sort(function (a, b) {
+        var va = a[state.key], vb = b[state.key];
+        if (typeof va === "string" || typeof vb === "string") {
+          return state.dir * String(va).localeCompare(String(vb));
+        }
+        return state.dir * ((Number(va) || 0) - (Number(vb) || 0));
+      });
+      var thead = "<thead><tr>" + columns.map(function (c) {
+        var arrow = c.key === state.key ? (state.dir === 1 ? "\u2191" : "\u2193") : "";
+        return '<th data-key="' + c.key + '">' + esc(c.label) + (arrow ? ' <span class="arrow">' + arrow + "</span>" : "") + "</th>";
+      }).join("") + "</tr></thead>";
+      var tbody = "<tbody>" + sorted.map(function (row, i) {
+        var cells = columns.map(function (c) { return "<td>" + c.render(row) + "</td>"; }).join("");
+        var extra = opts.rowAttrs ? opts.rowAttrs(row, i) : "";
+        return "<tr " + extra + ">" + cells + "</tr>";
+      }).join("") + "</tbody>";
+      container.innerHTML = thead + tbody;
+      container.querySelectorAll("th").forEach(function (th) {
+        th.addEventListener("click", function () {
+          var key = th.getAttribute("data-key");
+          if (state.key === key) state.dir *= -1;
+          else { state.key = key; state.dir = -1; }
+          draw();
+        });
+      });
+      if (opts.afterDraw) opts.afterDraw(container, sorted);
+    }
+    draw();
+  }
+  // ---------------------------------------------------------------- leaderboard chart: solve rate bars
+  (function () {
+    var host = document.getElementById("chart-solve");
+    (DATA.leaderboard || []).forEach(function (g) {
+      var row = el("div", { class: "bar-row" });
+      row.appendChild(el("div", { class: "lbl mono" }, esc(g.slug)));
+      var track = el("div", { class: "bar-track" });
+      var seg = el("div", {
+        class: "bar-seg",
+        style: "width:" + Math.round((g.solved_rate || 0) * 100) + "%;background:" + colorFor(g.slug),
+      });
+      track.appendChild(seg);
+      row.appendChild(track);
+      row.appendChild(el("div", { class: "bar-val" }, pct(g.solved_rate) + " (" + g.solved + "/" + g.runs + ")"));
+      host.appendChild(row);
+    });
+  })();
+  // ---------------------------------------------------------------- outcomes stacked bar
+  (function () {
+    var host = document.getElementById("chart-outcomes");
+    var legend = document.getElementById("legend-outcomes");
+    var outcomeColors = { Submitted: "#3ecf8e", LimitsExceeded: "#e8b339", TimeExceeded: "#e8b339", RepeatedFormatError: "#ef5a6f", ContextWindowExceeded: "#ef5a6f", Error: "#ef5a6f", Unknown: "#8b93a7" };
+    function colorForOutcome(k) { return outcomeColors[k] || "#8b93a7"; }
+    var allOutcomes = {};
+    (DATA.leaderboard || []).forEach(function (g) {
+      var row = el("div", { class: "bar-row" });
+      row.appendChild(el("div", { class: "lbl mono" }, esc(g.slug)));
+      var track = el("div", { class: "bar-track" });
+      var total = g.runs || 1;
+      Object.keys(g.outcomes || {}).forEach(function (k) {
+        allOutcomes[k] = true;
+        var w = (g.outcomes[k] / total) * 100;
+        track.appendChild(el("div", { class: "bar-seg", style: "width:" + w + "%;background:" + colorForOutcome(k) }));
+      });
+      row.appendChild(track);
+      row.appendChild(el("div", { class: "bar-val" }, g.runs + " runs"));
+      host.appendChild(row);
+    });
+    Object.keys(allOutcomes).forEach(function (k) {
+      legend.appendChild(el("span", {}, '<span class="sw" style="background:' + colorForOutcome(k) + '"></span>' + esc(k)));
+    });
+  })();
+  // ---------------------------------------------------------------- leaderboard table
+  (function () {
+    var container = document.getElementById("tbl-leaderboard");
+    var columns = [
+      { key: "model", label: "Model", render: function (r) { return esc(r.model); } },
+      { key: "reasoning", label: "Reasoning", render: function (r) { return esc(r.reasoning); } },
+      { key: "runs", label: "Runs", render: function (r) { return fmt(r.runs); } },
+      { key: "solved_rate", label: "Solved", render: function (r) { return r.solved + "/" + r.runs + " (" + pct(r.solved_rate) + ")"; } },
+      { key: "avg_steps", label: "Avg steps", render: function (r) { return fmt1(r.avg_steps); } },
+      { key: "avg_elapsed_seconds", label: "Avg time", render: function (r) { return fmt1(r.avg_elapsed_seconds) + "s"; } },
+      { key: "avg_tokens", label: "Avg tokens", render: function (r) { return fmt(Math.round(r.avg_tokens)); } },
+      { key: "cost_usd", label: "Cost", render: function (r) { return fmtUsd(r.cost_usd) + (r.cost_source === "estimated" ? "~" : ""); } },
+      { key: "avg_n_failed_commands", label: "Fail/run", render: function (r) { return fmt1(r.avg_n_failed_commands); } },
+    ];
+    sortableTable(container, columns, DATA.leaderboard || [], { defaultKey: "solved_rate" });
+  })();
+  // ---------------------------------------------------------------- token mix stacked bar
+  (function () {
+    var host = document.getElementById("chart-tokens");
+    var legend = document.getElementById("legend-tokens");
+    var keys = ["prompt", "completion", "reasoning", "cached"];
+    var colors = { prompt: "#5b9dff", completion: "#3ecf8e", reasoning: "#b57bff", cached: "#8b93a7" };
+    var maxTotal = Math.max(1, Math.max.apply(null, (DATA.leaderboard || []).map(function (g) {
+      return keys.reduce(function (s, k) { return s + (g.tokens[k] || 0); }, 0);
+    })));
+    (DATA.leaderboard || []).forEach(function (g) {
+      var row = el("div", { class: "bar-row" });
+      row.appendChild(el("div", { class: "lbl mono" }, esc(g.slug)));
+      var track = el("div", { class: "bar-track" });
+      var total = keys.reduce(function (s, k) { return s + (g.tokens[k] || 0); }, 0);
+      keys.forEach(function (k) {
+        var w = (g.tokens[k] || 0) / maxTotal * 100;
+        if (w > 0) track.appendChild(el("div", { class: "bar-seg", style: "width:" + w + "%;background:" + colors[k] }));
+      });
+      row.appendChild(track);
+      row.appendChild(el("div", { class: "bar-val" }, fmt(total)));
+      host.appendChild(row);
+    });
+    keys.forEach(function (k) {
+      legend.appendChild(el("span", {}, '<span class="sw" style="background:' + colors[k] + '"></span>' + k));
+    });
+  })();
+  // ---------------------------------------------------------------- scatter: cost vs solve rate
+  (function () {
+    var host = document.getElementById("chart-scatter");
+    var W = host.clientWidth || 460, H = 260, pad = { l: 42, r: 16, t: 14, b: 30 };
+    var svg = svgEl("svg", { width: "100%", height: H, viewBox: "0 0 " + W + " " + H });
+    var data = (DATA.leaderboard || []).filter(function (g) { return g.cost_usd != null; });
+    var maxCost = Math.max(0.001, Math.max.apply(null, data.map(function (g) { return g.cost_usd; }).concat([0.001])));
+    function x(v) { return pad.l + (v / maxCost) * (W - pad.l - pad.r); }
+    function y(v) { return H - pad.b - v * (H - pad.t - pad.b); }
+    // axes
+    svg.appendChild(svgEl("line", { x1: pad.l, x2: W - pad.r, y1: H - pad.b, y2: H - pad.b, stroke: "#262b36" }));
+    svg.appendChild(svgEl("line", { x1: pad.l, x2: pad.l, y1: pad.t, y2: H - pad.b, stroke: "#262b36" }));
+    [0, 0.25, 0.5, 0.75, 1].forEach(function (t) {
+      var ty = y(t);
+      var lab = svgEl("text", { x: pad.l - 8, y: ty + 3, "text-anchor": "end" });
+      lab.textContent = Math.round(t * 100) + "%";
+      svg.appendChild(lab);
+    });
+    var lab2 = svgEl("text", { x: W - pad.r, y: H - pad.b + 20, "text-anchor": "end" });
+    lab2.textContent = "cost \u2192 (max " + fmtUsd(maxCost) + ")";
+    svg.appendChild(lab2);
+    data.forEach(function (g) {
+      var cx = x(g.cost_usd), cy = y(g.solved_rate);
+      var r = 6 + Math.min(10, (g.avg_tokens || 0) / 4000);
+      var c = svgEl("circle", { cx: cx, cy: cy, r: r, fill: colorFor(g.slug), "fill-opacity": 0.85 });
+      svg.appendChild(c);
+      var t = svgEl("text", { x: cx + r + 4, y: cy + 3 });
+      t.textContent = g.slug;
+      svg.appendChild(t);
+    });
+    host.appendChild(svg);
+  })();
+  // ---------------------------------------------------------------- per-step line charts
+  function lineChart(host, series, valueFn, opts) {
+    opts = opts || {};
+    var W = host.clientWidth || 460, H = 260, pad = { l: 46, r: 16, t: 14, b: 26 };
+    var svg = svgEl("svg", { width: "100%", height: H, viewBox: "0 0 " + W + " " + H });
+    var maxStep = 1, maxVal = 0.0001;
+    series.forEach(function (s) {
+      s.points.forEach(function (p) {
+        if (p.step > maxStep) maxStep = p.step;
+        var v = valueFn(p);
+        if (v > maxVal) maxVal = v;
+      });
+    });
+    function x(v) { return pad.l + (v - 1) / Math.max(1, maxStep - 1) * (W - pad.l - pad.r); }
+    function y(v) { return H - pad.b - (v / maxVal) * (H - pad.t - pad.b); }
+    svg.appendChild(svgEl("line", { x1: pad.l, x2: W - pad.r, y1: H - pad.b, y2: H - pad.b, stroke: "#262b36" }));
+    svg.appendChild(svgEl("line", { x1: pad.l, x2: pad.l, y1: pad.t, y2: H - pad.b, stroke: "#262b36" }));
+    [0, 0.5, 1].forEach(function (t) {
+      var ty = y(maxVal * t);
+      var lab = svgEl("text", { x: pad.l - 6, y: ty + 3, "text-anchor": "end" });
+      lab.textContent = opts.fmt ? opts.fmt(maxVal * t) : Math.round(maxVal * t);
+      svg.appendChild(lab);
+    });
+    series.forEach(function (s) {
+      var pts = s.points.slice().sort(function (a, b) { return a.step - b.step; });
+      var d = pts.map(function (p, i) { return (i === 0 ? "M" : "L") + x(p.step) + "," + y(valueFn(p)); }).join(" ");
+      svg.appendChild(svgEl("path", { d: d, fill: "none", stroke: colorFor(s.slug), "stroke-width": 2 }));
+      pts.forEach(function (p) {
+        svg.appendChild(svgEl("circle", { cx: x(p.step), cy: y(valueFn(p)), r: 2.5, fill: colorFor(s.slug) }));
+      });
+    });
+    host.appendChild(svg);
+  }
+  (function () {
+    var bySlug = {};
+    (DATA.step_series || []).forEach(function (r) {
+      if (!bySlug[r.slug]) bySlug[r.slug] = [];
+      bySlug[r.slug].push(r);
+    });
+    var series = Object.keys(bySlug).map(function (slug) { return { slug: slug, points: bySlug[slug] }; });
+    if (series.length === 0) {
+      document.getElementById("section-series").style.display = "none";
+      return;
+    }
+    lineChart(document.getElementById("chart-line-tokens"), series, function (p) { return p.prompt_tokens.p50; }, { fmt: fmt });
+    lineChart(document.getElementById("chart-line-cost"), series, function (p) { return p.cum_cost_usd.mean; }, { fmt: fmtUsd });
+    var legend = document.getElementById("legend-series");
+    series.forEach(function (s) {
+      legend.appendChild(el("span", {}, '<span class="sw" style="background:' + colorFor(s.slug) + '"></span>' + esc(s.slug)));
+    });
+  })();
+  // ---------------------------------------------------------------- model x task matrix (heatmap table)
+  (function () {
+    var matrix = DATA.matrix || [];
+    var container = document.getElementById("tbl-matrix");
+    if (matrix.length === 0) {
+      document.getElementById("section-matrix").style.display = "none";
+      return;
+    }
+    var tasks = [];
+    var slugs = [];
+    var cell = {};
+    matrix.forEach(function (m) {
+      if (tasks.indexOf(m.task_id) === -1) tasks.push(m.task_id);
+      if (slugs.indexOf(m.slug) === -1) slugs.push(m.slug);
+      cell[m.slug + "\u0000" + m.task_id] = m;
+    });
+    function heatColor(rate) {
+      if (rate == null) return "transparent";
+      var g = Math.round(60 + rate * 140);
+      var r = Math.round(220 - rate * 160);
+      return "rgba(" + r + "," + g + ",120,0.35)";
+    }
+    var thead = "<thead><tr><th>Model</th>" + tasks.map(function (t) { return "<th>" + esc(t) + "</th>"; }).join("") + "</tr></thead>";
+    var tbody = "<tbody>" + slugs.map(function (slug) {
+      var cells = tasks.map(function (t) {
+        var m = cell[slug + "\u0000" + t];
+        if (!m) return "<td>&mdash;</td>";
+        return '<td><span class="heat-cell" style="background:' + heatColor(m.pass_at_k) + '">' + m.passed + "/" + m.k + "<br>" + pct(m.pass_at_k) + "</span></td>";
+      }).join("");
+      return "<tr><td class=\"mono\">" + esc(slug) + "</td>" + cells + "</tr>";
+    }).join("") + "</tbody>";
+    container.innerHTML = thead + tbody;
+  })();
+  // ---------------------------------------------------------------- runs table + filters + expandable timeline
+  (function () {
+    var runs = DATA.runs || [];
+    var container = document.getElementById("tbl-runs");
+    var fModel = document.getElementById("filter-model");
+    var fTask = document.getElementById("filter-task");
+    var fOutcome = document.getElementById("filter-outcome");
+    function uniq(fn) {
+      var seen = {}, out = [];
+      runs.forEach(function (r) { var v = fn(r); if (v && !seen[v]) { seen[v] = 1; out.push(v); } });
+      return out.sort();
+    }
+    uniq(function (r) { return r.slug; }).forEach(function (v) { fModel.appendChild(el("option", { value: v }, esc(v))); });
+    uniq(function (r) { return r.task_id; }).forEach(function (v) { fTask.appendChild(el("option", { value: v }, esc(v))); });
+    uniq(function (r) { return r.exit_status; }).forEach(function (v) { fOutcome.appendChild(el("option", { value: v }, esc(v))); });
+    var columns = [
+      { key: "slug", label: "Model", render: function (r) { return '<span class="mono">' + esc(r.slug) + "</span>"; } },
+      { key: "task_id", label: "Task", render: function (r) { return esc(r.task_id); } },
+      { key: "run_id", label: "Run", render: function (r) { return esc(r.run_id); } },
+      { key: "exit_status", label: "Outcome", render: function (r) {
+          var cls = r.resolved ? "ok" : (r.exit_status === "Error" ? "bad" : "warn");
+          return '<span class="pill ' + cls + '">' + esc(r.exit_status || "Unknown") + "</span>";
+        } },
+      { key: "steps", label: "Steps", render: function (r) { return fmt(r.steps); } },
+      { key: "elapsed_seconds", label: "Time", render: function (r) { return fmt(r.elapsed_seconds) + "s"; } },
+      { key: "tokens", label: "Tokens", render: function (r) { return fmt(r.tokens.total); } },
+      { key: "cost_usd", label: "Cost", render: function (r) { return fmtUsd(r.cost_usd) + (r.cost_source === "estimated" ? "~" : ""); } },
+      { key: "n_failed_commands", label: "Fails", render: function (r) { return fmt(r.n_failed_commands); } },
+    ];
+    function renderTimeline(run) {
+      var box = el("div", { class: "timeline" });
+      (run.timeline || []).forEach(function (s) {
+        var rcClass = s.returncode === 0 ? "rc0" : (s.returncode == null ? "muted" : "rcN");
+        var step = el("div", { class: "step" });
+        step.innerHTML =
+          '<div class="head"><span class="n">step ' + s.step + '</span>' +
+          '<span class="stats">' +
+            fmt(s.tokens.total) + " tok" +
+            (s.cost_usd != null ? " \u00b7 " + fmtUsd(s.cost_usd) : "") +
+            (s.returncode != null ? ' \u00b7 rc=<span class="' + rcClass + '">' + s.returncode + "</span>" : "") +
+          "</span></div>" +
+          (s.thought ? '<div class="thought">' + esc(s.thought) + "</div>" : "") +
+          (s.command ? "<pre>$ " + esc(s.command) + "</pre>" : "") +
+          (s.output_preview ? "<pre>" + esc(s.output_preview) + "</pre>" : "");
+        box.appendChild(step);
+      });
+      return box;
+    }
+    function draw() {
+      var filtered = runs.filter(function (r) {
+        if (fModel.value && r.slug !== fModel.value) return false;
+        if (fTask.value && r.task_id !== fTask.value) return false;
+        if (fOutcome.value && r.exit_status !== fOutcome.value) return false;
+        return true;
+      });
+      sortableTable(container, columns, filtered, {
+        defaultKey: "slug",
+        defaultDir: 1,
+        rowAttrs: function (r, i) { return 'class="run-row" data-idx="' + i + '"'; },
+        afterDraw: function (containerEl, sorted) {
+          containerEl.querySelectorAll("tbody tr").forEach(function (tr) {
+            var idx = Number(tr.getAttribute("data-idx"));
+            var run = sorted[idx];
+            tr.addEventListener("click", function () {
+              var next = tr.nextElementSibling;
+              if (next && next.classList.contains("detail-row")) {
+                next.remove();
+                return;
+              }
+              containerEl.querySelectorAll(".detail-row").forEach(function (d) { d.remove(); });
+              var detailRow = document.createElement("tr");
+              detailRow.className = "detail-row";
+              var td = document.createElement("td");
+              td.colSpan = columns.length;
+              td.appendChild(renderTimeline(run));
+              detailRow.appendChild(td);
+              tr.parentNode.insertBefore(detailRow, tr.nextSibling);
+            });
+          });
+        },
+      });
+    }
+    [fModel, fTask, fOutcome].forEach(function (elm) { elm.addEventListener("change", draw); });
+    draw();
+  })();
+})();
+</script>
+</body>
+</html>