"use client";

import AnchoredNotes from "@/components/notes/AnchoredNotes";
import GeneratedBanner from "@/components/notes/GeneratedBanner";
import { useSharedNotes, wroteNotes } from "@/components/notes/NotesProvider";
import { useCallback, useEffect, useRef, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import Waveform, { type Peaks } from "@/components/Waveform";
import { badgeVariants } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";
// The renderer's own line, imported rather than re-written. A preview that
// disagrees with the header by a character is worth less than no preview: you
// would only find out twenty minutes into a build.
import { attributionLine } from "umtool-report-to-video/attribution";
import {
  MUTE_FADE,
  START_LEAD,
  bufferSchedule,
  covers,
  decodeSpan,
  elementShouldStop,
  muteRamp,
  playheadAt,
} from "@/lib/report/playback.mjs";
import {
  DeckFrame,
  NeutralFrame,
  composePreview,
  midOf,
  onscreenValue,
  type DeckPreviewDoc,
  type DeckTexts,
  type Onscreen,
} from "./OnscreenSection";

// ---------------------------------------------------------------------------
// Editing a clip's window against the audio and the words.
//
// "How much context does this clip need" was a loop of hand-editing JSON,
// re-running two CLIs and watching an mp4. This is that loop, in one place.
//
// EVERYTHING IS IN ABSOLUTE SOURCE SECONDS -- the manifest's, the cue file's,
// the QR's. The cached file's own start (`fetchStart`) is the only relative
// number in the whole component, and it exists solely to set video.currentTime.
// The moment those two are allowed to mix is the moment a window is off by the
// pad and nobody can see why.
//
// A DRAG NEVER DOWNLOADS. Dragging past the cached window clamps and offers a
// button, because a handle that silently starts a 12-second network fetch is a
// handle you stop trusting.
//
// THE EDGES AND THE ATTRIBUTION ARE ONE SITTING. Watching a clip is when you
// find out both that it starts too late and that the header calls it by the
// archive's title and the archive's upload date -- which for a VOD mirror is
// years after the stream. So the fields that decide the burned-in line are here
// beside the handles, with a live preview of exactly what ffmpeg will draw, and
// a button to render this one clip and look at it.
// ---------------------------------------------------------------------------

type Cue = { start: number; end: number; text: string; endsSentence: boolean };

/**
 * Another clip in the cut from the SAME recording.
 *
 * The question this answers is the one you cannot answer from inside a single
 * clip: should this window be wider, or is what it is missing already in the
 * cut a few entries later? Computed server-side from the manifest -- see
 * siblingsOf() -- because array order IS the cut and nothing here should be
 * re-deriving that.
 */
type Sibling = {
  id: string;
  start: number;
  end: number;
  cite: number | null;
  quote: string;
  note: string | null;
  steps: number;
  where: string;
  side: "after" | "before" | "overlap";
  gap: number | null;
};
type Win = { name: string; from: number; to: number };

type Clip = {
  id: string;
  video: string;
  channel: string | null;
  start: number;
  end: number;
  cite: number | null;
  quote: string | null;
  note: string | null;
  /** What the REPORT got wrong about this clip. Never rendered. */
  correction: string | null;
  /** The attribution overrides. Absent means "use the archived record's own". */
  title: string | null;
  date: string | null;
  citeUrl: string | null;
  lock: boolean;
  lockStart: boolean;
  lockEnd: boolean;
  /**
   * The CUT: what the video actually plays, inside the reviewed extent.
   *
   * `start`/`end` is how much of this recording is worth having -- a judgement
   * about the material. The cut is a different question: the sentences the
   * quote is made of. Absent means "the whole extent plays", which is what
   * every manifest did before the two were separated.
   */
  cutStart: number | null;
  cutEnd: number | null;
  /** The cut is deliberate; `resolve-windows --cut-to-quote` leaves it alone. */
  lockCut: boolean;
  /**
   * The MUTE MARK, in source seconds: from here to the end of the clip the
   * sound fades out and the picture plays on. Set by ear, at the last silence
   * before a finale's ending sound. Absent means the clip plays with its sound.
   */
  muteFrom: number | null;
  /** "confirmed" / "incorrect", or null for "nobody has looked at this yet". */
  verdict: "confirmed" | "incorrect" | null;
  /** What the on-screen panel says over this clip. Absent means the auto text. */
  onscreen: Onscreen | null;
};

/** The on-screen fields as the inputs hold them. */
type OsDraft = { title: string; subtitle: string };
const osDraftOf = (o: Onscreen | null): OsDraft => ({ title: o?.title ?? "", subtitle: o?.subtitle ?? "" });
const sameOs = (a: OsDraft, b: OsDraft) => a.title.trim() === b.title.trim() && a.subtitle.trim() === b.subtitle.trim();

/**
 * Has anybody looked at this clip, and did they agree with the description?
 *
 * The same three answers lib/projects/report.mjs's clipVerdict() reads out of
 * the manifest, from the copy this component holds -- LEGACY entries included:
 * a `correction` with no verdict was written before `incorrect` existed and
 * means exactly that.
 */
const verdictOf = (c: Clip): "incorrect" | "confirmed" | "unreviewed" => {
  if (c.verdict === "confirmed" || c.verdict === "incorrect") return c.verdict;
  return (c.correction ?? "").trim() ? "incorrect" : "unreviewed";
};

/**
 * What the state line says.
 *
 * "confirmed · with note" is its own reading rather than a badge somewhere
 * else: a note on a good clip -- why its window moved, a caveat for the
 * writers -- must never be mistaken for a complaint about the clip.
 */
const verdictLabel = (c: Clip): string => {
  const v = verdictOf(c);
  if (v === "confirmed") return (c.correction ?? "").trim() ? "confirmed · with note" : "confirmed";
  return v === "incorrect" ? "incorrect" : "not yet reviewed";
};

/** The five fields that decide the burned-in header and the QR. */
const ATTRIB = [
  ["title", "title", "What the header calls this stream. Empty uses the archived record's own title, cleaned."],
  ["date", "date", "The stream's own date, YYYY-MM-DD. Empty uses the archived copy's upload date — which for a VOD mirror is often years later."],
  ["cite", "cite", "The second the header prints, in absolute source seconds. Empty uses the clip's start."],
  ["citeUrl", "citeUrl", "Where the QR points. Empty derives it from the archive. Set it when the clip is cut from a mirror that reads better."],
  ["quote", "quote", "The words this clip exists for. Not drawn on screen — it is what the cut is checked against."],
  ["correction", "correction", "On an incorrect clip: what the report got wrong — wrong speaker, wrong addressee, wrong date, read by the next report pass. On a confirmed one it is just a note: why the window moved, or something a reader should know. Never rendered."],
] as const;

type AttribKey = (typeof ATTRIB)[number][0];

/** A field's SAVED value, as the input shows it. */
const attribValue = (c: Clip, k: AttribKey): string =>
  k === "cite" ? (c.cite == null ? "" : String(c.cite)) : (c[k] ?? "");

const emptyDraft = (c: Clip) =>
  Object.fromEntries(ATTRIB.map(([k]) => [k, attribValue(c, k)])) as Record<AttribKey, string>;

/**
 * A saved entry, back into the shape this component holds.
 *
 * Explicit rather than a spread: an empty value DELETES the key, so the entry
 * that comes back has no `title` at all — and `{...clip, ...entry}` would leave
 * the old one on screen as though the deletion had not happened.
 */
const fromEntry = (prev: Clip, e: Record<string, unknown>): Clip => ({
  ...prev,
  start: Number(e.start),
  end: Number(e.end),
  cite: e.cite == null ? null : Number(e.cite),
  quote: (e.quote as string) ?? null,
  note: (e.note as string) ?? null,
  correction: (e.correction as string) ?? null,
  title: (e.title as string) ?? null,
  date: (e.date as string) ?? null,
  citeUrl: (e.citeUrl as string) ?? null,
  lock: !!e.lock,
  lockStart: !!e.lockStart,
  lockEnd: !!e.lockEnd,
  cutStart: e.cutStart == null ? null : Number(e.cutStart),
  cutEnd: e.cutEnd == null ? null : Number(e.cutEnd),
  lockCut: !!e.lockCut,
  muteFrom: e.muteFrom == null ? null : Number(e.muteFrom),
  verdict: e.verdict === "confirmed" || e.verdict === "incorrect" ? e.verdict : null,
  onscreen: (e.onscreen as Onscreen | undefined) ?? null,
});

export type ClipBenchData = {
  project: string;
  clip: Clip;
  view: { from: number; to: number };
  windows: Win[];
  proposed: { start: number; end: number } | null;
  endsSentence: boolean | null;
  noPunctuation: boolean;
  sourceDuration: number | null;
  segment: string | null;
  /** The built segment's mtime. In the URL, so a re-render busts the cache. */
  segmentMtime: number | null;
  /** The archived record's own title (already cleaned) and upload date. */
  sourceTitle: string | null;
  uploadDate: string | null;
  /** Who the header will name, already resolved server-side. Heads the line. */
  sourceChannel: string | null;
  /**
   * Neighbours ON THE WALK, computed server-side: the nearest clip either side
   * that still needs judgement and is fetched. Null when there is none that
   * way, which is what "first" / "last" say. Not the neighbours in the cut --
   * a clip with nothing to play is a dead end, and one already answered is the
   * round trip the walk exists to remove.
   */
  prev: string | null;
  next: string | null;
  /** Where this clip sits in the cut, 1-based, and how long the cut is. */
  index: number;
  total: number;
  /**
   * How many OTHER clips have been reviewed. The count this clip contributes is
   * computed here, so pressing `y` moves the progress reading without a reload
   * -- and without this component having to guess at the rest of the cut.
   */
  reviewedOthers: number;
  /**
   * The walk's own reading: `ready` clips are fetched AND still need judgement,
   * out of `needing` that need it at all. The gap between the two numbers is
   * what is waiting on a download rather than on you.
   */
  ready: number;
  needing: number;
  /** Is there a cached file holding this clip's window, end to end? */
  fetched: boolean;
  cues: Cue[];
  token: string | null;
  fetchPad: number;
  /** The widest pad `/api/report/fetch` will accept. */
  maxPad: number;
  /** A /mix deep link for this clip's cached window, or null. Server-built. */
  mixHref: string | null;
  /** Every other clip in the cut from this same recording, by start. */
  siblings: Sibling[];
  /** Is the cut built with the on-screen panel (`render.chrome`)? */
  deckOn: boolean;
  /** The manifest's `generatedBy`: edits here are noted for the agent that runs it. */
  generatedBy?: string | null;
};

const hms = (t: number) => {
  const s = Math.max(0, t);
  const m = Math.floor(s / 60);
  const sec = s - m * 60;
  const h = Math.floor(m / 60);
  return h > 0
    ? `${h}:${String(m % 60).padStart(2, "0")}:${sec.toFixed(2).padStart(5, "0")}`
    : `${m}:${sec.toFixed(2).padStart(5, "0")}`;
};

const round2 = (n: number) => Number(n.toFixed(2));

// ---------------------------------------------------------------------------
// Playback preferences.
//
// Per BROWSER, never per manifest: how fast somebody listens and whether a
// clip plays itself on arrival are facts about the person at the desk, not
// about the cut. localStorage, read inside a try/catch because a private
// window throws on access rather than returning null.
// ---------------------------------------------------------------------------
const PLAYBACK_KEY = "umtool.bench.playback";
const RATES = [0.75, 1, 1.25, 1.5, 2] as const;
type Playback = { rate: number; auto: boolean };
const PLAYBACK_DEFAULT: Playback = { rate: 1, auto: false };

const readPlayback = (): Playback => {
  try {
    const raw = localStorage.getItem(PLAYBACK_KEY);
    if (!raw) return PLAYBACK_DEFAULT;
    const j = JSON.parse(raw) as Partial<Playback>;
    const rate = Number(j.rate);
    return {
      rate: RATES.includes(rate as (typeof RATES)[number]) ? rate : PLAYBACK_DEFAULT.rate,
      auto: !!j.auto,
    };
  } catch {
    return PLAYBACK_DEFAULT;
  }
};

/** How much of a moved edge to play: enough to hear the join, not the clip. */
const EDGE_AUDITION = 4;

/** How far past the cached window the cue rail reads ahead, per step. */
const PEEK_STEP = 60;

/**
 * Close enough that the gap is worth a sentence rather than a number.
 *
 * Under this, "the next 12 s are not in the cut" is a decision waiting to be
 * made -- widen this clip, or leave the hole because the next clip picks it
 * up. Over it the two clips are simply elsewhere in the same stream.
 */
const NEAR_SIBLING = 15;

/** m:ss, for a list of positions rather than a pair of edges. */
const clock = (t: number) => {
  const s = Math.max(0, Math.floor(t));
  const m = Math.floor(s / 60);
  return `${Math.floor(m / 60) > 0 ? `${Math.floor(m / 60)}:${String(m % 60).padStart(2, "0")}` : m}:${String(s % 60).padStart(2, "0")}`;
};

/** What `save window` (and a confirmation that moved something) writes. */
type WindowPatch = {
  start: number;
  end: number;
  cutStart?: string;
  cutEnd?: string;
  /** A number to set the mark, "" to clear it; absent leaves it alone. */
  muteFrom?: number | string;
};

/** A decoded span of the cached window, placed on the source clock. */
type Decoded = { name: string; span: { from: number; to: number }; buf: AudioBuffer };

/**
 * What is playing, and what the last playback measured.
 *
 * On the page as data attributes (`data-play-*`), because "did it stop where
 * the selection ends" is the claim this bench now makes, and a spec has to be
 * able to check it against the audio clock rather than against a feeling.
 */
type PlayInfo = {
  engine: "webaudio" | "element";
  state: "playing" | "stopped";
  from: number;
  /** The scheduled end, in source seconds. */
  to: number;
  rate: number;
  /** Context clock: when the source starts and when it is told to stop. */
  ctxStart: number | null;
  ctxStop: number | null;
  /**
   * Where the playback had reached, in source seconds, when the page heard it
   * end: the element's own position at its pause, or the context clock at
   * `ended` -- which reaches the page a task later than the sound stopped, so
   * for Web Audio it is an upper bound and `ctxStop` is the stop itself.
   */
  endedAt: number | null;
};

/** The playback in flight. One at a time: a new one stops the last. */
type Session = {
  gen: number;
  engine: "webaudio" | "element";
  node: AudioBufferSourceNode | null;
  gain: GainNode | null;
  raf: number;
  timers: number[];
  from: number;
  to: number;
  rate: number;
  t0: number;
  ctxStop: number;
  /** The element's own mute, put back when the picture stops following. */
  mutedBefore: boolean;
};

export default function ClipBench({ data }: { data: ClipBenchData }) {
  // The project's notes: this clip's row notes, and the edit notes a save on a
  // generated manifest leaves (the save says so, and they are re-read).
  const notes = useSharedNotes({ project: data.project });
  const [clip, setClip] = useState<Clip>(data.clip);
  const [windows, setWindows] = useState<Win[]>(data.windows);
  const [cues, setCues] = useState<Cue[]>(data.cues);
  const [proposed, setProposed] = useState(data.proposed);
  const [view, setView] = useState(data.view);
  const [sel, setSel] = useState({ from: data.clip.start, to: data.clip.end });
  // The mute mark as drafted. Like the edges it is unsaved until `save window`
  // or `y`, and it is what the bench's own playback mutes at -- so a mark is
  // heard before it is written.
  const [mute, setMute] = useState<number | null>(data.clip.muteFrom);
  // Armed: the next click on the waveform places the mark instead of moving
  // an edge.
  const [mutePick, setMutePick] = useState(false);
  const [peaks, setPeaks] = useState<Peaks | null>(null);
  // The cues AROUND the cached window: what is coming, read before paying for
  // the media. One request, widened only when somebody asks.
  const [peek, setPeek] = useState<Cue[]>([]);
  // The score the resolver last reported for this clip. Not stored in the
  // manifest: it is a fact about a matching run, not about the cut.
  const [cutScore, setCutScore] = useState<number | null>(null);
  const [peekPad, setPeekPad] = useState(PEEK_STEP);
  const [playhead, setPlayhead] = useState<number | null>(null);
  const playheadRef = useRef<number | null>(null);
  useEffect(() => {
    playheadRef.current = playhead;
  }, [playhead]);
  const [note, setNote] = useState<string | null>(null);
  const [busy, setBusy] = useState<string | null>(null);
  const [dirty, setDirty] = useState(false);
  const [draft, setDraft] = useState<Record<AttribKey, string>>(() => emptyDraft(data.clip));
  // `x` was pressed and nothing has been typed yet: the box is REQUIRED until
  // it has something in it. An incorrect verdict with no note is a complaint
  // nobody can act on, so the bench asks for the note before it writes one.
  const [needNote, setNeedNote] = useState(false);
  // Defaults on the server and on the first paint, then whatever this browser
  // remembers. Reading localStorage during render would be a hydration
  // mismatch on the one prop that changes what you hear.
  const [playback, setPlayback] = useState<Playback>(PLAYBACK_DEFAULT);
  const [segment, setSegment] = useState(data.segment);
  const [segmentMtime, setSegmentMtime] = useState(data.segmentMtime);
  // ---- the on-screen panel ------------------------------------------------
  // Its two fields, the text the panel says with them empty (`osAuto`, from
  // the On-screen route), and a composed preview of the whole cut's panel, of
  // which this bench shows this clip's segment.
  const [os, setOs] = useState<OsDraft>(() => osDraftOf(data.clip.onscreen));
  const [osAuto, setOsAuto] = useState<OsDraft | null>(null);
  const [osMax, setOsMax] = useState(48);
  const [deckPreview, setDeckPreview] = useState<DeckPreviewDoc | null>(null);
  const [deckError, setDeckError] = useState<string | null>(null);
  // The rendered strip is folded; its overlay only exists while it is open.
  const [renderedOpen, setRenderedOpen] = useState(false);
  const [segT, setSegT] = useState<number | null>(null);
  const [segPaused, setSegPaused] = useState(true);
  const [segDur, setSegDur] = useState(0);

  const router = useRouter();
  const video = useRef<HTMLVideoElement | null>(null);
  // A REF, not state. Two saves can be in flight -- tab out of `title` straight
  // into `date` and both blur handlers fire -- and the second must carry the
  // token the first was given back, which a re-render has not delivered yet.
  const token = useRef(data.token);
  // And they must not interleave: same read-modify-write, one clip.
  const saving = useRef<Promise<boolean>>(Promise.resolve(true));
  // `x` answers "no" by putting the cursor in the note, which is the answer.
  const correctionBox = useRef<HTMLTextAreaElement | null>(null);
  const segVideo = useRef<HTMLVideoElement | null>(null);
  const transcriptBox = useRef<HTMLDivElement | null>(null);
  // One auto-audition per clip, keyed by id: `canplay` fires again after a
  // seek, and a clip that replays itself every time you drag is unusable.
  const autoPlayed = useRef<string | null>(null);

  // The widest cached file is the one the bench draws from: it is how much room
  // there is to drag before anything has to be fetched.
  const cached = windows[0] ?? null;
  const fetchStart = cached?.from ?? 0;
  const cachedTo = cached?.to ?? 0;

  // ---- peaks --------------------------------------------------------------
  useEffect(() => {
    if (!cached) return;
    let live = true;
    void (async () => {
      const r = await fetch(
        `/api/report/peaks?project=${encodeURIComponent(data.project)}&clip=${encodeURIComponent(clip.id)}&file=${encodeURIComponent(cached.name)}`,
        { cache: "no-store" },
      );
      if (!r.ok || !live) return;
      setPeaks((await r.json()) as Peaks);
    })();
    return () => {
      live = false;
    };
  }, [cached, data.project, clip.id]);

  // Follow the playhead in the reading pane, and ONLY while something is
  // playing: scrolling the words out from under somebody who is reading ahead
  // would be worse than not following at all.
  useEffect(() => {
    if (playhead == null) return;
    const box = transcriptBox.current;
    if (!box) return;
    const row = box.querySelector(`[data-tcue="${cues.find((c) => playhead >= c.start && playhead < c.end)?.start ?? -1}"]`);
    if (row) row.scrollIntoView({ block: "nearest" });
  }, [playhead, cues]);

  // ---- reading ahead --------------------------------------------------------
  //
  // The rail used to stop where the CACHE stops, so "should I fetch more" could
  // only be answered by fetching more. Cues are text from the archive and cost
  // nothing next to media, so the rail reads past both edges and marks what is
  // not on disk. Deciding to spend a download is then a decision about words
  // you have already read.
  useEffect(() => {
    let live = true;
    void (async () => {
      const r = await fetch(
        `/api/report/cues?project=${encodeURIComponent(data.project)}&clip=${encodeURIComponent(clip.id)}` +
          `&from=${(view.from - peekPad).toFixed(2)}&to=${(view.to + peekPad).toFixed(2)}`,
        { cache: "no-store" },
      );
      if (!r.ok || !live) return;
      const j = (await r.json()) as { cues: Cue[] };
      setPeek(j.cues ?? []);
    })();
    return () => {
      live = false;
    };
  }, [data.project, clip.id, view.from, view.to, peekPad]);

  // ---- playback preferences ------------------------------------------------
  useEffect(() => setPlayback(readPlayback()), []);

  // ---- the on-screen preview ----------------------------------------------
  //
  // Composed once per clip: the cut's whole panel, from which the strip and
  // the overlay show this clip's segment. Typing never recomposes -- the
  // fields are patched in by message, before anything is saved.
  useEffect(() => {
    if (!data.deckOn) return;
    let live = true;
    void (async () => {
      const [pv, table] = await Promise.all([
        composePreview(data.project, null, {}, { posts: false }),
        fetch(`/api/report/onscreen?project=${encodeURIComponent(data.project)}`, { cache: "no-store" })
          .then((r) => (r.ok ? r.json() : null))
          .catch(() => null) as Promise<{
            rows?: { id: string; auto: OsDraft }[];
            maxChars?: number;
          } | null>,
      ]);
      if (!live) return;
      if ("error" in pv) setDeckError(pv.error);
      else setDeckPreview(pv);
      const row = table?.rows?.find((r) => r.id === clip.id);
      if (row) setOsAuto(row.auto);
      if (table?.maxChars) setOsMax(table.maxChars);
    })();
    return () => {
      live = false;
    };
  }, [data.deckOn, data.project, clip.id]);

  // The rendered segment drives the overlay's clock: its own time, plus where
  // its segment starts in the cut.
  useEffect(() => {
    const el = segVideo.current;
    if (!el || !renderedOpen) return;
    const tick = () => setSegT(el.currentTime);
    const state = () => setSegPaused(el.paused);
    const meta = () => {
      setSegDur(el.duration || 0);
      // A quarter in, not zero: at the segment's first frame the PREVIOUS
      // clip's title is still handing over, which reads as the wrong title.
      if (el.currentTime === 0 && el.duration) el.currentTime = el.duration / 4;
    };
    el.addEventListener("timeupdate", tick);
    el.addEventListener("seeked", tick);
    el.addEventListener("play", state);
    el.addEventListener("pause", state);
    el.addEventListener("loadedmetadata", meta);
    if (el.readyState >= 1) meta();
    return () => {
      el.removeEventListener("timeupdate", tick);
      el.removeEventListener("seeked", tick);
      el.removeEventListener("play", state);
      el.removeEventListener("pause", state);
      el.removeEventListener("loadedmetadata", meta);
    };
  }, [segment, segmentMtime, renderedOpen, deckPreview]);

  /**
   * Change a preference AND remember it. Never an effect on `playback`.
   *
   * That was the bug: an effect that persisted state on every change also ran
   * on the first render, when the state is still the DEFAULT -- so mounting
   * the bench wrote `auto: false` over what the browser remembered, and in
   * StrictMode's second mount the loader read back the value the first mount
   * had just clobbered. The setting survived the page you changed it on and
   * died on the next clip, which is the worst possible shape for a bug like
   * this. Writing only where somebody actually chose something cannot do that.
   * (The write inside the updater is idempotent, which is what StrictMode's
   * double-invoke requires of it.)
   */
  const choosePlayback = useCallback((fn: (pb: Playback) => Playback) => {
    setPlayback((pb) => {
      const next = fn(pb);
      try {
        localStorage.setItem(PLAYBACK_KEY, JSON.stringify(next));
      } catch {
        /* a private window refuses to store; the session still works */
      }
      return next;
    });
  }, []);

  useEffect(() => {
    // BOTH players. Listening to the cut at 1.5x and then to the rendered
    // segment at 1x is two different clips as far as your ear is concerned.
    //
    // defaultPlaybackRate as well as playbackRate, and that is the whole bug:
    // the media load algorithm resets playbackRate TO defaultPlaybackRate, so
    // a rate set before the element finished loading its source was silently
    // back at 1x by the time anything played.
    const apply = (el: HTMLVideoElement | null) => {
      if (!el) return;
      el.defaultPlaybackRate = playback.rate;
      el.playbackRate = playback.rate;
    };
    apply(video.current);
    apply(segVideo.current);
    const el = video.current;
    if (!el) return;
    const again = () => apply(el);
    el.addEventListener("loadedmetadata", again);
    return () => el.removeEventListener("loadedmetadata", again);
  }, [playback, segment, cached, renderedOpen, deckPreview]);

  // ---- audition -----------------------------------------------------------
  //
  // EVERY BOUNDED RANGE PLAYS FROM DECODED AUDIO. A selection, an edge, a line
  // of the transcript, the auto-audition: each is an AudioBufferSourceNode
  // started at an exact offset and stopped at an exact time on the audio
  // clock, so what you hear ends where the selection ends, to the sample. The
  // <video> used to play these itself and was stopped from `timeupdate`, which
  // fires every 15-250 ms -- the stop overran by up to a quarter of a second,
  // and by a different amount every time, which is exactly what makes a cut
  // between two words impossible to judge by ear. (The old HTML chooser had
  // this right; it is the same technique.)
  //
  // The picture FOLLOWS, muted, and the playhead is read off the audio clock.
  // When the decode fails the element plays instead, stopped per animation
  // frame by remaining time, and the bench says so.

  /** The decoded audio for the cached window: one decode per window. */
  const decoded = useRef<Decoded | null>(null);
  const decoding = useRef<{ key: string; p: Promise<Decoded> } | null>(null);
  const actx = useRef<AudioContext | null>(null);
  const session = useRef<Session | null>(null);
  const playGen = useRef(0);
  // Pauses the bench asked for itself and has not yet heard the event of. A
  // `pause` event is a task, so it arrives AFTER the next playback has started:
  // without the count, stopping one playback to start the next would read as
  // somebody pausing the picture, and stop the new one.
  const selfPauses = useRef(0);
  const pauseVideo = useCallback((el: HTMLVideoElement) => {
    if (el.paused) return;
    selfPauses.current += 1;
    el.pause();
  }, []);
  // Read by play() at the moment it schedules, so a mark moved since the last
  // render is the one you hear -- without re-creating play() on every nudge.
  const muteRef = useRef<number | null>(data.clip.muteFrom);
  const [audio, setAudio] = useState<{ state: "idle" | "loading" | "ready" | "failed"; why?: string }>({
    state: "idle",
  });
  const [playInfo, setPlayInfo] = useState<PlayInfo | null>(null);

  /**
   * The cached window's sound over (at least) `want`, decoded once.
   *
   * Through /api/report/audio -- ffmpeg's decode of the same file the player
   * loads, as PCM -- and decoded here on an OfflineAudioContext, so no audio
   * output is opened before somebody asks to hear something. A buffer belongs
   * to no context and plays in the real one.
   */
  const ensureDecoded = useCallback(
    async (want: { from: number; to: number }): Promise<Decoded> => {
      if (!cached) throw new Error("nothing is cached for this clip");
      const have = decoded.current;
      if (have && have.name === cached.name && covers(have.span, want.from, want.to)) return have;
      const span = decodeSpan({ from: cached.from, to: cached.to }, want);
      const key = `${cached.name}|${span.from}|${span.to}`;
      if (decoding.current?.key === key) return decoding.current.p;
      const p = (async () => {
        setAudio({ state: "loading" });
        const r = await fetch(
          `/api/report/audio?project=${encodeURIComponent(data.project)}&clip=${encodeURIComponent(clip.id)}` +
            `&file=${encodeURIComponent(cached.name)}&from=${span.from}&to=${span.to}`,
        );
        if (!r.ok) {
          const j = (await r.json().catch(() => null)) as { error?: string } | null;
          throw new Error(j?.error ?? `the audio route answered ${r.status}`);
        }
        const from = Number(r.headers.get("x-audio-from") ?? span.from);
        const bytes = await r.arrayBuffer();
        const Offline =
          typeof window !== "undefined" ? (window.OfflineAudioContext ?? null) : null;
        if (!Offline) throw new Error("this browser has no Web Audio");
        const buf = await new Offline(2, 1, 48000).decodeAudioData(bytes);
        const d: Decoded = { name: cached.name, span: { from, to: from + buf.duration }, buf };
        decoded.current = d;
        setAudio({ state: "ready" });
        return d;
      })();
      decoding.current = { key, p };
      p.catch((e: unknown) => {
        if (decoding.current?.p === p) decoding.current = null;
        setAudio({ state: "failed", why: e instanceof Error ? e.message : String(e) });
      });
      return p;
    },
    [cached, data.project, clip.id],
  );

  // A different window -- a wider one after "fetch more", or the first after a
  // fetch -- is different audio: drop the old decode and start the new one
  // now, so the first play after it does not wait.
  const cachedName = cached?.name ?? null;
  useEffect(() => {
    decoded.current = null;
    decoding.current = null;
    setAudio({ state: "idle" });
    if (!cachedName) return;
    ensureDecoded({ from: clip.start, to: clip.end }).catch(() => {
      /* said in the bench; play() falls back to the element */
    });
    // ensureDecoded changes identity with `cached`, which is this effect's
    // whole subject; keying on the NAME is what stops a refresh() that returns
    // the same window from decoding it again.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cachedName]);

  /** Stop whatever is playing, Web Audio or element, and let go of it. */
  const stopPlayback = useCallback(() => {
    const s = session.current;
    if (!s) return;
    session.current = null;
    cancelAnimationFrame(s.raf);
    for (const t of s.timers) clearTimeout(t);
    if (s.node) {
      s.node.onended = null;
      try {
        s.node.stop();
      } catch {
        /* never started, or already stopped */
      }
      s.node.disconnect();
      s.gain?.disconnect();
    }
    const el = video.current;
    if (el) {
      pauseVideo(el);
      el.muted = s.mutedBefore;
    }
    setPlayInfo((pi) => (pi && pi.state === "playing" ? { ...pi, state: "stopped" } : pi));
  }, [pauseVideo]);

  /**
   * The fallback: the element, stopped per animation frame by REMAINING TIME.
   *
   * `timeupdate` was the old stop and is the overrun this replaces; a frame
   * tick that stops once the end is under half a frame away is the best the
   * element can do, and the bench says that this is what is playing.
   */
  const playElement = useCallback(
    (from: number, to: number, gen: number) => {
      const el = video.current;
      if (!el || !cached) return;
      const rate = playback.rate;
      el.currentTime = Math.max(0, from - fetchStart);
      el.playbackRate = rate;
      const s: Session = {
        gen,
        engine: "element",
        node: null,
        gain: null,
        raf: 0,
        timers: [],
        from,
        to,
        rate,
        t0: 0,
        ctxStop: 0,
        mutedBefore: el.muted,
      };
      session.current = s;
      setPlayInfo({ engine: "element", state: "playing", from, to, rate, ctxStart: null, ctxStop: null, endedAt: null });
      const stopNow = () => {
        if (session.current !== s) return;
        pauseVideo(el);
        session.current = null;
        cancelAnimationFrame(s.raf);
        for (const t of s.timers) clearTimeout(t);
        el.muted = s.mutedBefore;
        setPlayInfo((pi) => (pi ? { ...pi, state: "stopped", endedAt: el.currentTime + fetchStart } : pi));
      };
      const tick = () => {
        if (session.current !== s) return;
        const t = el.currentTime + fetchStart;
        setPlayhead(t);
        // The mark, as near as a frame tick gets it.
        const m = muteRef.current;
        el.muted = s.mutedBefore || (m != null && t >= m);
        if (!el.paused && elementShouldStop(t, to, rate)) {
          stopNow();
          return;
        }
        // Inside the last few frames, a timer for the REMAINING time: it lands
        // between frames, where the next tick would land up to a frame late.
        const remaining = (to - t) / rate;
        if (!el.paused && remaining < 0.1 && !s.timers.length) {
          s.timers.push(window.setTimeout(stopNow, remaining * 1000));
        }
        s.raf = requestAnimationFrame(tick);
      };
      s.raf = requestAnimationFrame(tick);
      // A rejected play() is normal, not a bug: Chrome refuses unmuted audio on
      // a document nobody has interacted with (a typed URL, a fresh tab), and
      // an unhandled rejection in that case would be noise. The seek has
      // already happened either way.
      void el.play().catch(() => {});
    },
    [cached, fetchStart, playback.rate, pauseVideo],
  );

  const play = useCallback(
    async (from: number, to: number) => {
      const gen = (playGen.current += 1);
      stopPlayback();
      if (!cached || !(to > from)) return;
      const rate = playback.rate;
      // The context is opened HERE, inside the click or the key that asked:
      // that gesture is what lets it start.
      let ac = actx.current;
      if (!ac && typeof window !== "undefined" && window.AudioContext) {
        ac = new window.AudioContext();
        actx.current = ac;
      }
      const resumed = ac && ac.state !== "running" ? ac.resume().catch(() => {}) : null;
      let d: Decoded;
      try {
        if (!ac) throw new Error("this browser has no Web Audio");
        d = await ensureDecoded({ from, to });
      } catch {
        if (gen === playGen.current) playElement(from, to, gen);
        return;
      }
      if (gen !== playGen.current) return;
      // Longer than one decode: the element, rather than a second decode in
      // the middle of a click.
      if (!covers(d.span, from, to)) {
        playElement(from, to, gen);
        return;
      }
      if (resumed) await Promise.race([resumed, new Promise((res) => setTimeout(res, 300))]);
      // No gesture has ever reached this document, so the context may not
      // start: the same refusal a muted-autoplay policy gives the element, and
      // just as silent.
      if (gen !== playGen.current || ac!.state !== "running") return;
      const ctx = ac!;
      const sch = bufferSchedule(d.span, d.buf.duration, from, to, rate);
      if (!sch) return;

      const node = ctx.createBufferSource();
      node.buffer = d.buf;
      node.playbackRate.value = rate;
      const gain = ctx.createGain();
      node.connect(gain);
      gain.connect(ctx.destination);
      // Ahead of now, so start and stop stay on the clock they were computed
      // on: a start in the past begins late at the SAME offset.
      const t0 = ctx.currentTime + START_LEAD;
      const ctxStop = t0 + sch.wall;
      const m = muteRamp(muteRef.current, from, from + sch.duration, rate);
      if (m) {
        if (m.at <= 0) gain.gain.setValueAtTime(0, t0);
        else {
          gain.gain.setValueAtTime(1, t0 + m.at);
          gain.gain.linearRampToValueAtTime(0, t0 + m.at + m.fade);
        }
      }
      // The stop is a TIME on the context's clock, not start()'s duration
      // argument: that one is buffer content, and a clock time means the same
      // thing at every speed.
      node.start(t0, sch.offset);
      node.stop(ctxStop);

      const el = video.current;
      const s: Session = {
        gen,
        engine: "webaudio",
        node,
        gain,
        raf: 0,
        timers: [],
        from,
        to: from + sch.duration,
        rate,
        t0,
        ctxStop,
        mutedBefore: el?.muted ?? false,
      };
      session.current = s;
      setPlayInfo({
        engine: "webaudio",
        state: "playing",
        from,
        to: s.to,
        rate,
        ctxStart: t0,
        ctxStop,
        endedAt: null,
      });

      // The picture follows, muted. It is not what is being judged; a few
      // milliseconds of drift between the two is not worth a sync loop.
      if (el) {
        el.muted = true;
        el.playbackRate = rate;
        el.currentTime = Math.max(0, from - fetchStart);
        s.timers.push(
          window.setTimeout(() => {
            if (session.current === s) void el.play().catch(() => {});
          }, START_LEAD * 1000),
        );
      }

      node.onended = () => {
        if (session.current !== s) return;
        // How late the context clock reads at `ended`, mapped back onto the
        // source: what the playback measured, for the bench's own record.
        const late = ctx.currentTime - ctxStop;
        session.current = null;
        cancelAnimationFrame(s.raf);
        for (const t of s.timers) clearTimeout(t);
        node.disconnect();
        gain.disconnect();
        if (el) {
          pauseVideo(el);
          el.muted = s.mutedBefore;
        }
        setPlayhead(s.to);
        setPlayInfo((pi) => (pi ? { ...pi, state: "stopped", endedAt: s.to + Math.max(0, late) * rate } : pi));
      };

      // The playhead at ~30 Hz, not every frame: each update re-renders the
      // bench, and the line moving smoothly is not worth that at 60.
      //
      // And the picture is pulled back to the sound when it drifts by more
      // than a quarter second -- which it does after a seek into a file that
      // is only partly loaded, where the element starts late by however long
      // the bytes took.
      let painted = -1;
      let checked = t0;
      const tick = () => {
        if (session.current !== s) return;
        const now = ctx.currentTime;
        const pos = playheadAt(from, t0, now, rate, sch.duration);
        if (now - painted >= 1 / 30) {
          painted = now;
          setPlayhead(pos);
        }
        if (el && now - checked >= 0.5 && now > t0) {
          checked = now;
          const want = pos - fetchStart;
          if (!el.seeking && Math.abs(el.currentTime - want) > 0.25) el.currentTime = want;
        }
        s.raf = requestAnimationFrame(tick);
      };
      s.raf = requestAnimationFrame(tick);
    },
    [cached, fetchStart, playback.rate, ensureDecoded, playElement, stopPlayback, pauseVideo],
  );

  // A speed change mid-playback would leave the picture and the sound at two
  // rates: stop, and the next play is at the new one.
  useEffect(() => {
    stopPlayback();
  }, [playback.rate, stopPlayback]);

  // Let go of the audio output with the bench.
  useEffect(
    () => () => {
      stopPlayback();
      void actx.current?.close().catch(() => {});
      actx.current = null;
    },
    [stopPlayback],
  );

  // ---- auto-audition -------------------------------------------------------
  //
  // Off by default, and when it is on it waits for the element rather than
  // racing it: a play() before `canplay` on a file being range-fetched is a
  // silent no-op, which reads as "the option does not work".
  useEffect(() => {
    if (!playback.auto || !cached) return;
    const el = video.current;
    if (!el || autoPlayed.current === clip.id) return;
    const go = () => {
      if (autoPlayed.current === clip.id) return;
      autoPlayed.current = clip.id;
      play(clip.start, clip.end);
    };
    // METADATA is the right gate, not `canplay`. `preload="metadata"` tells the
    // browser to stop after the headers, so `canplay` may never fire until
    // something asks to play -- waiting for it would mean waiting forever.
    // Once the duration is known the seek is meaningful and play() buffers the
    // rest itself.
    if (el.readyState >= 1) {
      go();
      return;
    }
    el.addEventListener("loadedmetadata", go);
    el.addEventListener("canplay", go);
    return () => {
      el.removeEventListener("loadedmetadata", go);
      el.removeEventListener("canplay", go);
    };
  }, [playback.auto, cached, clip.id, clip.start, clip.end, play]);

  // The element's own controls: unbounded "play from here", which stays on the
  // element. Its clock moves the playhead only while nothing bounded is
  // playing -- during a Web Audio playback the muted picture would otherwise
  // fight the audio clock for it. Pausing the picture by hand stops the sound
  // it is following.
  useEffect(() => {
    const el = video.current;
    if (!el) return;
    // While it plays by itself. A paused element's `timeupdate` is the one its
    // own pause fires -- after a Web Audio playback, that is the muted picture
    // stopping wherever it had got to, which is not where the sound stopped.
    const tick = () => {
      if (!session.current && !el.paused) setPlayhead(el.currentTime + fetchStart);
    };
    // A scrub on the paused element's own bar.
    const seeked = () => {
      if (!session.current) setPlayhead(el.currentTime + fetchStart);
    };
    const paused = () => {
      if (selfPauses.current > 0) {
        selfPauses.current -= 1;
        return;
      }
      if (session.current) stopPlayback();
    };
    el.addEventListener("timeupdate", tick);
    el.addEventListener("seeked", seeked);
    el.addEventListener("pause", paused);
    return () => {
      el.removeEventListener("timeupdate", tick);
      el.removeEventListener("seeked", seeked);
      el.removeEventListener("pause", paused);
    };
  }, [fetchStart, stopPlayback, cachedName]);

  // ---- the selection ------------------------------------------------------
  //
  // Clamped to the cached file. Past its edge the handle stops and the "fetch
  // more" button appears; past the source's own duration it stops for good.
  const clampTo = Math.min(cachedTo || Infinity, data.sourceDuration ?? Infinity);
  const onSel = useCallback(
    (next: { from: number; to: number }, dragging: boolean, edge?: "start" | "end" | null) => {
      const from = Math.max(fetchStart, next.from);
      const to = Math.min(clampTo, next.to);
      setSel({ from, to });
      setDirty(true);
      // Audition on pointer-UP, never during a drag: the Deck's rule, and the
      // reason is that a sound restarting on every pointermove is unusable.
      if (dragging) return;
      // AND PLAY THE EDGE THAT MOVED. Every move used to play the first six
      // seconds, so nudging the end -- the edge that decides whether a clip
      // stops mid-thought, and the one you move most -- played the start and
      // answered a question nobody asked.
      if (edge === "end") play(Math.max(from, to - EDGE_AUDITION), to);
      else if (edge === "start") play(from, Math.min(to, from + EDGE_AUDITION));
      else play(from, Math.min(to, from + 6));
    },
    [fetchStart, clampTo, play],
  );

  const atStartEdge = sel.from <= fetchStart + 0.05 && fetchStart > 0;
  const atEndEdge =
    sel.to >= cachedTo - 0.05 && (data.sourceDuration == null || cachedTo < data.sourceDuration - 0.05);

  // ---- saving -------------------------------------------------------------
  const doSave = useCallback(
    async (patch: Record<string, unknown>) => {
      setBusy("saving…");
      setNote(null);
      const r = await fetch("/api/report/window", {
        method: "PUT",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ project: data.project, clip: clip.id, token: token.current, ...patch }),
      });
      const j = (await r.json()) as Record<string, unknown>;
      setBusy(null);
      if (wroteNotes(j)) void notes.reload();
      if (!r.ok) {
        setNote(
          j.stale
            ? "the manifest changed since you opened this — reload before saving, or your edit would overwrite whatever was written"
            : `could not save: ${String(j.error ?? r.status)}`,
        );
        // The draft is deliberately LEFT as typed. A rejected date is a typo to
        // fix, and clearing the box would make the operator retype the other
        // eight characters to find out which one was wrong.
        return false;
      }
      const entry = j.entry as Record<string, unknown>;
      const next = fromEntry(clip, entry);
      setClip(next);
      // Only a window save moves the selection. An attribution field saving on
      // blur must not throw away edges somebody has nudged but not saved.
      if (patch.start !== undefined || patch.end !== undefined) {
        setSel({ from: next.start, to: next.end });
        setDirty(false);
      }
      // The mark goes back to what was STORED -- rounded, or cleared because
      // the window no longer held it.
      if (patch.muteFrom !== undefined) {
        setMute(next.muteFrom);
        muteRef.current = next.muteFrom;
      }
      // Re-sync only the fields this save carried, and from what the writer
      // actually stored -- which is trimmed, rounded, or gone.
      setDraft((d) => {
        const out = { ...d };
        for (const [k] of ATTRIB) if (patch[k] !== undefined) out[k] = attribValue(next, k);
        return out;
      });
      // The on-screen pair saves as one value. Each field goes back to what was
      // stored only if it still holds what was sent -- typing on into the
      // other field while this was in flight must not be undone by it.
      if (patch.onscreen !== undefined) {
        const sent = osDraftOf(patch.onscreen as Onscreen | null);
        const stored = osDraftOf(next.onscreen);
        setOs((d) => ({
          title: d.title.trim() === sent.title ? stored.title : d.title,
          subtitle: d.subtitle.trim() === sent.subtitle ? stored.subtitle : d.subtitle,
        }));
      }
      token.current = String(j.token ?? "");
      setNote("saved");
      // The widener's opinion changes when the window does.
      void refresh();
      return true;
    },
    [data.project, clip, notes.reload],
  );

  /**
   * Queued behind whatever is already saving.
   *
   * Tab out of `title` straight into `date` and both blur handlers fire. Two
   * concurrent PUTs would send the SAME token, and the second would come back a
   * 409 -- the guard doing exactly its job, against the only writer that cannot
   * possibly have lost anybody's judgement. So they go one at a time and the
   * second reads the token the first was handed back.
   */
  const save = useCallback(
    (patch: Record<string, unknown>) => {
      const run = saving.current.catch(() => false).then(() => doSave(patch));
      saving.current = run;
      return run;
    },
    [doSave],
  );

  /**
   * Persist one attribution field, on blur or Enter, if it actually changed.
   *
   * `correction` is the exception, and it is the whole "no" answer: writing a
   * note on a clip nobody has confirmed IS saying the clip is wrong, so the
   * verdict rides along in the SAME patch -- one write, one token, and never a
   * moment where the manifest holds a complaint with no verdict. On a clip
   * already confirmed it is just a note and the verdict is left alone.
   */
  const commit = useCallback(
    (k: AttribKey) => {
      if (draft[k] === attribValue(clip, k)) return;
      if (k === "correction") {
        const text = draft.correction.trim();
        // Armed and still empty: keep the cue and write nothing. Blurring out
        // of a box you were asked to fill is not an answer.
        if (!text && needNote && clip.verdict !== "incorrect") return;
        // `needNote` is the "no" button having been pressed: on a confirmed clip
        // the note is only a note UNLESS the walk just said no, in which case
        // the verdict flips with it.
        if (text && (clip.verdict !== "confirmed" || needNote)) {
          void save({ correction: draft.correction, verdict: "incorrect" }).then((ok) => {
            if (ok) setNeedNote(false);
          });
          return;
        }
      }
      void save({ [k]: draft[k] });
    },
    [draft, clip, save, needNote],
  );

  /** Persist the on-screen pair, on blur or Enter, if either field changed. */
  const commitOs = useCallback(() => {
    if (sameOs(os, osDraftOf(clip.onscreen))) return;
    void save({ onscreen: onscreenValue(os) });
  }, [os, clip.onscreen, save]);

  // ---- the window patch, one rule, two callers ------------------------------
  //
  // `save window` writes it on demand; a confirmation carries it when the edges
  // have actually moved. Both need the same rule about a cut the new extent no
  // longer contains, so the rule lives here rather than in each of them.
  const windowMoved =
    Math.abs(round2(sel.from) - clip.start) > 0.02 || Math.abs(round2(sel.to) - clip.end) > 0.02;
  // The mark moved, set or cleared since the last save.
  const muteMoved =
    (mute == null) !== (clip.muteFrom == null) ||
    (mute != null && clip.muteFrom != null && Math.abs(round2(mute) - clip.muteFrom) > 0.005);
  const unsaved = dirty || muteMoved;

  const windowPatch = useCallback((): WindowPatch => {
    const start = round2(sel.from);
    const end = round2(sel.to);
    const cutOutside =
      clip.cutStart != null &&
      clip.cutEnd != null &&
      (clip.cutStart < start - 0.02 || clip.cutEnd > end + 0.02);
    // The extent is the judgement being made right now; the cut was derived
    // from a wider one and is no longer inside it. Clearing it in the SAME
    // patch is what keeps the writer's rule and the screen agreeing.
    const out: WindowPatch = cutOutside
      ? { start, end, cutStart: "", cutEnd: "" }
      : { start, end };
    // The mute mark rides the same patch, by the same rule: a mark the new
    // extent does not hold is cleared rather than refused.
    const markOutside = mute != null && (mute < start - 0.02 || mute > end + 0.02);
    if (markOutside) out.muteFrom = "";
    else if (muteMoved) out.muteFrom = mute == null ? "" : round2(mute);
    return out;
  }, [sel.from, sel.to, clip.cutStart, clip.cutEnd, mute, muteMoved]);

  // ---- the walk's verdict ---------------------------------------------------
  //
  // "Is this clip what the report says it is" is the question the walk exists
  // to answer, and it has two answers: yes, or a note saying what is wrong.
  // Confirming ADVANCES, because the next clip is what you want in the yes
  // case; saying no stays put, because the note has to be typed -- and then
  // re-read, which is why it still stays put once it is saved.
  const confirmClip = useCallback(async () => {
    // A MOVED WINDOW RIDES ALONG. Confirming a clip whose edges you just nudged
    // is a judgement about THAT window, and the advance would otherwise walk
    // away from it -- so the edges go in the SAME patch as the verdict rather
    // than needing `save window` pressed first. One write, one token.
    const win = windowMoved || muteMoved ? windowPatch() : null;
    // A note survives a confirmation. It stops being a complaint and becomes
    // what it now says it is: why this clip is here in the shape it is in.
    const ok = await save({ verdict: "confirmed", ...(win ?? {}) });
    if (ok) setNeedNote(false);
    if (ok && win)
      setNote(
        win.cutStart !== undefined
          ? "saved — the window moved with it, and the cut no longer fitted and was cleared"
          : "saved — the window you moved was saved with it",
      );
    if (ok && data.next) router.push(`/browse/${data.project}/clip/${data.next}`);
  }, [save, router, data.project, data.next, windowMoved, muteMoved, windowPatch]);

  const rejectClip = useCallback(() => {
    setNeedNote(true);
    // A confirmed clip that already carries a note (a "confirmed · with note")
    // has its answer written: "no" flips the verdict NOW, rather than waiting
    // for an edit to a note that may already say everything. Otherwise saying
    // no and changing your mind on a yes would be impossible.
    if (clip.verdict === "confirmed" && (clip.correction ?? "").trim()) {
      void save({ verdict: "incorrect" }).then((ok) => {
        if (ok) setNeedNote(false);
      });
    }
    const el = correctionBox.current;
    if (!el) return;
    el.focus();
    el.setSelectionRange(el.value.length, el.value.length);
  }, [clip, save]);

  // ---- the mute mark ---------------------------------------------------------
  //
  // A finale's last clip plays its picture to the end, but its ending sound is
  // not wanted: `muteFrom` fades the sound out from a source second to the end
  // of the clip. It is set BY EAR, at the last silence before that sound, so it
  // is placed the ways an edge is -- at the playhead, by a click on the
  // waveform, by a nudge -- and every playback here mutes at it, so a mark is
  // heard before it is saved.

  /** Re-aim the playback in flight at a new mark, from now. */
  const retargetMute = useCallback((t: number | null) => {
    const s = session.current;
    const ctx = actx.current;
    if (!s || s.engine !== "webaudio" || !s.gain || !ctx) return;
    const now = ctx.currentTime;
    const g = s.gain.gain;
    g.cancelScheduledValues(now);
    const pos = playheadAt(s.from, s.t0, now, s.rate, s.to - s.from);
    const m = t == null ? null : muteRamp(t, pos, s.to, s.rate);
    if (!m) {
      g.setValueAtTime(1, now);
      return;
    }
    if (m.at <= 0) {
      // Already past the mark: fade out from here.
      g.setValueAtTime(g.value, now);
      g.linearRampToValueAtTime(0, now + MUTE_FADE / s.rate);
      return;
    }
    g.setValueAtTime(1, now);
    g.setValueAtTime(1, now + m.at);
    g.linearRampToValueAtTime(0, now + m.at + m.fade);
  }, []);

  /**
   * Put the mark at `t`, inside the selection. `audition` plays across it --
   * three seconds of sound and two of what should now be silence -- the way a
   * moved edge plays the edge it moved.
   */
  const placeMute = useCallback(
    (t: number, audition: boolean) => {
      const at = round2(Math.min(sel.to, Math.max(sel.from, t)));
      setMute(at);
      muteRef.current = at;
      setMutePick(false);
      if (audition) void play(Math.max(sel.from, at - 3), Math.min(sel.to, at + 2));
      else retargetMute(at);
    },
    [sel.from, sel.to, play, retargetMute],
  );

  const clearMute = useCallback(() => {
    setMute(null);
    muteRef.current = null;
    setMutePick(false);
    retargetMute(null);
  }, [retargetMute]);

  /** `m`: where you are listening. Anywhere outside the selection is refused. */
  const muteAtPlayhead = useCallback(() => {
    // Through a ref: the playhead moves every frame while something plays,
    // and a callback keyed on it would re-bind the keyboard every frame.
    const at = playheadRef.current;
    if (at == null || at < sel.from - 0.02 || at > sel.to + 0.02) {
      setNote("the playhead is not inside the selection — play to the spot, or pick it on the waveform");
      return;
    }
    placeMute(at, false);
  }, [sel.from, sel.to, placeMute]);

  // ---- keyboard -----------------------------------------------------------
  useEffect(() => {
    const nudge = (which: "from" | "to", by: number) =>
      onSel(
        which === "from" ? { ...sel, from: sel.from + by } : { ...sel, to: sel.to + by },
        false,
        which === "from" ? "start" : "end",
      );
    const bumpRate = (by: number) =>
      choosePlayback((pb) => {
        const i = RATES.indexOf(pb.rate as (typeof RATES)[number]);
        const next = RATES[Math.min(RATES.length - 1, Math.max(0, (i < 0 ? 1 : i) + by))];
        return { ...pb, rate: next };
      });

    const onKey = (e: KeyboardEvent) => {
      const el = e.target as HTMLElement | null;
      if (el && /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName)) return;
      const step = e.shiftKey ? 0.5 : 0.05;
      switch (e.key) {
        // The SHIFTED character too, on every edge key. `e.shiftKey` selects
        // the 0.5 s step, but shift also changes what the key IS -- `Shift+.`
        // arrives as ">" -- so the coarse nudge the hint advertises fell
        // through to default and did nothing at all.
        case "[":
        case "{": nudge("from", -step); break;
        case "]":
        case "}": nudge("from", step); break;
        case ",":
        case "<": nudge("to", -step); break;
        case ".":
        case ">": nudge("to", step); break;
        case " ":
          e.preventDefault();
          void play(sel.from, sel.to);
          break;
        case "r":
        case "R":
          setSel({ from: clip.start, to: clip.end });
          setDirty(false);
          setMute(clip.muteFrom);
          muteRef.current = clip.muteFrom;
          break;
        // Walking the cut. Reviewing a whole video is nineteen clips in a row,
        // and going back to the project page between each one is nineteen round
        // trips to re-find where you were.
        case "n":
        case "N":
          if (data.next) router.push(`/browse/${data.project}/clip/${data.next}`);
          break;
        case "p":
        case "P":
          if (data.prev) router.push(`/browse/${data.project}/clip/${data.prev}`);
          break;
        // The two answers to "is this accurate". `y` also advances, so a cut
        // that is mostly right is walked with one finger.
        case "y":
        case "Y":
          void confirmClip();
          break;
        case "x":
        case "X":
          rejectClip();
          break;
        // How fast you listen, and whether a clip plays itself on arrival.
        case "-":
        case "_":
          bumpRate(-1);
          break;
        case "=":
        case "+":
          bumpRate(1);
          break;
        case "a":
        case "A":
          choosePlayback((pb) => ({ ...pb, auto: !pb.auto }));
          break;
        // The mute mark: `m` at the playhead, `M` clears it, and `;` `'` move
        // it like an edge (shift for 0.5 s), each playing across it.
        case "m":
          muteAtPlayhead();
          break;
        case "M":
          clearMute();
          break;
        case ";":
        case ":":
        case "'":
        case '"':
          if (mute == null) {
            setNote("no mute mark yet — m sets one at the playhead");
            break;
          }
          placeMute(mute + (e.key === ";" || e.key === ":" ? -step : step), true);
          break;
        case "Escape":
          if (!mutePick) return;
          setMutePick(false);
          break;
        default:
          return;
      }
      e.preventDefault();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [
    sel,
    clip.start,
    clip.end,
    clip.muteFrom,
    onSel,
    play,
    router,
    data.project,
    data.prev,
    data.next,
    confirmClip,
    rejectClip,
    choosePlayback,
    mute,
    mutePick,
    muteAtPlayhead,
    clearMute,
    placeMute,
  ]);

  const refresh = useCallback(async (): Promise<ClipBenchData | null> => {
    const r = await fetch(
      `/api/report/clip?project=${encodeURIComponent(data.project)}&clip=${encodeURIComponent(clip.id)}`,
      { cache: "no-store" },
    );
    if (!r.ok) return null;
    const j = (await r.json()) as ClipBenchData;
    setWindows(j.windows);
    setCues(j.cues);
    setProposed(j.proposed);
    token.current = j.token;
    setSegment(j.segment);
    setSegmentMtime(j.segmentMtime);
    if (j.windows[0]) setView({ from: j.windows[0].from, to: j.windows[0].to });
    // Returned, not just stored: "did anything actually arrive" is a question
    // the caller has to answer before it claims a fetch worked.
    return j;
  }, [data.project, clip.id, notes.reload]);

  // ---- fetching more --------------------------------------------------------
  //
  // THE PAD IS MEASURED FROM THE CLIP, NOT FROM THE CACHE. `--fetch-only --pad
  // P` means [start-P, end+P], and the pipeline reuses any file that already
  // contains it -- so a fixed `pad: 20` asks for the same window on the second
  // press as on the first, downloads nothing, exits 0, and used to report
  // "fetched" over a cache that had not moved. The button therefore computes
  // its pad from what is on disk RIGHT NOW and says which number it will ask
  // for; the route refuses a window it can already serve; and a job that ran
  // still has to show a wider file before this claims anything arrived.
  const fetchMore = useCallback(
    async (pads: { padBefore: number; padAfter: number }) => {
      const had = windows[0] ?? null;
      setBusy("fetching a wider window…");
      setNote(null);
      const r = await fetch("/api/report/fetch", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          project: data.project,
          clip: clip.id,
          padBefore: round2(pads.padBefore),
          padAfter: round2(pads.padAfter),
        }),
      });
      if (!r.ok) {
        const j = (await r.json()) as { error?: string };
        setBusy(null);
        setNote(j.error ?? "could not start the fetch");
        return;
      }
      const { job } = (await r.json()) as { job: { id: string } };
      // Poll rather than stream: one 12-second job, and a dead poll is harmless.
      for (let i = 0; i < 240; i += 1) {
        await new Promise((res) => setTimeout(res, 500));
        const s = await fetch(`/api/report/fetch?job=${job.id}`, { cache: "no-store" });
        const sj = (await s.json()) as { job: { state: string; error: string | null } | null };
        if (!sj.job || sj.job.state === "running") continue;
        setBusy(null);
        if (sj.job.state === "failed") setNote(`the fetch failed: ${sj.job.error ?? "unknown"}`);
        else {
          const j = await refresh();
          const now = j?.windows?.[0] ?? null;
          // WHICH SIDE grew, because that is what was asked for. A fetch that
          // ran and moved nothing is the thing this whole path exists to stop
          // reporting as success.
          const grew = [
            now && had && now.from < had.from - 0.01 ? "earlier" : null,
            now && had && now.to > had.to + 0.01 ? "later" : null,
            now && !had ? "the window" : null,
          ].filter(Boolean);
          setNote(
            grew.length
              ? `fetched ${grew.join(" and ")} — the build will reuse this file, not download it again`
              : "nothing new arrived — the cache already covered that window",
          );
        }
        return;
      }
      setBusy(null);
      setNote("the fetch is still running; reload to pick it up");
    },
    [data.project, clip.id, refresh, windows],
  );

  // ---- the whole recording --------------------------------------------------
  //
  // WHEN WIDENING ONE SIDE AT A TIME IS THE WRONG SHAPE OF ANSWER: a clip whose
  // windows would tile the entire runtime, or a session that wants to re-cut
  // freely without a fetch per attempt. It posts `full: true` through the same
  // route and the same script (`fetch-via-editor.mjs --full`), so the events,
  // the job view and the polling below are identical.
  //
  // The container goes to the editor's SAVED-VIDEO STORE, not to clips/ — that
  // is where big files already live, with a retention rule that leaves an
  // explicitly-requested one alone — and `clipWindowDirs` reads the pointer
  // back, so the build treats it as the window [0, duration] and every clip of
  // that video is fetched at once.
  //
  // IT IS A DELIBERATE, SEPARATE BUTTON and not a smarter default: a whole
  // recording can be gigabytes and hours of somebody's bandwidth. The label
  // says what it is asking for.
  const fetchWholeSource = useCallback(async () => {
    setBusy("asking the editor for the whole recording…");
    setNote(null);
    const r = await fetch("/api/report/fetch", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ project: data.project, clip: clip.id, full: true }),
    });
    if (!r.ok) {
      const j = (await r.json()) as { error?: string };
      setBusy(null);
      setNote(j.error ?? "could not start the fetch");
      return;
    }
    const { job } = (await r.json()) as { job: { id: string } };
    // A whole recording is minutes, not the window fetch's seconds — same
    // 500 ms poll, a longer patience. Giving up here loses nothing: the job
    // keeps running on the editor and the next ask finds it cached.
    for (let i = 0; i < 3600; i += 1) {
      await new Promise((res) => setTimeout(res, 500));
      const s = await fetch(`/api/report/fetch?job=${job.id}`, { cache: "no-store" });
      const sj = (await s.json()) as { job: { state: string; error: string | null } | null };
      if (!sj.job || sj.job.state === "running") continue;
      setBusy(null);
      if (sj.job.state === "failed") {
        setNote(`the fetch failed: ${sj.job.error ?? "unknown"}`);
      } else {
        await refresh();
        setNote(
          "the whole recording is in the saved-video store — every clip of " +
            "this video now cuts from it without another fetch",
        );
      }
      return;
    }
    setBusy(null);
    setNote("the fetch is still running; reload to pick it up");
  }, [data.project, clip.id, refresh]);

  // ---- re-rendering this one clip -------------------------------------------
  //
  // The `preview` preset is one clip and nothing else, and the segment is
  // content-addressed by its id -- so this overwrites exactly the file being
  // looked at and touches no deliverable. Polled the way the fetch is: one
  // short job, and a dead poll is harmless.
  //
  // This is the only way to see the attribution as it will actually appear. The
  // header is drawn by ffmpeg from a text file and no amount of HTML can promise
  // it wrapped the same way.
  const rerender = useCallback(async () => {
    setBusy("rendering this clip…");
    setNote(null);
    const r = await fetch("/api/report/build", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ project: data.project, preset: "preview", only: clip.id }),
    });
    if (!r.ok) {
      const j = (await r.json()) as { error?: string };
      setBusy(null);
      setNote(j.error ?? "could not start the render");
      return;
    }
    const { job } = (await r.json()) as { job: { id: string } };
    for (let i = 0; i < 900; i += 1) {
      await new Promise((res) => setTimeout(res, 500));
      const s = await fetch(`/api/report/build?job=${job.id}`, { cache: "no-store" });
      const sj = (await s.json()) as { state?: string; error?: string | null };
      if (!sj.state || sj.state === "running") continue;
      setBusy(null);
      if (sj.state === "failed") setNote(`the render failed: ${sj.error ?? "unknown"}`);
      else {
        setNote("rendered — the segment below is this clip as it will appear");
        await refresh();
      }
      return;
    }
    setBusy(null);
    setNote("the render is still going; reload to pick it up");
  }, [data.project, clip.id, refresh]);

  // ---- cutting to the quote -------------------------------------------------
  //
  // The same matcher the CLI pass runs, over this clip only. A quote the
  // transcript does not contain comes back as a REFUSAL with its best partial
  // rather than a guessed cut: that mismatch is a fact about the report, and a
  // cut invented to hide it would be the worst of both.
  const cutToQuote = useCallback(async () => {
    setBusy("matching the quote…");
    setNote(null);
    const r = await fetch("/api/report/cut", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ project: data.project, clip: clip.id, token: token.current }),
    });
    const j = (await r.json()) as {
      ok?: boolean;
      entry?: Record<string, unknown>;
      token?: string;
      score?: number;
      matched?: string;
      error?: string;
      stale?: boolean;
    };
    setBusy(null);
    if (!r.ok || j.ok === false) {
      if (j.score != null) setCutScore(j.score);
      setNote(
        j.stale
          ? "the manifest changed since you opened this — reload before saving"
          : (j.error ?? "could not match the quote"),
      );
      return;
    }
    setClip((prev) => fromEntry(prev, j.entry ?? {}));
    token.current = String(j.token ?? "");
    if (wroteNotes(j)) void notes.reload();
    setCutScore(j.score ?? null);
    setNote(`cut to the quote (match ${(j.score ?? 0).toFixed(2)})`);
  }, [data.project, clip.id]);

  /** Save the window, and drop a cut the new extent no longer contains. */
  const saveWindow = useCallback(() => {
    const patch = windowPatch();
    void save(patch).then((ok) => {
      if (!ok) return;
      const cleared = [
        patch.cutStart !== undefined ? "the cut" : null,
        patch.muteFrom === "" && mute != null ? "the mute mark" : null,
      ].filter(Boolean);
      if (cleared.length) setNote(`saved — ${cleared.join(" and ")} no longer fitted this window and ${cleared.length > 1 ? "were" : "was"} cleared`);
    });
  }, [windowPatch, save, mute]);

  // ---- the warnings --------------------------------------------------------
  const endCue = cues.find((c) => sel.to >= c.start - 0.02 && sel.to <= c.end + 0.02) ?? null;
  const endsSentence = data.noPunctuation ? null : endCue ? endCue.endsSentence : null;
  const midSentence = endsSentence === false && !clip.lockEnd && !clip.lock;

  // Moving an edge somewhere widen() would not produce means the next
  // `resolve-windows --write` reverts it. Offering the matching lock is what
  // stops that being a silent loss -- and is why five of six real manifests are
  // 100% locked.
  const wouldRevert =
    !clip.lock &&
    proposed != null &&
    (Math.abs(proposed.start - round2(sel.from)) > 0.05 ||
      Math.abs(proposed.end - round2(sel.to)) > 0.05);

  const span = Math.max(1e-6, view.to - view.from);
  const pct = (t: number) => `${((t - view.from) / span) * 100}%`;

  const previewLine = attributionLine(
    {
      title: draft.title.trim() || null,
      date: draft.date.trim() || null,
      cite: draft.cite.trim() === "" ? null : Number(draft.cite),
      start: clip.start,
      // The server already walked override -> record -> provenance -> slug, so
      // the resolved name goes into the override slot rather than being
      // re-derived here from fields this component does not have.
      channelTitle: data.sourceChannel,
    },
    { title: data.sourceTitle, uploadDate: data.uploadDate },
  );

  // The rail spans further than the waveform when there is something to read
  // out there. Both edges of the cache are MARKED, so the two scales cannot be
  // confused for one.
  const railCues = peek.length ? peek : cues;
  // The rail spans the cache plus WHATEVER CUES CAME BACK, not a flat ±60: a
  // 9-second cache inside a 120-second rail squeezes the part you are actually
  // cutting into a sliver, and an upload whose cues stop at 21 s would pay for
  // 48 s of empty rail to say so.
  const rail = peek.length
    ? {
        from: Math.max(view.from - peekPad, Math.min(view.from, railCues[0]?.start ?? view.from)),
        to: Math.min(
          view.to + peekPad,
          Math.max(view.to, railCues[railCues.length - 1]?.end ?? view.to),
        ),
      }
    : view;
  const railSpan = Math.max(1e-6, rail.to - rail.from);
  const rpct = (t: number) => `${((t - rail.from) / railSpan) * 100}%`;

  // How far the cached file reaches past the clip, PER SIDE. Extending is
  // nearly always one-sided -- you want the sentence that follows, not another
  // twenty seconds of the lead-in you already heard -- so each button asks for
  // 20 more on its own side and leaves the other exactly where it is.
  const reachBefore = cached ? clip.start - cached.from : 0;
  const reachAfter = cached ? cached.to - clip.end : 0;
  const peekOutside = peek.some((c) => c.start < view.from - 0.02 || c.end > view.to + 0.02);
  const nextBefore = Math.min(data.maxPad, Math.round(reachBefore) + 20);
  const nextAfter = Math.min(data.maxPad, Math.round(reachAfter) + 20);
  // A side stops being worth offering for two different reasons, and they are
  // different sentences: the pad cap, and the end of the recording itself.
  const atStartOfSource = !!cached && cached.from <= 0.02;
  const atEndOfSource =
    !!cached && data.sourceDuration != null && cached.to >= data.sourceDuration - 0.02;
  const beforeMaxed = reachBefore >= data.maxPad - 0.5 || atStartOfSource;
  const afterMaxed = reachAfter >= data.maxPad - 0.5 || atEndOfSource;
  const atMaxPad = beforeMaxed && afterMaxed;
  /** Keep the side that is not being extended exactly where it is. */
  const keepBefore = round2(reachBefore);
  const keepAfter = round2(reachAfter);

  // ---- the other clips from this recording ----------------------------------
  const siblings = data.siblings;
  /** The sibling whose window holds this cue, if any. */
  const siblingAt = (c: Cue) =>
    siblings.find((sb) => c.end > sb.start + 0.02 && c.start < sb.end - 0.02) ?? null;
  // The one that is about to matter: nearest by gap, and close enough that the
  // seconds between the two are a decision rather than trivia.
  const nearest = siblings
    .filter((sb) => sb.gap != null && sb.gap <= NEAR_SIBLING)
    .sort((a, b) => (a.gap ?? 0) - (b.gap ?? 0))[0];

  /**
   * The pads that would put this cue (plus a breath) inside the cache.
   *
   * ONE SIDE. A cue after the clip needs nothing fetched before it, and paying
   * for the lead-in a second time to reach the sentence that follows is
   * exactly the waste this is for.
   */
  const padsForCue = (c: Cue) => {
    const after = c.end > view.to;
    return {
      padBefore: after ? keepBefore : Math.min(data.maxPad, Math.ceil(clip.start - (c.start - 2))),
      padAfter: after ? Math.min(data.maxPad, Math.ceil(c.end + 2 - clip.end)) : keepAfter,
    };
  };
  const padLabelForCue = (c: Cue) =>
    c.end > view.to ? `+${padsForCue(c).padAfter} s` : `−${padsForCue(c).padBefore} s`;

  const segSrc = segment
    ? `/api/report/segment?project=${encodeURIComponent(data.project)}&clip=${encodeURIComponent(clip.id)}&v=${segmentMtime ?? 0}`
    : null;

  const verdict = verdictOf(clip);
  const reviewed = data.reviewedOthers + (verdict === "unreviewed" ? 0 : 1);

  // ---- the on-screen panel, as this clip's segment of it --------------------
  const deckSeg = deckPreview?.schedule.segments.find((sg) => sg.id === clip.id) ?? null;
  const osShown: OsDraft = {
    title: os.title.trim() || osAuto?.title || "",
    subtitle: os.subtitle.trim() || osAuto?.subtitle || "",
  };
  // Nothing is patched in until the auto text is known: an empty field would
  // otherwise blank the line the composition was built with.
  const osTexts: DeckTexts = osAuto ? { [clip.id]: osShown } : {};
  const osChanged = !sameOs(os, osDraftOf(clip.onscreen));
  const osOver = osShown.title.length > osMax;
  // The strip follows the player when the player is inside what the cut
  // plays, mapped onto the cut's clock; anywhere else it holds mid-segment.
  // A clip that carries posts is held on its last frame in the cut (`hold`,
  // part of its duration): the source plays only the rest.
  const playFrom = clip.cutStart ?? clip.start;
  const stripT = !deckSeg
    ? 0
    : playhead != null && playhead >= playFrom - 0.05 && playhead <= playFrom + deckSeg.duration - (deckSeg.hold ?? 0)
      ? deckSeg.start + Math.max(0, playhead - playFrom)
      : midOf(deckSeg);
  const overlayT = deckSeg ? deckSeg.start + Math.min(segT ?? deckSeg.duration / 4, deckSeg.duration) : 0;
  const showOverlay = data.deckOn && !!deckPreview && renderedOpen;

  return (
    // ONE SCREEN, at a desk.
    //
    // Walking a cut is sixty clips in a row. A bench that scrolls puts the
    // attribution fields -- the point of the walk -- below the fold on every
    // one of them, and the answer to "did I check that" becomes a scroll
    // position. So from lg up the bench owns exactly the space the page has
    // left: the grid is the viewport minus the chrome, nothing outside a column
    // scrolls, and what does not earn its height is folded rather than cut.
    // Below lg it is a single scrolling column -- a phone cannot hold this and
    // pretending otherwise would cost the desk case something.
    <div
      data-bench={clip.id}
      data-verdict={verdict}
      className="flex flex-col gap-2 lg:h-full lg:min-h-0 lg:overflow-hidden"
    >
      <GeneratedBanner generatedBy={data.generatedBy} />
      {/* ---- where you are, where you can go, and what will be burned in ---- */}
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]">
        <span className="num font-mono text-[var(--color-text)]">
          clip {data.index} of {data.total} ·{" "}
          <span className="text-[var(--color-sel)]">{clip.id}</span>
        </span>
        <span className="micro" data-review-progress="">
          {reviewed} reviewed
        </span>
        {/* What the WALK has left, which is not the same number: a clip nobody
            has fetched still needs judgement and cannot get it today. */}
        <span className="micro" data-ready-count="">
          ready {data.ready} of {data.needing} needing judgement
        </span>
        {!data.fetched && (
          <span className={badgeVariants({ variant: "open", size: "sm" })} data-clip-unfetched="">
            not fetched yet
          </span>
        )}
        {data.prev ? (
          <Link
            data-clip-nav="prev"
            href={`/browse/${data.project}/clip/${data.prev}`}
            className="text-[var(--color-sel)] hover:underline"
          >
            ← {data.prev}
          </Link>
        ) : (
          <span className="text-[var(--color-dim)]">← first</span>
        )}
        {data.next ? (
          <Link
            data-clip-nav="next"
            href={`/browse/${data.project}/clip/${data.next}`}
            className="text-[var(--color-sel)] hover:underline"
          >
            {data.next} →
          </Link>
        ) : (
          <span className="text-[var(--color-dim)]">last →</span>
        )}
        <span className="micro">
          <kbd>p</kbd> <kbd>n</kbd> walk
        </span>
        {/* The renderer's own line, live. It used to sit four hundred pixels
            down the page; it is the one string this bench exists to get right,
            so it heads the screen. */}
        <span
          data-attrib-preview=""
          title={previewLine}
          className="num ml-auto min-w-0 max-w-full truncate rounded bg-[var(--color-panel-2)] px-2 py-0.5 text-[12px] text-[var(--color-meter)]"
        >
          {previewLine}
        </span>
      </div>

      <div className="grid min-h-0 flex-1 gap-3 lg:grid-cols-[minmax(0,1fr)_minmax(22rem,26rem)]">
        {/* ================= the picture, and its edges ================= */}
        <div className="flex min-h-0 flex-col gap-2">
          {cached ? (
            <video
              ref={video}
              data-testid="clip-video"
              src={`/api/report/raw?project=${encodeURIComponent(data.project)}&clip=${encodeURIComponent(clip.id)}&file=${encodeURIComponent(cached.name)}`}
              // object-contain, because the height is now whatever is left
              // rather than whatever 16:9 asks for.
              // The picture and the words SHARE what is left, 3:2, rather
              // than either taking a fixed number of pixels: a laptop and a
              // 1080p screen have very different amounts to give away, and a
              // 130px player is not a player.
              className="aspect-video w-full rounded border border-[var(--color-line)] bg-black object-contain lg:aspect-auto lg:min-h-0 lg:flex-[3_1_0%]"
              preload="metadata"
              controls
            />
          ) : (
            <div className="flex aspect-video w-full items-center justify-center rounded border border-dashed border-[var(--color-line)] text-[12px] text-[var(--color-dim)] lg:aspect-auto lg:min-h-0 lg:flex-[3_1_0%]">
              nothing fetched for this clip yet
            </div>
          )}

          {/* ---- the window, and everything that moves it, in one row ---- */}
          <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[12px]">
            <span className="num text-[var(--color-meter)]">
              {hms(sel.from)} – {hms(sel.to)}{" "}
              <span className="text-[var(--color-dim)]">({(sel.to - sel.from).toFixed(2)}s)</span>
            </span>
            {dirty && (
              <span className="num text-[var(--color-dirty)]">
                unsaved — was {hms(clip.start)} – {hms(clip.end)}
              </span>
            )}
            {muteMoved && (
              <span data-mute-unsaved="" className="num text-[var(--color-dirty)]">
                mute mark unsaved — was {clip.muteFrom == null ? "none" : hms(clip.muteFrom)}
              </span>
            )}
            <span className="flex flex-wrap items-center gap-1.5">
              <button
                type="button"
                data-save-window=""
                className={buttonVariants({ variant: "primary", size: "sm" })}
                disabled={!unsaved || !!busy}
                onClick={saveWindow}
              >
                save window
              </button>
              <button
                type="button"
                data-play-selection=""
                className={buttonVariants({ size: "sm" })}
                onClick={() => void play(sel.from, sel.to)}
              >
                play selection
              </button>
              <button
                type="button"
                className={buttonVariants({ size: "sm" })}
                disabled={!unsaved}
                onClick={() => {
                  setSel({ from: clip.start, to: clip.end });
                  setDirty(false);
                  setMute(clip.muteFrom);
                  muteRef.current = clip.muteFrom;
                }}
              >
                reset
              </button>
              {data.mixHref && (
                // Built SERVER-SIDE, because a mix link carries an absolute path
                // and this component has no business constructing one. It also
                // carries the SAVED window rather than the current selection: a
                // mix of an unsaved edit is a mix of something not in the cut.
                <Link
                  href={data.mixHref}
                  data-mix-link={clip.id}
                  className={buttonVariants({ size: "sm" })}
                >
                  mix
                </Link>
              )}
            </span>
            {/* ---- how you listen ----
                Per browser, not per cut: `localStorage`, defaults on the
                server, and nothing here reaches the manifest. */}
            <span className="flex items-center gap-1.5">
              <span className="micro">speed</span>
              <select
                data-playback-rate=""
                aria-label="playback speed"
                value={playback.rate}
                onChange={(e) =>
                  choosePlayback((pb) => ({ ...pb, rate: Number(e.target.value) }))
                }
                className="rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] px-1 py-0.5 text-[11px]"
              >
                {RATES.map((r) => (
                  <option key={r} value={r}>
                    {r}×
                  </option>
                ))}
              </select>
              <button
                type="button"
                data-auto-audition={playback.auto ? "on" : "off"}
                aria-pressed={playback.auto}
                className={buttonVariants({
                  variant: playback.auto ? "primary" : "outline",
                  size: "sm",
                })}
                onClick={() => choosePlayback((pb) => ({ ...pb, auto: !pb.auto }))}
              >
                auto-audition {playback.auto ? "on" : "off"}
              </button>
              {/* What is playing, and what it measured. The attributes are the
                  bench's record of its last playback, on the audio clock --
                  the claim is "stops where the selection ends", and this is
                  where it can be checked. */}
              <span
                data-playback=""
                data-audio-state={audio.state}
                data-play-engine={playInfo?.engine ?? ""}
                data-play-state={playInfo?.state ?? ""}
                data-play-from={playInfo?.from ?? ""}
                data-play-to={playInfo?.to ?? ""}
                data-play-rate={playInfo?.rate ?? ""}
                data-play-ctx-start={playInfo?.ctxStart ?? ""}
                data-play-ctx-stop={playInfo?.ctxStop ?? ""}
                data-play-ended-at={playInfo?.endedAt ?? ""}
                className="micro"
                title={
                  audio.state === "failed"
                    ? undefined
                    : "every bounded playback is the decoded audio, started and stopped on the audio clock: it ends where the selection ends, to the sample"
                }
              >
                {audio.state === "ready"
                  ? "exact playback"
                  : audio.state === "loading"
                    ? "decoding the audio…"
                    : null}
              </span>
            </span>
            {audio.state === "failed" && (
              <span data-playback-fallback="" className="text-[11px] text-[var(--color-dirty)]">
                exact playback unavailable — {audio.why}. The video plays instead, stopped by the
                frame: up to half a frame either side of the end.
              </span>
            )}
            {/* ---- EXTENT above, CUT here ----
                The window row says how much of the recording is worth having.
                This says what will actually play, and offers to derive it
                from the quote -- which is the whole reason the two are
                different numbers. */}
            <span data-cut={clip.cutStart != null ? `${clip.cutStart}-${clip.cutEnd}` : ""} className="flex flex-wrap items-center gap-1.5">
              {clip.cutStart != null && clip.cutEnd != null ? (
                <span className="num text-[var(--color-good)]">
                  cut {hms(clip.cutStart)}–{hms(clip.cutEnd)}{" "}
                  <span className="text-[var(--color-dim)]">
                    ({(clip.cutEnd - clip.cutStart).toFixed(2)}s
                    {cutScore != null ? `, quote match ${cutScore.toFixed(2)}` : ""}
                    {clip.lockCut ? ", pinned" : ""})
                  </span>
                </span>
              ) : (
                <span className="text-[var(--color-dim)]">
                  no cut — the whole window plays
                </span>
              )}
              <button
                type="button"
                data-cut-to-quote=""
                className={buttonVariants({ size: "sm" })}
                disabled={!!busy || !draft.quote.trim()}
                title={
                  draft.quote.trim()
                    ? "find the quote in the transcript and cut to it, inside this window"
                    : "there is no quote to match against"
                }
                onClick={() => void cutToQuote()}
              >
                cut to quote
              </button>
              {clip.cutStart != null && (
                <button
                  type="button"
                  data-cut-clear=""
                  className={buttonVariants({ size: "sm" })}
                  disabled={!!busy}
                  onClick={() => void save({ cutStart: "", cutEnd: "", lockCut: false })}
                >
                  clear cut
                </button>
              )}
            </span>
            {/* ---- the MUTE MARK ----
                Beside the cut because it is the same kind of decision -- what
                the finished clip does with its seconds -- and drafted like the
                edges: heard at once, written by `save window` or `y`. */}
            <span
              data-mute={mute ?? ""}
              className="flex flex-wrap items-center gap-1.5"
              title="From the mark to the end of the clip the sound fades out and the picture plays on. Set it at the last silence before the ending sound."
            >
              {mute != null ? (
                <span data-mute-from={mute} className="num text-[var(--color-text)]">
                  mute from {hms(mute)}{" "}
                  <span className="text-[var(--color-dim)]">
                    ({Math.max(0, sel.to - mute).toFixed(2)}s silent to the end)
                  </span>
                </span>
              ) : (
                <span className="text-[var(--color-dim)]">sound to the end</span>
              )}
              <button
                type="button"
                data-mute-set=""
                className={buttonVariants({ size: "sm" })}
                title="put the mute mark at the playhead"
                onClick={muteAtPlayhead}
              >
                mute from here
              </button>
              <button
                type="button"
                data-mute-pick={mutePick ? "armed" : ""}
                aria-pressed={mutePick}
                className={buttonVariants({ variant: mutePick ? "primary" : "outline", size: "sm" })}
                title="the next click on the waveform places the mute mark (Esc cancels)"
                onClick={() => setMutePick((v) => !v)}
              >
                {mutePick ? "click the waveform…" : "pick on waveform"}
              </button>
              {mute != null && (
                <button
                  type="button"
                  data-mute-clear=""
                  className={buttonVariants({ size: "sm" })}
                  onClick={clearMute}
                >
                  clear mute
                </button>
              )}
            </span>
            <span className="micro">
              <kbd>[</kbd> <kbd>]</kbd> start · <kbd>,</kbd> <kbd>.</kbd> end — each plays the edge
              it moved · <kbd>space</kbd> the whole selection · <kbd>R</kbd> reset · <kbd>-</kbd>{" "}
              <kbd>=</kbd> speed · <kbd>a</kbd> auto · <kbd>m</kbd> mute from the playhead,{" "}
              <kbd>;</kbd> <kbd>&apos;</kbd> move it, <kbd>M</kbd> clear — shift for 0.5s
            </span>
            {busy && <span className="text-[var(--color-meter)]">{busy}</span>}
            {note && (
              <span data-bench-note="" className="text-[var(--color-dirty)]">
                {note}
              </span>
            )}
          </div>

          {/* ---- the instrument ---- */}
          <div className="relative">
            <Waveform
              view={view}
              sel={sel}
              cand={{ from: clip.start, to: clip.end }}
              words={cues.map((c) => ({ start: c.start, end: c.end, w: c.text.slice(0, 24) }))}
              peaks={peaks}
              playhead={playhead}
              height={104}
              onSel={onSel}
              onReachEdge={() => {
                /* widening is a FETCH here, not a redraw -- see the button below */
              }}
            />
            {/* The mute mark over the waveform: a line where the sound stops
                and a hatch over what is silent to the end of the selection.
                In the interaction colour, like the handles -- it is an edit,
                not a reading -- and never in the way of a drag. */}
            {mute != null && mute >= view.from && mute <= view.to && (
              <>
                <div
                  data-mute-span=""
                  className="pointer-events-none absolute top-0 h-full [background:repeating-linear-gradient(135deg,color-mix(in_srgb,var(--color-dim)_22%,transparent)_0_3px,transparent_3px_7px)]"
                  style={{
                    left: pct(mute),
                    width: `calc(${pct(Math.max(mute, sel.to))} - ${pct(mute)})`,
                  }}
                />
                <div
                  data-mute-marker={mute}
                  className="pointer-events-none absolute top-0 h-full border-l-2 border-dashed border-[var(--color-sel)]"
                  style={{ left: pct(mute) }}
                >
                  <span className="absolute left-1 top-0.5 rounded bg-[var(--color-panel-2)] px-1 font-mono text-[9px] leading-tight text-[var(--color-sel)]">
                    mute
                  </span>
                </div>
              </>
            )}
            {/* Armed: the next click places the mark rather than an edge. */}
            {mutePick && (
              <div
                data-mute-pick-layer=""
                className="absolute inset-0 cursor-crosshair rounded-md outline outline-1 outline-[var(--color-sel)]"
                onPointerDown={(e) => {
                  const r = e.currentTarget.getBoundingClientRect();
                  const frac = Math.min(1, Math.max(0, (e.clientX - r.left) / Math.max(1, r.width)));
                  placeMute(view.from + frac * span, true);
                }}
              />
            )}
          </div>

          {/* Offered at the edge of the cache, as always -- and also whenever
              the rail has something to read past it. Having just read the next
              sentence is exactly when you want the seconds it is in, and
              dragging to the edge first to be allowed to ask is a ritual. */}
          {(atStartEdge || atEndEdge || peekOutside) && (
            <div className="flex flex-wrap items-center gap-2 text-[12px]">
              {atStartEdge || atEndEdge ? (
                <span className="text-[var(--color-dirty)]">
                  that is the edge of what is cached{cached ? ` (${cached.name})` : ""}
                </span>
              ) : (
                <span className="text-[var(--color-dim)]">
                  cached to −{Math.floor(reachBefore)} s / +{Math.floor(reachAfter)} s around this
                  clip
                </span>
              )}
              {beforeMaxed ? (
                <span data-fetch-before-maxed="" className="text-[var(--color-dim)]">
                  {atStartOfSource
                    ? "the recording starts here"
                    : `−${data.maxPad} s is the widest one side goes`}
                </span>
              ) : (
                <button
                  type="button"
                  data-fetch-before={nextBefore}
                  className={buttonVariants({ size: "sm" })}
                  disabled={!!busy}
                  onClick={() => void fetchMore({ padBefore: nextBefore, padAfter: keepAfter })}
                >
                  ← fetch to −{nextBefore} s
                </button>
              )}
              {afterMaxed ? (
                <span data-fetch-after-maxed="" className="text-[var(--color-dim)]">
                  {atEndOfSource
                    ? "the recording ends here"
                    : `+${data.maxPad} s is the widest one side goes`}
                </span>
              ) : (
                <button
                  type="button"
                  data-fetch-after={nextAfter}
                  className={buttonVariants({ variant: "primary", size: "sm" })}
                  disabled={!!busy}
                  onClick={() => void fetchMore({ padBefore: keepBefore, padAfter: nextAfter })}
                >
                  fetch to +{nextAfter} s →
                </button>
              )}
              {/* THE WHOLE RECORDING, when neither edge is the answer. Last,
                  and plainly labelled: it can be gigabytes. */}
              <button
                type="button"
                data-fetch-full=""
                className={buttonVariants({ size: "sm" })}
                disabled={!!busy}
                onClick={() => void fetchWholeSource()}
              >
                fetch whole source via editor
              </button>
            </div>
          )}

          {/* ---- the cue rail, and what is past the cache ---- */}
          <div className="relative h-14 w-full shrink-0 overflow-hidden rounded border border-[var(--color-line)] bg-[var(--color-panel-2)]">
            {/* The cached span, shaded. The waveform above is exactly this
                stretch; everything outside it is text and nothing else. */}
            {peek.length > 0 && (
              <>
                <div
                  data-cache-span=""
                  className="absolute top-0 h-full bg-[color-mix(in_srgb,var(--color-meter)_7%,transparent)]"
                  style={{ left: rpct(view.from), width: `calc(${rpct(view.to)} - ${rpct(view.from)})` }}
                />
                {[view.from, view.to].map((t) => (
                  <div
                    key={t}
                    data-cache-edge={t}
                    className="absolute top-0 h-full border-l border-dashed border-[var(--color-meter)]"
                    style={{ left: rpct(t) }}
                  />
                ))}
              </>
            )}
            {/* ---- what the CUT already covers ----
                A band per other clip from this recording, and a hatch where
                one of them overlaps the selection: a window widened into the
                next clip is a duplicate, and that is invisible from inside a
                single clip. */}
            {siblings.map((sb) => {
              if (sb.end <= rail.from || sb.start >= rail.to) return null;
              const from = Math.max(sb.start, rail.from);
              const to = Math.min(sb.end, rail.to);
              const clash = Math.min(to, sel.to) - Math.max(from, sel.from) > 0.02;
              return (
                <div
                  key={`sib-${sb.id}`}
                  data-sibling-band={sb.id}
                  data-sibling-clash={clash ? "1" : "0"}
                  title={`${sb.id} · ${sb.where} · ${clock(sb.start)}–${clock(sb.end)}${
                    clash ? " — this selection overlaps it" : ""
                  }`}
                  className={`absolute bottom-0 h-3 overflow-hidden whitespace-nowrap rounded-sm border px-1 text-[8px] leading-3 ${
                    clash
                      ? "border-[var(--color-dirty)] text-[var(--color-dirty)] [background:repeating-linear-gradient(45deg,color-mix(in_srgb,var(--color-dirty)_26%,transparent)_0_4px,transparent_4px_8px)]"
                      : "border-[var(--color-sel)] bg-[color-mix(in_srgb,var(--color-sel)_16%,transparent)] text-[var(--color-sel)]"
                  }`}
                  style={{ left: rpct(from), width: `calc(${rpct(to)} - ${rpct(from)})` }}
                >
                  {sb.id} · {sb.where}
                </div>
              );
            })}
            {/* The CUT, as an inner pair of markers: what plays, inside what
                was reviewed. */}
            {clip.cutStart != null && clip.cutEnd != null && (
              <>
                <div
                  data-cut-span=""
                  className="absolute top-0 h-full bg-[color-mix(in_srgb,var(--color-good)_10%,transparent)]"
                  style={{
                    left: rpct(clip.cutStart),
                    width: `calc(${rpct(clip.cutEnd)} - ${rpct(clip.cutStart)})`,
                  }}
                />
                {[clip.cutStart, clip.cutEnd].map((t) => (
                  <div
                    key={`cut-${t}`}
                    data-cut-edge={t}
                    title={`the cut ${hms(clip.cutStart!)}–${hms(clip.cutEnd!)}`}
                    className="absolute top-0 h-full border-l-2 border-[var(--color-good)]"
                    style={{ left: rpct(t) }}
                  />
                ))}
              </>
            )}
            {railCues.map((c) => {
              const inSel = c.end > sel.from && c.start < sel.to;
              const owner = siblingAt(c);
              // Outside the cached file: readable, dimmed, and a click offers
              // to go and get it rather than pretending it is already here.
              const outside = c.start < view.from - 0.02 || c.end > view.to + 0.02;
              return (
                <button
                  type="button"
                  key={`${c.start}-${c.end}`}
                  data-cue={c.start}
                  data-ends-sentence={c.endsSentence ? "1" : "0"}
                  data-peek={outside ? "1" : "0"}
                  data-in-sibling={owner ? owner.id : ""}
                  title={
                    [
                      c.text,
                      // The whole point of reading ahead: these words may not
                      // be missing at all, they may be the next clip.
                      owner ? `already in the cut as ${owner.id} (${owner.where})` : null,
                      outside ? `not fetched — click to fetch to ${padLabelForCue(c)}` : null,
                    ]
                      .filter(Boolean)
                      .join("\n\n")
                  }
                  onClick={() => {
                    if (outside) {
                      if (!atMaxPad) void fetchMore(padsForCue(c));
                      return;
                    }
                    // Snap the NEARER edge to this cue's nearer boundary.
                    const dStart = Math.abs(sel.from - c.start);
                    const dEnd = Math.abs(sel.to - c.end);
                    onSel(
                      dStart <= dEnd ? { ...sel, from: c.start } : { ...sel, to: c.end },
                      false,
                      dStart <= dEnd ? "start" : "end",
                    );
                  }}
                  className={`absolute top-0 h-full overflow-hidden border-l px-1 text-left text-[10px] leading-tight ${
                    outside
                      ? "border-dashed border-[var(--color-line)] text-[var(--color-dim)] opacity-40 hover:opacity-70"
                      : inSel
                        ? "border-[var(--color-sel)] text-[var(--color-text)]"
                        : "border-[var(--color-line)] text-[var(--color-dim)] opacity-60"
                  }`}
                  style={{ left: rpct(c.start), width: `calc(${rpct(c.end)} - ${rpct(c.start)})` }}
                >
                  {c.endsSentence && (
                    <span className="mr-1 text-[var(--color-meter)]" aria-label="closes a sentence">
                      ¶
                    </span>
                  )}
                  {c.text}
                </button>
              );
            })}
          </div>
          {/* ---- THE TRANSCRIPT, as something you can actually read ----
              The rail is a timeline: it squeezes every cue into a column a few
              characters wide, which is right for dragging an edge against and
              useless for reading. The words are why anybody peeks ahead, so
              they also run here in reading order -- the export site's
              transcript viewer's layout (a monospace m:ss column, the text
              beside it, the active line lit), because somebody reading a
              transcript in this repo should not have to learn a second one. */}
          <div
            data-transcript=""
            ref={transcriptBox}
            className="relative flex h-48 min-h-0 flex-col overflow-y-auto rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] lg:h-auto lg:flex-[2_1_0%]"
          >
            <ul>
              {railCues.map((c, i) => {
                const outside = c.start < view.from - 0.02 || c.end > view.to + 0.02;
                const prev = railCues[i - 1];
                const prevOutside = prev
                  ? prev.start < view.from - 0.02 || prev.end > view.to + 0.02
                  : outside;
                // The cache edge, drawn once, where the material stops being
                // on disk. Reading past it is free; playing past it is not.
                const rule = i > 0 && prevOutside !== outside;
                const inSel = c.end > sel.from && c.start < sel.to;
                const playing = playhead != null && playhead >= c.start && playhead < c.end;
                const owner = siblingAt(c);
                return (
                  <li key={`t-${c.start}-${c.end}`}>
                    {rule && (
                      <div
                        data-cache-rule={outside ? "end" : "start"}
                        className="flex items-center gap-2 border-t border-dashed border-[var(--color-meter)] px-2 py-0.5 text-[10px] uppercase tracking-wider text-[var(--color-meter)]"
                      >
                        {outside ? "not fetched — reading only" : "cached from here"}
                      </div>
                    )}
                    <button
                      type="button"
                      data-tcue={c.start}
                      data-peek={outside ? "1" : "0"}
                      data-in-sibling={owner ? owner.id : ""}
                      title={
                        outside
                          ? `not fetched — click to fetch to ${padLabelForCue(c)}`
                          : "click to play from here"
                      }
                      onClick={() => {
                        if (outside) {
                          if (!atMaxPad) void fetchMore(padsForCue(c));
                          return;
                        }
                        void play(c.start, Math.min(c.end + 4, view.to));
                      }}
                      className={`flex w-full gap-2 px-2 py-1 text-left hover:bg-[color-mix(in_srgb,var(--color-sel)_10%,transparent)] ${
                        inSel ? "bg-[color-mix(in_srgb,var(--color-sel)_14%,transparent)]" : ""
                      } ${playing ? "border-l-2 border-[var(--color-meter)]" : "border-l-2 border-transparent"}`}
                    >
                      <span
                        className={`num w-10 shrink-0 font-mono text-[10px] ${
                          playing ? "text-[var(--color-meter)]" : "text-[var(--color-dim)]"
                        }`}
                      >
                        {clock(c.start)}
                      </span>
                      <span
                        className={`min-w-0 text-[12px] leading-snug ${
                          outside
                            ? "text-[var(--color-dim)] opacity-70"
                            : playing
                              ? "text-[var(--color-text)]"
                              : "text-[var(--color-text)]"
                        }`}
                      >
                        {owner && (
                          <span
                            className="mr-1.5 rounded border border-[var(--color-sel)] px-1 text-[10px] text-[var(--color-sel)]"
                            title={`already in the cut as ${owner.id} (${owner.where})`}
                          >
                            {owner.id}
                          </span>
                        )}
                        {c.endsSentence && (
                          <span className="mr-1 text-[var(--color-meter)]" aria-hidden>
                            ¶
                          </span>
                        )}
                        {c.text}
                      </span>
                    </button>
                  </li>
                );
              })}
            </ul>

            {/* ---- the pane's own footer ----
                The controls that act on this pane live in it, stuck to the
                bottom of its scrollport: they cost the pane a line and the
                left column nothing, and "peek further" ends up beside the
                dimmed lines it widens. Opaque, because it sits over text. */}
            <div className="micro sticky bottom-0 z-10 flex flex-wrap items-center gap-2 border-t border-[var(--color-line)] bg-[var(--color-panel-2)] px-2 py-0.5">
              <span>click a line to play it</span>
              {peek.length > 0 && (
                <>
                  <span className="text-[var(--color-dim)]">
                    · dimmed lines are not fetched — click to fetch
                  </span>
                  <button
                    type="button"
                    data-peek-further=""
                    className="ml-auto text-[var(--color-sel)] hover:underline"
                    onClick={() => setPeekPad((n) => n + PEEK_STEP)}
                  >
                    peek further (±{peekPad + PEEK_STEP} s)
                  </button>
                </>
              )}
            </div>
          </div>

          {/* ---- the warnings ----
              Still unfolded, and deliberately: a warning behind a summary is a
              warning nobody reads. They are one line each instead. */}
          {midSentence && (
            <p
              data-warn="mid-sentence"
              className="shrink-0 rounded border border-[var(--color-dirty)] bg-[color-mix(in_srgb,var(--color-dirty)_10%,transparent)] px-2 py-1 text-[11px] leading-snug text-[var(--color-dirty)]"
            >
              Ends mid-sentence — the cut lands inside &ldquo;…
              {endCue?.text.trim().slice(-56)}&rdquo;. Run it to the end of the sentence, or set{" "}
              <code className="font-mono">lockEnd</code> to say you meant to cut here.
            </p>
          )}
          {data.noPunctuation && (
            <p
              data-warn="no-punctuation"
              className="shrink-0 rounded border border-[var(--color-line)] px-2 py-1 text-[11px] leading-snug text-[var(--color-dim)]"
            >
              This upload&rsquo;s ASR carries no punctuation, so there are no sentence boundaries to
              find and widening cannot help. Set these edges by ear and lock them.
            </p>
          )}
          {wouldRevert && (
            <p
              data-warn="would-revert"
              className="flex flex-wrap items-center gap-2 rounded border border-[var(--color-dirty)] px-2 py-1 text-[11px] leading-snug text-[var(--color-dirty)]"
            >
              <span>
                <code className="font-mono">resolve-windows --write</code> would make this{" "}
                {hms(proposed!.start)} – {hms(proposed!.end)}, reverting your edit.
              </span>
              <button
                type="button"
                className={buttonVariants({ variant: "primary", size: "sm" })}
                onClick={() =>
                  void save({
                    start: round2(sel.from),
                    end: round2(sel.to),
                    lockStart: Math.abs(proposed!.start - round2(sel.from)) > 0.05,
                    lockEnd: Math.abs(proposed!.end - round2(sel.to)) > 0.05,
                  })
                }
              >
                save and lock
              </button>
            </p>
          )}

          {/* ---- the second 16:9 box, folded ----
              It was always on screen and it is the thing you look at LAST, once
              per clip, after a render. Two stacked players is what made this
              bench taller than a laptop. */}
          <details
            data-rendered-strip=""
            onToggle={(e) => setRenderedOpen((e.currentTarget as HTMLDetailsElement).open)}
            className="shrink-0 rounded border border-[var(--color-line)] px-2 py-1 text-[12px] open:max-h-[55vh] open:overflow-y-auto"
          >
            <summary className="cursor-pointer text-[11px] text-[var(--color-dim)]">
              this clip as rendered{" "}
              <span className={segSrc ? "text-[var(--color-meter)]" : ""}>
                {segSrc ? "· built" : "· nothing built yet"}
              </span>{" "}
              · what resolve-windows may touch
              {windows.length > 1 && <span> · {windows.length} cached windows</span>}
            </summary>
            <div className="mt-2 grid gap-3 sm:grid-cols-[minmax(0,1fr)_minmax(0,16rem)]">
              <div className="space-y-2">
                {segSrc && showOverlay ? (
                  // The segment with the on-screen panel laid over it, where the
                  // build overlays it. The panel covers the bottom of the frame
                  // -- where native controls would be -- so the player's
                  // controls are a row of its own underneath.
                  <div className="space-y-1">
                    <DeckFrame preview={deckPreview!} t={overlayT} texts={osTexts} testid="bench-deck-preview">
                      <video
                        ref={segVideo}
                        data-testid="segment-video"
                        src={segSrc}
                        className="absolute inset-0 h-full w-full cursor-pointer object-contain"
                        preload="metadata"
                        onClick={(e) => {
                          const el = e.currentTarget;
                          if (el.paused) void el.play().catch(() => {});
                          else el.pause();
                        }}
                      />
                    </DeckFrame>
                    <div className="flex items-center gap-2">
                      <button
                        type="button"
                        data-testid="segment-play"
                        className={buttonVariants({ size: "sm" })}
                        onClick={() => {
                          const el = segVideo.current;
                          if (!el) return;
                          if (el.paused) void el.play().catch(() => {});
                          else el.pause();
                        }}
                      >
                        {segPaused ? "play" : "pause"}
                      </button>
                      <input
                        type="range"
                        data-testid="segment-scrub"
                        min={0}
                        max={segDur || 0}
                        step={0.01}
                        value={Math.min(segT ?? 0, segDur || 0)}
                        onChange={(e) => {
                          const el = segVideo.current;
                          if (el) el.currentTime = Number(e.target.value);
                        }}
                        className="min-w-0 flex-1"
                      />
                      <span className="num font-mono text-[11px] text-[var(--color-dim)]">
                        {(segT ?? 0).toFixed(1)} / {segDur.toFixed(1)}s
                      </span>
                    </div>
                  </div>
                ) : segSrc ? (
                  <video
                    ref={segVideo}
                    data-testid="segment-video"
                    src={segSrc}
                    className="aspect-video w-full rounded border border-[var(--color-line)] bg-black"
                    preload="metadata"
                    controls
                  />
                ) : showOverlay ? (
                  <div data-testid="no-segment">
                    <DeckFrame
                      preview={deckPreview!}
                      t={deckSeg ? midOf(deckSeg) : 0}
                      texts={osTexts}
                      testid="bench-deck-preview"
                    >
                      <NeutralFrame geometry={deckPreview!.geometry} label="nothing rendered for this clip yet" />
                    </DeckFrame>
                  </div>
                ) : (
                  <div
                    data-testid="no-segment"
                    className="flex aspect-video w-full items-center justify-center rounded border border-dashed border-[var(--color-line)] px-2 text-center text-[11px] text-[var(--color-dim)]"
                  >
                    nothing rendered for this clip yet
                  </div>
                )}
                <button
                  type="button"
                  data-rerender=""
                  className={buttonVariants({ variant: "primary", size: "sm" })}
                  disabled={!!busy}
                  onClick={() => void rerender()}
                >
                  re-render this clip
                </button>
                <p className="text-[11px] leading-snug text-[var(--color-dim)]">
                  One clip, no crossfade, no chapters — it overwrites this clip&rsquo;s segment and
                  nothing else. The header is drawn by ffmpeg from a text file, so this is the only
                  place the line above can be checked rather than believed.
                </p>
              </div>

              {/* ---- lock, explained rather than labelled ---- */}
              <div className="space-y-1">
                <div className="micro">what resolve-windows may touch</div>
                {(
                  [
                    ["lock", "leave this clip alone entirely — the window is deliberate"],
                    ["lockStart", "pin the start exactly where it is"],
                    ["lockEnd", "pin the end exactly where it is"],
                    ["lockCut", "keep the cut as it is — the resolver may not re-derive it"],
                  ] as const
                ).map(([k, why]) => (
                  <label key={k} className="flex items-start gap-2">
                    <input
                      type="checkbox"
                      name={k}
                      checked={!!clip[k]}
                      disabled={!!busy}
                      onChange={(e) => void save({ [k]: e.target.checked } as Partial<Clip>)}
                    />
                    <span>
                      <span className="font-mono text-[11px] text-[var(--color-text)]">{k}</span>
                      <span className="block text-[11px] text-[var(--color-dim)]">{why}</span>
                    </span>
                  </label>
                ))}
              </div>
            </div>
          </details>
        </div>

        {/* ============ what this clip IS, and what the header says ============ */}
        <div className="flex min-h-0 flex-col gap-2 overflow-y-auto text-[12px]">
          {/* ---- WHAT IT CLAIMS: read, then scrolled past ----
              This column is a claim on top and an answer underneath, and the
              two have different jobs. The claim is read once per clip; the
              answer -- the verdict and the six fields -- is used on every one
              of them, and at 1366x768 (a laptop, which is what a walk is
              actually done on) the claim's own height pushed `correction`, the
              LAST field, below the column's scrollport: the one box the "no"
              answer is written in, reachable only by scrolling.
              So the claim gets the leftover height and scrolls inside it,
              and the answer keeps its own -- the same rule the whole bench
              follows, one level down. */}
          <div
            data-clip-context=""
            className="flex flex-col gap-2 lg:min-h-[6rem] lg:flex-1 lg:overflow-y-auto"
          >
            {/* ---- the description, and the one question ----
                A clip is a claim: the report said somebody said this, here. The
                walk is somebody checking that claim against the audio, and the
                only two answers are "yes" and a note saying what is wrong. */}
            <section
              data-clip-description=""
              className="space-y-1 rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-2 py-1.5"
            >
              <div className="micro">this clip is supposed to be</div>
              <p data-clip-quote="" className="leading-snug text-[var(--color-text)]">
                {draft.quote.trim() ? `“${draft.quote.trim()}”` : "— no quote on this entry —"}
              </p>
              <div className="micro">why it is in the cut</div>
              <p data-clip-note="" className="text-[11px] leading-snug text-[var(--color-dim)]">
                {clip.note?.trim() || "no note"}
              </p>
            </section>

            {/* ---- what else the cut takes from this recording ----
                "Should this clip be wider, or is what it is missing already in
                the cut?" is the question you cannot answer from inside one clip,
                and it decides whether a widened window is context or a
                duplicate. */}
            <section
              data-siblings={siblings.length}
              className="space-y-1 rounded border border-[var(--color-line)] px-2 py-1.5 text-[11px]"
            >
              <div className="micro">also from this video</div>
              {siblings.length === 0 ? (
                <p className="text-[var(--color-dim)]">no other clip in the cut uses this video</p>
              ) : (
                <>
                  {nearest && (
                    <p data-sibling-near={nearest.id} className="text-[var(--color-dirty)]">
                      {nearest.side === "after"
                        ? `the next ${nearest.gap!.toFixed(0)} s are not in the cut; ${nearest.id} starts at ${clock(nearest.start)}`
                        : `the ${nearest.gap!.toFixed(0)} s before this are not in the cut; ${nearest.id} ends at ${clock(nearest.end)}`}
                    </p>
                  )}
                  <ul className="space-y-0.5">
                    {siblings.map((sb) => (
                      <li key={sb.id} data-sibling={sb.id} className="leading-snug">
                        <Link
                          href={`/browse/${data.project}/clip/${sb.id}`}
                          className="font-mono text-[var(--color-sel)] hover:underline"
                        >
                          {sb.id}
                        </Link>{" "}
                        <span className="num text-[var(--color-dim)]">
                          {clock(sb.start)}–{clock(sb.end)}
                        </span>{" "}
                        <span className="text-[var(--color-dim)]">
                          ·{" "}
                          {sb.side === "overlap"
                            ? "overlaps this clip"
                            : sb.side === "after"
                              ? `${sb.gap!.toFixed(0)} s after this clip ends`
                              : `${sb.gap!.toFixed(0)} s before this clip starts`}{" "}
                          · {sb.where}
                        </span>
                        {sb.quote && (
                          <span className="block text-[var(--color-dim)]">
                            &ldquo;{sb.quote}&rdquo;
                          </span>
                        )}
                      </li>
                    ))}
                  </ul>
                </>
              )}
            </section>
          </div>

          {/* ---- THE ANSWER: on screen for every clip, never scrolled to ---- */}
          <div data-clip-answer="" className="flex flex-col gap-2 lg:flex-none">
            <div className="flex flex-wrap items-center gap-2">
              <span className="text-[var(--color-text)]">Is this accurate?</span>
              <button
                type="button"
                data-verdict-yes=""
                className={buttonVariants({ variant: "primary", size: "sm" })}
                disabled={!!busy}
                onClick={() => void confirmClip()}
              >
                Yes, confirmed <kbd>y</kbd>
              </button>
              <button
                type="button"
                data-verdict-no=""
                className={buttonVariants({ size: "sm" })}
                onClick={rejectClip}
              >
                No, note what is wrong <kbd>x</kbd>
              </button>
              <span
                data-verdict-state=""
                className={
                  verdict === "confirmed"
                    ? "text-[var(--color-good)]"
                    : verdict === "incorrect"
                      ? "text-[var(--color-dirty)]"
                      : "text-[var(--color-dim)]"
                }
              >
                {verdictLabel(clip)}
              </span>
              {needNote && !draft.correction.trim() && (
                <span className="text-[11px] text-[var(--color-dirty)]">
                  the note is the answer — type it below, then blur or <kbd>Enter</kbd>. Saving
                  stays here, so you can read it back against the clip.
                </span>
              )}
            </div>

            {data.sourceTitle == null && (
              <div className="text-[11px] leading-snug text-[var(--color-dirty)]">
                No cue file was found for this source, so the archived record&rsquo;s own title and
                upload date cannot be read here — set <code className="font-mono">title</code> and{" "}
                <code className="font-mono">date</code> by hand, or the build will fail before it
                draws the header.
              </div>
            )}

            <div className="micro">
              archive: <span className="text-[var(--color-text)]">{data.sourceTitle || "—"}</span> ·{" "}
              <span className="text-[var(--color-text)]">{data.uploadDate || "—"}</span>
            </div>

            {/* ---- the six fields that decide the header ----
                Each field's reason is a tooltip now rather than a paragraph: the
                explanations are read once and the boxes are used every clip. */}
            <div className="space-y-1.5">
              {ATTRIB.map(([k, label, why]) => {
                const changed = draft[k] !== attribValue(clip, k);
                return (
                  <label key={k} className="block" title={why}>
                    <span className="font-mono text-[11px] text-[var(--color-text)]">{label}</span>
                    {k === "correction" && needNote && !draft.correction.trim() && (
                      <span className="ml-2 text-[11px] text-[var(--color-dirty)]">required</span>
                    )}
                    {changed && (
                      <span className="ml-2 text-[11px] text-[var(--color-dirty)]">
                        unsaved — was {attribValue(clip, k) || "(empty)"}
                      </span>
                    )}
                    {k === "quote" || k === "correction" ? (
                      <textarea
                        data-attrib-field={k}
                        name={k}
                        ref={k === "correction" ? correctionBox : undefined}
                        rows={3}
                        value={draft[k]}
                        placeholder={
                          k === "correction"
                            ? "what the report got wrong: speaker, addressee, date, wording…"
                            : ""
                        }
                        onChange={(e) => setDraft((d) => ({ ...d, [k]: e.target.value }))}
                        onBlur={() => commit(k)}
                        className={`mt-0.5 w-full rounded border bg-[var(--color-panel-2)] px-2 py-1 text-[12px] ${
                          k === "correction" && needNote && !draft.correction.trim()
                            ? "border-[var(--color-dirty)]"
                            : "border-[var(--color-line)]"
                        }`}
                      />
                    ) : (
                      <input
                        data-attrib-field={k}
                        name={k}
                        type="text"
                        value={draft[k]}
                        placeholder={
                          k === "date"
                            ? data.uploadDate
                              ? `${data.uploadDate.slice(0, 4)}-${data.uploadDate.slice(4, 6)}-${data.uploadDate.slice(6, 8)}`
                              : "YYYY-MM-DD"
                            : k === "cite"
                              ? String(clip.start)
                              : k === "title"
                                ? (data.sourceTitle ?? "")
                                : ""
                        }
                        onChange={(e) => setDraft((d) => ({ ...d, [k]: e.target.value }))}
                        onBlur={() => commit(k)}
                        onKeyDown={(e) => {
                          if (e.key === "Enter") {
                            e.preventDefault();
                            commit(k);
                          }
                        }}
                        className="mt-0.5 w-full rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] px-2 py-1 font-mono text-[12px]"
                      />
                    )}
                  </label>
                );
              })}
            </div>

            {/* ---- notes on this clip, for whoever acts on them ---- */}
            <AnchoredNotes notes={notes} pin={{ kind: "entry", entry: clip.id }} startOpen={false} />

            {/* ---- on-screen: what the panel under the footage says ----
                Beside the header's fields because it is the same sitting: the
                words you hear are the words a title should summarise. Both
                save together, on blur or Enter; an empty one is the grey text. */}
            <div
              data-testid="bench-onscreen"
              data-deck-on={data.deckOn ? "1" : "0"}
              className="space-y-1 rounded border border-[var(--color-line)] px-2 py-1.5"
            >
              <div className="flex flex-wrap items-baseline gap-2">
                <span className="micro">on-screen</span>
                {osChanged && <span className="text-[11px] text-[var(--color-dirty)]">unsaved</span>}
                {!data.deckOn && (
                  <span className="text-[11px] text-[var(--color-dim)]">
                    off for this report — kept, and drawn once it is on (project page → On-screen)
                  </span>
                )}
              </div>
              {(
                [
                  ["title", "The big line over this clip. Empty: no title, and the source line takes its place."],
                  ["subtitle", "The line under it. Empty: the source and date, from the archive."],
                ] as const
              ).map(([k, why]) => (
                <label key={k} className="flex items-center gap-2" title={why}>
                  <span className="w-14 shrink-0 font-mono text-[11px] text-[var(--color-text)]">{k}</span>
                  <input
                    type="text"
                    data-testid={`bench-onscreen-${k}`}
                    name={`onscreen-${k}`}
                    value={os[k]}
                    maxLength={200}
                    placeholder={
                      osAuto?.[k] ||
                      (k === "title" ? "(no title — the source line takes its place)" : "(the source and date)")
                    }
                    onChange={(e) => setOs((d) => ({ ...d, [k]: e.target.value }))}
                    onBlur={commitOs}
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        e.preventDefault();
                        commitOs();
                      }
                    }}
                    className={`min-w-0 flex-1 rounded border bg-[var(--color-panel-2)] px-2 py-1 text-[12px] placeholder:italic placeholder:text-[var(--color-dim)] ${
                      k === "title" && osOver ? "border-[var(--color-dirty)]" : "border-[var(--color-line)]"
                    }`}
                  />
                  {k === "title" && (
                    <span
                      data-testid="bench-onscreen-count"
                      data-over={osOver ? "1" : "0"}
                      className={`num w-12 shrink-0 text-right font-mono text-[11px] ${osOver ? "text-[var(--color-dirty)]" : "text-[var(--color-dim)]"}`}
                    >
                      {osShown.title.length}/{osMax}
                    </span>
                  )}
                  {k === "subtitle" && <span className="w-12 shrink-0" />}
                </label>
              ))}
              {data.deckOn &&
                (deckPreview ? (
                  <DeckFrame
                    preview={deckPreview}
                    t={stripT}
                    texts={osTexts}
                    mode="strip"
                    testid="bench-deck-strip"
                  />
                ) : (
                  <p className="text-[11px] text-[var(--color-dim)]" data-testid="bench-deck-pending">
                    {deckError ? `no preview: ${deckError}` : "composing the panel…"}
                  </p>
                ))}
              {deckPreview && !deckSeg && (
                <p className="text-[11px] text-[var(--color-dirty)]">this clip is not in the default cut</p>
              )}
            </div>

            <details className="rounded border border-[var(--color-line)] px-2 py-1 text-[11px] text-[var(--color-dim)]">
              <summary className="cursor-pointer">what these fields are for</summary>
              <div className="mt-1 space-y-1 leading-snug">
                <p>
                  Each saves when it loses focus or on <kbd>Enter</kbd>; an empty one goes back to the
                  archive&rsquo;s own answer. The date the archive carries is the date the{" "}
                  <em>copy</em> was uploaded — a VOD mirror is often years after the stream, which is
                  what <code className="font-mono">date</code> is for.
                </p>
                {ATTRIB.map(([k, label, why]) => (
                  <p key={k}>
                    <span className="font-mono text-[var(--color-text)]">{label}</span> — {why}
                  </p>
                ))}
              </div>
            </details>
          </div>
        </div>
      </div>
    </div>
  );
}