@vfrey/vfrey 0.0.1 → 1.0.0-beta.0

package/src/desk/overlay.ts

@@ -0,0 +1,112 @@
+import type { Account, AppConfig } from "@vfrey/contracts";
+import type { DeskOverlay } from "../queue/desk-ops.js";
+
+type Platforms = Account["platforms"];
+
+const bool = (value: unknown, fallback: boolean): boolean => (typeof value === "boolean" ? value : fallback);
+const text = (value: unknown, fallback: string): string => (typeof value === "string" && value ? value : fallback);
+
+/** Env names a desk-made platform uses when the series has no accounts-file entry for it. */
+function defaultPlatform(platform: string): Platforms[keyof Platforms] | undefined {
+  if (platform === "youtube") {
+    return {
+      enabled: true,
+      privacyStatus: "private",
+      categoryId: "22",
+      madeForKids: false,
+      refreshTokenEnv: "YT_REFRESH_TOKEN",
+      clientIdEnv: "GOOGLE_CLIENT_ID",
+      clientSecretEnv: "GOOGLE_CLIENT_SECRET",
+      notifySubscribers: null,
+    };
+  }
+  if (platform === "tiktok") {
+    return {
+      enabled: true,
+      privacyLevel: "SELF_ONLY",
+      refreshTokenEnv: "TIKTOK_REFRESH_TOKEN",
+      openIdEnv: "TIKTOK_OPEN_ID",
+      brandContent: false,
+      brandOrganic: false,
+      disableComment: false,
+    };
+  }
+  if (platform === "instagram") {
+    return { enabled: true, igUserIdEnv: "IG_USER_ID", accessTokenEnv: "IG_ACCESS_TOKEN", shareToFeed: true };
+  }
+  if (platform === "facebook") {
+    return { enabled: true, pageIdEnv: "FB_PAGE_ID", pageTokenEnv: "FB_PAGE_TOKEN" };
+  }
+  return undefined;
+}
+
+export function applyDeskAccount(account: Account, overlay: DeskOverlay): Account {
+  const platforms: Platforms = { ...account.platforms };
+  for (const item of overlay.platforms) {
+    const config = item.config;
+    if (item.platform === "youtube") {
+      const base = platforms.youtube ?? (defaultPlatform("youtube") as Platforms["youtube"]);
+      if (!base) continue;
+      const privacy = config.privacyStatus;
+      platforms.youtube = {
+        ...base,
+        enabled: item.enabled,
+        privacyStatus: privacy === "public" || privacy === "private" || privacy === "unlisted" ? privacy : base.privacyStatus,
+        categoryId: text(config.categoryId, base.categoryId),
+        madeForKids: bool(config.madeForKids, base.madeForKids),
+      };
+    } else if (item.platform === "tiktok") {
+      const base = platforms.tiktok ?? (defaultPlatform("tiktok") as Platforms["tiktok"]);
+      if (!base) continue;
+      const level = config.privacyLevel;
+      const allowed = ["PUBLIC_TO_EVERYONE", "MUTUAL_FOLLOW_FRIENDS", "FOLLOWER_OF_CREATOR", "SELF_ONLY"];
+      platforms.tiktok = {
+        ...base,
+        enabled: item.enabled,
+        privacyLevel: typeof level === "string" && allowed.includes(level) ? (level as typeof base.privacyLevel) : base.privacyLevel,
+      };
+    } else if (item.platform === "instagram") {
+      const base = platforms.instagram ?? (defaultPlatform("instagram") as Platforms["instagram"]);
+      if (!base) continue;
+      platforms.instagram = { ...base, enabled: item.enabled, shareToFeed: bool(config.shareToFeed, base.shareToFeed) };
+    } else if (item.platform === "facebook") {
+      const base = platforms.facebook ?? (defaultPlatform("facebook") as Platforms["facebook"]);
+      if (!base) continue;
+      platforms.facebook = { ...base, enabled: item.enabled };
+    }
+  }
+  return {
+    ...account,
+    niche: overlay.niche,
+    language: overlay.language,
+    voices: overlay.voices.length > 0 ? overlay.voices : account.voices,
+    hashtagPool: overlay.hashtagPool.length > 0 ? overlay.hashtagPool : account.hashtagPool,
+    cadence: {
+      timezone: overlay.timezone,
+      minHoursBetweenPosts: overlay.minHoursBetweenPosts,
+      maxPostsPerDay: overlay.maxPostsPerDay,
+      windows: overlay.windows,
+    },
+    engage: {
+      enabled: overlay.engageEnabled,
+      allowSpicy: overlay.allowSpicy,
+      maxRepliesPerDay: overlay.maxRepliesPerDay,
+      minSecondsBetweenReplies: overlay.minSecondsBetween,
+    },
+    platforms,
+  };
+}
+
+export function applyDesk(
+  account: Account,
+  overlay: DeskOverlay,
+  config: AppConfig,
+): { account: Account; config: AppConfig } {
+  return {
+    account: applyDeskAccount(account, overlay),
+    config: {
+      ...config,
+      youtube: { ...config.youtube, dailyUploadCap: overlay.youtubeDailyUploadCap },
+    },
+  };
+}

package/src/desk/preview.ts

@@ -0,0 +1,422 @@
+import { createReadStream, existsSync, readFileSync, realpathSync, statSync } from "node:fs";
+import { mkdir, readFile, stat } from "node:fs/promises";
+import type { IncomingMessage, ServerResponse } from "node:http";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import type { Store } from "../queue/store.js";
+import { sceneTimingFor } from "../scene/audio.js";
+import { labelPng, labelPosition, labelSize } from "../scene/label.js";
+import { patchComposition } from "../scene/render.js";
+import { SUPPLY_DIR, writeSupply } from "../scene/supply.js";
+import { estimateTiming, type BeatInput, type SceneTiming } from "../scene/timing.js";
+
+/**
+ * The live scene preview: a run's stored scene copy (or a project scene folder) served from the dashboard's own
+ * localhost origin, with the files vfrey supplies at render time, so the browser plays it the way the renderer would.
+ *
+ *   /preview/runs/<id>/                  the host page: the Framey player plus the AI label overlay
+ *   /preview/scenes/<name>/              the same for `<project>/scenes/<name>`
+ *   <host>/scene/index.html              the scene, patched exactly as a render patches it
+ *   <host>/scene/<file>                  any other file of the scene (never its own `vfrey/` folder)
+ *   <host>/scene/vfrey/<file>            the supplied timing.json, voice.wav, vfrey.js, gsap, fonts and assets
+ *   /preview/_player/<file>              the vendored player, the runtime it drives, the label image
+ *
+ * Every response carries a CSP that allows only this origin, and a sandbox without `allow-same-origin`: the scene
+ * runs in an opaque origin, so it cannot read the dashboard or call its write routes, and it cannot reach the network.
+ */
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const vendor = path.resolve(here, "../../vendor");
+export const PLAYER_FILE = path.join(vendor, "framey-player", "hyperframes-player.global.js");
+export const RUNTIME_FILE = path.join(vendor, "framey", "dist", "hyperframe.runtime.iife.js");
+
+export const PREVIEW_CSP = [
+  "default-src 'self'",
+  "script-src 'self' 'unsafe-inline'",
+  "style-src 'self' 'unsafe-inline'",
+  "img-src 'self' data: blob:",
+  "media-src 'self' blob:",
+  "font-src 'self' data:",
+  "connect-src 'self'",
+  "frame-src 'self'",
+  "object-src 'none'",
+  "base-uri 'none'",
+  "form-action 'none'",
+  "sandbox allow-scripts",
+].join("; ");
+
+/**
+ * The host page may only be framed by a dashboard page. The scene inside it cannot carry the same rule: its parent is
+ * the host page, which runs in an opaque origin, and Chromium never matches an opaque ancestor against a host source.
+ */
+const HOST_CSP = `${PREVIEW_CSP}; frame-ancestors http://127.0.0.1:* http://localhost:*`;
+
+const MIME: Record<string, string> = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".mjs": "text/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".txt": "text/plain; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".woff2": "font/woff2",
+  ".woff": "font/woff",
+  ".ttf": "font/ttf",
+  ".otf": "font/otf",
+  ".wav": "audio/wav",
+  ".mp3": "audio/mpeg",
+  ".m4a": "audio/mp4",
+  ".mp4": "video/mp4",
+  ".webm": "video/webm",
+};
+
+const ID = /^[A-Za-z0-9-]{1,64}$/;
+const NAME = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/;
+
+/**
+ * Resolves `rel` (a URL path, already decoded) under `root`. Null when it is not a plain relative path, has a `..`,
+ * a dotfile, a backslash or a NUL in it, or when the real file (after symlinks) leaves `root`.
+ */
+export function safeResolve(root: string, rel: string): string | null {
+  if (!rel || rel.includes("\0") || rel.includes("\\") || rel.startsWith("/")) return null;
+  const parts = rel.split("/");
+  if (parts.some((part) => part === "" || part === "." || part === ".." || part.startsWith("."))) return null;
+  const file = path.join(root, ...parts);
+  if (path.relative(root, file).startsWith("..")) return null;
+  try {
+    const real = realpathSync(file);
+    const realRoot = realpathSync(root);
+    if (path.relative(realRoot, real).startsWith("..") || path.isAbsolute(path.relative(realRoot, real))) return null;
+    return statSync(real).isFile() ? real : null;
+  } catch {
+    return null;
+  }
+}
+
+function headers(type: string, extra: Record<string, string> = {}): Record<string, string> {
+  return {
+    "content-type": type,
+    "content-security-policy": PREVIEW_CSP,
+    "cache-control": "no-store",
+    "x-content-type-options": "nosniff",
+    "referrer-policy": "no-referrer",
+    // The scene runs in an opaque origin, so its fonts and fetches are cross-origin. Everything here is read-only.
+    "access-control-allow-origin": "*",
+    ...extra,
+  };
+}
+
+function plain(res: ServerResponse, status: number, message: string): void {
+  res.writeHead(status, headers("text/plain; charset=utf-8"));
+  res.end(`${message}\n`);
+}
+
+function sendFile(req: IncomingMessage, res: ServerResponse, file: string): void {
+  const type = MIME[path.extname(file).toLowerCase()] ?? "application/octet-stream";
+  const size = statSync(file).size;
+  const match = /^bytes=(\d*)-(\d*)$/.exec(String(req.headers.range ?? ""));
+  if (match && (match[1] || match[2])) {
+    let start: number;
+    let end: number;
+    if (match[1]) {
+      start = Number(match[1]);
+      end = match[2] ? Math.min(Number(match[2]), size - 1) : size - 1;
+    } else {
+      start = Math.max(size - Number(match[2]), 0);
+      end = size - 1;
+    }
+    if (size === 0 || start >= size || start > end) {
+      res.writeHead(416, headers("text/plain; charset=utf-8", { "content-range": `bytes */${size}` }));
+      res.end();
+      return;
+    }
+    res.writeHead(206, headers(type, { "content-range": `bytes ${start}-${end}/${size}`, "content-length": String(end - start + 1), "accept-ranges": "bytes" }));
+    createReadStream(file, { start, end }).pipe(res);
+    return;
+  }
+  res.writeHead(200, headers(type, { "content-length": String(size), "accept-ranges": "bytes" }));
+  if (req.method === "HEAD") return void res.end();
+  createReadStream(file).pipe(res);
+}
+
+/** What one preview needs: where the scene is, and the timing and voice the supplied files are made from. */
+interface Source {
+  /** Cache key: the folder `<dataDir>/preview/<key>` holds its supplied files. */
+  key: string;
+  sceneDir: string;
+  title: string;
+  lines: string[];
+  beats: BeatInput[];
+  voiceFile: string | null;
+  /** The timing the scene folder itself carries (`vfrey/timing.json`), used when there is no run. */
+  ownTiming: SceneTiming | null;
+}
+
+export interface PreviewOptions {
+  store: Store;
+  dataDir: string;
+  env: Record<string, string | undefined>;
+  /** The project this dashboard belongs to; its `scenes/<name>` folders can be previewed by name. */
+  project: { id: string; name: string } | null;
+  /** Renders one frame of a Remotion scene to `outputPath`. The default is `render --frame` (needs Chrome); tests inject a fake. */
+  renderFrame?: (input: { sceneDir: string; outputPath: string; workDir: string; frameAt: number; title: string; lines: string[]; beats: BeatInput[]; env: Record<string, string | undefined> }) => Promise<void>;
+}
+
+type Outcome = { ok: true; source: Source } | { ok: false; status: number; message: string };
+
+function runSource(options: PreviewOptions, id: string): Outcome {
+  if (!ID.test(id)) return { ok: false, status: 404, message: "No run has that id." };
+  const row = options.store.db.prepare(`SELECT payload FROM jobs WHERE id = ?`).get(id) as { payload: string } | undefined;
+  if (!row) return { ok: false, status: 404, message: "No run has that id." };
+  let payload: {
+    scene?: { source?: string; dir?: string | null; kind?: string | null } | null;
+    content?: { title?: string; voiceoverScript?: string; voiceoverPath?: string | null; beats?: Array<{ role?: string; text?: string; caption?: string }> } | null;
+  };
+  try {
+    payload = JSON.parse(row.payload);
+  } catch {
+    return { ok: false, status: 404, message: "That run has no scene." };
+  }
+  const scene = payload.scene;
+  if (!scene || scene.source !== "agent" || !scene.dir) return { ok: false, status: 404, message: "That run used the default template, so there is no scene to preview." };
+  if (scene.kind !== "html") return { ok: false, status: 409, message: "Only HTML scenes can be previewed live. A Remotion scene keeps the frame preview." };
+  if (!statSyncSafe(scene.dir)) return { ok: false, status: 404, message: "The run's stored scene copy is no longer on this machine." };
+  const content = payload.content ?? {};
+  const voice = typeof content.voiceoverPath === "string" && content.voiceoverPath ? path.resolve(options.project ? path.dirname(options.dataDir) : options.dataDir, content.voiceoverPath) : null;
+  return {
+    ok: true,
+    source: {
+      key: id,
+      sceneDir: scene.dir,
+      title: content.title ?? "",
+      lines: String(content.voiceoverScript ?? "").split("\n").map((line) => line.trim()).filter(Boolean),
+      beats: (content.beats ?? []).map((b) => ({ role: String(b.role ?? ""), text: String(b.text ?? ""), caption: String(b.caption ?? "") })),
+      voiceFile: voice && existsSync(voice) ? voice : null,
+      ownTiming: null,
+    },
+  };
+}
+
+function projectSource(options: PreviewOptions, name: string): Outcome {
+  if (!options.project) return { ok: false, status: 404, message: "This dashboard has no project, so it has no scene folders." };
+  if (!NAME.test(name)) return { ok: false, status: 404, message: "No scene has that name." };
+  const root = path.join(path.dirname(options.dataDir), "scenes");
+  const dir = path.join(root, name);
+  if (!statSyncSafe(dir) || !existsSync(path.join(dir, "index.html"))) return { ok: false, status: 404, message: "No HTML scene has that name in this project's scenes folder." };
+  let own: SceneTiming | null = null;
+  try {
+    own = JSON.parse(readFileSync(path.join(dir, SUPPLY_DIR, "timing.json"), "utf8")) as SceneTiming;
+  } catch {
+    own = null;
+  }
+  return { ok: true, source: { key: `scene-${name}`, sceneDir: dir, title: name, lines: [], beats: [], voiceFile: null, ownTiming: own } };
+}
+
+function statSyncSafe(dir: string): boolean {
+  try {
+    return statSync(dir).isDirectory();
+  } catch {
+    return false;
+  }
+}
+
+/** The files vfrey supplies, made the way a render makes them, and the timing they carry. */
+async function prepare(options: PreviewOptions, source: Source): Promise<{ dir: string; timing: SceneTiming }> {
+  const dir = path.join(options.dataDir, "preview", source.key);
+  await mkdir(dir, { recursive: true });
+  const timing =
+    source.ownTiming ?? (source.lines.length ? await sceneTimingFor({ title: source.title, lines: source.lines, beats: source.beats }, source.voiceFile, options.env) : estimateTiming({ title: source.title, lines: ["Preview"], beats: [] }));
+  await writeSupply({ dir, timing, voiceFile: source.voiceFile, kind: "html", env: options.env });
+  return { dir, timing };
+}
+
+const attr = (value: string) => value.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+
+export function hostPage(): string {
+  const { x, y } = labelPosition();
+  const { width, height } = labelSize();
+  const pct = (n: number, of: number) => `${((n / of) * 100).toFixed(4)}%`;
+  return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scene preview</title>
+<style>
+html,body{margin:0;height:100%;background:#0b0f14;overflow:hidden}
+#stage{position:relative;height:100%;aspect-ratio:9/16;max-width:100%;margin:0 auto}
+hyperframes-player{display:block;width:100%;height:100%}
+#label{position:absolute;left:${pct(x, 1080)};top:${pct(y, 1920)};width:${pct(width, 1080)};height:${pct(height, 1920)};pointer-events:none;image-rendering:pixelated}
+#note{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:#e6edf3;font:14px system-ui,sans-serif;text-align:center;padding:16px}
+</style></head><body>
+<div id="stage">
+<hyperframes-player id="player" src="scene/index.html" runtime-src="/preview/_player/runtime.js" sandbox-origin="opaque" width="1080" height="1920" controls></hyperframes-player>
+<img id="label" src="/preview/_player/label.png" alt="AI-GENERATED label, as it will be burned into the video">
+<div id="note" role="alert"></div>
+</div>
+<script src="/preview/_player/hyperframes-player.global.js"></script>
+<script>
+(function () {
+  var player = document.getElementById("player");
+  var note = document.getElementById("note");
+  window.__preview = {
+    player: player,
+    ready: false,
+    error: null,
+    play: function () { return player.play(); },
+    pause: function () { return player.pause(); },
+    seek: function (t) { player.seek(t); },
+    time: function () { return player.currentTime; },
+    duration: function () { return player.duration; },
+    paused: function () { return player.paused; }
+  };
+  player.addEventListener("ready", function () { window.__preview.ready = true; document.body.setAttribute("data-ready", "true"); });
+  player.addEventListener("error", function (e) {
+    var message = (e.detail && e.detail.message) || "The scene did not load.";
+    window.__preview.error = message;
+    note.style.display = "flex";
+    note.textContent = message;
+  });
+})();
+</script>
+</body></html>
+`;
+}
+
+/** The index.html a render would hand the engine, plus the runtime the player drives. */
+export function previewIndex(html: string, timing: SceneTiming, hasVoice: boolean): string {
+  const patched = patchComposition(html, timing, hasVoice).html;
+  const tag = `<script src="/preview/_player/runtime.js"></script>`;
+  const head = /<head\b[^>]*>/i.exec(patched);
+  return head ? `${patched.slice(0, head.index + head[0].length)}${tag}${patched.slice(head.index + head[0].length)}` : `${tag}${patched}`;
+}
+
+function decodeSegments(rest: string): string | null {
+  try {
+    return decodeURIComponent(rest);
+  } catch {
+    return null;
+  }
+}
+
+/** The second of the scene shown as the frame preview of a Remotion scene. */
+const FRAME_AT = 1;
+
+/**
+ * A still of a Remotion scene, made the way `vfrey render --scene DIR --frame 1 out.png` makes it and kept next to the
+ * live preview's files. Remotion cannot play in the browser, so the Review screen shows this image instead.
+ */
+async function serveFrame(options: PreviewOptions, req: IncomingMessage, res: ServerResponse, id: string): Promise<void> {
+  if (!ID.test(id)) return plain(res, 404, "No run has that id.");
+  const row = options.store.db.prepare(`SELECT payload FROM jobs WHERE id = ?`).get(id) as { payload: string } | undefined;
+  if (!row) return plain(res, 404, "No run has that id.");
+  let payload: { scene?: { source?: string; dir?: string | null; kind?: string | null } | null; content?: { title?: string; voiceoverScript?: string; beats?: Array<{ role?: string; text?: string; caption?: string }> } | null };
+  try {
+    payload = JSON.parse(row.payload);
+  } catch {
+    return plain(res, 404, "That run has no scene.");
+  }
+  const scene = payload.scene;
+  if (!scene || scene.source !== "agent" || !scene.dir) return plain(res, 404, "That run used the default template, so there is no scene frame.");
+  if (scene.kind !== "tsx") return plain(res, 409, "Only a Remotion scene has a frame preview. An HTML scene plays live.");
+  if (!statSyncSafe(scene.dir)) return plain(res, 404, "The run's stored scene copy is no longer on this machine.");
+  const dir = path.join(options.dataDir, "preview", id);
+  const out = path.join(dir, "frame.png");
+  if (!existsSync(out)) {
+    await mkdir(dir, { recursive: true });
+    const content = payload.content ?? {};
+    const input = {
+      sceneDir: scene.dir,
+      outputPath: out,
+      workDir: path.join(dir, "frame-work"),
+      frameAt: FRAME_AT,
+      title: content.title ?? "",
+      lines: String(content.voiceoverScript ?? "").split("\n").map((line) => line.trim()).filter(Boolean),
+      beats: (content.beats ?? []).map((b) => ({ role: String(b.role ?? ""), text: String(b.text ?? ""), caption: String(b.caption ?? "") })),
+      env: options.env,
+    };
+    try {
+      if (options.renderFrame) await options.renderFrame(input);
+      else {
+        const { renderScene } = await import("../scene/render.js");
+        await renderScene({ engine: "remotion", ...input, voiceoverPath: null });
+      }
+    } catch (error) {
+      return plain(res, 502, `The frame could not be rendered: ${error instanceof Error ? error.message.split("\n")[0] : "unknown error"}`);
+    }
+  }
+  if (!existsSync(out)) return plain(res, 502, "The frame could not be rendered.");
+  sendFile(req, res, out);
+}
+
+/** Handles every GET under `/preview/`. Returns false when the path is not one of ours. */
+export async function handlePreview(options: PreviewOptions, req: IncomingMessage, res: ServerResponse, pathname: string): Promise<boolean> {
+  if (!pathname.startsWith("/preview/")) return false;
+  const asset = /^\/preview\/_player\/([a-z.-]+)$/.exec(pathname);
+  if (asset) {
+    const name = asset[1]!;
+    if (name === "hyperframes-player.global.js") existsSync(PLAYER_FILE) ? sendFile(req, res, PLAYER_FILE) : plain(res, 404, "The player is not vendored.");
+    else if (name === "runtime.js") existsSync(RUNTIME_FILE) ? sendFile(req, res, RUNTIME_FILE) : plain(res, 404, "The runtime is not vendored.");
+    else if (name === "label.png") {
+      const png = labelPng();
+      res.writeHead(200, headers("image/png", { "content-length": String(png.length) }));
+      res.end(png);
+    } else plain(res, 404, "Not found.");
+    return true;
+  }
+  const frame = /^\/preview\/runs\/([^/]+)\/frame\.png$/.exec(pathname);
+  if (frame) {
+    const id = decodeSegments(frame[1]!);
+    await serveFrame(options, req, res, id ?? "");
+    return true;
+  }
+  const m = /^\/preview\/(runs|scenes)\/([^/]+)(\/.*)?$/.exec(pathname);
+  if (!m) return plain(res, 404, "Not found."), true;
+  const name = decodeSegments(m[2]!);
+  const rest = m[3] ?? "";
+  if (!name) return plain(res, 400, "Bad address."), true;
+  const found = m[1] === "runs" ? runSource(options, name) : projectSource(options, name);
+  if (!found.ok) return plain(res, found.status, found.message), true;
+  if (rest === "") {
+    res.writeHead(308, { location: `${pathname}/`, "cache-control": "no-store" });
+    res.end();
+    return true;
+  }
+  const { source } = found;
+  if (rest === "/") {
+    // A fresh supply for every open, so an edited scene or a re-recorded voice shows up on reload.
+    await prepare(options, source).catch(() => null);
+    res.writeHead(200, headers(MIME[".html"]!, { "content-security-policy": HOST_CSP }));
+    res.end(hostPage());
+    return true;
+  }
+  const sub = /^\/scene\/(.+)$/.exec(rest);
+  if (!sub) return plain(res, 404, "Not found."), true;
+  const rel = decodeSegments(sub[1]!);
+  if (!rel) return plain(res, 400, "Bad address."), true;
+  const supplyRoot = path.join(options.dataDir, "preview", source.key);
+  // The host page makes the supply fresh; a request that arrives first (a reload of one file) makes it once.
+  if (!existsSync(path.join(supplyRoot, SUPPLY_DIR, "timing.json"))) await prepare(options, source).catch(() => null);
+  if (rel.startsWith(`${SUPPLY_DIR}/`)) {
+    const file = safeResolve(path.join(supplyRoot, SUPPLY_DIR), rel.slice(SUPPLY_DIR.length + 1));
+    return file ? sendFile(req, res, file) : plain(res, 404, "Not found."), true;
+  }
+  if (rel === SUPPLY_DIR) return plain(res, 404, "Not found."), true;
+  const file = safeResolve(source.sceneDir, rel);
+  if (!file) return plain(res, 404, "Not found."), true;
+  if (rel === "index.html") {
+    try {
+      const timing = JSON.parse(await readFile(path.join(supplyRoot, SUPPLY_DIR, "timing.json"), "utf8")) as SceneTiming;
+      const hasVoice = await stat(path.join(supplyRoot, SUPPLY_DIR, "voice.wav")).then(() => true, () => false);
+      const html = previewIndex(await readFile(file, "utf8"), timing, hasVoice);
+      res.writeHead(200, headers(MIME[".html"]!));
+      res.end(req.method === "HEAD" ? undefined : html);
+    } catch (error) {
+      plain(res, 422, error instanceof Error ? error.message : "The scene could not be prepared.");
+    }
+    return true;
+  }
+  sendFile(req, res, file);
+  return true;
+}