@officexapp/vidfarm-devcli 0.21.58 → 0.21.60

package/dist/src/devcli/clipper-panel.js

@@ -0,0 +1,1828 @@
+// THE CLIPPER DASHBOARD — `vidfarm dashboard` (aka `vidfarm panel`), the gigworker's
+// local page over a clipper mission folder.
+//
+// The terminal already answers "what is waiting on me" (`clipper-run next` /
+// `review` / REVIEW_QUEUE.md). What it CANNOT do is play a video, and the cut
+// gate is exactly "watch this before it is sent". So the gigworker reads a
+// path, opens the file by hand, goes back to the terminal, and types a verb —
+// once per task. This page collapses that into scroll, watch, click.
+//
+// It also joins the two halves of a long-horizon mission that no other surface
+// can see at once: the LOCAL disk state (which agent is mid-cut, where the
+// local render sits, which raws landed) and the CLOUD outcome (proof id,
+// awaiting review, paid). Cloud alone never knows the first; disk alone never
+// knows the second.
+//
+// ONE WRITER. This server never writes state.json itself — every action calls
+// the same exported transition the CLI verb calls (clipper-run.ts § the
+// transitions). Two writers would let the terminal and the page disagree about
+// which gate is open, and that gate is the rail that stops an unreviewed cut
+// from being submitted.
+//
+// SECURITY. The panel can approve work that is then submitted for money, so a
+// write must not be reachable by any random page the gigworker has open in the
+// same browser. Three rules, all enforced here:
+//   1. bind 127.0.0.1 only (never 0.0.0.0),
+//   2. a per-run session token on EVERY request (query `t` or header
+//      `x-vidfarm-panel`) — a cross-origin tab cannot read it, because no CORS
+//      header is ever sent, and
+//   3. writes additionally require an Origin that is this server.
+//
+// Backend-free (Node built-ins + clipper-run.js) so it ships in the public
+// cloud-only CLI.
+import { createServer } from "node:http";
+import { createReadStream, existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { randomBytes, timingSafeEqual } from "node:crypto";
+import { spawn } from "node:child_process";
+import path from "node:path";
+import { DEFAULT_RUN_MODE, MODE_BLURB, MODE_GATES, RUN_MODES, STAGES, addTaskNote, approveGate, dropTask, isUsableTaskId, listTaskStates, nextAction, normalizeRunMode, pickTemplate, readLedger, readMissionMode, readTaskState, reopenGate, requestChanges, setRunMode, taskFolder, unreadableTasks } from "./clipper-run.js";
+import { readStoredAuth } from "./auth-store.js";
+// ── auth ────────────────────────────────────────────────────────────────────
+export function mintPanelToken() {
+    return randomBytes(24).toString("hex");
+}
+function presentedToken(req, url) {
+    const header = req.headers["x-vidfarm-panel"];
+    if (typeof header === "string" && header)
+        return header;
+    return url.searchParams.get("t");
+}
+/** Constant-time compare. Length is public (both are hex of known length). */
+function tokenMatches(a, b) {
+    if (!a)
+        return false;
+    // Compare BYTE lengths: timingSafeEqual throws on a mismatch, and a token of
+    // 48 multi-byte characters passes a UTF-16 length check.
+    const given = Buffer.from(a, "utf8");
+    const want = Buffer.from(b, "utf8");
+    if (given.length !== want.length)
+        return false;
+    return timingSafeEqual(given, want);
+}
+/**
+ * A write must come from this page, not from some other tab that guessed the
+ * port. A browser always sends Origin on a cross-origin POST, so an Origin that
+ * is absent (curl, the CLI itself) or is us is fine; anything else is not.
+ */
+/**
+ * The request must be addressed to loopback. `new URL(req.url, …)` throws the
+ * Host header away, so a DNS-rebound name pointing at 127.0.0.1 would otherwise
+ * be same-origin to an attacker's page. The token already stops that, but a
+ * loopback-only tool has no reason to answer to a name it does not own.
+ */
+function hostAllowed(req, port) {
+    const host = req.headers.host;
+    if (!host)
+        return false;
+    const name = host.replace(/:\d+$/, "").replace(/^\[|\]$/g, "");
+    return (name === "127.0.0.1" || name === "localhost" || name === "::1")
+        && (!/:\d+$/.test(host) || host.endsWith(`:${port}`));
+}
+function originAllowed(req, port) {
+    const origin = req.headers.origin;
+    if (!origin)
+        return true;
+    return origin === `http://127.0.0.1:${port}` || origin === `http://localhost:${port}`;
+}
+// A gate answered on the strength of a filename is a gate answered blind, so
+// the brief and the plan are READ AND SENT, not linked. These caps keep a
+// runaway file from making the 2s poll heavy; the path stays on screen for the
+// rare case where somebody really does need the whole thing.
+const BRIEF_CHAR_LIMIT = 8_000;
+const PLAN_CHAR_LIMIT = 12_000;
+const RAWS_LIST_LIMIT = 40;
+function readTextCapped(file, limit) {
+    if (!file || !fileExists(file))
+        return null;
+    try {
+        const text = readFileSync(file, "utf8");
+        return text.length > limit ? `${text.slice(0, limit)}\n\n… truncated — the whole file is at ${file}` : text;
+    }
+    catch {
+        return null;
+    }
+}
+/** A file that is present AND has bytes. A 0-byte render is not a video. */
+function fileExists(candidate) {
+    if (!candidate)
+        return false;
+    try {
+        const stat = statSync(candidate);
+        return stat.isFile() && stat.size > 0;
+    }
+    catch {
+        return false;
+    }
+}
+function listRaws(dir) {
+    if (!dir || !existsSync(dir))
+        return [];
+    try {
+        return readdirSync(dir).filter((name) => !name.startsWith("."));
+    }
+    catch {
+        return [];
+    }
+}
+function toView(root, state) {
+    const raws = listRaws(state.raws_dir);
+    return {
+        ...state,
+        next: nextAction(state),
+        has_cut: fileExists(state.cut_path),
+        has_clean_master: fileExists(state.clean_master),
+        raws_count: raws.length,
+        raws_files: raws.slice(0, RAWS_LIST_LIMIT),
+        plan_exists: fileExists(state.plan_path),
+        brief: readTextCapped(path.join(taskFolder(root, state.task_id), "brief.md"), BRIEF_CHAR_LIMIT),
+        plan_text: readTextCapped(state.plan_path, PLAN_CHAR_LIMIT)
+    };
+}
+/**
+ * The money question, answered once and correctly. Two bugs lived in the page's
+ * version: it summed only the last 100 ledger rows (so a long mission
+ * under-reported), and it summed every `submitted` row, so one task that was
+ * submitted twice was counted twice. Latest row per task wins.
+ */
+function ledgerSummary(ledger) {
+    const latest = new Map();
+    for (const row of ledger) {
+        const id = typeof row.task_id === "string" ? row.task_id : null;
+        if (id)
+            latest.set(id, row);
+    }
+    let awaiting = 0;
+    let sent = 0;
+    let dropped = 0;
+    for (const row of latest.values()) {
+        if (row.status === "submitted") {
+            sent += 1;
+            awaiting += Number(row.locked_price) || 0;
+        }
+        else if (row.status === "discarded") {
+            dropped += 1;
+        }
+    }
+    return { awaiting, sent, dropped, rows: latest.size };
+}
+function buildState(root) {
+    // Deleted out from under us. "Empty" and "gone" must not look the same: one
+    // says claim some work, the other says your mission folder is missing.
+    if (!existsSync(root)) {
+        return {
+            ok: true,
+            root,
+            missing: true,
+            run_mode: DEFAULT_RUN_MODE,
+            run_mode_is_set: false,
+            modes: RUN_MODES.map((m) => ({ mode: m, gates: MODE_GATES[m], blurb: MODE_BLURB[m] })),
+            stages: STAGES,
+            enrichment: false,
+            tasks: [],
+            summary: { awaiting: 0, sent: 0, dropped: 0, rows: 0 },
+            ledger: [],
+            unreadable: [],
+            mode_unreadable: null,
+            generated_at: new Date().toISOString()
+        };
+    }
+    // A task whose RECORDED id is unsafe (hand-edited state.json, or written
+    // before ids were validated) must not be rendered — and must not take the
+    // whole panel down with it either, which is what throwing here did. Quarantine
+    // it and say so, the same way an unparseable file is reported.
+    const quarantined = [];
+    const tasks = [];
+    for (const state of listTaskStates(root)) {
+        if (!isUsableTaskId(state.task_id)) {
+            quarantined.push({
+                folder: String(state.task_id).slice(0, 60),
+                why: "its recorded task_id is not a usable id, so it is not shown"
+            });
+            continue;
+        }
+        try {
+            tasks.push(toView(root, state));
+        }
+        catch (error) {
+            quarantined.push({ folder: state.task_id, why: error instanceof Error ? error.message : String(error) });
+        }
+    }
+    const mode = readMissionMode(root);
+    const ledger = readLedger(root);
+    return {
+        ok: true,
+        root,
+        run_mode: mode.mode,
+        run_mode_is_set: mode.isSet,
+        modes: RUN_MODES.map((m) => ({ mode: m, gates: MODE_GATES[m], blurb: MODE_BLURB[m] })),
+        stages: STAGES,
+        // Whether template previews can be filled in at all. The page says so
+        // rather than silently showing bare ids and looking broken.
+        enrichment: Boolean(readStoredAuth()?.apiKey),
+        missing: false,
+        tasks,
+        // Named so the page cannot silently show a stale count: this is over EVERY
+        // row, while `ledger` below is only the recent slice used for display.
+        summary: ledgerSummary(ledger),
+        ledger: ledger.slice(-100).reverse(),
+        // Task folders whose state.json will not parse. The page says so out loud —
+        // a task missing from a review queue must never be silent.
+        unreadable: Array.from(unreadableTasks.entries())
+            .map(([folder, why]) => ({ folder, why }))
+            .concat(quarantined),
+        mode_unreadable: mode.unreadable ?? null,
+        generated_at: new Date().toISOString()
+    };
+}
+const templateCache = new Map();
+const TEMPLATE_LOOKUP_TIMEOUT_MS = 12_000;
+function previewKind(url) {
+    if (!url)
+        return null;
+    const clean = url.split("?")[0].toLowerCase();
+    if (/\.(mp4|webm|mov|m4v)$/.test(clean))
+        return "video";
+    if (/\.(jpg|jpeg|png|webp|gif|avif)$/.test(clean))
+        return "image";
+    // Unknown extension: a still is the safe guess — an <img> that fails is a
+    // broken icon, while a <video> that fails is a dead black box.
+    return "image";
+}
+async function lookupTemplate(templateId) {
+    const cached = templateCache.get(templateId);
+    if (cached)
+        return cached;
+    const bare = {
+        template_id: templateId,
+        resolved: false,
+        reason: null,
+        title: null,
+        preview_url: null,
+        preview_kind: null,
+        duration_seconds: null,
+        source_type: null,
+        summary: null,
+        editor_url: null
+    };
+    const auth = readStoredAuth();
+    if (!auth?.apiKey)
+        return { ...bare, reason: "not logged in" };
+    const host = (auth.host ?? "https://vidfarm.cc").replace(/\/+$/, "");
+    try {
+        const res = await fetch(`${host}/api/v1/templates/${encodeURIComponent(templateId)}`, {
+            headers: { "vidfarm-api-key": auth.apiKey, accept: "application/json" },
+            signal: AbortSignal.timeout(TEMPLATE_LOOKUP_TIMEOUT_MS)
+        });
+        if (!res.ok)
+            return { ...bare, reason: `the catalog answered ${res.status}` };
+        const json = await res.json();
+        const preview = typeof json.previewUrl === "string" && json.previewUrl ? json.previewUrl : null;
+        const card = {
+            template_id: templateId,
+            resolved: true,
+            reason: null,
+            title: typeof json.title === "string" ? json.title : null,
+            preview_url: preview,
+            preview_kind: previewKind(preview),
+            duration_seconds: typeof json.durationSeconds === "number" ? json.durationSeconds : null,
+            source_type: typeof json.sourceType === "string" ? json.sourceType : null,
+            summary: typeof json.summary === "string" && json.summary
+                ? json.summary
+                : (typeof json.viralDna === "string" ? json.viralDna : null),
+            editor_url: `${host}/template/${encodeURIComponent(templateId)}`
+        };
+        // Only a real answer is worth caching — a transient failure must not pin an
+        // empty card for the life of the process.
+        if (card.preview_url || card.title) {
+            // Bounded: one entry per template the reviewer has actually seen, and an
+            // FIFO trim so a long mission cannot grow this without limit.
+            if (templateCache.size > 500)
+                templateCache.delete(templateCache.keys().next().value);
+            templateCache.set(templateId, card);
+        }
+        return card;
+    }
+    catch (error) {
+        return { ...bare, reason: error instanceof Error ? error.message : "the lookup failed" };
+    }
+}
+// ── media streaming (the whole point of a page) ─────────────────────────────
+const VIDEO_MIME = {
+    ".mp4": "video/mp4",
+    ".webm": "video/webm",
+    ".mov": "video/quicktime",
+    ".m4v": "video/x-m4v"
+};
+/**
+ * Serve a task's recorded video WITH byte-range support. Without 206 the
+ * browser can play from the start but cannot seek, and a reviewer who cannot
+ * scrub back to second 3 is not really reviewing the hook.
+ *
+ * The path comes from state.json, never from the URL, so there is nothing to
+ * traverse: the request only names a task id and "cut" | "clean".
+ */
+function streamVideo(req, res, filePath) {
+    const size = statSync(filePath).size;
+    if (size === 0) {
+        // A recorded cut that is zero bytes is a failed render, not a video. Say so
+        // rather than serving an empty 200 the player shows as a black frame.
+        res.statusCode = 409;
+        res.setHeader("content-type", "text/plain; charset=utf-8");
+        res.end("That file is empty (0 bytes) — the render produced nothing.\n");
+        return;
+    }
+    const type = VIDEO_MIME[path.extname(filePath).toLowerCase()] ?? "video/mp4";
+    const range = req.headers.range;
+    // Both halves empty ("bytes=-") is malformed; it used to be served as a 206
+    // covering the whole file.
+    const match = typeof range === "string" ? range.match(/^bytes=(\d*)-(\d*)$/) : null;
+    if (match && !match[1] && !match[2]) {
+        res.statusCode = 416;
+        res.setHeader("content-range", `bytes */${size}`);
+        res.end();
+        return;
+    }
+    let start = 0;
+    let end = size - 1;
+    if (match) {
+        const rawStart = match[1];
+        const rawEnd = match[2];
+        if (rawStart) {
+            start = Number(rawStart);
+            if (rawEnd)
+                end = Number(rawEnd);
+        }
+        else if (rawEnd) {
+            // A suffix range ("last N bytes") — what some players ask for first.
+            start = Math.max(0, size - Number(rawEnd));
+        }
+        if (!Number.isFinite(start) || !Number.isFinite(end) || start > end || start >= size) {
+            res.statusCode = 416;
+            res.setHeader("content-range", `bytes */${size}`);
+            res.end();
+            return;
+        }
+        end = Math.min(end, size - 1);
+        res.statusCode = 206;
+        res.setHeader("content-range", `bytes ${start}-${end}/${size}`);
+    }
+    else {
+        res.statusCode = 200;
+    }
+    res.setHeader("content-type", type);
+    res.setHeader("accept-ranges", "bytes");
+    res.setHeader("content-length", String(end - start + 1));
+    res.setHeader("cache-control", "no-store");
+    if (req.method === "HEAD") {
+        res.end();
+        return;
+    }
+    const stream = createReadStream(filePath, { start, end });
+    // A disk read error must fail THIS response, not take the panel down.
+    stream.on("error", () => res.destroy());
+    res.on("close", () => stream.destroy());
+    stream.pipe(res);
+}
+/** Reveal a file or folder in the OS file manager. */
+function revealInFileManager(target, isFile) {
+    // Reveal, do not OPEN. `open <file>` launches the default handler, which for
+    // a recorded cut path means playing it in another app — and for anything else
+    // means running whatever is registered for that extension.
+    const command = process.platform === "darwin"
+        ? { bin: "open", args: isFile ? ["-R", target] : [target] }
+        : process.platform === "win32"
+            ? { bin: "explorer.exe", args: isFile ? [`/select,${target}`] : [target] }
+            : { bin: "xdg-open", args: [isFile ? path.dirname(target) : target] };
+    // No shell: the path comes from state.json, and a shell would make a task id
+    // with a quote in it interesting.
+    const child = spawn(command.bin, command.args, { stdio: "ignore", detached: true });
+    child.on("error", () => { });
+    child.unref();
+}
+/**
+ * Every button on the page lands here, and every branch calls the SAME exported
+ * transition the matching CLI verb calls. Adding a branch that writes state
+ * directly would break the single-writer rule this file exists to keep.
+ */
+function runAction(root, body) {
+    if (!existsSync(root)) {
+        throw new Error(`The mission folder ${root} is gone. Nothing can be written to it — restart the panel once it is back.`);
+    }
+    const action = (body?.action ?? "").trim();
+    const taskId = (body?.task_id ?? "").trim();
+    switch (action) {
+        case "approve": {
+            const { state, approved } = approveGate(root, taskId, body.note ?? null);
+            return { ok: true, action, approved, task: toView(root, state) };
+        }
+        case "changes": {
+            const { state, from } = requestChanges(root, taskId, body.note ?? "");
+            return { ok: true, action, from, task: toView(root, state) };
+        }
+        case "drop": {
+            const { state, reason } = dropTask(root, taskId, body.reason ?? null);
+            return { ok: true, action, reason, task: toView(root, state) };
+        }
+        case "undo": {
+            const { state, stage } = reopenGate(root, taskId);
+            return { ok: true, action, reopened: stage, task: toView(root, state) };
+        }
+        case "pick": {
+            const { state } = pickTemplate(root, taskId, body.template_id ?? null, "human");
+            return { ok: true, action, task: toView(root, state) };
+        }
+        case "note": {
+            const { state } = addTaskNote(root, taskId, body.note ?? "");
+            return { ok: true, action, task: toView(root, state) };
+        }
+        case "mode": {
+            const mode = normalizeRunMode(body.mode);
+            if (!mode)
+                throw new Error(`Unknown run mode "${body.mode}". Choose one of: ${RUN_MODES.join(", ")}.`);
+            const saved = setRunMode(root, mode);
+            return { ok: true, action, run_mode: saved.mode };
+        }
+        case "reveal": {
+            // Open a folder the task owns. Only paths this task recorded are eligible
+            // — the request names a task and a slot, never a path.
+            const state = readTaskState(root, taskId);
+            const slot = body.target ?? "raws";
+            const target = slot === "cut"
+                ? state.cut_path
+                : slot === "plan"
+                    ? state.plan_path
+                    : state.raws_dir;
+            if (!target || !existsSync(target))
+                throw new Error(`Nothing recorded at "${slot}" for ${taskId}.`);
+            revealInFileManager(target, slot !== "raws");
+            return { ok: true, action, revealed: target };
+        }
+        default:
+            throw new Error(`Unknown action "${action}".`);
+    }
+}
+// ── the page ────────────────────────────────────────────────────────────────
+// One self-contained document: no CDN, no bundle, no build step. The client JS
+// below deliberately avoids template literals so this file's own template
+// literal stays readable.
+const PAGE_HTML = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Clipper dashboard | VidFarm</title>
+<style>
+  :root{
+    --bg:#0d0e11; --rail:#131519; --panel:#181b21; --panel-2:#1e222a; --line:#282d37;
+    --ink:#f3f4f6; --muted:#8d94a1; --dim:#5e6572;
+    --gold:#ffc738; --gold-ink:#0d0e11; --green:#3ddc84; --red:#ff6b6b; --blue:#7fb0ff;
+  }
+  *{box-sizing:border-box}
+  html,body{height:100%}
+  body{margin:0;background:var(--bg);color:var(--ink);overflow:hidden;
+    font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif}
+  a{color:var(--blue);text-decoration:none}
+  a:hover{text-decoration:underline}
+  code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
+  button{font:inherit;color:inherit;background:var(--panel-2);border:1px solid var(--line);
+    border-radius:9px;padding:8px 14px;cursor:pointer;font-weight:550}
+  button:hover:not(:disabled){border-color:#3b4250}
+  button:disabled{opacity:.4;cursor:not-allowed}
+  select{font:inherit;color:inherit;background:var(--panel-2);border:1px solid var(--line);
+    border-radius:8px;padding:6px 9px;font-size:12px;width:100%}
+  kbd{background:#242933;border:1px solid var(--line);border-radius:4px;padding:0 4px;
+    font-family:ui-monospace,Menlo,monospace;font-size:10px}
+
+  .app{display:grid;grid-template-columns:252px 1fr;height:100vh}
+  .rail{background:var(--rail);border-right:1px solid var(--line);display:flex;
+    flex-direction:column;min-height:0}
+  .brand{padding:15px 16px 12px;border-bottom:1px solid var(--line)}
+  .brand .t{font-size:13px;font-weight:650;display:flex;align-items:center;gap:8px}
+  .live{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
+  .live.stale{background:var(--red)}
+  .brand .p{font-size:11px;color:var(--dim);margin-top:5px;word-break:break-all;line-height:1.4}
+  nav{padding:9px 9px 4px;display:flex;flex-direction:column;gap:2px}
+  nav button{display:flex;justify-content:space-between;align-items:center;background:none;
+    border:none;border-radius:8px;padding:8px 10px;font-size:13px;color:var(--muted);font-weight:500}
+  nav button:hover{background:#1c1f26;color:var(--ink)}
+  nav button.on{background:var(--panel-2);color:var(--ink);font-weight:600}
+  nav button b{font-size:11px;background:#242933;border-radius:999px;padding:1px 8px;color:var(--muted);font-weight:600}
+  nav button.on b{background:#323947;color:var(--ink)}
+  nav button.hot b{background:var(--gold);color:var(--gold-ink)}
+  .railq{flex:1;overflow-y:auto;padding:6px 9px 12px;min-height:0}
+  .railq .h{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);
+    padding:10px 10px 6px;font-weight:600}
+  .qi{display:flex;gap:9px;align-items:center;padding:7px 9px;border-radius:9px;cursor:pointer;
+    border:1px solid transparent;width:100%;text-align:left;background:none}
+  .qi:hover{background:#1c1f26}
+  .qi.on{background:var(--panel-2);border-color:var(--line)}
+  .qi .n{width:20px;height:20px;border-radius:6px;background:#242933;color:var(--muted);
+    font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
+  .qi.on .n{background:var(--gold);color:var(--gold-ink)}
+  .qi .tx{min-width:0;flex:1}
+  .qi .tx b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;
+    text-overflow:ellipsis}
+  .qi .tx span{display:block;font-size:11px;color:var(--dim)}
+  .railfoot{border-top:1px solid var(--line);padding:12px 14px;font-size:11px;color:var(--dim)}
+  .railfoot .money{color:var(--muted);margin-bottom:9px;line-height:1.5}
+  .railfoot .money b{color:var(--ink)}
+  .railfoot .warn{color:var(--gold);margin-bottom:9px;line-height:1.45}
+
+  .stage{min-width:0;min-height:0;display:flex;flex-direction:column}
+  .topbar{display:none}
+  .sh{display:flex;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--line);
+    flex:none;flex-wrap:wrap}
+  .sh h2{margin:0;font-size:14px;font-weight:650;max-width:46vw;overflow:hidden;
+    text-overflow:ellipsis;white-space:nowrap}
+  .sh .sub{color:var(--dim);font-size:12px}
+  .sh button.back{padding:6px 13px;font-size:12.5px}
+  .sp{flex:1}
+  .tag{font-size:11px;border-radius:6px;padding:2px 8px;border:1px solid var(--line);
+    color:var(--muted);font-weight:500;white-space:nowrap}
+  .tag.gold{border-color:#7a5f17;color:var(--gold)}
+  .tag.green{border-color:#1e5c3a;color:var(--green)}
+  .tag.red{border-color:#6b2626;color:var(--red)}
+  .body{flex:1;min-height:0;overflow:auto;padding:20px}
+  .err{background:#2a1414;border:1px solid #6b2626;color:#ffb4b4;border-radius:9px;
+    padding:10px 14px;margin:12px 20px 0;font-size:13px;display:none;flex:none;
+    align-items:flex-start;gap:12px}
+  .err.on{display:flex}
+  .err .msg{flex:1}
+  .err button{background:none;border:none;color:#ffb4b4;padding:0 4px;font-size:16px;line-height:1}
+
+  .rv{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 430px}
+  .screen{background:#000;display:flex;align-items:center;justify-content:center;
+    min-width:0;min-height:0;padding:18px;position:relative;flex-direction:column;gap:12px}
+  .screen video{max-width:100%;max-height:100%;border-radius:8px;display:block;background:#000}
+  .screen .nofile{color:var(--dim);font-size:13px;text-align:center;max-width:360px;line-height:1.6}
+  .screen .nofile b{color:var(--red)}
+  .mediatabs{position:absolute;top:14px;right:16px;display:flex;gap:6px;z-index:2}
+  .mediatabs button{padding:5px 11px;font-size:11.5px;background:#000000c4}
+  .mediatabs button.on{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
+  /* min-width:0 is load-bearing: without it this column's min-content width is
+     set by the longest unbreakable path, which pushed the action buttons off
+     the screen entirely at 1024px and below. */
+  .side{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;
+    min-width:0;background:var(--panel-2)}
+  .pane{flex:1;overflow-y:auto;padding:15px 16px 22px;min-height:0}
+  .acts{flex:none;padding:13px 16px;border-top:1px solid var(--line);
+    display:flex;flex-direction:column;gap:8px}
+  .acts .rowb{display:flex;gap:8px}
+  .acts .rowb button{flex:1}
+  button.go{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
+  button.go:hover:not(:disabled){background:#ffd465}
+  button.warn:hover:not(:disabled){border-color:#6b2626;color:var(--red)}
+  .keys{font-size:10.5px;color:var(--dim);text-align:center;letter-spacing:.02em;line-height:1.7}
+
+  .qhead{font-size:12px;color:var(--muted);margin:0 0 11px;line-height:1.5}
+  .crit{display:flex;flex-direction:column;gap:2px;margin:0 0 4px}
+  .crit label{display:flex;gap:10px;align-items:flex-start;padding:8px 9px;border-radius:8px;
+    cursor:pointer;font-size:13px;line-height:1.45}
+  .crit label:hover{background:#242933}
+  .crit input{margin:3px 0 0;accent-color:var(--gold);width:15px;height:15px;flex:none}
+  .crit label.ok{color:var(--green)}
+  .note{font-size:11.5px;color:var(--dim);margin:10px 0 0;line-height:1.5}
+  .note.alert{color:var(--gold)}
+
+  .doc{font-size:13px;line-height:1.62;color:#dde0e6}
+  .doc h4{margin:0 0 8px;font-size:13.5px;font-weight:650;color:var(--ink)}
+  .doc h5{margin:16px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
+    color:var(--muted);font-weight:650}
+  .doc p{margin:0 0 11px}
+  .doc ul{margin:0 0 11px;padding-left:19px}
+  .doc li{margin:0 0 4px}
+  .doc blockquote{margin:0 0 12px;padding:9px 13px;background:#13161b;border-left:2px solid var(--gold);
+    border-radius:0 8px 8px 0;color:#e8eaee}
+  .doc strong{color:#fff}
+  .doc code{background:#13161b;border-radius:4px;padding:1px 5px;font-size:12px}
+  .doc .empty{color:var(--dim);font-style:italic}
+  .paths{margin:14px 0 0;font-size:10.5px;color:var(--dim);word-break:break-all;line-height:1.5}
+  .paper{max-width:660px;max-height:100%;overflow:auto;padding:24px 26px;background:var(--panel);
+    border-radius:12px}
+  .sect{margin:20px 0 0;border-top:1px solid var(--line);padding-top:15px}
+  .sect h5{margin:0 0 9px;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
+    color:var(--muted);font-weight:650}
+  details.sect > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px}
+  details.sect > summary::-webkit-details-marker{display:none}
+  details.sect > summary h5{margin:0}
+  details.sect > summary::after{content:"show";font-size:10px;color:var(--dim);
+    border:1px solid var(--line);border-radius:5px;padding:1px 6px}
+  details.sect[open] > summary::after{content:"hide"}
+  details.sect > summary + *{margin-top:11px}
+
+  .cands{display:grid;gap:16px;padding:20px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
+    align-content:start;width:100%}
+  .screen.candwrap{align-items:flex-start;justify-content:flex-start;overflow:auto;
+    background:var(--bg);padding:0}
+  .cand{background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;
+    display:flex;flex-direction:column}
+  .cand .shot{aspect-ratio:9/16;max-height:50vh;background:#000;position:relative}
+  .cand .shot video,.cand .shot img{width:100%;height:100%;object-fit:contain;display:block}
+  .cand .shot .none{display:block;padding:16px;color:var(--dim);font-size:11px;text-align:center;
+    line-height:1.6}
+  .cand .k{position:absolute;top:9px;left:9px;background:#000000b8;border-radius:6px;
+    padding:2px 7px;font-size:10px;font-weight:700;letter-spacing:.04em;z-index:2}
+  .cand .b{padding:12px 13px;flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
+  .cand .nm{font-size:13px;font-weight:650;line-height:1.35;overflow:hidden;text-overflow:ellipsis}
+  .cand .wy{font-size:12px;color:var(--gold);line-height:1.5}
+  .cand .sb{font-size:11px;color:var(--dim);line-height:1.5;overflow-wrap:anywhere}
+  .cand .f{padding:0 13px 13px}
+  .cand .f button{width:100%}
+
+  .lcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 17px;
+    margin:0 0 11px}
+  .lcard .top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
+  .lcard .top b{font-size:13.5px}
+  .lcard .meta{color:var(--dim);font-size:12px;margin:7px 0 0;overflow-wrap:anywhere}
+  .lcard .nxt{margin:12px 0 0;padding:10px 13px;background:var(--panel-2);border-radius:9px;
+    font-size:12px;color:var(--muted);white-space:pre-wrap;line-height:1.6}
+  .lcard .nxt b{color:var(--ink)}
+  .pipe{display:flex;gap:3px;margin:11px 0 0;flex-wrap:wrap}
+  .step{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);
+    border:1px solid var(--line);border-radius:5px;padding:2px 6px}
+  .step.done{color:var(--muted);border-color:#333a45}
+  .step.at{color:var(--gold-ink);background:var(--gold);border-color:var(--gold);font-weight:700}
+  table{width:100%;border-collapse:collapse;font-size:13px}
+  th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
+    color:var(--dim);font-weight:650;padding:0 12px 9px 0}
+  td{padding:10px 12px 10px 0;border-top:1px solid var(--line);vertical-align:top}
+  tr.clickrow{cursor:pointer}
+  tr.clickrow:hover td{background:#1c1f26}
+  .thumbcell{width:64px}
+  .thumbcell video{width:56px;height:84px;object-fit:cover;border-radius:6px;background:#000;display:block}
+  .thumbcell .nothumb{width:56px;height:84px;border-radius:6px;border:1px dashed var(--line);
+    display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--dim);text-align:center}
+  .files{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 0}
+  .files span{font-size:11px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;
+    padding:3px 8px;font-family:ui-monospace,Menlo,monospace;color:var(--muted)}
+  .pathrow{display:flex;gap:8px;align-items:center;margin:11px 0 0}
+  .pathrow{flex-wrap:wrap}
+  .pathrow code{flex:1 1 100%;min-width:0;width:0;font-size:11px;background:#13161b;border-radius:6px;
+    padding:6px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
+  .pathrow button{padding:6px 11px;font-size:11.5px;flex:none}
+
+  .clear{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
+    gap:11px;text-align:center;padding:40px}
+  .clear .big{font-size:19px;font-weight:650}
+  .clear .sm{color:var(--dim);font-size:13px;max-width:470px;line-height:1.7}
+  .clear code{background:var(--panel-2);border-radius:5px;padding:2px 7px;font-size:12px}
+  .clear .row{display:flex;gap:8px;margin-top:6px}
+
+  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:40;
+    background:#20242c;border:1px solid var(--line);border-radius:11px;padding:11px 13px 11px 16px;
+    display:none;align-items:center;gap:14px;box-shadow:0 10px 40px -12px #000c;font-size:13px}
+  .toast.on{display:flex}
+  .toast b{font-weight:600}
+  .toast button{padding:6px 13px;font-size:12px}
+
+  dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;
+    padding:20px;max-width:470px;width:92%}
+  dialog::backdrop{background:#000a}
+  dialog h4{margin:0 0 4px;font-size:14px}
+  dialog p{margin:0 0 12px;color:var(--muted);font-size:12px;line-height:1.6}
+  textarea{width:100%;min-height:104px;background:var(--panel-2);border:1px solid var(--line);
+    border-radius:9px;padding:11px;resize:vertical;font:inherit;color:inherit;font-size:13px}
+  .dlgrow{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
+  .dlgerr{color:var(--red);font-size:12px;margin:8px 0 0;display:none}
+  .dlgerr.on{display:block}
+
+  /* Below the rail's width the rail hides, so the view switcher moves to a top
+     bar — otherwise there is NO navigation at all. The stage becomes one
+     scrolling column instead of two crushed ones. */
+  @media (max-width:1080px){
+    .app{grid-template-columns:1fr}
+    .rail{display:none}
+    .topbar{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);
+      overflow-x:auto;flex:none;align-items:center}
+    .topbar button{padding:6px 12px;font-size:12.5px;white-space:nowrap;border-radius:8px}
+    .topbar button.on{background:var(--panel-2);border-color:#3b4250;color:var(--ink)}
+    .topbar .money{margin-left:auto;font-size:11px;color:var(--dim);white-space:nowrap}
+    .rv{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;overflow-y:auto;min-height:0}
+    .screen{min-height:44vh;padding:12px}
+    .screen video{max-height:44vh}
+    .side{border-left:none;border-top:1px solid var(--line);min-height:0}
+    .pane{overflow:visible;flex:none}
+    .acts{position:sticky;bottom:0;background:var(--panel-2)}
+    .sh h2{max-width:100%}
+  }
+</style>
+</head>
+<body>
+<div class="app">
+  <aside class="rail">
+    <div class="brand">
+      <div class="t"><span class="live" id="live"></span>Clipper dashboard</div>
+      <div class="p" id="root"></div>
+    </div>
+    <nav id="nav"></nav>
+    <div class="railq" id="railq"></div>
+    <div class="railfoot">
+      <div class="warn" id="railwarn" style="display:none"></div>
+      <div class="money" id="money"></div>
+      <select id="mode" title="Which stages stop for you"></select>
+      <div class="note" id="modehint" style="margin-top:7px"></div>
+    </div>
+  </aside>
+  <main class="stage">
+    <div class="topbar" id="topbar"></div>
+    <div class="err" id="err">
+      <span class="msg" id="errmsg"></span>
+      <button data-act="dismiss-error" title="Dismiss">&times;</button>
+    </div>
+    <div id="stage" style="flex:1;min-height:0;display:flex;flex-direction:column"></div>
+  </main>
+</div>
+
+<div class="toast" id="toast">
+  <span id="toast-text"></span>
+  <button id="toast-undo" data-act="toast-undo">Undo</button>
+</div>
+
+<dialog id="prompt">
+  <h4 id="prompt-title"></h4>
+  <p id="prompt-help"></p>
+  <textarea id="prompt-text"></textarea>
+  <div class="dlgerr" id="prompt-err"></div>
+  <div class="dlgrow">
+    <button data-act="prompt-cancel">Cancel</button>
+    <button class="go" id="prompt-ok">Send</button>
+  </div>
+</dialog>
+
+<dialog id="confirm">
+  <h4 id="confirm-title"></h4>
+  <p id="confirm-help"></p>
+  <div class="dlgrow">
+    <button data-act="confirm-cancel">Cancel</button>
+    <button class="go" id="confirm-ok">Yes</button>
+  </div>
+</dialog>
+
+<script>
+var TOKEN = "__TOKEN__";
+var DATA = null;
+var view = "review";        // review | progress | done
+var cursorId = null;        // the task being reviewed, BY ID — never by position
+var inspectId = null;
+var mediaKind = "cut";      // cut | clean
+var ticks = {};             // taskId -> { criterion: true }
+var busy = false;
+var pollFails = 0;
+var keys = { shell: "", head: "", screen: "", side: "", rail: "" };
+
+function esc(v){
+  return String(v==null?"":v)
+    .replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")
+    .replace(/"/g,"&quot;").replace(/'/g,"&#39;");
+}
+function money(v){return v==null?"—":"$"+Number(v).toFixed(2);}
+function ago(iso){
+  if(!iso) return "";
+  var s=Math.max(0,(Date.now()-new Date(iso).getTime())/1000);
+  if(s<90) return Math.round(s)+"s ago";
+  if(s<5400) return Math.round(s/60)+"m ago";
+  if(s<172800) return Math.round(s/3600)+"h ago";
+  return Math.round(s/86400)+"d ago";
+}
+function showError(m){
+  document.getElementById("errmsg").textContent=m||"";
+  document.getElementById("err").classList.toggle("on",Boolean(m));
+}
+
+// ── markdown-lite ───────────────────────────────────────────────────────────
+function md(text){
+  if(!text) return '<p class="empty">Nothing recorded.</p>';
+  var lines=String(text).split("\\n"), out=[], list=false, quote=false;
+  function closeList(){ if(list){ out.push("</ul>"); list=false; } }
+  function closeQuote(){ if(quote){ out.push("</blockquote>"); quote=false; } }
+  function closeAll(){ closeList(); closeQuote(); }
+  function inline(s){
+    return s.replace(/\\*\\*([^*]+)\\*\\*/g,"<strong>$1</strong>")
+            .replace(/\`([^\`]+)\`/g,"<code>$1</code>");
+  }
+  for(var i=0;i<lines.length;i++){
+    var line=esc(lines[i]).trim();
+    if(!line){ closeAll(); continue; }
+    var h=line.match(/^(#{1,6})\\s+(.*)$/);
+    if(h){ closeAll(); out.push(h[1].length<=1?"<h4>"+inline(h[2])+"</h4>":"<h5>"+inline(h[2])+"</h5>"); continue; }
+    if(/^&gt;\\s?/.test(line)){
+      closeList();
+      if(!quote){ out.push("<blockquote>"); quote=true; } else { out.push(" "); }
+      out.push(inline(line.replace(/^&gt;\\s?/,"")));
+      continue;
+    }
+    if(/^[-*]\\s+/.test(line)){
+      closeQuote();
+      if(!list){ out.push("<ul>"); list=true; }
+      out.push("<li>"+inline(line.replace(/^[-*]\\s+/,""))+"</li>");
+      continue;
+    }
+    closeAll(); out.push("<p>"+inline(line)+"</p>");
+  }
+  closeAll();
+  return out.join("");
+}
+
+// The criteria come from the SERVER as a list. They are never derived by
+// splitting the question apart, which used to invent criteria out of a custom
+// --ask and could write one into an approval record.
+function criteriaOf(task){
+  return (task.gate && Array.isArray(task.gate.criteria)) ? task.gate.criteria : [];
+}
+
+// ── template previews ───────────────────────────────────────────────────────
+var cards={}, pending={}, failed={};
+var undecodable={};   // taskId -> true, set by the <video> error event
+function ensureTemplate(id){
+  if(!id||cards[id]||pending[id]) return;
+  // Retry a failed lookup at most once a minute rather than never or always.
+  if(failed[id]&&Date.now()-(failed[id].at||0)<60000) return;
+  pending[id]=true;
+  fetch("/api/template/"+encodeURIComponent(id)+"?t="+TOKEN,{headers:{"x-vidfarm-panel":TOKEN}})
+    .then(function(r){return r.json();})
+    .then(function(d){
+      if(!d||!d.card) return;
+      // A card the server could not resolve is not an answer — caching it means
+      // \`vidfarm login\` in another terminal never takes effect here.
+      if(d.card.resolved) cards[id]=d.card;
+      else { d.card.at=Date.now(); failed[id]=d.card; }
+      // Only the side pane and the shortlist grid use this. Clearing the screen
+      // key recreated the <video> a second into every cut gate.
+      keys.side="";
+      if(isShortlistScreen()) keys.screen="";
+      paint();
+    })
+    .catch(function(){})
+    .then(function(){ delete pending[id]; });
+}
+function shotHtml(card,id){
+  if(!card&&id&&failed[id]) card=failed[id];
+  if(card&&card.preview_url){
+    if(card.preview_kind==="video"){
+      return '<video src="'+esc(card.preview_url)+'" preload="metadata" playsinline controls></video>';
+    }
+    return '<img src="'+esc(card.preview_url)+'" alt="" loading="lazy">';
+  }
+  if(!card) return '<div class="none">loading the preview…</div>';
+  // "no preview stored" and "we could not ask" are different facts.
+  if(card.resolved) return '<div class="none">this template has no preview stored</div>';
+  return '<div class="none">could not load a preview<br>'+esc(card.reason||"the lookup failed")+"</div>";
+}
+
+// ── the network ─────────────────────────────────────────────────────────────
+// act() REJECTS on failure. It used to catch, show a banner, and then resolve,
+// so the .then() chain fired a success toast on top of the error — with a live
+// Undo that would reopen a gate the reviewer never answered.
+function act(payload){
+  if(busy){
+    showError("Still finishing the last action — give it a second.");
+    return Promise.reject(new Error("busy"));
+  }
+  busy=true;
+  return fetch("/api/action?t="+TOKEN,{
+    method:"POST",
+    headers:{"content-type":"application/json","x-vidfarm-panel":TOKEN},
+    body:JSON.stringify(payload)
+  }).then(function(r){
+    return r.json()
+      .catch(function(){ throw new Error("The panel sent back something that is not JSON ("+r.status+")."); })
+      .then(function(d){
+        if(!r.ok||!d.ok) throw new Error(d.error||("Request failed ("+r.status+")"));
+        showError("");
+        return d;
+      });
+  }).then(function(d){
+    return poll().then(function(){ busy=false; return d; });
+  },function(e){
+    if(e&&e.message!=="busy") showError(e.message);
+    return poll().then(function(){ busy=false; throw e; });
+  });
+}
+
+// ── queue, keyed by task id ─────────────────────────────────────────────────
+function queue(){ return DATA?DATA.tasks.filter(function(t){return t.gate;}):[]; }
+function isShortlistScreen(){
+  if(inspectId||view!=="review") return false;
+  var t=current();
+  return Boolean(t&&t.gate&&t.gate.stage==="shortlist");
+}
+function current(){
+  var q=queue();
+  if(!q.length) return null;
+  for(var i=0;i<q.length;i++){ if(q[i].task_id===cursorId) return q[i]; }
+  // The task we were on is gone (answered here, or from the terminal). Fall to
+  // the front rather than to whatever now occupies the old index — an index
+  // cursor slid a different video under the reviewer mid-watch.
+  cursorId=q[0].task_id;
+  mediaKind="cut";   // never carry "clean" onto a task you did not choose
+  return q[0];
+}
+function cursorIndex(){
+  var q=queue();
+  for(var i=0;i<q.length;i++){ if(q[i].task_id===cursorId) return i; }
+  return 0;
+}
+function moveCursor(delta){
+  var q=queue(); if(!q.length) return;
+  var i=Math.min(q.length-1,Math.max(0,cursorIndex()+delta));
+  if(q[i].task_id===cursorId) return;
+  cursorId=q[i].task_id; mediaKind="cut"; paint();
+}
+
+function tickState(task){ return ticks[task.task_id]||(ticks[task.task_id]={}); }
+
+// The task under the cursor can change between the reviewer LOOKING and the
+// reviewer CLICKING: current() falls back to the front of the queue when its
+// task is answered elsewhere. Acting on the new one would approve a video
+// nobody watched, so refuse once and let them look again.
+var renderedSubjectId=null;
+function subjectStillOnScreen(task){
+  if(renderedSubjectId&&task.task_id!==renderedSubjectId){
+    showError("The task on screen changed just now (something else answered \\""+renderedSubjectId
+      +"\\"). Nothing was sent — look at what is in front of you and act again.");
+    keys.head=""; keys.screen=""; keys.side=""; paint();
+    return false;
+  }
+  return true;
+}
+function canApprove(task){
+  if(!task||!task.gate) return false;
+  // Approving a cut gate writes "a human watched this". There must be something
+  // to watch.
+  if(task.gate.stage==="cut"&&!task.has_cut) return false;
+  // The file exists and has bytes, but the browser could not decode it. Only
+  // the player knows this, so only the player can disarm the button.
+  if(task.gate.stage==="cut"&&undecodable[task.task_id]) return false;
+  return task.gate.stage!=="shortlist";
+}
+
+// ── actions ─────────────────────────────────────────────────────────────────
+function approveCurrent(){
+  var task=current(); if(!task) return;
+  if(!subjectStillOnScreen(task)) return;
+  if(!canApprove(task)){
+    showError(task.gate&&task.gate.stage==="cut"
+      ? (undecodable[task.task_id]
+          ? "That file will not play, so it cannot be approved. Request changes or drop it."
+          : "There is no cut on disk to watch, so this cannot be approved. Request changes or drop it.")
+      : "This gate is answered by picking a template, not by approving.");
+    return;
+  }
+  var items=criteriaOf(task), t=tickState(task);
+  var passed=items.filter(function(i){return t[i];});
+  var note=passed.length?"checked: "+passed.join("; "):null;
+  var label=task.title||task.task_id;
+  act({action:"approve",task_id:task.task_id,note:note}).then(function(){
+    delete ticks[task.task_id];
+    toast("Approved <b>"+esc(label)+"</b>",task.task_id);
+  },function(){});
+}
+function changesCurrent(){
+  var task=current(); if(!task) return;
+  if(!subjectStillOnScreen(task)) return;
+  var items=criteriaOf(task), t=tickState(task);
+  var failed=items.filter(function(i){return !t[i];});
+  // Nothing ticked is the ORDINARY "this is bad, send it back" case, and it used
+  // to prefill an empty box — the one case the feature exists for.
+  var prefill=failed.length?"Fix: "+failed.join("; "):"";
+  var label=task.title||task.task_id;
+  ask("Request changes","The agent redoes that step from this note, with a fresh context.",prefill,
+    function(text){
+      act({action:"changes",task_id:task.task_id,note:text}).then(function(){
+        delete ticks[task.task_id];
+        toast("Requested changes on <b>"+esc(label)+"</b>",task.task_id);
+      },function(){});
+    });
+}
+function dropCurrent(){
+  var task=current(); if(!task) return;
+  if(!subjectStillOnScreen(task)) return;
+  var label=task.title||task.task_id;
+  ask("Drop this task","Logged to LEDGER.jsonl. Release it on the gig, or let it expire.","",
+    function(text){
+      act({action:"drop",task_id:task.task_id,reason:text}).then(function(){
+        toast("Dropped <b>"+esc(label)+"</b>",task.task_id);
+      },function(){});
+    });
+}
+function pickCandidate(index){
+  var task=current();
+  if(!task||!task.gate||task.gate.stage!=="shortlist") return;
+  if(!subjectStillOnScreen(task)) return;
+  var row=task.shortlist[index]; if(!row) return;
+  var card=cards[row.template_id];
+  var label=(card&&card.title)||row.template_id;
+  act({action:"pick",task_id:task.task_id,template_id:row.template_id}).then(function(){
+    toast("Picked <b>"+esc(label)+"</b>",task.task_id);
+  },function(){});
+}
+function undoTask(taskId){
+  hideToast();
+  act({action:"undo",task_id:taskId}).then(function(d){
+    cursorId=taskId;
+    toast("Reopened the <b>"+esc((d&&d.reopened)||"last")+"</b> gate",null);
+  },function(){});
+}
+function revealFor(taskId,target){ act({action:"reveal",task_id:taskId,target:target}).then(null,function(){}); }
+
+// ── toast + dialogs ─────────────────────────────────────────────────────────
+var toastTimer=null, toastTask=null;
+function toast(html,taskId){
+  toastTask=taskId||null;
+  document.getElementById("toast-text").innerHTML=html;
+  document.getElementById("toast-undo").style.display=taskId?"":"none";
+  document.getElementById("toast").classList.add("on");
+  if(toastTimer) clearTimeout(toastTimer);
+  toastTimer=setTimeout(hideToast,12000);
+}
+function hideToast(){
+  document.getElementById("toast").classList.remove("on");
+  toastTask=null;
+  if(toastTimer){ clearTimeout(toastTimer); toastTimer=null; }
+}
+
+var promptRun=null;
+function ask(title,help,prefill,then){
+  var box=document.getElementById("prompt");
+  document.getElementById("prompt-title").textContent=title;
+  document.getElementById("prompt-help").textContent=help;
+  document.getElementById("prompt-err").classList.remove("on");
+  var f=document.getElementById("prompt-text");
+  f.value=prefill||"";
+  promptRun=then;
+  box.showModal(); f.focus();
+}
+document.getElementById("prompt-ok").addEventListener("click",function(){
+  var f=document.getElementById("prompt-text");
+  var text=f.value.trim();
+  if(!text){
+    // Silently re-focusing read as a dead button.
+    var e=document.getElementById("prompt-err");
+    e.textContent="Write what needs to change — this note is what the agent works from.";
+    e.classList.add("on"); f.focus(); return;
+  }
+  document.getElementById("prompt").close();
+  if(promptRun) promptRun(text);
+});
+
+var confirmRun=null;
+function confirmThen(title,help,label,then){
+  document.getElementById("confirm-title").textContent=title;
+  document.getElementById("confirm-help").textContent=help;
+  document.getElementById("confirm-ok").textContent=label;
+  confirmRun=then;
+  document.getElementById("confirm").showModal();
+}
+document.getElementById("confirm-ok").addEventListener("click",function(){
+  document.getElementById("confirm").close();
+  if(confirmRun) confirmRun();
+});
+
+// ── one delegated listener; NO generated inline handlers anywhere ───────────
+// Building \`onclick="fn('<id>')"\` strings is what let a task id containing a
+// quote run arbitrary JS in this page — and what silently broke every criterion
+// containing an apostrophe.
+document.addEventListener("click",function(e){
+  var el=e.target.closest?e.target.closest("[data-act]"):null;
+  if(!el) return;
+  var a=el.getAttribute("data-act");
+  var id=el.getAttribute("data-task");
+  if(a==="approve") approveCurrent();
+  else if(a==="changes") changesCurrent();
+  else if(a==="drop") dropCurrent();
+  else if(a==="pick") pickCandidate(Number(el.getAttribute("data-index")));
+  else if(a==="undo") undoTask(id);
+  else if(a==="toast-undo"){ if(toastTask) undoTask(toastTask); }
+  else if(a==="reveal") revealFor(id,el.getAttribute("data-target"));
+  else if(a==="open"){ inspectId=id; mediaKind="cut"; paint(); }
+  else if(a==="close-inspect"){ inspectId=null; paint(); }
+  else if(a==="view"){ inspectId=null; view=el.getAttribute("data-view"); paint(); }
+  else if(a==="cursor"){ cursorId=id; mediaKind="cut"; paint(); }
+  else if(a==="step") moveCursor(Number(el.getAttribute("data-delta")));
+  else if(a==="media"){ mediaKind=el.getAttribute("data-kind"); keys.screen=""; paint(); }
+  else if(a==="copy"){
+    var text=el.getAttribute("data-value")||"";
+    if(!navigator.clipboard){ showError("This browser will not let the page copy. The path is: "+text); return; }
+    navigator.clipboard.writeText(text).then(function(){
+      el.textContent="Copied"; setTimeout(function(){ el.textContent="Copy path"; },1400);
+    },function(){
+      showError("The browser refused the copy (the window may not be focused). The path is: "+text);
+    });
+  }
+  else if(a==="dismiss-error") showError("");
+  else if(a==="prompt-cancel") document.getElementById("prompt").close();
+  else if(a==="confirm-cancel") document.getElementById("confirm").close();
+});
+
+// Ticking updates the DOM in place. It used to force a full repaint, which
+// recreated the <video> and threw away the reviewer's place — five times per
+// review, in the middle of the one thing this page exists to do.
+document.addEventListener("change",function(e){
+  var box=e.target;
+  if(!box.matches||!box.matches("[data-crit]")) return;
+  var task=current(); if(!task) return;
+  var key=box.getAttribute("data-crit");
+  var t=tickState(task);
+  if(box.checked) t[key]=true; else delete t[key];
+  var label=box.closest("label");
+  if(label) label.classList.toggle("ok",Boolean(t[key]));
+});
+
+// ── keyboard ────────────────────────────────────────────────────────────────
+document.addEventListener("keydown",function(e){
+  if(document.getElementById("prompt").open||document.getElementById("confirm").open) return;
+  var t=e.target;
+  if(t&&(t.tagName==="TEXTAREA"||t.tagName==="INPUT"||t.tagName==="SELECT")) return;
+  if(e.metaKey||e.ctrlKey||e.altKey) return;
+  var key=(e.key||"").toLowerCase();
+  if(e.key==="Escape"&&inspectId){ e.preventDefault(); inspectId=null; paint(); return; }
+  // U works on whatever is in front of you, not only while a toast happens to
+  // be up — it was advertised unconditionally and inert most of the time.
+  if(key==="u"){
+    e.preventDefault();
+    if(toastTask) undoTask(toastTask);
+    else if(inspectId) undoTask(inspectId);
+    // A task in the review queue is BY DEFINITION already waiting on you, so
+    // there is nothing of yours to undo on it. Say that instead of firing a
+    // request that always fails.
+    else showError("Nothing to undo — undo applies to a decision you just made. "
+      +"Open a task from In progress or Submitted to reopen its last gate.");
+    return;
+  }
+  if(e.key===" "){
+    var iv=document.getElementById("cutplayer");
+    if(iv){ e.preventDefault(); if(iv.paused) iv.play(); else iv.pause(); return; }
+  }
+  if(view!=="review"||inspectId) return;
+  var task=current(); if(!task) return;
+  if(task.gate.stage==="shortlist"&&/^[1-9]$/.test(key)){ e.preventDefault(); pickCandidate(Number(key)-1); return; }
+  if(key==="a"){ e.preventDefault(); approveCurrent(); }
+  else if(key==="c"){ e.preventDefault(); changesCurrent(); }
+  else if(key==="d"){ e.preventDefault(); dropCurrent(); }
+  else if(key==="j"||e.key==="ArrowRight"){ e.preventDefault(); moveCursor(1); }
+  else if(key==="k"||e.key==="ArrowLeft"){ e.preventDefault(); moveCursor(-1); }
+  else if(e.key===" "){
+    var v=document.getElementById("cutplayer");
+    if(v){ e.preventDefault(); if(v.paused) v.play(); else v.pause(); }
+  }
+});
+
+// ── rendering ───────────────────────────────────────────────────────────────
+function pipeline(task,stages){
+  var at=task.gate?task.gate.stage:task.stage, index=stages.indexOf(at);
+  return '<div class="pipe">'+stages.map(function(s,i){
+    return '<span class="'+(s===at?"step at":(index>=0&&i<index?"step done":"step"))+'">'+esc(s)+"</span>";
+  }).join("")+"</div>";
+}
+
+function mediaTabs(task){
+  if(!task.has_cut||!task.has_clean_master) return "";
+  return '<div class="mediatabs">'
+    +'<button data-act="media" data-kind="cut" class="'+(mediaKind==="cut"?"on":"")+'">Watermarked</button>'
+    +'<button data-act="media" data-kind="clean" class="'+(mediaKind==="clean"?"on":"")+'">Clean master</button>'
+    +"</div>";
+}
+
+function screenHtml(task){
+  var kind=(mediaKind==="clean"&&task.has_clean_master)?"clean":"cut";
+  var have=kind==="clean"?task.has_clean_master:task.has_cut;
+  if(have){
+    // No autoplay and no muted: one of the criteria is "is the audio clean",
+    // and a player that starts silent answers it wrong by default.
+    return mediaTabs(task)
+      +'<video id="cutplayer" controls preload="metadata" src="/media/'
+      +encodeURIComponent(task.task_id)+"/"+kind+"?t="+TOKEN+'"></video>';
+  }
+  if(task.gate&&task.gate.stage==="cut"){
+    return '<div class="nofile"><b>No cut on disk.</b><br>'
+      +esc(task.cut_path||"(no path was recorded)")
+      +"<br><br>Nothing to watch, so this cannot be approved — request changes or drop it.</div>";
+  }
+  if(task.plan_text) return '<div class="paper"><div class="doc"><h4>The plan</h4>'+md(task.plan_text)+"</div></div>";
+  if(task.brief) return '<div class="paper"><div class="doc"><h4>The buyer asked for</h4>'+md(task.brief)+"</div></div>";
+  return '<div class="nofile">Nothing has been produced on this task yet.</div>';
+}
+
+function briefSection(task){
+  return '<div class="sect"><h5>the buyer asked for</h5>'
+    +(task.brief
+      ? '<div class="doc">'+md(task.brief)+"</div>"
+      : '<p class="note">No brief was recorded. The agent writes one with '
+        +"<code>clipper-run start --brief &lt;file&gt;</code>.</p>")
+    +"</div>";
+}
+function planSection(task){
+  if(!task.plan_text) return "";
+  return '<details class="sect"><summary><h5>the plan it was built from</h5></summary>'
+    +'<div class="doc">'+md(task.plan_text)+"</div>"
+    +(task.plan_path?'<div class="paths">'+esc(task.plan_path)+"</div>":"")+"</details>";
+}
+function pathRow(task,target,value){
+  return '<div class="pathrow"><code title="'+esc(value)+'">'+esc(value)+"</code>"
+    +'<button data-act="copy" data-value="'+esc(value)+'">Copy path</button>'
+    +'<button data-act="reveal" data-task="'+esc(task.task_id)+'" data-target="'+esc(target)+'">Open folder</button></div>';
+}
+
+function paneHtml(task,inspect){
+  var stage=task.gate?task.gate.stage:null;
+  var items=criteriaOf(task), t=tickState(task);
+  var pane="";
+  if(inspect){
+    var headline=task.stage==="discarded"?"Dropped"
+      :(task.stage==="done"?"Submitted":"In flight — "+esc(task.stage));
+    pane+='<div class="doc"><h4>'+headline+"</h4>";
+    if(task.stage==="discarded"){
+      var why="";
+      for(var i=task.history.length-1;i>=0;i--){
+        if(task.history[i].event==="discarded"){ why=task.history[i].note||""; break; }
+      }
+      pane+="<blockquote>"+esc(why||"No reason was recorded.")+"</blockquote>";
+    }else if(task.stage==="done"){
+      pane+="<p>"+(task.proof_id
+        ?"Proof <code>"+esc(task.proof_id)+"</code> is with the buyer. Approved is not paid."
+        :"Closed as submitted, but no proof id was recorded.")+"</p>";
+    }else{
+      pane+="<p>The agent still owns this one.</p><p class=\\"note\\" style=\\"white-space:pre-wrap\\">"
+        +esc(String(task.next.what))+"</p>";
+    }
+    pane+="<p>"+(task.reviewed_by_gigworker
+      ?"You watched the cut on "+esc(String(task.reviewed_by_gigworker).slice(0,16).replace("T"," "))+"."
+      :(task.mode==="auto-submit"?"auto-submit — nobody watched this one."
+        :"No record that anybody watched it."))+"</p></div>";
+  }else if(stage==="shortlist"){
+    pane+='<p class="qhead">'+esc(task.gate.ask)+"</p>"
+      +'<p class="note">Pick the one that fits the brief below — click <b>Use this</b>, or press '
+      +"<kbd>1</kbd>&ndash;<kbd>"+Math.max(1,task.shortlist.length)+"</kbd>.</p>";
+  }else{
+    pane+='<p class="qhead">'+esc(task.gate.ask)+"</p>";
+    if(items.length){
+      pane+='<div class="crit">'+items.map(function(item){
+        return '<label class="'+(t[item]?"ok":"")+'"><input type="checkbox" data-crit="'+esc(item)+'"'
+          +(t[item]?" checked":"")+"><span>"+esc(item)+"</span></label>";
+      }).join("")+"</div>";
+      pane+='<p class="note">Ticks go into the task history on approve. Anything left unticked is '
+        +"pre-filled as the note when you request changes.</p>";
+    }
+    if(stage==="cut"&&!task.has_cut){
+      pane+='<p class="note alert">There is no cut on disk, so Approve is disabled.</p>';
+    } else if(stage==="cut"&&undecodable[task.task_id]){
+      pane+='<p class="note alert">That file will not play, so Approve is disabled.</p>';
+    }
+    if(stage==="raws"){
+      pane+='<p class="note">'+task.raws_count+" file(s) collected so far.</p>";
+      if(task.raws_files.length){
+        pane+='<div class="files">'+task.raws_files.map(function(f){return "<span>"+esc(f)+"</span>";}).join("")+"</div>";
+      }
+      if(task.raws_dir) pane+=pathRow(task,"raws",task.raws_dir);
+    }
+    if(stage==="cut"&&task.cut_path) pane+=pathRow(task,"cut",task.cut_path);
+  }
+  pane+=briefSection(task);
+  if(!(task.gate&&task.gate.stage==="plan")) pane+=planSection(task);
+  if(task.template_id){
+    ensureTemplate(task.template_id);
+    var card=cards[task.template_id];
+    pane+='<div class="sect"><h5>adapting</h5><p class="note" style="margin:0"><b>'
+      +esc((card&&card.title)||task.template_id)+"</b>, picked by the "
+      +esc(task.template_picked_by||"agent")+".</p></div>";
+  }
+  if(inspect&&task.history&&task.history.length){
+    pane+='<details class="sect"><summary><h5>trail</h5></summary><div class="doc"><ul>'
+      +task.history.slice(-10).map(function(h){
+        var n=h.note?String(h.note):"";
+        if(n.indexOf("/")>-1&&n.indexOf(" ")===-1) n=n.slice(n.lastIndexOf("/")+1);
+        return "<li>"+esc(h.event)+(n?" — "+esc(n):"")+"</li>";
+      }).join("")+"</ul></div></details>";
+  }
+  return pane;
+}
+
+function actsHtml(task,inspect){
+  var id=esc(task.task_id);
+  if(inspect){
+    var blocked=task.stage==="done";
+    return (blocked?'<p class="note" style="margin:0 0 4px">This one already went out — undo is local and '
+        +"cannot unsend a proof. Withdraw it on the gig.</p>":"")
+      +'<button data-act="undo" data-task="'+id+'"'+(blocked?" disabled":"")+">Undo my last decision</button>"
+      +'<button data-act="close-inspect">Back to the list</button>';
+  }
+  if(task.gate.stage==="shortlist"){
+    return '<div class="rowb"><button data-act="changes">None of these — reshortlist</button>'
+      +'<button class="warn" data-act="drop">Drop</button></div>'
+      +'<div class="keys"><kbd>1</kbd>&ndash;<kbd>'+Math.max(1,task.shortlist.length)+"</kbd> pick &middot; "
+      +"<kbd>C</kbd> reshortlist &middot; <kbd>D</kbd> drop &middot; <kbd>U</kbd> undo</div>";
+  }
+  var ok=canApprove(task);
+  return '<button class="go" data-act="approve"'+(ok?"":" disabled")+">Approve &amp; continue</button>"
+    +'<div class="rowb"><button data-act="changes">Request changes</button>'
+    +'<button class="warn" data-act="drop">Drop</button></div>'
+    +'<div class="keys"><kbd>A</kbd> approve &middot; <kbd>C</kbd> changes &middot; <kbd>D</kbd> drop '
+    +"&middot; <kbd>U</kbd> undo &middot; <kbd>Space</kbd> play<br><kbd>J</kbd>/<kbd>K</kbd> next task</div>";
+}
+
+function headerHtml(task,inspect){
+  var q=queue();
+  var left=inspect?'<button class="back" data-act="close-inspect">&larr; Back</button>':"";
+  var badge=inspect
+    ? (task.stage==="discarded"?'<span class="tag red">dropped</span>'
+       :(task.stage==="done"?'<span class="tag green">awaiting the buyer</span>'
+         :'<span class="tag">'+esc(task.stage)+"</span>"))
+    : '<span class="tag gold">'+esc(task.gate.stage)+" gate</span>";
+  var right=inspect?"":'<span class="sub">'+(cursorIndex()+1)+" of "+q.length+"</span>"
+      +'<button data-act="step" data-delta="-1"'+(cursorIndex()<=0?" disabled":"")+">&larr;</button>"
+      +'<button data-act="step" data-delta="1"'+(cursorIndex()>=q.length-1?" disabled":"")+">&rarr;</button>";
+  return '<div class="sh">'+left+"<h2>"+esc(task.title||task.task_id)+"</h2>"+badge
+    +'<span class="tag">'+esc(money(task.price))+"</span>"
+    +'<span class="tag">'+esc(task.gig_id||"no gig")+"</span>"
+    +'<span class="sp"></span>'+right+"</div>";
+}
+
+function candidateGrid(task){
+  if(!task.shortlist.length){
+    return '<div class="clear"><div class="sm">The agent has not shortlisted anything yet.</div></div>';
+  }
+  return '<div class="cands">'+task.shortlist.map(function(row,i){
+    ensureTemplate(row.template_id);
+    var card=cards[row.template_id];
+    var secs=card&&card.duration_seconds?Math.round(card.duration_seconds)+"s":"";
+    return '<div class="cand"><div class="shot"><span class="k">'+(i+1)+"</span>"+shotHtml(card,row.template_id)+"</div>"
+      +'<div class="b"><div class="nm" title="'+esc(row.template_id)+'">'
+      +esc((card&&card.title)||row.template_id)+"</div>"
+      +(row.why?'<div class="wy">'+esc(row.why)+"</div>":"")
+      +(card&&card.summary?'<div class="sb">'+esc(card.summary)+"</div>":"")
+      +'<div class="sb mono">'+esc(secs)+"</div></div>"
+      +'<div class="f"><button class="go" data-act="pick" data-index="'+i+'">Use this</button></div>'
+      +"</div>";
+  }).join("")+"</div>";
+}
+
+function emptyReview(){
+  if(DATA.missing){
+    return '<div class="clear"><div class="big">The mission folder is gone.</div>'
+      +'<div class="sm">Nothing can be read or written until it is back:<br><br><code>'
+      +esc(DATA.root)+"</code><br><br>If you moved it, restart the panel with the new "
+      +"<code>--dir</code>.</div></div>";
+  }
+  var anyTask=DATA.tasks.length>0;
+  var working=DATA.tasks.filter(function(t){return !t.gate&&t.stage!=="done"&&t.stage!=="discarded";}).length;
+  if(!anyTask){
+    return '<div class="clear"><div class="big">No tasks yet.</div>'
+      +'<div class="sm">This mission folder is empty. Claim work, then open a task:<br><br>'
+      +"<code>vidfarm gigs earn</code> &rarr; <code>vidfarm gigs claim &lt;gig-id&gt;</code> &rarr; "
+      +"<code>vidfarm clipper-run start &lt;task-id&gt; --gig &lt;gig-id&gt;</code></div></div>";
+  }
+  if(working){
+    return '<div class="clear"><div class="big">Nothing waiting on you.</div>'
+      +'<div class="sm">'+working+" task(s) are mid-flight — the agent's move. This page lights up the "
+      +'moment one comes back.</div><div class="row">'
+      +'<button data-act="view" data-view="progress">See what the agent is doing</button></div></div>';
+  }
+  return '<div class="clear"><div class="big">You are clear.</div>'
+    +'<div class="sm">Nothing is waiting on you and nothing is in flight. Claim more work with '
+    +"<code>vidfarm gigs earn</code>.</div></div>";
+}
+
+function progressHtml(){
+  var rows=DATA.tasks.filter(function(t){return !t.gate&&t.stage!=="done"&&t.stage!=="discarded";});
+  if(!rows.length){
+    return '<div class="sh"><h2>In progress</h2></div><div class="clear">'
+      +'<div class="sm">No task is mid-flight. Claim one: <code>vidfarm gigs claim &lt;gig-id&gt;</code></div></div>';
+  }
+  return '<div class="sh"><h2>In progress</h2><span class="sub">'+rows.length
+    +' task(s) the agent still owns</span></div><div class="body">'
+    +rows.map(function(t){
+      return '<div class="lcard"><div class="top"><b>'+esc(t.title||t.task_id)+"</b>"
+        +'<span class="tag">'+esc(t.stage)+'</span><span class="tag">'+esc(money(t.price))+"</span>"
+        +(t.has_cut?'<span class="tag green">has a cut</span>':"")+"</div>"
+        +'<div class="meta mono">'+esc(t.task_id)+" &middot; "+esc(t.gig_id||"no gig")
+        +" &middot; updated "+esc(ago(t.updated_at))+"</div>"
+        +pipeline(t,DATA.stages)
+        +'<div class="nxt"><b>next ('+esc(t.next.who)+"):</b> "+esc(t.next.what)+"</div>"
+        +'<div style="display:flex;gap:8px;margin-top:12px">'
+        +'<button data-act="open" data-task="'+esc(t.task_id)+'">Open</button>'
+        +'<button data-act="undo" data-task="'+esc(t.task_id)+'">Undo my last decision</button></div>'
+        +"</div>";
+    }).join("")+"</div>";
+}
+
+function doneHtml(){
+  var rows=DATA.tasks.filter(function(t){return t.stage==="done"||t.stage==="discarded";});
+  var known={};
+  DATA.tasks.forEach(function(t){ known[t.task_id]=true; });
+  var seen={};
+  var orphans=DATA.ledger.filter(function(r){
+    if(!r.task_id||known[r.task_id]||seen[r.task_id]) return false;
+    seen[r.task_id]=true;   // newest first, so the first row is the current one
+    return true;
+  });
+  if(!rows.length&&!orphans.length){
+    return '<div class="sh"><h2>Submitted</h2></div><div class="clear"><div class="sm">'
+      +"Nothing closed yet. A task lands here once you approve the cut and the agent sends the proof."
+      +"</div></div>";
+  }
+  var s=DATA.summary||{awaiting:0,sent:0,dropped:0};
+  var body=rows.map(function(t){
+    var tag=t.stage==="discarded"?'<span class="tag red">dropped</span>'
+      :(t.proof_id?'<span class="tag green">awaiting the buyer</span>':'<span class="tag">done</span>');
+    var watched=t.reviewed_by_gigworker?"you watched it"
+      :(t.mode==="auto-submit"?"auto-submit — nobody watched":"not watched");
+    return '<tr class="clickrow" data-act="open" data-task="'+esc(t.task_id)+'"><td class="thumbcell">'
+      +(t.has_cut?'<video muted preload="metadata" src="/media/'+encodeURIComponent(t.task_id)
+        +"/cut?t="+TOKEN+'#t=0.5"></video>':'<div class="nothumb">no cut</div>')+"</td>"
+      +"<td><b>"+esc(t.title||t.task_id)+'</b><div class="meta mono">'+esc(t.task_id)+"</div></td>"
+      +"<td>"+tag+'</td><td class="mono">'+esc(t.proof_id||"—")+"</td><td>"+esc(money(t.price))
+      +'</td><td class="meta">'+esc(watched)+'</td><td class="meta">'+esc(ago(t.updated_at))+"</td></tr>";
+  }).join("");
+  body+=orphans.map(function(r){
+    return '<tr><td class="thumbcell"><div class="nothumb">no task</div></td>'
+      +'<td><b class="meta">'+esc(r.task_id)+'</b><div class="meta">ledger record only — the task '
+      +"folder is gone</div></td>"
+      +"<td>"+esc(r.status)+'</td><td class="mono">'+esc(r.proof_id||"—")+"</td>"
+      +"<td>"+esc(money(r.locked_price))+'</td><td class="meta">'+esc(r.reason||"")+"</td>"
+      +'<td class="meta">'+esc(ago(r.ts))+"</td></tr>";
+  }).join("");
+  return '<div class="sh"><h2>Submitted &amp; closed</h2>'
+    +'<span class="sub">click a row to watch what went out</span><span class="sp"></span>'
+    +'<span class="tag">'+esc(money(s.awaiting))+" awaiting the buyer</span>"
+    +'<span class="tag">'+s.sent+' sent</span><span class="tag">'+s.dropped+" dropped</span></div>"
+    +'<div class="body"><table>'
+    +"<tr><th></th><th>task</th><th>status</th><th>proof</th><th>price</th><th>review</th><th>closed</th></tr>"
+    +body+"</table></div>";
+}
+
+// The stage is drawn in THREE independently-keyed pieces so a change to one
+// never destroys another. The video used to be thrown away whenever any task
+// anywhere was written, because the whole stage was a single innerHTML.
+function paintStage(){
+  var stage=document.getElementById("stage");
+  var task=inspectId?DATA.tasks.filter(function(t){return t.task_id===inspectId;})[0]:null;
+  if(inspectId&&!task) inspectId=null;
+  var isReview=!inspectId&&view==="review";
+  var subject=inspectId?task:(isReview?current():null);
+
+  if(!subject){
+    renderedSubjectId=null;
+    var html=view==="progress"?progressHtml():view==="done"?doneHtml():emptyReview();
+    var k="list:"+view+":"+JSON.stringify(DATA.tasks.map(function(t){
+      return [t.task_id,t.stage,t.updated_at,t.has_cut,t.proof_id];
+    }))+":"+JSON.stringify(DATA.summary)+":"+DATA.ledger.length
+      // "3m ago" must not sit there saying 3m for an hour.
+      +":"+Math.floor(Date.now()/60000);
+    if(keys.shell!==k){ keys.shell=k; keys.head=""; keys.screen=""; keys.side=""; stage.innerHTML=html; }
+    return;
+  }
+
+  var inspect=Boolean(inspectId);
+  // Deliberately WITHOUT the queue position/length: those only move the counter
+  // in the header, and rebuilding the stage for them destroyed the player every
+  // time an agent finished an unrelated task.
+  var shellKey="one:"+subject.task_id+":"+(subject.gate?subject.gate.stage:subject.stage)+":"+inspect
+    +":"+subject.price+":"+subject.title;
+  if(keys.shell!==shellKey){
+    keys.shell=shellKey; keys.head=""; keys.screen=""; keys.side="";
+    var wrapClass=(!inspect&&subject.gate.stage==="shortlist")?"screen candwrap":"screen";
+    stage.innerHTML='<div id="stagehead"></div>'
+      +'<div class="rv"><div class="'+wrapClass+'" id="screen"></div>'
+      +'<div class="side"><div class="pane" id="pane"></div><div class="acts" id="acts"></div></div></div>';
+  }
+
+  // The header owns the counter, so it repaints on queue churn while the body
+  // (and the player) stays put.
+  var headKey="head:"+subject.task_id+":"+inspect+":"+cursorIndex()+":"+queue().length
+    +":"+(subject.gate?subject.gate.stage:subject.stage)+":"+subject.price+":"+subject.title;
+  if(keys.head!==headKey){
+    keys.head=headKey;
+    document.getElementById("stagehead").innerHTML=headerHtml(subject,inspect);
+  }
+
+  renderedSubjectId=subject.task_id;
+  var isShortlist=!inspect&&subject.gate&&subject.gate.stage==="shortlist";
+  var screenKey="scr:"+subject.task_id+":"+mediaKind+":"+subject.has_cut+":"+subject.has_clean_master
+    +":"+(subject.cut_path||"")+":"+(isShortlist
+      ?JSON.stringify(subject.shortlist.map(function(r){return [r.template_id,Boolean(cards[r.template_id])];})):"");
+  if(keys.screen!==screenKey){
+    keys.screen=screenKey;
+    var el=document.getElementById("screen");
+    el.innerHTML=isShortlist?candidateGrid(subject):screenHtml(subject);
+    var v=document.getElementById("cutplayer");
+    if(v){
+      // A .txt renamed .mp4, or a truncated render, used to look exactly like a
+      // black opening frame with Approve armed.
+      v.addEventListener("error",function(){
+        // Replace only the player. The media tabs live in this container too,
+        // and wiping them hid the clean master when the watermarked cut was the
+        // broken one.
+        var msg=document.createElement("div");
+        msg.className="nofile";
+        msg.innerHTML='<b>This file will not play.</b><br>'+esc(subject.cut_path||"")
+          +"<br><br>It is on disk but the browser cannot decode it — a failed or truncated "
+          +"render. Request changes or drop it.";
+        v.replaceWith(msg);
+        // Disarm the decision as well as the pixels.
+        undecodable[subject.task_id]=true;
+        keys.side="";
+        paint();
+      });
+    }
+  }
+
+  var sideKey="side:"+subject.task_id+":"+subject.updated_at+":"+inspect+":"+mediaKind
+    +":"+(subject.brief?subject.brief.length:0)+":"+(subject.plan_text?subject.plan_text.length:0)
+    +":"+subject.raws_count+":"+(cards[subject.template_id]?1:0)
+    // These two are read from DISK each poll and can flip without a state
+    // write, so they must be in the key or Approve goes stale in both
+    // directions — dead next to a playing video, or live next to a gone one.
+    +":"+subject.has_cut+":"+subject.has_clean_master;
+  if(keys.side!==sideKey){
+    keys.side=sideKey;
+    document.getElementById("pane").innerHTML=paneHtml(subject,inspect);
+    document.getElementById("acts").innerHTML=actsHtml(subject,inspect);
+  }
+}
+
+function paintRail(){
+  var q=queue();
+  var working=DATA.tasks.filter(function(t){return !t.gate&&t.stage!=="done"&&t.stage!=="discarded";});
+  var closed=DATA.tasks.filter(function(t){return t.stage==="done"||t.stage==="discarded";});
+  var s=DATA.summary||{awaiting:0,sent:0,dropped:0};
+
+  var navs=[["review","Waiting on you",q.length,q.length>0],
+            ["progress","In progress",working.length,false],
+            ["done","Submitted",closed.length,false]];
+  var railKey=JSON.stringify([view,inspectId,cursorId,navs,DATA.run_mode,DATA.run_mode_is_set,
+    s,DATA.unreadable,DATA.mode_unreadable,DATA.root,
+    q.map(function(t){return [t.task_id,t.gate.stage,t.price,t.title];})]);
+  if(keys.rail===railKey) return;
+  keys.rail=railKey;
+
+  document.getElementById("root").textContent=DATA.root;
+  var navHtml=navs.map(function(r){
+    return '<button data-act="view" data-view="'+r[0]+'" class="'+(view===r[0]&&!inspectId?"on ":"")
+      +(r[3]?"hot":"")+'">'+r[1]+"<b>"+r[2]+"</b></button>";
+  }).join("");
+  document.getElementById("nav").innerHTML=navHtml;
+  document.getElementById("topbar").innerHTML=navHtml
+    +'<span class="money">'+esc(money(s.awaiting))+" awaiting</span>";
+
+  document.getElementById("railq").innerHTML=(view!=="review"||inspectId||!q.length)?"":
+    '<div class="h">the queue</div>'+q.map(function(t,i){
+      return '<button class="qi'+(t.task_id===cursorId?" on":"")+'" data-act="cursor" data-task="'
+        +esc(t.task_id)+'"><span class="n">'+(i+1)+'</span><span class="tx"><b>'
+        +esc(t.title||t.task_id)+"</b><span>"+esc(t.gate.stage)+" &middot; "+esc(money(t.price))
+        +"</span></span></button>";
+    }).join("");
+
+  document.getElementById("money").innerHTML=
+    "<b>"+esc(money(s.awaiting))+"</b> submitted, awaiting the buyer<br>"
+    +s.sent+" proof(s) sent &middot; "+s.dropped+" dropped";
+
+  // A task the panel cannot read must never be silently absent from the queue.
+  var warn=document.getElementById("railwarn");
+  var lines=[];
+  if(DATA.unreadable&&DATA.unreadable.length){
+    lines.push(DATA.unreadable.length+" task folder(s) could not be read: "
+      +DATA.unreadable.map(function(u){return u.folder;}).join(", ")+" — they are NOT in the queue.");
+  }
+  if(DATA.mode_unreadable) lines.push(DATA.mode_unreadable+" — falling back to "+DATA.run_mode+".");
+  warn.innerHTML=lines.map(esc).join("<br>");
+  warn.style.display=lines.length?"":"none";
+
+  var sel=document.getElementById("mode");
+  if(sel.options.length!==DATA.modes.length){
+    sel.innerHTML=DATA.modes.map(function(m){
+      return '<option value="'+esc(m.mode)+'">'+esc(m.mode)+"</option>";}).join("");
+    sel.addEventListener("change",function(){
+      var wanted=sel.value;
+      if(wanted===DATA.run_mode) return;
+      var apply=function(){ act({action:"mode",mode:wanted}).then(null,function(){ sel.value=DATA.run_mode; }); };
+      // auto-submit means nobody watches anything before it reaches a buyer.
+      // One stray scroll over a dropdown should not be able to choose that.
+      var blurbFor=(DATA.modes.filter(function(m){return m.mode===wanted;})[0]||{}).blurb||"";
+      if(wanted!=="auto-submit"){
+        // Even a keystroke on a focused select fires change. This changes the
+        // gate set for every future task, so it is always confirmed.
+        sel.value=DATA.run_mode;
+        confirmThen("Switch to "+wanted+"?",blurbFor,"Yes, use "+wanted,apply);
+        return;
+      }
+      if(wanted==="auto-submit"){
+        sel.value=DATA.run_mode;
+        confirmThen("Turn on auto-submit?",
+          "The agent will pick, build AND send proofs with no human review. A rejection is scored on "
+          +"your wallet and shown to buyers as a trust score. Revert to auto-batch after any rejection.",
+          "Yes, submit unattended",apply);
+      }
+    });
+  }
+  sel.value=DATA.run_mode;
+  var mine=DATA.modes.filter(function(m){return m.mode===DATA.run_mode;})[0]||{};
+  sel.title=mine.blurb||"";
+  document.getElementById("modehint").textContent=DATA.run_mode_is_set
+    ? "Stops at: "+((mine.gates||[]).join(" · ")||"nothing")
+    : "Not chosen yet — this is the assumed default. Pick one before the first task.";
+}
+
+function paint(){
+  if(!DATA) return;
+  paintRail();
+  paintStage();
+}
+
+function poll(){
+  return fetch("/api/state?t="+TOKEN,{headers:{"x-vidfarm-panel":TOKEN}})
+    .then(function(r){
+      if(!r.ok) throw new Error("state "+r.status);
+      return r.json();
+    })
+    .then(function(d){
+      document.getElementById("live").className="live";
+      if(pollFails){ pollFails=0; showError(""); }
+      DATA=d;
+      if(!cursorId||!d.tasks.some(function(t){return t.task_id===cursorId&&t.gate;})){
+        var q=queue();
+        cursorId=q.length?q[0].task_id:null;
+      }
+      paint();
+    })
+    .catch(function(e){
+      document.getElementById("live").className="live stale";
+      pollFails+=1;
+      // Two misses is a real problem, not a blip — say so rather than leaving a
+      // dark page and a small red dot as the only signal.
+      if(pollFails>=2){
+        showError("Lost contact with the panel server ("+(e&&e.message||"no response")
+          +"). Check the terminal that started it.");
+      }
+    });
+}
+
+poll();
+setInterval(poll,2000);
+</script>
+</body>
+</html>
+`;
+function sendJson(res, status, payload) {
+    res.statusCode = status;
+    res.setHeader("content-type", "application/json; charset=utf-8");
+    res.setHeader("cache-control", "no-store");
+    res.end(JSON.stringify(payload));
+}
+function readBody(req) {
+    return new Promise((resolve, reject) => {
+        const chunks = [];
+        let size = 0;
+        let oversized = false;
+        req.on("data", (chunk) => {
+            size += chunk.length;
+            // A control-panel action is a few hundred bytes; refuse anything absurd.
+            if (size > 256_000) {
+                oversized = true;
+                reject(new Error("Request body too large."));
+                return;
+            }
+            chunks.push(chunk);
+        });
+        req.on("end", () => { if (!oversized)
+            resolve(Buffer.concat(chunks).toString("utf8")); });
+        req.on("error", reject);
+    });
+}
+export async function handlePanelRequest(req, res, opts) {
+    const url = new URL(req.url ?? "/", "http://127.0.0.1");
+    const pathname = url.pathname.replace(/\/+$/, "") || "/";
+    if (pathname === "/favicon.ico") {
+        // Asked for by the browser itself, with no token. A 403 here is a red
+        // console error on a page that is working fine.
+        res.statusCode = 204;
+        res.end();
+        return;
+    }
+    // Rule 1b: addressed to loopback by name as well as by socket.
+    if (!hostAllowed(req, opts.port)) {
+        res.statusCode = 421;
+        res.setHeader("content-type", "text/plain; charset=utf-8");
+        res.end("Misdirected request — the panel only answers on 127.0.0.1/localhost.\n");
+        return;
+    }
+    // Rule 2: the token gates everything, including the page itself. No CORS
+    // header is ever sent, so another origin cannot read a response to steal it.
+    if (!tokenMatches(presentedToken(req, url), opts.token)) {
+        res.statusCode = 403;
+        res.setHeader("content-type", "text/plain; charset=utf-8");
+        res.end("Forbidden — open the URL printed by `vidfarm panel` (it carries the session token).\n");
+        return;
+    }
+    if (pathname === "/" && req.method === "GET") {
+        res.statusCode = 200;
+        res.setHeader("content-type", "text/html; charset=utf-8");
+        res.setHeader("cache-control", "no-store");
+        // Deny framing outright: nothing here should ever render inside another page.
+        res.setHeader("x-frame-options", "DENY");
+        res.setHeader("referrer-policy", "no-referrer");
+        res.end(PAGE_HTML.split("__TOKEN__").join(opts.token));
+        return;
+    }
+    if (pathname === "/api/state" && req.method === "GET") {
+        try {
+            sendJson(res, 200, buildState(opts.root));
+        }
+        catch (error) {
+            sendJson(res, 500, { ok: false, error: error instanceof Error ? error.message : String(error) });
+        }
+        return;
+    }
+    if (pathname === "/api/action" && req.method === "POST") {
+        // Rule 3: a write must originate from this page.
+        if (!originAllowed(req, opts.port)) {
+            sendJson(res, 403, { ok: false, error: "Cross-origin write refused." });
+            return;
+        }
+        let body = {};
+        try {
+            const parsedBody = JSON.parse((await readBody(req)) || "{}");
+            body = (parsedBody && typeof parsedBody === "object") ? parsedBody : {};
+        }
+        catch (error) {
+            const tooBig = error instanceof Error && /too large/i.test(error.message);
+            sendJson(res, tooBig ? 413 : 400, {
+                ok: false,
+                error: tooBig ? "That request body is too large for the panel (256 KB max)." : "Body was not JSON."
+            });
+            return;
+        }
+        try {
+            sendJson(res, 200, runAction(opts.root, body));
+        }
+        catch (error) {
+            sendJson(res, 400, { ok: false, error: error instanceof Error ? error.message : String(error) });
+        }
+        return;
+    }
+    const templateLookup = pathname.match(/^\/api\/template\/([^/]+)$/);
+    if (templateLookup && req.method === "GET") {
+        const card = await lookupTemplate(decodeURIComponent(templateLookup[1]));
+        sendJson(res, 200, { ok: true, card: card });
+        return;
+    }
+    const media = pathname.match(/^\/media\/([^/]+)\/(cut|clean)$/);
+    if (media && (req.method === "GET" || req.method === "HEAD")) {
+        try {
+            const state = readTaskState(opts.root, decodeURIComponent(media[1]));
+            const file = media[2] === "clean" ? state.clean_master : state.cut_path;
+            // `fileExists` now means "watchable", so a 0-byte render would 404 as if
+            // nothing had been recorded. Tell the truth: it is there, and it is empty.
+            if (file && existsSync(file) && !fileExists(file)) {
+                streamVideo(req, res, file);
+                return;
+            }
+            if (!file || !fileExists(file)) {
+                res.statusCode = 404;
+                res.setHeader("content-type", "text/plain; charset=utf-8");
+                res.end("No such recording on disk.\n");
+                return;
+            }
+            streamVideo(req, res, file);
+        }
+        catch (error) {
+            res.statusCode = 404;
+            res.end(error instanceof Error ? error.message : "Not found");
+        }
+        return;
+    }
+    res.statusCode = 404;
+    res.end("Not found");
+}
+export function startClipperPanel(opts) {
+    const server = createServer((req, res) => {
+        void handlePanelRequest(req, res, opts).catch((error) => {
+            if (!res.headersSent) {
+                res.statusCode = 500;
+                res.setHeader("content-type", "text/plain; charset=utf-8");
+            }
+            res.end(`Panel error: ${error instanceof Error ? error.message : String(error)}`);
+        });
+    });
+    return new Promise((resolve, reject) => {
+        server.once("error", (error) => {
+            reject(error.code === "EADDRINUSE"
+                ? new Error(`Port ${opts.port} is already in use. Pass --port <n>.`)
+                : error);
+        });
+        // Rule 1: loopback only. This page approves work that gets submitted for
+        // money — it must never be reachable from the network.
+        server.listen(opts.port, "127.0.0.1", () => {
+            resolve({
+                port: opts.port,
+                url: `http://127.0.0.1:${opts.port}/?t=${opts.token}`,
+                // A caller that starts the panel inside a longer-lived process (a test,
+                // a future `serve` mount) needs a way to give the port back.
+                close: () => new Promise((done) => {
+                    server.closeAllConnections?.();
+                    server.close(() => done());
+                })
+            });
+        });
+    });
+}
+//# sourceMappingURL=clipper-panel.js.map