@vfrey/vfrey 0.0.1 → 1.0.0-beta.0

package/src/desk/ui/app.js

@@ -0,0 +1,185 @@
+// Entry: router, poller, shell chrome. Plain ES modules, no build step.
+import { html, icon, setHtml, $, $$, store, read, toast, copyText, clock, dur, ms} from "./core.js";
+import { boardView, runsView, runView } from "./views-runs.js";
+import { seriesListView, seriesDetailView } from "./views-series.js";
+import { keysView } from "./views-keys.js";
+import { topicsView } from "./views-topics.js";
+import { creatorsView } from "./views-creators.js";
+import { mailView } from "./views-mail.js";
+import { reviewView } from "./views-review.js";
+import { publicationsView, sourcesView, engageView, trendsView } from "./views-screens.js";
+import { metricsView, warningsView, settingsView, notFoundView } from "./views-misc.js";
+
+const NAV = [
+  ["/", "Board", "board"], ["/runs", "Runs", "runs"], ["/series", "Series", "series"], ["/topics", "Topics", "topics"], ["/creators", "Creators", "creators"], ["/mail", "Mail", "mail"], ["/publications", "Publications", "publications"], ["/sources", "Sources", "sources"], ["/engage", "Engage", "engage"], ["/trends", "Trends", "trends"], ["/keys", "Keys", "keys"],
+  ["/review", "Review", "review"],
+  ["/metrics", "Metrics", "metrics"], ["/warnings", "Warnings", "warnings"], ["/settings", "Settings", "settings"],
+];
+const ROUTES = [
+  [/^\/review$/, reviewView],
+  [/^\/$/, boardView], [/^\/runs$/, runsView], [/^\/runs\/([A-Za-z0-9-]+)$/, runView, ["id"]],
+  [/^\/series$/, seriesListView], [/^\/series\/([^/]+)$/, seriesDetailView, ["id"]], [/^\/topics$/, topicsView], [/^\/creators$/, creatorsView], [/^\/mail$/, mailView],
+  [/^\/publications$/, publicationsView], [/^\/sources$/, sourcesView], [/^\/engage$/, engageView], [/^\/trends$/, trendsView],
+  [/^\/keys$/, keysView], [/^\/metrics$/, metricsView], [/^\/warnings$/, warningsView], [/^\/settings$/, settingsView],
+];
+
+const main = document.getElementById("main");
+let view = null;
+let timer = null;
+let inFlight = false;
+let prevTickRunning = null;
+
+// ---------- chrome ----------
+function drawNav() {
+  const path = location.pathname.replace(/\/+$/, "") || "/";
+  const unacked = (store.state?.warnings || []).filter((w) => !w.ackedAt).length;
+  const waiting = (store.state?.jobs || []).filter((j) => j.status === "awaiting_review").length;
+  setHtml(document.getElementById("nav"), html`${NAV.map(([href, label, ic]) => {
+    const active = href === "/" ? path === "/" : path === href || path.startsWith(href + "/");
+    return html`<a href="${href}" data-link ${active ? html`aria-current="page"` : ""}>${icon(ic)}<span>${label}</span>${href === "/review" ? html`<span class="count" data-review-count ${waiting ? "" : "hidden"} aria-label="${waiting} waiting for review">${waiting}</span>` : ""}${href === "/warnings" ? html`<span class="count" ${unacked ? "" : "hidden"} aria-label="${unacked} unacknowledged">${unacked}</span>` : ""}</a>`;
+  })}`);
+}
+function drawLive() {
+  const live = document.getElementById("live");
+  const mini = document.querySelector("[data-live-mini]");
+  live.dataset.live = store.link; if (mini) mini.dataset.live = store.link;
+  const t = store.lastGood ? new Date(store.lastGood).toLocaleTimeString([], { hour12: false }) : "";
+  const text = store.link === "live" ? "Live" : store.link === "refreshing" ? "Refreshing" : store.link === "offline" ? `Offline${t ? ` · last sync ${t}` : ""}` : "Connecting";
+  live.querySelector(".live-text").textContent = text;
+  live.title = store.link === "offline" ? "Dashboard server is not reachable" : "Polling the dashboard server";
+  const st = store.state;
+  const envEl = document.getElementById("env");
+  const projectName = st ? (st.project && st.project.name ? st.project.name : "Machine desk") : "";
+  for (const el of document.querySelectorAll("[data-project-name]")) { el.textContent = projectName; el.title = projectName; }
+  if (!st) { envEl.textContent = ""; return; }
+  const scripts = st.mode === "api" ? "Scripts: written by the configured model" : "Scripts: written by your agent";
+  const lines = [`Local desk · ${st.homeDisplay || st.home || ""}`, scripts];
+  if (st.appEnv === "production") lines.push("Production");
+  envEl.replaceChildren(...lines.map((text) => { const d = document.createElement("div"); d.textContent = text; return d; }));
+}
+
+// ---------- routing ----------
+function match(path) {
+  for (const [re, factory, names] of ROUTES) {
+    const m = re.exec(path);
+    if (m) return { factory, params: Object.fromEntries((names || []).map((n, i) => [n, decodeURIComponent(m[i + 1])])) };
+  }
+  return { factory: notFoundView, params: {} };
+}
+function mountRoute() {
+  const path = location.pathname.replace(/(.)\/+$/, "$1");
+  const { factory, params } = match(path);
+  view = factory(params);
+  const el = document.createElement("div");
+  el.className = "view";
+  main.replaceChildren(el);
+  view.mount(el, params, ctx);
+  document.title = `${view.title} · vfrey desk`;
+  drawNav();
+  if (store.state) view.update(store.state);
+  document.body.classList.remove("menu-open");
+  document.getElementById("menu-btn").setAttribute("aria-expanded", "false");
+}
+export function navigate(path) {
+  if (path === location.pathname + location.search) return;
+  history.pushState({}, "", path);
+  mountRoute();
+  window.scrollTo(0, 0);
+  main.focus({ preventScroll: true });
+}
+const ctx = { navigate };
+
+document.addEventListener("click", (e) => {
+  if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+  const copy = e.target.closest("[data-copy]");
+  if (copy) {
+    copyText(copy.dataset.copy).then((ok) => {
+      const old = copy.innerHTML; copy.innerHTML = icon("check").toString();
+      toast(ok ? "Copied" : "Copy failed", { kind: ok ? "info" : "error", ms: 1800 });
+      setTimeout(() => { copy.innerHTML = old; }, 1200);
+    });
+    return;
+  }
+  const a = e.target.closest("a[data-link]");
+  if (!a || a.target === "_blank") return;
+  const url = new URL(a.href, location.href);
+  if (url.origin !== location.origin) return;
+  e.preventDefault();
+  navigate(url.pathname + url.search);
+});
+window.addEventListener("popstate", mountRoute);
+
+document.getElementById("menu-btn").innerHTML = icon("menu").toString();
+document.getElementById("menu-btn").addEventListener("click", () => {
+  const open = document.body.classList.toggle("menu-open");
+  document.getElementById("menu-btn").setAttribute("aria-expanded", String(open));
+});
+document.getElementById("scrim").addEventListener("click", () => { document.body.classList.remove("menu-open"); document.getElementById("menu-btn").setAttribute("aria-expanded", "false"); });
+document.addEventListener("keydown", (e) => { if (e.key === "Escape") document.body.classList.remove("menu-open"); });
+
+// ---------- theme ----------
+const themeBtn = document.getElementById("theme-btn");
+const systemDark = () => matchMedia("(prefers-color-scheme: dark)").matches;
+const currentTheme = () => document.documentElement.dataset.theme || (systemDark() ? "dark" : "light");
+function drawTheme() {
+  const dark = currentTheme() === "dark";
+  themeBtn.querySelector(".theme-ic").innerHTML = icon(dark ? "moon" : "sun").toString();
+  themeBtn.querySelector(".theme-text").textContent = dark ? "Dark" : "Light";
+}
+themeBtn.addEventListener("click", () => {
+  const next = currentTheme() === "dark" ? "light" : "dark";
+  document.documentElement.dataset.theme = next;
+  try { localStorage.setItem("vfrey-desk-theme", next); } catch { /* ignore */ }
+  drawTheme();
+});
+matchMedia("(prefers-color-scheme: dark)").addEventListener("change", drawTheme);
+drawTheme();
+
+// ---------- polling ----------
+const busyJobs = (s) => s?.tick?.running || (s?.jobs || []).some((j) => j.status === "leased");
+async function poll() {
+  if (inFlight) return;
+  inFlight = true;
+  clearTimeout(timer);
+  if (store.state) { store.link = "refreshing"; drawLive(); }
+  try {
+    const s = await read("/api/state");
+    if (!s.ok) throw new Error("state");
+    store.state = s; store.lastGood = Date.now(); store.link = "live";
+    afterState(s);
+  } catch {
+    store.link = "offline";
+  }
+  inFlight = false;
+  drawLive();
+  schedule();
+}
+function afterState(s) {
+  const running = !!s.tick?.running;
+  if (prevTickRunning === true && !running) {
+    if (s.tick.error) toast("Tick failed", { kind: "error", detail: s.tick.error });
+    else toast(`Tick finished`, { detail: `${s.tick.processed ?? 0} job${s.tick.processed === 1 ? "" : "s"} processed` });
+  }
+  prevTickRunning = running;
+  drawNav();
+  view?.update(s);
+}
+function schedule() {
+  clearTimeout(timer);
+  if (document.hidden) return;
+  timer = setTimeout(poll, busyJobs(store.state) ? 2000 : 5000);
+}
+document.addEventListener("visibilitychange", () => { if (document.hidden) clearTimeout(timer); else poll(); });
+window.addEventListener("focus", () => { if (!inFlight) poll(); });
+store.refresh = () => { clearTimeout(timer); return poll(); };
+
+// 1 s ticker for elapsed labels that sit between polls
+setInterval(() => {
+  const now = Date.now();
+  for (const el of $$(document, "[data-tick-since]")) el.textContent = clock(now - ms(el.dataset.tickSince));
+  for (const el of $$(document, "[data-dur-since]")) el.textContent = dur(now - ms(el.dataset.durSince));
+}, 1000);
+
+drawNav(); drawLive();
+mountRoute();
+poll();

package/src/desk/ui/components.js

@@ -0,0 +1,79 @@
+// Reusable fragments. Everything returns html`` (escaped) values.
+import { html, raw, icon, STATUS, STAGES, stageInfo, cap, ms, rel, abs } from "./core.js";
+
+export const PLATFORMS = { youtube: "YouTube", tiktok: "TikTok", instagram: "Instagram", facebook: "Facebook" };
+export const platformName = (p) => PLATFORMS[p] || cap(p);
+
+export function statusPill(status, { iconic = false } = {}) {
+  const s = STATUS[status] || { label: status, tone: "wait", ic: "clock" };
+  const live = status === "leased" ? " live" : "";
+  if (iconic) return html`<span class="pill tone-${s.tone}${live}">${s.ic === "spinner" ? icon("spinner", "spin") : icon(s.ic)}${s.label}</span>`;
+  return html`<span class="pill tone-${s.tone}${live}">${s.label}</span>`;
+}
+
+export function stageTone(status) {
+  return { succeeded: "ok", running: "run", skipped: "skip", retrying: "retry", rejected: "rej", blocked: "block", dead: "dead", pending: "wait", warning: "retry", awaiting_review: "retry", approved: "ok" }[status] || "wait";
+}
+
+// Five-step rail: done, active, retry, failed, skipped, or idle (not reached).
+export function stageRail(job) {
+  const cells = STAGES.map((stage) => {
+    const info = stageInfo(job, stage);
+    let state = "idle", note = "not reached";
+    if (info) {
+      note = info.status;
+      if (info.status === "succeeded") state = "done";
+      else if (info.status === "running") state = "active";
+      else if (info.status === "skipped") state = "skipped";
+      else if (info.status === "retrying" || info.status === "awaiting_review") state = "retry";
+      else if (["rejected", "blocked", "dead"].includes(info.status)) state = "failed";
+      else state = "idle";
+    }
+    return html`<div class="step ${state}" title="${cap(stage)}: ${note}"><i></i><span>${stage}</span></div>`;
+  });
+  return html`<div class="rail" role="img" aria-label="Stage progress">${cells}</div>`;
+}
+
+// Small cell illustrations: one per kind of empty state, drawn in mono cells like the landing.
+const CELLS = {
+  film: ["□ ■ ■ □", "■ ▣ ▣ ■", "□ ■ ■ □"],
+  clock: ["□ ■ □", "■ ▣ ■", "□ ■ □"],
+  done: ["□ □ □ ■", "■ □ ■ □", "□ ▣ □ □"],
+  alert: ["□ ▣ □", "□ ■ □", "□ ▣ □"],
+  metrics: ["□ □ □ ■", "□ □ ■ ■", "□ ■ ■ ■"],
+  series: ["■ ■ ■", "■ □ □", "■ □ □"],
+};
+const cellArt = (name) => {
+  const rows = CELLS[name] || CELLS.clock;
+  return html`<pre class="cells" aria-hidden="true">${rows.map((r) => raw(r.replace(/([■▣])/g, "<b>$1</b>").replace(/□/g, '<span class="d">□</span>') + "\n"))}</pre>`;
+};
+export function emptyState(iconName, title, text, action = "") {
+  return html`<div class="empty">${cellArt(iconName)}<p class="t">${title}</p><p>${text}</p>${action}</div>`;
+}
+
+export const when = (iso) => html`<span title="${abs(iso)}" data-since="${iso}">${rel(iso)}</span>`;
+
+export function copyBtn(text, label = "Copy") {
+  return html`<button type="button" class="icon-btn" data-copy="${text}" aria-label="${label}" title="${label}">${icon("copy")}</button>`;
+}
+
+export function cadenceSummary(s) {
+  const perDay = s.maxPostsPerDay === 1 ? "1 a day" : `${s.maxPostsPerDay} a day`;
+  return `${perDay} · ${s.minHoursBetweenPosts} h apart · ${s.timezone}`;
+}
+export const CADENCE = { on_track: ["On track", "ok"], behind: ["Behind", "warn"], ahead: ["Ahead", ""] };
+
+export function platformChips(state, seriesId) {
+  const rows = (state.platforms || []).filter((p) => p.seriesId === seriesId);
+  const chips = ["youtube", "tiktok", "instagram", "facebook"].map((pl) => {
+    const row = rows.find((r) => r.platform === pl);
+    return row?.enabled ? html`<span class="chip">${platformName(pl)}</span>` : "";
+  });
+  return chips.some(Boolean) ? html`<div class="chips">${chips}</div>` : html`<span class="muted">No platform on</span>`;
+}
+
+export function latestRunStatus(state, series) {
+  const jobs = (state.jobs || []).filter((j) => (j.seriesId ?? j.accountId) === series.id);
+  return jobs[0] ? statusPill(jobs[0].status) : html`<span class="muted">No runs yet</span>`;
+}
+export { ms };

package/src/desk/ui/core.js

@@ -0,0 +1,156 @@
+// Shared plumbing: escaping html tag, state store, api() helper, toasts, formatting.
+import { icons } from "./icons.js";
+
+const ESC = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+export const esc = (v) => String(v ?? "").replace(/[&<>"']/g, (c) => ESC[c]);
+
+class Safe { constructor(s) { this.s = s; } toString() { return this.s; } }
+export const raw = (s) => new Safe(String(s));
+const part = (v) => (v instanceof Safe ? v.s : Array.isArray(v) ? v.map(part).join("") : v == null || v === false ? "" : esc(v));
+// html`...` escapes every interpolation unless it is raw() or a nested html`` result.
+export const html = (strings, ...vals) => new Safe(strings.reduce((out, s, i) => out + s + (i < vals.length ? part(vals[i]) : ""), ""));
+export const icon = (name, cls = "") => {
+  const svg = icons[name];
+  if (!cls) return raw(svg);
+  return raw(svg.includes(' class="') ? svg.replace(' class="', ` class="${cls} `) : svg.replace("<svg ", `<svg class="${cls}" `));
+};
+// An identical render is skipped, so a poll never replaces the node under a click that is in flight.
+export const setHtml = (el, safe) => {
+  const next = safe.toString();
+  if (el.__html === next && el.isConnected) return;
+  el.__html = next;
+  el.innerHTML = next;
+};
+
+export const $ = (root, sel) => root.querySelector(sel);
+export const $$ = (root, sel) => [...root.querySelectorAll(sel)];
+
+// ---------- state ----------
+export const store = { state: null, lastGood: null, link: "connecting", listeners: new Set() };
+export const onState = (fn) => { store.listeners.add(fn); return () => store.listeners.delete(fn); };
+
+// ---------- toasts ----------
+export function toast(message, { kind = "info", detail = "", ms } = {}) {
+  const host = document.getElementById("toasts");
+  const el = document.createElement("div");
+  el.className = `toast ${kind}`;
+  el.setAttribute("role", kind === "error" ? "alert" : "status");
+  el.innerHTML = html`<span class="grow"><b>${message}</b>${detail ? html`<small>${detail}</small>` : ""}</span><button type="button" aria-label="Dismiss">${icon("x")}</button>`.toString();
+  const close = () => el.remove();
+  el.querySelector("button").addEventListener("click", close);
+  host.append(el);
+  while (host.children.length > 4) host.firstChild.remove();
+  setTimeout(close, ms ?? (kind === "error" ? 9000 : 4500));
+}
+
+// ---------- api ----------
+// One write path. Returns the parsed body ({ ok: true, ... }) or a refusal ({ ok: false, refusal, fix }).
+export async function api(path, body = {}) {
+  let res;
+  try {
+    res = await fetch(path, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });
+  } catch {
+    return { ok: false, refusal: "Dashboard server is not reachable", fix: "Check that npx vfrey dashboard is still running, then try again." };
+  }
+  let data = null;
+  try { data = await res.json(); } catch { /* non-JSON body */ }
+  if (!data) return { ok: false, refusal: `Unexpected response (${res.status})`, fix: "Reload the page and try again." };
+  if (!res.ok && data.ok !== false) data.ok = false;
+  data.status = res.status;
+  return data;
+}
+export async function read(path) {
+  const res = await fetch(path, { headers: { accept: "application/json" } });
+  const data = await res.json().catch(() => null);
+  if (!data) throw new Error(`Bad response ${res.status}`);
+  return data;
+}
+export const refusalToast = (r) => toast(r.refusal || "Request failed", { kind: "error", detail: r.fix || "" });
+
+// ---------- time ----------
+const T = (iso) => (iso ? Date.parse(iso) : NaN);
+export const ms = T;
+export function dur(n) {
+  if (n == null || !isFinite(n) || n < 0) return "—";
+  if (n < 1000) return `${Math.round(n)} ms`;
+  if (n < 60000) return `${(n / 1000).toFixed(1)} s`;
+  const s = Math.round(n / 1000);
+  if (s < 3600) return `${Math.floor(s / 60)} m ${s % 60} s`;
+  return `${Math.floor(s / 3600)} h ${Math.floor((s % 3600) / 60)} m`;
+}
+export function rel(iso, now = Date.now()) {
+  const t = T(iso);
+  if (!isFinite(t)) return "—";
+  const d = Math.round((now - t) / 1000);
+  const a = Math.abs(d);
+  const u = a < 5 ? "just now" : a < 60 ? `${a} s` : a < 3600 ? `${Math.floor(a / 60)} min` : a < 86400 ? `${Math.floor(a / 3600)} h` : `${Math.floor(a / 86400)} d`;
+  if (u === "just now") return u;
+  return d >= 0 ? `${u} ago` : `in ${u}`;
+}
+export const abs = (iso) => { const t = T(iso); return isFinite(t) ? new Date(t).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "medium" }) : ""; };
+export const clock = (n) => { const s = Math.max(0, Math.floor(n / 1000)); return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; };
+export const short = (id) => String(id ?? "").slice(0, 8);
+export const num = (n) => (n == null ? "—" : Number(n).toLocaleString());
+
+// ---------- job helpers ----------
+export const STAGES = ["source", "generate", "render", "publish", "engage"];
+export const TERMINAL = new Set(["succeeded", "rejected", "blocked", "dead"]);
+export const GROUPS = {
+  waiting: { label: "Waiting", statuses: ["pending", "awaiting_review"] },
+  running: { label: "Running", statuses: ["leased"] },
+  finished: { label: "Finished", statuses: ["succeeded"] },
+  failed: { label: "Failed", statuses: ["rejected", "blocked", "dead"] },
+};
+export const STATUS = {
+  pending: { label: "Waiting", tone: "wait", ic: "clock" },
+  awaiting_review: { label: "Needs review", tone: "retry", ic: "alert" },
+  leased: { label: "Running", tone: "run", ic: "spinner" },
+  succeeded: { label: "Finished", tone: "ok", ic: "done" },
+  rejected: { label: "Rejected · quality", tone: "rej", ic: "alert" },
+  blocked: { label: "Blocked · compliance", tone: "block", ic: "failed" },
+  dead: { label: "Dead · retries used", tone: "dead", ic: "failed" },
+};
+export const groupOf = (status) => Object.keys(GROUPS).find((g) => GROUPS[g].statuses.includes(status)) || "waiting";
+
+export function jobTimes(job, now = Date.now()) {
+  const ev = job.events || [];
+  const start = ev.length ? ms(ev[0].at) : ms(job.createdAt);
+  let end;
+  if (TERMINAL.has(job.status)) end = ev.length ? Math.max(...ev.map((e) => ms(e.at))) : ms(job.updatedAt);
+  else if (job.status === "leased") end = now;
+  else end = NaN;
+  const started = ev.length || job.status !== "pending";
+  return { start: started ? start : NaN, end, total: started && isFinite(end) ? Math.max(0, end - start) : NaN, running: job.status === "leased" };
+}
+
+// Per-stage status for the rail and timeline.
+export function stageInfo(job, stage) {
+  const evs = (job.events || []).filter((e) => e.stage === stage);
+  if (!evs.length) return null;
+  // A warning is a note on the stage, not a state of it.
+  const core = evs.filter((e) => e.status !== "warning");
+  if (!core.length) return null;
+  const last = core[core.length - 1];
+  const runs = core.filter((e) => e.status === "running");
+  const terms = core.filter((e) => e.status !== "running");
+  const lastTerm = terms[terms.length - 1];
+  const open = last.status === "running";
+  const startAt = runs.length ? ms(runs[0].at) : lastTerm ? ms(lastTerm.at) - (lastTerm.durationMs || 0) : ms(last.at);
+  const endAt = open ? null : ms(lastTerm.at);
+  return { stage, events: evs, status: last.status, open, startAt, endAt, durationMs: open ? null : lastTerm.durationMs ?? (endAt - startAt) };
+}
+
+// The series a job belongs to: jobs carry seriesId (accountId holds the same value).
+export const seriesFor = (state, job) => job.seriesId ?? job.accountId;
+
+export function currentStage(job) {
+  if (job.status === "succeeded") return "done";
+  return job.stage;
+}
+export const cap = (s) => String(s ?? "").charAt(0).toUpperCase() + String(s ?? "").slice(1);
+export async function copyText(text) {
+  try { await navigator.clipboard.writeText(text); return true; } catch {
+    const t = document.createElement("textarea"); t.value = text; t.style.position = "fixed"; t.style.opacity = "0";
+    document.body.append(t); t.select(); let ok = false; try { ok = document.execCommand("copy"); } catch { /* ignore */ } t.remove(); return ok;
+  }
+}

package/src/desk/ui/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" fill="#2196F3"/></svg>

package/src/desk/ui/icons.js

@@ -0,0 +1,49 @@
+// vfrey's own square icons. Drawn on a 16x16 grid from rectangles and straight lines only:
+// square caps, miter joins, 1.5 stroke, currentColor. No third-party icon packs.
+const A = ' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true"';
+const line = (body) => `<svg${A} width="16" height="16">${body}</svg>`; // small actions, 16px
+const big = (body) => `<svg${A} class="sq">${body}</svg>`; // nav, status, empty states, sized by CSS
+
+export const icons = {
+  // nav / larger glyphs
+  board: big('<rect x="2" y="2" width="5" height="5"/><rect x="9" y="2" width="5" height="5"/><rect x="2" y="9" width="5" height="5"/><rect x="9" y="9" width="5" height="5"/>'),
+  runs: big('<rect x="2" y="2.5" width="3" height="3" fill="currentColor"/><rect x="2" y="10.5" width="3" height="3" fill="currentColor"/><path d="M7.5 4h6.5M7.5 8h6.5M7.5 12h6.5M2 8h3"/>'),
+  series: big('<rect x="2" y="2" width="9" height="9"/><path d="M13.5 5v8.5H5"/>'),
+  creators: big('<rect x="5.5" y="2" width="5" height="5"/><path d="M2.5 14v-2.5h11V14"/>'),
+  mail: big('<rect x="2" y="3.5" width="12" height="9"/><path d="M2 4.5l6 4.5 6-4.5"/>'),
+  topics: big('<path d="M2 13.5h12"/><path d="M3 13.5V9M7 13.5V5.5M11 13.5V2.5"/><rect x="1.5" y="1.5" width="3" height="3" fill="currentColor"/>'),
+  metrics: big('<path d="M2 2v12h12"/><path d="M5.5 11V8M8.5 11V5M11.5 11V7.5"/>'),
+  warnings: big('<path d="M4 12V6.5L6 3h4l2 3.5V12M2.5 12h11M6.5 14.25h3"/>'),
+  settings: big('<path d="M2 4.5h12M2 11.5h12"/><rect x="9" y="2.5" width="3" height="4" fill="currentColor"/><rect x="4" y="9.5" width="3" height="4" fill="currentColor"/>'),
+  review: big('<rect x="2" y="2" width="12" height="12"/><path d="M5 6h6M5 8.5h6M5 11h3"/>'),
+  keys: big('<rect x="2" y="2" width="5" height="5"/><path d="M7 4.5h7M11 4.5v3M13.5 4.5v2M4.5 7v7"/>'),
+  alert: big('<path d="M8 1.75 14.75 14H1.25z"/><path d="M8 6v4M8 11.5v1.5"/>'),
+  done: big('<rect x="2" y="2" width="12" height="12"/><path d="M5 8.25 7.25 10.5 11 6"/>'),
+  failed: big('<rect x="2" y="2" width="12" height="12"/><path d="M5.5 5.5l5 5M10.5 5.5l-5 5"/>'),
+  clock: big('<rect x="2" y="2" width="12" height="12"/><path d="M8 4.5V8h3"/>'),
+  film: big('<rect x="2" y="3" width="12" height="10"/><path d="M5 3v10M11 3v10M2 6.5h3M2 9.5h3M11 6.5h3M11 9.5h3"/>'),
+  moon: big('<path d="M8.5 2.5h-6v11h11v-6h-3v3h-5v-5h3z"/>'),
+  sun: big('<rect x="5" y="5" width="6" height="6" fill="currentColor"/><path d="M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2M3.5 3.5l1 1M11.5 11.5l1 1M12.5 3.5l-1 1M4.5 11.5l-1 1"/>'),
+  publications: big('<rect x="2" y="2" width="12" height="12"/><path d="M5 6h6M5 8.5h6M5 11h3.5"/>'),
+  sources: big('<rect x="2" y="2" width="4" height="4"/><rect x="2" y="10" width="4" height="4"/><path d="M6 4h4.5v8H6M10.5 8H14"/>'),
+  engage: big('<path d="M2 2.5h12v8H7l-3 3v-3H2z"/>'),
+  trends: big('<path d="M2 13.5h12"/><path d="M2.5 11 6 7.5l2.5 2L13.5 4"/><path d="M10.5 4h3v3"/>'),
+  // small actions
+  copy: line('<rect x="5.5" y="5.5" width="8" height="8"/><path d="M10.5 3.25v-.75h-8v8h.75"/>'),
+  check: line('<path d="M3 8.5 6.5 12 13 4.5"/>'),
+  x: line('<path d="M3.5 3.5l9 9M12.5 3.5l-9 9"/>'),
+  retry: line('<path d="M13 8v4.5H3v-9h8"/><path d="M9 1.75l2.25 1.75L9 5.25"/>'),
+  cancel: line('<rect x="3.5" y="3.5" width="9" height="9" fill="currentColor"/>'),
+  play: line('<path d="M4.5 2.75v10.5L12.5 8z" fill="currentColor"/>'),
+  refresh: line('<path d="M3 6.5V3.5h9"/><path d="M10 1.5l2.25 2L10 5.5"/><path d="M13 9.5v3H4"/><path d="M6 10.5l-2.25 2L6 14.5"/>'),
+  chevronRight: line('<path d="M6 3l5 5-5 5"/>'),
+  chevronDown: line('<path d="M3 6l5 5 5-5"/>'),
+  external: line('<path d="M7 3H2.75v10.25H13V9"/><path d="M9.5 2.75h3.75v3.75M13 3 7.5 8.5"/>'),
+  menu: line('<path d="M2.5 4h11M2.5 8h11M2.5 12h11"/>'),
+  plus: line('<path d="M8 2.5v11M2.5 8h11"/>'),
+  trash: line('<path d="M2.5 4h11M6 4V2.25h4V4"/><path d="M3.75 4v9.75h8.5V4M6.5 6.5v5M9.5 6.5v5"/>'),
+  spinner: line('<path d="M8 2v3M8 11v3M2 8h3M11 8h3" opacity="1"/><path d="M3.75 3.75l1.5 1.5M10.75 10.75l1.5 1.5M12.25 3.75l-1.5 1.5M5.25 10.75l-1.5 1.5" opacity=".45"/>'),
+  search: line('<rect x="2.5" y="2.5" width="8" height="8"/><path d="M10.5 10.5l3 3"/>'),
+  info: line('<rect x="2.5" y="2.5" width="11" height="11"/><path d="M8 7v4M8 4.75v.75"/>'),
+  pause: line('<rect x="3.5" y="3" width="3" height="10" fill="currentColor"/><rect x="9.5" y="3" width="3" height="10" fill="currentColor"/>'),
+};

package/src/desk/ui/index.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<title>vfrey desk</title>
+<link rel="icon" href="/assets/icon.svg" type="image/svg+xml">
+<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
+<link rel="apple-touch-icon" href="/assets/apple-icon.png">
+<script src="/assets/theme.js"></script>
+<link rel="preload" href="/fonts/google-sans-flex-latin.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="/fonts/jetbrains-mono-medium.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="/assets/app.css">
+</head>
+<body>
+<header class="topbar">
+  <button class="icon-btn" id="menu-btn" type="button" aria-label="Open menu" aria-expanded="false" aria-controls="sidebar"></button>
+  <a href="/" class="wordmark" data-link>vfrey</a>
+  <span class="project-name" data-project-name></span>
+  <span class="live-dot" data-live-mini></span>
+</header>
+<div class="scrim" id="scrim"></div>
+<div class="shell">
+  <aside class="sidebar" id="sidebar" aria-label="Primary">
+    <a href="/" class="wordmark side-word" data-link>vfrey</a>
+    <p class="project-name" data-project-name></p>
+    <p class="side-section">Desk</p>
+    <nav id="nav"></nav>
+    <div class="side-foot">
+      <div class="live" id="live" role="status"><span class="live-dot"></span><span class="live-text">Connecting</span></div>
+      <p class="env" id="env"></p>
+      <button type="button" class="theme-btn" id="theme-btn" aria-label="Switch color theme"><span class="theme-ic"></span><span class="theme-text"></span></button>
+    </div>
+  </aside>
+  <main id="main" tabindex="-1"></main>
+</div>
+<div id="toasts" aria-live="polite"></div>
+<script type="module" src="/assets/app.js"></script>
+</body>
+</html>

package/src/desk/ui/metrics-math.d.ts

@@ -0,0 +1,22 @@
+export const DASH: string;
+export const DRY_RUN_ID: string;
+export interface MetricRow { platform: string; externalId: string; capturedAt?: string; views: number | null; watchTimeSec: number | null; retention: number | null; estimatedRevenue: number | null; revenueStatus: string; [k: string]: unknown }
+export interface PostRow { kind: "measured" | "unmeasured" | "dry_run"; platform: string; externalId: string | null; metric: MetricRow | null; reason: string }
+export interface Known { total: number | null; known: number; of: number }
+export interface KnownMean { mean: number | null; known: number; of: number }
+export function platformLabel(p: string): string;
+export function exposure(platform: string, field: string): "returned" | "not_exposed";
+export function gapLabel(m: Pick<MetricRow, "platform" | "revenueStatus" | "estimatedRevenue"> & Record<string, unknown>, field: string): string;
+export function sumKnown(values: Array<number | null | undefined>): Known;
+export function meanKnown(values: Array<number | null | undefined>): KnownMean;
+export function compact(n: number | null | undefined): string;
+export function percent(r: number | null | undefined): string;
+export function isDryRun(externalId: string | null | undefined): boolean;
+export function buildRows(metrics: MetricRow[] | undefined, publications: Array<{ id: string; platform: string; externalId: string | null }> | undefined): PostRow[];
+export function summarize(rows: PostRow[]): { posts: number; dryRuns: number; measured: number; views: Known; watch: KnownMean; retention: KnownMean; asOf: string | null };
+export function describeSum(s: Known, noun: string, posts?: string): string;
+export interface Gained { gained: number | null; from: string | null; to: string | null; reason: "ok" | "one_snapshot" | "no_snapshot" | "unknown_views" }
+export function viewsGained(snapshots: Array<{ capturedAt: string; views: number | null }> | undefined): Gained;
+export interface GainSummary { gained: number | null; known: number; of: number; asOf: string | null; since: string | null; reason: "ok" | "not_measured" | "one_snapshot" | "unknown_views" }
+export function summarizeGains(results: Gained[]): GainSummary;
+export const TREND_REASONS: Record<string, string>;