@hackerrank/astra-cli 0.1.2 → 0.1.3

package/README.md

@@ -115,7 +115,7 @@ astra \
   --repeat 3 \
   --tar                       # write a bench/ tarball locally
 
-# push results to S3 (tars bench/ then `aws s3 cp` to the URI)
+# push results to S3 (tars bench/ and uploads it + report.html to the URI)
 astra -m m1,m2 -p tasks/dummy-slugify --repeat 3 \
   --push s3://hackerrank-astra-bench-results-dev/runs/2025-09-02/
 ```
@@ -126,6 +126,12 @@ price entry shows **`n/a`** (never `$0`), and estimated costs (native routes) ar
 marked `~`. `--push` requires an `s3://` URI and the `aws` CLI on PATH; if the
 upload fails the local tarball is kept.
 
+Next to the tarball, `--push` also uploads the self-contained `report.html`
+dashboard with `Content-Type: text/html` and prints a **7-day presigned
+"view report" link** at the end of the run. The bucket is private (no public
+read), so that presigned URL is the only way to open the dashboard — e.g.
+clickable straight from a Jenkins console log.
+
 ### HTML report
 
 Every matrix run (and every single `-p`/`-t`/`-f` bench run) rebuilds
@@ -175,7 +181,9 @@ credits — that's a quota issue, not a bug.
     --repeat <n>        Attempts per (model,reasoning) in a matrix (default: 1)
     --bench-root <dir>  Root folder for bench runs (default: ./bench)
     --tar               After a matrix, write a bench/ tarball locally
-    --push <s3-uri>     After a matrix, tar bench/ and `aws s3 cp` to the URI
+    --push <s3-uri>     After a matrix, tar bench/ and `aws s3 cp` it (plus
+                        report.html) to the URI; prints presigned
+                        download/view links
     --report            Rebuild bench/summary.json + bench/report.html from
                         whatever runs already exist on disk, then exit
 -C, --cwd <path>        Working directory for commands (default: cwd)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackerrank/astra-cli",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Minimal zero-dependency AI coding agent for the HackerRank AI Gateway.",
   "type": "module",
   "bin": {

package/src/bench.js

@@ -455,17 +455,38 @@ function s3ConsoleUrl(s3Uri) {
   return `https://s3.console.aws.amazon.com/s3/object/${bucket}?prefix=${encodeURIComponent(key)}`;
 }
 
+/**
+ * Generate a time-limited presigned URL for an S3 object via the AWS CLI
+ * (`aws s3 presign`). `expiresIn` defaults to 7 days (604800s). Returns null
+ * (rather than throwing) if the AWS CLI is missing or presigning fails, so
+ * a presign failure never blocks the run.
+ */
+export function presignS3Url(s3Uri, expiresIn = 604800) {
+  const res = spawnSync(
+    "aws",
+    ["s3", "presign", s3Uri, "--expires-in", String(expiresIn)],
+    { stdio: ["ignore", "pipe", "pipe"] }
+  );
+  if (res.error && res.error.code === "ENOENT") return null;
+  if (res.status !== 0) return null;
+  return (res.stdout?.toString() || "").trim() || null;
+}
+
 /**
  * Upload a file to S3 via the AWS CLI. Returns { uri, url } where `uri` is the
  * final s3:// destination and `url` is a browsable https console link.
- * Fails gracefully (throws a descriptive error) when the AWS CLI is missing or
- * the copy fails; callers should keep the local tarball on failure.
+ * Optionally sets the object's Content-Type (e.g. "text/html" so presigned
+ * URLs open in a browser instead of downloading). Fails gracefully (throws a
+ * descriptive error) when the AWS CLI is missing or the copy fails; callers
+ * should keep the local tarball on failure.
  */
-export function pushToS3(file, s3Uri) {
+export function pushToS3(file, s3Uri, { contentType } = {}) {
   if (!/^s3:\/\//.test(s3Uri)) throw new Error(`--push destination must be an s3:// URI, got: ${s3Uri}`);
   // If the URI ends with "/", upload into it under the file's basename.
   const dest = s3Uri.endsWith("/") ? s3Uri + path.basename(file) : s3Uri;
-  const res = spawnSync("aws", ["s3", "cp", file, dest], {
+  const cmd = ["s3", "cp", file, dest];
+  if (contentType) cmd.push("--content-type", contentType);
+  const res = spawnSync("aws", cmd, {
     stdio: ["ignore", "pipe", "pipe"],
   });
   if (res.error && res.error.code === "ENOENT") {
@@ -474,5 +495,5 @@ export function pushToS3(file, s3Uri) {
   if (res.status !== 0) {
     throw new Error(`aws s3 cp failed: ${res.stderr?.toString() || "unknown"}`);
   }
-  return { uri: dest, url: s3ConsoleUrl(dest) };
+  return { uri: dest, url: s3ConsoleUrl(dest), presigned: presignS3Url(dest) };
 }

package/src/cli.js

@@ -28,8 +28,9 @@
  *                           comma-separated to sweep levels in bench mode).
  *                           Sent to the model and recorded in the bench name.
  *       --repeat <n>        Attempts per (model,reasoning) in a matrix (1)
- *       --push              After a matrix, tar bench/ and upload to
- *                           s3://astra-bench-results/<timestamp>/
+ *       --push              After a matrix, tar bench/ and upload it (plus
+ *                           report.html) to s3://astra-bench-results/<timestamp>/;
+ *                           prints presigned download/view links
  *       --push-uri <s3-uri> Override the S3 push destination
  *       --tar               After a matrix, write a bench/ tarball locally
  *       --report            Rebuild bench/summary.json + bench/report.html
@@ -365,6 +366,12 @@ async function main() {
       const metrics = collectMetrics({ agent: benchAgent, model, reasoning });
       const paths = writeMetrics({ runDir: alloc.dir, root: alloc.root, metrics });
       log(`[astra] bench done: exit=${res.exit_status} · metrics → ${paths.runMetrics}`);
+      try {
+        const report = refreshReport(alloc.root);
+        log(`[astra] report → ${report.html}`);
+      } catch (err) {
+        log(`[astra] report generation skipped: ${err.message}`);
+      }
     };
     await runRepl(agent, { model, autoRun: !!args.yolo, fresh: !resumeDoc, reasoning, runBench });
     process.exit(0);
@@ -465,6 +472,30 @@ function archiveAndPush(args, root, links) {
         const pushed = pushToS3(tarball, dest);
         links.push(["s3 uri", pushed.uri]);
         links.push(["s3 url", pushed.url]);
+        if (pushed.presigned) {
+          links.push(["download (presigned, 7d)", pushed.presigned]);
+        }
+        // Also push the self-contained HTML dashboard next to the tarball and
+        // emit a presigned view link: the bucket is private (no public read),
+        // so the presigned URL is the only way to open the report — e.g. by
+        // clicking it straight from the Jenkins console output. Uploaded with
+        // Content-Type: text/html so browsers render it instead of downloading.
+        const reportHtml = path.join(benchRoot(root), "report.html");
+        if (fs.existsSync(reportHtml)) {
+          const htmlDest = dest.endsWith("/")
+            ? dest + "report.html"
+            : dest.slice(0, dest.lastIndexOf("/") + 1) + "report.html";
+          try {
+            const html = pushToS3(reportHtml, htmlDest, { contentType: "text/html" });
+            if (html.presigned) {
+              links.push(["view report (presigned, 7d)", html.presigned]);
+            } else {
+              links.push(["report (s3 url)", html.url]);
+            }
+          } catch (err) {
+            console.error(`\x1b[31m[astra] S3 report push failed: ${err.message}\x1b[0m`);
+          }
+        }
       } catch (err) {
         console.error(`\x1b[31m[astra] S3 push failed: ${err.message}\x1b[0m`);
         console.error(`\x1b[33m[astra] tarball kept locally: ${tarball}\x1b[0m`);

package/src/report.html

@@ -4,41 +4,15 @@
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>astra bench report</title>
+<link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap" />
 <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; }
+  :root { --ink:#11131a; --muted:#69707d; --wash:#f5f6f8; --line:#e4e7eb; --lime:#a7ff63; --blue:#5285f7; --purple:#9160d8; --green:#39ae76; --orange:#f3a021; --red:#d85668; font-family:Satoshi,"Avenir Next",Arial,sans-serif; }
+  * { box-sizing:border-box; } body { margin:0; background:#fff; color:var(--ink); font-size:14px; line-height:1.45; } .wrap { max-width:1240px; margin:auto; padding:28px 32px 68px; }
+  header.top { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding-bottom:28px; border-bottom:1px solid var(--line); } header.top h1 { font-size:32px; letter-spacing:-.045em; line-height:1; margin:8px 0 0; font-weight:700; } .eyebrow { display:inline-block; padding:5px 14px; border-radius:99px; background:var(--lime); font-size:12px; font-weight:700; } header.top .meta { color:var(--muted); font-size:12px; text-align:right; }
+  .kpis { display:grid; grid-template-columns:repeat(4,1fr); margin:24px 0 52px; } .kpi { min-height:96px; padding:8px 18px; border-left:1px solid var(--line); } .kpi:first-child { border:0; padding-left:0; } .kpi .v { font-size:28px; letter-spacing:-.045em; font-weight:700; } .kpi .l { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-top:8px; }
+  section { margin:56px 0; } section > h2 { font-size:20px; letter-spacing:-.035em; margin:0 0 22px; } section > h2 .sub { color:var(--muted); font-size:13px; font-weight:400; letter-spacing:0; } .grid2 { display:grid; grid-template-columns:1.1fr 1fr; gap:44px; } .panel { padding:0; } .panel h3 { color:var(--muted); letter-spacing:.07em; text-transform:uppercase; font-size:12px; margin:0 0 16px; }
   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, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); 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; }
@@ -52,7 +26,7 @@
   .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-track { flex: 1; height: 9px; background: var(--wash); border-radius: 99px; 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); }
@@ -61,7 +35,7 @@
   .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 { margin: 0 0 18px; background:var(--wash); padding:0 14px; 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; }
@@ -71,35 +45,30 @@
   .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 select, .toolbar input { background: var(--wash); border:0; color:var(--ink); border-radius:4px; padding:7px 9px; font-size:12px; } .model-filter { align-items:end; } .model-filter > span { color:var(--muted); font-size:11px; } .model-menu { position:relative; } .model-menu summary { cursor:pointer; list-style:none; min-width:220px; padding:9px 32px 9px 11px; background:var(--wash); border-radius:5px; font-size:12px; position:relative; } .model-menu summary::-webkit-details-marker { display:none; } .model-menu summary::after { content:"⌄"; position:absolute; right:11px; color:var(--muted); } .model-options { position:absolute; z-index:2; top:calc(100% + 6px); left:0; width:260px; max-height:240px; overflow:auto; padding:6px; background:#fff; border:1px solid var(--line); box-shadow:0 10px 24px rgba(17,19,26,.1); } .model-option { display:flex; gap:9px; align-items:center; padding:8px; font-size:12px; cursor:pointer; } .model-option:hover { background:var(--wash); } .model-option input { accent-color:var(--blue); }
   .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); }
+  .axis line, .axis path { stroke: var(--line); }
   .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>
+    <div><h1>Benchmark report</h1><div class="meta" id="generated"></div></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>
+    <h2>Performance <span class="sub">run volume and reliability by model</span></h2>
+    <div class="toolbar model-filter">
+      <span>Models</span>
+      <details class="model-menu">
+        <summary id="model-filter-label">All models</summary>
+        <div id="leaderboard-model-options" class="model-options"></div>
+      </details>
     </div>
     <div class="panel" style="margin-top:16px;">
       <table id="tbl-leaderboard"></table>
@@ -107,22 +76,29 @@
   </section>
 
   <section>
-    <h2>Cost &amp; tokens</h2>
+    <h2>Efficiency <span class="sub">spend and token composition</span></h2>
     <div class="grid2">
       <div class="panel">
-        <h3>Cost vs. solve rate</h3>
+        <h3>Cost vs. average duration</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>
+        <h3>Cost vs. average steps</h3>
+        <div id="chart-scatter-steps"></div>
       </div>
     </div>
   </section>
 
+  <section>
+    <h2>Token mix <span class="sub">prompt, completion, reasoning, and cached tokens</span></h2>
+    <div class="panel">
+      <div id="chart-tokens"></div>
+      <div class="legend" id="legend-tokens"></div>
+    </div>
+  </section>
+
   <section id="section-series">
-    <h2>Per-step trend <span class="sub">median tokens &amp; cumulative cost across the trajectory</span></h2>
+    <h2>Trajectory <span class="sub">where context and cost accumulate</span></h2>
     <div class="grid2">
       <div class="panel">
         <h3>Prompt tokens (context) vs. step</h3>
@@ -136,31 +112,6 @@
     <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>
 
@@ -169,8 +120,19 @@
 </script>
 <script>
 (function () {
-  var DATA = window.DATA || { kpis: {}, leaderboard: [], matrix: [], runs: [], step_series: [] };
-  var PALETTE = ["#5b9dff", "#3ecf8e", "#e8b339", "#ef5a6f", "#b57bff", "#33c2c2", "#ff8a5b", "#a3d977"];
+  function loadReportData() {
+    try {
+      var request = new XMLHttpRequest();
+      request.open("GET", "summary.json", false);
+      request.send(null);
+      if ((request.status >= 200 && request.status < 300) || request.status === 0) return JSON.parse(request.responseText);
+    } catch (_) {
+      // Direct file access can block JSON reads; use the embedded snapshot then.
+    }
+    return window.__ASTRA_EMBEDDED_DATA__ || { kpis: {}, leaderboard: [], matrix: [], runs: [], step_series: [] };
+  }
+  var DATA = loadReportData();
+  var PALETTE = ["#5285f7", "#9160d8", "#39ae76", "#f3a021", "#d85668", "#37a8ad"];
   var colorCache = {};
   function colorFor(key) {
     if (!colorCache[key]) {
@@ -209,21 +171,19 @@
   }
 
   // ---------------------------------------------------------------- header
-  document.getElementById("generated").textContent = "generated " + (DATA.generated_at || "");
+  document.getElementById("generated").textContent = DATA.generated_at
+    ? "Generated " + new Date(DATA.generated_at).toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short" })
+    : "";
   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)],
+      ["Models Benchmarked", fmt(k.models)],
+      ["Total duration", fmt(k.elapsed_seconds) + "s"],
       ["Total cost", fmtUsd(k.cost_usd) + (k.cost_source === "estimated" ? "~" : "")],
-      ["Elapsed", fmt(k.elapsed_seconds) + "s"],
+      ["Tokens used", fmt(k.tokens)],
     ];
     var host = document.getElementById("kpis");
     cards.forEach(function (c) {
@@ -266,20 +226,22 @@
     draw();
   }
 
-  // ---------------------------------------------------------------- leaderboard chart: solve rate bars
+  // ---------------------------------------------------------------- leaderboard chart: run volume bars
   (function () {
     var host = document.getElementById("chart-solve");
+    if (!host) return;
+    var maxRuns = Math.max(1, Math.max.apply(null, (DATA.leaderboard || []).map(function (g) { return g.runs || 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 seg = el("div", {
         class: "bar-seg",
-        style: "width:" + Math.round((g.solved_rate || 0) * 100) + "%;background:" + colorFor(g.slug),
+        style: "width:" + Math.round((g.runs || 0) / maxRuns * 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 + ")"));
+      row.appendChild(el("div", { class: "bar-val" }, fmt(g.runs) + " runs"));
       host.appendChild(row);
     });
   })();
@@ -288,6 +250,7 @@
   (function () {
     var host = document.getElementById("chart-outcomes");
     var legend = document.getElementById("legend-outcomes");
+    if (!host || !legend) return;
     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 = {};
@@ -313,18 +276,31 @@
   // ---------------------------------------------------------------- leaderboard table
   (function () {
     var container = document.getElementById("tbl-leaderboard");
+    var options = document.getElementById("leaderboard-model-options");
+    var filterLabel = document.getElementById("model-filter-label");
     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: "sum_steps", label: "Total steps", render: function (r) { return fmt(r.sum_steps); } },
+      { key: "sum_elapsed_seconds", label: "Time taken", render: function (r) { return fmt(r.sum_elapsed_seconds) + "s"; } },
+      { key: "sum_tokens", label: "Tokens", render: function (r) { return fmt(r.sum_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" });
+    (DATA.leaderboard || []).forEach(function (r) {
+      var option = el("label", { class: "model-option" });
+      option.appendChild(el("input", { type: "checkbox", value: r.slug }));
+      option.appendChild(document.createTextNode(r.model + " · " + r.reasoning));
+      options.appendChild(option);
+    });
+    function draw() {
+      var selected = Array.prototype.slice.call(options.querySelectorAll("input:checked")).map(function (o) { return o.value; });
+      var rows = selected.length ? (DATA.leaderboard || []).filter(function (r) { return selected.indexOf(r.slug) !== -1; }) : DATA.leaderboard || [];
+      filterLabel.textContent = selected.length ? selected.length + " model" + (selected.length === 1 ? "" : "s") + " selected" : "All models";
+      sortableTable(container, columns, rows, { defaultKey: "sum_tokens" });
+    }
+    options.addEventListener("change", draw);
+    draw();
   })();
 
   // ---------------------------------------------------------------- token mix stacked bar
@@ -354,29 +330,30 @@
     });
   })();
 
-  // ---------------------------------------------------------------- scatter: cost vs solve rate
+  // ---------------------------------------------------------------- scatter: cost vs duration
   (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])));
+    var maxDuration = Math.max(1, Math.max.apply(null, data.map(function (g) { return g.avg_elapsed_seconds || 0; }).concat([1])));
     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); }
+    function y(v) { return H - pad.b - (v / maxDuration) * (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 ty = y(maxDuration * t);
       var lab = svgEl("text", { x: pad.l - 8, y: ty + 3, "text-anchor": "end" });
-      lab.textContent = Math.round(t * 100) + "%";
+      lab.textContent = Math.round(maxDuration * t) + "s";
       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 cx = x(g.cost_usd), cy = y(g.avg_elapsed_seconds || 0);
       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);
@@ -387,6 +364,38 @@
     host.appendChild(svg);
   })();
 
+  // ---------------------------------------------------------------- scatter: cost vs average steps
+  (function () {
+    var host = document.getElementById("chart-scatter-steps");
+    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])));
+    var maxSteps = Math.max(1, Math.max.apply(null, data.map(function (g) { return g.avg_steps || 0; }).concat([1])));
+    function x(v) { return pad.l + (v / maxCost) * (W - pad.l - pad.r); }
+    function y(v) { return H - pad.b - (v / maxSteps) * (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: "#e4e7eb" }));
+    svg.appendChild(svgEl("line", { x1: pad.l, x2: pad.l, y1: pad.t, y2: H - pad.b, stroke: "#e4e7eb" }));
+    [0, 0.25, 0.5, 0.75, 1].forEach(function (t) {
+      var ty = y(maxSteps * t);
+      var lab = svgEl("text", { x: pad.l - 8, y: ty + 3, "text-anchor": "end" });
+      lab.textContent = fmt1(maxSteps * t);
+      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.avg_steps || 0);
+      var r = 6 + Math.min(10, (g.avg_tokens || 0) / 4000);
+      svg.appendChild(svgEl("circle", { cx: cx, cy: cy, r: r, fill: colorFor(g.slug), "fill-opacity": 0.85 }));
+      var label = svgEl("text", { x: cx + r + 4, y: cy + 3 });
+      label.textContent = g.slug;
+      svg.appendChild(label);
+    });
+    host.appendChild(svg);
+  })();
+
   // ---------------------------------------------------------------- per-step line charts
   function lineChart(host, series, valueFn, opts) {
     opts = opts || {};
@@ -444,6 +453,7 @@
   (function () {
     var matrix = DATA.matrix || [];
     var container = document.getElementById("tbl-matrix");
+    if (!container) return;
     if (matrix.length === 0) {
       document.getElementById("section-matrix").style.display = "none";
       return;
@@ -481,6 +491,7 @@
     var fModel = document.getElementById("filter-model");
     var fTask = document.getElementById("filter-task");
     var fOutcome = document.getElementById("filter-outcome");
+    if (!container || !fModel || !fTask || !fOutcome) return;
 
     function uniq(fn) {
       var seen = {}, out = [];

package/src/report.js

@@ -101,7 +101,9 @@ export function buildSummary(runs) {
       solved_rate: rs.length ? solved / rs.length : 0,
       outcomes,
       avg_steps: avg(rs, (r) => r.steps),
+      sum_steps: sum(rs, (r) => r.steps),
       avg_elapsed_seconds: avg(rs, (r) => r.elapsed_seconds),
+      sum_elapsed_seconds: sum(rs, (r) => r.elapsed_seconds),
       avg_tokens: avg(rs, (r) => r.tokens.total),
       sum_tokens: sum(rs, (r) => r.tokens.total),
       tokens: {
@@ -221,7 +223,7 @@ export function renderReportHtml(summary) {
   if (!tpl.includes("/*__ASTRA_DATA__*/")) {
     throw new Error("src/report.html is missing the /*__ASTRA_DATA__*/ injection marker");
   }
-  return tpl.replace("/*__ASTRA_DATA__*/", `window.DATA = ${data};`);
+  return tpl.replace("/*__ASTRA_DATA__*/", `window.__ASTRA_EMBEDDED_DATA__ = ${data};`);
 }
 
 function toRunDoc(run) {