@vfrey/vfrey 0.0.1 → 1.0.0-beta.0

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

@@ -0,0 +1,188 @@
+// Mail: draft outreach, read and edit a draft, then approve and send it as two separate, confirmed steps. Plus the sender identity.
+// The browser talks only to this desk's own /api/mail routes. The vfrey token stays on the server.
+import { html, icon, setHtml, $, read, api, toast, refusalToast } from "./core.js";
+import { emptyState } from "./components.js";
+
+const KINDS = [["creator_collab", "Creator collab"], ["sponsor", "Sponsor"], ["brand", "Brand"], ["client_update", "Client update"]];
+const STATUSES = ["", "draft", "approved", "sent", "failed", "discarded"];
+const TONE = { draft: "", approved: "warn", sent: "ok", failed: "bad", discarded: "" };
+const offline = () => ({ ok: false, refusal: "The desk could not be reached.", fix: "Check that `npx vfrey dashboard` is still running.", code: "offline" });
+const get = (path) => read(path).catch(offline);
+const day = (iso) => (iso ? String(iso).slice(0, 16).replace("T", " ") + " UTC" : "—");
+const who = (d) => (d.toName ? `${d.toName} <${d.to}>` : d.to || "(no recipient yet)");
+const BLOCKING = ["not_signed_in", "unauthorized", "not_live", "offline", "plan_required"];
+
+export function mailView() {
+  let root;
+  const m = {
+    drafts: null, status: "", open: null, edit: null, identity: undefined, identityOpen: false, error: null,
+    confirm: null, busy: false, composing: false, form: { kind: "creator_collab", need: "", to: "", platform: "tiktok", handle: "", tone: "" },
+  };
+
+  const stateBox = (err) => {
+    const out = err.code === "not_signed_in" || err.code === "unauthorized" || err.code === "not_live";
+    const cmd = out ? html`<p><code data-testid="login-command">npx vfrey login</code></p>` : "";
+    return html`<div class="panel" data-testid="mail-state" data-state="${err.code || "error"}">${emptyState("alert", out ? "Sign in to use Mail" : err.code === "plan_required" ? "Mail needs the Mail add-on" : "Mail is not available", err.refusal || "Something went wrong.", html`${cmd}<p class="hint">${err.fix || ""}</p>`)}</div>`;
+  };
+
+  const identityPanel = () => {
+    const i = m.identity;
+    if (i === undefined) return html`<section class="panel"><p class="muted" style="padding:20px">Loading identity…</p></section>`;
+    const f = i || { fromName: "", senderOrg: "", replyTo: "", postalAddress: "", verified: false };
+    const summary = i
+      ? html`<span data-testid="identity-state" data-verified="${i.verified ? "true" : "false"}" class="chip ${i.verified ? "ok" : "warn"}">${i.verified ? "verified" : "not verified"}</span> <span class="sub">${i.fromName} · replies to ${i.replyTo}</span>`
+      : html`<span data-testid="identity-state" data-verified="none" class="chip warn">not set up</span> <span class="sub">Every message carries your name and postal address.</span>`;
+    return html`<section class="panel" data-testid="identity-panel"><div class="panel-head"><h2>Sender identity</h2><div>${summary} <button type="button" class="btn ghost sm" data-identity-toggle>${m.identityOpen ? "Hide" : i ? "Edit" : "Set up"}</button></div></div>
+      ${i && !i.verified ? html`<p class="hint" style="padding:0 20px">Nothing can be sent until the link we emailed to ${i.replyTo} is opened. Saving again sends a new link.</p>` : ""}
+      ${m.identityOpen ? html`<div class="panel-body"><form id="m-identity" class="stack" style="gap:12px"><div class="add-row" style="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))">
+        <label class="field"><span class="muted">From name</span><input type="text" name="fromName" aria-label="From name" value="${f.fromName}"></label>
+        <label class="field"><span class="muted">Organization</span><input type="text" name="org" aria-label="Organization" value="${f.senderOrg || ""}"></label>
+        <label class="field"><span class="muted">Reply-to email</span><input type="text" name="replyTo" aria-label="Reply-to email" value="${f.replyTo}"></label>
+        <label class="field"><span class="muted">Postal address</span><input type="text" name="postalAddress" aria-label="Postal address" value="${f.postalAddress}"></label></div>
+        <div><button type="submit" class="btn" ${m.busy ? "disabled" : ""}>Save identity</button> <span class="hint">A new reply-to address is emailed a confirmation link.</span></div></form></div>` : ""}</section>`;
+  };
+
+  const composeForm = () => html`<form id="m-compose" class="stack" style="gap:12px"><div class="add-row" style="grid-template-columns:repeat(auto-fit,minmax(160px,1fr))">
+    <label class="field"><span class="muted">Kind</span><select name="kind" aria-label="Kind">${KINDS.map(([id, n]) => html`<option value="${id}" ${id === m.form.kind ? "selected" : ""}>${n}</option>`)}</select></label>
+    <label class="field"><span class="muted">To (email)</span><input type="text" name="to" aria-label="To" placeholder="optional for a creator with a public contact" value="${m.form.to}"></label>
+    <label class="field"><span class="muted">Creator platform</span><select name="platform" aria-label="Creator platform">${["tiktok", "instagram", "youtube"].map((p) => html`<option value="${p}" ${p === m.form.platform ? "selected" : ""}>${p}</option>`)}</select></label>
+    <label class="field"><span class="muted">Creator handle</span><input type="text" name="handle" aria-label="Creator handle" placeholder="ana.cooks" value="${m.form.handle}"></label>
+    <label class="field"><span class="muted">Tone</span><input type="text" name="tone" aria-label="Tone" placeholder="friendly" value="${m.form.tone}"></label></div>
+    <label class="field"><span class="muted">What should it say</span><textarea name="need" aria-label="What should it say" rows="3">${m.form.need}</textarea></label>
+    <div><button type="submit" class="btn" ${m.busy ? "disabled" : ""}>${icon("plus")}Write draft</button> <span class="hint">Writing a draft is free and sends nothing.</span></div></form>`;
+
+  const list = () => {
+    if (!m.drafts) return html`<p class="muted" style="padding:20px">Loading drafts…</p>`;
+    const rows = m.drafts.length ? m.drafts.map((d) => html`<div class="list-row" data-draft="${d.id}"><div class="grow"><p class="t"><b>${d.subject}</b></p><p class="sub">${who(d)} · ${d.kind}</p></div><span class="chip ${TONE[d.status] || ""}" data-status>${d.status}</span><button type="button" class="btn secondary sm" data-open="${d.id}">Open</button></div>`)
+      : html`<p class="muted" style="padding:20px" data-testid="mail-empty">No drafts${m.status ? ` with status ${m.status}` : ""}. Press New draft to write one.</p>`;
+    return html`<section class="panel"><div class="panel-head"><h2>Drafts</h2><div><label class="sub">Show <select id="m-status" aria-label="Status">${STATUSES.map((s) => html`<option value="${s}" ${s === m.status ? "selected" : ""}>${s || "all"}</option>`)}</select></label> <button type="button" class="btn secondary sm" data-compose>${icon("plus")}New draft</button></div></div>${m.composing ? html`<div class="panel-body">${composeForm()}</div>` : ""}${rows}</section>`;
+  };
+
+  const confirmBox = (d) => {
+    if (!m.confirm) return "";
+    const sending = m.confirm === "send";
+    return html`<div class="panel" role="alertdialog" aria-label="${sending ? "Confirm send" : "Confirm approve"}" data-testid="mail-confirm" data-action="${m.confirm}" style="border:2px solid currentColor;padding:16px"><p><b>${sending ? "Send this email now?" : "Approve this draft?"}</b></p>
+      <dl style="display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:8px 0"><dt class="muted">To</dt><dd data-testid="confirm-to">${d.to}</dd><dt class="muted">Subject</dt><dd data-testid="confirm-subject">${d.subject}</dd></dl>
+      <p class="sub">${sending ? "This sends a real email to that address and charges one send. It cannot be undone." : "Approving sends nothing. You still press Send as a separate step."}</p>
+      <button type="button" class="btn ${sending ? "danger" : ""}" data-confirm="${m.confirm}" ${m.busy ? "disabled" : ""}>${sending ? "Yes, send it" : "Yes, approve it"}</button> <button type="button" class="btn secondary" data-cancel ${m.busy ? "disabled" : ""}>Cancel</button></div>`;
+  };
+
+  const detail = () => {
+    const d = m.open;
+    const e = m.edit;
+    const editable = ["draft", "approved", "failed"].includes(d.status);
+    const dirty = editable && (e.to !== d.to || e.subject !== d.subject || e.text !== d.text);
+    const canApprove = (d.status === "draft" || d.status === "failed") && !dirty;
+    const canSend = d.status === "approved" && !dirty && m.identity?.verified;
+    return html`<div class="stack" data-testid="mail-detail" data-status="${d.status}"><p><button type="button" class="btn secondary sm" data-back>Back to drafts</button></p>
+      <section class="panel"><div class="panel-head"><div><h2>${d.subject}</h2><span class="sub">${d.kind}${d.creatorRef ? ` · ${d.creatorRef}` : ""} · written ${day(d.createdAt)}</span></div><span class="chip ${TONE[d.status] || ""}" data-testid="detail-status">${d.status}</span></div>
+        <div class="panel-body stack" style="gap:12px">
+          ${d.status === "approved" ? html`<p class="sub">Approved ${day(d.approvedAt)}. It has not been sent. Editing it takes the approval away.</p>` : ""}
+          ${d.status === "sent" ? html`<p class="sub" data-testid="sent-note">Sent ${day(d.sentAt)}${d.deliveryStatus ? ` · ${d.deliveryStatus}` : ""}.</p>` : ""}
+          ${d.status === "failed" ? html`<p class="sub">The provider did not take it${d.error ? `: ${d.error}` : ""}. Nothing was charged. Approve it again to retry.</p>` : ""}
+          <form id="m-edit" class="stack" style="gap:12px">
+            <label class="field"><span class="muted">To</span><input type="text" name="to" aria-label="Recipient" value="${e.to}" ${editable ? "" : "disabled"}></label>
+            <label class="field"><span class="muted">Subject</span><input type="text" name="subject" aria-label="Subject" value="${e.subject}" ${editable ? "" : "disabled"}></label>
+            <label class="field"><span class="muted">Message</span><textarea name="text" aria-label="Message" rows="14" ${editable ? "" : "disabled"}>${e.text}</textarea></label>
+            ${editable ? html`<div><button type="submit" class="btn secondary" ${dirty && !m.busy ? "" : "disabled"}>Save changes</button> ${dirty ? html`<span class="hint">Save your changes before approving or sending.</span>` : ""}</div>` : ""}
+          </form>
+          ${m.confirm ? "" : html`<div data-testid="mail-actions"><button type="button" class="btn" data-ask="approve" ${canApprove && !m.busy ? "" : "disabled"}>Approve</button> <button type="button" class="btn danger" data-ask="send" ${canSend && !m.busy ? "" : "disabled"}>Send</button> ${d.status !== "sent" && d.status !== "discarded" ? html`<button type="button" class="btn ghost" data-discard ${m.busy ? "disabled" : ""}>Discard</button>` : ""}
+            <p class="hint">Approve and Send are separate steps. ${d.status === "approved" && !m.identity?.verified ? "Sending waits until your reply-to address is confirmed." : "Send unlocks once the draft is approved."}</p></div>`}
+          ${confirmBox(d)}
+        </div></section></div>`;
+  };
+
+  const draw = () => {
+    if (!root) return;
+    if (m.error) { setHtml($(root, "#m-body"), stateBox(m.error)); return; }
+    const keep = document.activeElement?.id;
+    setHtml($(root, "#m-body"), html`${identityPanel()}${m.open ? detail() : list()}`);
+    if (keep) document.getElementById(keep)?.focus();
+  };
+
+  const fail = (r) => { if (BLOCKING.includes(r.code)) { m.error = r; draw(); } else refusalToast(r); };
+
+  const loadDrafts = async () => {
+    const r = await get(`/api/mail/drafts${m.status ? `?status=${m.status}` : ""}`);
+    if (!r.ok) { m.drafts = []; fail(r); return; }
+    m.drafts = r.drafts; draw();
+  };
+  const loadIdentity = async () => {
+    const r = await get("/api/mail/identity");
+    if (!r.ok) { m.identity = null; fail(r); return; }
+    m.identity = r.identity; if (!r.identity) m.identityOpen = true; draw();
+  };
+  const show = (d) => { m.open = d; m.edit = { to: d.to, subject: d.subject, text: d.text }; m.confirm = null; draw(); };
+  const refresh = (d) => { show(d); loadDrafts(); };
+
+  return {
+    title: "Mail",
+    mount(el) {
+      root = el;
+      setHtml(el, html`<div class="page-head"><div><span class="eyebrow">Desk / Mail</span><h1>Mail</h1><p class="sub">Write outreach, then approve and send each message yourself. Nothing is sent without you.</p></div></div><div id="m-body"></div>`);
+      el.addEventListener("input", (e) => {
+        const n = e.target.name; const form = e.target.form?.id;
+        if (form === "m-compose" && n in m.form) m.form[n] = e.target.value;
+        if (form === "m-edit" && m.edit && n in m.edit) { m.edit[n] = e.target.value; const d = m.open; const dirty = m.edit.to !== d.to || m.edit.subject !== d.subject || m.edit.text !== d.text; const f = e.target.form; for (const b of f.parentElement.querySelectorAll("[data-ask]")) b.disabled = true; const save = f.querySelector("button[type=submit]"); if (save) save.disabled = !dirty; }
+      });
+      el.addEventListener("change", (e) => {
+        if (e.target.id === "m-status") { m.status = e.target.value; m.drafts = null; draw(); loadDrafts(); return; }
+        if (e.target.form?.id === "m-compose" && e.target.name in m.form) m.form[e.target.name] = e.target.value;
+      });
+      el.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        const id = e.target.id;
+        if (id === "m-compose") {
+          m.busy = true; draw();
+          const r = await api("/api/mail/draft", { kind: m.form.kind, need: m.form.need, to: m.form.to, tone: m.form.tone, platform: m.form.platform, handle: m.form.handle });
+          m.busy = false;
+          if (!r.ok) { refusalToast(r); draw(); return; }
+          m.composing = false; m.form.need = ""; m.form.handle = ""; m.form.to = "";
+          toast("Draft written", { detail: "Nothing was sent." }); refresh(r.draft);
+        } else if (id === "m-edit") {
+          m.busy = true; draw();
+          const r = await api("/api/mail/edit", { id: m.open.id, ...m.edit });
+          m.busy = false;
+          if (!r.ok) { refusalToast(r); draw(); return; }
+          toast("Saved", { detail: r.draft.status === "draft" ? "It needs approving again." : "" }); refresh(r.draft);
+        } else if (id === "m-identity") {
+          const data = Object.fromEntries(new FormData(e.target));
+          m.busy = true; draw();
+          const r = await api("/api/mail/identity", data);
+          m.busy = false;
+          if (!r.ok) { refusalToast(r); draw(); return; }
+          m.identity = r.identity; m.identityOpen = false;
+          toast("Identity saved", { detail: r.verificationEmailed ? `We emailed a confirmation link to ${r.identity.replyTo}.` : "" }); draw();
+        }
+      });
+      el.addEventListener("click", async (e) => {
+        const t = e.target.closest("button"); if (!t) return;
+        if (t.hasAttribute("data-identity-toggle")) { m.identityOpen = !m.identityOpen; draw(); return; }
+        if (t.hasAttribute("data-compose")) { m.composing = !m.composing; draw(); return; }
+        if (t.dataset.open) { const r = await get(`/api/mail/draft?id=${encodeURIComponent(t.dataset.open)}`); if (!r.ok) { fail(r); return; } show(r.draft); return; }
+        if (t.hasAttribute("data-back")) { m.open = null; m.confirm = null; draw(); loadDrafts(); return; }
+        if (t.dataset.ask) { m.confirm = t.dataset.ask; draw(); return; }
+        if (t.hasAttribute("data-cancel")) { m.confirm = null; draw(); return; }
+        if (t.dataset.confirm && m.open) {
+          const action = t.dataset.confirm;
+          m.busy = true; draw();
+          const r = await api(`/api/mail/${action}`, { id: m.open.id, confirm: true });
+          m.busy = false; m.confirm = null;
+          if (!r.ok) { refusalToast(r); draw(); return; }
+          toast(action === "send" ? "Sent" : "Approved", { detail: action === "send" ? `To ${r.draft.to}` : "Nothing was sent yet." }); refresh(r.draft); return;
+        }
+        if (t.hasAttribute("data-discard") && m.open) {
+          m.busy = true; draw();
+          const r = await api("/api/mail/discard", { id: m.open.id });
+          m.busy = false;
+          if (!r.ok) { refusalToast(r); draw(); return; }
+          toast("Discarded", { detail: "It will not be sent." }); refresh(r.draft);
+        }
+      });
+      draw();
+      loadIdentity();
+      loadDrafts();
+    },
+    update() {},
+  };
+}

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

@@ -0,0 +1,123 @@
+// Metrics, Warnings, Settings, not found.
+import { html, icon, setHtml, $, $$, api, toast, refusalToast, store, rel, abs, dur, num, copyText } from "./core.js";
+import { emptyState, platformName, copyBtn } from "./components.js";
+
+import { DASH, buildRows, summarize, describeSum, compact, percent, gapLabel, platformLabel } from "./metrics-math.js";
+
+// A cell is the value, or a dash with a small muted label saying why there is no value. Never a zero.
+function cell(m, field, text) {
+  if (!m) return html`<span class="dash">${DASH}</span>`;
+  const label = gapLabel(m, field);
+  if (m[field] != null && !label) return text;
+  return html`<span class="dash" title="${label}">${DASH}</span><span class="gap" data-gap="${field}">${label}</span>`;
+}
+function revenueCell(m) {
+  if (!m) return html`<span class="dash">${DASH}</span>`;
+  if (m.revenueStatus === "present" && m.estimatedRevenue != null) return html`$${Number(m.estimatedRevenue).toFixed(2)}`;
+  const label = gapLabel(m, "estimatedRevenue");
+  return html`<span class="dash" title="${label}">${DASH}</span><span class="chip ${m.revenueStatus === "forbidden" ? "bad" : "warn"}">${m.revenueStatus}</span><span class="gap" data-gap="estimatedRevenue">${label}</span>`;
+}
+
+export function metricsView() {
+  let root;
+  return {
+    title: "Metrics",
+    mount(el) { root = el; setHtml(el, html`<div class="page-head"><div><span class="eyebrow">Desk / Metrics</span><h1>Metrics</h1><p class="sub">The latest reading for every published post. A dash means the platform did not return a value; nothing here is estimated.</p></div></div><div id="m-body"></div>`); },
+    update(s) {
+      const rows = buildRows(s.metrics || [], s.publications || []);
+      const sum = summarize(rows);
+      const asOf = sum.asOf ? html`<span class="gap" data-asof>as of ${abs(sum.asOf)}</span>` : "";
+      const stats = html`<div class="stats"><div class="panel stat"><span class="sub">Published posts</span><span class="n" id="pub-count">${sum.posts}</span><span class="gap">${sum.dryRuns ? `${sum.dryRuns} dry-run, not measured` : "none are dry-runs"}</span></div>
+        <div class="panel stat"><span class="sub">Posts measured</span><span class="n" id="measured-count">${sum.measured}</span><span class="gap">${sum.measured} of ${sum.posts} published posts have a reading</span></div>
+        <div class="panel stat"><span class="sub">Views, latest readings</span><span class="n" id="views-total">${sum.views.total === null ? DASH : compact(sum.views.total)}</span><span class="gap" id="views-note">${describeSum(sum.views, "views")}</span>${asOf}</div>
+        <div class="panel stat"><span class="sub">Average watch time</span><span class="n" id="watch-mean">${sum.watch.mean === null ? DASH : dur(sum.watch.mean * 1000)}</span><span class="gap" id="watch-note">${sum.watch.mean === null ? `No watch time reported by any of ${sum.watch.of} posts` : `Mean of ${sum.watch.known} of ${sum.watch.of} posts that report it`}</span></div>
+        <div class="panel stat"><span class="sub">Average retention</span><span class="n" id="retention-mean">${percent(sum.retention.mean)}</span><span class="gap" id="retention-note">${sum.retention.mean === null ? `No retention reported by any of ${sum.retention.of} posts` : `Mean of ${sum.retention.known} of ${sum.retention.of} posts that report it`}</span></div></div>`;
+      const row = (r) => {
+        const m = r.metric;
+        const post = html`<td>${platformName(r.platform)}</td><td class="mono">${r.externalId || DASH}</td>`;
+        if (!m) return html`<tr data-kind="${r.kind}">${post}<td class="num">${DASH}</td><td class="num">${DASH}</td><td class="num">${DASH}</td><td class="num">${DASH}</td><td><span class="gap" data-reason>${r.reason}</span></td></tr>`;
+        return html`<tr data-kind="measured">${post}<td class="num">${cell(m, "views", num(m.views))}</td><td class="num">${cell(m, "watchTimeSec", m.watchTimeSec == null ? DASH : dur(m.watchTimeSec * 1000))}</td><td class="num">${cell(m, "retention", percent(m.retention))}</td><td class="num">${revenueCell(m)}</td><td class="nowrap" title="${abs(m.capturedAt)}">as of ${rel(m.capturedAt)}<span class="gap">from ${platformLabel(m.platform)}</span></td></tr>`;
+      };
+      const table = rows.length ? html`<div class="table-wrap"><table><thead><tr><th>Platform</th><th>Post id</th><th class="num">Views</th><th class="num">Watch time</th><th class="num">Retention</th><th class="num">Revenue</th><th>As of</th></tr></thead><tbody>${rows.map(row)}</tbody></table></div>`
+        : html`<div class="panel">${emptyState("metrics", "No metrics yet", "Metrics appear after a published post has been measured. Run analytics once a post is live.")}</div>`;
+      const notes = html`<section class="panel" id="m-notes"><div class="panel-head"><h2>What the platforms do not tell us</h2></div><div class="panel-body"><ul class="hint" style="margin:0;padding-left:18px">
+        <li>Revenue: not available from the official API where the scope is forbidden or the report is empty. It is never shown as zero.</li>
+        <li>Strikes and demonetization: not exposed by the official API.</li>
+        <li>Watch time and retention: returned by YouTube; watch time also by Facebook. TikTok and Instagram do not return them.</li></ul></div></section>`;
+      setHtml($(root, "#m-body"), html`${stats}${table}${notes}`);
+    },
+  };
+}
+
+export function warningsView() {
+  let root;
+  return {
+    title: "Warnings",
+    mount(el) {
+      root = el;
+      setHtml(el, html`<div class="page-head"><div><span class="eyebrow">Desk / Warnings</span><h1>Warnings</h1><p class="sub">Things the pipeline wants a person to look at.</p></div></div><div id="w-body"></div>`);
+      el.addEventListener("click", async (e) => {
+        const b = e.target.closest("[data-ack]"); if (!b) return;
+        b.disabled = true;
+        const r = await api(`/api/warnings/${encodeURIComponent(b.dataset.ack)}/ack`, {});
+        if (!r.ok) { b.disabled = false; return refusalToast(r); }
+        toast("Warning acknowledged"); store.refresh?.();
+      });
+    },
+    update(s) {
+      const w = s.warnings || [];
+      const open = w.filter((x) => !x.ackedAt), done = w.filter((x) => x.ackedAt);
+      if (!w.length) { setHtml($(root, "#w-body"), html`<div class="panel">${emptyState("done", "All clear", "No warnings. The pipeline will list anything that needs you here.")}</div>`); return; }
+      const row = (x) => html`<div class="warn-row ${x.ackedAt ? "acked" : ""}" data-warning="${x.id}">${icon(x.ackedAt ? "done" : "alert", "ic")}
+        <div class="grow"><p class="code">${x.code}</p><p class="msg">${x.message}</p><p class="sub">${x.jobId ? html`<a href="/runs/${x.jobId}" data-link>Run ${String(x.jobId).slice(0, 8)}</a> · ` : ""}${x.ackedAt ? `Acknowledged ${rel(x.ackedAt)}` : rel(x.createdAt)}</p></div>
+        ${x.ackedAt ? "" : html`<button type="button" class="btn secondary sm" data-ack="${x.id}">${icon("check")}Acknowledge</button>`}</div>`;
+      setHtml($(root, "#w-body"), html`<div class="stack">
+        <section class="panel"><div class="panel-head"><h2>Needs attention</h2><span class="sub">${open.length} open</span></div>${open.length ? open.map(row) : html`<p class="muted" style="padding:20px">Nothing open.</p>`}</section>
+        ${done.length ? html`<section class="panel"><div class="panel-head"><h2>Acknowledged</h2><span class="sub">${done.length}</span></div>${done.map(row)}</section>` : ""}</div>`);
+    },
+  };
+}
+
+export function settingsView() {
+  let root, notice = null, busy = false;
+  const draw = () => {
+    const s = store.state; if (!s) return;
+    const seg = ["agent", "api"].map((m) => html`<button type="button" data-mode="${m}" aria-pressed="${s.mode === m}" ${busy ? "disabled" : ""}>${m === "agent" ? "Agent" : "API"}</button>`);
+    const files = (s.insights || []);
+    setHtml($(root, "#set-body"), html`<div class="stack">
+      <section class="panel"><div class="setting"><div class="k">Orchestrator mode<small>Who drives the pipeline</small></div>
+          <div><div class="segmented" role="group" aria-label="Orchestrator mode">${seg}</div>
+            <p class="hint" style="margin-top:8px">${s.mode === "agent" ? "Agent: a coding agent runs each stage with its own skills." : "API: the worker calls model APIs directly."}</p>
+            ${notice ? html`<div class="notice" role="alert"><b>${notice.refusal}</b> ${notice.fix || ""}</div>` : ""}</div></div>
+        <div class="setting"><div class="k">Environment<small>APP_ENV</small></div><div><span class="chip ${s.appEnv === "production" ? "bad" : "ok"}">${s.appEnv}</span></div></div>
+        <div class="setting"><div class="k">Data home<small>Where the database and renders live</small></div><div class="copy-row"><code>${s.home}</code>${copyBtn(s.home, "Copy data home path")}</div></div></section>
+      <section class="panel"><div class="panel-head"><h2>Engines</h2><span class="sub">Render and insight tools on this machine</span></div>
+        <div class="panel-body">${(s.engines || []).length ? html`<div class="chips" style="gap:10px">${s.engines.map((e) => html`<span class="chip ${e.availability === "ready" ? "ok" : "warn"}" style="height:28px;padding:0 12px" title="${e.reason || (e.availability === "ready" ? "Ready" : "Unavailable")}">${e.label}<span style="opacity:.75;font-weight:400">${e.availability === "ready" ? "Ready" : "Unavailable"}${e.id === s.defaultEngine ? " · default" : ""}</span></span>`)}</div>
+          <ul class="engine-reasons" style="margin:12px 0 0;padding:0;list-style:none">${s.engines.map((e) => html`<li class="hint" data-engine="${e.id}">${e.label}: ${e.availability === "ready" ? (e.note ? `ready (${e.note})` : "ready") : e.reason}${e.id === s.defaultEngine ? " (default)" : ""}</li>`)}</ul>
+          <p class="hint" style="margin-top:8px">Choose one per run with <code>--engine</code>, per series in its Basics, or for the machine with <code>npx vfrey engine use</code>.</p>` : html`<p class="muted">No engine reported.</p>`}</div></section>
+      <section class="panel"><div class="panel-head"><h2>Renders from insights</h2><span class="sub">${files.length} file${files.length === 1 ? "" : "s"}</span></div>
+        ${files.length ? html`<div style="overflow-x:auto"><table><thead><tr><th>Engine</th><th>File</th><th class="num">Size</th><th>Made</th></tr></thead><tbody>${files.map((f) => html`<tr><td>${f.engineLabel}</td><td title="${f.outputPath}"><span class="t">${f.outputPath.split("/").pop()}</span>${f.subject ? html`<div class="sub">${f.subject}</div>` : ""}</td><td class="num">${f.bytes >= 1048576 ? (f.bytes / 1048576).toFixed(1) + " MB" : Math.max(1, Math.round(f.bytes / 1024)) + " KB"}</td><td class="nowrap" title="${abs(f.createdAt)}">${rel(f.createdAt)}</td></tr>`)}</tbody></table></div>`
+          : emptyState("film", "No insight render yet", "Renders made from insights show up here with their engine and size.")}</section></div>`);
+  };
+  return {
+    title: "Settings",
+    mount(el) {
+      root = el;
+      setHtml(el, html`<div class="page-head"><div><span class="eyebrow">Desk / Settings</span><h1>Settings</h1><p class="sub">How this install runs.</p></div></div><div id="set-body"></div>`);
+      el.addEventListener("click", async (e) => {
+        const b = e.target.closest("[data-mode]"); if (!b || busy || b.getAttribute("aria-pressed") === "true") return;
+        busy = true; notice = null; draw();
+        const r = await api("/api/mode", { mode: b.dataset.mode });
+        busy = false;
+        if (!r.ok) { notice = r; refusalToast(r); draw(); return; }
+        if (store.state) store.state.mode = r.mode || b.dataset.mode;
+        toast(`Mode set to ${r.mode || b.dataset.mode}`); draw(); store.refresh?.();
+      });
+    },
+    update() { draw(); },
+  };
+}
+
+export function notFoundView() {
+  return { title: "Not found", mount(el) { setHtml(el, html`<div class="panel">${emptyState("alert", "Page not found", "That address is not part of the desk.", html`<a class="btn" href="/" data-link>Back to the Board</a>`)}</div>`); }, update() {} };
+}

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

@@ -0,0 +1,119 @@
+// Review: every job that waits for a person before it renders (a series with review on). Approve or reject here.
+import { html, icon, setHtml, $, $$, api, read, toast, refusalToast, store, rel, abs, short } from "./core.js";
+import { emptyState } from "./components.js";
+import { startTick } from "./views-runs.js";
+
+function previewOf(item) {
+  const sc = item.scene;
+  if (sc && sc.source === "agent" && sc.kind === "html" && sc.dir) {
+    return html`<div class="preview-box"><iframe title="Scene preview" data-preview src="/preview/runs/${item.id}/" sandbox="allow-scripts" allow="autoplay" loading="lazy"></iframe></div>`;
+  }
+  if (sc && sc.source === "agent" && sc.kind === "tsx") {
+    return html`<div class="preview-box"><img data-frame src="/preview/runs/${item.id}/frame.png" alt="Frame of the Remotion scene at 1 second" style="display:block;width:100%;max-width:270px"></div>
+      <p class="muted" data-frame-note>A Remotion scene cannot play in the browser. This is one frame (<span class="mono">render --frame 1</span>).</p>`;
+  }
+  return html`<p class="muted" data-preview-note>No scene was written for this run, so there is nothing to preview. It renders with the default template.</p>`;
+}
+
+function checksOf(item) {
+  const checks = item.checks || [];
+  if (!checks.length) return html`<p class="muted">No checks ran.</p>`;
+  return html`<ul style="list-style:none;margin:0;padding:0;display:grid;gap:10px">${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" : "rej"} plain">${c.status === "pass" ? "Pass" : c.status === "skipped" ? "Skipped" : "Fail"}</span></div>
+    <p class="detail">${c.message}</p>${c.fix ? html`<p class="detail"><b>Fix:</b> ${c.fix}</p>` : ""}</li>`)}</ul>`;
+}
+
+export function reviewView() {
+  let root, jobs = null, sig = "", rejecting = null, loading = false, busy = new Set();
+
+  async function load() {
+    if (loading) return;
+    loading = true;
+    try {
+      const r = await read("/api/review");
+      if (r.ok) jobs = r.jobs;
+    } catch { /* offline: keep what is shown */ }
+    loading = false;
+    draw();
+  }
+
+  function item(j) {
+    const c = j.content;
+    const asking = rejecting === j.id;
+    const off = busy.has(j.id) ? "disabled" : "";
+    return html`<section class="panel" data-review="${j.id}" aria-label="Review ${j.title || j.id}">
+      <div class="panel-head"><h2>${j.title || "Untitled run"}</h2><span class="sub"><a href="/series/${j.seriesId}" data-link>${j.seriesId}</a> · <a href="/runs/${j.id}" data-link class="mono">${short(j.id)}</a> · waiting <span title="${abs(j.waitingSince)}">${rel(j.waitingSince)}</span></span></div>
+      <div class="panel-body"><div class="run-grid">
+        <div class="stack">
+          <div><p class="label">Script</p>${c && c.script ? html`<pre data-script style="white-space:pre-wrap;margin:6px 0 0">${c.script}</pre>` : html`<p class="muted">No script was stored.</p>`}</div>
+          ${c && c.hook ? html`<div><p class="label">Hook</p><p>${c.hook}</p></div>` : ""}
+          ${c && c.hashtags && c.hashtags.length ? html`<div class="chips">${c.hashtags.map((h) => html`<span class="chip">${h}</span>`)}</div>` : ""}
+          <div><p class="label">Checks</p>${checksOf(j)}</div>
+        </div>
+        <div class="stack"><div><p class="label">Scene</p>${previewOf(j)}</div></div>
+      </div>
+      <div class="actions" style="margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start">
+        ${asking
+          ? html`<div class="field" style="flex:1;min-width:240px"><label for="why-${j.id}">Reason</label><input type="text" id="why-${j.id}" data-reason maxlength="300" placeholder="Why is this rejected? (optional)" autocomplete="off"></div>
+              <button type="button" class="btn danger solid sm" data-act="reject-yes" data-id="${j.id}" ${off}>Reject run</button><button type="button" class="btn ghost sm" data-act="reject-no" data-id="${j.id}">Keep waiting</button>`
+          : html`<button type="button" class="btn" data-act="approve" data-id="${j.id}" ${off}>${icon("check")}Approve and render</button><button type="button" class="btn danger" data-act="reject" data-id="${j.id}" ${off}>${icon("x")}Reject</button>`}
+      </div></div></section>`;
+  }
+
+  function draw() {
+    const body = $(root, "#review-body");
+    if (jobs === null) return;
+    const n = jobs.length;
+    $(root, "#review-sub").textContent = n ? `${n} waiting` : "Nothing waiting";
+    if (!n) {
+      setHtml(body, html`<div class="panel">${emptyState("done", "Nothing to review", "A series with review on stops here after its script, scene and checks. Turn review on from the series page.")}</div>`);
+      return;
+    }
+    // Keep what the person typed in the reason box while the poll redraws.
+    const typed = $(root, "[data-reason]")?.value;
+    setHtml(body, html`<div class="stack">${jobs.map(item)}</div>`);
+    const box = $(root, "[data-reason]");
+    if (box) { if (typed) box.value = typed; box.focus(); }
+  }
+
+  async function act(name, el) {
+    const id = el.dataset.id;
+    if (name === "reject") { rejecting = id; draw(); return; }
+    if (name === "reject-no") { rejecting = null; draw(); return; }
+    busy.add(id); draw();
+    let r;
+    if (name === "approve") r = await api(`/api/jobs/${encodeURIComponent(id)}/approve`, {});
+    else {
+      const reason = $(root, `#why-${CSS.escape(id)}`)?.value || "";
+      r = await api(`/api/jobs/${encodeURIComponent(id)}/reject`, { reason });
+    }
+    busy.delete(id); rejecting = null;
+    if (!r.ok) refusalToast(r);
+    else if (name === "approve") { toast("Approved", { detail: "Rendering now" }); startTick({}); }
+    else toast("Rejected");
+    await load(); store.refresh?.();
+  }
+
+  return {
+    title: "Review",
+    mount(el) {
+      root = el;
+      setHtml(el, html`<div class="page-head"><div><span class="eyebrow">Desk / Review</span><h1>Review</h1><p class="sub" id="review-sub"></p></div></div><div id="review-body"></div>`);
+      el.addEventListener("click", (e) => { const a = e.target.closest("[data-act]"); if (a) act(a.dataset.act, a); });
+      // A frame that cannot be made says so instead of showing a broken image.
+      el.addEventListener("error", (e) => {
+        if (e.target.matches && e.target.matches("img[data-frame]")) {
+          const note = e.target.closest(".stack")?.querySelector("[data-frame-note]");
+          e.target.remove();
+          if (note) note.textContent = "The frame could not be rendered here. Approve or reject from the script and the checks.";
+        }
+      }, true);
+      load();
+    },
+    update(s) {
+      const waiting = (s.jobs || []).filter((j) => j.status === "awaiting_review");
+      const next = waiting.map((j) => j.id + j.updatedAt).join("|");
+      if (next !== sig) { sig = next; load(); }
+    },
+  };
+}