@vfrey/vfrey 0.0.1 → 1.0.0-beta.0

package/src/desk/ui/views-runs.js

@@ -0,0 +1,350 @@
+// Board, Runs list, Run detail.
+import {
+  html, icon, setHtml, $, $$, api, read, toast, refusalToast, store, dur, rel, abs, clock, ms, short, esc,
+  STATUS, STAGES, GROUPS, TERMINAL, groupOf, jobTimes, stageInfo, seriesFor, cap, copyText, num,
+} from "./core.js";
+import { statusPill, stageRail, stageTone, emptyState, when, copyBtn, platformName } from "./components.js";
+
+export async function startTick(body) {
+  const r = await api("/api/tick", body);
+  if (!r.ok) { refusalToast(r); return r; }
+  if (r.tick && store.state) store.state.tick = r.tick;
+  store.refresh?.();
+  return r;
+}
+
+const jobSeries = (state, job) => seriesFor(state, job);
+const sortKey = (j) => ms(j.updatedAt);
+
+// ---------------------------------------------------------------- Board
+export function boardView() {
+  let root, state;
+  const view = {
+    title: "Board",
+    mount(el) {
+      root = el;
+      setHtml(el, html`<div class="page-head">
+        <div><span class="eyebrow">Desk / Board</span><h1>Board</h1><p class="sub">Every run, from waiting to finished. Updates by itself.</p></div>
+        <div class="actions" id="tick-actions">
+          <span id="tick-chip" hidden></span>
+          <button type="button" class="btn secondary" data-tick="dry" id="btn-dry">${icon("play")}Dry-run</button>
+          <button type="button" class="btn" data-tick="now" id="btn-tick">${icon("refresh")}Run tick now</button>
+        </div></div>
+        <div id="review-banner" hidden></div>
+        <div class="board" id="board"></div>`);
+      el.addEventListener("click", (e) => {
+        const t = e.target.closest("[data-tick]");
+        if (t) startTick(t.dataset.tick === "dry" ? { dryRun: true } : { now: true });
+      });
+    },
+    update(s) {
+      state = s;
+      const tick = s.tick || {};
+      const chip = $(root, "#tick-chip");
+      chip.hidden = !tick.running;
+      if (tick.running) {
+        chip.className = "tick-chip";
+        const label = `${tick.dryRun ? "Dry-run" : "Ticking"} · `;
+        setHtml(chip, html`${icon("spinner", "spin")}<span>${label}<span data-tick-since="${tick.startedAt}">${clock(Date.now() - ms(tick.startedAt))}</span></span>`);
+      }
+      for (const b of $$(root, "[data-tick]")) b.disabled = !!tick.running;
+      const jobs = s.jobs || [];
+      const toReview = jobs.filter((j) => j.status === "awaiting_review").length;
+      const banner = $(root, "#review-banner");
+      banner.hidden = !toReview;
+      if (toReview) setHtml(banner, html`<a class="callout" href="/review" data-link data-review-banner>${icon("alert")}<div><p class="t">${toReview} ${toReview === 1 ? "run waits" : "runs wait"} for your review</p><p>Nothing renders or publishes until you approve it. Open the Review screen.</p></div></a>`);
+      const cols = Object.entries(GROUPS).map(([key, g]) => {
+        const list = jobs.filter((j) => g.statuses.includes(j.status)).sort((a, b) => sortKey(b) - sortKey(a));
+        const empty = { waiting: "Nothing waiting. Run a tick to queue work.", running: "No run in progress.", finished: "No finished run yet.", failed: "No failures. Good." }[key];
+        return html`<section class="col" data-col="${key}" aria-label="${g.label}">
+          <div class="col-head"><span class="dot" style="background:var(--${{ waiting: "wait", running: "run", finished: "ok", failed: "block" }[key]}-fg)"></span><h2 style="font-size:14px;font-weight:560;margin:0">${g.label}</h2><span class="n" data-count>${list.length}</span></div>
+          <div class="col-cards">${list.length ? list.map((j) => card(s, j)) : html`<div class="empty-col">${empty}</div>`}</div></section>`;
+      });
+      setHtml($(root, "#board"), html`${cols}`);
+    },
+  };
+  return view;
+}
+
+// Board badges are short so every card keeps one header line at the narrowest column; the full label is the tooltip
+// and stays in the accessible name through the screen-reader tail.
+function cardBadge(status) {
+  const s = STATUS[status];
+  const [head, ...rest] = s.label.split(" · ");
+  const tail = rest.length ? html`<span class="sr"> · ${rest.join(" · ")}</span>` : "";
+  return html`<span class="pill tone-${s.tone}${status === "leased" ? " live" : ""}" title="${s.label}">${head}${tail}</span>`;
+}
+
+function card(state, job) {
+  const t = jobTimes(job);
+  const last = (job.events || [])[(job.events || []).length - 1];
+  let badge = "";
+  if (["rejected", "blocked", "dead", "leased", "awaiting_review"].includes(job.status)) badge = cardBadge(job.status);
+  else if (job.status === "pending" && last?.status === "retrying") {
+    const full = `Retrying · attempt ${job.attempt}/${job.maxAttempts}`;
+    badge = html`<span class="pill tone-retry" title="${full}">Retry ${job.attempt}/${job.maxAttempts}<span class="sr"> · attempt ${job.attempt} of ${job.maxAttempts}</span></span>`;
+  }
+  const foot = job.status === "pending" || job.status === "awaiting_review"
+    ? html`<span>Queued ${rel(job.createdAt)}</span><span>${job.status === "awaiting_review" ? "needs review" : ms(job.runAfter) > Date.now() ? "runs " + rel(job.runAfter) : "ready"}</span>`
+    : html`<span title="${abs(new Date(t.start).toISOString())}">Started ${rel(new Date(t.start).toISOString())}</span><span ${t.running ? html`data-dur-since="${new Date(t.start).toISOString()}"` : ""}>${dur(t.total)}</span>`;
+  return html`<a class="card ${job.status === "leased" ? "running" : ""}" href="/runs/${job.id}" data-link data-job="${job.id}">
+    <div class="top"><span class="series-id">${jobSeries(state, job)}</span>${badge}</div>
+    <div class="title ${job.title ? "" : "none"}" title="${job.title || "Untitled run"}">${job.title || "Untitled run"}</div>
+    ${stageRail(job)}
+    <div class="foot">${foot}</div></a>`;
+}
+
+// ---------------------------------------------------------------- Runs
+const filterMemo = { f: "all", q: "" };
+export function runsView() {
+  let root;
+  const FILTERS = [["all", "All"], ["running", "Running"], ["waiting", "Waiting"], ["finished", "Finished"], ["failed", "Failed"]];
+  const view = {
+    title: "Runs",
+    mount(el, params, ctx) {
+      root = el;
+      setHtml(el, html`<div class="page-head"><div><span class="eyebrow">Desk / Runs</span><h1>Runs</h1><p class="sub">Every job the pipeline has picked up.</p></div></div>
+        <div class="toolbar"><div class="filters" id="filters" role="group" aria-label="Filter by status"></div>
+          <label class="search"><span class="sr">Search runs</span>${icon("search")}<input type="search" id="q" placeholder="Search id, series, or title" autocomplete="off" value="${filterMemo.q}"></label></div>
+        <div id="runs-body"></div>`);
+      $(el, "#q").addEventListener("input", (e) => { filterMemo.q = e.target.value; view.update(store.state); });
+      el.addEventListener("click", (e) => {
+        const f = e.target.closest("[data-filter]");
+        if (f) { filterMemo.f = f.dataset.filter; view.update(store.state); return; }
+        if (e.target.closest("[data-tick]")) { startTick({ dryRun: true }); return; }
+      });
+    },
+    update(s) {
+      const jobs = s.jobs || [];
+      const counts = { all: jobs.length };
+      for (const g of Object.keys(GROUPS)) counts[g] = jobs.filter((j) => GROUPS[g].statuses.includes(j.status)).length;
+      setHtml($(root, "#filters"), html`${FILTERS.map(([k, l]) => html`<button type="button" class="filter" data-filter="${k}" aria-pressed="${filterMemo.f === k}">${l}<span class="n">${counts[k]}</span></button>`)}`);
+      const q = filterMemo.q.trim().toLowerCase();
+      const rows = jobs.filter((j) => (filterMemo.f === "all" || groupOf(j.status) === filterMemo.f)
+        && (!q || [j.id, jobSeries(s, j), j.title || ""].some((x) => String(x).toLowerCase().includes(q))));
+      const body = $(root, "#runs-body");
+      if (!jobs.length) {
+        setHtml(body, html`<div class="panel">${emptyState("film", "No runs yet", "Nothing has run on this machine. A dry-run shows the whole pipeline without publishing.", html`<button type="button" class="btn" data-tick="dry">${icon("play")}Dry-run</button>`)}</div>`);
+        return;
+      }
+      if (!rows.length) { setHtml(body, html`<div class="panel">${emptyState("clock", "No run matches", "Try another filter or clear the search.")}</div>`); return; }
+      setHtml(body, html`<div class="table-wrap"><table><thead><tr><th>Status</th><th>Run</th><th>Series</th><th>Stage</th><th>Started</th><th class="num">Duration</th></tr></thead><tbody>
+        ${rows.map((j) => {
+          const t = jobTimes(j);
+          const iso = isFinite(t.start) ? new Date(t.start).toISOString() : j.createdAt;
+          const open = html`href="/runs/${j.id}" data-link tabindex="-1"`;
+          return html`<tr class="row-link" data-job="${j.id}">
+            <td><a class="cell-link" ${open}>${statusPill(j.status, { iconic: true })}</a></td>
+            <td><a class="cover cell-link" href="/runs/${j.id}" data-link><span class="t">${j.title || "Untitled run"}</span><div class="sub mono">${short(j.id)}</div></a></td>
+            <td><a class="cell-fill" ${open} aria-hidden="true"></a><a class="series-link" href="/series/${jobSeries(s, j)}" data-link>${jobSeries(s, j)}</a></td>
+            <td><a class="cell-link" ${open}>${cap(j.status === "succeeded" ? "done" : j.stage)}</a></td>
+            <td class="nowrap" title="${abs(iso)}"><a class="cell-link" ${open}>${rel(iso)}</a></td>
+            <td class="num"><a class="cell-link" ${open} ${t.running ? html`data-dur-since="${iso}"` : ""}>${dur(t.total)}</a></td></tr>`;
+        })}</tbody></table></div>`);
+    },
+  };
+  return view;
+}
+
+// ---------------------------------------------------------------- Run detail
+const PUB_PHASE = { missing_key: "No key, upload skipped" };
+function disclosureText(d) {
+  if (d == null) return "none recorded";
+  if (typeof d === "string") return d;
+  if (typeof d === "object") return Object.entries(d).map(([k, v]) => `${k}: ${typeof v === "object" ? JSON.stringify(v) : v}`).join(" · ") || "none recorded";
+  return String(d);
+}
+function publishText(p) {
+  if (p.errorCode && PUB_PHASE[p.errorCode]) return PUB_PHASE[p.errorCode];
+  if (p.externalId) return `Published · ${p.externalId}`;
+  const base = cap(String(p.phase || "pending").replace(/_/g, " "));
+  return [base, p.errorCode, p.errorMessage].filter(Boolean).join(" · ");
+}
+
+export function runView() {
+  let root, ctx, id, run = null, missing = false, confirming = false, notice = null, outKey = null, lastSig = "";
+  const open = new Set();
+  let loading = false;
+
+  async function load() {
+    if (loading) return; loading = true;
+    try {
+      const r = await fetch(`/api/runs/${encodeURIComponent(id)}`).then(async (res) => ({ status: res.status, body: await res.json().catch(() => null) }));
+      if (r.status === 404 || !r.body?.run) { if (r.status === 404) { missing = true; run = null; } }
+      else { run = r.body.run; missing = false; }
+    } catch { /* offline: keep what we have */ }
+    loading = false;
+    render();
+  }
+
+  function render() {
+    if (missing) {
+      setHtml(root, html`<a class="crumb" href="/runs" data-link>${icon("chevronRight")}Runs</a><div class="panel">${emptyState("alert", "Run not found", "This run id is not in the local database.", html`<a class="btn" href="/runs" data-link>Back to runs</a>`)}</div>`);
+      return;
+    }
+    if (!run) return;
+    renderHead(); renderTimeline(); renderSide();
+  }
+
+  function renderHead() {
+    const s = store.state;
+    const t = jobTimes(run);
+    const iso = (n) => (isFinite(n) ? new Date(n).toISOString() : null);
+    const canRetry = ["pending", "rejected", "blocked", "dead"].includes(run.status);
+    const canCancel = run.status === "leased";
+    const cancelUi = confirming
+      ? html`<span class="confirm">Cancel this run?<button type="button" class="btn danger solid sm" data-act="cancel-yes">Yes, cancel</button><button type="button" class="btn ghost sm" data-act="cancel-no">Keep running</button></span>`
+      : html`<button type="button" class="btn danger" data-act="cancel" ${canCancel ? "" : "disabled"}>${icon("cancel")}Cancel</button>`;
+    const seriesId = seriesFor(s, run);
+    setHtml($(root, "#head"), html`
+      <a class="crumb" href="/runs" data-link>${icon("chevronRight")}Runs</a>
+      <div class="run-head">
+        <div class="run-title">${statusPill(run.status, { iconic: true })}<h1>${run.title || "Untitled run"}</h1></div>
+        <dl class="meta">
+          <div><dt>Run id</dt><dd><span class="mono">${short(run.id)}</span>${copyBtn(run.id, "Copy run id")}</dd></div>
+          <div><dt>Series</dt><dd><a href="/series/${seriesId}" data-link>${seriesId}</a></dd></div>
+          <div><dt>Engine</dt><dd data-engine="${run.engine ? run.engine.id : ""}">${run.engine ? run.engine.label : "—"}</dd></div>
+          <div><dt>Scene</dt><dd data-scene="${run.scene ? run.scene.source : ""}" title="${run.scene && run.scene.dir ? run.scene.dir : ""}">${run.scene ? (run.scene.source === "agent" ? "Agent-written" : "Default template") : "—"}</dd></div>
+          <div><dt>Attempt</dt><dd>${run.attempt} / ${run.maxAttempts}</dd></div>
+          <div><dt>Started</dt><dd title="${isFinite(t.start) ? abs(iso(t.start)) : ""}">${isFinite(t.start) ? rel(iso(t.start)) : "Not started"}</dd></div>
+          <div><dt>Finished</dt><dd title="${TERMINAL.has(run.status) ? abs(iso(t.end)) : ""}">${TERMINAL.has(run.status) ? rel(iso(t.end)) : "—"}</dd></div>
+          <div><dt>Total duration</dt><dd ${t.running ? html`data-dur-since="${iso(t.start)}"` : ""}>${dur(t.total)}</dd></div>
+        </dl>
+        <div class="actions">${run.status === "awaiting_review" ? html`<a class="btn" href="/review" data-link>${icon("check")}Review it</a>` : ""}${run.scene && run.scene.source === "agent" && run.scene.dir ? html`<button type="button" class="btn" data-act="studio" title="Opens a copy of this scene in the visual editor">${icon("external")}Edit in studio</button>` : ""}<button type="button" class="btn" data-act="retry" ${canRetry ? "" : "disabled"}>${icon("retry")}Retry</button>${cancelUi}</div>
+        ${notice ? html`<div class="notice" role="alert"><b>${notice.refusal}</b> ${notice.fix}</div>` : ""}
+      </div>
+      ${run.lastError ? html`<div class="callout" role="alert">${icon("alert")}<div><p class="t">Last error</p><p>${run.lastError}</p></div></div>` : ""}`);
+  }
+
+  function renderTimeline() {
+    const infos = STAGES.map((s) => stageInfo(run, s)).filter(Boolean);
+    const body = $(root, "#timeline");
+    if (!infos.length) {
+      setHtml(body, emptyState("clock", "No stage has started", "Events show up here as soon as the first stage begins."));
+      return;
+    }
+    const allEv = run.events || [];
+    const t0 = Math.min(...infos.map((i) => i.startAt));
+    const running = run.status === "leased" || infos.some((i) => i.open);
+    const t1 = running ? Date.now() : Math.max(...allEv.filter((e) => e.status !== "running").map((e) => ms(e.at)), t0);
+    const span = Math.max(1, t1 - t0);
+    const ticks = [0, 0.25, 0.5, 0.75, 1].map((f) => dur(span * f));
+    setHtml(body, html`<div class="axis"><span></span><div class="scale">${ticks.map((x) => html`<span>${x}</span>`)}</div><span></span><span></span></div>
+      ${infos.map((i) => {
+        const left = ((i.startAt - t0) / span) * 100;
+        const end = i.open ? t1 : i.endAt;
+        const width = Math.max(0, ((end - i.startAt) / span) * 100);
+        const isOpen = open.has(i.stage);
+        const label = i.open ? dur(Date.now() - i.startAt) : dur(i.durationMs);
+        return html`<div class="tl-row" data-stage="${i.stage}">
+          <button type="button" class="tl-main" data-act="toggle" data-stage="${i.stage}" aria-expanded="${isOpen}" aria-label="${cap(i.stage)}, ${i.status}, ${label}">
+            <span class="tl-name">${i.stage}</span>
+            <span class="track"><span class="bar ${i.status}" data-bar="${i.stage}" style="left:${left.toFixed(2)}%;width:max(2px,${width.toFixed(2)}%)"></span></span>
+            <span class="tl-dur">${label}</span><span class="tl-chev">${icon("chevronRight")}</span></button>
+          ${isOpen ? html`<div class="tl-events"><table><thead><tr><th>Time</th><th>Status</th><th>Attempt</th><th>Code</th><th>Message</th></tr></thead><tbody>
+            ${i.events.map((e) => html`<tr><td class="nowrap mono" title="${abs(e.at)}">${new Date(e.at).toLocaleTimeString([], { hour12: false })}</td><td><span class="pill tone-${stageTone(e.status)}">${e.status}</span></td><td>${e.attempt}</td><td class="mono">${e.code || "—"}</td><td class="msg">${e.message || "—"}${e.durationMs != null ? html` <span class="muted">(${dur(e.durationMs)})</span>` : ""}</td></tr>`)}
+          </tbody></table></div>` : ""}</div>`;
+      })}`);
+  }
+
+  function renderSide() {
+    const key = JSON.stringify([run.output, run.content, run.publish, run.publications, run.checks, run.id, run.scene]);
+    if (key === outKey) return;
+    outKey = key;
+    const c = run.content;
+    const out = run.output || {};
+    const video = out.mp4
+      ? html`<div class="video-box"><video controls preload="metadata" src="/media/runs/${run.id}.mp4" playsinline></video></div>`
+      : html`<div class="video-ph">${icon("film")}<p>The render has not produced a file yet.</p></div>`;
+    const transcript = out.transcript ? html`<details class="fold" id="transcript"><summary>Transcript</summary><pre id="transcript-body">Loading…</pre></details>` : "";
+    const content = c ? html`<div class="kv">
+        <div><p class="k">Title</p><p class="v">${c.title}</p></div>
+        <div><p class="k">Hook</p><p class="v">${c.hook}</p></div>
+        <div><p class="k">Hashtags</p><div class="chips">${(c.hashtags || []).map((h) => html`<span class="chip">${h}</span>`)}</div></div></div>`
+      : html`<p class="muted">No script yet.</p>`;
+    const pubs = (run.publish || []).map((p) => {
+      const pub = (run.publications || []).find((x) => x.platform === p.platform);
+      const tone = p.errorCode === "missing_key" ? "skip" : p.externalId ? "ok" : p.errorCode ? "block" : "wait";
+      return html`<div class="pub"><div class="row"><span>${platformName(p.platform)}</span><span class="pill tone-${tone} plain">${cap(String(p.phase).replace(/_/g, " "))}</span></div>
+        <p class="detail">${publishText(p)}${p.errorMessage && p.errorCode === "missing_key" ? html` <span class="muted">· ${p.errorMessage}</span>` : ""}</p>
+        ${pub ? html`<p class="detail">Disclosure: ${disclosureText(pub.disclosure)}</p>` : ""}</div>`;
+    });
+    const orphan = (run.publications || []).filter((x) => !(run.publish || []).some((p) => p.platform === x.platform))
+      .map((x) => html`<div class="pub"><div class="row"><span>${platformName(x.platform)}</span><span class="pill tone-ok plain">Published</span></div><p class="detail">Published · ${x.externalId || "no id"}</p><p class="detail">Disclosure: ${disclosureText(x.disclosure)}</p></div>`);
+    const sc = run.scene;
+    const preview = sc && sc.source === "agent" && sc.kind === "html" && sc.dir
+      ? html`<section class="panel" id="preview" aria-label="Live preview"><div class="panel-head"><h2>Preview</h2><span class="sub">Plays the scene with its voice. Captions and the AI label are as they will be rendered.</span></div><div class="panel-body"><div class="preview-box"><iframe title="Scene preview" data-preview src="/preview/runs/${run.id}/" sandbox="allow-scripts" allow="autoplay" loading="lazy"></iframe></div></div></section>`
+      : sc && sc.source === "agent" && sc.kind === "tsx"
+        ? html`<section class="panel" id="preview"><div class="panel-head"><h2>Preview</h2></div><div class="panel-body"><p class="muted" data-preview-note>Live preview is for HTML scenes. This is a Remotion scene, so it keeps the frame preview: the rendered video below.</p></div></section>`
+        : "";
+    setHtml($(root, "#side"), html`${preview}<section class="panel"><div class="panel-head"><h2>Output</h2><span class="sub">${[out.durationSec != null ? `${out.durationSec} s` : "", out.width && out.height ? `${out.width}×${out.height}` : "", out.bytes ? `${(out.bytes / 1048576).toFixed(1)} MB` : ""].filter(Boolean).join(" · ")}</span></div><div class="panel-body stack" style="gap:14px">${video}${transcript}</div></section>`);
+    const checks = run.checks || [];
+    const failed = checks.filter((c) => c.status === "fail").length;
+    const checkRows = checks.map((c) => html`<li class="check" data-check="${c.id}" data-status="${c.status}">
+        <div class="row"><span class="mono">${c.id}</span><span class="pill tone-${c.status === "pass" ? "ok" : c.status === "skipped" ? "skip" : c.severity === "compliance" ? "block" : "rej"} plain">${c.status === "pass" ? "Pass" : c.status === "skipped" ? "Skipped" : c.severity === "compliance" ? "Fail · compliance" : "Fail · quality"}</span></div>
+        <p class="detail">${c.message}</p>
+        ${c.fix ? html`<p class="detail" data-fix><b>Fix:</b> ${c.fix}</p>` : ""}</li>`);
+    setHtml($(root, "#below"), html`
+      <section class="panel" id="checks"><div class="panel-head"><h2>Checks</h2><span class="sub">${checks.length ? `${checks.length - failed} of ${checks.length} passed` : ""}</span></div><div class="panel-body">${checks.length ? html`<ul class="checks" style="list-style:none;margin:0;padding:0;display:grid;gap:12px">${checkRows}</ul>` : html`<p class="muted">No checks ran for this run yet.</p>`}</div></section>
+      <section class="panel"><div class="panel-head"><h2>Content</h2></div><div class="panel-body">${content}</div></section>
+      <section class="panel"><div class="panel-head"><h2>Publish</h2></div><div class="panel-body">${pubs.length || orphan.length ? html`${pubs}${orphan}` : html`<p class="muted">Nothing has reached the publish stage.</p>`}</div></section>`);
+  }
+
+  async function act(name, el) {
+    if (name === "toggle") {
+      const st = el.dataset.stage; open.has(st) ? open.delete(st) : open.add(st); renderTimeline();
+      $(root, `[data-act="toggle"][data-stage="${st}"]`)?.focus();
+      return;
+    }
+    if (name === "studio") {
+      // The tab opens at once (a popup after an await is blocked) and is pointed at the studio when it is up.
+      const tab = window.open("about:blank", "_blank");
+      if (tab) tab.opener = null;
+      notice = null; el.disabled = true;
+      const r = await api("/api/studio", { run: id });
+      el.disabled = false;
+      if (!r.ok) { tab?.close(); notice = r; refusalToast(r); renderHead(); return; }
+      if (tab) tab.location.href = r.url;
+      notice = { refusal: "Editing a copy.", fix: `${r.message}${tab ? "" : ` Open ${r.url}`}` };
+      toast("Studio opened", { detail: r.dir });
+      renderHead();
+      return;
+    }
+    if (name === "cancel") { confirming = true; renderHead(); return; }
+    if (name === "cancel-no") { confirming = false; renderHead(); return; }
+    const verb = name === "retry" ? "retry" : "cancel";
+    confirming = false; notice = null;
+    el.disabled = true;
+    const r = await api(`/api/jobs/${encodeURIComponent(id)}/${verb}`, {});
+    if (!r.ok) { notice = r; refusalToast(r); } else toast(verb === "retry" ? "Run queued again" : "Run cancelled");
+    await load(); store.refresh?.();
+  }
+
+  return {
+    title: "Run",
+    mount(el, params, c) {
+      root = el; ctx = c; id = params.id;
+      setHtml(el, html`<div id="head"></div><div class="run-grid"><div class="stack"><section class="panel" aria-label="Timeline"><div class="panel-head"><h2>Timeline</h2><span class="sub">Stages on one time axis</span></div><div id="timeline"></div></section><div id="below" class="stack"></div></div><div id="side"></div></div>`);
+      el.addEventListener("click", (e) => {
+        const a = e.target.closest("[data-act]");
+        if (a) act(a.dataset.act, a);
+      });
+      el.addEventListener("toggle", async (e) => {
+        if (e.target.id === "transcript" && e.target.open && !e.target.dataset.loaded) {
+          e.target.dataset.loaded = "1";
+          try {
+            const res = await fetch(`/media/runs/${encodeURIComponent(id)}.txt`);
+            $(el, "#transcript-body").textContent = res.ok ? await res.text() : "No transcript file.";
+          } catch { $(el, "#transcript-body").textContent = "Transcript unavailable."; }
+        }
+      }, true);
+      load();
+    },
+    update(s) {
+      const job = (s.jobs || []).find((j) => j.id === id);
+      if (!run) return;
+      const sig = job ? `${job.status}|${job.updatedAt}|${(job.events || []).length}` : "";
+      if (!TERMINAL.has(run.status) || sig !== lastSig) { lastSig = sig; load(); } else renderHead();
+    },
+  };
+}

package/src/desk/ui/views-screens.js

@@ -0,0 +1,163 @@
+// Autopilot screens (spec 015 B): Publications, Sources, Engage, Trends.
+// Each reads its own /api route. Unknown values stay "—" with a label; nothing is estimated.
+import { html, icon, setHtml, $, read, api, toast, refusalToast, rel, abs } from "./core.js";
+import { emptyState, platformName, when } from "./components.js";
+import { DASH, compact, TREND_REASONS } from "./metrics-math.js";
+
+const OFFLINE = { ok: false, refusal: "The desk could not be reached.", fix: "Check that `npx vfrey dashboard` is still running." };
+const load = (path) => read(path).catch(() => OFFLINE);
+const safeUrl = (u) => (/^https:\/\//i.test(String(u || "")) ? u : "");
+const head = (eyebrow, title, sub) => html`<div class="page-head"><div><span class="eyebrow">Desk / ${eyebrow}</span><h1>${title}</h1><p class="sub">${sub}</p></div></div>`;
+const failed = (r) => html`<div class="panel" data-testid="screen-error">${emptyState("alert", "Could not load this screen", r.refusal || "Something went wrong.", html`<p class="hint">${r.fix || ""}</p>`)}</div>`;
+
+// A view that refetches on every state poll and on demand.
+function screen({ title, eyebrow, heading, sub, path, draw, onMount }) {
+  let root; let data = null; let busy = false; const ui = {};
+  const body = () => $(root, "#sc-body");
+  const refresh = async () => {
+    if (busy || !root) return;
+    busy = true;
+    const r = await load(typeof path === "function" ? path(ui) : path);
+    busy = false;
+    if (!root) return;
+    data = r;
+    paint();
+  };
+  const paint = () => { if (!root || !data) return; setHtml(body(), data.ok ? draw(data, ui) : failed(data)); };
+  return {
+    title,
+    mount(el) {
+      root = el;
+      setHtml(el, html`${head(eyebrow, heading, sub)}<div id="sc-body"><div class="panel"><p class="muted" style="padding:20px">Loading…</p></div></div>`);
+      onMount?.(el, ui, { refresh, paint, get: () => data });
+      refresh();
+    },
+    update() { refresh(); },
+  };
+}
+
+// ---------- Publications ----------
+export function publicationsView() {
+  const select = (id, label, options, value) => html`<label class="field"><span class="muted">${label}</span><select id="${id}" aria-label="${label}"><option value="">All</option>${options.map(([v, l]) => html`<option value="${v}" ${v === value ? "selected" : ""}>${l}</option>`)}</select></label>`;
+  return screen({
+    title: "Publications",
+    eyebrow: "Publications",
+    heading: "Publications",
+    sub: "Every video sent to a platform, and every dry run that was not. The disclosure column is the request field and value, not a promise.",
+    path: (ui) => `/api/publications?${new URLSearchParams(Object.entries({ series: ui.series || "", platform: ui.platform || "" }).filter(([, v]) => v))}`,
+    onMount(el, ui, { refresh }) {
+      ui.series = ""; ui.platform = "";
+      el.addEventListener("change", (e) => {
+        if (e.target.id === "f-series") ui.series = e.target.value;
+        else if (e.target.id === "f-platform") ui.platform = e.target.value;
+        else return;
+        refresh();
+      });
+    },
+    draw(d, ui) {
+      const filters = html`<div class="add-row screen-filters">${select("f-series", "Series", d.series.map((s) => [s, s]), ui.series)}${select("f-platform", "Platform", d.platforms.map((p) => [p, platformName(p)]), ui.platform)}</div>`;
+      if (!d.publications.length) return html`${filters}<div class="panel">${emptyState("film", "No publications", ui.series || ui.platform ? "Nothing matches these filters." : "Nothing has been published yet. A series in dry-run records a dry-run publication here.")}</div>`;
+      const row = (p) => html`<tr data-publication="${p.id}" data-status="${p.status}">
+        <td><span class="t">${p.title || "(untitled)"}</span><span class="gap">${p.seriesId} · <a href="/runs/${p.jobId}" data-link>run ${String(p.jobId).slice(0, 8)}</a></span></td>
+        <td>${platformName(p.platform)}</td>
+        <td>${p.dryRun ? html`<span class="chip warn" data-badge="dry-run">Dry run</span>` : html`<span class="chip ok">Published</span>`}</td>
+        <td data-cell="external">${p.dryRun ? html`<span class="muted">${DASH}</span><span class="gap">nothing was uploaded</span>`
+          : safeUrl(p.externalUrl) ? html`<a href="${safeUrl(p.externalUrl)}" target="_blank" rel="noopener noreferrer">${icon("external")} ${p.externalId}</a>`
+          : html`<span class="mono">${p.externalId || DASH}</span><span class="gap">${platformName(p.platform)} gives no public link for this id</span>`}</td>
+        <td data-cell="disclosure">${p.disclosure.field ? html`<code>${p.disclosure.field} = ${String(p.disclosure.value)}</code><span class="gap" data-sent="${p.disclosureSent}">${p.disclosureSent ? "sent with the upload" : "would be sent (dry run, not sent)"}</span>` : html`<span class="muted">${DASH}</span><span class="gap">no proof stored</span>`}</td>
+        <td class="nowrap">${when(p.publishedAt)}</td></tr>`;
+      return html`${filters}<div class="table-wrap"><table><thead><tr><th>Video</th><th>Platform</th><th>Status</th><th>External link</th><th>Disclosure proof</th><th>Time</th></tr></thead><tbody>${d.publications.map(row)}</tbody></table></div>`;
+    },
+  });
+}
+
+// ---------- Sources ----------
+const KINDS = { rss: "RSS feed", subreddit: "Subreddit", youtubeChannel: "YouTube channel", youtubeTrending: "YouTube trending", "vfrey-topics": "vfrey Topics (niche id)" };
+export function sourcesView() {
+  return screen({
+    title: "Sources",
+    eyebrow: "Sources",
+    heading: "Sources",
+    sub: "What each series reads for ideas, and what the last read returned.",
+    path: "/api/sources",
+    onMount(el, ui, { refresh, paint }) {
+      ui.notice = null;
+      el.addEventListener("submit", async (e) => {
+        if (e.target.id !== "src-form") return;
+        e.preventDefault();
+        const f = new FormData(e.target);
+        const r = await api(`/api/series/${encodeURIComponent(f.get("series"))}/sources`, { kind: f.get("kind"), value: String(f.get("value") || "").trim() });
+        if (!r.ok) { ui.notice = r; paint(); return refusalToast(r); }
+        ui.notice = null; toast("Source added"); await refresh();
+      });
+      el.addEventListener("click", async (e) => {
+        const b = e.target.closest("[data-remove]"); if (!b) return;
+        b.disabled = true;
+        const r = await api(`/api/sources/${encodeURIComponent(b.dataset.remove)}/delete`, {});
+        if (!r.ok) { b.disabled = false; return refusalToast(r); }
+        toast("Source removed"); await refresh();
+      });
+    },
+    draw(d, ui) {
+      const result = (x) => x.lastCode ? html`<span class="chip bad" data-result="error" data-code="${x.lastCode}">${x.lastCode}</span>`
+        : x.lastCount != null ? html`<span class="chip ok" data-result="ok">${x.lastCount} candidate${x.lastCount === 1 ? "" : "s"}</span>`
+        : html`<span class="muted" data-result="none">Not fetched yet</span>`;
+      const warn = d.warnings.length ? html`<div class="notice" role="alert" data-testid="topics-warning"><b>topics_unavailable</b> ${d.warnings[0].message}${d.warnings.length > 1 ? ` (${d.warnings.length - 1} more)` : ""} Other sources still ran. See <a href="/warnings" data-link>Warnings</a>.</div>` : "";
+      const form = d.series.length ? html`<form class="add-row src-form" id="src-form"><select name="series" aria-label="Series">${d.series.map((s) => html`<option value="${s}">${s}</option>`)}</select>
+        <select name="kind" aria-label="Source kind">${Object.entries(KINDS).map(([k, l]) => html`<option value="${k}">${l}</option>`)}</select>
+        <input type="text" name="value" required aria-label="Source value" placeholder="https://… or r/subreddit or channel id or niche id" autocomplete="off"><button type="submit" class="btn">${icon("plus")}Add source</button></form>
+        ${ui.notice ? html`<div class="notice" role="alert" data-testid="source-refusal" data-code="${ui.notice.code || ""}"><b>${ui.notice.refusal}</b> ${ui.notice.fix || ""}</div>` : ""}` : "";
+      const groups = d.series.length ? d.series.map((s) => {
+        const list = d.sources.filter((x) => x.seriesId === s);
+        return html`<section class="panel" data-series="${s}"><div class="panel-head"><h2>${s}</h2><span class="sub">${list.length} source${list.length === 1 ? "" : "s"}</span></div>
+          ${list.length ? html`<div class="table-wrap" style="border:0"><table><thead><tr><th>Kind</th><th>Value</th><th>Last fetch</th><th>Last result</th><th></th></tr></thead><tbody>${list.map((x) => html`<tr data-source="${x.id}"><td><span class="chip">${KINDS[x.kind] || x.kind}</span></td><td class="mono" style="word-break:break-all">${x.value}</td>
+            <td class="nowrap">${x.lastFetchAt ? when(x.lastFetchAt) : html`<span class="muted">${DASH}</span>`}</td><td>${result(x)}</td>
+            <td class="nowrap"><button type="button" class="btn ghost sm" data-remove="${x.id}" aria-label="Remove ${x.value}">${icon("trash")}Remove</button></td></tr>`)}</tbody></table></div>`
+          : html`<p class="muted" style="padding:20px">No source yet. Add one so the series has something to write about.</p>`}</section>`;
+      }) : emptyState("series", "No series yet", "Create a series first, then add its sources here.");
+      return html`<div class="stack">${warn}<section class="panel"><div class="panel-head"><h2>Add a source</h2><span class="sub">Feed addresses must start with http:// or https://</span></div><div class="panel-body">${form}</div></section>${groups}</div>`;
+    },
+  });
+}
+
+// ---------- Engage ----------
+const STATUS = { replied: ["Replied", "ok"], drafted: ["Drafted, not sent", "warn"], skipped: ["Skipped", ""], blocked: ["Blocked", "bad"] };
+export function engageView() {
+  return screen({
+    title: "Engage",
+    eyebrow: "Engage",
+    heading: "Engage",
+    sub: "Comment replies the engage pass handled, newest first.",
+    path: "/api/engage",
+    draw(d) {
+      const note = html`<p class="hint" data-testid="tiktok-note" style="margin:0 0 16px">${d.note}</p>`;
+      if (!d.replies.length) return html`${note}<div class="panel">${emptyState("clock", "No replies yet", "Replies appear after the engage pass has handled comments on a published video. A series that is not live drafts replies without sending them.")}</div>`;
+      const row = (r) => { const [label, tone] = STATUS[r.status] || [r.status, ""]; return html`<tr data-reply="${r.commentId}" data-status="${r.status}"><td>${platformName(r.platform)}<span class="gap">${r.seriesId}</span></td>
+        <td>${r.comment ? r.comment : html`<span class="muted">${DASH}</span><span class="gap">comment text was not stored</span>`}</td>
+        <td>${r.reply ? r.reply : html`<span class="muted">${DASH}</span>`}</td>
+        <td><span class="chip ${tone}">${label}</span>${r.code ? html`<span class="gap">${r.code}</span>` : ""}</td>
+        <td class="nowrap">${when(r.at)}</td></tr>`; };
+      return html`${note}<div class="table-wrap"><table><thead><tr><th>Platform</th><th>Comment</th><th>Reply</th><th>Status</th><th>Time</th></tr></thead><tbody>${d.replies.map(row)}</tbody></table></div>`;
+    },
+  });
+}
+
+// ---------- Trends ----------
+const signed = (n) => (n === null ? DASH : `${n > 0 ? "+" : n < 0 ? "−" : ""}${compact(Math.abs(n))}`);
+export function trendsView() {
+  return screen({
+    title: "Trends",
+    eyebrow: "Trends",
+    heading: "Trends",
+    sub: "Views gained between the two latest readings of each post. A dash means it cannot be known; nothing is estimated.",
+    path: "/api/trends",
+    draw(d) {
+      if (!d.trends.length) return html`<div class="panel">${emptyState("metrics", "No trends yet", "Trends appear once a published post has been measured twice. Run analytics again after it has been live for a while.")}</div>`;
+      const row = (t) => html`<tr data-trend="${t.seriesId}:${t.platform}"><td>${t.seriesId}</td><td>${platformName(t.platform)}</td>
+        <td class="num"><span data-gained>${signed(t.gained)}</span>${t.gained === null ? html`<span class="gap" data-reason="${t.reason}">${TREND_REASONS[t.reason] || ""}</span>` : ""}</td>
+        <td class="num" data-posts>${t.known} of ${t.of} post${t.of === 1 ? "" : "s"}</td>
+        <td class="nowrap">${t.asOf ? html`<span title="${abs(t.asOf)}" data-asof>as of ${rel(t.asOf)}</span>${t.since ? html`<span class="gap">since ${rel(t.since)}</span>` : ""}` : html`<span class="muted">${DASH}</span>`}</td></tr>`;
+      return html`<div class="table-wrap"><table><thead><tr><th>Series</th><th>Platform</th><th class="num">Views gained</th><th class="num">Posts</th><th>As of</th></tr></thead><tbody>${d.trends.map(row)}</tbody></table></div>`;
+    },
+  });
+}