"use client";

import GeneratedBanner from "@/components/notes/GeneratedBanner";
import { TimedVideo } from "@/components/notes/TimedNotes";
import StructureEditors from "./StructureEditors";
import { MANIFEST_CHANGED } from "./timelineApi";
import { announceNotesChanged, wroteNotes } from "@/components/notes/NotesProvider";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { badgeVariants } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";
import { backdropTransform, footageAt } from "@/lib/report/footage-move.mjs";
import { VERDICTS } from "umtool-report-to-video/factcheck";

// ---------------------------------------------------------------------------
// ON-SCREEN: the persistent panel under the footage of a report cut.
//
// Called "on-screen" everywhere a person reads it. The manifest and the
// pipeline call it the deck (`render.chrome.layout: "deck"`), but in this app
// "deck" is already the song kind's name, and one word meaning two things two
// pages apart is how somebody edits the wrong one.
//
// THE PREVIEW IS THE COMPOSITION ITSELF, not a mock of it. The pipeline's own
// HTML (chrome-deck.mjs) is composed into out/<variant>/chrome/deck-preview/
// and loaded in an iframe at the panel's rect over a 16:9 frame; the scrubber
// seeks its timeline and every keystroke in the table is patched into it by
// postMessage, so a title is seen in the real face and the real fit before it
// is saved. Recomposing (a server round trip) is only for what postMessage
// cannot carry: settings, and a schedule that moved.
//
// It is close to the render and not the same thing -- the page's browser is
// not the render's -- which is what "true still" is for: the render engine's
// own screenshot of one moment, of what is SAVED.
//
// THE IFRAME IS SAME-ORIGIN AND NOT SANDBOXED. Its fonts and assets are
// fetched by relative url from /api/report/chrome/files, and a sandbox without
// `allow-same-origin` makes the document an opaque origin, every font load a
// CORS request that route does not answer, and the preview draws in the
// fallback face -- the one thing it must not get wrong. A sandbox WITH
// `allow-scripts allow-same-origin` is no boundary at all (the document may
// lift it, and the browser warns as much on every load), so it is left off
// rather than worn as decoration. What makes the frame safe to load is what
// it is: the pipeline's own composition, every manifest string escaped by
// chrome-deck.mjs, served no-store from the project's own preview directory.
// Messages both ways are checked against this origin and this frame.
// ---------------------------------------------------------------------------

// ---- the composition's contract, as this page reads it --------------------

export type Rect = { x: number; y: number; width: number; height: number };
export type DeckGeometry = { W: number; H: number; footage: Rect; deck: Rect };
export type DeckSegment = {
  id: string;
  type: string;
  start: number;
  duration: number;
  end: number;
  title: string;
  subtitle: string;
  qrUrl: string | null;
  hideDeck: boolean;
  /** Seconds this segment is held on its last frame for its posts (part of `duration`); absent when none. */
  hold?: number;
  /** The fact-check claim this entry carries; absent when none. */
  claim?: Claim;
};
/** One claim's verdict stamp, in the cut's clock (factcheck.mjs stampSchedule). */
export type Stamp = { claim: string; verdict: string; segment: string; at: number; landed: number; out: [number, number] };
/** The footage moving aside for a clip's posts (`posts.shift`), as the schedule says. */
export type FootageMove = { segment: string; at: number; segmentAt: number; seconds: number; from: Rect; to: Rect };
export type DeckSchedule = {
  estimated?: boolean;
  /** "feed" when the posts are a column for the whole cut (`posts.layout: "feed"`, posts to draw). */
  layout?: "feed";
  fps: number;
  transition: number;
  total: number;
  multiChannel: boolean;
  segments: DeckSegment[];
  moves?: FootageMove[];
  /** The fact-check stamps, when an entry carries a claim. */
  factcheck?: { stamps: Stamp[] };
};
/** A placed post: the popup's `appear` and `out`, or the feed's tick-in, `in`. */
export type PostSlot = { id: string; segment: string; slot: number; of: number; appear?: number; out?: [number, number]; in?: number };
/** The posts feed's preview: the column, the footage box beside it, each built segment's framing box, the composition. */
export type FeedPreview = { geometry: Rect; footage: Rect; boxes: Record<string, Rect>; src?: string; error?: string };
/** One posts window's preview composition: `src` when it composed, `error` when it did not. */
export type PostsWindow = { segment: string; from: number; to: number; src?: string; error?: string };
export type DeckPreviewDoc = {
  src: string;
  variant: string;
  geometry: DeckGeometry;
  /** The palette's background: the ground a moved footage leaves showing. */
  background?: string | null;
  schedule: DeckSchedule & { posts?: PostSlot[] };
  /** The posts region: where it sits in the frame, and one composition per window. */
  posts?: { geometry: Rect; windows: PostsWindow[] };
  /** The posts feed, when the cut is one: a single composition for the whole cut. */
  feed?: FeedPreview;
  /** The fact-check stamps, when the cut stamps a claim: one composition for the whole cut, over the footage. */
  stamp?: { geometry: Rect; src?: string; error?: string };
};
/** An unsaved change to a post, as PUT /api/report/posts takes it. */
export type PostPatch = { attachTo?: string | null; hide?: boolean };
/** What each segment's panel should say right now, by entry id. */
export type DeckTexts = Record<string, { title: string; subtitle: string }>;
export type Onscreen = { title?: string; subtitle?: string };
/** An entry's fact-check claim (factcheck.mjs): its id in the report and its verdict. */
export type Claim = { id: string; verdict: string };
/** A row as PUT /api/report/onscreen takes it: the text, and the claim beside it (null removes it). */
export type OnscreenRow = Onscreen & { claim?: Claim | null };

/** The middle of a segment: where a still of it, and a jump to it, lands. */
export const midOf = (s: DeckSegment) => Math.round((s.start + s.duration / 2) * 1000) / 1000;

/** The segment on screen at `t`. Past the end, the last one. */
export const segmentAt = (schedule: DeckSchedule, t: number): DeckSegment | null => {
  const segs = schedule.segments;
  for (let i = segs.length - 1; i >= 0; i--) if (t >= segs[i].start) return segs[i];
  return segs[0] ?? null;
};

/** A row's draft as the writers take it: blanks dropped, nothing left → null. */
export const onscreenValue = (d: { title: string; subtitle: string }): Onscreen | null => {
  const o: Onscreen = {};
  if (d.title.trim()) o.title = d.title.trim();
  if (d.subtitle.trim()) o.subtitle = d.subtitle.trim();
  return o.title || o.subtitle ? o : null;
};

/**
 * Ask for a fresh preview composition. One door, used by both callers.
 * `postsDraft` is the Posts table's unsaved overrides; `posts: false` skips
 * composing the posts windows (the bench's strip has no footage to put them on).
 */
export async function composePreview(
  project: string,
  variant: string | null,
  draft: Record<string, OnscreenRow | null> = {},
  { postsDraft = {}, posts = true }: { postsDraft?: Record<string, PostPatch>; posts?: boolean } = {},
): Promise<DeckPreviewDoc | { error: string }> {
  const r = await fetch("/api/report/chrome/preview", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ project, variant: variant || undefined, draft, postsDraft, ...(posts ? {} : { posts: false }) }),
  });
  const j = (await r.json().catch(() => ({}))) as Record<string, unknown>;
  if (!r.ok) return { error: String(j.error ?? r.status) };
  return j as unknown as DeckPreviewDoc;
}

const clock = (t: number) => {
  const s = Math.max(0, t);
  const m = Math.floor(s / 60);
  return `${m}:${(s - m * 60).toFixed(1).padStart(4, "0")}`;
};

// ---------------------------------------------------------------------------
// DeckFrame: the composition in an iframe, at its rect, seeked and patched.
//
// `frame` is a 16:9 picture (children are the backdrop: a still of the
// footage, or a neutral frame) with the panel at geometry.deck; `strip` is the
// panel alone. Either way the iframe is laid out at the composition's own
// pixel size and scaled by a transform, so the text fit inside it is measured
// at 1920 wide -- the width the render measures at.
// ---------------------------------------------------------------------------
export function DeckFrame({
  preview,
  t,
  texts,
  mode = "frame",
  testid,
  children,
  className = "",
}: {
  preview: DeckPreviewDoc;
  t: number;
  texts: DeckTexts;
  mode?: "frame" | "strip";
  testid?: string;
  children?: React.ReactNode;
  className?: string;
}) {
  const box = useRef<HTMLDivElement | null>(null);
  const frame = useRef<HTMLIFrameElement | null>(null);
  const [width, setWidth] = useState(0);
  // The `deck:ready` the composition posts once its fonts are in and its
  // titles are fitted. Nothing is sent before it: a message to a document
  // still loading is dropped without a word.
  const [ready, setReady] = useState<{ src: string; total: number; ids: string[] } | null>(null);
  // What this document has already been told, so a keystroke sends one row.
  const sent = useRef<DeckTexts>({});
  const g = preview.geometry;
  const src = `${preview.src}${preview.src.includes("?") ? "&" : "?"}preview=1`;

  useEffect(() => {
    const el = box.current;
    if (!el) return;
    const ro = new ResizeObserver(([e]) => setWidth(e.contentRect.width));
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  useEffect(() => {
    const onMsg = (e: MessageEvent) => {
      // Only this frame's document, and only from this origin.
      if (e.source !== frame.current?.contentWindow || e.origin !== window.location.origin) return;
      const m = (e.data ?? {}) as { type?: string; total?: number; ids?: string[] };
      if (m.type !== "deck:ready") return;
      sent.current = {};
      setReady({ src, total: Number(m.total) || 0, ids: Array.isArray(m.ids) ? m.ids : [] });
    };
    window.addEventListener("message", onMsg);
    return () => window.removeEventListener("message", onMsg);
  }, [src]);

  const live = ready?.src === src;
  const post = useCallback((msg: Record<string, unknown>) => {
    frame.current?.contentWindow?.postMessage(msg, window.location.origin);
  }, []);

  // Text first, then the seek, in one effect: a patched title is re-fitted
  // inside the composition, and the seek lands on the patched nodes.
  useEffect(() => {
    if (!live) return;
    for (const [id, v] of Object.entries(texts)) {
      const prev = sent.current[id];
      if (prev && prev.title === v.title && prev.subtitle === v.subtitle) continue;
      post({ type: "deck:text", id, title: v.title, subtitle: v.subtitle });
      sent.current[id] = v;
    }
  }, [live, texts, post]);
  useEffect(() => {
    if (live) post({ type: "deck:seek", t });
  }, [live, t, post]);

  const scale = width > 0 ? width / (mode === "frame" ? g.W : g.deck.width) : 0;
  return (
    <div
      ref={box}
      data-testid={testid}
      data-deck-ready={live ? "1" : "0"}
      className={`relative w-full overflow-hidden rounded border border-[var(--color-line)] bg-black ${className}`}
      style={{ aspectRatio: mode === "frame" ? `${g.W} / ${g.H}` : `${g.deck.width} / ${g.deck.height}` }}
    >
      {mode === "frame" && children}
      <iframe
        ref={frame}
        key={src}
        src={src}
        title="on-screen preview"
        data-testid={testid ? `${testid}-iframe` : undefined}
        tabIndex={-1}
        aria-hidden
        style={{
          position: "absolute",
          left: mode === "frame" ? g.deck.x * scale : 0,
          top: mode === "frame" ? g.deck.y * scale : 0,
          width: g.deck.width,
          height: g.deck.height,
          transform: `scale(${scale})`,
          transformOrigin: "0 0",
          border: 0,
          background: "transparent",
          // A document with no color-scheme of its own is "normal"; matching it
          // here is what keeps the browser from painting an opaque backdrop
          // behind a transparent frame on a dark page.
          colorScheme: "normal",
          pointerEvents: "none",
          visibility: scale > 0 ? "visible" : "hidden",
        }}
      />
    </div>
  );
}

/** Where the footage goes, drawn as a box: the backdrop when there is no picture. */
export function NeutralFrame({ geometry: g, label = "footage" }: { geometry: DeckGeometry; label?: string }) {
  // (`geometry.footage` is the feed's box for a feed cut: the caller passes it.)
  const pct = (n: number, of: number) => `${(n / of) * 100}%`;
  return (
    <div className="absolute inset-0 bg-[#0d0f14]" data-testid="onscreen-neutral-frame">
      <div
        className="absolute flex items-center justify-center border border-dashed border-[var(--color-line)] bg-[var(--color-panel)]"
        style={{
          left: pct(g.footage.x, g.W),
          top: pct(g.footage.y, g.H),
          width: pct(g.footage.width, g.W),
          height: pct(g.footage.height, g.H),
        }}
      >
        <span className="micro">{label}</span>
      </div>
    </div>
  );
}

/** The posts window the scrubber is inside, if any. Windows of one cut do not overlap in practice; the first wins. */
export const postsWindowAt = (windows: PostsWindow[] | undefined, t: number): PostsWindow | null =>
  (windows ?? []).find((w) => t >= w.from && t <= w.to) ?? null;

// ---------------------------------------------------------------------------
// PostsOverlay: one posts window's composition, at the posts region's rect
// inside the 16:9 frame, while the scrubber is in that window.
//
// The same contract as the deck's frame, with its own message names: the page
// is loaded with `?preview=1`, posts `{type: "posts:ready"}` when it can be
// seeked, and takes `{type: "deck:seek", t}` in the CUT's clock -- the
// window's composition knows where it starts. Laid out at its own pixel size
// and scaled, so its text is measured at the width the render measures it.
// Same origin, not sandboxed, for the reason DeckFrame's header gives.
// ---------------------------------------------------------------------------
export function PostsOverlay({
  win,
  geometry,
  frame: g,
  t,
}: {
  win: PostsWindow;
  geometry: Rect;
  frame: DeckGeometry;
  t: number;
}) {
  const box = useRef<HTMLDivElement | null>(null);
  const el = useRef<HTMLIFrameElement | null>(null);
  const [width, setWidth] = useState(0);
  const [readySrc, setReadySrc] = useState<string | null>(null);
  const src = win.src ? `${win.src}${win.src.includes("?") ? "&" : "?"}preview=1` : null;
  const pct = (n: number, of: number) => `${(n / of) * 100}%`;

  useEffect(() => {
    const node = box.current;
    if (!node) return;
    const ro = new ResizeObserver(([e]) => setWidth(e.contentRect.width));
    ro.observe(node);
    return () => ro.disconnect();
  }, []);

  useEffect(() => {
    const onMsg = (e: MessageEvent) => {
      if (e.source !== el.current?.contentWindow || e.origin !== window.location.origin) return;
      if ((e.data as { type?: string } | null)?.type === "posts:ready") setReadySrc(src);
    };
    window.addEventListener("message", onMsg);
    return () => window.removeEventListener("message", onMsg);
  }, [src]);

  const live = !!src && readySrc === src;
  useEffect(() => {
    if (live) el.current?.contentWindow?.postMessage({ type: "deck:seek", t }, window.location.origin);
  }, [live, t]);

  const scale = width > 0 ? width / geometry.width : 0;
  return (
    <div
      ref={box}
      data-testid="onscreen-posts-preview"
      data-segment={win.segment}
      data-posts-ready={live ? "1" : "0"}
      className="pointer-events-none absolute"
      style={{
        left: pct(geometry.x, g.W),
        top: pct(geometry.y, g.H),
        width: pct(geometry.width, g.W),
        height: pct(geometry.height, g.H),
      }}
    >
      {src ? (
        <iframe
          ref={el}
          key={src}
          src={src}
          title="posts preview"
          data-testid="onscreen-posts-preview-iframe"
          tabIndex={-1}
          aria-hidden
          style={{
            position: "absolute",
            left: 0,
            top: 0,
            width: geometry.width,
            height: geometry.height,
            transform: `scale(${scale})`,
            transformOrigin: "0 0",
            border: 0,
            background: "transparent",
            colorScheme: "normal",
            visibility: scale > 0 ? "visible" : "hidden",
          }}
        />
      ) : (
        <div
          data-testid="onscreen-posts-preview-error"
          className="absolute inset-0 flex items-start justify-center border border-dashed border-[var(--color-dirty)] p-2 text-center text-[11px] text-[var(--color-dirty)]"
          title={win.error}
        >
          <span className="rounded bg-black/70 px-1.5 py-0.5">
            posts on {win.segment}: not composed — {win.error}
          </span>
        </div>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// FeedOverlay: the posts FEED's composition (`posts.layout: "feed"`), one for
// the whole cut, at the column's rect inside the 16:9 frame for every moment
// of the scrub. PostsOverlay's contract with one message renamed: the page
// posts `{type: "feed:ready"}` once it can be seeked and takes `deck:seek` in
// the cut's clock. Laid out at its own pixel size and scaled.
//
// The fact-check STAMPS' composition is laid the same way (`ready`
// "stamp:ready", its own testid and name): one page for the whole cut, at
// its box over the footage.
// ---------------------------------------------------------------------------
export function FeedOverlay({
  feed,
  frame: g,
  t,
  ready = "feed:ready",
  testid = "onscreen-feed-preview",
  name = "posts feed",
}: {
  feed: { geometry: Rect; src?: string; error?: string };
  frame: DeckGeometry;
  t: number;
  ready?: string;
  testid?: string;
  name?: string;
}) {
  const box = useRef<HTMLDivElement | null>(null);
  const el = useRef<HTMLIFrameElement | null>(null);
  const [width, setWidth] = useState(0);
  const [readySrc, setReadySrc] = useState<string | null>(null);
  const src = feed.src ? `${feed.src}${feed.src.includes("?") ? "&" : "?"}preview=1` : null;
  const geometry = feed.geometry;
  const pct = (n: number, of: number) => `${(n / of) * 100}%`;

  useEffect(() => {
    const node = box.current;
    if (!node) return;
    const ro = new ResizeObserver(([e]) => setWidth(e.contentRect.width));
    ro.observe(node);
    return () => ro.disconnect();
  }, []);

  useEffect(() => {
    const onMsg = (e: MessageEvent) => {
      if (e.source !== el.current?.contentWindow || e.origin !== window.location.origin) return;
      if ((e.data as { type?: string } | null)?.type === ready) setReadySrc(src);
    };
    window.addEventListener("message", onMsg);
    return () => window.removeEventListener("message", onMsg);
  }, [src, ready]);

  const live = !!src && readySrc === src;
  useEffect(() => {
    if (live) el.current?.contentWindow?.postMessage({ type: "deck:seek", t }, window.location.origin);
  }, [live, t]);

  const scale = width > 0 ? width / geometry.width : 0;
  return (
    <div
      ref={box}
      data-testid={testid}
      data-feed-ready={live ? "1" : "0"}
      className="pointer-events-none absolute"
      style={{
        left: pct(geometry.x, g.W),
        top: pct(geometry.y, g.H),
        width: pct(geometry.width, g.W),
        height: pct(geometry.height, g.H),
      }}
    >
      {src ? (
        <iframe
          ref={el}
          key={src}
          src={src}
          title={`${name} preview`}
          data-testid={`${testid}-iframe`}
          tabIndex={-1}
          aria-hidden
          style={{
            position: "absolute",
            left: 0,
            top: 0,
            width: geometry.width,
            height: geometry.height,
            transform: `scale(${scale})`,
            transformOrigin: "0 0",
            border: 0,
            background: "transparent",
            colorScheme: "normal",
            visibility: scale > 0 ? "visible" : "hidden",
          }}
        />
      ) : (
        <div
          data-testid={`${testid}-error`}
          className="absolute inset-0 flex items-start justify-center border border-dashed border-[var(--color-dirty)] p-2 text-center text-[11px] text-[var(--color-dirty)]"
          title={feed.error}
        >
          <span className="rounded bg-black/70 px-1.5 py-0.5">
            {name}: not composed — {feed.error}
          </span>
        </div>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// The settings form: every key of render.chrome.deck, flattened.
// ---------------------------------------------------------------------------

type DeckSettings = {
  height: number;
  footageScale: number;
  background: string;
  pip: { spacing: string; size: number; activeSize: number };
  title: { size: number; maxChars: number };
  subtitle: { parts: "auto" | string[]; dateFormat: string };
  qr: { show: boolean; size: number; links: string };
  overCards: string;
  motion: { out: number; in: number; pip: number };
  posts: {
    show: boolean;
    layout: string;
    seconds: number;
    hold: number;
    position: string;
    width: number;
    qrSize: number;
    maxLines: number;
    inset: number;
    shift: false | { scale: number; seconds: number };
  };
};

/** `when`: the bool field that must be on for this one to apply (and be shown). */
type Field = { when?: string } & (
  | { key: string; label: string; kind: "int" | "num"; step?: number; hint: string }
  | { key: string; label: string; kind: "select"; options: string[]; hint: string }
  | { key: string; label: string; kind: "bool"; hint: string }
  | { key: string; label: string; kind: "parts"; hint: string }
);

/** Grouped as the form shows them. The hints are deck.mjs's ranges. */
const GROUPS: { name: string; fields: Field[] }[] = [
  {
    name: "panel",
    fields: [
      { key: "height", label: "height", kind: "int", hint: "px, 120–400" },
      { key: "footageScale", label: "footage scale", kind: "num", step: 0.01, hint: "0.5–1; the footage must fit above the panel" },
      { key: "background", label: "background", kind: "select", options: ["panel", "flush"], hint: "panel is lifted; flush sits on the frame" },
      { key: "overCards", label: "over cards", kind: "select", options: ["hide", "show"], hint: "hide slides the panel away over a card" },
    ],
  },
  {
    name: "title",
    fields: [
      { key: "title.size", label: "size", kind: "num", hint: "px, 24–96; a long title shrinks to 60 % of it" },
      { key: "title.maxChars", label: "max chars", kind: "int", hint: "10–120; the table's counter, not a refusal" },
    ],
  },
  {
    name: "subtitle",
    fields: [
      { key: "subtitle.parts", label: "parts", kind: "parts", hint: "auto, or a list of channel, title, date, clock" },
      { key: "subtitle.dateFormat", label: "date", kind: "select", options: ["long", "iso"], hint: "long is Aug 14, 2026" },
    ],
  },
  {
    name: "timeline",
    fields: [
      { key: "pip.spacing", label: "spacing", kind: "select", options: ["even", "time"], hint: "even, or by each clip's length" },
      { key: "pip.size", label: "pip", kind: "num", hint: "px, 2–24" },
      { key: "pip.activeSize", label: "active", kind: "num", hint: "px, 2–40, at least the pip" },
    ],
  },
  {
    name: "qr",
    fields: [
      { key: "qr.show", label: "show", kind: "bool", hint: "off drops every clip's QR" },
      { key: "qr.size", label: "size", kind: "num", hint: "px, 80–380 and at most height − 20" },
      { key: "qr.links", label: "links", kind: "select", options: ["site", "original"], hint: "site: each clip's QR opens the archive at the clip; original: its source page — YouTube at the clip's second, a Rumble page, an X post. A clip's citeUrl wins either way" },
    ],
  },
  {
    name: "posts",
    fields: [
      { key: "posts.show", label: "show", kind: "bool", hint: "off leaves every post out of the cut" },
      { key: "posts.layout", label: "layout", kind: "select", options: ["popup", "feed"], hint: "popup: cards at the end of each clip that carries them (held, footage moved aside); feed: a column beside the footage for the whole cut, each post ticking in as its clip starts — never held. Switching it reframes the footage: that takes a full build (cached windows are reused), and re-render on-screen is refused until one has run" },
      { key: "posts.seconds", label: "seconds", kind: "num", step: 0.5, hint: "s, 0.5–10: each post alone before the next stacks on" },
      { key: "posts.hold", label: "hold", kind: "num", step: 0.5, hint: "s, 0–10: the clip that carries posts is held on its last frame, silent, so the last post can be read; part of the cut's length" },
      { key: "posts.position", label: "side", kind: "select", options: ["top-right", "top-left"], hint: "the side the column hangs from: the frame's edge when making room, else the footage's" },
      { key: "posts.width", label: "width", kind: "int", hint: "px, 320–900" },
      { key: "posts.qrSize", label: "qr", kind: "num", hint: "px, 80–200, at most half the card" },
      { key: "posts.links", label: "qr links", kind: "select", options: ["archive", "original"], hint: "archive: each post's QR opens its page on the archive the manifest names (which links on to the original), when the build finds the post there; original: the bsky.app / x.com link itself" },
      { key: "posts.maxLines", label: "lines", kind: "int", hint: "2–14: longer posts end in an ellipsis" },
      { key: "posts.inset", label: "inset", kind: "num", hint: "px, 0–80 from the edges" },
      { key: "posts.shift", label: "make room", kind: "bool", hint: "the footage moves aside while a clip's posts are up; off leaves it in its box under the column" },
      { key: "posts.shift.scale", label: "scale", kind: "num", step: 0.01, when: "posts.shift", hint: "0.5–1: the footage's size while it is aside" },
      { key: "posts.shift.seconds", label: "move", kind: "num", step: 0.1, when: "posts.shift", hint: "s, 0–3: the move aside" },
    ],
  },
  {
    name: "motion",
    fields: [
      { key: "motion.out", label: "out", kind: "num", step: 0.05, hint: "s, 0–2: the old title wiping out" },
      { key: "motion.in", label: "in", kind: "num", step: 0.05, hint: "s, 0–2: the new title expanding" },
      { key: "motion.pip", label: "pip", kind: "num", step: 0.05, hint: "s, 0–3: the marker's travel" },
    ],
  },
];
const FIELDS = GROUPS.flatMap((g) => g.fields);

type Form = Record<string, string | boolean>;

const getPath = (o: unknown, key: string): unknown =>
  key.split(".").reduce<unknown>((v, k) => (v && typeof v === "object" ? (v as Record<string, unknown>)[k] : undefined), o);

/**
 * The form for a deck. A field under a switch that is off (`posts.shift:
 * false` has no scale) shows the default, so turning the switch on starts
 * from it.
 */
const formOf = (deck: DeckSettings, defaults: DeckSettings): Form =>
  Object.fromEntries(
    FIELDS.map((f) => {
      const own = getPath(deck, f.key);
      const v = f.kind === "bool" ? own : own ?? getPath(defaults, f.key);
      if (f.kind === "bool") return [f.key, !!v];
      if (f.kind === "parts") return [f.key, Array.isArray(v) ? v.join(", ") : String(v ?? "auto")];
      return [f.key, v == null ? "" : String(v)];
    }),
  );

/** Set `o.a.b.c` from "a.b.c", making the objects on the way. */
const setPath = (o: Record<string, unknown>, key: string, v: unknown) => {
  const ks = key.split(".");
  let at = o;
  for (const k of ks.slice(0, -1)) {
    const next = at[k];
    if (!next || typeof next !== "object") at[k] = {};
    at = at[k] as Record<string, unknown>;
  }
  at[ks[ks.length - 1]] = v;
};

/** Fields that are a switch over an object setting: on is the object (its fields), off is `false`. */
const SWITCHES = new Set(FIELDS.filter((f) => FIELDS.some((g) => g.when === f.key)).map((f) => f.key));

/**
 * The form, back into a `render.chrome.deck` block: ONLY what differs from
 * the defaults, so a manifest says what somebody chose and a default that
 * moves later still reaches it. Anything that does not parse is sent as typed
 * -- the validator's sentence is a better answer than a silent clamp here.
 *
 * A switch over an object setting (`posts.shift`) is written as `false` when
 * off -- never dropped, since absent means the default, which is on -- and as
 * the fields under it that differ when on; the fields under a switch that is
 * off are not written at all.
 */
const deckOf = (form: Form, defaults: DeckSettings): Record<string, unknown> => {
  const out: Record<string, unknown> = {};
  for (const f of FIELDS) {
    const raw = form[f.key];
    if (SWITCHES.has(f.key)) {
      if (!raw) setPath(out, f.key, false);
      continue;
    }
    if (f.when && !form[f.when]) continue;
    let v: unknown;
    if (f.kind === "bool") v = !!raw;
    else if (f.kind === "parts") {
      const s = String(raw).trim();
      v = !s || s === "auto" ? "auto" : s.split(/[\s,·]+/).filter(Boolean);
    } else if (f.kind === "select") v = String(raw);
    else {
      const s = String(raw).trim();
      if (!s) continue; // blank = the default
      v = Number.isFinite(Number(s)) ? Number(s) : s;
    }
    if (JSON.stringify(v) === JSON.stringify(getPath(defaults, f.key))) continue;
    setPath(out, f.key, v);
  }
  return out;
};

// ---------------------------------------------------------------------------

type ChromeDoc = {
  chrome: Record<string, unknown> | null;
  deckOn: boolean;
  deck: DeckSettings | null;
  defaults: DeckSettings;
  errors: string[];
  token: string | null;
};
type Row = {
  id: string;
  type: string;
  onscreen: Onscreen | null;
  claim: Claim | null;
  auto: { title: string; subtitle: string };
};
/** A row as the form holds it: the text, and the claim's id and verdict ("" for none). */
type Draft = { title: string; subtitle: string; claimId: string; verdict: string };
type PostWhere = { entryId: string; rule: "attachTo" | "date" | "first"; clipDay: string | null; label: string };
type PostRow = {
  id: string;
  platform: string;
  author: string;
  handle: string;
  date: string;
  text: string;
  url: string;
  attachTo: string | null;
  hide: boolean;
  auto: PostWhere | null;
  effective: PostWhere | null;
  timing: { segment: string; slot: number; of: number; appear?: number; out?: [number, number]; in?: number } | null;
};
type ClipOption = { id: string; label: string; day: string | null };
/** A post's row as the form holds it: `attachTo` "" is the automatic clip. */
type PostDraft = { attachTo: string; hide: boolean };
type JobView = {
  id: string;
  state: "running" | "done" | "failed";
  stepIndex: number;
  steps: { label: string }[];
  error: string | null;
  log: string[];
  next: number;
};

const draftOf = (o: Onscreen | null, c: Claim | null = null): Draft => ({
  title: o?.title ?? "",
  subtitle: o?.subtitle ?? "",
  claimId: c?.id ?? "",
  verdict: c?.verdict ?? "",
});
const rowDraft = (row: Row) => draftOf(row.onscreen, row.claim);
const sameDraft = (a: Draft, b: Draft) =>
  a.title.trim() === b.title.trim() &&
  a.subtitle.trim() === b.subtitle.trim() &&
  a.claimId.trim() === b.claimId.trim() &&
  a.verdict === b.verdict;
/** A row's claim as the writer takes it: null with neither part, else both (a half-filled one is refused there, in words). */
const claimValue = (d: Draft): Claim | null =>
  d.claimId.trim() || d.verdict ? { id: d.claimId.trim(), verdict: d.verdict } : null;
/** A row's draft as the writer takes it: the text, and the claim beside it. */
const rowValue = (d: Draft): OnscreenRow => ({ ...(onscreenValue(d) ?? {}), claim: claimValue(d) });
const postDraftOf = (p: PostRow): PostDraft => ({ attachTo: p.attachTo ?? "", hide: p.hide });
const samePost = (a: PostDraft, b: PostDraft) => a.attachTo === b.attachTo && a.hide === b.hide;
/** Only what changed, in the writer's shape. */
const postPatch = (d: PostDraft, saved: PostDraft): PostPatch => {
  const p: PostPatch = {};
  if (d.attachTo !== saved.attachTo) p.attachTo = d.attachTo || null;
  if (d.hide !== saved.hide) p.hide = d.hide;
  return p;
};
const clipText = (id: string, label: string) => (label ? `${id} — ${label}` : id);
const postDay = (iso: string) => String(iso).slice(0, 10);

const STALE =
  "the manifest changed since you opened this — reload the saved values (your edits are kept) and save again, or your edit would overwrite whatever was written";

const field =
  "rounded border bg-[var(--color-panel-2)] px-1.5 py-0.5 text-[12px] text-[var(--color-text)] placeholder:italic placeholder:text-[var(--color-dim)]";
const input = `${field} border-[var(--color-line)]`;

export default function OnscreenSection({
  project,
  entries,
  built,
  generatedBy = null,
}: {
  project: string;
  /** The manifest's `generatedBy`: its edits are noted for the agent, and the section says so. */
  generatedBy?: string | null;
  /**
   * Is the default cut's deliverable on disk? The server already knows, and
   * asking the video route about a file that is not there is a 404 in the
   * console of every page view of an unbuilt report.
   */
  built: boolean;
  /** Which entries have a built segment: the backdrop the preview can show. */
  entries: { id: string; kind: string; segment: boolean }[];
}) {
  const [doc, setDoc] = useState<ChromeDoc | null>(null);
  const [loadError, setLoadError] = useState<string | null>(null);
  const [variants, setVariants] = useState<string[]>([]);
  const [variant, setVariant] = useState("");
  const [form, setForm] = useState<Form>({});
  const [formDirty, setFormDirty] = useState(false);
  const [errors, setErrors] = useState<string[]>([]);
  const [rows, setRows] = useState<Row[]>([]);
  // The rows as last saved, for loadRows to tell an edit from an old value.
  const rowsRef = useRef<Row[]>([]);
  useEffect(() => {
    rowsRef.current = rows;
  }, [rows]);
  const [maxChars, setMaxChars] = useState(48);
  const [drafts, setDrafts] = useState<Record<string, Draft>>({});
  // The Posts table: the manifest's posts as saved, the clips one can ride on,
  // and the unsaved overrides. Saved through the same token as everything else.
  const [posts, setPosts] = useState<PostRow[]>([]);
  const postsRef = useRef<PostRow[]>([]);
  useEffect(() => {
    postsRef.current = posts;
  }, [posts]);
  const [clips, setClips] = useState<ClipOption[]>([]);
  const [postsShown, setPostsShown] = useState(true);
  const [postDrafts, setPostDrafts] = useState<Record<string, PostDraft>>({});
  const [note, setNote] = useState<string | null>(null);
  const [stale, setStale] = useState(false);
  const [busy, setBusy] = useState<string | null>(null);
  const [preview, setPreview] = useState<DeckPreviewDoc | null>(null);
  const [previewError, setPreviewError] = useState<string | null>(null);
  const [composing, setComposing] = useState(false);
  const [t, setT] = useState(0);
  const [still, setStill] = useState<{ url: string; at: number; estimated: boolean } | null>(null);
  const [stillError, setStillError] = useState<string | null>(null);
  const [preset, setPreset] = useState<"final" | "fast" | null>(null);
  const [job, setJob] = useState<JobView | null>(null);
  const [jobError, setJobError] = useState<string | null>(null);
  const [finalV, setFinalV] = useState<number | null | "none">(null);
  // The built file's project-relative path (the video route's x-video): what a
  // timed note on it is anchored to.
  const [finalRel, setFinalRel] = useState<string | null>(null);
  // The switch as pressed, while its write is in flight: the box follows the
  // hand at once and falls back to the manifest's answer if the write fails.
  const [switching, setSwitching] = useState<boolean | null>(null);
  // One token for the manifest, shared by both writers here: a settings save
  // moves it, and the table's next save must carry the moved one. A ref, as
  // in the clip bench, because two saves can be in flight before a render.
  const token = useRef<string | null>(null);
  const saving = useRef<Promise<unknown>>(Promise.resolve());
  const since = useRef(0);
  const backdrop = useRef<HTMLVideoElement | null>(null);

  const variantQ = variant ? `&variant=${encodeURIComponent(variant)}` : "";
  const q = `project=${encodeURIComponent(project)}${variantQ}`;
  const segmentOf = useMemo(() => new Set(entries.filter((e) => e.kind === "clip" && e.segment).map((e) => e.id)), [entries]);

  // ---- reading ------------------------------------------------------------
  const loadChrome = useCallback(async () => {
    const r = await fetch(`/api/report/chrome?project=${encodeURIComponent(project)}`, { cache: "no-store" });
    const j = (await r.json()) as ChromeDoc & { error?: string };
    if (!r.ok) {
      setLoadError(String(j.error ?? r.status));
      return null;
    }
    setDoc(j);
    token.current = j.token;
    setForm(formOf(j.deck ?? j.defaults, j.defaults));
    setFormDirty(false);
    setErrors(j.errors ?? []);
    return j;
  }, [project]);

  /**
   * The table's rows. `keep` keeps every unsaved edit on top of what is now
   * saved -- the reload after a 409 must not throw away what was typed.
   *
   * An EDIT is a draft that differs from what this page last read as saved.
   * A row nobody touched here takes the newly saved value: kept as its old
   * draft it would read as an edit, and the next save would revert the other
   * writer's change -- the very write the stale token exists to protect.
   */
  const loadRows = useCallback(
    async (keep: boolean) => {
      const r = await fetch(`/api/report/onscreen?${q}`, { cache: "no-store" });
      const j = (await r.json()) as {
        rows: Row[];
        maxChars: number;
        token: string | null;
        posts?: PostRow[];
        clips?: ClipOption[];
        postsShown?: boolean;
        error?: string;
      };
      if (!r.ok) {
        setLoadError(String(j.error ?? r.status));
        return;
      }
      const before = new Map(rowsRef.current.map((row) => [row.id, rowDraft(row)]));
      const postsBefore = new Map(postsRef.current.map((p) => [p.id, postDraftOf(p)]));
      const nextPosts = j.posts ?? [];
      setPosts(nextPosts);
      setClips(j.clips ?? []);
      setPostsShown(j.postsShown !== false);
      // The titles' rule, for posts: only a real edit survives a reload.
      setPostDrafts((prev) => {
        const next: Record<string, PostDraft> = {};
        for (const p of nextPosts) {
          const saved = postDraftOf(p);
          const old = prev[p.id];
          const was = postsBefore.get(p.id);
          next[p.id] = keep && old && was && !samePost(old, was) ? old : saved;
        }
        return next;
      });
      token.current = j.token;
      setRows(j.rows);
      setMaxChars(j.maxChars);
      setDrafts((prev) => {
        const next: Record<string, Draft> = {};
        for (const row of j.rows) {
          const saved = rowDraft(row);
          const old = prev[row.id];
          const was = before.get(row.id);
          next[row.id] = keep && old && was && !sameDraft(old, was) ? old : saved;
        }
        return next;
      });
    },
    [q],
  );

  const recompose = useCallback(
    async (draft: Record<string, OnscreenRow | null> = {}, postsDraft: Record<string, PostPatch> = {}) => {
      setComposing(true);
      setPreviewError(null);
      const res = await composePreview(project, variant || null, draft, { postsDraft });
      setComposing(false);
      if ("error" in res) {
        setPreviewError(res.error);
        return;
      }
      setPreview(res);
      // The schedule says how this cut was built: a crossfaded build is
      // re-rendered as one, a hard-cut build as one.
      setPreset((p) => p ?? (res.schedule.estimated || res.schedule.transition > 0 ? "final" : "fast"));
      setT((cur) => Math.min(cur, res.schedule.total));
    },
    [project, variant],
  );

  const loadFinal = useCallback(async () => {
    const r = await fetch(`/api/report/video?${q}&kind=final`, { method: "HEAD", cache: "no-store" }).catch(() => null);
    const m = r?.ok ? r.headers.get("x-video-mtime") : null;
    setFinalRel(r?.ok ? r.headers.get("x-video") : null);
    setFinalV(m ? Number(m) : "none");
  }, [q]);

  useEffect(() => {
    void fetch("/api/report/build", { cache: "no-store" })
      .then((r) => r.json())
      .then((j) => setVariants((j.variants as string[]) ?? []))
      .catch(() => {});
  }, []);

  useEffect(() => {
    let live = true;
    void (async () => {
      const c = await loadChrome();
      if (!live || !c) return;
      await loadRows(false);
      if (built || variant) void loadFinal();
      else setFinalV("none");
      if (live && c.deckOn && !(c.errors ?? []).length) await recompose();
    })();
    return () => {
      live = false;
    };
    // `built` and `variant` are read once per load; loadFinal already follows the variant.
  }, [loadChrome, loadRows, loadFinal, recompose]);

  // A structural write elsewhere on the page (the timeline, the teaser and
  // posts editors) changed the manifest: re-read the tokens and the rows,
  // keeping every unsaved edit here, or the next save would 409.
  const formDirtyRef = useRef(formDirty);
  formDirtyRef.current = formDirty;
  useEffect(() => {
    const on = (e: Event) => {
      if ((e as CustomEvent).detail?.project !== project) return;
      void (async () => {
        const r = await fetch(`/api/report/chrome?project=${encodeURIComponent(project)}`, { cache: "no-store" });
        const j = (await r.json().catch(() => null)) as (ChromeDoc & { error?: string }) | null;
        if (r.ok && j) {
          token.current = j.token;
          if (!formDirtyRef.current) setDoc(j);
        }
        await loadRows(true);
      })();
    };
    window.addEventListener(MANIFEST_CHANGED, on);
    return () => window.removeEventListener(MANIFEST_CHANGED, on);
  }, [project, loadRows]);

  // ---- writing ------------------------------------------------------------
  const queued = useCallback(<T,>(fn: () => Promise<T>): Promise<T> => {
    const run = saving.current.catch(() => null).then(fn);
    saving.current = run;
    return run;
  }, []);

  /** PUT render.chrome. `null` turns the panel off. */
  const putChrome = useCallback(
    (chrome: Record<string, unknown> | null) =>
      queued(async () => {
        setBusy("saving…");
        setNote(null);
        const r = await fetch("/api/report/chrome", {
          method: "PUT",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ project, chrome, token: token.current }),
        });
        const j = (await r.json()) as Record<string, unknown>;
        if (wroteNotes(j)) announceNotesChanged(project);
        setBusy(null);
        if (!r.ok) {
          if (j.stale) {
            setStale(true);
            setNote(STALE);
          } else {
            setErrors((j.errors as string[]) ?? []);
            setNote(`could not save: ${String(j.error ?? r.status)}`);
          }
          return false;
        }
        token.current = String(j.token ?? "");
        setErrors([]);
        setStale(false);
        return true;
      }),
    [project, queued],
  );

  const toggle = useCallback(
    async (on: boolean) => {
      if (!doc) return;
      if (!on) {
        const custom = doc.chrome?.deck && Object.keys(doc.chrome.deck as object).length > 0;
        if (
          custom &&
          !window.confirm(
            "Turning the on-screen panel off removes render.chrome from the manifest, settings included. The titles and subtitles in the table stay. Turn it off?",
          )
        )
          return;
      }
      setSwitching(on);
      const ok = await putChrome(on ? { engine: "hyperframes", layout: "deck", deck: {} } : null);
      if (!ok) {
        setSwitching(null);
        return;
      }
      const c = await loadChrome();
      setSwitching(null);
      await loadRows(true);
      if (c?.deckOn) await recompose();
      else setPreview(null);
      setNote(on ? "on — the next build draws the panel" : "off — the next build draws the old chrome");
    },
    [doc, putChrome, loadChrome, loadRows, recompose],
  );

  const dirtyIds = rows.filter((r) => drafts[r.id] && !sameDraft(drafts[r.id], rowDraft(r))).map((r) => r.id);
  const draftMap = useCallback(
    () => Object.fromEntries(dirtyIds.map((id) => [id, rowValue(drafts[id])])) as Record<string, OnscreenRow | null>,
    [dirtyIds, drafts],
  );
  const dirtyPostIds = posts.filter((p) => postDrafts[p.id] && !samePost(postDrafts[p.id], postDraftOf(p))).map((p) => p.id);
  const postsDraftMap = useCallback(
    () =>
      Object.fromEntries(
        posts.filter((p) => dirtyPostIds.includes(p.id)).map((p) => [p.id, postPatch(postDrafts[p.id], postDraftOf(p))]),
      ) as Record<string, PostPatch>,
    [posts, dirtyPostIds, postDrafts],
  );

  const saveSettings = useCallback(async () => {
    if (!doc) return;
    const chrome = {
      engine: (doc.chrome?.engine as string) ?? "hyperframes",
      layout: (doc.chrome?.layout as string) ?? "deck",
      deck: deckOf(form, doc.defaults),
      // The fact-check settings are the manifest's (this form does not edit
      // them): carried through as saved, never dropped by a deck save.
      ...(doc.chrome?.factcheck !== undefined ? { factcheck: doc.chrome.factcheck } : {}),
    };
    const ok = await putChrome(chrome);
    if (!ok) return;
    await loadChrome();
    // The auto subtitles follow subtitle.parts and dateFormat; the counter
    // follows title.maxChars. Unsaved table edits ride through.
    await loadRows(true);
    await recompose(draftMap(), postsDraftMap());
    setNote("settings saved — the preview is recomposed with them");
  }, [doc, form, putChrome, loadChrome, loadRows, recompose, draftMap, postsDraftMap]);

  const saveRows = useCallback(
    () =>
      queued(async () => {
        if (!dirtyIds.length) return;
        setBusy("saving…");
        setNote(null);
        const r = await fetch("/api/report/onscreen", {
          method: "PUT",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ project, onscreen: draftMap(), token: token.current }),
        });
        const j = (await r.json()) as Record<string, unknown>;
        if (wroteNotes(j)) announceNotesChanged(project);
        setBusy(null);
        if (!r.ok) {
          // The drafts stay exactly as typed. A refused batch is a typo or a
          // race, and neither is fixed by retyping nineteen rows.
          if (j.stale) {
            setStale(true);
            setNote(STALE);
          } else setNote(`could not save: ${String(j.error ?? r.status)}`);
          return;
        }
        token.current = String(j.token ?? "");
        setStale(false);
        const saved = (j.onscreen ?? {}) as Record<string, Onscreen | null>;
        const savedClaims = (j.claims ?? {}) as Record<string, Claim | null>;
        const claimOfRow = (row: Row) => (row.id in savedClaims ? savedClaims[row.id] : row.claim);
        setRows((prev) =>
          prev.map((row) => (row.id in saved ? { ...row, onscreen: saved[row.id], claim: claimOfRow(row) } : row)),
        );
        // Re-sync from what the writer stored, which is trimmed.
        setDrafts((prev) => {
          const next = { ...prev };
          for (const row of rows) if (row.id in saved) next[row.id] = draftOf(saved[row.id], claimOfRow(row));
          return next;
        });
        setNote(`saved ${Object.keys(saved).length} row${Object.keys(saved).length === 1 ? "" : "s"}`);
      }),
    [queued, dirtyIds, project, draftMap, rows],
  );

  /** The Posts table's one save: only the posts that changed, only the keys that changed. */
  const savePosts = useCallback(
    () =>
      queued(async () => {
        if (!dirtyPostIds.length) return;
        setBusy("saving…");
        setNote(null);
        const r = await fetch("/api/report/posts", {
          method: "PUT",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ project, posts: postsDraftMap(), token: token.current }),
        });
        const j = (await r.json()) as Record<string, unknown>;
        if (wroteNotes(j)) announceNotesChanged(project);
        setBusy(null);
        if (!r.ok) {
          if (j.stale) {
            setStale(true);
            setNote(STALE);
          } else setNote(`could not save: ${String(j.error ?? r.status)}`);
          return;
        }
        token.current = String(j.token ?? "");
        setStale(false);
        const n = Object.keys((j.posts ?? {}) as object).length;
        // The effective clip and the timing are the server's to say: read them
        // back, keeping any title edits, and redraw the windows.
        await loadRows(true);
        if (doc?.deckOn) await recompose(draftMap());
        setNote(`saved ${n} post${n === 1 ? "" : "s"}`);
      }),
    [queued, dirtyPostIds, project, postsDraftMap, loadRows, recompose, draftMap, doc],
  );

  const reloadSaved = useCallback(async () => {
    await loadChrome();
    await loadRows(true);
    setStale(false);
    setNote("reloaded the saved values — your unsaved edits are still here");
  }, [loadChrome, loadRows]);

  // ---- the true still -----------------------------------------------------
  const trueStill = useCallback(async () => {
    setStillError(null);
    setBusy("rendering a still…");
    const r = await fetch(`/api/report/still?${q}&at=${t.toFixed(3)}`, { cache: "no-store" });
    setBusy(null);
    if (!r.ok) {
      setStillError(await r.text());
      return;
    }
    const blob = await r.blob();
    setStill((prev) => {
      if (prev) URL.revokeObjectURL(prev.url);
      return {
        url: URL.createObjectURL(blob),
        at: Number(r.headers.get("x-still-at") ?? t),
        estimated: r.headers.get("x-schedule-estimated") === "true",
      };
    });
  }, [q, t]);

  // ---- re-render on-screen: the build chain's own job runner ---------------
  const rerender = useCallback(async () => {
    setJobError(null);
    const options: Record<string, unknown> = { chromeOnly: true };
    if (variant) options.variant = variant;
    const r = await fetch("/api/report/build", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ project, preset: preset ?? "final", only: null, options }),
    });
    const j = (await r.json()) as Record<string, unknown>;
    if (!r.ok) {
      setJobError(String(j.error ?? r.status));
      return;
    }
    since.current = 0;
    setJob(j.job as JobView);
  }, [project, preset, variant]);

  useEffect(() => {
    if (!job || job.state !== "running") return;
    const tick = setInterval(async () => {
      const r = await fetch(`/api/report/build?job=${job.id}&since=${since.current}`, { cache: "no-store" });
      if (!r.ok) return;
      const j = (await r.json()) as JobView;
      since.current = j.next;
      setJob((prev) => (prev ? { ...j, log: [...prev.log, ...j.log] } : j));
      if (j.state !== "running") void loadFinal();
    }, 800);
    return () => clearInterval(tick);
  }, [job, loadFinal]);

  // ---- the live picture ----------------------------------------------------
  const texts = useMemo<DeckTexts>(() => {
    const out: DeckTexts = {};
    for (const row of rows) {
      const d = drafts[row.id] ?? rowDraft(row);
      out[row.id] = { title: d.title.trim() || row.auto.title, subtitle: d.subtitle.trim() || row.auto.subtitle };
    }
    return out;
  }, [rows, drafts]);

  const schedule = preview?.schedule ?? null;
  const current = schedule ? segmentAt(schedule, t) : null;
  const postsWin = preview?.posts ? postsWindowAt(preview.posts.windows, t) : null;
  const backdropId = current && segmentOf.has(current.id) ? current.id : null;
  // The footage moving aside for the posts (`posts.shift`): the backdrop --
  // the built segment or the neutral frame, both a whole frame with the
  // footage in its box -- is clipped to that box and carried to where the
  // build puts it at this moment, on the build's curve.
  const move = schedule ? footageAt(schedule, t) : null;
  // The posts FEED: the footage sits in the feed's box for the whole cut. A
  // backdrop built for another box (the deck's, before the feed was switched
  // on) is carried into it, as a move would be; the neutral frame is drawn there.
  const feed = preview?.feed ?? null;
  const feedFrom = feed && backdropId ? feed.boxes[backdropId] ?? preview!.geometry.footage : null;
  const reframe =
    feed && feedFrom && backdropTransform(feedFrom, feed.footage, preview!.geometry) !== "none"
      ? { from: feedFrom, rect: feed.footage }
      : null;
  const shiftBox = move ?? reframe;
  const backdropStyle: React.CSSProperties | undefined =
    shiftBox && preview
      ? (() => {
          const { W, H } = preview.geometry;
          const f = shiftBox.from;
          const pc = (v: number, of: number) => `${(v / of) * 100}%`;
          return {
            transform: backdropTransform(shiftBox.from, shiftBox.rect, preview.geometry),
            transformOrigin: "0 0",
            clipPath: `inset(${pc(f.y, H)} ${pc(W - f.x - f.width, W)} ${pc(H - f.y - f.height, H)} ${pc(f.x, W)})`,
          };
        })()
      : undefined;

  // The backdrop follows the scrubber: the built segment of whichever clip is
  // on screen, at the same offset into it.
  useEffect(() => {
    const el = backdrop.current;
    if (!el || !current) return;
    const at = Math.max(0, t - current.start);
    const seek = () => {
      el.currentTime = Math.min(at, Math.max(0, (el.duration || at) - 0.05));
    };
    if (el.readyState >= 1) seek();
    else el.addEventListener("loadedmetadata", seek, { once: true });
    return () => el.removeEventListener("loadedmetadata", seek);
  }, [t, current, backdropId]);

  const jump = (id: string) => {
    const s = schedule?.segments.find((x) => x.id === id);
    if (s) setT(midOf(s));
  };

  // ---- render ---------------------------------------------------------------
  if (loadError) {
    return (
      <section data-testid="onscreen-section" className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
        <h2 className="micro">on-screen</h2>
        <p className="text-[12px] text-[var(--color-bad)]">{loadError}</p>
      </section>
    );
  }
  if (!doc) {
    return (
      <section data-testid="onscreen-section" className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
        <h2 className="micro">on-screen</h2>
        <p className="text-[11px] text-[var(--color-dim)]">reading the manifest…</p>
      </section>
    );
  }

  const on = doc.deckOn;
  const over = (s: string) => s.trim().length > maxChars;
  // The validator's sentences, one per problem. Beside the settings when the
  // panel is on (that is the form they are about); at the top when it is off,
  // where a refused switch is.
  const errorList = errors.length > 0 && (
    <ul
      data-testid="onscreen-errors"
      className="space-y-0.5 rounded border border-[var(--color-bad)] px-2 py-1 text-[11px] text-[var(--color-bad)]"
    >
      {errors.map((e) => (
        <li key={e}>{e}</li>
      ))}
    </ul>
  );

  const words = (
    <div className="space-y-1.5">
      <div className="flex flex-wrap items-center gap-2">
        <span className="micro">titles and subtitles — {rows.length} entries</span>
        <span className="text-[11px] text-[var(--color-dim)]">
          empty uses the grey text; the counter warns past {maxChars}, it does not refuse
        </span>
        <button
          type="button"
          data-testid="onscreen-save"
          className={`${buttonVariants({ variant: "primary", size: "sm" })} ml-auto`}
          disabled={!!busy || dirtyIds.length === 0}
          onClick={() => void saveRows()}
        >
          {dirtyIds.length ? `save ${dirtyIds.length} change${dirtyIds.length === 1 ? "" : "s"}` : "saved"}
        </button>
        {dirtyIds.length > 0 && (
          <button
            type="button"
            data-testid="onscreen-discard"
            className={buttonVariants({ size: "sm" })}
            disabled={!!busy}
            onClick={() => setDrafts(Object.fromEntries(rows.map((r) => [r.id, rowDraft(r)])))}
          >
            discard
          </button>
        )}
      </div>
      <div className="overflow-x-auto">
        <table data-testid="onscreen-table" className="w-full border-collapse text-[12px]">
          <thead>
            <tr className="micro text-left">
              <th className="w-16 px-1.5 py-0.5">entry</th>
              <th className="px-1.5 py-0.5">title</th>
              <th className="w-14 px-1.5 py-0.5 text-right">chars</th>
              <th className="px-1.5 py-0.5">subtitle</th>
              <th className="w-56 px-1.5 py-0.5" title="the fact-check claim this entry is evidence for, and its verdict: stamped on the claim's last entry, counted in the tally">
                claim
              </th>
            </tr>
          </thead>
          <tbody>
            {rows.map((row) => {
              const d = drafts[row.id] ?? rowDraft(row);
              const dirty = !sameDraft(d, rowDraft(row));
              const shown = d.title.trim() || row.auto.title;
              const isCurrent = current?.id === row.id;
              const set = (k: keyof Draft, v: string) =>
                setDrafts((prev) => ({ ...prev, [row.id]: { ...(prev[row.id] ?? rowDraft(row)), [k]: v } }));
              // A teaser is a finale, never evidence: the writer refuses a claim on one.
              const claimable = row.type !== "teaser";
              const stamped = schedule?.factcheck?.stamps.find((s) => s.segment === row.id) ?? null;
              return (
                <tr
                  key={row.id}
                  data-testid="onscreen-row"
                  data-entry={row.id}
                  data-dirty={dirty ? "1" : "0"}
                  data-current={isCurrent ? "1" : "0"}
                  className={`border-t border-[var(--color-line)] align-middle ${isCurrent ? "bg-[var(--color-panel-2)]" : ""}`}
                >
                  <td className="px-1.5 py-1">
                    <button
                      type="button"
                      onClick={() => jump(row.id)}
                      className={`font-mono text-[11px] hover:underline ${isCurrent ? "text-[var(--color-sel)]" : "text-[var(--color-text)]"}`}
                      title="show this entry in the preview"
                    >
                      {row.id}
                    </button>
                    <span className="micro ml-1">{row.type === "clip" ? "" : row.type}</span>
                    {dirty && <span className="ml-1 text-[var(--color-dirty)]" title="unsaved">●</span>}
                  </td>
                  <td className="px-1.5 py-1">
                    <input
                      type="text"
                      data-testid="onscreen-title"
                      name={`title-${row.id}`}
                      value={d.title}
                      maxLength={200}
                      placeholder={row.auto.title || "(no title — the source line takes its place)"}
                      onFocus={() => jump(row.id)}
                      onChange={(e) => set("title", e.target.value)}
                      onKeyDown={(e) => {
                        if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void saveRows();
                      }}
                      className={`${field} w-full ${over(shown) ? "border-[var(--color-dirty)]" : "border-[var(--color-line)]"}`}
                    />
                  </td>
                  <td
                    className={`num px-1.5 py-1 text-right font-mono text-[11px] ${over(shown) ? "text-[var(--color-dirty)]" : "text-[var(--color-dim)]"}`}
                    data-testid="onscreen-count"
                    data-over={over(shown) ? "1" : "0"}
                  >
                    {shown.trim().length}/{maxChars}
                  </td>
                  <td className="px-1.5 py-1">
                    <input
                      type="text"
                      data-testid="onscreen-subtitle"
                      name={`subtitle-${row.id}`}
                      value={d.subtitle}
                      maxLength={200}
                      placeholder={row.auto.subtitle || "(no archive record here — the build reads the fetched file)"}
                      onFocus={() => jump(row.id)}
                      onChange={(e) => set("subtitle", e.target.value)}
                      onKeyDown={(e) => {
                        if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void saveRows();
                      }}
                      className={`${input} w-full`}
                    />
                  </td>
                  <td className="px-1.5 py-1">
                    {claimable ? (
                      <div className="flex items-center gap-1">
                        <input
                          type="text"
                          data-testid="onscreen-claim-id"
                          name={`claim-${row.id}`}
                          value={d.claimId}
                          maxLength={64}
                          placeholder="claim id"
                          onFocus={() => jump(row.id)}
                          onChange={(e) => set("claimId", e.target.value)}
                          className={`${input} w-20 font-mono`}
                        />
                        <select
                          data-testid="onscreen-claim-verdict"
                          name={`verdict-${row.id}`}
                          value={d.verdict}
                          onChange={(e) => set("verdict", e.target.value)}
                          className={`${input} min-w-0 flex-1`}
                        >
                          <option value="">—</option>
                          {VERDICTS.map((v) => (
                            <option key={v} value={v}>
                              {v}
                            </option>
                          ))}
                        </select>
                        {stamped && (
                          <span
                            data-testid="onscreen-claim-stamped"
                            className="micro shrink-0 text-[var(--color-dim)]"
                            title={`${stamped.claim}'s verdict is stamped at the end of this entry (${stamped.at.toFixed(1)}s in the cut)`}
                          >
                            stamp
                          </span>
                        )}
                      </div>
                    ) : (
                      <span className="micro text-[var(--color-dim)]">—</span>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );

  // ---- the posts ------------------------------------------------------------
  const clipById = new Map(clips.map((c) => [c.id, c]));
  /** Where a post rides as DRAFTED: hidden, the chosen clip, or the automatic one. */
  const ridesOn = (p: PostRow, d: PostDraft): { id: string; label: string; how: "auto" | "chosen" } | null => {
    if (d.hide) return null;
    const chosen = d.attachTo ? clipById.get(d.attachTo) : null;
    if (chosen) return { id: chosen.id, label: chosen.label, how: "chosen" };
    return p.auto ? { id: p.auto.entryId, label: p.auto.label, how: "auto" } : null;
  };
  const autoText = (p: PostRow) =>
    p.auto ? `auto: ${clipText(p.auto.entryId, p.auto.label)}` : "auto: no clip in this cut";

  const postsBlock = posts.length > 0 && (
    <div className="space-y-1.5" data-testid="onscreen-posts">
      <div className="flex flex-wrap items-center gap-2">
        <span className="micro">posts — {posts.length}</span>
        <span className="text-[11px] text-[var(--color-dim)]">
          {postsShown
            ? "each rides on the clip recorded most closely before it, and stacks on at that clip's end"
            : "posts are switched off in the settings (posts → show); nothing below is drawn"}
        </span>
        <button
          type="button"
          data-testid="onscreen-posts-save"
          className={`${buttonVariants({ variant: "primary", size: "sm" })} ml-auto`}
          disabled={!!busy || dirtyPostIds.length === 0}
          onClick={() => void savePosts()}
        >
          {dirtyPostIds.length ? `save ${dirtyPostIds.length} post${dirtyPostIds.length === 1 ? "" : "s"}` : "saved"}
        </button>
        {dirtyPostIds.length > 0 && (
          <button
            type="button"
            data-testid="onscreen-posts-discard"
            className={buttonVariants({ size: "sm" })}
            disabled={!!busy}
            onClick={() => setPostDrafts(Object.fromEntries(posts.map((p) => [p.id, postDraftOf(p)])))}
          >
            discard
          </button>
        )}
      </div>
      <div className="overflow-x-auto">
        <table data-testid="onscreen-posts-table" className="w-full border-collapse text-[12px]">
          <thead>
            <tr className="micro text-left">
              <th className="w-40 px-1.5 py-0.5">post</th>
              <th className="px-1.5 py-0.5">words</th>
              <th className="w-72 px-1.5 py-0.5">rides on</th>
              <th className="w-12 px-1.5 py-0.5 text-center">hide</th>
            </tr>
          </thead>
          <tbody>
            {posts.map((p) => {
              const d = postDrafts[p.id] ?? postDraftOf(p);
              const dirty = !samePost(d, postDraftOf(p));
              const on = ridesOn(p, d);
              const set = (patch: Partial<PostDraft>) =>
                setPostDrafts((prev) => ({ ...prev, [p.id]: { ...(prev[p.id] ?? postDraftOf(p)), ...patch } }));
              const inWindow = postsWin && on && postsWin.segment === on.id;
              return (
                <tr
                  key={p.id}
                  data-testid="onscreen-post-row"
                  data-post={p.id}
                  data-dirty={dirty ? "1" : "0"}
                  data-hidden={d.hide ? "1" : "0"}
                  data-effective={on?.id ?? ""}
                  data-current={inWindow ? "1" : "0"}
                  className={`border-t border-[var(--color-line)] align-top ${d.hide ? "opacity-50" : ""} ${inWindow ? "bg-[var(--color-panel-2)]" : ""}`}
                >
                  <td className="px-1.5 py-1">
                    <div className="num font-mono text-[11px] text-[var(--color-text)]" title={p.date}>
                      {postDay(p.date)}
                      {dirty && <span className="ml-1 text-[var(--color-dirty)]" title="unsaved">●</span>}
                    </div>
                    <div className="text-[11px] text-[var(--color-dim)]">
                      <span className={badgeVariants({ size: "sm" })} data-testid="onscreen-post-platform">
                        {p.platform}
                      </span>{" "}
                      <span data-testid="onscreen-post-handle">@{p.handle || p.author}</span>
                    </div>
                    <a
                      href={p.url}
                      target="_blank"
                      rel="noreferrer noopener"
                      data-testid="onscreen-post-link"
                      className="text-[11px] text-[var(--color-sel)] hover:underline"
                    >
                      open the post ↗
                    </a>
                  </td>
                  <td className="px-1.5 py-1">
                    <p
                      data-testid="onscreen-post-text"
                      className="line-clamp-3 whitespace-pre-line text-[12px] leading-snug text-[var(--color-text)]"
                      title={p.text}
                    >
                      {p.text}
                    </p>
                  </td>
                  <td className="px-1.5 py-1">
                    <select
                      data-testid="onscreen-post-attach"
                      value={d.attachTo}
                      disabled={d.hide}
                      onChange={(e) => set({ attachTo: e.target.value })}
                      className={`${input} w-full text-[11px]`}
                      title="The clip this post rides on: automatic (by date), or any clip of the cut"
                    >
                      <option value="" data-testid="onscreen-post-auto">
                        {autoText(p)}
                      </option>
                      {clips.map((c) => (
                        <option key={c.id} value={c.id}>
                          {clipText(c.id, c.label)}
                        </option>
                      ))}
                    </select>
                    <div className="mt-0.5 flex flex-wrap items-center gap-1 text-[11px] text-[var(--color-dim)]">
                      {on ? (
                        <>
                          <span data-testid="onscreen-post-effective">
                            {on.how === "auto" ? "automatic" : "chosen"}:{" "}
                            <span className="font-mono text-[var(--color-text)]">{on.id}</span>
                            {on.how === "auto" && p.auto?.clipDay ? ` (${p.auto.clipDay})` : ""}
                          </span>
                          {!dirty && p.timing && schedule && (
                            <button
                              type="button"
                              data-testid="onscreen-post-jump"
                              className="num font-mono text-[var(--color-sel)] hover:underline"
                              onClick={() => setT(Math.min(schedule.total, Math.round(((p.timing!.in ?? p.timing!.appear ?? 0) + (p.timing!.in != null ? 1.5 : 0.25)) * 1000) / 1000))}
                              title="show this post in the preview"
                            >
                              at {clock(p.timing.in ?? p.timing.appear ?? 0)}
                            </button>
                          )}
                        </>
                      ) : (
                        <span data-testid="onscreen-post-effective">hidden — not in the cut</span>
                      )}
                    </div>
                  </td>
                  <td className="px-1.5 py-1 text-center">
                    <input
                      type="checkbox"
                      data-testid="onscreen-post-hide"
                      checked={d.hide}
                      onChange={(e) => set({ hide: e.target.checked })}
                      aria-label={`hide post ${p.id}`}
                    />
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      {dirtyPostIds.length > 0 && doc.deckOn && (
        <p className="text-[11px] text-[var(--color-dirty)]">
          the preview shows saved posts; recompose to see the unsaved {dirtyPostIds.length === 1 ? "change" : "changes"}
        </p>
      )}
    </div>
  );

  return (
    <section
      data-testid="onscreen-section"
      data-onscreen={on ? "on" : "off"}
      className="space-y-3 rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3"
    >
      <GeneratedBanner generatedBy={generatedBy} />
      {/* ---- the switch ---- */}
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
        <h2 className="micro">on-screen</h2>
        <label className="flex items-center gap-1.5 text-[12px] text-[var(--color-text)]">
          <input
            type="checkbox"
            data-testid="onscreen-toggle"
            checked={switching ?? on}
            disabled={!!busy || switching !== null}
            onChange={(e) => void toggle(e.target.checked)}
          />
          a panel under the footage: timeline, title, source, QR
        </label>
        {on && variants.length > 1 && (
          <label className="flex items-center gap-1 text-[11px] text-[var(--color-dim)]">
            cut
            <select
              data-testid="onscreen-variant"
              value={variant}
              onChange={(e) => {
                setVariant(e.target.value);
                setPreview(null);
              }}
              className={`${input} font-mono text-[11px]`}
            >
              <option value="">default</option>
              {variants.map((v) => (
                <option key={v} value={v}>
                  {v}
                </option>
              ))}
            </select>
          </label>
        )}
        {busy && <span className="micro">{busy}</span>}
        {note && (
          <span data-testid="onscreen-note" className={`text-[11px] ${stale ? "text-[var(--color-dirty)]" : "text-[var(--color-dim)]"}`}>
            {note}
          </span>
        )}
        {stale && (
          <button type="button" data-testid="onscreen-reload" className={buttonVariants({ size: "sm" })} onClick={() => void reloadSaved()}>
            reload saved values
          </button>
        )}
      </div>

      {!on && (
        <p className="text-[11px] leading-snug text-[var(--color-dim)]">
          Off: the cut is built with the citation header, the corner QR and the section footer. On, the
          footage is scaled up above one panel that carries a pip per clip, a title per clip, the source
          and date, and the clip&rsquo;s QR. Titles can be written below either way; they are only drawn
          when this is on.
        </p>
      )}

      {!on && errorList}

      {on && (
        <div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_minmax(20rem,26rem)]">
          {/* ================= the picture ================= */}
          <div className="min-w-0 space-y-2">
            {preview ? (
              <DeckFrame preview={preview} t={t} texts={texts} testid="onscreen-preview">
                {shiftBox && <div className="absolute inset-0" style={{ background: preview.background ?? "#000" }} />}
                <div
                  className="absolute inset-0"
                  data-testid="onscreen-backdrop-frame"
                  data-move={move ? move.segment : ""}
                  data-move-progress={move ? String(Math.round(move.progress * 1000) / 1000) : ""}
                  data-reframed={reframe ? "1" : "0"}
                  style={backdropStyle}
                >
                  {backdropId ? (
                    <video
                      ref={backdrop}
                      key={backdropId}
                      data-testid="onscreen-backdrop"
                      src={`/api/report/segment?project=${encodeURIComponent(project)}&clip=${encodeURIComponent(backdropId)}`}
                      muted
                      playsInline
                      preload="auto"
                      className="absolute inset-0 h-full w-full object-contain"
                    />
                  ) : (
                    <NeutralFrame
                      geometry={feed ? { ...preview.geometry, footage: feed.footage } : preview.geometry}
                      label={current ? `${current.id} · no segment built` : "footage"}
                    />
                  )}
                </div>
                {feed && <FeedOverlay key={feed.src ?? "none"} feed={feed} frame={preview.geometry} t={t} />}
                {postsWin && preview.posts && (
                  <PostsOverlay
                    key={`${postsWin.segment}:${postsWin.src ?? "none"}`}
                    win={postsWin}
                    geometry={preview.posts.geometry}
                    frame={preview.geometry}
                    t={t}
                  />
                )}
                {preview.stamp && (
                  <FeedOverlay
                    key={`stamp:${preview.stamp.src ?? "none"}`}
                    feed={preview.stamp}
                    frame={preview.geometry}
                    t={t}
                    ready="stamp:ready"
                    testid="onscreen-stamp-preview"
                    name="fact-check stamps"
                  />
                )}
              </DeckFrame>
            ) : (
              <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)]">
                {composing ? "composing the preview…" : previewError ? "" : "no preview yet"}
              </div>
            )}
            {previewError && (
              <p data-testid="onscreen-preview-error" className="text-[11px] text-[var(--color-bad)]">
                {previewError}
              </p>
            )}

            {schedule && (
              <div className="space-y-1">
                {/* One block per segment, as long as it plays: where you are
                    in the cut, and a click to the middle of any of it. */}
                <div className="flex h-4 w-full overflow-hidden rounded" data-testid="onscreen-segments">
                  {schedule.segments.map((s) => (
                    <button
                      key={s.id}
                      type="button"
                      title={`${s.id}${s.hideDeck ? " · panel hidden" : ""}${s.hold ? ` · held ${s.hold} s for its posts` : ""}`}
                      data-seg-jump={s.id}
                      data-hold={s.hold ?? 0}
                      onClick={() => setT(midOf(s))}
                      className={`relative h-full border-r border-[var(--color-ink)] ${
                        current?.id === s.id
                          ? "bg-[var(--color-sel)]"
                          : s.hideDeck
                            ? "bg-[var(--color-panel-2)]"
                            : dirtyIds.includes(s.id)
                              ? "bg-[var(--color-dirty)] opacity-70"
                              : "bg-[var(--color-line)]"
                      }`}
                      style={{ width: `${(s.duration / schedule.total) * 100}%` }}
                    >
                      {s.hold ? (
                        // The held tail: the clip's last frame, frozen for its posts.
                        <span
                          aria-hidden
                          data-testid="onscreen-segment-hold"
                          data-seg-hold={s.id}
                          className="pointer-events-none absolute inset-y-0 right-0"
                          style={{
                            width: `${(s.hold / s.duration) * 100}%`,
                            backgroundImage:
                              "repeating-linear-gradient(135deg, rgba(0,0,0,0.55) 0 2px, rgba(255,255,255,0.18) 2px 4px)",
                          }}
                        />
                      ) : null}
                    </button>
                  ))}
                </div>
                {(preview?.posts?.windows.length ?? 0) > 0 && (
                  // Where the posts are up: one mark per window, a click to
                  // the moment its last card has stacked on.
                  <div className="relative h-1.5 w-full" data-testid="onscreen-posts-windows">
                    {preview!.posts!.windows.map((w) => (
                      <button
                        key={w.segment}
                        type="button"
                        data-posts-window={w.segment}
                        title={`posts on ${w.segment}${w.error ? " · not composed" : ""}`}
                        onClick={() => setT(Math.round(((w.from + w.to) / 2) * 1000) / 1000)}
                        className={`absolute top-0 h-full rounded-sm ${
                          postsWin?.segment === w.segment ? "bg-[var(--color-sel)]" : w.error ? "bg-[var(--color-dirty)]" : "bg-[var(--color-meter)]"
                        }`}
                        style={{
                          left: `${(w.from / schedule.total) * 100}%`,
                          width: `${Math.max(0.4, ((w.to - w.from) / schedule.total) * 100)}%`,
                        }}
                      />
                    ))}
                  </div>
                )}
                <div className="flex items-center gap-2">
                  <input
                    type="range"
                    data-testid="onscreen-scrubber"
                    min={0}
                    max={schedule.total}
                    step={0.01}
                    value={t}
                    onChange={(e) => setT(Number(e.target.value))}
                    className="min-w-0 flex-1"
                  />
                  <span className="num w-28 text-right font-mono text-[11px] text-[var(--color-meter)]" data-testid="onscreen-time">
                    {clock(t)} / {clock(schedule.total)}
                  </span>
                </div>
                <div className="flex flex-wrap items-center gap-2 text-[11px] text-[var(--color-dim)]">
                  <span className="font-mono text-[var(--color-sel)]" data-testid="onscreen-current">
                    {current?.id ?? "—"}
                  </span>
                  {schedule.estimated ? (
                    <span className={badgeVariants({ variant: "open", size: "sm" })} data-testid="onscreen-estimated">
                      estimated timing
                    </span>
                  ) : (
                    <span className={badgeVariants({ variant: "meter", size: "sm" })}>built timing</span>
                  )}
                  <span>
                    {schedule.estimated
                      ? "nothing built yet, so the clock comes from the manifest; a build probes the real lengths"
                      : "the clock of the last build"}
                  </span>
                </div>
              </div>
            )}

            <div className="flex flex-wrap items-center gap-2">
              <button
                type="button"
                data-testid="onscreen-recompose"
                className={buttonVariants({ size: "sm" })}
                disabled={composing}
                onClick={() => void recompose(draftMap(), postsDraftMap())}
                title="Compose the preview again from the manifest, with the tables' unsaved rows on top"
              >
                {composing ? "recomposing…" : "recompose"}
              </button>
              <button
                type="button"
                data-testid="onscreen-true-still"
                className={buttonVariants({ size: "sm" })}
                disabled={!!busy || !schedule}
                onClick={() => void trueStill()}
                title="The render engine's own picture of this moment, of what is saved"
              >
                true still at {clock(t)}
              </button>
              <span className="mx-1 h-4 w-px bg-[var(--color-line)]" />
              <select
                value={preset ?? "final"}
                onChange={(e) => setPreset(e.target.value as "final" | "fast")}
                data-testid="onscreen-rerender-preset"
                title="Concat the segments as the last build did: crossfaded (final) or hard cuts (fast)"
                className={`${input} text-[11px]`}
              >
                <option value="final">as final (crossfades)</option>
                <option value="fast">as fast (hard cuts)</option>
              </select>
              <button
                type="button"
                data-testid="onscreen-rerender"
                className={buttonVariants({ variant: "primary", size: "sm" })}
                // Over the segments a build left, so there must have been one.
                disabled={job?.state === "running" || finalV === "none"}
                onClick={() => void rerender()}
                title={
                  typeof finalV === "number"
                    ? "Render the panel over the segments already built and re-concat. No segment is rebuilt."
                    : "Build the cut first: a re-render works over the segments a build left"
                }
              >
                re-render on-screen
              </button>
            </div>
            {dirtyIds.length > 0 && (
              <p className="text-[11px] text-[var(--color-dirty)]">
                the preview shows {dirtyIds.length} unsaved row{dirtyIds.length === 1 ? "" : "s"}; a true still and a
                re-render use what is saved
              </p>
            )}

            {stillError && (
              <p data-testid="onscreen-still-error" className="text-[11px] text-[var(--color-bad)]">
                {stillError}
              </p>
            )}
            {still && (
              <figure className="space-y-0.5">
                <img
                  src={still.url}
                  alt={`the panel at ${clock(still.at)}, as the render draws it`}
                  data-testid="onscreen-still"
                  data-still-at={still.at}
                  className="w-full rounded border border-[var(--color-line)] bg-[repeating-conic-gradient(#1e2732_0_25%,#161c24_0_50%)] bg-[length:16px_16px]"
                />
                <figcaption className="num text-[11px] text-[var(--color-dim)]">
                  true still at {clock(still.at)}
                  {still.estimated ? " · estimated timing" : ""} · what is saved, drawn by the render&rsquo;s browser
                </figcaption>
              </figure>
            )}

            {jobError && (
              <p data-testid="onscreen-job-error" className="text-[11px] text-[var(--color-bad)]">
                {jobError}
              </p>
            )}
            {job && (
              <div className="space-y-1" data-testid="onscreen-job" data-job-state={job.state}>
                <div className="flex flex-wrap items-center gap-2 text-[11px]">
                  <span className={badgeVariants({ variant: job.state === "failed" ? "blocking" : job.state === "done" ? "meter" : "on", size: "sm" })}>
                    {job.state}
                  </span>
                  <span className="text-[var(--color-dim)]">{job.steps[job.stepIndex]?.label ?? "re-render on-screen"}</span>
                  {job.error && <span className="text-[var(--color-bad)]">{job.error}</span>}
                  {job.state === "running" && (
                    <button
                      type="button"
                      data-testid="onscreen-rerender-cancel"
                      className={buttonVariants({ variant: "destructive", size: "sm" })}
                      onClick={() => void fetch(`/api/report/build?cancel=${job.id}`, { method: "POST" })}
                    >
                      cancel
                    </button>
                  )}
                </div>
                <pre className="max-h-40 overflow-auto rounded border border-[var(--color-line)] bg-[var(--color-ink)] p-2 font-mono text-[11px] text-[var(--color-dim)]">
                  {job.log.slice(-60).join("\n")}
                </pre>
              </div>
            )}
          </div>

          {/* ================= settings, then the built video ================= */}
          <div className="min-w-0 space-y-3">
            <div data-testid="onscreen-settings" className="space-y-1.5">
              <div className="flex items-center gap-2">
                <span className="micro">settings</span>
                {formDirty && <span className="text-[11px] text-[var(--color-dirty)]">unsaved</span>}
                <button
                  type="button"
                  data-testid="onscreen-settings-save"
                  className={`${buttonVariants({ variant: "primary", size: "sm" })} ml-auto`}
                  disabled={!!busy || !formDirty}
                  onClick={() => void saveSettings()}
                >
                  save settings
                </button>
                <button
                  type="button"
                  data-testid="onscreen-settings-defaults"
                  className={buttonVariants({ size: "sm" })}
                  disabled={!!busy}
                  onClick={() => {
                    setForm(formOf(doc.defaults, doc.defaults));
                    setFormDirty(true);
                  }}
                  title="Fill the form with the defaults; nothing is written until you save"
                >
                  defaults
                </button>
              </div>
              {errorList}
              <div className="grid grid-cols-[max-content_minmax(0,1fr)] items-center gap-x-2 gap-y-1 text-[11px]">
                {GROUPS.map((group) => (
                  <div key={group.name} className="contents">
                    <span className="micro pt-1">{group.name}</span>
                    <div className="flex flex-wrap items-center gap-x-2 gap-y-1 pt-1" data-setting-group={group.name}>
                      {group.fields.map((f) => {
                        // Under a switch that is off: nothing to set, so nothing shown.
                        if (f.when && !form[f.when]) return null;
                        const v = form[f.key];
                        const set = (nv: string | boolean) => {
                          setForm((prev) => ({ ...prev, [f.key]: nv }));
                          setFormDirty(true);
                        };
                        return (
                          <label key={f.key} className="flex items-center gap-1 text-[var(--color-dim)]" title={f.hint}>
                            {f.label}
                            {f.kind === "bool" ? (
                              <input
                                type="checkbox"
                                data-testid={`onscreen-setting-${f.key}`}
                                checked={!!v}
                                onChange={(e) => set(e.target.checked)}
                              />
                            ) : f.kind === "select" ? (
                              <select
                                data-testid={`onscreen-setting-${f.key}`}
                                value={String(v ?? "")}
                                onChange={(e) => set(e.target.value)}
                                className={`${input} text-[11px]`}
                              >
                                {f.options.map((o) => (
                                  <option key={o} value={o}>
                                    {o}
                                  </option>
                                ))}
                              </select>
                            ) : (
                              <input
                                type="text"
                                inputMode={f.kind === "parts" ? "text" : "decimal"}
                                data-testid={`onscreen-setting-${f.key}`}
                                value={String(v ?? "")}
                                onChange={(e) => set(e.target.value)}
                                onKeyDown={(e) => {
                                  if (e.key === "Enter") void saveSettings();
                                }}
                                className={`${input} num font-mono text-[11px] ${f.kind === "parts" ? "w-36" : "w-14"}`}
                              />
                            )}
                          </label>
                        );
                      })}
                    </div>
                  </div>
                ))}
              </div>
              <p className="text-[11px] leading-snug text-[var(--color-dim)]">
                Only what differs from the defaults is written. A refused value is named above in the
                words the build would use; nothing is written until all of it is accepted.
              </p>
            </div>

            <div className="space-y-1">
              <span className="micro">the built video</span>
              {typeof finalV === "number" ? (
                <TimedVideo
                  target={{ project }}
                  testId="onscreen-final-video"
                  file={finalRel ?? `out/${variant || "sourced"}/final.mp4`}
                  src={`/api/report/video?${q}&kind=final&v=${finalV}`}
                  resolveProject={project}
                />
              ) : (
                <p data-testid="onscreen-no-final" className="text-[11px] text-[var(--color-dim)]">
                  {finalV === null ? "looking…" : "this cut has not been built yet"}
                </p>
              )}
            </div>
          </div>
        </div>
      )}

      {/* ================= the words =================
          Open when the panel is on. Folded when it is off: a report that
          never uses the panel should not carry a nineteen-row form, and one
          that will can have its titles written before the switch. */}
      {on ? (
        <>
          {words}
          {postsBlock}
        </>
      ) : (
        <details data-testid="onscreen-words-folded">
          <summary className="cursor-pointer text-[11px] text-[var(--color-dim)]">
            titles and subtitles — {rows.length} entries
            {rows.some((r) => r.onscreen) ? ` · ${rows.filter((r) => r.onscreen).length} written` : ""}
          </summary>
          <div className="mt-1.5">{words}</div>
        </details>
      )}
      {!on && postsBlock && (
        <details data-testid="onscreen-posts-folded">
          <summary className="cursor-pointer text-[11px] text-[var(--color-dim)]">
            posts — {posts.length}; drawn only when the panel is on
          </summary>
          <div className="mt-1.5">{postsBlock}</div>
        </details>
      )}

      {/* ---- the lists: teasers, posts, fact-check labels ---- */}
      <details data-testid="structure-folded">
        <summary className="cursor-pointer text-[11px] text-[var(--color-dim)]">teasers, posts and fact-check labels</summary>
        <div className="mt-1.5">
          <StructureEditors project={project} />
        </div>
      </details>
    </section>
  );
}