/* Quant-picking frontend. Catalog + fit data come live from the
 * LocalLLaMA explorer API; the best-quant choice per model comes from
 * rankQuants.js + quant_scores.json (measured KL benchmarks). */
"use strict";

const API = "https://codelion-local-model-explorer.hf.space";
const $ = (s, r = document) => r.querySelector(s);
const $$ = (s, r = document) => [...r.querySelectorAll(s)];
let META = null, SCORES = null, runId = 0, offset = 0, total = 0, nofitDropped = 0, autoPages = 0, seenModels = [];

function el(tag, cls, text) {
  const n = document.createElement(tag);
  if (cls) n.className = cls;
  if (text !== undefined) n.textContent = text;
  return n;
}
function opt(value, label, selected) {
  const o = document.createElement("option");
  o.value = value; o.textContent = label;
  if (selected) o.selected = true;
  return o;
}
const gb = (v, d = 1) => v === null || v === undefined ? "?" : `${Number(v).toFixed(d)} GB`;
const bytesGB = (b) => gb(b / 1e9);
const params = (p) => p >= 1e9 ? `${+(p / 1e9).toFixed(p >= 1e10 ? 0 : 1)}B` : `${Math.round(p / 1e6)}M`;
const compact = (n) => n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${Math.round(n / 1e3)}k` : String(n || 0);
const ctxLabel = (c) => c >= 1024 ? `${Math.round(c / 1024)}k` : String(c);

function rig() {
  const kind = $('input[name="kind"]:checked').value;
  const out = { kind, gpus: [], ram_gb: 32,
    vram_spare: +($("#vram-spare") || {}).value || 0,
    ram_spare: +($("#ram-spare") || {}).value || 0 };
  if (kind === "gpu") {
    const one = (sel, vsel, csel, fb) => {
      const name = $(sel).value;
      const each = name === "custom" ? Math.max(1, Math.min(256, +$(vsel).value || fb)) : META.hardware.gpus[name];
      return Array.from({ length: +$(csel).value || 1 }, () => each);
    };
    out.gpus = one("#gpu", "#custom-vram", "#gpu-count", 24);
    if (!$("#gpu2-wrap").hidden) out.gpus = out.gpus.concat(one("#gpu2", "#custom-vram2", "#gpu2-count", 8)).slice(0, 16);
    out.ram_gb = +$("#ram").value;
  } else if (kind === "unified") {
    out.unified_system = $("#usys").value;
    out.ram_gb = +$("#umem").value;
  } else {
    out.ram_gb = +$("#ram").value;
  }
  return out;
}

function query(append) {
  const r = rig();
  const pair = $("#kv").value;
  // upstream kv_type only accepts f16/q8_0/q4_0 with K=V. ask q8_0 and
  // rescale client-side (rescaleKvFits): q8_0-based scores and fits are
  // close to every smaller pair, so the page stays nearly consistent
  // (an f16 base would leave every score stale). f16/bf16 ask f16.
  const q8base = pair !== "f16/f16" && pair !== "bf16/bf16";
  const rescaled = q8base ? kvScale(pair) * 16 / 8.5 < 1 : false;
  return {
    hardware: { kind: r.kind, gpus: r.gpus, ram_gb: r.ram_gb,
      ...(r.unified_system ? { unified_system: r.unified_system } : {}) },
    context: +$("#ctx").value, kv_type: q8base ? "q8_0" : "f16", kv_pair: pair,
    min_bits: +$("#min-bits").value,
    sort: $("#sort").value, family: $("#family").value || null, size: $("#size").value || null,
    search: $("#search").value.trim() || null,
    moe_only: $("#moe-only").checked, vision_only: $("#vision-only").checked,
    fits_only: rescaled ? false : ($("#fits-only").checked || $("#sort").value === "best"),
    vram_only: rescaled ? false : (r.kind === "gpu" && $("#vram-only").checked),
    mmproj: $("#mmproj").value,
    offset: append ? offset : 0, limit: 24,
  };
}

function rankWithReserve(allOptions, fam, r) {
  // rank headroom-kept options; when the reserve hides every fitting
  // quant, fall back to ranking everything so the card can name what
  // missed and by how much instead of showing nothing-fits.
  const fitOk = (o) => ({ ...o,
    fit_ok: o.fit && o.fit.tier !== "no" && o.fit.tier !== "no_vram" });
  const { kept, hidden } = applyHeadroom(allOptions, headroomCaps(r), r.kind);
  let { pick, warnings } = rankOptions(kept.map(fitOk), fam, SCORES);
  let overReserve = false;
  if (!pick && hidden) {
    ({ pick, warnings } = rankOptions((allOptions || []).map(fitOk), fam, SCORES));
    overReserve = !!pick;
  }
  return { pick, warnings, hidden, overReserve };
}

function reserveNote(pick, r) {
  if (!pick || !pick.fit) return null;
  const caps = headroomCaps(r);
  const over = [];
  if (r.kind !== "cpu" && (pick.fit.gpu_gb || 0) > caps.vram)
    over.push(`${gb((pick.fit.gpu_gb || 0) - caps.vram)} VRAM`);
  if ((pick.fit.ram_gb || 0) > caps.ram)
    over.push(`${gb((pick.fit.ram_gb || 0) - caps.ram)} RAM`);
  if (!over.length) return null;
  return `Over your headroom reserve by ${over.join(" + ")} — lower "Keep free" to run it.`;
}

const SCORE_PARTS = [["fit", "Fit"], ["capacity", "Size"], ["popularity", "Downloads"], ["recency", "New"], ["community", "Reports"]];
function scoreTitle(m) {
  const w = META.score_weights || {};
  return SCORE_PARTS.map(([k, l]) => `${l}: ${Math.round((m.components[k] || 0) * w[k] * 100)} of ${Math.round(w[k] * 100)}`).join("\n");
}

function rail(fit, r) {
  if (!fit) return null;
  const box = el("div", "rail");
  const pct = (v, cap) => `${Math.max(0, Math.min(100, (v / cap) * 100))}%`;
  const vram = r.kind === "gpu" ? r.gpus.reduce((a, v) => a + v, 0) : 0;
  const ram = r.ram_gb;
  if (r.kind === "unified") {
    const share = (META.hardware.unified_shares || {})[r.unified_system];
    const cap = r.ram_gb * (share || (r.ram_gb <= 36 ? 0.67 : 0.75));
    const pool = el("div", "pool");
    pool.style.flex = "1";
    const i = el("i", "gpu"); i.style.width = pct(fit.gpu_gb, cap); pool.append(i);
    if (fit.gpu_gb > cap) { const o = el("i", "over"); o.style.width = "30%"; pool.append(o); }
    box.append(pool);
    return box;
  }
  if (vram) {
    const pool = el("div", "pool"); pool.style.flex = `${vram / (vram + ram)}`;
    const i = el("i", "gpu"); i.style.width = pct(fit.gpu_gb, vram); pool.append(i);
    box.append(pool);
  }
  const ramPool = el("div", "pool"); ramPool.style.flex = `${ram / ((vram || 1) + ram)}`;
  const j = el("i", fit.tier === "gpu_moe" ? "exp" : "ram"); j.style.width = pct(fit.ram_gb, ram);
  ramPool.append(j);
  if (fit.tier === "no" || fit.tier === "no_vram") { const o = el("i", "over"); o.style.width = "30%"; ramPool.append(o); }
  box.append(ramPool);
  return box;
}

function fitText(fit) {
  if (!fit) return "";
  const parts = [fit.label];
  if (fit.tier !== "no" && fit.tier !== "no_vram") parts.push(`${gb(fit.gpu_gb)} GPU, ${gb(fit.ram_gb)} RAM`);
  return parts.join(" · ");
}

function card(m) {
  const c = el("div", "card");
  const h = el("h3");
  const btn = el("button", null, m.name);
  h.append(btn);
  c.append(h);
  const tags = [
    m.params ? params(m.params) + (m.active_params ? ` (${params(m.active_params)} active)` : "") : null,
    m.moe ? "MoE" : null, m.vision ? "vision" : null, m.family,
    `${m.repo_count} GGUF repos`, `${compact(m.downloads)} downloads`,
  ].filter(Boolean).join(" · ");
  c.append(el("div", "meta", tags));
  const side = el("div", "r-side");
  const sc = el("span", "score", String(Math.round(m.score)));
  sc.title = scoreTitle(m) + "\nHardware ranking, not model quality.";
  side.append(sc, el("span", "muted", "score"));
  c.append(side);
  const status = el("p", "muted", "Ranking quants…");
  c.append(status);
  btn.addEventListener("click", () => openDetail(m, query()));
  return { c, status };
}

// the backend bakes the QUERIED kv type into run commands; rewrite the
// flags to the picked K/V pair (asymmetric included). f16 needs no flags.
function kvCmd(cmd, pair) {
  let [k, v] = String(pair || "f16/f16").split("/");
  if (KV_BITS[k] === undefined) k = "f16";
  if (KV_BITS[v] === undefined) v = "f16";
  cmd = cmd.replace(/\s*(--cache-type-k|-ctk)([=\s]+)\S+/g, k === "f16" ? "" : ` -ctk ${k}`)
           .replace(/\s*(--cache-type-v|-ctv)([=\s]+)\S+/g, v === "f16" ? "" : ` -ctv ${v}`);
  if (k !== "f16" && !/(--cache-type-k|-ctk)([=\s]|$)/.test(cmd)) cmd += ` -ctk ${k}`;
  if (v !== "f16" && !/(--cache-type-v|-ctv)([=\s]|$)/.test(cmd)) cmd += ` -ctv ${v}`;
  return cmd;
}

function renderDetail(m, body, kvPair) {
  const d = m._detail, pick = m._pick;
  const g = d.geometry;
  const facts = [
    d.params ? `${params(d.params)} parameters${d.active_params ? `, ${params(d.active_params)} active` : ""}` : null,
    g ? `${g.n_layers} layers` : null,
    g && g.moe ? `${g.expert_count} experts, ${g.expert_used} per token` : null,
    d.context_length ? `${ctxLabel(d.context_length)} native context` : null,
    g && g.notes && g.notes.length ? g.notes.join(", ") : null,
  ].filter(Boolean).join("  •  ");
  if (facts) body.append(el("p", "muted", facts));

  const opts = d.options || [];
  const sel = opts.find((o) => pick && o.repo === pick.repo && o.quant === pick.quant) || opts[0];
  if (sel && sel.commands) {
    const row = el("div", "row");
    const copy = el("button", "btn ghost", "Copy command");
    // upstream still emits the old `llama-server` binary name; current llama.cpp renamed it.
    const pre = el("pre", "cmd", kvCmd((sel.commands["llama.cpp"] || "").replace(/llama-server/g, "llama serve"), kvPair));
    copy.addEventListener("click", async () => {
      try { await navigator.clipboard.writeText(pre.textContent); copy.textContent = "Copied"; }
      catch { copy.textContent = "Select and copy"; }
      setTimeout(() => (copy.textContent = "Copy command"), 1500);
    });
    row.append(el("span", "muted", `Run it (${sel.quant} from ${sel.repo.split("/")[0]}):`), copy);
    body.append(row, pre);
    if (sel.fit) body.append(el("div", "muted", fitText(sel.fit)));
    if (m._reserveNote) body.append(el("div", "warn", m._reserveNote));
  }

  body.append(el("h3", null, `Every quant (${opts.length})`));
  const hr = headroomNote(m);
  if (hr) body.append(el("p", "muted", hr));
  if (d.hidden_below_min_bits) {
    body.append(el("p", "muted",
      `${d.hidden_below_min_bits} quant(s) hidden by the bit floor. Lower "Lowest quant to consider" to see them.`));
  }
  const t = el("table", "quants");
  const head = el("tr");
  for (const [h, num] of [["Uploader", 0], ["Quant", 0], ["Size", 1], ["On your hardware", 0]]) {
    head.append(el("th", num ? "num" : null, h));
  }
  const tb = el("tbody");
  for (const o of [...opts].sort((a, b) => a.size - b.size)) {
    const tr = el("tr");
    if (pick && o.quant === pick.quant && o.repo === pick.repo) tr.className = "is-pick";
    const qtd = el("td");
    qtd.append(el("b", null, o.quant));
    if (pick && o.quant === pick.quant && o.repo === pick.repo) qtd.append(" ◀ pick");
    const link = el("a", null, o.repo.split("/")[0]);
    link.href = o.url; link.target = "_blank"; link.rel = "noopener";
    const utd = el("td"); utd.append(link);
    tr.append(utd, qtd, el("td", "num", bytesGB(o.size)), el("td", null, o.fit ? o.fit.label : "?"));
    tb.append(tr);
  }
  t.append(head, tb);
  body.append(t);

  if (d.kv_cache_gb) {
    body.append(el("h3", null, "KV cache"));
    const strip = el("div", "kv-strip");
    for (const [ctx, v] of Object.entries(d.kv_cache_gb)) {
      const s = el("span", null, `${ctxLabel(+ctx)} `);
      s.append(el("b", null, gb(v, v < 10 ? 2 : 1)));
      strip.append(s);
    }
    body.append(strip);
  }
  const fm = d.other_formats || {};
  const names = { mlx: "MLX", onnx: "ONNX", awq: "AWQ", gptq: "GPTQ", fp8: "FP8", exl3: "EXL3", exl2: "EXL2" };
  const any = Object.keys(names).filter((k) => fm[k] && fm[k].length);
  if (any.length) {
    body.append(el("h3", null, "Other formats"));
    for (const k of any) {
      const p = el("p", "muted", `${names[k]} (${fm[k].length}): `);
      for (const id of fm[k].slice(0, 4)) {
        const a = el("a", null, id.split("/")[1] || id);
        a.href = `https://huggingface.co/${id}`; a.target = "_blank"; a.rel = "noopener";
        p.append(a, "  ");
      }
      body.append(p);
    }
  }
  const cm = d.community;
  if (cm && cm.bench_rows && cm.bench_rows.length) {
    body.append(el("h3", null, "Community benchmarks"));
    const bt = el("table", "quants");
    const bh = el("tr");
    for (const [h, num] of [["Quant", 0], ["Hardware", 0], ["Backend", 0], ["Prompt t/s", 1], ["Gen t/s", 1]]) {
      bh.append(el("th", num ? "num" : null, h));
    }
    const bb = el("tbody");
    for (const b of cm.bench_rows) {
      const tr = el("tr");
      tr.append(el("td", null, b.quant || "?"),
        el("td", null, b.gpu_name || b.gpu_model || (b.vram_class ? `${b.vram_class} GB GPU` : "CPU")),
        el("td", null, b.backend || "?"),
        el("td", "num", b.prompt_tps ? String(Math.round(b.prompt_tps)) : "—"),
        el("td", "num", b.generation_tps ? b.generation_tps.toFixed(1) : "—"));
      bb.append(tr);
    }
    bt.append(bh, bb);
    body.append(bt);
  }
}

function headroomCaps(r) {
  // usable GB after keeping the spare free. the upstream estimator has
  // no headroom params, so this is a client-side filter on fit_gb.
  if (r.kind === "unified") {
    const share = (META.hardware.unified_shares || {})[r.unified_system];
    const cap = r.ram_gb * (share || (r.ram_gb <= 36 ? 0.67 : 0.75));
    return { vram: cap - r.ram_spare, ram: cap - r.ram_spare };
  }
  const vram = r.kind === "gpu" ? r.gpus.reduce((a, v) => a + v, 0) : 0;
  return { vram: vram - r.vram_spare, ram: r.ram_gb - r.ram_spare };
}

function applyHeadroom(options, caps, kind) {
  // drop options that fit the estimator but leave less than the spare
  // free, e.g. a 31.7GB-RAM fit on a 32GB box with a 2GB reserve.
  // already-failing tiers pass through: the ranker reports those.
  let hidden = 0;
  const kept = [];
  for (const o of options || []) {
    const fit = o.fit || {};
    const okTier = fit.tier && fit.tier !== "no" && fit.tier !== "no_vram";
    const over = (kind !== "cpu" && (fit.gpu_gb || 0) > caps.vram)
      || (fit.ram_gb || 0) > caps.ram;
    if (okTier && over) { hidden++; continue; }
    kept.push(o);
  }
  return { kept, hidden };
}

// Nominal bits per cached element (quants carry block-scale overhead).
// Merged bench: quant-bench/kv_scores.json (3 models, KL vs f16 @4k).
const KV_BITS = { f16: 16, bf16: 16, q8_0: 8.5, q5_0: 5.5, q5_1: 6,
  q4_0: 4.5, q4_1: 5, iq4_nl: 4.4 };
const KV_FULL_TIERS = new Set(["gpu", "gpu_moe", "cpu", "unified", "ram"]);

function kvScale(pair) {
  const [k, v] = String(pair || "f16/f16").split("/");
  return ((KV_BITS[k] ?? 16) + (KV_BITS[v] ?? 16)) / 2 / 16;
}

// f16-base rescale: the upstream API only accepts f16/q8_0/q4_0 and one
// type for both K and V, so always query f16 and scale the KV part.
// KV bytes are exact math (2*layers*kv_heads*head_dim*ctx*bpe), verified
// against the estimator's own kv_cache_gb; weights + per-model overhead
// pass through untouched. Only full tiers and failing tiers are adjusted;
// partial offloads keep the estimator's f16 numbers (conservative).
function rescaleKvFits(d, pair, ctx, hw) {
  // ratio is against the queried base: q8_0 for everything below it,
  // f16 for f16/bf16 (ratio 1, no-op). see query().
  const base = pair === "f16/f16" || pair === "bf16/bf16" ? 16 : 8.5;
  const ratio = kvScale(pair) * 16 / base;
  if (!(ratio < 1)) return;
  const kvf = d.kv_cache_gb && d.kv_cache_gb[String(ctx)];
  if (!(kvf > 0)) return;
  const scaled = {};
  for (const [c, g] of Object.entries(d.kv_cache_gb)) scaled[c] = g * ratio;
  d.kv_cache_gb = scaled;
  const delta = kvf * (1 - ratio);
  const vram = hw.kind === "gpu" ? hw.gpus.reduce((a, x) => a + x, 0) : 0;
  // per-model overhead + RAM constant: median over the estimator's own
  // full-gpu options (single-option calibration flips picks on 0.2GB
  // noise; the backend's implied overhead spans ~1.7-2.8 per model).
  let oh = 1.75, ramConst = 1.2;
  const gpuRefs = (d.options || []).filter((o) => o.fit && o.fit.tier === "gpu");
  if (gpuRefs.length) {
    const med = (xs) => { const s = xs.filter((x) => x > 0).sort((a, b) => a - b);
      return s.length ? s[Math.floor(s.length / 2)] : null; };
    oh = med(gpuRefs.map((o) => (o.fit.gpu_gb || 0) - o.size / 1e9 - kvf)) ?? oh;
    ramConst = med(gpuRefs.map((o) => o.fit.ram_gb || 0)) ?? ramConst;
  } else {
    const ref = (d.options || []).find((o) => o.fit &&
      (o.fit.tier === "cpu" || o.fit.tier === "ram"));
    if (ref) oh = Math.max(0, (ref.fit.gpu_gb || ref.fit.ram_gb || 0) - ref.size / 1e9 - kvf);
  }
  const full = (o, tier, gpuGb, ramGb, label) => {
    o.fit.tier = tier; o.fit.gpu_gb = gpuGb; o.fit.ram_gb = ramGb;
    o.fit.label = label; o.fit.ngl = o.fit.layers;
  };
  const promote = (o) => {
    // failing AND partial tiers: the estimator graded these under f16,
    // where nothing big fits whole. rebuild as full when the scaled
    // footprint fits; otherwise leave the estimator's numbers alone.
    const sizeGb = o.size / 1e9;
    const candGpu = sizeGb + kvf * ratio + oh;
    if (hw.kind === "cpu") {
      if (candGpu <= hw.ram_gb) full(o, "cpu", 0, candGpu, "Fits in RAM (CPU)");
    } else if (hw.kind === "unified") {
      const share = (META.hardware.unified_shares || {})[hw.unified_system];
      const cap = hw.ram_gb * (share || (hw.ram_gb <= 36 ? 0.67 : 0.75));
      if (candGpu <= cap) full(o, "unified", candGpu, 0, "Fits in shared memory");
    } else if (candGpu <= vram) {
      full(o, "gpu", candGpu, ramConst, "Fits on GPU");
    }
    // deliberately no ram-tier promotion on gpu rigs: a CPU-resident pick
    // would outrank GPU picks on quality and recommend slower inference.
    // the estimator's partial/no tiers stand instead, as before.
  };
  for (const o of d.options || []) {
    const fit = o.fit;
    if (!fit) continue;
    if (!KV_FULL_TIERS.has(fit.tier)) { promote(o); continue; }
    if (fit.tier === "gpu" || fit.tier === "gpu_moe") fit.gpu_gb -= delta;
    else if (fit.tier === "cpu" || fit.tier === "ram") fit.ram_gb -= delta;
    else if (fit.tier === "unified") fit.gpu_gb -= delta;
  }
}

function headroomNote(m) {
  if (!m._hiddenHeadroom) return null;
  const s = m._spares || {};
  const bits = [];
  if (s.v) bits.push(`${s.v} GB VRAM`);
  if (s.r) bits.push(`${s.r} GB RAM`);
  return `${m._hiddenHeadroom} quant(s) hidden by the headroom reserve (${bits.join(" + ")} kept free). Lower it to see them.`;
}

function ensureDialog() {
  let dlg = $("#detail");
  if (!dlg) {
    dlg = document.createElement("dialog");
    dlg.id = "detail";
    const x = el("button", "btn ghost small dlg-x", "Close");
    x.addEventListener("click", () => dlg.close());
    dlg.append(x, el("h3", "dlg-title"), el("div", "dlg-body"));
    dlg.addEventListener("click", (e) => { if (e.target === dlg) dlg.close(); });
    document.body.append(dlg);
  }
  return dlg;
}

async function openDetail(m, q) {
  const dlg = ensureDialog();
  const body = $(".dlg-body", dlg);
  $(".dlg-title", dlg).textContent = m.name;
  if (!m._detail || m._kvPair !== q.kv_pair || m._ctx !== q.context) {
    body.replaceChildren(el("p", "muted", "Loading quants…"));
    if (!dlg.open) dlg.showModal();
    try {
      const d = await detailFor(m.key, q);
      const r = rig();
      rescaleKvFits(d, q.kv_pair, q.context, q.hardware);
      const { pick, hidden, overReserve } = rankWithReserve(d.options, famGuess(m.key), r);
      m._detail = d; m._pick = pick; m._kvPair = q.kv_pair; m._ctx = q.context;
      m._hiddenHeadroom = hidden;
      m._overReserve = overReserve;
      m._reserveNote = overReserve ? reserveNote(pick, r) : null;
      m._spares = { v: r.vram_spare, r: r.ram_spare };
    } catch (err) {
      body.replaceChildren(el("p", "muted",
        `Couldn't load quants (${String(err).slice(0, 100)}).`));
      return;
    }
  } else if (!dlg.open) {
    dlg.showModal();
  }
  body.replaceChildren();
  renderDetail(m, body, q.kv_pair);
}

async function detailFor(key, q, signal) {
  const r = await fetch(`${API}/api/model`, { method: "POST",
    headers: { "content-type": "application/json" }, signal,
    body: JSON.stringify({ key, hardware: q.hardware, context: q.context,
      kv_type: q.kv_type, priority: "balanced", min_bits: q.min_bits,
      vram_only: q.vram_only, mmproj: q.mmproj }) });
  // priority is the upstream estimator's required field; our client-side
  // pick is single-mode and ignores it.
  if (!r.ok) throw new Error(`model ${r.status}`);
  return r.json();
}

function famGuess(key) {
  if (/qwen/i.test(key)) return "Qwen";
  if (/gemma/i.test(key)) return "Gemma";
  return null;
}

async function search(append) {
  const id = ++runId;
  const q = query(append);
  if (!append) offset = 0;
  const box = $("#results");
  if (!append) box.replaceChildren();
  $("#count").textContent = append ? $("#count").textContent : "Finding models…";
  const ctrl = new AbortController();
  const alive = () => id === runId;

  let res;
  try {
    const rr = await fetch(`${API}/api/recommend`, { method: "POST",
      headers: { "content-type": "application/json" }, signal: ctrl.signal,
      body: JSON.stringify(q) });
    if (!rr.ok) throw new Error(`recommend ${rr.status}`);
    res = await rr.json();
  } catch {
    if (alive()) $("#count").textContent = "Couldn't reach the catalog API. Try again.";
    return;
  }
  if (!alive()) return;
  total = res.total;
  offset += res.results.length;
  $("#count").textContent = `${total.toLocaleString()} models`;
  $("#more").hidden = offset >= total;
  const r = rig();
  // best-sort promises fitting models, so non-fits are filtered server-side
  // (fits_only above) and dropped client-side (headroom residuals) below.
  const bestSort = q.sort === "best";
  if (!append) { nofitDropped = 0; autoPages = 0; seenModels = []; }
  seenModels.push(...res.results);

  for (const m of res.results) {
    const ui = card(m);
    m._ui = ui;
    box.append(ui.c);
  }

  const queue = [...res.results];
  async function worker() {
    while (alive() && queue.length) {
      const m = queue.shift();
      try {
        const d = await detailFor(m.key, q, ctrl.signal);
        if (!alive()) return;
        rescaleKvFits(d, q.kv_pair, q.context, q.hardware);
        const { pick, warnings, hidden, overReserve } = rankWithReserve(d.options, famGuess(m.key), r);
        m._detail = d; m._pick = pick;
        m._hiddenHeadroom = hidden;
        m._overReserve = overReserve;
        m._reserveNote = overReserve ? reserveNote(pick, r) : null;
        m._spares = { v: r.vram_spare, r: r.ram_spare };
        const ui = m._ui;
        if (!ui) continue;
        ui.status.replaceChildren();
        if (pick && !(bestSort && overReserve)) {
          const line = el("div", "choice");
          line.append(el("b", null, pick.quant),
            ` from ${pick.repo.split("/")[0]} — ${bytesGB(pick.size)}${pick.full === false ? " (partial offload)" : ""}`);
          ui.status.append(line);
          ui.status.append(el("div", "muted", fitText(pick.fit)));
          for (const w of warnings) ui.status.append(el("div", "warn", w));
          if (m._reserveNote) ui.status.append(el("div", "warn", m._reserveNote));
          const hr = headroomNote(m);
          if (hr && !overReserve) ui.status.append(el("div", "muted", hr));
          const railEl = rail(pick.fit, r);
          if (railEl) ui.status.append(railEl);
        } else if (bestSort) {
          ui.c.remove();
          nofitDropped++;
        } else {
          ui.status.textContent = warnings[0] || "Doesn't fit this hardware.";
        }
      } catch (err) {
        if (alive() && m._ui) m._ui.status.textContent =
          `Quant ranking failed (${String(err).slice(0, 100)}).`;
      }
    }
  }
  await Promise.all(Array.from({ length: 4 }, worker));
  if (!alive()) return;
  // a best-sort batch can hide entirely (e.g. nothing but 35Bs on top at
  // tight headroom): page forward while the screen is still empty, bounded
  // so it can never run away. any new search or click stops the chain.
  if (bestSort && box.childElementCount === 0 && autoPages < 4 && offset < total) {
    autoPages++;
    search(true);
    return;
  }
  // the server can no longer pre-filter fits (it only speaks q8_0/f16),
  // so best-sort keeps server score order and the client drops whatever
  // has no pick. count what is shown — the server total is unfiltered.
  // the vram-only and fits-only checkboxes are enforced here too, since
  // their server-side equivalents are forced off while rescaling.
  if (bestSort || $("#fits-only").checked) {
    for (const m of seenModels) {
      if (!m._ui || !m._ui.c.isConnected) continue;
      if (!m._pick) { m._ui.c.remove(); nofitDropped++; }
    }
  }
  if ($("#vram-only").checked && r.kind === "gpu") {
    for (const m of seenModels) {
      if (!m._ui || !m._ui.c.isConnected) continue;
      if (!m._pick || !m._pick.fit || m._pick.fit.tier !== "gpu") {
        m._ui.c.remove(); nofitDropped++;
      }
    }
  }
  if (bestSort) {
    $("#count").textContent =
      `${box.childElementCount.toLocaleString()} models that fit your hardware`;
  }
}

let deb;
function schedule(append) {
  clearTimeout(deb);
  deb = setTimeout(() => search(append || false), 250);
}

function syncKind() {
  const kind = $('input[name="kind"]:checked').value;
  $$("[data-show]").forEach((n) => {
    if (n.id === "gpu2-wrap") return; // toggle-owned, not kind-owned
    n.hidden = !n.dataset.show.split(" ").includes(kind);
  });
  $("#custom-vram-field").hidden = kind !== "gpu" || $("#gpu").value !== "custom";
  $("#custom-vram2-field").hidden = $("#gpu2").value !== "custom";
  $("#gpu2-toggle").textContent = $("#gpu2-wrap").hidden ? "Add a different card" : "Remove the other card";
}

async function boot() {
  try {
    META = await fetch(`${API}/api/meta`).then((r) => r.json());
    SCORES = await fetch("quant_scores.json").then((r) => r.json());
  } catch {
    $("#count").textContent = "Couldn't load. Check your connection and refresh.";
    return;
  }
  const H = META.hardware;
  const groups = (sel) => {
    for (const [label, names] of H.gpu_groups) {
      const g = document.createElement("optgroup");
      g.label = label;
      for (const n of names) g.append(opt(n, `${n.replace(/^(NVIDIA|AMD|Intel) /, "")} (${H.gpus[n]} GB)`));
      $(sel).append(g);
    }
    $(sel).append(opt("custom", "Other: enter VRAM"));
  };
  groups("#gpu"); groups("#gpu2");
  // Steam Hardware Survey defaults (Jul 2026): RTX 3060 most common GPU,
  // 16 GB most common RAM, 64k ctx per the bench follow-ups.
  $("#gpu").value = "NVIDIA RTX 3060 12GB";
  $("#gpu2").value = "NVIDIA RTX 4060";
  const vramSet = [...new Set(Object.values(H.gpus))].sort((a, b) => a - b);
  for (const sel of ["#custom-vram", "#custom-vram2"]) {
    for (const v of vramSet) $(sel).append(opt(v, `${v} GB`, v === 12));
  }
  for (const sel of ["#gpu-count", "#gpu2-count"]) {
    for (const n of [1, 2, 3, 4, 6, 8]) $(sel).append(opt(n, n, n === 1));
  }
  for (const v of H.ram) $("#ram").append(opt(v, `${v} GB`, v === 16));
  for (const s of Object.keys(H.unified)) $("#usys").append(opt(s, s));
  const syncMem = () => {
    const mems = H.unified[$("#usys").value] || [];
    $("#umem").replaceChildren(...mems.map((m) => opt(m, `${m} GB`)));
  };
  $("#usys").addEventListener("change", () => { syncMem(); schedule(); });
  syncMem();
  for (const c of H.contexts) $("#ctx").append(opt(c, `${ctxLabel(c)} tokens`, c === 65536));
  for (const f of META.families) $("#family").append(opt(f.family, `${f.family} (${f.count})`));
  for (const s of META.sizes) $("#size").append(opt(s, s));

  $("#kind").addEventListener("change", () => { syncKind(); schedule(); });
  $("#gpu").addEventListener("change", syncKind);
  $("#gpu2").addEventListener("change", syncKind);
  $("#gpu2-toggle").addEventListener("click", () => {
    $("#gpu2-wrap").hidden = !$("#gpu2-wrap").hidden;
    syncKind(); schedule();
  });
  $("#more").addEventListener("click", () => search(true));
  $("#search").addEventListener("input", () => schedule());
  for (const sel of ["#gpu", "#custom-vram", "#gpu-count", "#gpu2", "#custom-vram2", "#gpu2-count",
      "#ram", "#usys", "#umem", "#ctx", "#kv", "#mmproj", "#min-bits",
      "#vram-spare", "#ram-spare", "#family", "#size", "#sort"]) {
    $(sel).addEventListener("change", () => schedule());
  }
  for (const sel of ["#vram-only", "#fits-only", "#moe-only", "#vision-only"]) {
    $(sel).addEventListener("change", () => schedule());
  }
  $$('input[name="kind"]').forEach((i) => i.addEventListener("change", () => schedule()));
  syncKind();
  search(false);
}

boot();