Spaces:

lysandre
/

diffusers-agentic-use-report

Running

File size: 62,529 Bytes

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ag — run report</title>
<script src="plotly.min.js"></script>
<!-- Source Sans 3: Hugging Face's typeface (graceful fallback to the system stack if offline). -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet">
<script>
  // Honor the Hugging Face Space theme (?__theme=light|dark); else the OS theme.
  (function () {
    var p = new URLSearchParams(location.search).get('__theme');
    var dark = p ? p === 'dark' : (window.matchMedia
      && window.matchMedia('(prefers-color-scheme: dark)').matches);
    document.documentElement.classList.add(dark ? 'dark' : 'light');
  })();
</script>
<style>
  /* Light theme (default) — Hugging Face palette: warm off-white surface,
     near-black ink, amber/orange brand accent. */
  :root {
    --bg:#ffffff; --panel:#ffffff; --subtle:#f8f7f4; --line:#ebe9e4;
    --fg:#1b1b18; --dim:#6b7280; --accent:#ff9d00; --accent-fg:#92400e;
    --good:#16a34a; --bad:#dc2626; --warn:#d97706;
    --hover:#f8f7f4; --chip-on:#fff8eb; --code-bg:#f5f4f0; --drill-bg:#faf9f6;
    --brand1:#ffd21e; --brand2:#ff9d00;
    --shadow:0 1px 2px rgba(27,27,24,.05), 0 1px 3px rgba(27,27,24,.04);
  }
  /* Dark theme — explicit (?__theme=dark / .dark) and the OS fallback. */
  :root.dark {
    --bg:#0b0f17; --panel:#161b22; --subtle:#11161f; --line:#2b313b;
    --fg:#e6edf3; --dim:#9aa4b2; --accent:#ffb224; --accent-fg:#ffce6e;
    --good:#3fb950; --bad:#f85149; --warn:#d29922;
    --hover:#1b212b; --chip-on:#2a2113; --code-bg:#1b212b; --drill-bg:#10151d;
    --brand1:#ffd21e; --brand2:#ff9d00;
    --shadow:none;
  }
  @media (prefers-color-scheme: dark) {
    :root:not(.light):not(.dark) {
      --bg:#0b0f17; --panel:#161b22; --subtle:#11161f; --line:#2b313b;
      --fg:#e6edf3; --dim:#9aa4b2; --accent:#ffb224; --accent-fg:#ffce6e;
      --good:#3fb950; --bad:#f85149; --warn:#d29922;
      --hover:#1b212b; --chip-on:#2a2113; --code-bg:#1b212b; --drill-bg:#10151d;
      --brand1:#ffd21e; --brand2:#ff9d00;
      --shadow:none;
    }
  }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--fg);
         font:15px/1.55 "Source Sans 3","Source Sans Pro",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
         -webkit-font-smoothing:antialiased; }
  header, section, footer { max-width:1400px; margin:0 auto; padding:0 24px; }
  header { padding-top:30px; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
  h1 { margin:0 0 6px; font-size:26px; font-weight:700; letter-spacing:-0.01em;
       display:inline-block; }
  #theme-toggle { flex:none; cursor:pointer; border:1px solid var(--line); background:var(--panel);
    color:var(--fg); border-radius:999px; padding:7px 12px; font-size:13px; line-height:1;
    display:inline-flex; align-items:center; gap:6px; box-shadow:var(--shadow); }
  #theme-toggle, #cfg-toggle { flex:none; cursor:pointer; border:1px solid var(--line); background:var(--panel);
    color:var(--fg); border-radius:999px; padding:7px 12px; font-size:13px; line-height:1;
    display:inline-flex; align-items:center; gap:6px; box-shadow:var(--shadow); }
  #theme-toggle:hover, #cfg-toggle:hover { border-color:var(--accent); }
  .hdr-btns { display:flex; gap:8px; align-items:center; flex:none; }
  /* configuration sidebar (opened by the gear) */
  #backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; }
  #sidebar { position:fixed; top:0; left:0; height:100vh; width:340px; max-width:88vw; z-index:50;
    background:var(--panel); border-right:1px solid var(--line); overflow-y:auto;
    box-shadow:0 0 24px rgba(0,0,0,.18); display:flex; flex-direction:column; }
  /* explicit author rules beat the UA [hidden] rule, so re-assert it */
  #sidebar[hidden], #backdrop[hidden] { display:none; }
  .side-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px;
    border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); }
  .side-head b { font-size:15px; }
  .side-close { cursor:pointer; border:0; background:none; color:var(--dim); font-size:18px; line-height:1; }
  .side-close:hover { color:var(--fg); }
  .side-body { padding:16px; display:flex; flex-direction:column; gap:18px; }
  .side-grp > label { display:block; color:var(--dim); font-size:12px; margin-bottom:6px; font-weight:600; }
  .side-grp .chips { max-width:none; }
  .btn { cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--fg);
         border-radius:8px; padding:6px 12px; font-size:13px; }
  .btn:hover { border-color:var(--accent); }
  .chk { display:inline-flex; align-items:center; gap:5px; cursor:pointer; color:var(--fg); font-size:13px; }
  .chk input { accent-color:var(--accent); }
  /* top-level tabs */
  #tabs { display:flex; gap:2px; max-width:1400px; margin:22px auto 0; padding:0 24px;
          border-bottom:1px solid var(--line); }
  .tab { background:none; border:0; border-bottom:2px solid transparent; color:var(--dim);
         cursor:pointer; font-weight:600; font-size:14px; padding:10px 16px; margin-bottom:-1px; }
  .tab:hover { color:var(--fg); }
  .tab.active { color:var(--fg); border-bottom-color:var(--accent); }
  .pane > section:first-of-type h2 { margin-top:20px; }
  /* HF brand underline accent under the title */
  h1::after { content:""; display:block; height:3px; margin-top:6px; border-radius:3px;
              background:linear-gradient(90deg,var(--brand1),var(--brand2)); }
  h2 { font-size:16px; font-weight:600; border-bottom:1px solid var(--line); padding-bottom:6px; margin:28px 0 12px; }
  .dim { color:var(--dim); }
  .panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
  #rev-list { display:flex; flex-wrap:wrap; gap:10px; }
  .rev { padding:10px 14px; min-width:140px; cursor:pointer; user-select:none; }
  .rev:hover { border-color:var(--accent); }
  .rev.on { border-color:var(--accent); }
  .rev.off { opacity:0.45; }
  .rev .nm { font-weight:600; }
  /* Tasks accordion: one task expanded, the rest folded to one-line headers. */
  #task-list { display:flex; flex-direction:column; gap:8px; }
  .task { padding:0; overflow:hidden; }
  .task-head { display:flex; align-items:center; gap:8px; cursor:pointer; padding:11px 14px; }
  .task-head:hover { background:var(--hover); }
  .task-head .caret { color:var(--dim); width:1em; flex:none; }
  .task-head b { font-size:14px; }
  .task-sum { margin-left:auto; font-size:12px; white-space:nowrap; }
  .task-body { padding:2px 14px 14px; }
  .task-prompt { white-space:pre-wrap; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12.5px; line-height:1.5; background:var(--code-bg); color:var(--fg);
    border-radius:8px; padding:10px 12px; margin:0 0 8px; overflow:auto; max-height:200px; }
  .task-match { font-size:13px; }
  .task-match .pill { color:var(--accent-fg); border-color:var(--accent); background:var(--chip-on); font-weight:600; }
  .task-media { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 10px; }
  .task-media img { max-height:72px; max-width:130px; border-radius:6px; border:1px solid var(--line); object-fit:cover; }
  .task-media audio { height:34px; max-width:260px; }
  .answers { width:100%; border-collapse:collapse; font-size:13px; margin-top:6px; max-width:760px; }
  .answers td { padding:5px 8px; border-top:1px solid var(--line); vertical-align:top; }
  .ans-row { cursor:pointer; } .ans-row:hover { background:var(--hover); }
  .answers .m { white-space:nowrap; }
  .answers .v { white-space:nowrap; font-variant-numeric:tabular-nums; }
  .answers .a { color:var(--dim); white-space:nowrap; }
  .ans-ok { color:var(--good); } .ans-bad { color:var(--bad); } .ans-mid { color:var(--warn); }
  .task .final { white-space:pre-wrap; }
  .ad-h { font-size:12px; font-weight:600; margin:8px 0 4px; }
  .ad-n { color:var(--dim); font-variant-numeric:tabular-nums; margin-right:6px; }
  .badge { font-size:11px; padding:1px 8px; border-radius:999px; border:1px solid var(--line); margin-left:6px; font-weight:600; }
  .badge.tag { color:var(--good); border-color:var(--good); }
  #filters { display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; margin-top:10px; }
  #filters label { display:block; color:var(--dim); font-size:12px; margin-bottom:4px; }
  select { background:var(--panel); color:var(--fg); border:1px solid var(--line);
           border-radius:8px; padding:6px 10px; font-size:13px; }
  select:hover { border-color:var(--accent); }
  .chips { display:flex; flex-wrap:wrap; gap:6px; max-width:560px; }
  .chip { font-size:12px; padding:3px 10px; border:1px solid var(--line); border-radius:999px;
          cursor:pointer; user-select:none; color:var(--dim); background:var(--panel); }
  .chip.on { color:var(--accent-fg); border-color:var(--accent); background:var(--chip-on); font-weight:600; }
  .plot { height:340px; }
  .chartlegend { display:flex; flex-wrap:wrap; gap:16px; }
  .chartlegend .it { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); }
  .chartlegend .sw { width:12px; height:12px; border-radius:3px; display:inline-block; }
  .grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .grid .plot { height:300px; }
  @media (max-width:760px) { .grid { grid-template-columns:1fr; } }
  table { width:100%; border-collapse:collapse; font-size:13px; }
  th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
  th { color:var(--dim); font-weight:600; }
  tr.cell { cursor:pointer; } tr.cell:hover { background:var(--hover); }
  tr.grp { cursor:pointer; background:var(--subtle); }
  tr.grp:hover { background:var(--hover); }
  tr.grp td { color:var(--fg); font-weight:600; }
  .caret { color:var(--dim); display:inline-block; width:1em; }
  td.num { text-align:right; font-variant-numeric:tabular-nums; }
  .pill { font-size:11px; padding:1px 8px; border-radius:999px; border:1px solid var(--line); margin-right:4px; }
  .ok { color:var(--good); } .bad { color:var(--bad); } .warn { color:var(--warn); }
  .drill { background:var(--drill-bg); border:1px solid var(--line); border-radius:8px; margin:6px 0 14px; padding:10px 14px; }
  .step { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--dim); }
  .step .err { color:var(--bad); }
  .final { margin-top:6px; padding-left:10px; border-left:2px solid var(--accent); }
  code { background:var(--code-bg); padding:1px 5px; border-radius:4px; font-size:12px; }
  footer { color:var(--dim); padding:30px 20px 50px; font-size:12px; border-top:1px solid var(--line); margin-top:30px; }
</style>
</head>
<body>
<header>
  <div>
    <h1 id="title">run report</h1>
    <div id="meta" class="dim"></div>
  </div>
  <div class="hdr-btns">
    <button id="cfg-toggle" title="Configuration" aria-label="Configuration">⚙ Configure</button>
    <button id="theme-toggle" title="Toggle light / dark" aria-label="Toggle light / dark theme"></button>
  </div>
</header>

<aside id="sidebar" hidden>
  <div class="side-head"><b>⚙ Configuration</b><button id="cfg-close" class="side-close" aria-label="Close">✕</button></div>
  <div class="side-body">
    <div class="side-grp"><label>Models</label><div id="f-ns" class="chips"></div></div>
    <div class="side-grp"><label>Tiers — how much help the agent gets</label><div id="f-tiers" class="chips"></div></div>
    <div class="side-grp"><label>Tasks</label><div id="f-tasks" class="chips"></div></div>
    <div class="side-grp"><label>Fair comparison — shared tasks only</label>
      <label class="chk"><input type="checkbox" id="f-shared-models"> across models</label>
      <label class="chk" style="margin-left:14px"><input type="checkbox" id="f-shared-revs"> across revisions</label>
      <div id="scope-note" class="dim" style="font-size:12px;margin-top:8px"></div>
    </div>
  </div>
</aside>
<div id="backdrop" hidden></div>

<section>
  <h2>Revisions <span class="dim">— click a commit to include / exclude it everywhere · oldest → newest</span></h2>
  <div id="rev-list"></div>
</section>

<nav id="tabs">
  <button class="tab active" data-tab="overview">Overview</button>
  <button class="tab" data-tab="coverage">Coverage</button>
  <button class="tab" data-tab="results">Results</button>
</nav>

<div id="tab-overview" class="pane">
  <section>
    <h2>Overview</h2>
    <div id="filters">
      <div><label>X axis</label><select id="f-x"></select></div>
      <div><label>Series (one line per)</label><select id="f-series"></select></div>
      <div><label>Chart</label><select id="f-chart">
        <option value="line">lines</option><option value="bar">bars</option></select></div>
    </div>
    <div id="ov-legend" class="chartlegend" style="margin-top:12px"></div>
    <div id="ov-grid" class="grid" style="margin-top:8px">
      <div id="ov-match" class="plot"></div>
      <div id="ov-time" class="plot"></div>
      <div id="ov-newtok" class="plot"></div>
      <div id="ov-err" class="plot"></div>
    </div>
  </section>

  <section id="markers-section">
    <h2>Label adoption</h2>
    <div id="filters">
      <div><label>Marker</label><select id="f-metric"></select></div>
    </div>
    <div id="marker-desc" class="dim" style="font-size:13px;margin-top:8px"></div>
    <div id="chart" class="plot" style="margin-top:10px"></div>
  </section>

  <section>
    <h2>Distributions <span class="dim">box = median + quartiles, dashed line = mean (hover a point for model/tier/task/run)</span></h2>
    <div id="filters" style="margin-bottom:6px">
      <div><label>Model</label><select id="f-dist-model"></select></div>
      <div><label>Boxes by</label><select id="f-dist">
        <option value="revision">revision</option>
        <option value="model">model (per revision)</option></select></div>
      <div><label>Points</label><select id="f-dist-points">
        <option value="none">none (clean boxes)</option>
        <option value="outliers">outliers only</option>
        <option value="all">every run</option></select></div>
      <div><label>Scale</label><select id="f-dist-scale">
        <option value="log">logarithmic</option>
        <option value="linear">linear</option>
        <option value="linear-clip">linear (clip outliers)</option></select></div>
    </div>
    <div id="dist-hint" class="dim" style="font-size:12px;margin-bottom:8px"></div>
    <div id="dist-legend" class="chartlegend" style="margin-bottom:8px"></div>
    <div class="grid">
      <div id="dist-time" class="plot"></div>
      <div id="dist-new" class="plot"></div>
      <div id="dist-rep" class="plot"></div>
      <div id="dist-out" class="plot"></div>
    </div>
  </section>
</div>

<div id="tab-coverage" class="pane" hidden>
  <section>
    <h2>Coverage <span class="dim">— % of expected runs done per task × revision (hover for counts) · click a cell for the per-model breakdown (⚙ to pick models)</span></h2>
    <div id="cov-heatmap" style="margin-top:10px"></div>
    <div id="cov-detail" style="margin-top:12px"></div>
  </section>
</div>

<div id="tab-results" class="pane" hidden>

  <section>
    <h2>Tasks <span class="dim">— click a task to expand it: what it asks, how a match is scored, and what each model answered</span></h2>
    <div id="task-list"></div>
  </section>

  <section>
    <h2>Run results <span id="results-hint" class="dim"></span></h2>
    <div id="filters" style="margin-bottom:10px">
      <div><label>Group by</label><select id="f-group">
        <option value="model">model</option>
        <option value="task">task</option>
        <option value="both">model &amp; task</option>
      </select></div>
    </div>
    <div id="table"></div>
  </section>
</div>

<footer id="foot"></footer>

<script src="data.js"></script>
<script>
"use strict";
const DATA = window.__AG_DATA__ || {};
const REVS = DATA.revisions || [];
const RUNS = DATA.runs || [];
const MARKER_NAMES = DATA.marker_names || [];
const MARKER_DESC = DATA.marker_desc || {};

// Plotly colors follow the active (light/dark) theme — read from CSS variables.
function themeColors() {
  const cs = getComputedStyle(document.documentElement);
  const v = (n, d) => (cs.getPropertyValue(n).trim() || d);
  return { fg: v('--fg', '#1f2937'), grid: v('--line', '#e5e7eb') };
}

const esc = s => String(s ?? '').replace(/[&<>"']/g, c =>
  ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const pct = (k, n) => n ? Math.round(1000 * k / n) / 10 : null;
function median(xs) {
  if (!xs.length) return null;
  const s = [...xs].sort((a, b) => a - b), n = s.length;
  return n % 2 ? s[(n - 1) / 2] : (s[n / 2 - 1] + s[n / 2]) / 2;
}

// revision display names (disambiguate duplicate names by short sha)
const revBySha = Object.fromEntries(REVS.map(c => [c.sha, c]));
const baseName = c => c.name || c.ref || c.sha;
const NAME_COUNT = {};
REVS.forEach(c => { const n = baseName(c); NAME_COUNT[n] = (NAME_COUNT[n] || 0) + 1; });
const dispName = c => NAME_COUNT[baseName(c)] > 1 ? `${baseName(c)} (${c.sha.slice(0,7)})` : baseName(c);
const revOrder = REVS.map(c => c.sha);  // already date-sorted by the generator

// tiers / tasks / namespaces present
const TIER_RANK = { bare:0, clone:1, skill:2 };
const TIERS = [...new Set(RUNS.map(r => r.tier))]
  .sort((a, b) => (TIER_RANK[a] ?? 9) - (TIER_RANK[b] ?? 9) || a.localeCompare(b));
const TIER_COLOR = { bare:'#8a8a9a', clone:'#6366f1', skill:'#22c55e' };
const PALETTE = ['#8a8a9a','#6366f1','#22c55e','#e8590c','#9333ea','#0891b2'];
const colorForTier = t => TIER_COLOR[t] || PALETTE[TIERS.indexOf(t) % PALETTE.length];
const TASKS = [...new Set(RUNS.map(r => r.task))].sort();
// Parameter count (in billions) used to order models by size. Prefer the exact
// count resolved from the Hub at generate time (DATA.model_params, in params);
// otherwise parse the largest "<n>B" token out of the model id — for MoE ids
// like "…-550B-A55B" that's the total (550B), not the active experts (55B).
// Returns null when neither is available (sorted last, alphabetically).
const MODEL_PARAMS = DATA.model_params || {};
function paramB(ns) {
  if (MODEL_PARAMS[ns] != null) return MODEL_PARAMS[ns] / 1e9;
  const id = (ns.split('/').pop() || ns);
  const hits = [...id.matchAll(/(\d+(?:\.\d+)?)\s*[bB]\b/g)].map(m => parseFloat(m[1]));
  return hits.length ? Math.max(...hits) : null;
}
const NSS = ((DATA.namespaces && DATA.namespaces.length)
             ? DATA.namespaces : [...new Set(RUNS.map(r => r.ns))]).slice()
  .sort((a, b) => {
    const pa = paramB(a), pb = paramB(b);
    if (pa === null && pb === null) return a.localeCompare(b);
    if (pa === null) return 1;     // unknown size → last
    if (pb === null) return -1;
    return pa - pb || a.localeCompare(b);
  });
const REV_PALETTE = ['#6366f1','#e8590c','#22c55e','#9333ea','#0891b2','#be185d','#a16207','#64748b'];
const REV_COLOR = Object.fromEntries(REVS.map((c, i) => [c.sha, REV_PALETTE[i % REV_PALETTE.length]]));
const revColor = sha => REV_COLOR[sha] || '#6366f1';

// metrics (generic over the profile's markers)
const METRICS = [];
MARKER_NAMES.forEach(m => METRICS.push({
  key: 'mk:' + m, label: '🏷 ' + m + ' adoption %',
  fn: rs => pct(rs.filter(r => (r.markers || []).includes(m)).length, rs.length),
}));
METRICS.push({ key:'match', label:'match %',
  fn: rs => { const seen = rs.filter(r => r.matched !== null);
              return pct(seen.filter(r => r.matched).length, seen.length); } });
// A run "errored" only if it ended badly (bad status / nonzero exit) — NOT if an
// intermediate tool call failed and the agent recovered (those are tracked
// separately as per-run "tool errors"; a warning on stderr is not a failure).
const runErrored = r => r.exit !== 0 || (r.status && r.status !== 'ok');
METRICS.push({ key:'err', label:'runs with error %',
  fn: rs => pct(rs.filter(runErrored).length, rs.length) });
METRICS.push({ key:'time', label:'median time (s)',
  fn: rs => { const v = median(rs.map(r => r.elapsed)); return v === null ? null : Math.round(v * 10) / 10; } });
METRICS.push({ key:'newtok', label:'median new tokens',
  fn: rs => median(rs.map(r => (r.tok || {}).new || 0)) });
const metricByKey = Object.fromEntries(METRICS.map(m => [m.key, m]));

// the four headline metrics get their own always-on charts up top; the
// configurable chart below then lets you pick among the remaining ones — the
// profile's labels (markers). Falls back to the leftover metrics if a profile
// declares no markers.
const OVERVIEW_KEYS = ['match', 'time', 'newtok', 'err'];
const CHOICE_METRICS = METRICS.filter(m => m.key.startsWith('mk:'));
const CHOICE = CHOICE_METRICS.length ? CHOICE_METRICS : METRICS.filter(m => !OVERVIEW_KEYS.includes(m.key));

// namespace (model) colors, for when "model" is the series dimension
const NS_PALETTE = ['#6366f1','#e8590c','#22c55e','#9333ea','#0891b2','#be185d','#a16207','#64748b'];
const NS_COLOR = Object.fromEntries(NSS.map((n, i) => [n, NS_PALETTE[i % NS_PALETTE.length]]));

// compact model label for legends/tooltips: drop the "<harness>/" prefix, the
// "<org>--" prefix, and any ":provider" routing suffix
// (e.g. "pi/Qwen--Qwen2.5-7B-Instruct:together" → "Qwen2.5-7B-Instruct").
const shortModel = ns => (ns.split('/').pop() || ns).split(':')[0].replace(/^.*?--/, '');
// even shorter for crowded axis ticks (truncate long names; legend keeps full)
const modelTick = ns => { const t = shortModel(ns); return t.length > 22 ? t.slice(0, 21) + '…' : t; };

// the three pivot dimensions — any can be the X axis or the per-line series
const DIMS = {
  revision: { label:'revision', values: revOrder, val: r => r.sha,
              tick: sha => dispName(revBySha[sha]), color: sha => revColor(sha) },
  model:    { label:'model',    values: NSS,      val: r => r.ns,
              tick: ns => shortModel(ns), color: ns => NS_COLOR[ns] || '#6366f1' },
  tier:     { label:'tier',     values: TIERS,    val: r => r.tier,
              tick: t => t, color: t => colorForTier(t) },
};

const state = {
  nss: new Set(NSS), tiers: new Set(TIERS), tasks: new Set(TASKS), revs: new Set(REVS.map(c => c.sha)),
  metric: (CHOICE[0] || METRICS[0]).key, xdim: 'revision', series: 'tier',
  chart: 'line', group: 'model', distSplit: 'revision', distModel: '', distScale: 'log',
  distPoints: 'none', sharedModels: false, sharedRevisions: false,
};

// header
document.getElementById('title').textContent = `🤗 ${DATA.profile || 'ag'} — run report`;
document.getElementById('meta').innerHTML =
  `${RUNS.length} runs · ${REVS.length} revisions · ${NSS.length} namespaces · ` +
  `generated ${esc(DATA.generated_at || '')}` + (DATA.bucket ? ` · bucket <code>${esc(DATA.bucket)}</code>` : '');

// the Revisions strip (top, oldest → newest by commit date) doubles as a global
// toggle: click a card to include/exclude that commit from every pane.
function renderRevList() {
  const host = document.getElementById('rev-list');
  host.innerHTML = REVS.map(c => {
    const on = state.revs.has(c.sha);
    const badge = c.kind === 'tag' ? '<span class="badge tag">release</span>' : '';
    const n = RUNS.filter(r => r.sha === c.sha).length;
    return `<div class="rev panel ${on ? 'on' : 'off'}" data-sha="${esc(c.sha)}" title="click to toggle">
      <div class="nm">${esc(dispName(c))}${badge}</div>
      <div class="dim" style="font-size:12px;margin-top:3px">${n} runs</div></div>`;
  }).join('') || '<div class="dim">no revisions</div>';
  host.querySelectorAll('.rev').forEach(el => el.addEventListener('click', () => {
    const sha = el.dataset.sha;
    state.revs.has(sha) ? state.revs.delete(sha) : state.revs.add(sha);
    el.classList.toggle('on'); el.classList.toggle('off');
    applyConfig();
  }));
}
renderRevList();

// tasks: show exactly what each run asks for + how a match is scored
const TASK_META = Object.fromEntries((DATA.tasks || []).map(t => [t.id, t]));
function matchDesc(t) {
  const m = t.match || 'substring';
  const e = esc(String(t.expected));
  if (t.expected === null || t.expected === undefined || t.expected === '')
    return 'Open-ended — not auto-scored for correctness (compared via markers, tokens & time only).';
  if (m === 'substring') return `Match when the final answer contains “${e}” (case-insensitive).`;
  if (m === 'exact')     return `Match when the final answer equals “${e}”.`;
  if (m === 'regex')     return `Match when the final answer matches the pattern /${e}/i.`;
  if (m === 'judge')     return `Judged against “${e}”.`;
  return `Match (${esc(m)}): “${e}”.`;
}
const INPUTS = DATA.inputs || {};
function mediaHTML(t) {
  const items = (t.media || []).map(fn => {
    const m = INPUTS[fn];
    if (!m) return '';
    if (m.kind === 'image') return `<img src="${m.uri}" alt="${esc(fn)}" title="${esc(fn)}">`;
    if (m.kind === 'audio') return `<audio controls preload="none" src="${m.uri}" title="${esc(fn)}"></audio>`;
    return '';
  }).filter(Boolean).join('');
  return items ? `<div class="task-media">${items}</div>` : '';
}
// runs included in the Tasks/Results panes (honors the global config)
const cfgScope = r => state.nss.has(r.ns) && state.tiers.has(r.tier) && state.revs.has(r.sha);
// one-line summary for a folded task header: how many models match
function taskSummary(id) {
  const rs = RUNS.filter(r => r.task === id && cfgScope(r));
  const models = NSS.filter(ns => state.nss.has(ns) && rs.some(r => r.ns === ns));
  let scored = 0, matched = 0;
  models.forEach(ns => {
    const seen = rs.filter(r => r.ns === ns && r.matched !== null);
    if (seen.length) { scored++; if (seen.every(r => r.matched)) matched++; }
  });
  const tag = scored
    ? `<span class="ans-${matched === scored ? 'ok' : matched === 0 ? 'bad' : 'mid'}">✓ ${matched}/${scored} models match</span>`
    : `<span class="dim">open-ended</span>`;
  return `${tag} <span class="dim">· ${models.length} model(s)</span>`;
}
// group runs by their (truncated) final answer, most frequent first
function groupFinals(runs, cap) {
  const g = new Map();
  runs.forEach(r => { const f = (r.final || '').trim() || '(no answer text)'; g.set(f, (g.get(f) || 0) + 1); });
  const entries = [...g.entries()].sort((a, b) => b[1] - a[1]);
  const shown = entries.slice(0, cap).map(([f, n]) =>
    `<div class="final"><span class="ad-n">${n}×</span>${esc(f)}</div>`).join('');
  const extra = entries.length > cap ? `<div class="dim" style="font-size:12px">+ ${entries.length - cap} more distinct answer(s)</div>` : '';
  return shown + extra;
}
// the expandable breakdown for one model: failures first (what went wrong),
// no-answer/errored runs, then a matched example
function answerDetail(mr) {
  const fail = mr.filter(r => r.matched === false);
  const none = mr.filter(r => r.matched === null);   // scored task but no comparable answer (errored/empty)
  const ok = mr.filter(r => r.matched === true);
  const out = [];
  if (fail.length) {
    out.push(`<div class="ad-h bad">✗ didn't match (${fail.length}) — what they answered instead</div>`);
    out.push(groupFinals(fail, 8));
  }
  if (none.length) {
    const byStatus = {};
    none.forEach(r => { const s = r.status || '?'; byStatus[s] = (byStatus[s] || 0) + 1; });
    const summary = Object.entries(byStatus).map(([s, n]) => `${n}× ${esc(s)}`).join(', ');
    out.push(`<div class="ad-h warn">⚠ no scored answer (${none.length}): ${summary}</div>`);
    const withText = none.filter(r => (r.final || '').trim());
    if (withText.length) out.push(groupFinals(withText, 4));
  }
  if (ok.length) {
    out.push(`<div class="ad-h ok">✓ matched (${ok.length}) — example</div>`);
    out.push(`<div class="final">${esc(((ok.find(r => r.final) || {}).final || '(no text)'))}</div>`);
  }
  return out.join('') || '<div class="dim">no runs</div>';
}
// per-task: one row per model — matched / failed / no-answer at a glance,
// click to see the failing (and matched) responses
function answersHTML(id) {
  const rs = RUNS.filter(r => r.task === id && cfgScope(r));
  if (!rs.length) return '';
  const rows = NSS.filter(ns => state.nss.has(ns) && rs.some(r => r.ns === ns)).map(ns => {
    const mr = rs.filter(r => r.ns === ns);
    const ok = mr.filter(r => r.matched === true).length;
    const fail = mr.filter(r => r.matched === false).length;
    const none = mr.filter(r => r.matched === null).length;
    const scored = ok + fail;
    let tally;
    if (scored) {
      tally = `<span class="ans-ok">✓ ${ok}</span>`
            + (fail ? ` · <span class="ans-bad">✗ ${fail}</span>` : '')
            + (none ? ` · <span class="ans-mid">⚠ ${none}</span>` : '');
    } else {
      tally = `<span class="dim">${none} run(s), open-ended</span>`;
    }
    const key = `ans_${id}_${ns}`.replace(/[^\w]/g, '_');
    return `<tr class="ans-row" data-k="${key}">
        <td class="m">${esc(shortModel(ns))}</td>
        <td class="v">${tally}</td>
        <td class="a">${fail ? 'show failures ▸' : 'show responses ▸'}</td></tr>
      <tr id="${key}" class="ans-detail" style="display:none"><td colspan="3">${answerDetail(mr)}</td></tr>`;
  }).join('');
  return `<div class="dim" style="font-size:11px;margin-top:12px">model answers <span class="dim">— click a model to see failing &amp; matched responses</span></div>
          <table class="answers">${rows}</table>`;
}
let openTask = TASKS[0] || null;
function renderTasks() {
  const host = document.getElementById('task-list');
  const ids = TASKS.filter(id => state.tasks.has(id));
  if (!ids.includes(openTask)) openTask = ids[0] || null;
  host.innerHTML = ids.map(id => {
    const t = TASK_META[id] || { id };
    const open = id === openTask;
    const cat = t.category ? `<span class="badge">${esc(t.category)}</span>` : '';
    const scored = !(t.expected === null || t.expected === undefined || t.expected === '');
    const tag = scored ? `<span class="pill">expected: ${esc(String(t.expected))}</span>`
                       : `<span class="pill">open-ended</span>`;
    const prompt = (t.prompt || '').trim();
    const body = `<div class="task-body"${open ? '' : ' hidden'}>
      ${mediaHTML(t)}
      ${prompt ? `<pre class="task-prompt">${esc(prompt)}</pre>` : ''}
      <div class="task-match">${tag} <span class="dim">${matchDesc(t)}</span></div>
      ${answersHTML(id)}
    </div>`;
    return `<div class="task panel">
      <div class="task-head" data-id="${esc(id)}">
        <span class="caret">${open ? '▾' : '▸'}</span><b>${esc(id)}</b> ${cat}
        <span class="task-sum">${taskSummary(id)}</span>
      </div>${body}</div>`;
  }).join('') || '<div class="dim">no tasks in this report</div>';

  host.querySelectorAll('.task-head').forEach(h => h.addEventListener('click', () => {
    openTask = (openTask === h.dataset.id) ? null : h.dataset.id;  // single-open; click again to fold
    renderTasks();
  }));
  host.querySelectorAll('.ans-row').forEach(r => r.addEventListener('click', () => {
    const d = document.getElementById(r.dataset.k);
    if (d) d.style.display = d.style.display === 'none' ? '' : 'none';
  }));
}

// filters
const mSel = document.getElementById('f-metric');
if (CHOICE.length) {
  mSel.innerHTML = CHOICE.map(m => `<option value="${esc(m.key)}">${esc(m.label)}</option>`).join('');
  mSel.value = state.metric;
  mSel.addEventListener('change', () => { state.metric = mSel.value; renderChart(); });
} else {
  document.getElementById('markers-section').style.display = 'none';
}

const dimOpts = Object.entries(DIMS).map(([k, d]) => `<option value="${k}">${esc(d.label)}</option>`).join('');
const xSel = document.getElementById('f-x');
const sSel = document.getElementById('f-series');
xSel.innerHTML = dimOpts; xSel.value = state.xdim;
sSel.innerHTML = dimOpts; sSel.value = state.series;
// X and series must differ — bump the other one when they'd collide
function syncDims(changed) {
  if (state.xdim !== state.series) return;
  const other = Object.keys(DIMS).find(k => k !== state.xdim);
  if (changed === 'x') { state.series = other; sSel.value = other; }
  else { state.xdim = other; xSel.value = other; }
}
xSel.addEventListener('change', () => { state.xdim = xSel.value; syncDims('x'); renderViz(); });
sSel.addEventListener('change', () => { state.series = sSel.value; syncDims('series'); renderViz(); });

const cSel = document.getElementById('f-chart');
cSel.value = state.chart;
cSel.addEventListener('change', () => { state.chart = cSel.value; renderViz(); });

const gSel = document.getElementById('f-group');
gSel.value = state.group;
gSel.addEventListener('change', () => { state.group = gSel.value; renderTable(); });

const smChk = document.getElementById('f-shared-models');
smChk.checked = state.sharedModels;
smChk.addEventListener('change', () => { state.sharedModels = smChk.checked; applyConfig(); });
const srChk = document.getElementById('f-shared-revs');
srChk.checked = state.sharedRevisions;
srChk.addEventListener('change', () => { state.sharedRevisions = srChk.checked; applyConfig(); });

const dSel = document.getElementById('f-dist');
dSel.value = state.distSplit;
dSel.addEventListener('change', () => { state.distSplit = dSel.value; renderDistributions(); });

const dmSel = document.getElementById('f-dist-model');
dmSel.innerHTML = `<option value="">all models</option>` +
  NSS.map(ns => `<option value="${esc(ns)}">${esc(shortModel(ns))}</option>`).join('');
dmSel.value = state.distModel;
dmSel.addEventListener('change', () => { state.distModel = dmSel.value; renderDistributions(); });

const dscSel = document.getElementById('f-dist-scale');
dscSel.value = state.distScale;
dscSel.addEventListener('change', () => { state.distScale = dscSel.value; renderDistributions(); });

const dpSel = document.getElementById('f-dist-points');
dpSel.value = state.distPoints;
dpSel.addEventListener('change', () => { state.distPoints = dpSel.value; renderDistributions(); });

// multi-select chip groups (toggle freely; empty = nothing in scope)
function chipGroup(elId, keys, set, onchange, labelFn) {
  const el = document.getElementById(elId);
  keys.forEach(k => {
    const chip = document.createElement('span');
    chip.className = set.has(k) ? 'chip on' : 'chip';
    chip.textContent = labelFn ? labelFn(k) : k;
    chip.addEventListener('click', () => {
      if (set.has(k)) { set.delete(k); chip.classList.remove('on'); }
      else { set.add(k); chip.classList.add('on'); }
      onchange();
    });
    el.appendChild(chip);
  });
}
// One global configuration (the sidebar) drives every pane.
function applyConfig() { renderAll(); renderCoverage(); }
chipGroup('f-ns', NSS, state.nss, applyConfig, shortModel);
chipGroup('f-tiers', TIERS, state.tiers, applyConfig);
chipGroup('f-tasks', TASKS, state.tasks, applyConfig);

let covOpen = false;  // Coverage heatmap renders when its tab is first shown

// Effective task set for the aggregate views. The two "shared" toggles restrict
// to tasks with even coverage so metrics aren't biased (e.g. a model that only
// ran the quick tasks, or a revision where only the fast batch finished):
//   • across models    — keep only tasks EVERY selected model ran
//   • across revisions  — keep only tasks present on EVERY revision in scope
// Both on ≈ "shared by all models and revisions". `scopeTasks` is refreshed on
// any selection / toggle change (refreshScope, called at the top of renderAll).
let scopeTasks = new Set(state.tasks);
function computeScopeTasks() {
  let common = new Set(state.tasks);
  const tierOk = r => state.tiers.has(r.tier);
  if (state.sharedModels) {
    for (const ns of NSS.filter(n => state.nss.has(n))) {
      const ran = new Set(RUNS.filter(r => r.ns === ns && tierOk(r)).map(r => r.task));
      common = new Set([...common].filter(t => ran.has(t)));
    }
  }
  if (state.sharedRevisions) {
    const scoped = RUNS.filter(r => state.nss.has(r.ns) && tierOk(r) && state.revs.has(r.sha));
    for (const sha of new Set(scoped.map(r => r.sha))) {
      const ran = new Set(scoped.filter(r => r.sha === sha).map(r => r.task));
      common = new Set([...common].filter(t => ran.has(t)));
    }
  }
  return common;
}
function refreshScope() {
  scopeTasks = computeScopeTasks();
  const note = document.getElementById('scope-note');
  const modes = [];
  if (state.sharedModels) modes.push('all selected models');
  if (state.sharedRevisions) modes.push('all revisions');
  if (modes.length) {
    const dropped = [...state.tasks].filter(t => !scopeTasks.has(t)).length;
    note.textContent = `Comparing ${scopeTasks.size} task(s) shared by ${modes.join(' and ')}`
      + (dropped ? ` · ${dropped} task(s) excluded for uneven coverage` : '');
  } else {
    note.textContent = '';
  }
}
const inScope = r => state.nss.has(r.ns) && state.tiers.has(r.tier)
  && state.revs.has(r.sha) && scopeTasks.has(r.task);

// a pivot — metric over the chosen X dimension, one line/bar per series value.
// Used both by the headline overview charts and the configurable marker chart.
function pivotTraces(m) {
  const xd = DIMS[state.xdim], sd = DIMS[state.series];
  const rs = RUNS.filter(inScope);
  const xPresent = new Set(rs.map(xd.val));
  const xvals = xd.values.filter(v => xPresent.has(v));
  const xtick = state.xdim === 'model' ? modelTick : xd.tick;  // truncate long model names on the axis
  const x = xvals.map(xtick);
  const sPresent = new Set(rs.map(sd.val));
  const svals = sd.values.filter(v => sPresent.has(v));
  const isLine = state.chart === 'line';
  return svals.map(sv => {
    const y = xvals.map(xv => m.fn(rs.filter(r => xd.val(r) === xv && sd.val(r) === sv)));
    const color = sd.color(sv), name = sd.tick(sv);
    return isLine
      ? { type: 'scatter', mode: 'lines+markers', name, x, y,
          line: { color, width: 2 }, marker: { color, size: 7 }, connectgaps: true }
      : { type: 'bar', name, x, y, marker: { color } };
  });
}
// values of the current X dimension actually present in scope, and of the series
function presentVals(dim) {
  const d = DIMS[dim], present = new Set(RUNS.filter(inScope).map(d.val));
  return d.values.filter(v => present.has(v));
}
function chartInto(divId, m, { mini = false, legend = true } = {}) {
  // many categories → angle the ticks (labels truncated to ≤22 chars upstream).
  // automargin lets Plotly grow the L/B margins to fully fit the angled labels so
  // the leftmost one isn't clipped; height is fixed, so this only shrinks the plot
  // area, it can't blow the chart height open. The b floor keeps short-label charts
  // from hugging the axis.
  const longX = presentVals(state.xdim).length > 5;
  const baseB = mini ? 64 : 70;
  const T = themeColors();
  const layout = {
    barmode: 'group', height: mini ? 300 : 360,
    margin: { l: mini ? 46 : 50, r: mini ? 8 : 10, t: mini ? 28 : 10, b: longX ? 120 : baseB },
    paper_bgcolor: 'rgba(0,0,0,0)', plot_bgcolor: 'rgba(0,0,0,0)',
    font: { color: T.fg }, showlegend: legend,
    legend: { orientation: 'h', y: mini ? -0.3 : 1.15, font: { size: 11 } },
    yaxis: { title: mini ? '' : m.label, gridcolor: T.grid, zeroline: false, rangemode: 'tozero' },
    xaxis: { gridcolor: T.grid, automargin: true, tickangle: longX ? -35 : 0 },
  };
  if (mini) layout.title = { text: m.label, font: { size: 13 }, x: 0, xanchor: 'left' };
  Plotly.react(divId, pivotTraces(m), layout, { displayModeBar: false, responsive: true });
}
// a shared HTML swatch legend (avoids four overlapping in-plot legends)
function legendHTML(dim) {
  const d = DIMS[dim];
  return presentVals(dim).map(v =>
    `<span class="it"><span class="sw" style="background:${d.color(v)}"></span>${esc(d.tick(v))}</span>`
  ).join('');
}
// headline charts share one series + one legend; widen to full width when the
// X axis has many categories (e.g. all models) so long labels stop colliding.
function renderOverview() {
  document.getElementById('ov-legend').innerHTML = legendHTML(state.series);
  const wide = presentVals(state.xdim).length > 5;
  document.getElementById('ov-grid').style.gridTemplateColumns = wide ? '1fr' : '1fr 1fr';
  OVERVIEW_KEYS.forEach(k => chartInto('ov-' + k, metricByKey[k], { mini: true, legend: false }));
}
function renderChart() {
  if (!CHOICE.length) return;
  // show the profile's one-line explanation of the selected marker
  const name = state.metric.startsWith('mk:') ? state.metric.slice(3) : '';
  document.getElementById('marker-desc').textContent = MARKER_DESC[name] || '';
  chartInto('chart', metricByKey[state.metric]);
}

// results table (revision × tier × task), click a row to drill into its runs
function cellRuns(ns, sha, tier, task) {
  return RUNS.filter(r => r.ns === ns && r.sha === sha && r.tier === tier && r.task === task);
}
function markerSummary(rs) {
  return MARKER_NAMES.map(m => {
    const k = rs.filter(r => (r.markers || []).includes(m)).length;
    return k ? `<span class="pill">${esc(m)} ${k}/${rs.length}</span>` : '';
  }).join('');
}
function drill(rs) {
  return rs.slice().sort((a, b) => a.run - b.run).map(r => {
    const head = `run ${r.run} · ` +
      (r.matched === true ? '<span class="ok">✓ match</span>' :
       r.matched === false ? '<span class="bad">✗ no-match</span>' : '<span class="dim">—</span>') +
      ` · ${Math.round(r.elapsed)}s · ${r.calls} tools` +
      (r.errs ? ` · <span class="bad">errors ${r.errs}</span>` : '') +
      (r.status && r.status !== 'ok' ? ` · <span class="warn">${esc(r.status)}</span>` : '') +
      ` · tok new:${(r.tok||{}).new ?? 0} out:${(r.tok||{}).out ?? 0} · ` +
      (r.markers || []).map(m => `<span class="pill">${esc(m)}</span>`).join('');
    const steps = (r.steps || []).map(s =>
      `<div class="step">${s.e ? '❗' : '·'} <b>${esc(s.n)}</b> ${esc(s.x || '')}` +
      (s.e && s.r ? `<br><span class="err">↳ ${esc(s.r)}</span>` : '') + `</div>`).join('') ||
      '<div class="step dim">(no tool calls)</div>';
    const final = r.final ? `<div class="final">${esc(r.final)}</div>` : '';
    const trace = r.trace_rel ? `<div class="dim" style="font-size:11px;margin-top:4px">trace: <code>${esc(r.trace_rel)}</code></div>` : '';
    return `<div style="margin-bottom:12px"><div>${head}</div>${steps}${final}${trace}</div>`;
  }).join('');
}
// results grouped into collapsible categories (by model, task, or both)
const GROUP_DIMS = { model: ['model'], task: ['task'], both: ['model', 'task'] };
const GROUP_LABEL = { model: 'model', task: 'task' };
const keyOf = (c, dim) => dim === 'model' ? c.ns : c.task;
// the four right-hand summary columns (runs · ✓match·errors · markers · med time),
// shared by data rows and by folded group headers so errors stay visible folded.
function statCells(rs) {
  const seen = rs.filter(r => r.matched !== null);
  const matched = seen.length ? `${seen.filter(r => r.matched).length}/${seen.length}` : '—';
  const errs = rs.filter(runErrored).length;                 // runs that failed
  const retried = rs.filter(r => !runErrored(r) && r.retry).length;  // recovered tool hiccups
  const flags = (errs ? ` · <span class="bad">!${errs} err</span>` : '')
    + (retried ? ` · <span class="warn" title="tool call(s) failed but the run recovered">↻${retried}</span>` : '');
  return `<td class="num">${rs.length}</td>
    <td>✓ ${matched}${flags}</td>
    <td>${markerSummary(rs) || '<span class="dim">—</span>'}</td>
    <td class="num">${Math.round(median(rs.map(r => r.elapsed)) || 0)}s</td>`;
}
function dataRow(c) {
  const { ns, sha, tier, task, rs } = c;
  return `<td>${esc(ns)}</td><td>${esc(dispName(revBySha[sha]))}</td><td>${esc(tier)}</td><td>${esc(task)}</td>${statCells(rs)}`;
}
function renderTable() {
  // the Results tab honors the global configuration (sidebar + Revisions strip);
  // organize the included runs via Group by + fold/drill.
  const cells = [];
  for (const ns of NSS.filter(n => state.nss.has(n)))
  for (const sha of revOrder.filter(s => state.revs.has(s)))
  for (const tier of TIERS) for (const task of TASKS) {
    if (!state.tiers.has(tier) || !state.tasks.has(task)) continue;
    const rs = cellRuns(ns, sha, tier, task);
    if (rs.length) cells.push({ ns, sha, tier, task, rs });
  }

  const dims = GROUP_DIMS[state.group];
  const shaRank = s => revOrder.indexOf(s), tierRank = t => TIERS.indexOf(t);
  cells.sort((a, b) => {
    for (const d of dims) { const x = keyOf(a, d), y = keyOf(b, d); if (x !== y) return x < y ? -1 : 1; }
    if (a.ns !== b.ns) return a.ns < b.ns ? -1 : 1;
    if (a.task !== b.task) return a.task < b.task ? -1 : 1;
    if (a.sha !== b.sha) return shaRank(a.sha) - shaRank(b.sha);
    return tierRank(a.tier) - tierRank(b.tier);
  });

  // §-joined prefixes of a label path; used both as group keys and as the
  // "owner" keys that hide a row when an ancestor group is collapsed.
  const prefixes = (labels, n) => Array.from({ length: n }, (_, i) => labels.slice(0, i + 1).join('§'));
  // aggregate every group's runs up front so a folded header can summarize them
  const groupRuns = {};
  for (const c of cells) {
    const labels = dims.map(d => keyOf(c, d));
    prefixes(labels, labels.length).forEach(k => (groupRuns[k] = groupRuns[k] || []).push(...c.rs));
  }
  const groupKeys = [];
  const rows = [];
  let prev = [];
  for (const c of cells) {
    const labels = dims.map(d => keyOf(c, d));
    let diff = 0; while (diff < labels.length && prev[diff] === labels[diff]) diff++;
    for (let i = diff; i < labels.length; i++) {
      const selfKey = labels.slice(0, i + 1).join('§');
      const owners = prefixes(labels, i).join('|');   // ancestors only
      groupKeys.push(selfKey);
      rows.push(`<tr class="grp" data-key="${esc(selfKey)}" data-owners="${esc(owners)}">
        <td colspan="4" style="padding-left:${6 + i * 18}px"><span class="caret">▸</span>
        <b>${esc(labels[i])}</b> <span class="dim">${esc(GROUP_LABEL[dims[i]])}</span></td>
        ${statCells(groupRuns[selfKey])}</tr>`);
    }
    prev = labels;
    const owners = prefixes(labels, labels.length).join('|');  // all ancestors
    const id = `d_${c.ns}_${c.sha}_${c.tier}_${c.task}`.replace(/[^\w]/g, '_');
    rows.push(`<tr class="cell grp-row" data-detail="${id}" data-owners="${esc(owners)}">${dataRow(c)}</tr>`);
    rows.push(`<tr id="${id}" class="drill-row" data-owners="${esc(owners)}" style="display:none"><td colspan="8"><div class="drill">${drill(c.rs)}</div></td></tr>`);
  }

  document.getElementById('results-hint').textContent =
    `· ${cells.length} cell(s) across ${new Set(cells.map(c => c.ns)).size} model(s) · click a category to unfold it, a row to drill into its runs`;
  document.getElementById('table').innerHTML = rows.length ? `<table>
    <thead><tr><th>Model</th><th>Revision</th><th>Tier</th><th>Task</th><th class="num">runs</th>
    <th>✓match · errors</th><th>markers</th><th class="num">med time</th></tr></thead>
    <tbody>${rows.join('')}</tbody></table>`
    : '<div class="dim">no runs for this model / tier / task selection</div>';

  const collapsed = new Set(groupKeys), expanded = new Set();  // start fully folded
  const owned = tr => (tr.dataset.owners || '').split('|').filter(Boolean);
  function applyCollapse() {
    document.querySelectorAll('#table tr.grp, #table tr.grp-row').forEach(tr => {
      tr.style.display = owned(tr).some(k => collapsed.has(k)) ? 'none' : '';
    });
    document.querySelectorAll('#table tr.drill-row').forEach(tr => {
      const hidden = owned(tr).some(k => collapsed.has(k));
      tr.style.display = (!hidden && expanded.has(tr.id)) ? '' : 'none';
    });
    document.querySelectorAll('#table tr.grp').forEach(tr => {
      const car = tr.querySelector('.caret');
      if (car) car.textContent = collapsed.has(tr.dataset.key) ? '▸' : '▾';
    });
  }
  document.querySelectorAll('#table tr.grp').forEach(tr => tr.addEventListener('click', () => {
    const k = tr.dataset.key; collapsed.has(k) ? collapsed.delete(k) : collapsed.add(k); applyCollapse();
  }));
  document.querySelectorAll('#table tr.grp-row').forEach(tr => tr.addEventListener('click', () => {
    const id = tr.dataset.detail; expanded.has(id) ? expanded.delete(id) : expanded.add(id); applyCollapse();
  }));
  applyCollapse();
}

// runs in scope for the distributions: a single model when one is picked from
// the dropdown (ignoring the model chips), else the chip-selected models.
// Tier/task chips always apply.
function distRuns() {
  const base = RUNS.filter(r => state.tiers.has(r.tier) && state.tasks.has(r.task) && state.revs.has(r.sha));
  return state.distModel ? base.filter(r => r.ns === state.distModel)
                         : base.filter(r => state.nss.has(r.ns));
}
// distributions box+strip, log scale. Layouts:
//  • one box per revision (default, or whenever a single model is picked) — see
//    how that model / the selected set behaves across commits.
//  • "model" split with all models: within each revision, one box per model,
//    colored by model, grouped — compare models on each commit.
// linear interpolation quantile over a pre-sorted array
function quantileSorted(sorted, q) {
  if (!sorted.length) return 0;
  const pos = (sorted.length - 1) * q, base = Math.floor(pos), rest = pos - base;
  return sorted[base + 1] !== undefined ? sorted[base] + rest * (sorted[base + 1] - sorted[base]) : sorted[base];
}
// Tukey upper fence (Q3 + 1.5·IQR) — the same cutoff Plotly uses to flag
// outliers. Used to clip the y-axis so a few extreme runs don't squash every box
// to the floor on the linear scale. Falls back to p95, then the max, when the
// IQR is 0 (e.g. most runs near zero) so the range is never degenerate.
function clipBound(values) {
  const s = values.filter(v => v != null && isFinite(v)).sort((a, b) => a - b);
  if (!s.length) return null;
  const q1 = quantileSorted(s, 0.25), q3 = quantileSorted(s, 0.75);
  const fence = q3 + 1.5 * (q3 - q1);
  const bound = fence > 0 ? fence : (quantileSorted(s, 0.95) || s[s.length - 1]);
  return bound > 0 ? bound : null;
}
function boxFig(divId, title, valueFn) {
  const rs = distRuns();
  const byModel = !state.distModel && state.distSplit === 'model';
  const tip = r => `${shortModel(r.ns)} · ${r.tier} · ${r.task} · run${r.run}`;
  // Default to clean boxes (median + quartiles + mean), since plotting every run
  // overplots into an unreadable cloud; the Points control opts back in.
  const pts = state.distPoints === 'all' ? 'all' : state.distPoints === 'outliers' ? 'outliers' : false;
  const common = {
    type: 'box', boxmean: true, boxpoints: pts,
    ...(pts === 'all' ? { jitter: 0.3, pointpos: 0 } : {}),
  };
  let traces;
  if (byModel) {
    traces = NSS.filter(n => state.nss.has(n)).map(ns => {
      const cr = rs.filter(r => r.ns === ns), col = DIMS.model.color(ns);
      return {
        ...common, name: shortModel(ns),
        x: cr.map(r => dispName(revBySha[r.sha])), y: cr.map(valueFn),
        text: cr.map(tip), hoverinfo: 'y+text',
        marker: { color: col, size: 4, opacity: 0.6 }, line: { color: col }, fillcolor: col + '22',
      };
    });
  } else {
    traces = REVS.filter(c => state.revs.has(c.sha)).map(c => {
      const cr = rs.filter(r => r.sha === c.sha), col = revColor(c.sha);
      return {
        ...common, name: dispName(c), y: cr.map(valueFn),
        text: cr.map(tip), hoverinfo: 'y+text',
        marker: { color: col, size: 4, opacity: 0.6 }, line: { color: col }, fillcolor: col + '22',
      };
    });
  }
  const T = themeColors();
  const layout = {
    title: { text: title, font: { size: 13 }, x: 0, xanchor: 'left' },
    height: 300, showlegend: false, margin: { l: 52, r: 10, t: 30, b: 70 },
    paper_bgcolor: 'rgba(0,0,0,0)', plot_bgcolor: 'rgba(0,0,0,0)', font: { color: T.fg },
    yaxis: { type: state.distScale === 'log' ? 'log' : 'linear', gridcolor: T.grid, zeroline: false },
    xaxis: { gridcolor: T.grid, automargin: true },
  };
  // clip the view past the outliers so the boxes are readable on the natural scale
  if (state.distScale === 'linear-clip') {
    const bound = clipBound(rs.map(valueFn));
    if (bound) layout.yaxis.range = [0, bound * 1.05];
  }
  // only the per-model view groups multiple boxes per revision category; the
  // revision view keeps one wide box per trace (default boxmode), as before
  if (byModel) {
    layout.boxmode = 'group';
    layout.xaxis.categoryorder = 'array';
    layout.xaxis.categoryarray = REVS.filter(c => state.revs.has(c.sha)).map(dispName);
  }
  Plotly.react(divId, traces, layout, { displayModeBar: false, responsive: true });
}
function renderDistributions() {
  const byModel = !state.distModel && state.distSplit === 'model';
  // a shared swatch legend maps colors → models only in the multi-model compare view
  document.getElementById('dist-legend').innerHTML = byModel ? legendHTML('model') : '';
  document.getElementById('dist-hint').textContent = state.distModel
    ? `Showing ${shortModel(state.distModel)} across revisions. Pick "all models" to compare, or use the model chips up top.`
    : 'Pick a single model to see it across revisions, or use the model chips up top to focus the set.';
  boxFig('dist-time', 'elapsed (s)', r => r.elapsed);
  boxFig('dist-new', 'new tokens', r => (r.tok || {}).new || 0);
  boxFig('dist-rep', 'repeat tokens', r => (r.tok || {}).rep || 0);
  boxFig('dist-out', 'out tokens', r => (r.tok || {}).out || 0);
  resizePlots(['dist-time', 'dist-new', 'dist-rep', 'dist-out']);
}

// Plotly sizes to the container at react() time; when we switch the overview to
// full-width (single column) the grid hasn't reflowed yet, so the plot would
// keep a stale (half) width. Resize on the next frame, once layout has settled.
function resizePlots(ids) {
  requestAnimationFrame(() => ids.forEach(id => {
    const el = document.getElementById(id);
    if (el && el.data) Plotly.Plots.resize(el);
  }));
}
function renderViz() {
  renderOverview(); renderChart();
  resizePlots(['ov-match', 'ov-time', 'ov-newtok', 'ov-err', 'chart']);
}
// explicit colorscale (so we can match annotation text to actual cell luminance)
// HF-brand amber ramp (matches the accent); pale cream → yellow → orange → brown.
const COV_SCALE = [[0, '#fff8eb'], [0.25, '#ffe7ad'], [0.5, '#ffce6e'], [0.75, '#ff9d00'], [1, '#b45309']];
const _hex = h => { h = h.replace('#', ''); return [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16)); };
function _covColor(t) {  // interpolate COV_SCALE at t∈[0,1] → [r,g,b]
  t = Math.max(0, Math.min(1, t));
  for (let i = 1; i < COV_SCALE.length; i++) {
    if (t <= COV_SCALE[i][0]) {
      const [t0, c0] = COV_SCALE[i - 1], [t1, c1] = COV_SCALE[i];
      const f = (t - t0) / ((t1 - t0) || 1), a = _hex(c0), b = _hex(c1);
      return [0, 1, 2].map(k => Math.round(a[k] + f * (b[k] - a[k])));
    }
  }
  return _hex(COV_SCALE[COV_SCALE.length - 1][1]);
}
// readable text color for a cell: white on dark fills, near-black on light ones
function _covText(t) {
  const [r, g, b] = _covColor(t);
  return (0.299 * r + 0.587 * g + 0.114 * b) > 150 ? '#111111' : '#ffffff';
}
// expected sample count for a task: the intended runs (max run index seen, or
// the task's declared `runs`, default 3) so partial cells stand out.
const _maxRunByTask = {};
RUNS.forEach(r => { _maxRunByTask[r.task] = Math.max(_maxRunByTask[r.task] || 0, r.run || 0); });
function expectedRuns(task) {
  return Math.max(_maxRunByTask[task] || 0, (TASK_META[task] || {}).runs || 3);
}
// tiers a revision actually supports (seen in any run there) ∩ selected tiers —
// so releases without the skill tier don't count it as "missing".
const _tiersBySha = {};
RUNS.forEach(r => { (_tiersBySha[r.sha] = _tiersBySha[r.sha] || new Set()).add(r.tier); });
function availTiers(sha) {
  const seen = _tiersBySha[sha] || new Set();
  return TIERS.filter(t => state.tiers.has(t) && seen.has(t));
}
function covExpected(task, sha) {
  return NSS.filter(n => state.nss.has(n)).length * availTiers(sha).length * expectedRuns(task);
}
// per-(task,revision) breakdown shown on click: model × tier done/expected + missing run indices
function covDetail(task, sha) {
  const er = expectedRuns(task), tiers = availTiers(sha);
  const models = NSS.filter(n => state.nss.has(n));
  const head = tiers.map(t => `<td class="m">${esc(t)}</td>`).join('');
  const rows = models.map(ns => {
    const cells = tiers.map(tier => {
      const have = new Set(RUNS.filter(r => r.task === task && r.sha === sha && r.ns === ns && r.tier === tier).map(r => r.run));
      const missing = [];
      for (let i = 1; i <= er; i++) if (!have.has(i)) missing.push(i);
      const cls = have.size >= er ? 'ans-ok' : have.size === 0 ? 'ans-bad' : 'ans-mid';
      const miss = (missing.length && missing.length < er) ? ` <span class="dim">(missing ${missing.join(',')})</span>` : '';
      return `<td class="v ${cls}">${have.size}/${er}${miss}</td>`;
    }).join('');
    return `<tr><td class="m">${esc(shortModel(ns))}</td>${cells}</tr>`;
  }).join('');
  return `<div class="dim" style="font-size:12px;margin-bottom:6px"><b>${esc(task)}</b> @ ${esc(dispName(revBySha[sha]))} — completed / expected per model × tier</div>
    <table class="answers"><tr><td class="m dim">model</td>${head}</tr>${rows}</table>`;
}
// tasks × revisions coverage heatmap — cell shows done/expected; click for detail
function renderCoverage() {
  if (!covOpen) return;
  const T = themeColors();
  const sel = REVS.filter(c => state.revs.has(c.sha));
  const x = sel.map(dispName), shas = sel.map(c => c.sha);
  const y = TASKS.filter(t => state.tasks.has(t));
  const done = y.map(t => shas.map(sha =>
    RUNS.filter(r => r.task === t && r.sha === sha && state.nss.has(r.ns) && state.tiers.has(r.tier)).length));
  const exp = y.map(t => shas.map(sha => covExpected(t, sha)));
  // color + cell value = % of expected runs that are done; null when nothing's expected
  const z = done.map((row, i) => row.map((v, j) => exp[i][j] ? Math.round(100 * v / exp[i][j]) : null));
  const ann = [];
  z.forEach((row, i) => row.forEach((pct, j) => ann.push({
    x: x[j], y: y[i], text: pct === null ? '—' : `${pct}%`, showarrow: false,
    font: { size: 11, color: _covText((pct || 0) / 100) },
  })));
  const custom = done.map((row, i) => row.map((v, j) => [v, exp[i][j]]));
  const layout = {
    height: Math.max(240, y.length * 26 + 130),
    margin: { l: 180, r: 10, t: 8, b: 96 },
    paper_bgcolor: 'rgba(0,0,0,0)', plot_bgcolor: 'rgba(0,0,0,0)', font: { color: T.fg },
    xaxis: { tickangle: -30, automargin: true },
    yaxis: { automargin: true, autorange: 'reversed' },
    annotations: ann,
  };
  Plotly.react('cov-heatmap', [{
    type: 'heatmap', z, x, y, customdata: custom, colorscale: COV_SCALE, zmin: 0, zmax: 100,
    colorbar: { title: '% done', ticksuffix: '%' },
    hovertemplate: '%{y} · %{x}<br>%{customdata[0]}/%{customdata[1]} runs done (%{z}%)<extra></extra>',
  }], layout, { displayModeBar: false, responsive: true });
  resizePlots(['cov-heatmap']);
  const gd = document.getElementById('cov-heatmap');
  if (gd && !gd._covClick && gd.on) {
    gd._covClick = true;
    gd.on('plotly_click', ev => {
      const p = ev.points && ev.points[0]; if (!p) return;
      const c = REVS.find(rev => dispName(rev) === p.x); if (!c) return;
      document.getElementById('cov-detail').innerHTML = covDetail(p.y, c.sha);
    });
  }
}
function renderAll() { refreshScope(); renderViz(); renderTasks(); renderTable(); renderDistributions(); }
renderAll();

// --- top-level tabs: Overview / Coverage / Results ---
const PANES = [...document.querySelectorAll('.pane')];
const TABS = [...document.querySelectorAll('.tab')];
function showTab(name) {
  PANES.forEach(p => { p.hidden = p.id !== 'tab-' + name; });
  TABS.forEach(b => b.classList.toggle('active', b.dataset.tab === name));
  // (re)draw the now-visible Plotly charts so they size to the real width
  if (name === 'overview') { renderViz(); renderDistributions(); }
  else if (name === 'coverage') { covOpen = true; renderCoverage(); }
}
TABS.forEach(b => b.addEventListener('click', () => showTab(b.dataset.tab)));

// --- configuration sidebar (gear) ---
const sidebar = document.getElementById('sidebar');
const backdrop = document.getElementById('backdrop');
function setSidebar(open) { sidebar.hidden = !open; backdrop.hidden = !open; }
document.getElementById('cfg-toggle').addEventListener('click', () => setSidebar(sidebar.hidden));
document.getElementById('cfg-close').addEventListener('click', () => setSidebar(false));
backdrop.addEventListener('click', () => setSidebar(false));
document.addEventListener('keydown', e => { if (e.key === 'Escape') setSidebar(false); });

// --- theme: manual toggle + OS-change follow ---
// `manualTheme` is set once the user clicks the toggle (or the Space pins
// ?__theme=), after which we stop following the OS preference.
let manualTheme = !!new URLSearchParams(location.search).get('__theme');
function applyTheme(dark) {
  const root = document.documentElement.classList;
  root.remove('dark', 'light');
  root.add(dark ? 'dark' : 'light');
  document.getElementById('theme-toggle').textContent = dark ? '☀ Light' : '☾ Dark';
  renderViz(); renderDistributions(); renderCoverage();   // re-render so Plotly picks up theme colors
}
applyTheme(document.documentElement.classList.contains('dark'));
document.getElementById('theme-toggle').addEventListener('click', () => {
  manualTheme = true;
  applyTheme(!document.documentElement.classList.contains('dark'));
});
if (window.matchMedia) {
  const mq = window.matchMedia('(prefers-color-scheme: dark)');
  const onThemeChange = e => { if (!manualTheme) applyTheme(e.matches); };
  mq.addEventListener ? mq.addEventListener('change', onThemeChange)
                      : mq.addListener(onThemeChange);
}

document.getElementById('foot').innerHTML =
  `Static report generated by <code>ag report</code>. Profile: <code>${esc(DATA.profile || '')}</code>. ` +
  `Markers: ${MARKER_NAMES.map(m => `<code>${esc(m)}</code>`).join(', ') || '(none)'}.`;
</script>
</body>
</html>