/* dasLLAMA page — renders straight from files/dasllama/bench_records.json, the single merged
   record store (generated by gen_site_records from the per-box sweeps; annotations merged there
   too). All ratios and rows are derived here, never hand-placed.

   Every table on this page is a *pair* table: one row is one das measurement and
   the reference run it was measured against, same workload and same machine. A das
   number is never rendered without its reference, so a measurement whose reference
   is missing simply produces no row. */

(function () {
  'use strict';

  function fmt(n, d) { return Number(n).toFixed(d == null ? 0 : d); }
  function tps(v) { return v > 0 ? fmt(v, 1) : '-'; }   // tok/s cell; '-' when unmeasured (matches gen_results cell_tps)
  function ms(v) { return v > 0 ? fmt(v, 0) : '-'; }
  // das / reference ratio, or null when either side wasn't measured (matches gen_results
  // cell_ratio: both sides must be > 0). Null never becomes a NaN cell.
  function ratio(das, ref) { return (ref > 0 && das > 0) ? das / ref : null; }

  // Records are reviewed before they land, but community rows are third-party text — escape
  // everything that reaches innerHTML.
  function esc(s) {
    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }

  // A short machine label. hardware.cpu is auto-probed, so trim the x86 marketing suffix.
  function boxLabel(cpu, fallback) {
    return cpu ? String(cpu).replace('64-Core Processor', '').trim() : fallback;
  }

  function ratioCell(r) {
    if (r === null) return '<td class="dl-num dl-dim">-</td>';
    var cls = r > 1.005 ? 'dl-win' : (r < 0.995 ? 'dl-loss' : '');
    return '<td class="' + ('dl-num ' + cls).trim() + '">' + fmt(r, 2) + '×</td>';
  }

  // a visible mark on rows that carry a hand-written note — the full text is in the receipt
  function notedCell(text, sub) {
    return esc(text) + (sub ? ' <span class="dl-model-sub">' + esc(sub) + '</span>' : '');
  }

  // Noted rows carry the note ON the model cell: hovering anywhere in the cell shows the note
  // itself (CSS tooltip, instant), the ✱ just marks the row. Emits the full <td> so the note
  // rides a data attribute.
  function modelCell(r, inner) {
    if (!r.noted) return '<td class="dl-td-model">' + inner + '</td>';
    var t = [r.modelNote,
      r.das && r.das.comment ? 'das: ' + r.das.comment : '',
      r.ref && r.ref.comment ? 'reference: ' + r.ref.comment : ''].filter(Boolean).join('\n');
    return '<td class="dl-td-model" data-note="' + esc(t).replace(/"/g, '&quot;') + '">' +
      inner + ' <span class="dl-note-mark">✱</span></td>';
  }

  /* ── generic pair table ─────────────────────────────────────────
     spec: { table, filters, caption, rows, cols, filterDefs, sort, tiebreak, receipt, summary }
     cols:       { key, label, get(row), cell(row), num, grp, grpStart, cls, dim }
     filterDefs: { field, title, all, get(row), label(row) }
     Builds its own thead, filter selects and caption, so a new table costs three
     empty divs in the HTML rather than a copy of the markup. */
  function makeTable(spec) {
    var table = document.querySelector(spec.table);
    var filterBox = document.querySelector(spec.filters);
    var caption = document.querySelector(spec.caption);
    if (!table) return null;

    var sort = { key: spec.sort.key, desc: !!spec.sort.desc };
    var filter = {};
    spec.filterDefs.forEach(function (f) { filter[f.field] = ''; });

    function colOf(key) {
      return spec.cols.filter(function (c) { return c.key === key; })[0] || spec.cols[0];
    }

    function visible() {
      return spec.rows.filter(function (r) {
        return spec.filterDefs.every(function (f) {
          return !filter[f.field] || String(f.get(r)) === filter[f.field];
        });
      });
    }

    function sorted(rows) {
      var col = colOf(sort.key), dir = sort.desc ? -1 : 1;
      return rows.slice().sort(function (a, b) {
        var x = col.get(a), y = col.get(b);
        // unmeasured (null) sorts last in either direction, never between real values
        if (x === null || x === undefined) return 1;
        if (y === null || y === undefined) return -1;
        var c = (typeof x === 'string' || typeof y === 'string')
          ? String(x).localeCompare(String(y)) : (x - y);
        if (c) return c * dir;
        return spec.tiebreak ? spec.tiebreak(a, b) : 0;
      });
    }

    function headHTML() {
      return '<thead><tr>' + spec.cols.map(function (c) {
        var cls = ['js-sort'];
        if (c.num) cls.push('dl-num');
        if (c.grp) cls.push('dl-grp');
        if (c.grpStart) cls.push('dl-grp-start');
        if (c.key === sort.key) { cls.push('is-sorted'); if (sort.desc) cls.push('is-desc'); }
        return '<th class="' + cls.join(' ') + '" data-sort="' + c.key + '">' + esc(c.label) + '</th>';
      }).join('') + '</tr></thead>';
    }

    function render() {
      var rows = sorted(visible());
      var ncol = spec.cols.length;
      var bodyHTML;

      if (!rows.length) {
        bodyHTML = '<tr><td class="dl-empty" colspan="' + ncol + '">No runs match these filters.</td></tr>';
      } else {
        bodyHTML = rows.map(function (r, i) {
          var tds = spec.cols.map(function (c) {
            var out = c.cell(r);
            if (out.charAt(0) === '<') return out;      // cell() may emit its own <td>
            var cls = [];
            if (c.num) cls.push('dl-num');
            if (c.dim) cls.push('dl-dim');
            if (c.grpStart) cls.push('dl-grp-start');
            if (c.cls) cls.push(c.cls);
            return '<td class="' + cls.join(' ') + '">' + out + '</td>';
          }).join('');
          var rec = spec.receipt ? spec.receipt(r) : null;
          return '<tr class="dl-row' + (r.noted ? ' dl-row--noted' : '') + '" data-row="' + i + '">' + tds + '</tr>' +
            (rec ? '<tr hidden data-receipt="' + i + '"><td colspan="' + ncol + '">' +
              '<div class="dl-bench-receipt">' + rec + '</div></td></tr>' : '');
        }).join('');
      }

      table.innerHTML = headHTML() + '<tbody>' + bodyHTML + '</tbody>';

      var body = table.querySelector('tbody');
      body.querySelectorAll('[data-row]').forEach(function (el) {
        el.addEventListener('click', function () {
          var n = body.querySelector('[data-receipt="' + el.dataset.row + '"]');
          if (n) n.hidden = !n.hidden;
        });
      });
      table.querySelectorAll('.js-sort').forEach(function (th) {
        th.addEventListener('click', function () {
          var k = th.dataset.sort;
          // first click on a new column: numbers start high-to-low, text starts A-to-Z
          if (sort.key === k) sort.desc = !sort.desc;
          else { sort.key = k; sort.desc = typeof colOf(k).get(spec.rows[0]) === 'number'; }
          render();
        });
      });

      if (caption) caption.innerHTML = spec.summary(rows, spec.rows.length);
    }

    function buildFilters() {
      if (!filterBox) return;
      var html = spec.filterDefs.map(function (f) {
        var seen = {}, opts = [];
        spec.rows.forEach(function (r) {
          var v = String(f.get(r));
          if (v && !seen[v]) { seen[v] = 1; opts.push({ v: v, label: f.label ? f.label(r) : v }); }
        });
        opts.sort(function (a, b) { return a.label.localeCompare(b.label); });
        return '<label>' + esc(f.title || f.field) +
          ' <select class="js-filter" data-field="' + f.field + '">' +
          '<option value="">' + esc(f.all) + '</option>' +
          opts.map(function (o) { return '<option value="' + esc(o.v) + '">' + esc(o.label) + '</option>'; }).join('') +
          '</select></label>';
      }).join('') + '<button class="dl-filters__reset js-reset" type="button">reset</button>';
      filterBox.innerHTML = html;

      filterBox.querySelectorAll('.js-filter').forEach(function (sel) {
        sel.addEventListener('change', function () { filter[sel.dataset.field] = sel.value; render(); });
      });
      filterBox.querySelector('.js-reset').addEventListener('click', function () {
        spec.filterDefs.forEach(function (f) { filter[f.field] = ''; });
        filterBox.querySelectorAll('.js-filter').forEach(function (s) { s.value = ''; });
        sort = { key: spec.sort.key, desc: !!spec.sort.desc };
        render();
      });
    }

    buildFilters();
    render();
    return { render: render };
  }

  /* ── shared receipt: the full identity of both sides of a pair ── */
  function sideLines(tag, r, lines) {
    var hw = r.hardware || {};
    if (r.cmd) lines.push('<b>' + tag + '</b>  $ ' + esc(r.cmd));
    else lines.push('<b>' + tag + '</b>');
    lines.push('        ' + esc([r.engine, r.sha ? '@ ' + r.sha : '', r.version || '', r.date || '',
      r.threads ? r.threads + ' threads' : '',
      r.source && r.source !== 'official' ? r.source : ''].filter(Boolean).join(' · ')));
    if (r.versions) lines.push('        versions: ' + esc(r.versions));
    if (r.tune) lines.push('        tune: ' + esc(r.tune));
    if (r.exec_fmt) lines.push('        executes: ' + esc(r.exec_fmt));
    if (r.env) lines.push('        env: ' + esc(r.env));
    (r.files || []).forEach(function (f) {
      lines.push('        ' + esc(f.role + ': ' + f.name +
        (f.sha256 ? ' sha256:' + f.sha256.slice(0, 12) + '…' : ' (unhashed)') +
        (f.bytes ? ' · ' + f.bytes + ' B' : '')));
    });
    var hwLine = [hw.cpu, hw.model_id, hw.total_cores ? hw.total_cores + ' cores' : '',
      hw.remote_desktop ? (hw.remote_desktop === 'off' ? 'Parsec off' : 'REMOTE DESKTOP: ' + hw.remote_desktop) : '',
      hw.ram_gb ? hw.ram_gb + ' GB' : '', hw.ram_config, hw.gpu, hw.os, hw.power_plan,
      hw.smt ? 'SMT ' + hw.smt : ''].filter(Boolean).join(' · ');
    if (hwLine) lines.push('        ' + esc(hwLine));
    if (r.comment) lines.push('        <span class="dl-receipt-note"><b>note</b>  ' + esc(r.comment) + '</span>');
  }

  function pairReceipt(p) {
    var lines = [];
    if (p.modelNote) lines.push('<span class="dl-receipt-note"><b>note     </b> ' + esc(p.modelNote) + '</span>');
    sideLines('das      ', p.das, lines);
    lines.push('');
    sideLines('reference', p.ref, lines);
    return lines.join('\n');
  }

  // "measured YYYY-MM-DD → YYYY-MM-DD · reference @ shas" — the when-and-against-what line.
  // Commit abbreviation length varies by reporting tool (llama-bench emits 7 chars, git 9), so
  // shas where one is a prefix of the other are the same build and merge to the longer form.
  function measuredLine(rows) {
    var dates = {}, byEngine = {};
    rows.forEach(function (p) {
      if (p.das.date) dates[p.das.date] = 1;
      if (p.ref.date) dates[p.ref.date] = 1;
      var shas = byEngine[p.ref.engine] = byEngine[p.ref.engine] || [];
      var sha = p.ref.sha || '';
      var merged = false;
      for (var i = 0; i < shas.length; i++) {
        if (!sha || shas[i].indexOf(sha) === 0) { merged = true; break; }
        if (sha.indexOf(shas[i]) === 0) { shas[i] = sha; merged = true; break; }
      }
      if (!merged && sha) shas.push(sha);
    });
    var refs = [];
    Object.keys(byEngine).sort().forEach(function (e) {
      var shas = byEngine[e];
      refs.push(shas.length ? shas.sort().map(function (s) { return e + ' @ ' + s; }).join(', ') : e);
    });
    var ds = Object.keys(dates).sort();
    var span = ds.length ? (ds[0] === ds[ds.length - 1] ? ds[0] : ds[0] + ' → ' + ds[ds.length - 1]) : '';
    return ['measured ' + span, refs.join(', ')].filter(Boolean).join(' · ');
  }

  /* ── § 01 LLM: pair rows from the records ───────────────────── */

  // Each category names the exact das flavor and the exact llama.cpp flavor it is measured
  // against. "stock" at -ngl 0 -nopo 1 is a genuine CPU number; without -nopo llama.cpp
  // op-offloads big-batch work to Metal and the row would not be CPU at all.
  // Labels stay vendor-neutral so they survive x86: "accel" is whatever accelerated math path
  // the box has (Accelerate/AMX on Apple, MKL or AOCL elsewhere), and every GPU backend is one
  // "gpu" category — which one ran is in the row's receipt.
  var LANES = [
    { backend: 'cpu',    das: 'tuned', ref: 'clean-cpu', label: 'cpu' },
    { backend: 'cpu',    das: 'accel', ref: 'stock',     label: 'cpu + accel' },
    { backend: 'metal',  das: 'tuned', ref: 'stock',     label: 'gpu' },
    { backend: 'vulkan', das: 'tuned', ref: 'stock',     label: 'gpu' }
  ];

  function tok(r, k) { return (r.tests && r.tests[k]) ? r.tests[k].tok_s : 0; }
  function isLLM(r) { return !r.workload; }

  // Duplicate runs for one identity shouldn't silently pick a lucky one: prefer the most
  // recent measurement, and keep input order as the tie-break.
  function newest(runs) {
    return runs.slice().sort(function (a, b) {
      return String(b.date || '').localeCompare(String(a.date || ''));
    })[0];
  }

  function buildLLMPairs(recs) {
    var out = [];
    recs.forEach(function (m) {
      var boxes = {};
      (m.runs || []).forEach(function (r) { if (isLLM(r)) boxes[r.box] = true; });
      Object.keys(boxes).forEach(function (bx) {
        LANES.forEach(function (L) {
          function pick(engine, flavor) {
            var hits = (m.runs || []).filter(function (r) {
              return isLLM(r) && r.box === bx && r.backend === L.backend && r.flavor === flavor && r.engine === engine;
            });
            return hits.length ? newest(hits) : null;
          }
          var das = pick('das', L.das), ref = pick('llama.cpp', L.ref);
          if (!das || !ref) return;                    // no reference → no row
          out.push({
            model: m.gguf.replace(/\.gguf$/, ''), arch: m.arch || '',
            size: m.size_bytes || 0, box: bx, boxName: boxLabel(das.hardware && das.hardware.cpu, bx),
            lane: L.label, modelNote: m.note || '',
            noted: !!(m.note || das.comment || ref.comment),
            pp_das: tok(das, 'pp512'), pp_ref: tok(ref, 'pp512'),
            tg_das: tok(das, 'tg128'), tg_ref: tok(ref, 'tg128'),
            pp_ratio: ratio(tok(das, 'pp512'), tok(ref, 'pp512')),
            tg_ratio: ratio(tok(das, 'tg128'), tok(ref, 'tg128')),
            das: das, ref: ref
          });
        });
      });
    });
    return out;
  }

  /* ── stacked bar pairs, the default view of every section ────────
     das (amber) over its reference (teal) from one baseline; each pair normalized to its own
     max so the longer side spans the track and the gap IS the ratio. Bars are RATES in every
     section — tok/s in § 01, ×RT in § 02/03 — so longer amber always means faster. */
  function renderPairBars(box, items, receiptFn) {
    if (!items.length) {
      box.innerHTML = '<div class="dl-empty">No runs match these filters.</div>';
      return;
    }
    box.innerHTML = items.map(function (it, i) {
      var mx = Math.max(it.das, it.ref);
      var dasW = (it.das / mx) * 100, refW = (it.ref / mx) * 100;
      var rcls = it.ratio > 1.005 ? 'dl-win' : (it.ratio < 0.995 ? 'dl-loss' : '');
      // note tooltip + ✱ mark: same construction as the table's modelCell
      var r = it.r, noteAttr = '', mark = '';
      if (r && r.noted) {
        var t = [r.modelNote,
          r.das && r.das.comment ? 'das: ' + r.das.comment : '',
          r.ref && r.ref.comment ? 'reference: ' + r.ref.comment : ''].filter(Boolean).join('\n');
        noteAttr = ' data-note="' + esc(t).replace(/"/g, '&quot;') + '"';
        mark = ' <span class="dl-note-mark">✱</span>';
      }
      var rec = (receiptFn && r) ? receiptFn(r) : null;
      return '<div class="dl-bar-row' + (rec ? ' js-bar-expand" data-bar="' + i : '') + '">' +
        '<div class="dl-bar-label"' + noteAttr + '>' + esc(it.label) + mark + '<span class="dl-dim2">' + esc(it.sub) + '</span></div>' +
        '<div class="dl-bar-pair">' +
        '<div class="dl-bar-line"><div class="dl-bar-das" style="width:' + dasW.toFixed(2) + '%"></div><span class="dl-bar-val dl-bar-val--das">' + it.dasText + '</span></div>' +
        '<div class="dl-bar-line"><div class="dl-bar-ref" style="width:' + refW.toFixed(2) + '%"></div><span class="dl-bar-val">' + it.refText + '</span></div>' +
        '</div>' +
        '<div class="dl-bar-ratio ' + rcls + '">' + fmt(it.ratio, 2) + '×</div>' +
        '</div>' +
        (rec ? '<div class="dl-bar-receipt" hidden data-bar-receipt="' + i + '">' +
          '<div class="dl-bench-receipt">' + rec + '</div></div>' : '');
    }).join('');
    // same interaction as the table rows: click toggles the run's receipt
    box.querySelectorAll('.js-bar-expand').forEach(function (el) {
      el.addEventListener('click', function () {
        var n = box.querySelector('[data-bar-receipt="' + el.dataset.bar + '"]');
        if (n) n.hidden = !n.hidden;
      });
    });
  }

  /* one wiring for any section: view toggle, optional metric toggle, the SAME filter selects
     the table owns, sorted by ratio from the first paint */
  function wireBars(sec, rows, itemsOf, receiptFn) {
    var viewSeg = document.getElementById(sec + '-view');
    var metricSeg = document.getElementById(sec + '-metric');
    var barsBox = document.getElementById(sec + '-bars');
    var tableWrap = document.getElementById(sec + '-table-wrap');
    if (!viewSeg || !barsBox || !tableWrap) return;
    function metric() {
      var b = metricSeg && metricSeg.querySelector('.is-on');
      return b ? b.dataset.metric : '';
    }
    function draw() {
      var filters = {};
      document.querySelectorAll('#' + sec + '-filters .js-filter').forEach(function (s) { filters[s.dataset.field] = s.value; });
      renderPairBars(barsBox, itemsOf(rows, filters, metric()), receiptFn);
    }
    function setSeg(seg, btn) {
      seg.querySelectorAll('button').forEach(function (b) { b.classList.toggle('is-on', b === btn); });
    }
    viewSeg.querySelectorAll('button').forEach(function (b) {
      b.addEventListener('click', function () {
        setSeg(viewSeg, b);
        var bars = b.dataset.view === 'bars';
        barsBox.hidden = !bars;
        tableWrap.hidden = bars;
        if (metricSeg) metricSeg.style.visibility = bars ? 'visible' : 'hidden';
        if (bars) draw();
      });
    });
    if (metricSeg) {
      metricSeg.querySelectorAll('button').forEach(function (b) {
        b.addEventListener('click', function () { setSeg(metricSeg, b); draw(); });
      });
    }
    var fbox = document.getElementById(sec + '-filters');
    if (fbox) {
      fbox.addEventListener('change', draw);
      var reset = fbox.querySelector('.js-reset');
      if (reset) reset.addEventListener('click', draw);
    }
    draw();
  }

  function mountLLMViews(rows) {
    wireBars('bench', rows, function (all, filters, m) {
      m = m || 'pp';
      return all.filter(function (r) {
        return (!filters.model || r.model === filters.model) &&
               (!filters.box || r.box === filters.box) &&
               (!filters.lane || r.lane === filters.lane) &&
               r[m + '_ratio'] !== null;
      }).sort(function (a, b) { return b[m + '_ratio'] - a[m + '_ratio']; })
        .map(function (r) {
          return { label: r.model, sub: r.boxName + ' · ' + r.lane,
                   das: r[m + '_das'], ref: r[m + '_ref'],
                   dasText: tps(r[m + '_das']), refText: tps(r[m + '_ref']),
                   ratio: r[m + '_ratio'], r: r };
        });
    }, pairReceipt);
  }

  function mountAudioViews(sec, rows) {
    // bars are RATES everywhere (longer amber = faster): audio pairs bar ×RT — seconds of
    // audio per second of compute — on both sides; the millisecond wall times live in the table
    function xrt(audio_s, msv) { return msv > 0 ? (audio_s * 1000) / msv : 0; }
    function xrtText(v) { return fmt(v, v < 10 ? 1 : 0) + '×RT'; }
    wireBars(sec, rows, function (all, filters) {
      return all.filter(function (r) {
        return (!filters.model || r.model === filters.model) &&
               (!filters.box || r.box === filters.box) &&
               (!filters.lane || r.lane === filters.lane) &&
               (!filters.tool || r.tool === filters.tool) &&
               r.audio_s > 0;
      }).sort(function (a, b) { return b.speed - a.speed; })
        .map(function (r) {
          var d = xrt(r.audio_s, r.das_ms), f = xrt(r.audio_s, r.ref_ms);
          return { label: r.model, sub: r.boxName + ' · ' + r.lane + ' · ' + r.tool + ' · ' + r.wav,
                   das: d, ref: f, dasText: xrtText(d), refText: xrtText(f),
                   ratio: r.speed, r: r };
        });
    }, pairReceipt);
  }

  function mountLLM(rows) {
    if (!rows.length) return;
    document.getElementById('bench').hidden = false;
    makeTable({
      table: '#bench-table', filters: '#bench-filters', caption: '#bench-caption',
      rows: rows, sort: { key: 'size', desc: true },
      tiebreak: function (a, b) { return a.model.localeCompare(b.model) || a.boxName.localeCompare(b.boxName); },
      cols: [
        // m.quant is the runtime activation mode, not the file's weight format — the weight
        // format is in the model name, and exec_fmt in the receipt spells it out exactly.
        { key: 'model', label: 'model', get: function (r) { return r.model; },
          cell: function (r) { return modelCell(r, notedCell(r.model, r.arch)); },
          cls: 'dl-td-model' },
        { key: 'box', label: 'machine', get: function (r) { return r.boxName; },
          cell: function (r) { return esc(r.boxName); }, cls: 'dl-dim2' },
        { key: 'lane', label: 'category', get: function (r) { return r.lane; },
          cell: function (r) { return esc(r.lane); }, cls: 'dl-dim2' },
        { key: 'threads', label: 'threads', num: true, dim: true,
          get: function (r) { return (r.das && r.das.threads) || 0; },
          cell: function (r) { return r.das && r.das.threads ? String(r.das.threads) : '-'; } },
        { key: 'size', label: 'size GB', num: true, dim: true, get: function (r) { return r.size; },
          cell: function (r) { return r.size ? fmt(r.size / 1073741824, 1) : '-'; } },
        { key: 'pp_das', label: 'pp512 das', num: true, grp: true, grpStart: true,
          get: function (r) { return r.pp_das; }, cell: function (r) { return tps(r.pp_das); } },
        { key: 'pp_ref', label: 'lcpp', num: true, dim: true,
          get: function (r) { return r.pp_ref; }, cell: function (r) { return tps(r.pp_ref); } },
        { key: 'pp_ratio', label: 'ratio', num: true, grp: true,
          get: function (r) { return r.pp_ratio; }, cell: function (r) { return ratioCell(r.pp_ratio); } },
        { key: 'tg_das', label: 'tg128 das', num: true, grp: true, grpStart: true,
          get: function (r) { return r.tg_das; }, cell: function (r) { return tps(r.tg_das); } },
        { key: 'tg_ref', label: 'lcpp', num: true, dim: true,
          get: function (r) { return r.tg_ref; }, cell: function (r) { return tps(r.tg_ref); } },
        { key: 'tg_ratio', label: 'ratio', num: true, grp: true,
          get: function (r) { return r.tg_ratio; }, cell: function (r) { return ratioCell(r.tg_ratio); } }
      ],
      filterDefs: [
        { field: 'model', title: 'model', all: 'all models', get: function (r) { return r.model; } },
        { field: 'box', title: 'machine', all: 'all machines', get: function (r) { return r.box; }, label: function (r) { return r.boxName; } },
        { field: 'lane', title: 'category', all: 'all categories', get: function (r) { return r.lane; } }
      ],
      receipt: pairReceipt,
      summary: function (shown, total) {
        return esc(measuredLine(shown)) +
          ' &nbsp;·&nbsp; showing ' + shown.length + ' of ' + total + ' paired runs' +
          ' &nbsp;·&nbsp; click any row for its receipt';
      }
    });
  }

  /* ── § 02/03 audio: pair rows from the same records ─────────────
     One row per clip per reference engine. llama.cpp has no speech-to-text engine, so every
     § 02 reference is a dedicated one; § 03 (workload "audio-chat") is llama.cpp's mtmd. */
  var ENGINE_LABEL = {
    'whisper-cli': 'whisper.cpp', 'parakeet-cli': 'parakeet-cli',
    'onnx': 'ONNX Runtime', 'nemo': 'NeMo', 'llama-mtmd-cli': 'llama-mtmd-cli'
  };

  // Audio lanes mirror the LLM LANES: each names the das backend and the reference backend it
  // is measured against. cpu + accel das rows pair the CPU reference (whisper-cli -ng, greedy,
  // no flash); the gpu das row pairs the tool's own GPU mode (greedy, its flash default).
  // Rows from before the split carry no backend and read as 'cpu'.
  var AUDIO_LANES = [
    { backend: 'cpu',   das: 'tuned', ref: 'cpu',   label: 'cpu' },
    { backend: 'cpu',   das: 'accel', ref: 'cpu',   label: 'cpu + accel' },
    { backend: 'metal', das: 'tuned', ref: 'metal', label: 'gpu' }
  ];

  function buildAudioRows(recs, workload) {
    var out = [];
    recs.forEach(function (m) {
      var runs = (m.runs || []).filter(function (r) { return r.workload === workload; });
      var boxes = {};
      runs.forEach(function (r) { boxes[r.box] = true; });
      Object.keys(boxes).forEach(function (bx) {
        AUDIO_LANES.forEach(function (L) {
        var dasHits = runs.filter(function (r) {
          return r.box === bx && r.engine === 'das' && (r.backend || 'cpu') === L.backend &&
            (r.flavor || 'tuned').indexOf(L.das) === 0;
        });
        if (!dasHits.length) return;
        var das = newest(dasHits);
        runs.filter(function (r) {
          return r.box === bx && r.engine !== 'das' && (r.backend || 'cpu') === L.ref;
        }).forEach(function (ref) {
          Object.keys(das.tests || {}).forEach(function (k) {
            if (k.indexOf('asr:') !== 0 || !ref.tests || !ref.tests[k]) return;
            var dm = das.tests[k].ms, rm = ref.tests[k].ms;
            if (!(dm > 0) || !(rm > 0)) return;        // no reference → no row
            out.push({
              model: m.arch || m.gguf, box: bx, lane: L.label,
              boxName: boxLabel(das.hardware && das.hardware.cpu, bx),
              tool: ENGINE_LABEL[ref.engine] || ref.engine,
              wav: k.slice(4), audio_s: das.tests[k].audio_s || 0,
              das_ms: dm, ref_ms: rm,
              speed: ratio(rm, dm),                    // >1 = das faster (times, so inverted)
              voided: ((das.void_clips || '') + ',' + (ref.void_clips || '')).split(',')
                .map(function (s) { return s.trim(); }).indexOf(k.slice(4)) >= 0,
              xrt: dm > 0 ? ((das.tests[k].audio_s || 0) * 1000) / dm : 0,
              modelNote: m.note || '',
              noted: !!(m.note || das.comment || ref.comment),
              das: das, ref: ref
            });
          });
        });
        });
      });
    });
    return out;
  }

  function mountAudio(recs) {
    [
      { workload: 'asr', sec: 'asr', what: 'paired transcriptions' },
      { workload: 'audio-chat', sec: 'audiochat', what: 'paired runs' }
    ].forEach(function (cfg) {
      var rows = buildAudioRows(recs, cfg.workload);
      if (!rows.length) return;
      document.getElementById(cfg.sec).hidden = false;
      makeTable({
        table: '#' + cfg.sec + '-table', filters: '#' + cfg.sec + '-filters', caption: '#' + cfg.sec + '-caption',
        rows: rows, sort: { key: 'model', desc: false },
        tiebreak: function (a, b) { return a.audio_s - b.audio_s || a.tool.localeCompare(b.tool); },
        cols: [
          { key: 'model', label: 'model', get: function (r) { return r.model; },
            cell: function (r) { return modelCell(r, notedCell(r.model, '')); },
            cls: 'dl-td-model' },
          { key: 'box', label: 'machine', get: function (r) { return r.boxName; },
            cell: function (r) { return esc(r.boxName); }, cls: 'dl-dim2' },
          { key: 'lane', label: 'category', get: function (r) { return r.lane; },
            cell: function (r) { return esc(r.lane); }, cls: 'dl-dim2' },
          { key: 'tool', label: 'reference', get: function (r) { return r.tool; },
            cell: function (r) { return esc(r.tool); }, cls: 'dl-dim2' },
          { key: 'threads', label: 'threads', num: true, dim: true,
            get: function (r) { return (r.das && r.das.threads) || 0; },
            cell: function (r) { return r.das && r.das.threads ? String(r.das.threads) : '-'; } },
          { key: 'wav', label: 'clip', get: function (r) { return r.wav; },
            cell: function (r) { return esc(r.wav); }, cls: 'dl-dim2' },
          { key: 'audio_s', label: 'audio s', num: true, dim: true,
            get: function (r) { return r.audio_s; }, cell: function (r) { return r.audio_s > 0 ? fmt(r.audio_s) : '-'; } },
          { key: 'das_ms', label: 'das ms', num: true, grp: true, grpStart: true,
            get: function (r) { return r.das_ms; }, cell: function (r) { return ms(r.das_ms); } },
          { key: 'ref_ms', label: 'ref ms', num: true, dim: true,
            get: function (r) { return r.ref_ms; }, cell: function (r) { return ms(r.ref_ms); } },
          // a run annotated void for this clip (ref behavior difference, e.g. a decode runaway)
          // never headlines a ratio — the receipt still shows both raw times and the note
          { key: 'speed', label: 'speedup', num: true, grp: true,
            get: function (r) { return r.voided ? 0 : r.speed; },
            cell: function (r) { return r.voided ? '<td class="dl-num dl-dim">—✱</td>' : ratioCell(r.speed); } },
          // a slower-than-realtime clip lands near 1×, so keep a decimal below 10 — rounding
          // 1.5×RT to "2" would read as comfortably realtime when it is barely so
          { key: 'xrt', label: '×RT', num: true, dim: true, grpStart: true,
            get: function (r) { return r.xrt; }, cell: function (r) { return r.xrt > 0 ? fmt(r.xrt, r.xrt < 10 ? 1 : 0) : '-'; } }
        ],
        filterDefs: [
          { field: 'model', title: 'model', all: 'all models', get: function (r) { return r.model; } },
          { field: 'box', title: 'machine', all: 'all machines', get: function (r) { return r.box; }, label: function (r) { return r.boxName; } },
          { field: 'lane', title: 'category', all: 'all categories', get: function (r) { return r.lane; } },
          { field: 'tool', title: 'reference', all: 'all references', get: function (r) { return r.tool; } }
        ],
        receipt: pairReceipt,
        summary: function (shown, total) {
          return esc(measuredLine(shown)) +
            ' &nbsp;·&nbsp; showing ' + shown.length + ' of ' + total + ' ' + cfg.what +
            ' &nbsp;·&nbsp; speedup = reference time ÷ das time; ×RT = seconds of audio per second of compute';
        }
      });
      mountAudioViews(cfg.sec, rows);
    });
  }

  /* ── § 04 images in: pair rows from the same records ────────────
     One image turn per (model, box, lane): the das image-chat row against llama.cpp's
     llama-mtmd-cli row. Same LANES as § 01 — the ref flavors match (stock / clean-cpu).
     Both engines price prefill and decode as own-positions over own-time; encode is wall ms. */
  function buildImagePairs(recs) {
    var out = [];
    recs.forEach(function (m) {
      var runs = (m.runs || []).filter(function (r) { return r.workload === 'image-chat'; });
      if (!runs.length) return;
      var boxes = {};
      runs.forEach(function (r) { boxes[r.box] = true; });
      Object.keys(boxes).forEach(function (bx) {
        LANES.forEach(function (L) {
          function pick(engine, flavor) {
            var hits = runs.filter(function (r) {
              return r.box === bx && r.backend === L.backend && r.flavor === flavor && r.engine === engine;
            });
            return hits.length ? newest(hits) : null;
          }
          var das = pick('das', L.das), ref = pick('llama.cpp', L.ref);
          if (!das || !ref) return;                    // no reference → no row
          function msOf(r, k) { return (r.tests && r.tests[k]) ? r.tests[k].ms : 0; }
          out.push({
            model: m.gguf.replace(/\.gguf$/, ''), arch: m.arch || '',
            size: m.size_bytes || 0, box: bx, boxName: boxLabel(das.hardware && das.hardware.cpu, bx),
            lane: L.label, modelNote: m.note || '',
            noted: !!(m.note || das.comment || ref.comment),
            enc_das: msOf(das, 'img:enc'), enc_ref: msOf(ref, 'img:enc'),
            pp_das: tok(das, 'img:pp'), pp_ref: tok(ref, 'img:pp'),
            tg_das: tok(das, 'img:tg'), tg_ref: tok(ref, 'img:tg'),
            enc_ratio: ratio(msOf(ref, 'img:enc'), msOf(das, 'img:enc')),  // times, so inverted: >1 = das faster
            pp_ratio: ratio(tok(das, 'img:pp'), tok(ref, 'img:pp')),
            tg_ratio: ratio(tok(das, 'img:tg'), tok(ref, 'img:tg')),
            das: das, ref: ref
          });
        });
      });
    });
    return out;
  }

  function mountImage(rows) {
    if (!rows.length) return;
    document.getElementById('imagechat').hidden = false;
    makeTable({
      table: '#imagechat-table', filters: '#imagechat-filters', caption: '#imagechat-caption',
      rows: rows, sort: { key: 'size', desc: true },
      tiebreak: function (a, b) { return a.model.localeCompare(b.model) || a.boxName.localeCompare(b.boxName); },
      cols: [
        { key: 'model', label: 'model', get: function (r) { return r.model; },
          cell: function (r) { return modelCell(r, notedCell(r.model, r.arch)); },
          cls: 'dl-td-model' },
        { key: 'box', label: 'machine', get: function (r) { return r.boxName; },
          cell: function (r) { return esc(r.boxName); }, cls: 'dl-dim2' },
        { key: 'lane', label: 'category', get: function (r) { return r.lane; },
          cell: function (r) { return esc(r.lane); }, cls: 'dl-dim2' },
        { key: 'threads', label: 'threads', num: true, dim: true,
          get: function (r) { return (r.das && r.das.threads) || 0; },
          cell: function (r) { return r.das && r.das.threads ? String(r.das.threads) : '-'; } },
        { key: 'size', label: 'size GB', num: true, dim: true, get: function (r) { return r.size; },
          cell: function (r) { return r.size ? fmt(r.size / 1073741824, 1) : '-'; } },
        { key: 'enc_das', label: 'encode das', num: true, grp: true, grpStart: true,
          get: function (r) { return r.enc_das; }, cell: function (r) { return ms(r.enc_das); } },
        { key: 'enc_ref', label: 'lcpp', num: true, dim: true,
          get: function (r) { return r.enc_ref; }, cell: function (r) { return ms(r.enc_ref); } },
        { key: 'enc_ratio', label: 'ratio', num: true, grp: true,
          get: function (r) { return r.enc_ratio; }, cell: function (r) { return ratioCell(r.enc_ratio); } },
        { key: 'pp_das', label: 'prefill das', num: true, grp: true, grpStart: true,
          get: function (r) { return r.pp_das; }, cell: function (r) { return tps(r.pp_das); } },
        { key: 'pp_ref', label: 'lcpp', num: true, dim: true,
          get: function (r) { return r.pp_ref; }, cell: function (r) { return tps(r.pp_ref); } },
        { key: 'pp_ratio', label: 'ratio', num: true, grp: true,
          get: function (r) { return r.pp_ratio; }, cell: function (r) { return ratioCell(r.pp_ratio); } },
        { key: 'tg_das', label: 'decode das', num: true, grp: true, grpStart: true,
          get: function (r) { return r.tg_das; }, cell: function (r) { return tps(r.tg_das); } },
        { key: 'tg_ref', label: 'lcpp', num: true, dim: true,
          get: function (r) { return r.tg_ref; }, cell: function (r) { return tps(r.tg_ref); } },
        { key: 'tg_ratio', label: 'ratio', num: true, grp: true,
          get: function (r) { return r.tg_ratio; }, cell: function (r) { return ratioCell(r.tg_ratio); } }
      ],
      filterDefs: [
        { field: 'model', title: 'model', all: 'all models', get: function (r) { return r.model; } },
        { field: 'box', title: 'machine', all: 'all machines', get: function (r) { return r.box; }, label: function (r) { return r.boxName; } },
        { field: 'lane', title: 'category', all: 'all categories', get: function (r) { return r.lane; } }
      ],
      receipt: pairReceipt,
      summary: function (shown, total) {
        return esc(measuredLine(shown)) +
          ' &nbsp;·&nbsp; showing ' + shown.length + ' of ' + total + ' paired turns' +
          ' &nbsp;·&nbsp; one 640×480 picture; encode = the vision tower alone, wall ms';
      }
    });
  }

  function mountImageViews(rows) {
    wireBars('imagechat', rows, function (all, filters, m) {
      m = m || 'pp';
      return all.filter(function (r) {
        return (!filters.model || r.model === filters.model) &&
               (!filters.box || r.box === filters.box) &&
               (!filters.lane || r.lane === filters.lane) &&
               r[m + '_ratio'] !== null;
      }).sort(function (a, b) { return b[m + '_ratio'] - a[m + '_ratio']; })
        .map(function (r) {
          return { label: r.model, sub: r.boxName + ' · ' + r.lane,
                   das: r[m + '_das'], ref: r[m + '_ref'],
                   dasText: tps(r[m + '_das']), refText: tps(r[m + '_ref']),
                   ratio: r[m + '_ratio'], r: r };
        });
    }, pairReceipt);
  }

  /* Everything numeric in the hero derives from the records — the same rows the tables show,
     never a hand-typed number. The "up to N×" is the best audio-in pair, floored (6.19 measured
     → "6×"); the terminal output is the strongest un-annotated LLM pair, re-picked per load. */
  function mountHero(recs) {
    var el = document.getElementById('dl-hero-x');
    if (el) {
      var best = 0;
      buildAudioRows(recs, 'audio-chat').forEach(function (r) {
        if (r.noted) return;   // caveated rows never front the page (same rule as the mock)
        if (r.speed > best) best = r.speed;
      });
      if (best > 1) el.textContent = best >= 3 ? String(Math.floor(best)) : best.toFixed(1);
    }
    var top = null;
    buildLLMPairs(recs).forEach(function (r) {
      if (r.noted || !(r.pp_ratio > 1) || !(r.tg_ratio > 1)) return;   // caveated rows never front the page
      if (!(r.das.files && r.das.files.length)) return;               // nor rows without full input receipts
      if (!top || r.pp_ratio * r.tg_ratio > top.pp_ratio * top.tg_ratio) top = r;
    });
    if (!top) return;
    function put(id, text) {
      var n = document.getElementById(id);
      if (n) n.textContent = text;
    }
    put('dl-mock-load', '  loaded ' + top.model + ' · q8 · ' + fmt(top.size / 1073741824, 1) + ' GB · ' +
      top.lane + ' / ' + top.das.threads + ' threads');
    put('dl-mock-pp', fmt(top.pp_das, 1) + ' tok/s');
    put('dl-mock-ppr', '· das/llama.cpp ' + fmt(top.pp_ratio, 2) + '×');
    put('dl-mock-tg', fmt(top.tg_das, 1) + ' tok/s');
    put('dl-mock-tgr', '· das/llama.cpp ' + fmt(top.tg_ratio, 2) + '×');
    put('dl-mock-foot', '  ✓ no hand-written assembly · ' + top.boxName + ' · measured ' + (top.das.date || ''));
  }

  /* ── load ───────────────────────────────────────────────────── */
  fetch('files/dasllama/bench_records.json')
    .then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); })
    .then(function (recs) {
      var llmRows = buildLLMPairs(recs);
      mountLLM(llmRows);
      mountLLMViews(llmRows);
      mountAudio(recs);
      var imgRows = buildImagePairs(recs);
      mountImage(imgRows);
      mountImageViews(imgRows);
      mountHero(recs);
    })
    .catch(function () { /* no records yet — sections stay hidden */ });
})();