@vfrey/vfrey 0.0.1 → 1.0.0-beta.0

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

@@ -0,0 +1,318 @@
+// Series list and series detail.
+import { html, icon, setHtml, $, $$, api, toast, refusalToast, store, rel, abs, cap } from "./core.js";
+import { statusPill, emptyState, platformChips, cadenceSummary, CADENCE, latestRunStatus, platformName } from "./components.js";
+
+const csv = (s) => String(s || "").split(",").map((x) => x.trim()).filter(Boolean);
+const SOURCE_KINDS = { rss: "RSS feed", subreddit: "Subreddit", youtubeChannel: "YouTube channel", youtubeTrending: "YouTube trending", "vfrey-topics": "vfrey Topics (niche id)" };
+const TZ_HINT = "UTC";
+
+// ---------------------------------------------------------------- list
+export function seriesListView() {
+  let root, ctx, accountsKey = "";
+  return {
+    title: "Series",
+    mount(el, params, c) {
+      root = el; ctx = c;
+      setHtml(el, html`<div class="page-head"><div><span class="eyebrow">Desk / Series</span><h1>Series</h1><p class="sub">Each series is a niche with its own cadence, sources, and platforms.</p></div>
+        <div class="actions"><button type="button" class="btn" id="new-btn" aria-expanded="false" aria-controls="new-form">${icon("plus")}New series</button></div></div>
+        <form class="panel inline-form" id="new-form" hidden>
+          <div class="panel-head"><h2>New series</h2></div>
+          <div class="panel-body"><div class="grid-3">
+            <div class="field"><label for="n-id">Series id</label><input type="text" id="n-id" name="id" required pattern="[a-z0-9][a-z0-9-]*" placeholder="desk" autocomplete="off"><span class="hint">Lowercase letters, digits, dashes.</span></div>
+            <div class="field"><label for="n-acc">Account</label><select id="n-acc" name="accountId" required></select></div>
+            <div class="field"><label for="n-lang">Language</label><input type="text" id="n-lang" name="language" value="en" autocomplete="off"></div>
+            <div class="field" style="grid-column: span 2"><label for="n-niche">Niche</label><input type="text" id="n-niche" name="niche" required placeholder="What this series is about" autocomplete="off"></div>
+            <div class="field"><label for="n-tz">Timezone</label><input type="text" id="n-tz" name="timezone" value="${TZ_HINT}" autocomplete="off"></div>
+          </div><div class="form-foot"><button type="submit" class="btn">Create series</button><button type="button" class="btn ghost" id="new-cancel">Cancel</button></div></div></form>
+        <div id="list"></div>`);
+      const form = $(el, "#new-form");
+      const toggle = (show) => { form.hidden = !show; $(el, "#new-btn").setAttribute("aria-expanded", String(show)); if (show) $(el, "#n-id").focus(); };
+      $(el, "#new-btn").addEventListener("click", () => toggle(form.hidden));
+      $(el, "#new-cancel").addEventListener("click", () => toggle(false));
+      form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        const d = Object.fromEntries(new FormData(form));
+        const r = await api("/api/series", { id: d.id.trim(), accountId: d.accountId, niche: d.niche.trim(), language: d.language.trim() || undefined, timezone: d.timezone.trim() || undefined });
+        if (!r.ok) return refusalToast(r);
+        toast(`Series ${d.id} created`);
+        store.refresh?.();
+        ctx.navigate(`/series/${encodeURIComponent(r.id || d.id)}`);
+      });
+    },
+    update(s) {
+      const accs = s.accounts || [];
+      const key = accs.map((a) => a.id).join("|");
+      if (key !== accountsKey) {
+        const sel = $(root, "#n-acc"); const keep = sel.value;
+        setHtml(sel, html`${accs.map((a) => html`<option value="${a.id}">${a.name}</option>`)}`);
+        if (keep) sel.value = keep; accountsKey = key;
+      }
+      const list = s.series || [];
+      if (!list.length) {
+        setHtml($(root, "#list"), html`<div class="panel">${emptyState("series", "No series yet", "A series is one niche that posts on a schedule. Create the first one.")}</div>`);
+        return;
+      }
+      setHtml($(root, "#list"), html`<div class="series-list">${list.map((x) => {
+        const cad = CADENCE[x.cadence?.label] || ["—", ""];
+        return html`<a class="panel series-row" href="/series/${x.id}" data-link data-series="${x.id}">
+          <div><p class="name">${x.id}</p><p class="niche">${x.niche}</p></div>
+          <div><div class="chips"><span class="chip ${x.paused ? "warn" : x.autopilot ? "ok" : ""}">${x.paused ? "Paused" : x.autopilot ? "Autopilot" : "Manual"}</span><span class="chip">${x.language}</span></div><p class="sub">${cadenceSummary(x)}</p></div>
+          <div>${platformChips(s, x.id)}<p class="sub"><span class="chip ${cad[1]}" style="height:20px;margin-top:6px">${cad[0]}</span> ${x.cadence?.postsLast7d ?? 0} of ${x.cadence?.target ?? 0} this week</p></div>
+          <div>${latestRunStatus(s, x)}</div></a>`;
+      })}</div>`);
+    },
+  };
+}
+
+// ---------------------------------------------------------------- detail
+export function seriesDetailView() {
+  let root, ctx, id, built = false, listening = false, confirmDelete = false, goLiveOpen = false, liveNotice = null;
+  const dirty = new Set();
+  const cur = () => (store.state?.series || []).find((x) => x.id === id);
+
+  function setVal(form, name, v) {
+    const el = form.elements[name]; if (!el) return;
+    if (el.type === "checkbox") el.checked = !!v;
+    else if (document.activeElement !== el) el.value = Array.isArray(v) ? v.join(", ") : v ?? "";
+  }
+  function fill(s, only) {
+    const x = cur(); if (!x) return;
+    const f = (n) => $(root, `form[data-sec="${n}"]`);
+    const sections = {
+      basics: () => ["niche", "language", "voices", "hashtagPool", "autopilot", "allowSpicy", "stylePath", "engine"].forEach((k) => setVal(f("basics"), k, x[k])),
+      switches: () => ["publishEnabled", "engageEnabled", "reviewEnabled"].forEach((k) => setVal(f("switches"), k, k === "publishEnabled" ? x[k] !== false : x[k])),
+      cadence: () => ["timezone", "minHoursBetweenPosts", "maxPostsPerDay", "windows"].forEach((k) => setVal(f("cadence"), k, x[k])),
+      quota: () => ["youtubeDailyUploadCap", "maxRepliesPerDay", "minSecondsBetween"].forEach((k) => setVal(f("quota"), k, x[k])),
+      platforms: () => {
+        for (const p of ["youtube", "tiktok", "instagram", "facebook"]) {
+          const row = (s.platforms || []).find((r) => r.seriesId === id && r.platform === p);
+          setVal(f("platforms"), p, row?.enabled);
+        }
+        const yt = (s.platforms || []).find((r) => r.seriesId === id && r.platform === "youtube");
+        setVal(f("platforms"), "privacy", yt?.config?.privacy ?? "private");
+      },
+    };
+    for (const [name, fn] of Object.entries(sections)) if ((!only || only === name) && !dirty.has(name)) fn();
+  }
+
+  function head(s) {
+    const x = cur(); const cad = CADENCE[x.cadence?.label] || ["—", ""];
+    setHtml($(root, "#sd-head"), html`<a class="crumb" href="/series" data-link>${icon("chevronRight")}Series</a>
+      <div class="page-head"><div><span class="eyebrow">Series / Detail</span><h1>${x.id}</h1><p class="sub">${x.niche}</p>
+        <div class="chips" style="margin-top:10px"><span class="chip ${x.paused ? "warn" : x.autopilot ? "ok" : ""}">${x.paused ? "Paused" : x.autopilot ? "Autopilot" : "Manual"}</span><span class="chip ${cad[1]}">${cad[0]} · ${x.cadence?.postsLast7d ?? 0} of ${x.cadence?.target ?? 0} this week</span></div></div>
+        <div class="actions"><span class="sub">${cadenceSummary(x)}</span></div></div>`);
+  }
+
+  function quotaUsage(x) {
+    const capv = Number($(root, "[name=youtubeDailyUploadCap]").value);
+    setHtml($(root, "#q-yt"), html`<span>${x.quota?.uploadsToday ?? 0} uploaded today</span>${capv === 0 ? html`<span class="chip warn">Posting is off</span>` : ""}`);
+    setHtml($(root, "#q-rep"), html`<span>${x.quota?.repliesToday ?? 0} replies today</span>`);
+    setHtml($(root, "#q-gap"), html`<span>${x.quota?.lastReplyAt ? `Last reply ${rel(x.quota.lastReplyAt)}` : "No reply yet"}</span>`);
+  }
+
+  function renderLive(s) {
+    const x = cur();
+    const ids = (s.channelIds || {})[id] || {};
+    const on = (s.platforms || []).filter((r) => r.seriesId === id && r.enabled).map((r) => r.platform);
+    const known = on.filter((p) => ids[p]);
+    const notice = liveNotice ? html`<div class="notice" role="alert"><b>${liveNotice.refusal}</b> ${liveNotice.fix || ""}</div>` : "";
+    if (x.live) {
+      setHtml($(root, "#live-box"), html`<div class="live-state"><span class="chip ok" data-live-state>Live</span>
+        <span class="sub">Uploads and replies are real.</span>
+        <button type="button" class="btn secondary sm" data-act="dry-run">Back to dry-run</button></div>`);
+    } else if (!goLiveOpen) {
+      setHtml($(root, "#live-box"), html`<div class="live-state"><span class="chip warn" data-live-state>Dry-run</span>
+        <span class="sub">The whole pipeline runs and a dry-run publication is recorded. Nothing is uploaded and no reply is sent.</span>
+        <button type="button" class="btn sm" data-act="go-live">Go live</button></div>${notice}`);
+    } else {
+      setHtml($(root, "#live-box"), html`<form class="live-form" id="live-form"><span class="chip warn" data-live-state>Dry-run</span>
+        ${known.length ? html`<p class="sub">Channel ids on file:</p><ul class="ids">${known.map((p) => html`<li><span>${platformName(p)}</span> <code data-channel-id="${p}">${ids[p]}</code></li>`)}</ul>
+          <p class="sub">Type one of them to confirm this series posts to that channel. Going live makes uploads and replies real.</p>`
+          : html`<p class="sub">No channel id is on file for this series. Type the id of the channel or page it posts to (the YouTube channel id, for example). It is saved and used from now on.</p>`}
+        <div class="field"><label for="live-confirm">Channel id</label><input type="text" id="live-confirm" name="confirm" autocomplete="off" spellcheck="false" required></div>
+        <div class="form-foot"><button type="submit" class="btn">Go live</button><button type="button" class="btn ghost" data-act="go-live-cancel">Cancel</button></div>${notice}</form>`);
+    }
+    const events = x.events || [];
+    setHtml($(root, "#live-log"), events.length ? html`<p class="group-label">Recent changes</p>${events.map((e) => html`<div class="list-row" data-series-event="${e.code}"><span class="grow">${e.message}</span><span class="sub" title="${abs(e.at)}">${rel(e.at)}</span></div>`)}` : "");
+  }
+
+  function renderSources(s) {
+    const list = (s.sources || []).filter((x) => x.seriesId === id);
+    setHtml($(root, "#src-list"), list.length
+      ? html`${list.map((x) => html`<div class="list-row"><span class="chip">${SOURCE_KINDS[x.kind] || x.kind}</span><span class="grow">${x.value}</span>${x.lastStatus ? html`<span class="chip ${/ok|success|fetched/i.test(x.lastStatus) ? "ok" : "warn"}">${x.lastStatus}</span>` : ""}<button type="button" class="btn ghost sm" data-act="rm-source" data-id="${x.id}" aria-label="Remove ${x.value}">${icon("trash")}Remove</button></div>`)}`
+      : html`<p class="muted">No source yet. Add one so the series has something to write about.</p>`);
+  }
+
+  function renderSecretChips(s) {
+    for (const row of $$(root, "[data-secret]")) {
+      const [kind, owner, field] = row.dataset.secret.split("|");
+      const present = (s.credentials || []).some((c) => c.ownerKind === kind && c.ownerId === owner && c.field === field);
+      const chip = $(row, ".chip"); chip.className = `chip ${present ? "ok" : "warn"}`; chip.textContent = present ? "Present" : "Missing";
+    }
+  }
+
+  function renderControls() {
+    const x = cur();
+    setHtml($(root, "#controls"), html`<div class="actions">
+      <button type="button" class="btn secondary" data-act="${x.paused ? "resume" : "pause"}">${icon(x.paused ? "play" : "pause")}${x.paused ? "Resume" : "Pause"}</button>
+      ${confirmDelete ? html`<span class="confirm">Delete ${x.id}?<button type="button" class="btn danger solid sm" data-act="delete-yes">Yes, delete</button><button type="button" class="btn ghost sm" data-act="delete-no">Keep it</button></span>`
+        : html`<button type="button" class="btn danger" data-act="delete">${icon("trash")}Delete series</button>`}</div>
+      <p class="hint" style="margin-top:10px">Paused series keep their settings but never post. Delete removes the series and its sources.</p><div id="ctl-notice"></div>`);
+  }
+
+  async function save(section, path, body, ok) {
+    const r = await api(path, body);
+    if (!r.ok) { refusalToast(r); return r; }
+    dirty.delete(section);
+    toast(ok);
+    store.refresh?.();
+    return r;
+  }
+
+  const engineLabel = (s, id) => (s.engines || []).find((e) => e.id === id)?.label || id || "Remotion";
+
+  function build(s) {
+    const x = cur();
+    const sw = (n, l) => html`<label class="switch"><input type="checkbox" name="${n}"><span>${l}</span></label>`;
+    const num = (n, l) => html`<div class="field"><label for="f-${n}">${l}</label><input type="number" id="f-${n}" name="${n}" min="0" step="1"></div>`;
+    const acct = (s.accounts || []).find((a) => a.id === x.accountId);
+    const secretGroup = (kind, ownerId, fields, label) => html`<p class="group-label">${label}</p>${fields.map((field) => html`
+      <div class="sec-row" data-secret="${kind}|${ownerId}|${field}"><div class="sec-name"><span class="mono">${field}</span><span class="chip warn">Missing</span></div>
+        <div class="sec-form"><input type="password" autocomplete="new-password" spellcheck="false" aria-label="${field} value" placeholder="Paste new value"><button type="button" class="btn sm" data-act="secret-save">Save</button><button type="button" class="btn secondary sm" data-act="secret-clear">Clear</button></div></div>`)}`;
+    const secrets = s.secretFields || { account: [], series: [] };
+    setHtml(root, html`<div id="sd-head"></div><div class="stack">
+      <form class="panel" data-sec="basics"><div class="panel-head"><h2>Basics</h2></div><div class="panel-body">
+        <div class="grid-2"><div class="field"><label for="f-niche">Niche</label><input type="text" id="f-niche" name="niche" required></div>
+          <div class="field"><label for="f-language">Language</label><input type="text" id="f-language" name="language"></div>
+          <div class="field"><label for="f-voices">Voices</label><input type="text" id="f-voices" name="voices" placeholder="Comma separated"><span class="hint">Comma separated.</span></div>
+          <div class="field"><label for="f-hashtagPool">Hashtag pool</label><input type="text" id="f-hashtagPool" name="hashtagPool" placeholder="#shorts, #tech"><span class="hint">Comma separated.</span></div>
+          <div class="field" style="grid-column:1/-1"><label for="f-stylePath">Style path</label><input type="text" id="f-stylePath" name="stylePath" placeholder="channel-style/desk.json"></div>
+          <div class="field" style="grid-column:1/-1"><label for="f-engine">Engine</label><select id="f-engine" name="engine" aria-describedby="f-engine-hint"><option value="">Machine default (${engineLabel(s, s.defaultEngine)})</option>${(s.engines || []).map((e) => html`<option value="${e.id}" ${e.availability === "ready" ? "" : "disabled"} title="${e.reason || ""}">${e.label}${e.availability === "ready" ? "" : " (unavailable)"}</option>`)}</select>
+            <span class="hint" id="f-engine-hint">Which engine renders this series' videos. A run started with an engine named on the command uses that one instead.${(s.engines || []).filter((e) => e.availability !== "ready").map((e) => html` <span class="engine-why">${e.label}: ${e.reason}.</span>`)}</span></div></div>
+        <div class="switch-row" style="margin-top:20px">${sw("autopilot", "Autopilot")}${sw("allowSpicy", "Allow spicy takes")}</div>
+        <div class="form-foot"><button type="submit" class="btn">Save basics</button></div></div></form>
+
+      <section class="panel" data-sec="publishing" id="publishing"><div class="panel-head"><h2>Publishing</h2><span class="sub">A new series is a dry-run until you go live</span></div><div class="panel-body">
+        <div id="live-box"></div>
+        <form data-sec="switches" style="margin-top:20px"><p class="group-label">Switches</p>
+          <div class="switch-row">${sw("publishEnabled", "Publish")}${sw("engageEnabled", "Engage")}${sw("reviewEnabled", "Review before render")}</div>
+          <p class="hint" style="margin-top:8px">Publish off: the video is made and kept, and nothing uploads. Engage off: no replies. Review on: each video waits for your approval before it renders.</p>
+          <div class="form-foot"><button type="submit" class="btn secondary">Save switches</button></div></form>
+        <div id="live-log"></div></div></section>
+
+      <form class="panel" data-sec="cadence"><div class="panel-head"><h2>Cadence</h2><span class="sub">When posts may go out</span></div><div class="panel-body">
+        <div class="grid-2"><div class="field"><label for="f-timezone">Timezone</label><input type="text" id="f-timezone" name="timezone" placeholder="UTC"></div>
+          ${num("minHoursBetweenPosts", "Min hours between posts")}${num("maxPostsPerDay", "Max posts per day")}
+          <div class="field"><label for="f-windows">Windows</label><input type="text" id="f-windows" name="windows" placeholder="09:00-11:00, 18:00-20:00"><span class="hint">Comma separated.</span></div></div>
+        <div class="form-foot"><button type="submit" class="btn">Save cadence</button></div></div></form>
+
+      <form class="panel" data-sec="quota"><div class="panel-head"><h2>Quota</h2><span class="sub">Hard caps per day</span></div><div class="panel-body stack" style="gap:16px">
+        <div class="quota-row">${num("youtubeDailyUploadCap", "YouTube daily upload cap")}<div class="usage" id="q-yt"></div></div>
+        <div class="quota-row">${num("maxRepliesPerDay", "Max replies per day")}<div class="usage" id="q-rep"></div></div>
+        <div class="quota-row">${num("minSecondsBetween", "Min seconds between replies")}<div class="usage" id="q-gap"></div></div>
+        <div class="form-foot" style="margin-top:0"><button type="submit" class="btn">Save quota</button></div></div></form>
+
+      <form class="panel" data-sec="platforms"><div class="panel-head"><h2>Platforms</h2><span class="sub">Where finished videos go</span></div><div class="panel-body">
+        ${["youtube", "tiktok", "instagram", "facebook"].map((p) => html`<div class="plat"><div class="name">${sw(p, platformName(p))}</div>
+          ${p === "youtube" ? html`<div class="field"><label class="sr" for="f-privacy">YouTube privacy</label><select id="f-privacy" name="privacy"><option value="private">Private</option><option value="unlisted">Unlisted</option><option value="public">Public</option></select></div>` : ""}</div>`)}
+        <div class="form-foot"><button type="submit" class="btn">Save platforms</button></div></div></form>
+
+      <section class="panel" data-sec="sources"><div class="panel-head"><h2>Sources</h2><span class="sub">What the series reads for ideas</span></div><div class="panel-body">
+        <div id="src-list"></div>
+        <form class="add-row" id="src-form"><select name="kind" aria-label="Source kind">${Object.entries(SOURCE_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></div></section>
+
+      <section class="panel" data-sec="secrets"><div class="panel-head"><h2>Secrets</h2><span class="sub">Write only. A saved value is never shown again.</span></div><div class="panel-body">
+        ${secrets.series.length ? secretGroup("series", id, secrets.series, `Series · ${id}`) : ""}
+        ${secrets.account.length ? secretGroup("account", x.accountId, secrets.account, `Account · ${acct?.name || x.accountId}`) : ""}
+        ${!secrets.series.length && !secrets.account.length ? html`<p class="muted">This setup has no secret fields.</p>` : ""}</div></section>
+
+      <section class="panel" data-sec="controls"><div class="panel-head"><h2>Controls</h2></div><div class="panel-body" id="controls"></div></section></div>`);
+    built = true;
+    if (listening) return;
+    listening = true;
+
+    root.addEventListener("input", (e) => { const f = e.target.closest("form[data-sec]"); if (f && e.target.type !== "password") dirty.add(f.dataset.sec); if (e.target.name === "youtubeDailyUploadCap") quotaUsage(cur()); });
+    root.addEventListener("submit", async (e) => {
+      e.preventDefault();
+      const form = e.target;
+      if (form.id === "src-form") {
+        const d = Object.fromEntries(new FormData(form));
+        const r = await api(`/api/series/${encodeURIComponent(id)}/sources`, { kind: d.kind, value: d.value.trim() });
+        if (!r.ok) return refusalToast(r);
+        form.reset(); toast("Source added"); store.refresh?.(); return;
+      }
+      if (form.id === "live-form") {
+        const r = await api(`/api/series/${encodeURIComponent(id)}/live`, { confirm: form.elements.confirm.value.trim() });
+        if (!r.ok) { liveNotice = r; renderLive(store.state); return refusalToast(r); }
+        goLiveOpen = false; liveNotice = null; toast("Series is live");
+        if (store.state) { const x = cur(); if (x) x.live = true; }
+        renderLive(store.state); store.refresh?.(); return;
+      }
+      const sec = form.dataset.sec; const v = (n) => form.elements[n];
+      const base = `/api/series/${encodeURIComponent(id)}`;
+      if (sec === "basics") await save(sec, base, { niche: v("niche").value.trim(), language: v("language").value.trim(), voices: csv(v("voices").value), hashtagPool: csv(v("hashtagPool").value), autopilot: v("autopilot").checked, allowSpicy: v("allowSpicy").checked, stylePath: v("stylePath").value.trim(), engine: v("engine").value }, "Basics saved");
+      if (sec === "switches") await save(sec, base, { publishEnabled: v("publishEnabled").checked, engageEnabled: v("engageEnabled").checked, reviewEnabled: v("reviewEnabled").checked }, "Switches saved");
+      if (sec === "cadence") await save(sec, `${base}/cadence`, { timezone: v("timezone").value.trim(), minHoursBetweenPosts: Number(v("minHoursBetweenPosts").value), maxPostsPerDay: Number(v("maxPostsPerDay").value), windows: csv(v("windows").value) }, "Cadence saved");
+      if (sec === "quota") await save(sec, `${base}/quota`, { youtubeDailyUploadCap: Number(v("youtubeDailyUploadCap").value), maxRepliesPerDay: Number(v("maxRepliesPerDay").value), minSecondsBetween: Number(v("minSecondsBetween").value) }, "Quota saved");
+      if (sec === "platforms") {
+        let n = 0;
+        for (const p of ["youtube", "tiktok", "instagram", "facebook"]) {
+          const row = (store.state.platforms || []).find((r) => r.seriesId === id && r.platform === p);
+          const enabled = v(p).checked;
+          const privacy = p === "youtube" ? v("privacy").value : null;
+          const changed = enabled !== !!row?.enabled || (p === "youtube" && privacy !== (row?.config?.privacy ?? "private"));
+          if (!changed) continue;
+          const body = { platform: p, enabled }; if (p === "youtube") body.config = { ...(row?.config || {}), privacy };
+          const r = await api(`${base}/platforms`, body);
+          if (!r.ok) return refusalToast(r);
+          n++;
+        }
+        dirty.delete(sec); toast(n ? "Platforms saved" : "Platforms already up to date"); store.refresh?.();
+      }
+    });
+    root.addEventListener("click", async (e) => {
+      const b = e.target.closest("[data-act]"); if (!b) return;
+      const act = b.dataset.act; const base = `/api/series/${encodeURIComponent(id)}`;
+      if (act === "rm-source") { const r = await api(`/api/sources/${encodeURIComponent(b.dataset.id)}/delete`, {}); if (!r.ok) return refusalToast(r); toast("Source removed"); store.refresh?.(); }
+      if (act === "pause" || act === "resume") { const r = await api(`${base}/${act}`, {}); if (!r.ok) return refusalToast(r); toast(act === "pause" ? "Series paused" : "Series resumed"); store.refresh?.(); }
+      if (act === "go-live") { goLiveOpen = true; liveNotice = null; renderLive(store.state); const f = $(root, "#live-confirm"); if (f) f.focus(); }
+      if (act === "go-live-cancel") { goLiveOpen = false; liveNotice = null; renderLive(store.state); }
+      if (act === "dry-run") { const r = await api(`${base}/dry-run`, {}); if (!r.ok) return refusalToast(r); toast("Back to dry-run"); store.refresh?.(); }
+      if (act === "delete") { confirmDelete = true; renderControls(); }
+      if (act === "delete-no") { confirmDelete = false; renderControls(); }
+      if (act === "delete-yes") {
+        confirmDelete = false;
+        const r = await api(`${base}/delete`, {});
+        if (!r.ok) { renderControls(); setHtml($(root, "#ctl-notice"), html`<div class="notice" role="alert"><b>${r.refusal}</b> ${r.fix || ""}</div>`); return refusalToast(r); }
+        toast(`Series ${id} deleted`); store.refresh?.(); ctx.navigate("/series");
+      }
+      if (act === "secret-save" || act === "secret-clear") {
+        const row = b.closest("[data-secret]"); const input = $(row, "input");
+        const [ownerKind, ownerId, field] = row.dataset.secret.split("|");
+        if (act === "secret-save" && !input.value) { toast("Type a value first", { kind: "error" }); return; }
+        const r = act === "secret-save" ? await api("/api/secrets", { ownerKind, ownerId, field, value: input.value }) : await api("/api/secrets/clear", { ownerKind, ownerId, field });
+        input.value = "";
+        if (!r.ok) return refusalToast(r);
+        toast(act === "secret-save" ? `${field} saved` : `${field} cleared`); store.refresh?.();
+      }
+    });
+  }
+
+  return {
+    title: "Series",
+    mount(el, params, c) { root = el; ctx = c; id = params.id; el.classList.add("narrow"); setHtml(el, html`<p class="muted">Loading…</p>`); },
+    update(s) {
+      if (!cur()) {
+        built = false;
+        setHtml(root, html`<a class="crumb" href="/series" data-link>${icon("chevronRight")}Series</a><div class="panel">${emptyState("series", "Series not found", `There is no series called ${id}.`, html`<a class="btn" href="/series" data-link>Back to series</a>`)}</div>`);
+        return;
+      }
+      if (!built) { build(s); fill(s); renderControls(); }
+      head(s); fill(s); quotaUsage(cur()); renderSources(s); renderSecretChips(s); renderLive(s);
+      const x = cur();
+      const pause = $(root, "[data-act=pause],[data-act=resume]");
+      if (pause && pause.dataset.act !== (x.paused ? "resume" : "pause") && !confirmDelete) renderControls();
+    },
+  };
+}

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

@@ -0,0 +1,87 @@
+// Topics: what is trending in a niche, with evidence, and "Make a video" for one of them.
+// The browser talks only to this desk's own /api/topics routes. The vfrey token stays on the server.
+import { html, icon, setHtml, $, $$, read, toast, refusalToast, store, num } from "./core.js";
+import { emptyState, platformName } from "./components.js";
+import { startTick } from "./views-runs.js";
+
+const views = (n) => (typeof n === "number" ? (n >= 1e6 ? `${(n / 1e6).toFixed(1).replace(/\.0$/, "")}M` : n >= 1e3 ? `${(n / 1e3).toFixed(1).replace(/\.0$/, "")}K` : num(n)) : "—");
+const age = (h) => (typeof h !== "number" || h < 0 ? "—" : h < 1 ? "<1h" : h < 48 ? `${Math.round(h)}h` : `${Math.round(h / 24)}d`);
+const safeUrl = (u) => (/^https?:\/\//i.test(String(u || "")) ? u : "");
+const NICHE_KEY = "vfrey-topics-niche";
+const remembered = () => { try { return localStorage.getItem(NICHE_KEY) || ""; } catch { return ""; } };
+const remember = (v) => { try { localStorage.setItem(NICHE_KEY, v); } catch { /* ignore */ } };
+
+export function topicsView() {
+  let root;
+  const m = { niches: null, nicheId: remembered(), topics: null, error: null, loading: false, busy: false, series: "" };
+
+  const draw = () => {
+    if (!root) return;
+    if (m.error) {
+      const out = m.error.code === "not_signed_in" || m.error.code === "unauthorized" || m.error.code === "not_live";
+      const cmd = out ? html`<p><code data-testid="login-command">npx vfrey login</code></p>` : "";
+      setHtml($(root, "#t-body"), html`<div class="panel" data-testid="topics-state" data-state="${m.error.code || "error"}">${emptyState("alert", out ? "Sign in to see topics" : "Topics are not available", m.error.refusal || "Something went wrong.", html`${cmd}<p class="hint">${m.error.fix || ""}</p>`)}</div>`);
+      return;
+    }
+    if (!m.niches) { setHtml($(root, "#t-body"), html`<div class="panel"><p class="muted" style="padding:20px">Loading niches…</p></div>`); return; }
+    const all = (store.state?.series || []);
+    if (!m.series && all.length) m.series = all[0].id;
+    const picker = html`<div class="add-row" style="grid-template-columns:minmax(0,1fr) minmax(0,1fr)">
+      <label class="field"><span class="muted">Niche</span><select id="t-niche" aria-label="Niche">${m.niches.map((n) => html`<option value="${n.id}" ${n.id === m.nicheId ? "selected" : ""}>${n.name}${n.custom ? " (yours)" : ""}</option>`)}</select></label>
+      <label class="field"><span class="muted">Make videos in series</span><select id="t-series" aria-label="Series">${all.length ? all.map((s) => html`<option value="${s.id}" ${s.id === m.series ? "selected" : ""}>${s.id}</option>`) : html`<option value="">No series yet</option>`}</select></label></div>`;
+    let list;
+    if (m.loading) list = html`<p class="muted" style="padding:20px">Loading topics…</p>`;
+    else if (!m.nicheId) list = html`<p class="muted" style="padding:20px">Pick a niche to see what is trending.</p>`;
+    else if (!m.topics) list = "";
+    else if (!m.topics.length) list = html`<p class="muted" style="padding:20px" data-testid="topics-empty">No topics yet for this niche. It is collected on a schedule; check back later.</p>`;
+    else list = m.topics.map((t, i) => html`<div class="list-row" data-topic="${t.id}" style="align-items:flex-start;flex-wrap:wrap">
+        <span class="chip">${i + 1}</span>
+        <div class="grow"><p class="t"><b>${t.title}</b></p>
+          <p class="sub">Score ${Number(t.score).toFixed(1)} · ${(t.platforms || []).map(platformName).join(", ")}</p>
+          <ul class="evidence" style="list-style:none;padding:0;margin:6px 0 0">${(t.evidence || []).map((e) => html`<li class="sub">${safeUrl(e.url) ? html`<a href="${safeUrl(e.url)}" target="_blank" rel="noopener noreferrer">${e.url}</a>` : "(no link)"} · ${views(e.views)} views · ${age(e.ageHours)}</li>`)}</ul></div>
+        <button type="button" class="btn sm" data-make="${t.id}" ${m.busy || !m.series ? "disabled" : ""}>${icon("play")}Make a video</button></div>`);
+    setHtml($(root, "#t-body"), html`<div class="stack"><section class="panel"><div class="panel-body">${picker}</div></section>
+      <section class="panel" id="t-list"><div class="panel-head"><h2>Ranked topics</h2><span class="sub">Topics use credits; see your balance with <code>npx vfrey whoami</code>.</span></div>${list}</section></div>`);
+  };
+
+  const loadTopics = async () => {
+    if (!m.nicheId) { m.topics = null; draw(); return; }
+    m.loading = true; m.error = null; draw();
+    const r = await read(`/api/topics?niche=${encodeURIComponent(m.nicheId)}&limit=20`).catch(() => ({ ok: false, refusal: "The desk could not be reached.", fix: "Check that `npx vfrey dashboard` is still running.", code: "offline" }));
+    m.loading = false;
+    if (!r.ok) { m.error = r; m.topics = null; } else m.topics = r.topics;
+    draw();
+  };
+
+  const loadNiches = async () => {
+    const r = await read("/api/topics/niches").catch(() => ({ ok: false, refusal: "The desk could not be reached.", fix: "Check that `npx vfrey dashboard` is still running.", code: "offline" }));
+    if (!r.ok) { m.error = r; draw(); return; }
+    m.niches = r.niches;
+    if (!m.niches.some((n) => n.id === m.nicheId)) m.nicheId = m.niches[0]?.id || "";
+    draw();
+    await loadTopics();
+  };
+
+  return {
+    title: "Topics",
+    mount(el) {
+      root = el;
+      setHtml(el, html`<div class="page-head"><div><span class="eyebrow">Desk / Topics</span><h1>Topics</h1><p class="sub">What is trending in a niche, with the posts that show it.</p></div></div><div id="t-body"></div>`);
+      el.addEventListener("change", (e) => {
+        if (e.target.id === "t-niche") { m.nicheId = e.target.value; remember(m.nicheId); loadTopics(); }
+        if (e.target.id === "t-series") m.series = e.target.value;
+      });
+      el.addEventListener("click", async (e) => {
+        const b = e.target.closest("[data-make]"); if (!b) return;
+        const topic = (m.topics || []).find((t) => t.id === b.dataset.make); if (!topic || !m.series) return;
+        m.busy = true; draw();
+        const r = await startTick({ now: true, series: m.series, about: topic.title });
+        m.busy = false; draw();
+        if (r.ok) toast("Making a video about this topic", { detail: topic.title });
+      });
+      draw();
+      loadNiches();
+    },
+    update() { if (m.niches && !m.series) draw(); },
+  };
+}