#!/usr/bin/env node
// One review page, two modes, always written to the SAME file (um-review.html).
//
//   MODE=sort     (default) fast triage of clips nobody has judged yet. Three
//                 verdicts, NO window editing -- the point is speed. Anything
//                 that is nearly good but carries a neighbouring word goes to
//                 "unclean" instead of being lost.
//   MODE=salvage  work the unclean pile with the trim handles, when a target
//                 needs more clips than the clean ones alone can cover.
//
// Rounds no longer each get their own page: the manifest is a growing UNION
// keyed by clip, so an older paste-back still decodes after a rebuild.
import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, readdirSync } from "node:fs";
import { execFileSync } from "node:child_process";
import { yinFrame } from "./pitch.mjs";
import { scoreWith } from "./orderfeat.mjs";
import { stripTrailingPop } from "./deplosive.mjs";
import { clipWindow as defaultWindow } from "./clipwindow.mjs";
import { REASONS, OTHER_CODE, DELIBERATE_CODES } from "./reasons.mjs";
import { archiveMomentBase, LEAD_IN } from "./archive-url.mjs";
import path from "node:path";

import { SONG_DATA } from "./paths.mjs";
const DIR = path.resolve(path.dirname(new URL(import.meta.url).pathname));
const OUT = process.argv[2] ?? path.join(SONG_DATA, "um-review.html");
// sort = unjudged clips | salvage = the unclean pile | verify = already-accepted
// clips that the window/word changes may have altered under you
const MODE = ["salvage", "verify", "keeps"].includes(process.env.MODE) ? process.env.MODE : "sort";
// Both salvage and verify hand back a WINDOW, so both need the handles and the
// window-carrying export. Only the fast sort pass is verdict-only.
// Every mode can adjust the window now -- there is no reason to make someone
// defer a trim to a later pass just because this one is meant to be quick.
// What still differs is what the verdicts MEAN: in sort, "unclean" parks a clip
// for salvage rather than accepting it as deliberately dirty.
const EDIT = true;
const SR = 48000, PAD = 0.06;

function readWav(file) {
  const b = readFileSync(file);
  let p = 12, fmt = null, data = null;
  while (p + 8 <= b.length) {
    const id = b.toString("latin1", p, p + 4);
    const sz = b.readUInt32LE(p + 4);
    const body = p + 8;
    if (id === "fmt ") fmt = { ch: b.readUInt16LE(body + 2), sr: b.readUInt32LE(body + 4) };
    if (id === "data") { data = b.subarray(body, body + sz); break; }
    p = body + sz + (sz & 1);
  }
  const n = Math.floor(data.length / 2 / fmt.ch);
  const x = new Float32Array(n);
  for (let i = 0; i < n; i += 1) x[i] = data.readInt16LE(i * fmt.ch * 2) / 32768;
  return { x, sr: fmt.sr };
}
function writeWav(file, x, sr) {
  const n = x.length, b = Buffer.alloc(44 + n * 2);
  b.write("RIFF", 0, "latin1"); b.writeUInt32LE(36 + n * 2, 4); b.write("WAVE", 8, "latin1");
  b.write("fmt ", 12, "latin1"); b.writeUInt32LE(16, 16); b.writeUInt16LE(1, 20); b.writeUInt16LE(1, 22);
  b.writeUInt32LE(sr, 24); b.writeUInt32LE(sr * 2, 28); b.writeUInt16LE(2, 32); b.writeUInt16LE(16, 34);
  b.write("data", 36, "latin1"); b.writeUInt32LE(n * 2, 40);
  for (let i = 0; i < n; i += 1) b.writeInt16LE(Math.round(Math.max(-1, Math.min(1, x[i])) * 32767), 44 + i * 2);
  writeFileSync(file, b);
}

const dates = JSON.parse(readFileSync(path.join(DIR, "dates.json"), "utf8"));
const titles = JSON.parse(readFileSync(path.join(DIR, "titles.json"), "utf8"));
const acc = JSON.parse(readFileSync(path.join(DIR, "accepted.json"), "utf8"));
const accept = new Set(acc.accepted), rejected = new Set(acc.rejected);
let unclean = new Set();
try { unclean = new Set(JSON.parse(readFileSync(path.join(DIR, "unclean.json"), "utf8"))); } catch {}
let cands = [];
for (const f of readdirSync(path.join(SONG_DATA, "cand2")).filter((f) => f.endsWith(".json"))) {
  cands.push(...JSON.parse(readFileSync(path.join(SONG_DATA, "cand2", f), "utf8")).candidates);
}
const kOf = (c) => `${c.video}@${(+c.start).toFixed(2)}`;

// Overlapping Whisper detections can yield two entries for one vowel; they would
// collide in clip-keyed state and attach a verdict to the wrong clip.
{
  const seen = new Set();
  cands = cands.filter((c) => { const k = kOf(c); if (seen.has(k)) return false; seen.add(k); return true; });
}

let riskWhy = new Map();
if (MODE === "salvage") {
  cands = cands.filter((c) => unclean.has(kOf(c)));
} else if (MODE === "keeps") {
  // every clip kept ON PURPOSE for a stray word, whichever code it was given
  let R = {};
  try { R = JSON.parse(readFileSync(path.join(DIR, "reasons.json"), "utf8")); } catch {}
  const want = new Set(Object.entries(R)
    .filter(([, v]) => v.verdict === 2 && DELIBERATE_CODES.has(v.code)).map(([k]) => k));
  let side = {};
  try { side = JSON.parse(readFileSync(path.join(DIR, "keepside.json"), "utf8")); } catch {}
  cands = cands.filter((c) => want.has(kOf(c)));
  // ones never sided come first; already-sided are still shown, to revise
  cands.sort((a, b) => (side[kOf(a)] ? 1 : 0) - (side[kOf(b)] ? 1 : 0));
  console.log(`keeps mode: ${cands.length} deliberate keeps (${Object.keys(side).length} already sided)`);
} else if (MODE === "verify") {
  // drop anything already settled in an earlier partial export
  let decided = {};
  try { decided = JSON.parse(readFileSync(path.join(DIR, "decided.json"), "utf8")); } catch {}
  let risky = [];
  try { risky = JSON.parse(readFileSync(path.join(DIR, "risky.json"), "utf8")); } catch {
    console.error("no risky.json -- run find-risky.mjs first"); process.exit(1);
  }
  const order = new Map(risky.map((r, i) => [r.k, i]));
  for (const r of risky) riskWhy.set(r.k, r.why);
  const before = cands.length;
  cands = cands.filter((c) => order.has(kOf(c)) && !decided[kOf(c)]);
  cands.sort((a, b) => order.get(kOf(a)) - order.get(kOf(b)));   // riskiest first
  const skipped = Object.keys(decided).length;
  if (skipped) console.log(`skipping ${skipped} already decided in an earlier export`);
} else {
  // Never judged, and not already parked in the unclean pile. Machine-accepted
  // (provisional) clips are excluded too -- they are already in the palette.
  cands = cands.filter((c) => {
    const k = kOf(c);
    return !accept.has(k) && !rejected.has(k) && !unclean.has(k) && dates[c.video];
  });
}

const asrCache = new Map();
const wordsFor = (v) => {
  if (!asrCache.has(v)) {
    let w = [];
    try { w = JSON.parse(readFileSync(path.join(SONG_DATA, "asr", `${v}.json`), "utf8")).words ?? []; } catch {}
    // MUST be time-ordered: the window limits scan for the nearest word before
    // and after the clip and stop at the first hit.
    w.sort((a, b) => a.start - b.start);
    asrCache.set(v, w);
  }
  return asrCache.get(v);
};

// Ordering is FITTED to real verdicts (fit-order.mjs), not guessed. The old
// min-margin heuristic scored AUC 0.488 against 700 graded clips -- no signal at
// all -- which is why a "cleanest-first" page came back only 40% good. The
// refitted score holds out a third of the labels and still reaches AUC 0.93.
let ORDER_MODEL = null;
try { ORDER_MODEL = JSON.parse(readFileSync(path.join(DIR, "order-model.json"), "utf8")); } catch {}
if (MODE === "verify") {
  console.log(`verify mode: ${cands.length} flagged clips, riskiest first`);
} else if (process.env.ORDER === "date") {
  cands.sort((a, b) => dates[a.video].localeCompare(dates[b.video]) || a.start - b.start);
} else if (ORDER_MODEL) {
  const sc = new Map(cands.map((c) => [kOf(c), scoreWith(ORDER_MODEL, c, wordsFor(c.video))]));
  const dir = process.env.ORDER === "dirty" ? -1 : 1;
  cands.sort((a, b) => dir * (sc.get(kOf(b)) - sc.get(kOf(a))));
  console.log(`ordered by the fitted model (held-out AUC ${ORDER_MODEL.testAuc.toFixed(3)}, trained on ${ORDER_MODEL.n} verdicts)`);
} else {
  console.log("no order-model.json -- falling back to date order; run fit-order.mjs");
  cands.sort((a, b) => dates[a.video].localeCompare(dates[b.video]) || a.start - b.start);
}

const LIMIT = Number(process.env.LIMIT ?? (MODE === "sort" ? 700 : MODE === "verify" ? 600 : 400));
if (cands.length > LIMIT) {
  console.log(`capping ${cands.length} -> ${LIMIT} (best first; rerun for the next batch)`);
  cands = cands.slice(0, LIMIT);
}

// The page points at the SOURCE video and seeks to the clip; the thumbnail size
// is just CSS. Cutting a small file per clip meant an ffmpeg run per clip on
// every rebuild, to make a copy of footage already sitting on disk.
const WANT_VIDEO = process.env.VIDEO !== "0";

const tmp = path.join(SONG_DATA, "umtmp");
if (existsSync(tmp)) rmSync(tmp, { recursive: true, force: true });
mkdirSync(tmp, { recursive: true });

const srcCache = new Map();
const loadSrc = (v) => {
  if (srcCache.has(v)) return srcCache.get(v);
  srcCache.clear();
  const d = readWav(path.join(SONG_DATA, "wav48", `${v}.wav`));
  srcCache.set(v, d);
  return d;
};


const items = [], audio = [];
let n = 0;
for (const c of cands) {
  let x;
  try { ({ x } = loadSrc(c.video)); } catch { continue; }
  const a = Math.max(0, Math.round((c.start - PAD * 2) * SR));
  const b = Math.min(x.length, Math.round((c.end + PAD * 2) * SR));
  if (b - a < 0.1 * SR) continue;
  const dw = defaultWindow(x, SR, c, wordsFor(c.video));
  // In salvage the whole point is that the clip needs work, so present it with
  // the trailing pop / next-word onset already stripped. The handles still move,
  // so a bad strip costs a drag rather than a lost clip.
  let strip = { cutMs: 0, why: "" };
  if (EDIT) {
    // Run the stripper on the RAW window, then take whichever end is earlier.
    // Run on defaultWindow's output it fired on only 2 of 81, because that
    // function has already pulled the end back -- but it leaves up to one 43ms
    // analysis window of tail behind, and that residue is the audible pop.
    const raw = stripTrailingPop(x, SR, c.start, c.end, { words: wordsFor(c.video) });
    const end = Math.min(dw.e, raw.cutMs ? raw.end : dw.e);
    if (end < dw.e - 0.004 && end - dw.s >= 0.14) {
      strip = { cutMs: Math.round((dw.e - end) * 1000), why: raw.why };
      dw.e = end;
    }
  }
  const seg = Float32Array.prototype.slice.call(x, a, b);
  let peak = 0;
  for (let i = 0; i < seg.length; i += 1) peak = Math.max(peak, Math.abs(seg[i]));
  const g = peak > 1e-4 ? 0.85 / peak : 1;
  for (let i = 0; i < seg.length; i += 1) seg[i] *= g;
  const wav = path.join(tmp, "s.wav"), mp3 = path.join(tmp, "s.mp3");
  writeWav(wav, seg, SR);
  execFileSync("ffmpeg", ["-nostdin", "-v", "error", "-y", "-i", wav,
    "-c:a", "libmp3lame", "-b:a", "96k", "-ac", "1", mp3]);
  items.push({
    i: n, k: kOf(c), v: c.video, d: dates[c.video], tok: c.token ?? "?",
    clipStart: +(a / SR).toFixed(3), clipLen: +((b - a) / SR).toFixed(3),
    selA: +(dw.s - (a / SR)).toFixed(3), selB: +(dw.e - (a / SR)).toFixed(3),
    f0: Math.round(c.f0), title: titles[c.video] ?? c.video, t: +c.start.toFixed(2),
    cut: strip.cutMs, why: strip.why,
    // A word that could not be excluded without dropping under the arranger's
    // 140ms floor. Nothing can clean these automatically -- say so on the card.
    wordIn: (wordsFor(c.video).find((w) => w.end > dw.s + 0.02 && w.start < dw.e - 0.02) || {}).w || "",
    risk: riskWhy.get(kOf(c)) || "",
    vid: WANT_VIDEO ? `file://${path.join(SONG_DATA, "media", `${c.video}.mp4`)}` : "",
    adj: (() => {
      const ws = wordsFor(c.video);
      const before = ws.filter((w) => w.end <= dw.s + 0.05 && w.end > dw.s - 0.40).slice(-1)[0];
      const after = ws.filter((w) => w.start >= dw.e - 0.05 && w.start < dw.e + 0.40)[0];
      return { b: before ? before.w : "", a: after ? after.w : "" };
    })(),
    // Every word overlapping the padded clip, in clip-relative time, so the page
    // can stop an auto-expansion at a neighbouring word instead of swallowing
    // it. Silence is the usual stopping point; a word butted straight up against
    // the um is the case silence alone would miss.
    ws: wordsFor(c.video)
      .filter((w) => w.end > a / SR && w.start < b / SR)
      .map((w) => ({ s: +(w.start - a / SR).toFixed(3), e: +(w.end - a / SR).toFixed(3), w: w.w })),
  });
  audio.push(readFileSync(mp3).toString("base64"));
  n += 1;
  if (n % 50 === 0) console.log(`  encoded ${n}`);
}
rmSync(tmp, { recursive: true, force: true });

// ONE manifest, merged. Overwriting it per round would strand any paste-back
// made against an earlier build of the page.
const MF = path.join(DIR, "um-manifest.json");
let merged = new Map();
try { for (const it of JSON.parse(readFileSync(MF, "utf8")).items) merged.set(it.k, it); } catch {}
for (const it of items) merged.set(it.k, it);
// `vid` stays OUT of the manifest. The page needs it -- a file:// URL into this
// machine's SONG_DATA/media, which `items` keeps in memory for META below --
// but this file is tracked, and a tracked file must not carry a machine path.
// Nothing reads `vid` back from here (lib/clips.ts has no such field).
writeFileSync(
  MF,
  JSON.stringify({ version: 1, items: [...merged.values()].map(({ vid: _v, ...rest }) => rest) }, null, 1),
);
console.log(`manifest holds ${merged.size} clips (${items.length} on this page)`);

// HUD target: Mortal Kombat is the current goal. 1,659 notes for three voices is
// the floor where every note can still get its own clip; the higher number is
// where there is enough choice that shifts stay small.
const TARGET = Number(process.env.TARGET ?? 3930);
const FLOOR = Number(process.env.FLOOR ?? 1659);
const onPage = new Set(items.map((it) => it.k));
const BASE = acc.accepted.filter((k) => !onPage.has(k)).length;
console.log(`HUD: palette ${acc.accepted.length}/${TARGET} (floor ${FLOOR}; base excluding this page ${BASE})`);


const html = `<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>um ${MODE}</title>
<style>
:root{--bg:#0f1115;--fg:#e8eaf0;--dim:#8b93a7;--yes:#2fbf71;--warn:#f3c969;--card:#181b22;--line:#262b36;--sel:#2fbf7133}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
 font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#app{height:100%;display:flex;flex-direction:column}
header{padding:10px 16px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
#bar{flex:1;height:6px;background:var(--line);border-radius:3px;overflow:hidden;min-width:120px}
#fill{height:100%;width:0;background:var(--yes)}
.tally{font-variant-numeric:tabular-nums;color:var(--dim);font-size:13px}
.mode{background:#0c0e13;border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12px;color:var(--warn)}
main{flex:1;display:grid;place-items:center;padding:16px;min-height:0}
.card{width:min(760px,100%);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center}
.tok{font-size:clamp(34px,8vw,60px);font-weight:800;letter-spacing:.06em;margin:0}
.sub{color:var(--dim);font-size:13px;margin-bottom:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#wrap{position:relative;height:${EDIT ? 150 : 110}px;background:#0c0e13;border:1px solid var(--line);border-radius:10px;
 overflow:hidden;touch-action:none;cursor:${EDIT ? "crosshair" : "default"}}
#wave{position:absolute;inset:0;width:100%;height:100%}
/* the proposed auto-expansion, drawn UNDER the selection so the two are read as
   "what you have" inside "what you could have" */
#sug{position:absolute;top:0;bottom:0;display:none;background:#f3c96922;
 border-left:2px dashed var(--warn);border-right:2px dashed var(--warn);z-index:1}
#sel{position:absolute;top:0;bottom:0;background:var(--sel);border-left:2px solid var(--yes);border-right:2px solid var(--yes)}
.hnd{position:absolute;top:0;bottom:0;width:16px;margin-left:-8px;cursor:ew-resize;z-index:3}
.hnd::after{content:"";position:absolute;left:6px;top:0;bottom:0;width:4px;background:var(--yes);border-radius:2px}
#play{position:absolute;top:0;bottom:0;width:2px;background:#fff;opacity:.85;z-index:4;display:none}
.facts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0 4px}
.chip{background:#0c0e13;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--dim)}
.chip b{color:var(--fg)}
.btns{display:flex;gap:10px;margin-top:16px}
button{flex:1;padding:14px;border-radius:12px;border:1px solid var(--line);background:#12151c;color:var(--fg);font-size:16px;font-weight:700;cursor:pointer}
.yes{border-color:#1e5c3c;color:#9ff0c4}
.mid{border-color:#5c4a17;color:var(--warn)}
/* The two deliberate KEEPs. Blue, not amber: these are not defects being
   tolerated, they are clips wanted for the very word a defect code would flag. */
.keepbtn{border-color:#2d4a6b;color:#9ec9ff}
.small{background:none;border:none;color:var(--dim);font-size:13px;cursor:pointer;padding:6px 10px;flex:0 0 auto}
#done{display:none;width:min(760px,100%);padding:20px}
textarea{width:100%;height:200px;background:#0c0e13;color:var(--fg);border:1px solid var(--line);border-radius:10px;
 padding:12px;font:12px/1.45 ui-monospace,monospace;word-break:break-all}
kbd{background:#0c0e13;border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:11px;color:var(--dim)}
footer{padding:10px 16px;border-top:1px solid var(--line);text-align:center}
</style>
<div id="app">
 <header><strong style="font-size:14px">um review</strong><span class="mode">${MODE}</span>
  <div id="bar"><div id="fill"></div></div><span class="tally" id="tally"></span>
  <span class="tally" id="hud" style="white-space:nowrap"></span></header>
 <main>
  <div class="card" id="card">
   <p class="tok" id="tok">UM</p>
   <div class="sub" id="sub"></div>
   <video id="thumb" muted playsinline
    style="display:none;width:240px;max-width:100%;border-radius:8px;border:1px solid var(--line);margin:0 auto 10px;background:#000"></video>
   <div id="wrap">
     <canvas id="wave"></canvas>
     <div id="sug"></div>
     <div id="sel"></div>
     ${EDIT ? '<div class="hnd" id="ha"></div><div class="hnd" id="hb"></div>' : ""}
     <div id="play"></div>
   </div>
   <div class="facts" id="facts"></div>
   <a class="ctx" id="ctx" target="_blank" rel="noreferrer" style="color:#79b8ff;font-size:13px">open this moment in Jeralyzer &rarr;</a>
   <div class="btns">
    <button class="small" id="bskip" style="flex:1">&#10005; ${MODE === "keeps" ? "Not a keep" : (EDIT ? "Unsalvageable" : "Not an um")} (&larr;)</button>
    <button class="mid" id="bmid">&#8595; ${MODE === "keeps" ? "Trailing (um and)" : (EDIT ? "Keep, dirty" : "Unclean")}</button>
    ${MODE === "keeps" ? '<button class="small" id="bboth" style="border:1px solid #2d4a6b;color:#9ec9ff">&#8596; Both sides (B)</button>' : ""}
    <button class="yes" id="bkeep">&#10003; ${MODE === "keeps" ? "Leading (and um)" : (MODE === "salvage" ? "Cleaned &mdash; accept" : (MODE === "verify" ? "Good &mdash; keep" : "Good um"))} (&rarr;)</button>
   </div>
   ${MODE !== "keeps" ? `<div class="btns" style="margin-top:8px">
    <button class="keepbtn" id="bandum">&ldquo;and um&rdquo; &middot; leading (7)</button>
    <button class="keepbtn" id="bumand">&ldquo;um and&rdquo; &middot; trailing (8)</button>
   </div>` : ""}
   <div id="rwrap" style="display:none;margin-top:14px;text-align:left">
    <div class="tally" id="rtitle" style="margin-bottom:6px"></div>
    <div id="rlist" style="display:flex;flex-wrap:wrap;gap:6px"></div>
    <div id="rother" style="display:none;margin-top:8px">
     <input id="rtext" placeholder="what is wrong with it?" autocomplete="off"
      style="width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--line);background:#0c0e13;color:var(--fg);font:14px ui-sans-serif,system-ui">
    </div>
    <div class="tally" style="margin-top:6px;opacity:.7">press the number, <kbd>O</kbd> to type your own, or <kbd>0</kbd> to skip</div>
   </div>
   <div style="margin-top:8px">
    <button class="small" id="bsel">&#9654; play (space)</button>
    <button class="small" id="ball">play all (A)</button>
    ${EDIT ? '<button class="small" id="bexp" style="border-color:#5c4a17;color:#f3c969;display:none"></button>' : ""}
    ${EDIT ? '<button class="small" id="bundo" style="display:none">&#8630; undo expand (R)</button>' : ""}
    ${EDIT ? '<button class="small" id="breset">reset handles</button>' : ""}
    ${EDIT ? '<span class="chip" style="margin-left:6px">silence <button class="small" id="silm" style="padding:0 6px">&minus;</button><b id="silval">6%</b><button class="small" id="silp" style="padding:0 6px">+</button> <span style="opacity:.6">[ ]</span></span>' : ""}
    <button class="small" id="bback">&#8592; undo</button>
    <button class="small" id="bfin">finish &amp; export</button>
   </div>
  </div>
  <div id="done">
   <h2 style="margin:0 0 6px">Paste this back to Claude</h2>
   <p class="tally" id="summary"></p>
   <textarea id="out" readonly></textarea>
   <div style="margin-top:10px;display:flex;gap:8px">
    <button class="yes" id="bcopy">Copy to clipboard</button>
    <button class="small" id="bresume">back to reviewing</button>
   </div>
  </div>
 </main>
 <footer class="tally">${MODE === "sort"
   ? 'windows auto-expand to silence &mdash; <kbd>R</kbd> undoes it &nbsp; <kbd>E</kbd> hear it &nbsp; <kbd>&rarr;</kbd> good &nbsp; <kbd>&darr;</kbd> unclean &nbsp; <kbd>7</kbd> &ldquo;and um&rdquo; &nbsp; <kbd>8</kbd> &ldquo;um and&rdquo; &nbsp; <kbd>&larr;</kbd> not an um &nbsp; <kbd>&#9003;</kbd> undo'
   : 'windows auto-expand to silence &mdash; <kbd>R</kbd> undoes it &nbsp; <kbd>E</kbd> hear it &nbsp; <kbd>&rarr;</kbd> cleaned, accept &nbsp; <kbd>&darr;</kbd> keep as deliberately dirty &nbsp; <kbd>7</kbd> &ldquo;and um&rdquo; &nbsp; <kbd>8</kbd> &ldquo;um and&rdquo; &nbsp; <kbd>&larr;</kbd> unsalvageable &nbsp; <kbd>&#9003;</kbd> undo'}</footer>
</div>
<script>
const META = ${JSON.stringify(items)};
const AUDIO = ${JSON.stringify(audio)};
const MODE = "${MODE}";
const EDIT = ${EDIT};
const REASONS = ${JSON.stringify(REASONS)};
const OTHER_CODE = ${OTHER_CODE};
const TARGET = ${TARGET};
const FLOOR = ${FLOOR};
const BASE = ${BASE};
const KEY = "umreview.byKey." + MODE;
const IKEY = "umreview.idx." + MODE;
let byKey = {};
try {
  const st = JSON.parse(localStorage.getItem(KEY) || "null");
  if (st && st.byKey) for (const [k, v] of Object.entries(st.byKey)) byKey[k] = v;
} catch (e) {}
let idx = 0;
try { const v = JSON.parse(localStorage.getItem(IKEY) || "null"); if (typeof v === "number") idx = v; } catch (e) {}
if (!(idx >= 0 && idx < META.length)) idx = 0;
// keep: 0 = drop, 1 = good, 2 = unclean (sort mode only)
// Take the WINDOW from the freshly-built page, never from storage, unless the
// user dragged the handles themselves. save() persists every clip on the page,
// so a mid-review rebuild would otherwise restore stale windows over the new
// ones and silently undo an improvement to the windowing.
const slices = META.map((m) => {
  const st = byKey[m.k];
  if (!st) return { a: m.selA, b: m.selB, keep: -1, r: 0, rt: "", dragged: 0, auto: 0, autoOff: 0, adl: 0, adr: 0 };
  return {
    a: st.dragged ? st.a : m.selA,
    b: st.dragged ? st.b : m.selB,
    keep: st.keep ?? -1,
    r: st.r ?? 0,
    rt: st.rt ?? "",
    dragged: st.dragged ? 1 : 0,
    // auto  = this window came from auto-expand, not from a drag
    // autoOff = the expansion was explicitly undone; never offer it again here
    auto: st.auto ? 1 : 0,
    autoOff: st.autoOff ? 1 : 0,
    adl: st.adl ?? 0, adr: st.adr ?? 0,
  };
});
const $ = (id) => document.getElementById(id);
let buffers = {}, actx = null, raf = 0, srcNode = null;

const save = () => {
  // Only judged or hand-dragged clips are worth persisting; storing the rest
  // just freezes their windows against a future rebuild.
  META.forEach((m, i) => {
    if (slices[i].keep >= 0 || slices[i].dragged) byKey[m.k] = slices[i];
    else delete byKey[m.k];
  });
  try {
    localStorage.setItem(KEY, JSON.stringify({ byKey }));
    localStorage.setItem(IKEY, JSON.stringify(idx));
  } catch (e) {}
};
function drawWave() {
  const cv = $("wave"), g = cv.getContext("2d");
  const w = cv.width = cv.clientWidth * devicePixelRatio;
  const h = cv.height = cv.clientHeight * devicePixelRatio;
  g.clearRect(0, 0, w, h);
  g.strokeStyle = "#39405180"; g.beginPath(); g.moveTo(0, h / 2); g.lineTo(w, h / 2); g.stroke();
  const buf = buffers[idx]; if (!buf) return;
  const d = buf.getChannelData(0), step = Math.max(1, Math.floor(d.length / w));
  g.fillStyle = "#7f8aa3";
  for (let x = 0; x < w; x += 1) {
    let mn = 1, mx = -1;
    for (let k = 0; k < step; k += 1) { const v = d[x * step + k] || 0; if (v < mn) mn = v; if (v > mx) mx = v; }
    g.fillRect(x, (1 - mx) * h / 2, 1, Math.max(1, (mx - mn) * h / 2));
  }
}
function decode(i, cb) {
  if (buffers[i]) return cb();
  if (!actx) { try { actx = new (window.AudioContext || window.webkitAudioContext)(); } catch (e) { return; } }
  const raw = atob(AUDIO[i]); const arr = new Uint8Array(raw.length);
  for (let k = 0; k < raw.length; k += 1) arr[k] = raw.charCodeAt(k);
  actx.decodeAudioData(arr.buffer, (b) => { buffers[i] = b; cb(); }, () => {});
}
// Auto-expand: walk OUTWARDS from the current window until the sound dies away.
//
// The case this exists for: a window whose end was set while the old preview
// overran it. The tail was audible, so it sounded included, but it was never
// selected -- and the clip went into the palette a few tens of ms short. Fixing
// those by ear cost a drag each; this proposes the window and lets you hear it.
//
// Only ever EXPANDS. A proposal that could also pull the edges in would quietly
// undo a hand-set trim, and those are the windows most likely to be right.
const sugCache = [];
// The silence threshold, as a fraction of the selection's own peak. Persisted,
// because the right value depends on the room a batch was recorded in, not on
// the clip -- so it is set once for a sitting rather than per clip.
const SILKEY = "umreview.silFrac";
let silFrac = Number(localStorage.getItem(SILKEY) ?? 0.06) || 0.06;
function setSil(v) {
  silFrac = Math.max(0.01, Math.min(0.40, Math.round(v * 1000) / 1000));
  try { localStorage.setItem(SILKEY, String(silFrac)); } catch (e) {}
  sugCache.length = 0;                       // every proposal is now stale
  // An already-auto-expanded window is re-proposed from its DEFAULT, so the
  // slider previews live instead of stacking one expansion on the last.
  const s = slices[idx];
  if (s.auto) { s.a = META[idx].selA; s.b = META[idx].selB; s.auto = 0; s.dragged = 0; applyExpand(false); }
  if ($("silval")) $("silval").textContent = (silFrac * 100).toFixed(0) + "%";
  layout(); save();
}
function autoExpand(i) {
  if (sugCache[i]) return sugCache[i];
  const buf = buffers[i]; if (!buf) return null;
  const m = META[i], s = slices[i];
  const sr = buf.sampleRate, ch = buf.getChannelData(0);
  const HOPS = 0.005, HOP = Math.max(1, Math.round(HOPS * sr));
  const env = [];
  for (let k = 0; k + HOP <= ch.length; k += HOP) {
    let acc = 0;
    for (let j = 0; j < HOP; j += 1) acc += ch[k + j] * ch[k + j];
    env.push(Math.sqrt(acc / HOP));
  }
  if (!env.length) return null;
  const fr = (t) => Math.max(0, Math.min(env.length - 1, Math.round(t / HOPS)));
  // Threshold from the SELECTION's own peak, not the clip's: a quiet um next to
  // a loud word would otherwise be measured against the word and never expand.
  let selPk = 0;
  for (let k = fr(s.a); k <= fr(s.b); k += 1) selPk = Math.max(selPk, env[k]);
  const sorted = env.slice().sort((p, q) => p - q);
  const floor = sorted[Math.floor(sorted.length * 0.15)] || 0;
  // What counts as "silence" to stop at. At 6% only true silence stops the walk,
  // so a little room noise between the um and the next word keeps it going and
  // the window runs long. Raising it makes NEAR-silence a stopping point, which
  // is what you want when you have dragged back to an um and just want its end.
  const th = Math.max(selPk * silFrac, floor * 1.8);
  // A dip must LAST to count as silence, or the gap between two syllables ends
  // the expansion one syllable in.
  const HOLD = Math.round(0.030 / HOPS);
  // lastLoud starts UNSET rather than at the edge. Seeded with the edge, a walk
  // that found nothing still "found" the edge frame, so each apply pushed the
  // window out by exactly one hop -- holding shift+E crawled the end along
  // near-silence. Unset means "nothing out here", which leaves the edge where it
  // is and makes applying twice a no-op.
  // A lone 5ms blip is also not a reason to move an edge, so a frame only counts
  // once TWO in a row clear the threshold.
  const walk = (from, dir) => {
    let quiet = 0, loud = 0, lastLoud = -1;
    for (let k = from; k >= 0 && k < env.length; k += dir) {
      if (env[k] >= th) { quiet = 0; loud += 1; if (loud >= 2) lastLoud = k; }
      else { loud = 0; if (++quiet >= HOLD) break; }
    }
    return lastLoud;
  };
  const la = walk(fr(s.a), -1), lb = walk(fr(s.b), +1);
  let A = la < 0 ? s.a : Math.min(s.a, la * HOPS);
  let B = lb < 0 ? s.b : Math.max(s.b, (lb + 1) * HOPS);
  // Never expand INTO a neighbouring word. Silence stops most expansions; a word
  // butted straight against the um is the case it would miss.
  //
  // Stop at the word boundary PLUS clipwindow.mjs's own guards, not at the bare
  // timestamp. Clamping to the bare boundary let the expansion walk back across
  // the 40ms guard into the tail of the previous word -- which is what produced
  // a rash of clips that sounded like "and uh" (22% of the unjudged pool has a
  // word ending within 120ms of the candidate start). The guards are asymmetric
  // because parakeet timestamps a word's start late; the same reasoning applies
  // here, so the same numbers do.
  const GUARD_PREV = 0.04, GUARD_NEXT = 0.07;
  for (const w of (m.ws || [])) {
    if (w.e <= s.a + 0.02 && w.e + GUARD_PREV > A) A = w.e + GUARD_PREV;
    if (w.s >= s.b - 0.02 && w.s - GUARD_NEXT < B) B = w.s - GUARD_NEXT;
  }
  A = Math.max(0, Math.min(A, s.a));
  B = Math.min(m.clipLen, Math.max(B, s.b));
  sugCache[i] = { a: A, b: B, dl: Math.round((s.a - A) * 1000), dr: Math.round((B - s.b) * 1000) };
  return sugCache[i];
}
function applyExpand(play = true) {
  const g = autoExpand(idx); if (!g || (!g.dl && !g.dr)) return false;
  const s = slices[idx];
  s.a = g.a; s.b = g.b; s.dragged = 1; s.auto = 1; s.adl = g.dl; s.adr = g.dr;
  sugCache[idx] = null;
  save(); layout();
  if (play) playRange(s.a, s.b);
  return true;
}
// Auto-expand is the DEFAULT for a window nobody has touched. It was taken
// almost every time it was offered, so offering it was just an extra keypress.
// Left alone: a hand-dragged window, a clip already judged, and one where the
// expansion was explicitly undone.
function autoExpandIfUndecided() {
  const s = slices[idx];
  if (s.dragged || s.autoOff || s.keep >= 0) return;
  applyExpand(false);
}
// Undo puts the window back and REMEMBERS that, so walking back to this clip
// does not silently expand it again.
function undoExpand() {
  const s = slices[idx], m = META[idx];
  s.a = m.selA; s.b = m.selB; s.dragged = 0; s.auto = 0; s.autoOff = 1; s.adl = 0; s.adr = 0;
  sugCache[idx] = null;
  save(); layout(); playRange(s.a, s.b);
}
function layout() {
  const m = META[idx], s = slices[idx], W = $("wrap").clientWidth;
  const px = (t) => Math.max(0, Math.min(W, (t / m.clipLen) * W));
  $("sel").style.left = px(s.a) + "px";
  $("sel").style.width = Math.max(2, px(s.b) - px(s.a)) + "px";
  if ($("ha")) { $("ha").style.left = px(s.a) + "px"; $("hb").style.left = px(s.b) + "px"; }
  const g = autoExpand(idx);
  const sug = $("sug");
  if (g && (g.dl || g.dr)) {
    sug.style.display = "block";
    sug.style.left = px(g.a) + "px";
    sug.style.width = Math.max(2, px(g.b) - px(g.a)) + "px";
  } else sug.style.display = "none";
  if ($("bexp")) {
    $("bexp").style.display = g && (g.dl || g.dr) ? "" : "none";
    if (g) $("bexp").innerHTML = "&#8596; expand +" + g.dl + "/+" + g.dr + " ms (E / shift+E)";
  }
  if ($("bundo")) $("bundo").style.display = s.auto ? "" : "none";
  $("facts").innerHTML =
    '<span class="chip"><b>' + m.d + '</b></span>' +
    '<span class="chip">' + ((s.b - s.a) * 1000 | 0) + ' ms</span>' +
    '<span class="chip"><b>' + m.f0 + ' Hz</b></span>' +
    '<span class="chip">#' + (idx + 1) + '/' + META.length + '</span>' +
    (s.auto ? '<span class="chip" style="border-color:#2d5c3a;color:#9ff0c4">auto-expanded <b>+' + s.adl + '/+' + s.adr + ' ms</b> \u00b7 R to undo</span>'
      : s.autoOff ? '<span class="chip">auto-expand undone</span>' : '') +
    (m.cut ? '<span class="chip" style="border-color:#5c4a17;color:#f3c969">stripped <b>' + m.cut + ' ms</b> \u00b7 ' + m.why + '</span>' : '') +
    (m.wordIn ? '<span class="chip" style="border-color:#6b2d2d;color:#ff9c9c">word <b>' + m.wordIn + '</b> still inside</span>' : '') +
    (m.risk ? '<span class="chip" style="border-color:#5c4a17;color:#f3c969">' + m.risk + '</span>' : '') +
    (MODE === 'keeps' && m.adj ? '<span class="chip">before <b>' + (m.adj.b || '\u2013') + '</b></span>'
      + '<span class="chip">after <b>' + (m.adj.a || '\u2013') + '</b></span>' : '');
}
// Play from the DECODED buffer, not the <audio> element. The element was seeked
// with currentTime (MP3 seeks snap to a frame, so the start was approximate) and
// stopped from a requestAnimationFrame tick, so the end overran by however long
// the next frame took -- up to ~30ms, and a different amount every time. That is
// what made the tail leak inconsistently and left it unclear whether a window
// was actually trimmed correctly. Web Audio schedules an exact offset and an
// exact duration, so what you hear is precisely the window.
function playRange(from, to) {
  decode(idx, () => {
    const buf = buffers[idx];
    if (!buf || !actx) return;
    if (actx.state === "suspended") actx.resume();
    if (srcNode) { try { srcNode.stop(); } catch (e) {} srcNode = null; }
    const a = Math.max(0, Math.min(buf.duration, from));
    const dur = Math.max(0.01, Math.min(buf.duration - a, to - from));
    const node = actx.createBufferSource();
    node.buffer = buf;
    node.connect(actx.destination);
    node.start(0, a, dur);
    srcNode = node;
    const t0 = actx.currentTime;
    const tv = $("thumb");
    if (tv && META[idx].vid) {
      // the handle position is relative to the clip; the source needs absolute time
      try { tv.currentTime = META[idx].clipStart + a; tv.play().catch(() => {}); } catch (e) {}
      setTimeout(() => { try { tv.pause(); } catch (e) {} }, Math.round(dur * 1000));
    }
    $("play").style.display = "block";
    cancelAnimationFrame(raf);
    const tick = () => {
      const el2 = actx.currentTime - t0;
      if (el2 >= dur) { $("play").style.display = "none"; return; }
      const W = $("wrap").clientWidth;
      $("play").style.left = (((a + el2) / META[idx].clipLen) * W) + "px";
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
  });
}
function showThumb() {
  const t = $("thumb"), m = META[idx];
  if (!m.vid) { t.style.display = "none"; return; }
  if (t.dataset.k !== m.k) { t.dataset.k = m.k; t.src = m.vid; }
  t.style.display = "block";
}
function render() {
  const judged = slices.filter((s) => s.keep >= 0).length;
  $("fill").style.width = (100 * idx / META.length).toFixed(1) + "%";
  const good = slices.filter((s) => s.keep === 1).length;
  const dirty = slices.filter((s) => s.keep === 2).length;
  $("tally").textContent = idx + "/" + META.length + " seen \\u00b7 " + good + (MODE === "sort" ? " good" : " cleaned")
    + " \\u00b7 " + dirty + (MODE === "sort" ? " unclean" : " dirty");
  const palette = BASE + good;
  const left = Math.max(0, TARGET - palette);
  $("hud").innerHTML = palette < FLOOR
    ? 'palette <b style="color:#f3c969">' + palette + '</b>/' + FLOOR + ' \\u00b7 below one-clip-per-note'
    : (left > 0
      ? 'palette <b style="color:#e8eaf0">' + palette + '</b>/' + TARGET + ' \\u00b7 <b style="color:#f3c969">' + left + '</b> more for roomy MK'
      : 'palette <b style="color:#9ff0c4">' + palette + '</b> \\u00b7 <b style="color:#9ff0c4">MK fully covered</b>');
  if (idx >= META.length) return finish();
  const m = META[idx];
  $("tok").textContent = (m.tok || "?").toUpperCase();
  $("sub").textContent = m.title;
  $("ctx").href = ${JSON.stringify(archiveMomentBase())} + m.v + "&t=" + Math.max(0, Math.floor(m.t) - ${LEAD_IN});
  showThumb();
  decode(idx, () => { autoExpandIfUndecided(); drawWave(); layout(); playRange(slices[idx].a, slices[idx].b); });
  layout(); save();
}
if (EDIT) {
  let drag = null;
  const wrap = $("wrap");
  const tOf = (ev) => {
    const r = wrap.getBoundingClientRect();
    const x = Math.max(0, Math.min(r.width, (ev.touches ? ev.touches[0].clientX : ev.clientX) - r.left));
    return (x / r.width) * META[idx].clipLen;
  };
  const startDrag = (which) => (ev) => { ev.preventDefault(); drag = which; };
  $("ha").addEventListener("pointerdown", startDrag("a"));
  $("hb").addEventListener("pointerdown", startDrag("b"));
  addEventListener("pointermove", (ev) => {
    if (!drag) return;
    const s = slices[idx], t = tOf(ev);
    if (drag === "a") s.a = Math.max(0, Math.min(s.b - 0.03, t));
    else s.b = Math.min(META[idx].clipLen, Math.max(s.a + 0.03, t));
    s.dragged = 1;
    layout();
  });
  // a hand-drag moves the window, so the proposal built from the old one is stale
  // a hand-drag makes the window hand-set: it is no longer the auto proposal, and
  // the proposal built from the old edges is stale
  addEventListener("pointerup", () => { if (drag) { drag = null; slices[idx].auto = 0; slices[idx].autoOff = 1; sugCache[idx] = null; save(); layout(); playRange(slices[idx].a, slices[idx].b); } });
  // "reset handles" and "undo expand" want the same thing -- the default window,
  // and no auto-expansion sneaking back when you navigate away and return.
  $("breset").onclick = () => undoExpand();
  $("bexp").onclick = () => applyExpand();
  $("bundo").onclick = () => undoExpand();
  $("silm").onclick = () => setSil(silFrac - (silFrac > 0.10 ? 0.02 : 0.01));
  $("silp").onclick = () => setSil(silFrac + (silFrac >= 0.10 ? 0.02 : 0.01));
  $("silval").textContent = (silFrac * 100).toFixed(0) + "%";
}
if ($("bandum")) $("bandum").onclick = () => markKeep(7);
if ($("bumand")) $("bumand").onclick = () => markKeep(8);
// A deliberate keep: dirty verdict, and the SIDE recorded in the same keystroke.
// Codes 7/8 are already the "and um" / "um and" reasons, so this skips the
// reason prompt rather than inventing a parallel way to say the same thing.
function markKeep(code) {
  const s = slices[idx];
  s.keep = 2; s.r = code; s.rt = "";
  save(); next();
}
function next() { idx += 1; hideReasons(); render(); }
let awaiting = 0;            // 0 = not asking, 2 = asking why-unclean, 3 = asking why-bad
let typing = 0;
function hideReasons() { awaiting = 0; typing = 0; $("rwrap").style.display = "none"; $("rother").style.display = "none"; }
function openOther() {
  typing = 1;
  $("rother").style.display = "block";
  const t = $("rtext");
  t.value = slices[idx].rt || "";
  t.focus();
  t.onkeydown = (ev) => {
    ev.stopPropagation();                       // never let a letter judge a clip
    if (ev.key === "Enter") {
      ev.preventDefault();
      const v = t.value.trim();
      slices[idx].r = v ? OTHER_CODE : 0; slices[idx].rt = v;
      typing = 0; next();
    } else if (ev.key === "Escape") {
      ev.preventDefault(); typing = 0; $("rother").style.display = "none";
    }
  };
}
function askReasons(kind) {
  const list = kind === 2 ? REASONS.dirty : REASONS.bad;
  awaiting = kind === 2 ? 2 : 3;
  $("rtitle").textContent = kind === 2 ? "why is it unclean?" : "why is it not an um?";
  $("rlist").innerHTML = list.map((t, i) =>
    '<button class="small" data-r="' + (i + 1) + '" style="border:1px solid var(--line);border-radius:8px">'
    + (i + 1) + '. ' + t + '</button>').join("")
    + '<button class="small" data-r="' + OTHER_CODE + '" style="border:1px dashed var(--line);border-radius:8px">O. other\u2026</button>';
  [...$("rlist").querySelectorAll("button")].forEach((b) => {
    b.onclick = () => {
      const r = Number(b.dataset.r);
      if (r === OTHER_CODE) return openOther();
      slices[idx].r = r; slices[idx].rt = ""; next();
    };
  });
  $("rother").style.display = "none";
  $("rwrap").style.display = "block";
}
// The verdict is recorded immediately; the reason strip only delays ADVANCING,
// so an interrupted session never loses a judgement.
$("bkeep").onclick = () => { slices[idx].keep = 1; slices[idx].r = 0; slices[idx].rt = ''; next(); };
// keeps mode reuses keep as the SIDE: 1 leading, 2 trailing, 3 both, 0 not a keep
if ($("bboth")) $("bboth").onclick = () => { slices[idx].keep = 3; slices[idx].r = 0; next(); };
if ($("bmid")) $("bmid").onclick = MODE === "keeps"
  ? () => { slices[idx].keep = 2; slices[idx].r = 0; next(); }
  : () => { slices[idx].keep = 2; slices[idx].r = 0; save(); askReasons(2); };
$("bskip").onclick = () => { slices[idx].keep = 0; slices[idx].r = 0; save(); askReasons(0); };
$("bback").onclick = () => { if (idx > 0) { idx -= 1; render(); } };
$("bsel").onclick = () => playRange(slices[idx].a, slices[idx].b);
$("ball").onclick = () => playRange(0, META[idx].clipLen);
$("bfin").onclick = finish;
$("bresume").onclick = () => { $("done").style.display = "none"; $("card").style.display = "block"; render(); };
// Free text is URI-encoded so a comma or semicolon in it cannot split a record.
function txt(sl) { return (sl.r === OTHER_CODE && sl.rt) ? "," + encodeURIComponent(sl.rt) : ""; }
function finish() {
  $("card").style.display = "none"; $("done").style.display = "block";
  const judged = slices.map((s, i) => ({ s, i })).filter((r) => r.s.keep >= 0);
  const good = judged.filter((r) => r.s.keep === 1).length;
  const dirty = judged.filter((r) => r.s.keep === 2).length;
  if (MODE === "keeps") {
    const n1 = judged.filter((r) => r.s.keep === 1).length;
    const n2 = judged.filter((r) => r.s.keep === 2).length;
    const n3 = judged.filter((r) => r.s.keep === 3).length;
    $("summary").textContent = n1 + " leading, " + n2 + " trailing, " + n3 + " both, "
      + (judged.length - n1 - n2 - n3) + " dropped, of " + META.length;
  } else $("summary").textContent = MODE === "sort"
    ? good + " good, " + dirty + " unclean, " + (judged.length - good - dirty) + " dropped, of " + META.length
    : good + " cleaned, " + dirty + " kept dirty, " + (judged.length - good - dirty) + " dropped, of " + judged.length + " judged";
  // sort carries its window too (UMSORT/3), but keeps sort's verdict meanings
  $("out").value = MODE === "sort"
    ? "UMSORT/3 " + judged.length + " " + judged.map((r) => META[r.i].k + "," + r.s.keep + ","
        + (r.s.r | 0) + "," + Math.round(r.s.a * 1000) + "," + Math.round(r.s.b * 1000) + txt(r.s)).join(";")
    : MODE === "keeps"
    ? "UMKEEP/1 " + judged.length + " " + judged.map((r) => META[r.i].k + "," + Math.round(r.s.a * 1000)
        + "," + Math.round(r.s.b * 1000) + "," + r.s.keep).join(";")
    : "UMSALV/2 " + judged.length + " " + judged.map((r) => META[r.i].k + "," + Math.round(r.s.a * 1000)
        + "," + Math.round(r.s.b * 1000) + "," + r.s.keep + "," + (r.s.r | 0) + txt(r.s)).join(";");
  save();
}
$("bcopy").onclick = async () => {
  const t = $("out"); t.select();
  try { await navigator.clipboard.writeText(t.value); $("bcopy").textContent = "Copied"; }
  catch (e) { document.execCommand("copy"); $("bcopy").textContent = "Copied"; }
  setTimeout(() => ($("bcopy").textContent = "Copy to clipboard"), 1200);
};
addEventListener("keydown", (e) => {
  if ($("done").style.display === "block") return;
  const k = e.key.toLowerCase();
  if (typing) return;                   // the text box owns the keyboard
  if (awaiting) {                       // picking a reason
    if (k === "o") { e.preventDefault(); openOther(); return; }
    if (/^[1-9]$/.test(k)) {
      const list = awaiting === 2 ? REASONS.dirty : REASONS.bad;
      const n = Number(k);
      if (n <= list.length) { e.preventDefault(); slices[idx].r = n; next(); return; }
    }
    if (k === "0" || k === "escape" || k === "arrowleft" || k === "arrowdown" || k === "enter") {
      e.preventDefault(); next(); return;                      // skip the reason
    }
    if (k === " ") { e.preventDefault(); playRange(slices[idx].a, slices[idx].b); return; }
    return;
  }
  if (k === " ") { e.preventDefault(); playRange(slices[idx].a, slices[idx].b); }
  else if (k === "a") { e.preventDefault(); playRange(0, META[idx].clipLen); }
  // E hears the proposal, shift+E takes it. Hearing it first matters: the whole
  // point is that the window you have and the window you hear had drifted apart.
  else if (k === "e" && EDIT) {
    e.preventDefault();
    const g = autoExpand(idx);
    if (!g || (!g.dl && !g.dr)) return;
    if (e.shiftKey) applyExpand(); else playRange(g.a, g.b);
  }
  else if (k === "r" && EDIT) { e.preventDefault(); undoExpand(); }
  // [ and ] retune what counts as silence, live. Sitting next to each other on
  // the keyboard so the window can be dialled in while listening.
  else if (k === "[" && EDIT) { e.preventDefault(); setSil(silFrac - (silFrac > 0.10 ? 0.02 : 0.01)); playRange(slices[idx].a, slices[idx].b); }
  else if (k === "]" && EDIT) { e.preventDefault(); setSil(silFrac + (silFrac >= 0.10 ? 0.02 : 0.01)); playRange(slices[idx].a, slices[idx].b); }
  // 7 and 8 ARE the reason codes -- same numbers you would press at the reason
  // prompt, just without the detour through it. Recording the side here is the
  // point: the old flow tagged every keep "leading" and the side had to be
  // re-decided in a whole separate pass.
  else if ((k === "7" || k === "8") && MODE !== "keeps") {
    e.preventDefault(); markKeep(k === "7" ? 7 : 8);
  }
  else if (k === "enter" || k === "arrowright" || k === "y") { e.preventDefault(); slices[idx].keep = 1; slices[idx].r = 0; slices[idx].rt = ''; next(); }
  else if (k === "arrowleft" || k === "n") {
    e.preventDefault(); slices[idx].keep = 0; slices[idx].r = 0;
    if (MODE === "keeps") { next(); } else { save(); askReasons(0); }
  }
  else if (k === "b" && MODE === "keeps") { e.preventDefault(); slices[idx].keep = 3; slices[idx].r = 0; next(); }
  else if (k === "arrowdown" || k === "u") {
    e.preventDefault(); slices[idx].keep = 2; slices[idx].r = 0;
    if (MODE === "keeps") { next(); } else { save(); askReasons(2); }
  }
  else if (k === "backspace") { e.preventDefault(); if (idx > 0) { idx -= 1; hideReasons(); render(); } }
});
addEventListener("resize", () => { drawWave(); layout(); });
render();
</script>
`;
writeFileSync(OUT, html);
console.log(`${OUT} — mode ${MODE}, ${items.length} clips, ${(Buffer.byteLength(html) / 1048576).toFixed(1)} MB`);