import { test, expect } from "@playwright/test";
import { execFileSync } from "node:child_process";
import { copyFileSync, existsSync, mkdirSync, readFileSync } from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";

// ---------------------------------------------------------------------------
// The clip bench.
//
// The fixture is built so every answer here is exact rather than plausible:
//
//   vid1 is PUNCTUATED and carries a run-on cue at 3-6s. So c01 (3.00-6.00)
//   ends mid-sentence, and widen() must carry its end to 9.00 -- the next cue
//   that closes one. c02 (9.00-12.00) ends on a full stop. c04 ends inside a
//   run-on cue too but sets lockEnd, which is the author saying "I meant to cut
//   here" and must silence the warning.
//
//   vid2 has no terminator anywhere, which is the real degradation in this
//   corpus. c03's edges cannot be judged against sentences at all, and the
//   bench has to SAY that rather than quietly claiming the cut is fine.
//
//   vid1_0.00-9.00.mp4 is tone / silence / tone / silence / tone with the
//   silences centred on 3.0s and 6.0s. Verified in the file itself:
//   silencedetect reports 2.90-3.11 and 5.92-6.11.
//
//   vid1 has THREE cached files, because clips-raw is keyed by video and a
//   report cites one stream more than once. c04 (15.00-18.00) is held only by
//   the NARROWEST of them, which is the whole point -- see the window-choice
//   test at the bottom.
// ---------------------------------------------------------------------------

const HERE = path.dirname(fileURLToPath(import.meta.url));
const UMTOOL = path.join(HERE, "..");
const FIXTURE = path.join(UMTOOL, ".e2e-song");
// bench-fixture, NOT report-fixture. Every test in this file WRITES, and the
// index and decision specs assert what report-fixture's windows are -- sharing
// one project made the suite pass or fail on which spec file ran first.
const PROJECT = "reports/bench-fixture";
// The WALK's fixture, and read-only: see the block below, and the comment on
// walk-fixture in make-fixture.mjs.
const WALK = "reports/walk-fixture";
const MANIFEST = path.join(FIXTURE, "reports", "bench-fixture", "video.manifest.json");
const bench = (clip: string) => `/browse/${PROJECT}/clip/${clip}`;
const walkBench = (clip: string) => `/browse/${WALK}/clip/${clip}`;

const readClipIn = (project: string, id: string) => {
  const file = path.join(FIXTURE, ...project.split("/"), "video.manifest.json");
  const m = JSON.parse(readFileSync(file, "utf8")) as {
    timeline: {
      id: string;
      start: number;
      end: number;
      lockEnd?: boolean;
      title?: string;
      date?: string;
      correction?: string;
      verdict?: string;
      cutStart?: number;
      cutEnd?: number;
      muteFrom?: number;
    }[];
  };
  return m.timeline.find((e) => e.id === id)!;
};
const readClip = (id: string) => readClipIn(PROJECT, id);

/**
 * Type into an attribution field and let it save the way a blur does.
 *
 * The fill is CHECKED before the blur, and that is not belt and braces.
 * `fill("")` is not one operation: playwright's injected script selects the
 * existing text and returns `needsinput`, and the driver then presses Delete in
 * a second round trip (playwright-core/lib/server/dom.js). A React re-render
 * landing between the two -- hydration, on a page that was just navigated to --
 * reassigns the controlled value and COLLAPSES the selection to offset 0, so
 * Delete eats one character forward instead of the selection. The blur then
 * faithfully saves `value.slice(1)`, and the bench is innocent: it saved exactly
 * what the box held.
 */
const setField = async (
  page: import("@playwright/test").Page,
  field: string,
  value: string,
) => {
  const input = page.locator(`[data-attrib-field=${field}]`);
  await expect(async () => {
    await input.fill(value);
    await expect(input).toHaveValue(value, { timeout: 1000 });
  }).toPass({ timeout: 10_000 });
  await input.blur();
};

/**
 * Wait for the bench's keyboard to be LIVE, and prove it with the harmless key.
 *
 * The listener is attached on hydration and a press that lands before it is
 * simply lost -- `page.goto` resolves long before React has run. `x` is the one
 * key that changes nothing on disk (it moves the cursor into the correction
 * box), so it doubles as the readiness probe for the keys that do.
 */
const keyboardLive = async (page: import("@playwright/test").Page) => {
  const box = page.locator("[data-attrib-field=correction]");
  await expect(async () => {
    await page.locator("body").press("x");
    await expect(box).toBeFocused({ timeout: 500 });
  }).toPass({ timeout: 10_000 });
  await box.blur();
};

const token = async (
  request: { get: (u: string) => Promise<{ json: () => Promise<unknown> }> },
  clip: string,
  project = PROJECT,
) => {
  const r = await request.get(`/api/report/clip?project=${encodeURIComponent(project)}&clip=${clip}`);
  return (await r.json()) as { token: string };
};

test("the bench opens on the cached window, with the clip inside it", async ({ page }) => {
  await page.goto(bench("c01"));
  await expect(page.locator("[data-bench=c01]")).toBeVisible();
  await expect(page.getByTestId("waveform")).toBeVisible();
  // The <video> is the cached source window served whole, not an ffmpeg slice
  // per drag -- that is what makes dragging free.
  await expect(page.getByTestId("clip-video")).toHaveAttribute("src", /api\/report\/raw/);
});

test("a clip that ends mid-sentence says so; lockEnd silences it", async ({ page }) => {
  await page.goto(bench("c01"));
  await expect(page.locator("[data-warn=mid-sentence]")).toBeVisible();
  // The cut lands inside this cue, and quoting it is the point -- "ends
  // mid-sentence" alone does not tell you what you are cutting off.
  await expect(page.locator("[data-warn=mid-sentence]")).toContainText("and because");

  await page.goto(bench("c04"));
  await expect(page.locator("[data-warn=mid-sentence]")).toHaveCount(0);
});

test("an unpunctuated source is admitted rather than judged", async ({ page }) => {
  await page.goto(bench("c03"));
  // Not "this cut is fine": the question cannot be answered from this source.
  await expect(page.locator("[data-warn=no-punctuation]")).toBeVisible();
  await expect(page.locator("[data-warn=mid-sentence]")).toHaveCount(0);
});

test("the bench predicts what the widener would do before you run it", async ({ page }) => {
  await page.goto(bench("c01"));
  const warn = page.locator("[data-warn=would-revert]");
  await expect(warn).toBeVisible();
  // 3.00-6.00 widens to 3.00-9.00: the next cue that closes a sentence. Knowing
  // that BEFORE `resolve-windows --write` is what stops the widener silently
  // reverting an edit.
  await expect(warn).toContainText("0:09.00");
});

test("the cue rail marks the cues that close a sentence", async ({ page }) => {
  await page.goto(bench("c01"));
  // vid1: four of its first five cues end in a full stop; the run-on one does not.
  await expect(page.locator("[data-cue][data-ends-sentence='1']").first()).toBeVisible();
  const runOn = page.locator("[data-cue='3'][data-ends-sentence='0']");
  await expect(runOn).toBeVisible();
});

test("a saved window is stored at 2 dp, and the CLI's formatting survives", async ({ request }) => {
  const { token: t } = await token(request, "c01");
  const res = await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c01", start: 3.123456, end: 6.987654, token: t },
  });
  expect(res.ok()).toBeTruthy();

  // 2 dp is NOT cosmetic: resolve-windows.mjs is a fixed point, and both its EPS
  // lookup and its 0.05s deadband assume it. 4 dp makes the widener grow the
  // same clip on every run.
  const e = readClip("c01");
  expect(e.start).toBe(3.12);
  expect(e.end).toBe(6.99);

  // Indent 2 plus a trailing newline, which is what the CLI writes. The default
  // writeJsonAtomic uses indent 1 and would turn this into a 600-line diff.
  const raw = readFileSync(MANIFEST, "utf8");
  expect(raw).toContain('\n  "schemaVersion": 1,');
  expect(raw.endsWith("}\n")).toBe(true);

  // One copy of the last hand-authored state, made on the first write.
  expect(existsSync(`${MANIFEST}.bak`)).toBe(true);
});

test("a stale token is refused rather than allowed to overwrite", async ({ request }) => {
  const { token: t } = await token(request, "c02");
  const first = await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c02", start: 9, end: 11.5, token: t },
  });
  expect(first.ok()).toBeTruthy();

  // The same token again: somebody (resolve-windows --write, an agent, another
  // tab) wrote in between, and what they wrote is a judgement.
  const second = await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c02", start: 9, end: 10, token: t },
  });
  expect(second.status()).toBe(409);
  const j = (await second.json()) as { stale: boolean };
  expect(j.stale).toBe(true);
  // And it did NOT write.
  expect(readClip("c02").end).toBe(11.5);
});

test("the edit the bench predicts is a FIXED POINT for the widener", async ({ request }) => {
  const { token: t } = await token(request, "c01");
  // The value the bench said resolve-windows would produce.
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c01", start: 3.0, end: 9.0, token: t },
  });

  const out = execFileSync(
    "node",
    [path.join(UMTOOL, "report-to-video", "resolve-windows.mjs"), MANIFEST],
    { encoding: "utf8", env: { ...process.env, CHANNELS_DIR: path.join(FIXTURE, "channels") } },
  );
  // Setting an edge where a sentence actually ends means the next --write is a
  // no-op on that clip. That round-trip is the whole argument for the bench.
  const line = out.split("\n").find((l) => l.startsWith("c01"))!;
  expect(line).toContain("3.0–9.0 -> 3.0–9.0");
});

test("the raw window serves byte ranges, and refuses a file that is not this clip's", async ({
  request,
}) => {
  const q = `project=${encodeURIComponent(PROJECT)}&clip=c01`;
  const full = await request.get(`/api/report/raw?${q}`);
  expect(full.status()).toBe(200);
  expect(full.headers()["accept-ranges"]).toBe("bytes");
  // The absolute source second the file starts at, so the client converts
  // without a second request.
  expect(full.headers()["x-fetch-start"]).toBe("0");

  const part = await request.get(`/api/report/raw?${q}`, { headers: { Range: "bytes=0-1023" } });
  // Without a 206 the <video> element will not seek in a stream it did not
  // fully download, which is the whole interaction.
  expect(part.status()).toBe(206);
  expect(part.headers()["content-range"]).toMatch(/^bytes 0-1023\/\d+$/);

  // `file` must be a member of the server's own scan for THIS clip's video.
  expect((await request.get(`/api/report/raw?${q}&file=vid2_0.00-9.00.mp4`)).status()).toBe(404);
  expect((await request.get(`/api/report/raw?${q}&file=../../../etc/passwd`)).status()).toBe(404);
});

test("peaks come back in absolute source seconds, symmetric, with the silences in them", async ({
  request,
}) => {
  const r = await request.get(
    `/api/report/peaks?project=${encodeURIComponent(PROJECT)}&clip=c01&n=900`,
  );
  const j = (await r.json()) as { from: number; fetchStart: number; min: number[]; max: number[] };
  // Absolute, not relative to the fetched file.
  expect(j.from).toBe(0);
  expect(j.fetchStart).toBe(0);
  // analyseMedia's envelope is positive-only; mirroring it is what makes the
  // canvas draw a waveform rather than a row of upward spikes.
  expect(j.min[10]).toBe(-j.max[10]);

  // The synthesised silence at 3.0s. 900 buckets over 9s is one per 10ms.
  const at = (t: number) => j.max[Math.round((t / 9) * j.max.length)];
  expect(at(3.0)).toBe(0);
  expect(at(6.0)).toBe(0);
  expect(at(1.0)).toBeGreaterThan(0.05);
});

test("a bench save shows up on the project page", async ({ page, request }) => {
  const { token: t } = await token(request, "c01");
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c01", start: 3, end: 9, lockEnd: true, token: t },
  });

  await page.goto(`/browse/${PROJECT}`);
  const row = page.locator("[data-entry=c01][data-kind]");
  await expect(row).toContainText("end pinned");
  // lockEnd is the acknowledgement, so the row's warning goes with it.
  await expect(row).toHaveAttribute("data-mid-sentence", "0");
});


// ---------------------------------------------------------------------------
// The attribution.
//
// The fixture's cue file says `Fixture Channel` / `Fixture source vid1` /
// `20250101`, so the line the renderer would draw for an un-overridden clip is
// exact rather than plausible -- and so is what changes when a clip overrides
// it. The channel heads the line: a cut routinely spans a streamer's own
// channel and two VOD mirrors, and nothing else on screen says which is
// playing.
// ---------------------------------------------------------------------------

test("the preview is the line the renderer will draw, and the fields rewrite it", async ({
  page,
}) => {
  await page.goto(bench("c02"));
  const preview = page.locator("[data-attrib-preview]");
  // Un-overridden: the archived record's own title (cleaned) and upload date,
  // at `cite ?? start`. That is build-video.mjs's own attributionLine(),
  // imported rather than re-implemented -- which is the point of asserting it
  // here rather than in a unit test of the component.
  await expect(preview).toHaveText("Fixture Channel · Fixture source vid1 · 2025-01-01 @ 0:09");

  await setField(page, "title", "Monday Mail #11");
  await setField(page, "date", "2016-09-12");
  await expect(preview).toHaveText("Fixture Channel · Monday Mail #11 · 2016-09-12 @ 0:09");

  // On disk, through the one writer. Polled rather than read once: a blur
  // STARTS a PUT, and the preview above is local state until it lands.
  await expect.poll(() => readClip("c02").title).toBe("Monday Mail #11");
  await expect.poll(() => readClip("c02").date).toBe("2016-09-12");

  // And it is the manifest that is being read, not component state.
  await page.reload();
  await expect(page.locator("[data-attrib-preview]")).toHaveText(
    "Fixture Channel · Monday Mail #11 · 2016-09-12 @ 0:09",
  );
  await expect(page.locator("[data-attrib-field=title]")).toHaveValue("Monday Mail #11");

  // Empty DELETES the key -- `"title": ""` in a manifest read by humans is noise
  // that reads like a decision -- and the header goes back to the archive's.
  await setField(page, "title", "");
  await setField(page, "date", "");
  await expect(page.locator("[data-attrib-preview]")).toHaveText(
    "Fixture Channel · Fixture source vid1 · 2025-01-01 @ 0:09",
  );
  await expect.poll(() => readClip("c02").title).toBeUndefined();
  await expect.poll(() => readClip("c02").date).toBeUndefined();
});

test("a date that is not a real day is refused, and the bench says so", async ({ page, request }) => {
  // The regex alone accepts this. It reads as a date right up until somebody
  // tries to check the clip against the stream it claims to come from.
  const { token: t } = await token(request, "c02");
  const res = await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c02", date: "2025-02-31", token: t },
  });
  expect(res.status()).toBe(400);
  expect(((await res.json()) as { error: string }).error).toContain("real calendar date");
  expect(readClip("c02").date).toBeUndefined();

  await page.goto(bench("c02"));
  await setField(page, "date", "2025-02-31");
  await expect(page.locator("[data-bench-note]")).toContainText("real calendar date");
  // What was typed stays in the box: a rejected date is a typo to fix, and
  // clearing it would make somebody retype the other eight characters to find
  // out which one was wrong.
  await expect(page.locator("[data-attrib-field=date]")).toHaveValue("2025-02-31");
});

// ---------------------------------------------------------------------------
// The walk, and the two things it skips.
//
// Reviewing a cut is watching every clip in order and answering one question
// about each, so the walk goes to the clips that still NEED an answer and can
// be WATCHED today. A clip with nothing cached is a dead end -- there is
// nothing to judge and the only move is to press `n` again -- and one already
// answered is the round trip the walk exists to remove.
//
// These run against reports/walk-fixture, which is read-only for exactly this
// reason: every other test in this file writes verdicts into bench-fixture, so
// "ready 2 of 3" would be true there only until one of them ran. Its four
// clips are w01 (fetched, unjudged), w02 (in the gap between two cached files,
// so nothing to play at all), w03 (fetched, already confirmed) and w04
// (fetched, unjudged).
// ---------------------------------------------------------------------------

test("the walk visits only the clips that need judgement and are fetched", async ({ page }) => {
  await page.goto(walkBench("w01"));
  // w02 has nothing to play and w03 has already been answered, so the one move
  // forward from w01 is w04 -- named in the link, not just arrived at.
  await expect(page.locator("[data-clip-nav=next]")).toHaveText(/w04/);
  await page.locator("[data-clip-nav=next]").click();
  await expect(page.locator("[data-bench=w04]")).toBeVisible();

  // The same move from the keyboard, backwards over the same two clips.
  await keyboardLive(page);
  await page.locator("body").press("p");
  await expect(page.locator("[data-bench=w01]")).toBeVisible();

  // The ends of the WALK, which are not the ends of the cut.
  await expect(page.locator("[data-clip-nav=prev]")).toHaveCount(0);
  await page.goto(walkBench("w04"));
  await expect(page.locator("[data-clip-nav=next]")).toHaveCount(0);
});

test("a clip off the walk still opens by URL, and says why it is off it", async ({ page }) => {
  // Nothing fetched: it renders, it says so, and its links point at the
  // neighbours on either side rather than at nothing.
  await page.goto(walkBench("w02"));
  await expect(page.locator("[data-bench=w02]")).toBeVisible();
  await expect(page.locator("[data-clip-unfetched]")).toBeVisible();
  await expect(page.getByText("nothing fetched for this clip yet")).toBeVisible();
  await expect(page.locator("[data-clip-nav=prev]")).toHaveText(/w01/);
  await expect(page.locator("[data-clip-nav=next]")).toHaveText(/w04/);

  // Already judged: it opens too, with what the walk said about it, and it is
  // fetched -- so no pill.
  await page.goto(walkBench("w03"));
  await expect(page.locator("[data-bench=w03]")).toHaveAttribute("data-verdict", "confirmed");
  await expect(page.locator("[data-clip-unfetched]")).toHaveCount(0);
});

test("`ready N of M` counts the fetched clips that still need judgement", async ({ page }) => {
  await page.goto(`/browse/${WALK}`);
  await expect(page.locator("[data-ready-count]")).toHaveText("ready 2 of 3 needing judgement");
  // The pill is the same question the walk asks, per row.
  await expect(page.locator("[data-entry=w02][data-kind]")).toHaveAttribute("data-fetched", "0");
  await expect(page.locator("[data-entry=w02][data-kind]")).toContainText("not fetched yet");
  await expect(page.locator("[data-entry=w01][data-kind]")).toHaveAttribute("data-fetched", "1");
  // And the walk starts where the walk actually goes.
  await expect(page.locator("[data-walk-start=w01]")).toHaveAttribute(
    "href",
    `/browse/${WALK}/clip/w01`,
  );

  await page.goto(walkBench("w01"));
  await expect(page.locator("[data-ready-count]")).toHaveText("ready 2 of 3 needing judgement");
});

test("`y` walks on OVER a clip that has already been judged", async ({ page, request }) => {
  await page.goto(walkBench("w01"));
  await keyboardLive(page);
  await page.locator("body").press("y");
  // Not w02 (nothing to play) and not w03 (answered in the fixture): w04.
  await expect(page.locator("[data-bench=w04]")).toBeVisible();
  await expect.poll(() => readClipIn(WALK, "w01").verdict).toBe("confirmed");

  // Put it back. This is the ONE test that writes to walk-fixture, and the
  // counter above is only stable because it does.
  const { token: t } = await token(request, "w01", WALK);
  await request.put("/api/report/window", {
    data: { project: WALK, clip: "w01", verdict: "", token: t },
  });
  await expect.poll(() => readClipIn(WALK, "w01").verdict).toBeUndefined();
});

test("the segment route serves a built clip with ranges, and 404s when there is none", async ({
  page,
  request,
}) => {
  const q = (clip: string) => `project=${encodeURIComponent(PROJECT)}&clip=${clip}`;

  // Nothing is rendered for c03, and that is the NORMAL state of a clip nobody
  // has built -- the bench says so rather than showing a broken player.
  //
  // It lives behind a <details> now: two 16:9 players is what made this bench
  // taller than a laptop, and the rendered one is looked at once per clip,
  // after a render. Opening it is the interaction, so the spec does it too.
  expect((await request.get(`/api/report/segment?${q("c03")}`)).status()).toBe(404);
  await page.goto(bench("c03"));
  await page.locator("[data-rendered-strip] summary").click();
  await expect(page.getByTestId("no-segment")).toBeVisible();
  await expect(page.getByTestId("segment-video")).toHaveCount(0);

  // A real segment, placed rather than built: a preview build here would be a
  // second copy of build.spec's job, and what is being tested is the ROUTE.
  const segDir = path.join(FIXTURE, "reports", "bench-fixture", "out", "sourced", "segments");
  mkdirSync(segDir, { recursive: true });
  copyFileSync(
    path.join(FIXTURE, "reports", "bench-fixture", "out", "clips-raw", "vid1_0.00-9.00.mp4"),
    path.join(segDir, "c01.mp4"),
  );

  const full = await request.get(`/api/report/segment?${q("c01")}`);
  expect(full.status()).toBe(200);
  expect(full.headers()["accept-ranges"]).toBe("bytes");
  const mtime = full.headers()["x-segment-mtime"];
  expect(mtime).toMatch(/^\d+$/);

  // Without a 206 the <video> element will not seek in a stream it did not fully
  // download, which is the whole interaction.
  const part = await request.get(`/api/report/segment?${q("c01")}&v=${mtime}`, {
    headers: { Range: "bytes=0-1023" },
  });
  expect(part.status()).toBe(206);
  expect(part.headers()["content-range"]).toMatch(/^bytes 0-1023\/\d+$/);
  // The mtime is what makes a re-render visible: a matching v may be cached
  // hard, a stale one must not be cached at all.
  expect(part.headers()["cache-control"]).toContain("immutable");
  const stale = await request.get(`/api/report/segment?${q("c01")}&v=1`);
  expect(stale.headers()["cache-control"]).toContain("no-store");

  // And the bench plays it, at the URL carrying that mtime.
  await page.goto(bench("c01"));
  await expect(page.getByTestId("segment-video")).toHaveAttribute(
    "src",
    new RegExp(`api/report/segment.*v=${mtime}`),
  );

  // A name that is not this clip's is not reachable: the file name is built from
  // the id the timeline vouched for, never from anything the client typed.
  expect((await request.get(`/api/report/segment?${q("../../../etc/passwd")}`)).status()).toBe(404);
});

test("a correction is written for the next pass, and collected on the project page", async ({
  page,
}) => {
  const text = "Speaker is Dan on a call, not Destiny, and he is talking TO Destiny.";
  await page.goto(bench("c04"));
  await setField(page, "correction", text);
  await expect.poll(() => readClip("c04").correction).toBe(text);
  // Writing a note on a clip nobody has confirmed IS saying the clip is wrong,
  // and the verdict rides in the same patch.
  expect(readClip("c04").verdict).toBe("incorrect");

  await page.reload();
  await expect(page.locator("[data-attrib-field=correction]")).toHaveValue(text);

  // The project page lists it, because the list's real destination is somebody's
  // next prompt -- not this manifest, which cannot fix a defect in the report.
  await page.goto(`/browse/${PROJECT}`);
  const list = page.locator("[data-corrections]");
  await expect(list).toBeVisible();
  await expect(list.locator("[data-correction=c04]")).toContainText("not Destiny");

  // Empty deletes the key, and the section goes with the last correction --
  // but an INCORRECT clip cannot have its note taken away, so the way back is
  // to say the clip is fine first. That is the point of the rule: "no" without
  // a reason is a complaint nobody can act on.
  await page.goto(bench("c04"));
  await page.locator("[data-verdict-yes]").click();
  await expect.poll(() => readClip("c04").verdict).toBe("confirmed");
  await page.goto(bench("c04"));
  await setField(page, "correction", "");
  await expect.poll(() => readClip("c04").correction).toBeUndefined();
  await page.goto(`/browse/${PROJECT}`);
  await expect(page.locator("[data-corrections]")).toHaveCount(0);
});


// ---------------------------------------------------------------------------
// Which cached file the bench plays.
//
// clips-raw is keyed by VIDEO, so a report citing one stream four times leaves
// four files in it. "The widest file for this video" is then another clip's
// file as often as not, and the player seeks `start - from` into it -- for
// ElfpireEva's f01 that was 1146 s into a 44-second file, so the bench showed
// nothing, or somebody else's seconds, on every clip after the first.
// ---------------------------------------------------------------------------

test("the bench plays the file that HOLDS this clip, not the widest for the video", async ({
  page,
  request,
}) => {
  const r = await request.get(
    `/api/report/clip?project=${encodeURIComponent(PROJECT)}&clip=c04`,
  );
  const j = (await r.json()) as { windows: { name: string; from: number; to: number }[] };
  // c04 is 15.00-18.00. vid1_0.00-9.00 does not touch it at all and is gone;
  // vid1_10.00-16.00 overlaps by a second without containing it; only
  // vid1_14.50-18.50 holds it, and it is the NARROWEST of the three.
  expect(j.windows.map((w) => w.name)).toEqual([
    "vid1_14.50-18.50.mp4",
    "vid1_10.00-16.00.mp4",
  ]);

  await page.goto(bench("c04"));
  await expect(page.getByTestId("clip-video")).toHaveAttribute(
    "src",
    /file=vid1_14\.50-18\.50\.mp4/,
  );

  // And a caller with no window at all -- a ledger claim asks for its VIDEO's
  // files and picks by cite -- still gets them. Filtering an absent window by
  // overlap would compare against NaN and leave the claim with nothing.
  const claim = await request.get(
    `/api/report/raw?project=${encodeURIComponent(PROJECT)}&claim=k01`,
  );
  expect(claim.status()).toBe(200);
  expect(claim.headers()["x-window"]).toBe("vid1_0.00-9.00.mp4");
});

// ---------------------------------------------------------------------------
// The walk: what a clip is supposed to be, and whether it is.
//
// A clip is a CLAIM -- the report said somebody said this, here -- and the
// walk is somebody checking that claim against the audio. Two answers: yes, or
// a note saying what is wrong. An absent verdict is the third state and it is
// the honest one: nobody has been here yet.
// ---------------------------------------------------------------------------

test("the bench says what the clip is supposed to be", async ({ page }) => {
  await page.goto(bench("c01"));
  await expect(page.locator("[data-clip-quote]")).toContainText("and because");
  // The fixture's clips carry no `note`, and that is a thing to SAY rather
  // than an empty box.
  await expect(page.locator("[data-clip-note]")).toHaveText("no note");
  await expect(page.locator("[data-verdict-state]")).toHaveText("not yet reviewed");
});

test("`y` confirms the clip and walks on; the manifest says so", async ({ page, request }) => {
  // c04 is the only OTHER clip here the walk can visit -- c02 and c03 have
  // nothing cached that holds them -- so the state it is in decides where this
  // lands. Said out loud rather than inherited from whichever test ran before.
  const { token: t0 } = await token(request, "c04");
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c04", verdict: "", token: t0 },
  });

  await page.goto(bench("c01"));
  await keyboardLive(page);
  await page.locator("body").press("y");

  // Confirming ADVANCES: in the yes case the next clip you can judge is what
  // you want, and a walk of sixty clips is one finger. Over c02 and c03, which
  // are not fetched, to c04.
  await expect(page.locator("[data-bench=c04]")).toBeVisible();
  await expect.poll(() => readClip("c01").verdict).toBe("confirmed");

  await page.goto(bench("c01"));
  await expect(page.locator("[data-verdict-state]")).toHaveText("confirmed");
  await expect(page.locator("[data-bench=c01]")).toHaveAttribute("data-verdict", "confirmed");

  // Empty clears it, the way every other field in this manifest clears.
  const { token: t } = await token(request, "c01");
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c01", verdict: "", token: t },
  });
  await expect.poll(() => readClip("c01").verdict).toBeUndefined();
});

test("`y` saves a window you nudged but never saved, in the same write", async ({
  page,
  request,
}) => {
  // Known ground on both clips the walk touches, so the only thing that moves
  // an edge here is the key press below.
  const { token: t0 } = await token(request, "c01");
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c01", start: 3, end: 6, verdict: "", token: t0 },
  });
  const { token: t1 } = await token(request, "c04");
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c04", verdict: "", token: t1 },
  });

  await page.goto(bench("c01"));
  await keyboardLive(page);
  // 6.00 -> 6.05, unsaved: `save window` is lit and nobody has pressed it.
  await page.locator("body").press(".");
  await expect(page.getByRole("button", { name: "save window" })).toBeEnabled();

  await page.locator("body").press("y");

  // ONE write carries both. Confirming a clip whose edge you just nudged is a
  // judgement about THAT window, and the advance would otherwise walk away
  // from it.
  await expect.poll(() => readClip("c01").end).toBe(6.05);
  expect(readClip("c01").start).toBe(3);
  expect(readClip("c01").verdict).toBe("confirmed");
  // And it still advances, over c02 and c03, which are not fetched.
  await expect(page.locator("[data-bench=c04]")).toBeVisible();

  // Put c01 back where the rest of this file found it.
  const { token: t2 } = await token(request, "c01");
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c01", start: 3, end: 9, verdict: "", token: t2 },
  });
  await expect.poll(() => readClip("c01").verdict).toBeUndefined();
});

test("`x` requires the note, writes both fields at once, and stays put", async ({ page }) => {
  await page.goto(bench("c03"));
  // The key IS the assertion: `x` answers "no" by putting the cursor where the
  // answer goes -- and keyboardLive() blurs it again with the box still empty,
  // which must write NOTHING. Blurring out of a box you were asked to fill is
  // not an answer.
  await keyboardLive(page);
  expect(readClip("c03").verdict).toBeUndefined();
  expect(readClip("c03").correction).toBeUndefined();
  await expect(page.locator("[data-verdict-state]")).toHaveText("not yet reviewed");

  await setField(page, "correction", "The speaker here is the caller, not the host.");
  // ONE patch. The manifest never holds a complaint with no verdict, which is
  // why the bench sends them together rather than in two saves.
  await expect.poll(() => readClip("c03").verdict).toBe("incorrect");
  expect(readClip("c03").correction).toContain("the caller");
  await expect(page.locator("[data-verdict-state]")).toHaveText("incorrect");
  // And it STAYS: the note is there to be read back against the clip.
  await expect(page.locator("[data-bench=c03]")).toBeVisible();
});

test("`y` on an incorrect clip keeps the note — it becomes a note, not a defect", async ({
  page,
}) => {
  await page.goto(bench("c03"));
  await expect(page.locator("[data-verdict-state]")).toHaveText("incorrect");

  await page.locator("[data-verdict-yes]").click();
  await expect.poll(() => readClip("c03").verdict).toBe("confirmed");
  // The note survives the confirmation. It stops being a complaint and becomes
  // what it now says it is: something a reader should know about a good clip.
  expect(readClip("c03").correction).toContain("the caller");

  await page.goto(bench("c03"));
  await expect(page.locator("[data-verdict-state]")).toHaveText("confirmed · with note");
});

test("`x` on a confirmed clip that already has a note takes the yes back", async ({ page }) => {
  // The operator's case: a clip confirmed WITH a note ("this is another speaker,
  // but it does contain what you say") re-auditioned and found wrong after all.
  // The note already says what is wrong, so "no" must not wait for an edit to
  // it -- the verdict flips on the button, and the note stays.
  await page.goto(bench("c03"));
  await expect(page.locator("[data-verdict-state]")).toHaveText("confirmed · with note");

  await page.locator("[data-verdict-no]").click();
  await expect.poll(() => readClip("c03").verdict).toBe("incorrect");
  expect(readClip("c03").correction).toContain("the caller");
  await expect(page.locator("[data-verdict-state]")).toHaveText("incorrect");
  // Stays put, like every "no": the note is there to be read back.
  await expect(page.locator("[data-bench=c03]")).toBeVisible();
});

test("an incorrect verdict cannot have its note taken away, or arrive without one", async ({
  page,
  request,
}) => {
  // c02 carries no note, so this is the same error from the other side.
  const { token: t2 } = await token(request, "c02");
  const bad = await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c02", verdict: "incorrect", token: t2 },
  });
  expect(bad.status()).toBe(400);
  expect(((await bad.json()) as { error: string }).error).toContain("needs its note");
  expect(readClip("c02").verdict).toBeUndefined();

  // c03 still has its note; put the incorrect verdict back on it.
  const { token: t3 } = await token(request, "c03");
  const ok = await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c03", verdict: "incorrect", token: t3 },
  });
  expect(ok.ok()).toBeTruthy();

  // Now empty the box in the bench. Refused, and the bench says why rather
  // than quietly leaving the screen and the manifest disagreeing.
  await page.goto(bench("c03"));
  await setField(page, "correction", "");
  await expect(page.locator("[data-bench-note]")).toContainText("needs its note");
  expect(readClip("c03").correction).toContain("the caller");
  expect(readClip("c03").verdict).toBe("incorrect");

  // Cleared the only way there is -- say the clip is fine, then drop the note.
  await page.locator("[data-verdict-yes]").click();
  await expect.poll(() => readClip("c03").verdict).toBe("confirmed");
  await page.goto(bench("c03"));
  await setField(page, "correction", "");
  await expect.poll(() => readClip("c03").correction).toBeUndefined();
  const { token: t4 } = await token(request, "c03");
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c03", verdict: "", token: t4 },
  });
  await expect.poll(() => readClip("c03").verdict).toBeUndefined();
});

test("a note written before `incorrect` existed still reads as incorrect", async ({
  page,
  request,
}) => {
  // Two of these are in a live manifest: `x` wrote a correction and no verdict
  // before there was one to write. They are read, never migrated.
  const { token: t } = await token(request, "c02");
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c02", correction: "legacy: written before the verdict was", token: t },
  });
  expect(readClip("c02").verdict).toBeUndefined();

  await page.goto(bench("c02"));
  await expect(page.locator("[data-verdict-state]")).toHaveText("incorrect");
  await expect(page.locator("[data-bench=c02]")).toHaveAttribute("data-verdict", "incorrect");

  await page.goto(`/browse/${PROJECT}`);
  await expect(page.locator("[data-walk-progress]")).toContainText("incorrect");
  await expect(page.locator("[data-correction=c02]")).toHaveAttribute(
    "data-correction-verdict",
    "incorrect",
  );

  // And a legacy note can still be cleared: the required-note rule is keyed on
  // the explicit verdict, so it never traps somebody in a state they wrote
  // before the rule existed.
  const { token: t2 } = await token(request, "c02");
  const gone = await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c02", correction: "", token: t2 },
  });
  expect(gone.ok()).toBeTruthy();
  expect(readClip("c02").correction).toBeUndefined();
});

// ---------------------------------------------------------------------------
// How you listen.
//
// Per browser, never per manifest. The edge-aware audition is the bug this
// pair was born with: every change played `from` to `from + 6`, so moving the
// END -- the edge that decides whether a clip stops mid-thought -- played the
// start and answered a question nobody asked.
// ---------------------------------------------------------------------------

test("moving the end auditions the END", async ({ page }) => {
  await page.goto(bench("c01"));
  await keyboardLive(page);

  const before = readClip("c01");
  await page.locator("body").press(".");
  // Clamped to the cached file, which ends at 9.00 -- a drag never downloads.
  const to = Math.min(before.end + 0.05, 9);
  // The four seconds ENDING on the new edge, not the four after the start --
  // read from the bench's own record of what it scheduled, on the audio clock.
  const playback = page.locator("[data-playback]");
  await expect(playback).toHaveAttribute("data-play-engine", "webaudio", { timeout: 15_000 });
  expect(Number(await playback.getAttribute("data-play-to"))).toBeCloseTo(to, 2);
  expect(Number(await playback.getAttribute("data-play-from"))).toBeCloseTo(to - 4, 2);
  // And the picture follows it there, muted: vid1_0.00-9.00 starts at 0.00,
  // so file time IS source time.
  await expect
    .poll(() => page.getByTestId("clip-video").evaluate((el: HTMLVideoElement) => el.currentTime))
    .toBeGreaterThan(to - 4 - 0.4);
});

// ---------------------------------------------------------------------------
// Exact playback.
//
// Every bounded range plays from the DECODED audio with Web Audio, started and
// stopped on the audio clock. The element it replaces was stopped from
// `timeupdate`, which overran the end by up to a quarter of a second -- the
// difference between a cut between two words and one into the next.
//
// The proof is the signal, not the bench's word for it: TAP (below) is an
// AudioWorklet put between the bench's audio and the speakers that records the
// first and last NON-ZERO frame it is handed, on the context's own frame
// clock. The bench publishes when it scheduled the stop (`data-play-ctx-stop`);
// the two must agree to within one render quantum (128 frames).
//
// vid1 is a 440 Hz tone with silences at 2.9-3.1 and 5.9-6.1, so a selection
// ending at 5.00 ends INSIDE the tone: the last sound is the stop, not a
// silence that happened to come first.
// ---------------------------------------------------------------------------

const TAP = `(() => {
  const code = \`class Tap extends AudioWorkletProcessor {
    constructor() { super(); this.first = -1; this.last = -1;
      this.port.onmessage = (e) => {
        if (e.data === "reset") { this.first = -1; this.last = -1; }
        if (e.data === "read") this.port.postMessage({ first: this.first, last: this.last, sr: sampleRate });
      };
    }
    process(inputs) {
      const ch = inputs[0] && inputs[0][0];
      if (ch) for (let i = 0; i < ch.length; i += 1) if (ch[i] !== 0) {
        const f = currentFrame + i; if (this.first < 0) this.first = f; this.last = f;
      }
      return true;
    }
  }
  registerProcessor("tap", Tap);\`;
  const url = URL.createObjectURL(new Blob([code], { type: "application/javascript" }));
  const Orig = window.AudioContext;
  if (!Orig) return;
  const conn = AudioNode.prototype.connect;
  window.__tapRead = () => new Promise((res) => {
    const n = window.__tapNode;
    if (!n) return res(null);
    n.port.onmessage = (e) => res(e.data);
    n.port.postMessage("read");
  });
  window.__tapReset = () => window.__tapNode && window.__tapNode.port.postMessage("reset");
  window.AudioContext = class extends Orig {
    constructor(...a) {
      super(...a);
      const ctx = this;
      ctx.audioWorklet.addModule(url).then(() => {
        const n = new AudioWorkletNode(ctx, "tap", { outputChannelCount: [1] });
        conn.call(n, ctx.destination);
        ctx.__tap = n;
        window.__tapNode = n;
        for (const src of ctx.__pending || []) conn.call(src, n);
        ctx.__pending = [];
      });
    }
  };
  AudioNode.prototype.connect = function (dest, ...rest) {
    const r = conn.call(this, dest, ...rest);
    const tap = this.context && this.context.__tap;
    if (dest === this.context.destination && this !== tap) {
      if (tap) conn.call(this, tap);
      else (this.context.__pending = this.context.__pending || []).push(this);
    }
    return r;
  };
})();`;

type Tap = { first: number; last: number; sr: number } | null;
const tapRead = (page: import("@playwright/test").Page) =>
  page.evaluate(() => (window as unknown as { __tapRead: () => Promise<Tap> }).__tapRead());
const tapReset = (page: import("@playwright/test").Page) =>
  page.evaluate(() => (window as unknown as { __tapReset: () => void }).__tapReset());

/** The bench's record of its last playback, as numbers. */
const lastPlay = async (page: import("@playwright/test").Page) => {
  const p = page.locator("[data-playback]");
  const n = async (k: string) => Number(await p.getAttribute(`data-play-${k}`));
  return {
    engine: await p.getAttribute("data-play-engine"),
    from: await n("from"),
    to: await n("to"),
    rate: await n("rate"),
    ctxStart: await n("ctx-start"),
    ctxStop: await n("ctx-stop"),
  };
};

/** Start a playback with `go` and wait until the bench says it has stopped. */
const playThrough = async (page: import("@playwright/test").Page, go: () => Promise<void>) => {
  const p = page.locator("[data-playback]");
  await tapReset(page);
  await go();
  await expect(p).toHaveAttribute("data-play-state", "playing", { timeout: 10_000 });
  await expect(p).toHaveAttribute("data-play-state", "stopped", { timeout: 20_000 });
  // `ended` reaches the page a task after the audio thread stopped; the tap's
  // reply is one more message behind it.
  await page.waitForTimeout(100);
  return { play: await lastPlay(page), tap: await tapRead(page) };
};

/** Put c01 back to its fixture window with no mute mark. */
const resetC01 = async (request: import("@playwright/test").APIRequestContext) => {
  const { token: t } = await token(request, "c01");
  const r = await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c01", start: 3, end: 6, muteFrom: "", token: t },
  });
  expect(r.ok()).toBeTruthy();
};

test("a play-selection stops within one audio render quantum of its end, at any speed", async ({
  page,
  request,
}) => {
  await resetC01(request);
  await page.addInitScript(TAP);
  await page.goto(bench("c01"));
  await expect(page.locator("[data-playback]")).toHaveAttribute("data-audio-state", "ready", {
    timeout: 15_000,
  });
  await keyboardLive(page);
  // 6.00 -> 5.00 (shift-, is half a second): the end now lies in the tone.
  // Each press auditions the end it moved, which also opens the audio output
  // and puts the tap in the path.
  await page.locator("body").press("Shift+Comma");
  await page.locator("body").press("Shift+Comma");
  await expect
    .poll(async () => Number(await page.locator("[data-playback]").getAttribute("data-play-to")), {
      timeout: 10_000,
    })
    .toBeCloseTo(5, 3);
  await expect(page.locator("[data-playback]")).toHaveAttribute("data-play-state", "stopped", {
    timeout: 10_000,
  });

  for (const rate of ["1", "2"]) {
    await page.locator("[data-playback-rate]").selectOption(rate);
    const { play, tap } = await playThrough(page, () => page.locator("[data-play-selection]").click());
    expect(play.engine).toBe("webaudio");
    expect(play.from).toBeCloseTo(3, 3);
    expect(play.to).toBeCloseTo(5, 3);
    expect(play.rate).toBe(Number(rate));
    expect(tap, "the tap saw the bench's audio").not.toBeNull();
    const { first, last, sr } = tap!;
    expect(last).toBeGreaterThan(first);
    const quantum = 128;
    // The STOP: the last sound is the scheduled stop, to within a quantum.
    const stopFrame = Math.round(play.ctxStop * sr);
    expect(Math.abs(last + 1 - stopFrame), `stopped ${last + 1 - stopFrame} frames from the end at ${rate}x`).toBeLessThanOrEqual(quantum);
    // And nothing sounded before the scheduled start. (Not "the first sound
    // IS the start": 3.00 is inside the silence at 2.9-3.1, so the first
    // non-zero frame is the tone coming back.)
    expect(first).toBeGreaterThanOrEqual(Math.round(play.ctxStart * sr) - quantum);
  }
});

test("the mute mark: picked on the waveform, heard at once, saved, shown, cleared", async ({
  page,
  request,
}) => {
  await resetC01(request);
  await page.addInitScript(TAP);
  await page.goto(bench("c01"));
  const playback = page.locator("[data-playback]");
  await expect(playback).toHaveAttribute("data-audio-state", "ready", { timeout: 15_000 });
  await expect(page.locator("[data-mute]")).toHaveAttribute("data-mute", "");
  await expect(page.locator("[data-mute-marker]")).toHaveCount(0);

  // Armed, the next click on the waveform places the mark: at 5.00 of the
  // cached 0.00-9.00, the tone between the two silences.
  await page.locator("[data-mute-pick]").click();
  await expect(page.locator("[data-mute-pick=armed]")).toBeVisible();
  const layer = page.locator("[data-mute-pick-layer]");
  const box = (await layer.boundingBox())!;
  const { play, tap } = await playThrough(page, () =>
    page.mouse.click(box.x + (box.width * 5) / 9, box.y + box.height / 2),
  );
  const marker = page.locator("[data-mute-marker]");
  await expect(marker).toBeVisible();
  const mark = Number(await marker.getAttribute("data-mute-marker"));
  expect(mark).toBeGreaterThan(4.9);
  expect(mark).toBeLessThan(5.1);
  await expect(page.locator("[data-mute-pick-layer]")).toHaveCount(0);
  await expect(page.locator("[data-mute-unsaved]")).toContainText("was none");

  // The pick plays ACROSS the mark -- up to three seconds before it (here
  // from the selection's start), to the end of the selection -- and the sound
  // goes at the mark: the fade (MUTE_FADE, the build's) ENDS there, so the
  // last non-zero frame is at the mark, not the 6.00 the tone runs on to.
  expect(play.engine).toBe("webaudio");
  expect(play.from).toBeCloseTo(Math.max(3, mark - 3), 2);
  expect(play.to).toBeCloseTo(6, 2);
  const { last, sr } = tap!;
  const silentAt = play.ctxStart + (mark - play.from);
  expect(Math.abs((last + 1) / sr - silentAt), "silent at the mark, not at the end").toBeLessThan(0.01);

  // Saved by `save window`, like the edges; the manifest has it.
  await page.locator("[data-save-window]").click();
  await expect(page.locator("[data-bench-note]")).toContainText("saved");
  expect(readClip("c01").muteFrom).toBeCloseTo(mark, 2);
  await expect(page.locator("[data-mute-unsaved]")).toHaveCount(0);

  // A reload shows the saved mark.
  await page.reload();
  await expect(page.locator("[data-mute-marker]")).toHaveAttribute("data-mute-marker", String(readClip("c01").muteFrom));
  await expect(page.locator("[data-mute-from]")).toBeVisible();

  // Moved like an edge, and cleared.
  await keyboardLive(page);
  await page.locator("body").press("Shift+Semicolon");
  await expect(page.locator("[data-mute-marker]")).toHaveAttribute(
    "data-mute-marker",
    String(Number((readClip("c01").muteFrom! - 0.5).toFixed(2))),
  );
  await page.locator("[data-mute-clear]").click();
  await expect(page.locator("[data-mute-marker]")).toHaveCount(0);
  await expect(page.locator("[data-mute-unsaved]")).toBeVisible();
  await page.locator("[data-save-window]").click();
  await expect(page.locator("[data-bench-note]")).toContainText("saved");
  expect(readClip("c01").muteFrom).toBeUndefined();

  // The writer's rule, through the route: inside the clip, or refused.
  const { token: t } = await token(request, "c01");
  const out = await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c01", muteFrom: 8, token: t },
  });
  expect(out.status()).toBe(400);
  expect(((await out.json()) as { error: string }).error).toMatch(/must lie inside the clip 3–6/);
});

test("a decode that fails falls back to the element, and the bench says so", async ({ page }) => {
  await page.route("**/api/report/audio**", (r) =>
    r.fulfill({ status: 422, json: { error: "this file has no audio track" } }),
  );
  await page.goto(bench("c01"));
  const fallback = page.locator("[data-playback-fallback]");
  await expect(fallback).toBeVisible({ timeout: 15_000 });
  await expect(fallback).toContainText("this file has no audio track");
  await page.locator("[data-play-selection]").click();
  await expect(page.locator("[data-playback]")).toHaveAttribute("data-play-engine", "element");
  await expect
    .poll(() => page.getByTestId("clip-video").evaluate((el: HTMLVideoElement) => !el.paused))
    .toBe(true);
});

test("the playback speed is this browser's, and it survives a reload", async ({ page }) => {
  await page.goto(bench("c01"));
  await page.locator("[data-playback-rate]").selectOption("1.5");
  await expect
    .poll(() => page.getByTestId("clip-video").evaluate((el: HTMLVideoElement) => el.playbackRate))
    .toBe(1.5);

  await page.reload();
  await expect(page.locator("[data-playback-rate]")).toHaveValue("1.5");
  await expect
    .poll(() => page.getByTestId("clip-video").evaluate((el: HTMLVideoElement) => el.playbackRate))
    .toBe(1.5);
});

test("auto-audition plays the clip you walk onto", async ({ page, request }) => {
  // c03 -> c04: c03 itself has nothing cached (it is reached here by URL, which
  // still works), and c04 is the next clip the walk can visit. Its verdict is
  // set explicitly, because an answered clip is not one the walk goes to.
  const { token: t } = await token(request, "c04");
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c04", verdict: "", token: t },
  });
  await page.goto(bench("c03"));
  await page.locator("[data-auto-audition=off]").click();
  await expect(page.locator("[data-auto-audition=on]")).toBeVisible();

  await page.locator("[data-clip-nav=next]").click();
  await expect(page.locator("[data-bench=c04]")).toBeVisible();
  // The whole clip, from the decoded audio -- and the picture with it.
  const playback = page.locator("[data-playback]");
  await expect(playback).toHaveAttribute("data-play-engine", "webaudio", { timeout: 15_000 });
  expect(Number(await playback.getAttribute("data-play-from"))).toBeCloseTo(15, 2);
  expect(Number(await playback.getAttribute("data-play-to"))).toBeCloseTo(18, 2);
  await expect
    .poll(
      () => page.getByTestId("clip-video").evaluate((el: HTMLVideoElement) => !el.paused),
      { timeout: 15_000 },
    )
    .toBe(true);
});

test("the project page opens the walk at the first clip", async ({ page }) => {
  await page.goto(`/browse/${PROJECT}`);
  const cta = page.locator("[data-walk-cut]");
  await expect(cta).toBeVisible();
  await expect(cta).toContainText("Walk the cut");
  // Named, so it is a promise about where it goes rather than a mystery.
  await expect(page.locator("[data-walk-start=c01]")).toHaveAttribute(
    "href",
    `/browse/${PROJECT}/clip/c01`,
  );
  await page.locator("[data-walk-start=c01]").click();
  await expect(page.locator("[data-bench=c01]")).toBeVisible();
});


// ---------------------------------------------------------------------------
// Fetching more, and reading ahead before you pay for it.
//
// The pad is measured from the CLIP, not from the cache, and the pipeline
// reuses any file that already contains the window -- so a flat `pad: 20`
// asked for the same seconds twice, downloaded nothing, exited 0, and the
// bench reported "fetched" over a cache that had not moved.
// ---------------------------------------------------------------------------

test("a fetch the cache already covers is refused, not run", async ({ request }) => {
  // c01 3.00-6.00 inside vid1_0.00-9.00 is exactly ±3 s of pad.
  const { token: t } = await token(request, "c01");
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c01", start: 3, end: 6, token: t },
  });

  const res = await request.post("/api/report/fetch", {
    data: { project: PROJECT, clip: "c01", pad: 3 },
  });
  expect(res.status()).toBe(409);
  const j = (await res.json()) as { error: string; cachedBefore: number; cachedAfter: number };
  // Per SIDE, because that is the unit a fetch is asked for in now.
  expect(j.error).toContain("already cached to −3 s / +3 s");
  expect(j.cachedBefore).toBe(3);
  expect(j.cachedAfter).toBe(3);

  // And nothing started: a no-op job is worse than an answer, because it takes
  // a minute to say the same thing.
  const running = (await (await request.get("/api/report/fetch")).json()) as {
    job: unknown | null;
  };
  expect(running.job).toBeNull();
});

test("each side names its own pad, and a side that cannot grow says so", async ({ page }) => {
  await page.goto(bench("c01"));
  // The cached file reaches 3 s past the clip's end, so the after button asks
  // for 23 -- never the flat 20 that was already there.
  const after = page.locator("[data-fetch-after]");
  await expect(after).toBeVisible();
  await expect(after).toHaveAttribute("data-fetch-after", "23");
  await expect(after).toContainText("fetch to +23 s");

  // And there is nothing before 0.00 to fetch: c01 starts at 3 s into a
  // recording whose cached file already begins at the beginning.
  await expect(page.locator("[data-fetch-before]")).toHaveCount(0);
  await expect(page.locator("[data-fetch-before-maxed]")).toContainText("the recording starts here");
});

test("the rail reads past the cache, dimmed, and a dimmed cue fetches to itself", async ({
  page,
}) => {
  await page.goto(bench("c01"));
  // vid1's cues run to 21 s and the cached file stops at 9 -- so there is
  // something to read out there, and it is marked as not fetched.
  const peeked = page.locator("[data-cue][data-peek='1']");
  await expect(peeked.first()).toBeVisible();
  await expect(page.locator("[data-cache-edge]")).toHaveCount(2);
  // The cues inside the cache are still the ones that can move an edge.
  await expect(page.locator("[data-cue='3'][data-peek='0']")).toBeVisible();

  // Clicking a dimmed cue asks for exactly the pad that reaches it. The POST is
  // intercepted rather than run: what is being tested is the arithmetic, and a
  // real fetch here would be the build spec's job a second time.
  let body: { padBefore?: number; padAfter?: number } = {};
  await page.route("**/api/report/fetch", async (route) => {
    if (route.request().method() !== "POST") return route.continue();
    body = route.request().postDataJSON() as { padBefore?: number; padAfter?: number };
    await route.fulfill({ status: 409, json: { error: "intercepted" } });
  });

  const cue = peeked.first();
  const at = Number(await cue.getAttribute("data-cue"));
  await cue.click();
  await expect.poll(() => body.padAfter).toBeGreaterThan(0);
  // Far enough to hold that cue's start plus a breath, measured from the clip
  // -- and ONE SIDE: the cue is past the end, so the before side is passed
  // through exactly as cached rather than re-fetched.
  expect(body.padAfter!).toBeGreaterThanOrEqual(Math.ceil(at + 2 - 6));
  expect(body.padBefore).toBe(3);
});


// ---------------------------------------------------------------------------
// The other clips from the same recording.
//
// vid1 carries c01, c02 and c04; vid2 carries only c03. "Is the context this
// clip is missing already in the cut?" is a question about the MANIFEST, and
// the two answers -- a hole and a duplicate -- look identical from inside one
// clip.
// ---------------------------------------------------------------------------

test("the peeked cues are readable, in order, with the cache edge marked", async ({ page }) => {
  await page.goto(bench("c01"));
  const rows = page.locator("[data-tcue]");
  await expect(rows.first()).toBeVisible();

  // Reading order, which is the whole point: the rail squeezes the same cues
  // into columns a few characters wide, and that is unreadable by design --
  // it is a timeline.
  const starts = await rows.evaluateAll((els) =>
    els.map((e) => Number(e.getAttribute("data-tcue"))),
  );
  expect(starts.length).toBeGreaterThan(0);
  expect(starts).toEqual([...starts].sort((a, b) => a - b));

  // Both sides of the cache are here, and the boundary between them is drawn
  // once rather than left to be inferred from a shade of grey.
  const cached = await page.locator("[data-tcue][data-peek='0']").count();
  const peeked = await page.locator("[data-tcue][data-peek='1']").count();
  expect(cached).toBeGreaterThan(0);
  expect(peeked).toBeGreaterThan(0);
  await expect(page.locator("[data-cache-rule=end]")).toContainText("not fetched");
});

test("clicking a peeked line fetches only that side", async ({ page, request }) => {
  const clip = (await (
    await request.get(`/api/report/clip?project=${encodeURIComponent(PROJECT)}&clip=c01`)
  ).json()) as { clip: { start: number }; windows: { from: number }[] };
  const reachBefore = Number((clip.clip.start - clip.windows[0].from).toFixed(2));

  await page.goto(bench("c01"));
  let body: { padBefore?: number; padAfter?: number } = {};
  await page.route("**/api/report/fetch", async (route) => {
    if (route.request().method() !== "POST") return route.continue();
    body = route.request().postDataJSON() as { padBefore?: number; padAfter?: number };
    await route.fulfill({ status: 409, json: { error: "intercepted" } });
  });

  await page.locator("[data-tcue][data-peek='1']").first().click();
  await expect.poll(() => body.padAfter).toBeGreaterThan(0);
  // The lead-in is already on disk; paying for it again to hear the sentence
  // that follows is the waste one-sided fetching exists to stop.
  expect(body.padBefore).toBe(reachBefore);
});

test("a clip lists the other clips cut from its recording", async ({ page, request }) => {
  const r = await request.get(
    `/api/report/clip?project=${encodeURIComponent(PROJECT)}&clip=c01`,
  );
  const j = (await r.json()) as { siblings: { id: string; where: string; side: string }[] };
  // Sorted by start, positioned by distance in the CUT.
  expect(j.siblings.map((sb) => sb.id)).toEqual(["c02", "c04"]);
  expect(j.siblings[0].where).toBe("next in cut");
  expect(j.siblings[1].where).toBe("3 later");
  expect(j.siblings.every((sb) => sb.side === "after")).toBe(true);

  await page.goto(bench("c01"));
  await expect(page.locator("[data-siblings]")).toHaveAttribute("data-siblings", "2");
  const row = page.locator("[data-sibling=c02]");
  await expect(row).toContainText("next in cut");
  await expect(row.getByRole("link", { name: "c02" })).toHaveAttribute(
    "href",
    `/browse/${PROJECT}/clip/c02`,
  );
  // A band per sibling on the rail, labelled, so where the cut already reaches
  // is visible against the window being dragged.
  await expect(page.locator("[data-sibling-band=c02]")).toBeVisible();
  await expect(page.locator("[data-sibling-band=c02]")).toContainText("next in cut");
  await expect(page.locator("[data-sibling-band=c04]")).toHaveCount(1);

  // And a dimmed cue that falls inside c02's window says so: those words are
  // not missing, they are the next clip.
  const inside = page.locator("[data-cue][data-peek='1'][data-in-sibling=c02]");
  await expect(inside.first()).toBeVisible();
  await expect(inside.first()).toHaveAttribute("title", /already in the cut as c02/);
});

test("a near sibling is said in words, and a lone clip says it has none", async ({
  page,
  request,
}) => {
  // c01 3.00-6.00 and c02 at 9.00: three seconds nobody is cutting.
  const { token: t } = await token(request, "c01");
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c01", start: 3, end: 6, token: t },
  });
  await page.goto(bench("c01"));
  await expect(page.locator("[data-sibling-near=c02]")).toContainText(
    "the next 3 s are not in the cut; c02 starts at 0:09",
  );

  // c03 is the only clip from vid2, and that is a thing to SAY: the silence
  // otherwise reads as "not computed".
  await page.goto(bench("c03"));
  await expect(page.locator("[data-siblings]")).toContainText(
    "no other clip in the cut uses this video",
  );
  await expect(page.locator("[data-sibling-band]")).toHaveCount(0);
});

test("a selection widened into another clip is marked as an overlap", async ({
  page,
  request,
}) => {
  // Put c02 at 8.00, a second inside what c01 can reach: the cached file ends
  // at 9.00 and a drag never downloads, so the overlap has to be reachable
  // without one.
  const { token: t } = await token(request, "c02");
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c02", start: 8, end: 11.5, token: t },
  });

  await page.goto(bench("c01"));
  await expect(page.locator("[data-sibling-band=c02][data-sibling-clash='0']")).toHaveCount(1);

  // `Shift+.` is the 0.5 s nudge -- and it arrives as ">", which is why the
  // coarse step the hint advertises used to do nothing at all. Six of them
  // carry c01's end from 6.00 into c02's window, and the band goes hatched:
  // from inside c01 those seconds look like context, and they are a duplicate.
  await keyboardLive(page);
  for (let i = 0; i < 6; i += 1) await page.locator("body").press("Shift+Period");
  await expect(page.locator("[data-sibling-band=c02][data-sibling-clash='1']")).toHaveCount(1);
});


test("an after-only fetch leaves the before edge exactly where it was", async ({ request }) => {
  // c01 is 3.00-6.00 inside vid1_0.00-9.00: −3 s / +3 s.
  const before = (await (
    await request.get(`/api/report/clip?project=${encodeURIComponent(PROJECT)}&clip=c01`)
  ).json()) as { windows: { from: number; to: number }[] };
  expect(before.windows[0].from).toBe(0);

  const start = await request.post("/api/report/fetch", {
    data: { project: PROJECT, clip: "c01", padBefore: 3, padAfter: 8 },
  });
  expect(start.status()).toBe(202);
  const { job } = (await start.json()) as { job: { id: string } };

  // The fixture's yt-dlp is a deterministic offline stub, so this is a real
  // run of the pipeline's own fetch path and not a mock of it.
  await expect
    .poll(
      async () => {
        const s = (await (await request.get(`/api/report/fetch?job=${job.id}`)).json()) as {
          job: { state: string } | null;
        };
        return s.job?.state ?? "gone";
      },
      { timeout: 120_000 },
    )
    .not.toBe("running");

  const after = (await (
    await request.get(`/api/report/clip?project=${encodeURIComponent(PROJECT)}&clip=c01`)
  ).json()) as { windows: { from: number; to: number }[] };
  // The widest containing file now reaches further ON ONE SIDE. Asking for
  // twenty seconds of lead-in nobody wanted is what this stopped doing.
  expect(after.windows[0].from).toBe(before.windows[0].from);
  expect(after.windows[0].to).toBeGreaterThan(before.windows[0].to);
});


// ---------------------------------------------------------------------------
// The extent you reviewed, and the cut that plays.
//
// The window is a judgement about the RECORDING -- how much of it is worth
// having. The cut is a different question, derived from where the quote
// actually is, which is what lets one reviewed extent be re-cut for another
// report without watching anything again.
// ---------------------------------------------------------------------------

test("the cut is derived from where the quote is, inside the extent", async ({
  page,
  request,
}) => {
  // Review c01 outward the way somebody does when they see how useful the clip
  // could be: 0.00-12.00, four cues wide.
  const { token: t } = await token(request, "c01");
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c01", start: 0, end: 12, token: t },
  });

  const { token: t2 } = await token(request, "c01");
  const r = await request.post("/api/report/cut", {
    data: { project: PROJECT, clip: "c01", token: t2 },
  });
  const j = (await r.json()) as { ok: boolean; score: number; matched: string };
  expect(j.ok).toBe(true);
  expect(j.score).toBeGreaterThanOrEqual(0.6);
  // "and because" lives in the run-on cue at 3-6, and the cut runs outward to
  // the sentence that closes at 9 -- not to the extent's edges.
  expect(readClip("c01").cutStart).toBe(3);
  expect(readClip("c01").cutEnd).toBe(9);

  await page.goto(bench("c01"));
  await expect(page.locator("[data-cut]")).toContainText("cut 0:03.00–0:09.00");
  // Drawn INSIDE the window on the rail, as an inner pair of markers.
  await expect(page.locator("[data-cut-edge]")).toHaveCount(2);
  await expect(page.locator("[data-cut-span]")).toBeVisible();

  // The button runs the same matcher from the bench. The SCORE is a fact about
  // a matching run rather than about the cut, so it appears when one has just
  // happened and not on a reload -- which is why it is asserted here.
  await page.locator("[data-cut-to-quote]").click();
  await expect(page.locator("[data-bench-note]")).toContainText("cut to the quote (match");
  await expect(page.locator("[data-cut]")).toContainText("quote match");
});

test("a quote the transcript does not contain is reported, never guessed", async ({ request }) => {
  const { token: t } = await token(request, "c02");
  await request.put("/api/report/window", {
    data: {
      project: PROJECT,
      clip: "c02",
      quote: "a sentence that appears nowhere in this recording at all",
      token: t,
    },
  });

  const { token: t2 } = await token(request, "c02");
  const r = await request.post("/api/report/cut", {
    data: { project: PROJECT, clip: "c02", token: t2 },
  });
  // Not an error to recover from: a quote the transcript does not contain is a
  // fact about the REPORT, and a cut invented to hide it would be the worst of
  // both.
  expect(r.status()).toBe(200);
  const j = (await r.json()) as { ok: boolean; error: string; score: number };
  expect(j.ok).toBe(false);
  expect(j.error).toContain("no cut written");
  expect(j.score).toBeLessThan(0.6);
  expect(readClip("c02").cutStart).toBeUndefined();

  // Put the fixture's own quote back.
  const { token: t3 } = await token(request, "c02");
  await request.put("/api/report/window", {
    data: { project: PROJECT, clip: "c02", quote: "another whole sentence", token: t3 },
  });
});

test("a cut that is not inside its window is refused by the writer", async ({ request }) => {
  const bad = async (patch: Record<string, unknown>) => {
    const { token: t } = await token(request, "c01");
    const res = await request.put("/api/report/window", {
      data: { project: PROJECT, clip: "c01", token: t, ...patch },
    });
    return { status: res.status(), error: ((await res.json()) as { error: string }).error };
  };

  // c01 is 0.00-12.00 here. A cut outside it renders seconds nobody reviewed.
  expect(await bad({ cutStart: 20, cutEnd: 25 })).toMatchObject({ status: 400 });
  expect((await bad({ cutStart: 20, cutEnd: 25 })).error).toContain("inside the window");
  // Half a pair builds as though there were no cut at all while the manifest
  // reads as though it were trimmed.
  expect((await bad({ cutEnd: "" })).error).toContain("both cutStart and cutEnd");
  // And the real cut is still there.
  expect(readClip("c01").cutStart).toBe(3);
});

test("pulling the window in past the cut clears it, and says so", async ({ page }) => {
  await page.goto(bench("c01"));
  await keyboardLive(page);
  // c01 is 0.00-12.00 with a cut at 3.00-9.00. Bring the end in to 8.5, inside
  // the cut: the extent is the judgement being made right now, and the cut was
  // derived from a wider one.
  for (let i = 0; i < 7; i += 1) await page.locator("body").press("Shift+Comma");
  await page.getByRole("button", { name: "save window" }).click();
  await expect(page.locator("[data-bench-note]")).toContainText("cut no longer fitted");
  await expect.poll(() => readClip("c01").cutStart).toBeUndefined();
  await expect(page.locator("[data-cut]")).toContainText("no cut");
});

test("the CLI pass reports every cut it can find, and writes none on a dry run", () => {
  const out = execFileSync(
    "node",
    [path.join(UMTOOL, "report-to-video", "resolve-windows.mjs"), MANIFEST, "--cut-to-quote"],
    { encoding: "utf8", env: { ...process.env, CHANNELS_DIR: path.join(FIXTURE, "channels") } },
  );
  // c04's quote is in the cue at 15-18, so its cut is proposed; nothing is
  // written without --write, which is what makes the pass safe to run first.
  expect(out).toMatch(/c04\s+vid1\s+15\.0–18\.0 -> cut /);
  expect(out).toContain("dry run");
  expect(readClip("c04").cutStart).toBeUndefined();
});

// ---------------------------------------------------------------------------
// ONE SCREEN, on the screen a walk is actually done on.
//
// The bench is a one-screen layout (see the comment on its root), and the
// thing that has to be on that screen is the ANSWER: the two verdict buttons
// and the box the "no" answer is written in. At 1366x768 the claim -- the
// quote, the note, the sibling list -- used to push `correction`, the last
// field, past the bottom of its column, so the only way to say what was wrong
// with a clip was to notice there was more panel and scroll it.
// ---------------------------------------------------------------------------
test("the last attribution field is on screen at a laptop's 1366×768", async ({ page }) => {
  await page.setViewportSize({ width: 1366, height: 768 });
  // c01 is the tall case: it has a quote, a note, and two siblings to list.
  await page.goto(bench("c01"));
  await expect(page.locator("[data-bench]")).toBeVisible();

  const reachable = () =>
    page.evaluate(() => {
      const claim = document.querySelector("[data-clip-context]")!;
      const column = claim.parentElement!.getBoundingClientRect();
      const box = document
        .querySelector("[data-attrib-field=correction]")!
        .getBoundingClientRect();
      // Positive = how far past the bottom of the column the box sits.
      return Math.round(box.bottom - column.bottom);
    });

  expect(await reachable()).toBeLessThanOrEqual(0);

  // And in the taller state: "no" adds the line telling you the note IS the
  // answer, which is exactly when the box has to be there to type into.
  await page.locator("[data-verdict-no]").click();
  await expect(page.locator("[data-attrib-field=correction]")).toBeFocused();
  expect(await reachable()).toBeLessThanOrEqual(0);
});