npm - voxflow - Versions diffs - 1.15.0 → 1.15.2 - Mend

voxflow 1.15.0 → 1.15.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (453) hide show

package/lib/stage-ui/slice/template.js ADDED Viewed

@@ -0,0 +1,1672 @@
+'use strict';
+/**
+ * Stage UI for `voxflow slice stage`.
+ *
+ * Inline HTML/JS string — embedded as a JS literal so ncc bundles it without
+ * triggering the asset-rewrite trap (see scripts/check-no-asset-rewrite.js).
+ *
+ * Responsibilities:
+ *   - Subscribe to /events SSE; render the deck on the `deck` event.
+ *   - Render each card as a 9:16 vertical preview with per-theme styling
+ *     (best-effort approximation of the 6 Slice themes — pixel-perfect
+ *     output still requires the cloud Remotion render).
+ *   - Light/dark page chrome with auto / manual toggle, persisted in
+ *     localStorage (key: `voxflow.stage.theme`).
+ *
+ * Card theme palettes are deliberately fixed (not viewer-overridable) — a
+ * `bold-poster` card stays bright yellow even in dark page chrome, because
+ * theme is a property of the deck content, not the viewer.
+ */
+const { formatCardAsText, formatDeckAsMarkdown, suggestDeckFilename } = require('../../stage-core/deck-format');
+function renderSliceStageHtml({ sourcePath, port }) {
+  const safePath = String(sourcePath || '').replace(/[<>&"']/g, (c) => ({
+    '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&#39;',
+  }[c]));
+  return `<!doctype html>
+<html lang="en" data-theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>VoxFlow Stage — Slice</title>
+  <style>
+    /* ─── Page chrome: light + dark via prefers-color-scheme + manual override ── */
+    :root {
+      --bg: #ffffff;
+      --panel: #f7f7f9;
+      --panel-2: #ffffff;
+      --border: #e5e5ea;
+      --text: #1a1a1f;
+      --muted: #6b6b78;
+      --accent: #5851b8;
+      --good: #16a34a;
+      --warn: #d97706;
+      --bad:  #dc2626;
+      --shadow: 0 1px 2px rgba(15, 15, 25, 0.04), 0 4px 12px rgba(15, 15, 25, 0.05);
+      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+      color-scheme: light;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root[data-theme="auto"] {
+        --bg: #0e0d14;
+        --panel: #16151d;
+        --panel-2: #1c1a25;
+        --border: #2a2735;
+        --text: #e8e6f0;
+        --muted: #8a8694;
+        --accent: #8b85e0;
+        --good: #3ad29f;
+        --warn: #f5a524;
+        --bad:  #f56565;
+        --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.5);
+        color-scheme: dark;
+      }
+    }
+    :root[data-theme="dark"] {
+      --bg: #0e0d14;
+      --panel: #16151d;
+      --panel-2: #1c1a25;
+      --border: #2a2735;
+      --text: #e8e6f0;
+      --muted: #8a8694;
+      --accent: #8b85e0;
+      --good: #3ad29f;
+      --warn: #f5a524;
+      --bad:  #f56565;
+      --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.5);
+      color-scheme: dark;
+    }
+    :root[data-theme="light"] {
+      color-scheme: light;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      transition: background 0.15s ease, color 0.15s ease;
+    }
+    header {
+      display: flex; align-items: center; gap: 12px;
+      padding: 12px 20px;
+      border-bottom: 1px solid var(--border);
+      background: var(--panel);
+      position: sticky; top: 0; z-index: 10;
+      backdrop-filter: saturate(140%) blur(8px);
+    }
+    header .brand {
+      font-weight: 600; letter-spacing: 0.02em;
+    }
+    header .brand .accent { color: var(--accent); }
+    header .src {
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 12px; color: var(--muted);
+      max-width: 50ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    }
+    header .grow { flex: 1; }
+    header .status {
+      display: inline-flex; align-items: center; gap: 6px;
+      font-size: 12px; color: var(--muted);
+    }
+    .dot {
+      width: 8px; height: 8px; border-radius: 50%;
+      background: var(--muted);
+      transition: background 0.2s ease;
+    }
+    .dot.good { background: var(--good); }
+    .dot.warn { background: var(--warn); }
+    .dot.bad  { background: var(--bad); }
+    .theme-toggle {
+      appearance: none; border: 1px solid var(--border);
+      background: var(--panel-2); color: var(--text);
+      font-size: 12px; font-family: inherit;
+      padding: 4px 10px; border-radius: 6px; cursor: pointer;
+      display: inline-flex; align-items: center; gap: 6px;
+      transition: background 0.15s ease, border-color 0.15s ease;
+    }
+    .theme-toggle:hover { border-color: var(--accent); }
+    .theme-toggle .icon { font-size: 13px; }
+    /* Versions button reuses theme-toggle visuals so the header looks like
+       one cohesive control cluster, not a bag of buttons. */
+    .versions-btn {
+      appearance: none; border: 1px solid var(--border);
+      background: var(--panel-2); color: var(--text);
+      font-size: 12px; font-family: inherit;
+      padding: 4px 10px; border-radius: 6px; cursor: pointer;
+      display: inline-flex; align-items: center; gap: 6px;
+      transition: background 0.15s ease, border-color 0.15s ease;
+    }
+    .versions-btn:hover { border-color: var(--accent); }
+    .versions-btn .count-pill {
+      background: var(--accent); color: white;
+      border-radius: 9px; padding: 0 6px; font-size: 10px;
+      font-weight: 600; min-width: 16px; text-align: center;
+    }
+    .versions-drawer {
+      position: fixed; top: 56px; right: 16px;
+      width: 320px; max-height: calc(100vh - 80px);
+      background: var(--panel); border: 1px solid var(--border);
+      border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+      display: none; flex-direction: column;
+      z-index: 50;
+    }
+    .versions-drawer.open { display: flex; }
+    .versions-drawer header.drawer-head {
+      display: flex; align-items: center; gap: 8px;
+      padding: 10px 12px; border-bottom: 1px solid var(--border);
+      font-size: 13px; font-weight: 600;
+    }
+    .versions-drawer .drawer-head .grow { flex: 1; }
+    .versions-drawer .drawer-close {
+      appearance: none; border: 0; background: transparent;
+      color: var(--muted); font-size: 18px; line-height: 1;
+      cursor: pointer; padding: 2px 6px; border-radius: 4px;
+    }
+    .versions-drawer .drawer-close:hover { background: var(--panel-2); color: var(--text); }
+    .versions-drawer .drawer-body {
+      overflow-y: auto; padding: 6px;
+    }
+    .versions-drawer .empty-msg {
+      padding: 16px 12px; color: var(--muted); font-size: 12px; text-align: center;
+    }
+    .version-row {
+      display: grid; grid-template-columns: 1fr auto;
+      gap: 8px; align-items: center;
+      padding: 8px 10px; border-radius: 6px;
+      border: 1px solid transparent;
+    }
+    .version-row + .version-row { margin-top: 2px; }
+    .version-row:hover { background: var(--panel-2); border-color: var(--border); }
+    .version-row.current {
+      background: var(--panel-2); border-color: var(--accent);
+    }
+    .version-row .ts {
+      font-size: 12px; font-weight: 500; color: var(--text);
+      font-variant-numeric: tabular-nums;
+    }
+    .version-row .meta {
+      font-size: 10px; color: var(--muted);
+      font-family: var(--mono);
+    }
+    .version-row .restore-btn {
+      appearance: none; border: 1px solid var(--border);
+      background: var(--panel); color: var(--text);
+      font-size: 11px; padding: 3px 9px; border-radius: 5px;
+      cursor: pointer;
+    }
+    .version-row.current .restore-btn { display: none; }
+    .version-row .restore-btn:hover { border-color: var(--accent); color: var(--accent); }
+    .version-row .restore-btn:disabled { opacity: 0.5; cursor: progress; }
+    .versions-drawer .store-path {
+      padding: 8px 12px; border-top: 1px solid var(--border);
+      font-size: 10px; color: var(--muted); font-family: var(--mono);
+      word-break: break-all;
+    }
+    /* Render button — primary action, sits between History and theme toggle.
+       Visually heavier than the other header pills since it's the "ship"
+       affordance (the one quota-charging action in the page). */
+    .render-btn {
+      appearance: none; border: 1px solid var(--accent);
+      background: var(--accent); color: white;
+      font-size: 12px; font-family: inherit; font-weight: 600;
+      padding: 4px 12px; border-radius: 6px; cursor: pointer;
+      display: inline-flex; align-items: center; gap: 6px;
+      transition: filter 0.15s ease;
+    }
+    .render-btn:hover:not(:disabled) { filter: brightness(1.08); }
+    .render-btn:disabled { opacity: 0.6; cursor: progress; }
+    .render-btn .icon { font-size: 13px; }
+    .render-btn.completed {
+      background: transparent; color: var(--accent);
+      text-decoration: none;
+    }
+    .render-btn.completed:hover { filter: none; text-decoration: underline; }
+    .render-modal-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 6px; }
+    .render-modal-body .quota-line {
+      display: flex; justify-content: space-between; align-items: baseline;
+      padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
+      background: var(--panel-2);
+    }
+    .render-modal-body .quota-line .key { color: var(--muted); font-size: 11px; }
+    .render-modal-body .quota-line .val { font-family: var(--mono); font-size: 13px; font-weight: 600; }
+    .render-modal-body .quota-line.short .val { color: var(--bad); }
+    .render-modal-body .err-msg {
+      color: var(--bad); font-size: 12px; padding: 6px 10px;
+      border: 1px solid var(--bad); border-radius: 6px;
+      background: color-mix(in srgb, var(--bad) 8%, transparent);
+    }
+    .render-modal-body .progress-msg {
+      color: var(--muted); font-size: 12px; padding: 6px 10px;
+    }
+    .render-modal-body .progress-msg .stage-label { color: var(--text); font-weight: 600; }
+    .render-confirm-btn {
+      appearance: none; border: 1px solid var(--accent);
+      background: var(--accent); color: white;
+      font-size: 12px; font-family: inherit; font-weight: 600;
+      padding: 6px 14px; border-radius: 6px; cursor: pointer;
+    }
+    .render-confirm-btn:disabled { opacity: 0.6; cursor: progress; }
+    .render-confirm-btn:hover:not(:disabled) { filter: brightness(1.08); }
+    main {
+      display: grid;
+      grid-template-rows: auto auto;
+      gap: 16px;
+      padding: 20px;
+      max-width: 1400px; margin: 0 auto;
+    }
+    section {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 18px;
+      box-shadow: var(--shadow);
+    }
+    section h2 {
+      margin: 0 0 14px;
+      font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
+      color: var(--muted); font-weight: 600;
+      display: flex; align-items: center; gap: 8px;
+    }
+    section h2 .count {
+      background: var(--panel-2); border: 1px solid var(--border);
+      color: var(--text);
+      padding: 1px 8px; border-radius: 999px;
+      font-size: 11px; font-weight: 500; letter-spacing: 0;
+    }
+    section h2 .preview-tag {
+      margin-left: auto;
+      background: transparent; color: var(--muted);
+      font-size: 10px; font-weight: 500; letter-spacing: 0.04em;
+      text-transform: none;
+    }
+    /* ─── Cards grid (9:16 vertical previews) ─────────────────────────────── */
+    .cards-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      gap: 18px;
+    }
+    .stage-card {
+      aspect-ratio: 9 / 16;
+      border-radius: 10px;
+      overflow: hidden;
+      position: relative;
+      box-shadow: var(--shadow);
+      display: flex; flex-direction: column;
+      transition: transform 0.15s ease;
+      cursor: default;
+    }
+    .stage-card:hover { transform: translateY(-2px); }
+    .stage-card .frame-meta {
+      position: absolute; top: 10px; left: 10px; right: 10px;
+      display: flex; align-items: center; gap: 6px;
+      font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
+      opacity: 0.55; pointer-events: none;
+      z-index: 2;
+    }
+    .stage-card .frame-meta .idx {
+      background: rgba(0,0,0,0.18); color: inherit;
+      padding: 1px 6px; border-radius: 4px;
+      font-weight: 600;
+    }
+    .stage-card[data-card-bg="dark"] .frame-meta .idx {
+      background: rgba(255,255,255,0.18);
+    }
+    .stage-card .figure-chip {
+      position: absolute; top: 32px; right: 10px;
+      font-size: 10px; padding: 2px 8px; border-radius: 4px;
+      background: rgba(0,0,0,0.08);
+      opacity: 0.7;
+      z-index: 2;
+    }
+    .stage-card[data-card-bg="dark"] .figure-chip {
+      background: rgba(255,255,255,0.12);
+    }
+    .stage-card .body {
+      flex: 1;
+      display: flex; flex-direction: column;
+      justify-content: center;
+      padding: 28px 22px 22px;
+      gap: 8px;
+      overflow: hidden;
+    }
+    .stage-card.kind-title .body { justify-content: center; text-align: left; }
+    /* Body cards: extra bottom padding so narration never sits underneath
+       the [Edit with AI] button that appears on hover. */
+    .stage-card.kind-body  .body { justify-content: flex-end; padding-bottom: 46px; }
+    .stage-card .title-text {
+      font-size: clamp(18px, 2.4vw, 26px);
+      line-height: 1.18;
+      font-weight: var(--card-title-weight, 700);
+      word-break: keep-all;
+    }
+    .stage-card .title-text .line {
+      display: block;
+    }
+    .stage-card .caption {
+      font-size: clamp(13px, 1.6vw, 16px);
+      line-height: 1.35;
+      font-weight: 600;
+    }
+    .stage-card .narration {
+      font-size: 11px;
+      line-height: 1.5;
+      opacity: 0.7;
+      max-height: 4.5em; overflow: hidden;
+      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
+    }
+    .stage-card .accent-bar {
+      position: absolute; left: 0; bottom: 0;
+      height: 4px; width: 32%;
+      background: var(--card-accent, currentColor);
+    }
+    /* ─── Edit-with-AI affordance: per-card button + floating selection btn ── */
+    .edit-btn {
+      position: absolute; right: 10px; bottom: 10px;
+      appearance: none; border: 0; cursor: pointer;
+      font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
+      padding: 5px 10px; border-radius: 6px;
+      background: rgba(0,0,0,0.78); color: #fff;
+      opacity: 0; transform: translateY(4px);
+      transition: opacity 0.15s ease, transform 0.15s ease;
+      z-index: 3;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+    }
+    .stage-card[data-card-bg="dark"] .edit-btn {
+      background: rgba(255,255,255,0.92); color: #0a0a0a;
+    }
+    .stage-card:hover .edit-btn,
+    .edit-btn:focus-visible {
+      opacity: 1; transform: translateY(0);
+    }
+    .edit-btn:hover { filter: brightness(1.1); }
+    .edit-btn .icon { margin-right: 4px; }
+    /* ─── Text-export controls (Phase 1.4) — per-card copy + deck toolbar ── */
+    .stage-card .card-actions {
+      position: absolute; right: 10px; top: 10px;
+      display: flex; gap: 6px; z-index: 3;
+      opacity: 0; transform: translateY(-4px);
+      transition: opacity 0.15s ease, transform 0.15s ease;
+    }
+    .stage-card:hover .card-actions { opacity: 1; transform: translateY(0); }
+    .stage-card .card-actions button {
+      appearance: none; border: 0; cursor: pointer; font: inherit;
+      font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
+      padding: 4px 9px; border-radius: 6px;
+      background: rgba(0,0,0,0.78); color: #fff;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+    }
+    .stage-card[data-card-bg="dark"] .card-actions button {
+      background: rgba(255,255,255,0.92); color: #0a0a0a;
+    }
+    .stage-card .card-actions button.copied {
+      background: rgba(34,197,94,0.92); color: #fff;
+    }
+    .deck-toolbar {
+      display: flex; gap: 8px; flex-wrap: wrap;
+      margin: 0 0 14px;
+    }
+    .deck-toolbar button {
+      appearance: none; cursor: pointer; font: inherit;
+      background: transparent; color: var(--text);
+      border: 1px solid var(--border); border-radius: 8px;
+      padding: 6px 12px; font-size: 12px;
+    }
+    .deck-toolbar button:hover:not(:disabled) { border-color: var(--accent); }
+    .deck-toolbar button:disabled {
+      color: var(--muted); cursor: not-allowed; opacity: 0.65;
+    }
+    .deck-toolbar button.copied {
+      color: var(--good); border-color: var(--good);
+    }
+    .selection-fab {
+      position: fixed; z-index: 50;
+      appearance: none; border: 0; cursor: pointer;
+      font: inherit; font-size: 11px; font-weight: 600;
+      padding: 6px 12px; border-radius: 6px;
+      background: var(--accent); color: #fff;
+      box-shadow: 0 4px 14px rgba(0,0,0,0.3);
+      display: none;
+    }
+    .selection-fab.visible { display: inline-flex; align-items: center; gap: 6px; }
+    /* ─── Modal for showing the copy-pasteable AI prompt ──────────────────── */
+    .modal-backdrop {
+      position: fixed; inset: 0; z-index: 100;
+      background: rgba(8, 8, 14, 0.55);
+      backdrop-filter: blur(2px);
+      display: none; align-items: center; justify-content: center;
+      padding: 20px;
+    }
+    .modal-backdrop.open { display: flex; }
+    .modal {
+      width: 100%; max-width: 560px; max-height: 86vh;
+      background: var(--panel); color: var(--text);
+      border: 1px solid var(--border); border-radius: 12px;
+      box-shadow: var(--shadow);
+      display: flex; flex-direction: column;
+      overflow: hidden;
+    }
+    .modal-header {
+      display: flex; align-items: center; gap: 12px;
+      padding: 14px 18px;
+      border-bottom: 1px solid var(--border);
+    }
+    .modal-header h3 { margin: 0; font-size: 14px; font-weight: 600; }
+    .modal-header .grow { flex: 1; }
+    .modal-close {
+      appearance: none; border: 0; background: transparent;
+      font-size: 18px; line-height: 1; cursor: pointer;
+      color: var(--muted); padding: 4px 8px; border-radius: 4px;
+    }
+    .modal-close:hover { background: var(--panel-2); color: var(--text); }
+    .modal-body {
+      padding: 16px 18px; overflow-y: auto;
+      display: flex; flex-direction: column; gap: 12px;
+    }
+    .modal-body label {
+      font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
+      color: var(--muted); font-weight: 600;
+    }
+    .modal-body textarea.instruction {
+      width: 100%; min-height: 56px; resize: vertical;
+      padding: 10px 12px; border-radius: 6px;
+      border: 1px solid var(--border); background: var(--panel-2);
+      color: var(--text); font: inherit; font-size: 13px;
+      transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    }
+    .modal-body textarea.instruction:focus {
+      outline: none;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
+    }
+    .modal-body pre.prompt {
+      margin: 0; max-height: 320px; overflow: auto;
+      padding: 12px; border-radius: 6px;
+      background: var(--panel-2); border: 1px solid var(--border);
+      font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
+      color: var(--text); white-space: pre-wrap; word-break: break-word;
+    }
+    .modal-footer {
+      display: flex; align-items: center; gap: 12px;
+      padding: 12px 18px;
+      border-top: 1px solid var(--border);
+      background: var(--panel-2);
+    }
+    .modal-footer .hint { color: var(--muted); font-size: 11px; flex: 1; }
+    .copy-btn {
+      appearance: none; border: 0; cursor: pointer;
+      font: inherit; font-size: 13px; font-weight: 600;
+      padding: 8px 16px; border-radius: 6px;
+      background: var(--accent); color: #fff;
+      transition: background 0.15s ease, opacity 0.15s ease;
+    }
+    .copy-btn:hover { filter: brightness(1.08); }
+    .copy-btn.copied { background: var(--good); }
+    /* ─── Parse-error banner: shown when deck.json is invalid JSON ────────── */
+    .parse-error-banner {
+      display: none;
+      margin: 0 0 14px;
+      padding: 10px 14px; border-radius: 8px;
+      background: color-mix(in srgb, var(--bad) 12%, transparent);
+      border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
+      color: var(--text);
+      font-size: 12px; line-height: 1.5;
+    }
+    .parse-error-banner.visible { display: block; }
+    .parse-error-banner strong {
+      color: var(--bad); font-weight: 600;
+      display: block; margin-bottom: 2px;
+      font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
+    }
+    .parse-error-banner code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 12px;
+      background: var(--panel-2);
+      padding: 1px 6px; border-radius: 4px;
+      word-break: break-all;
+    }
+    /* ─── Just-changed flash: highlights cards that changed on hot-reload ── */
+    @keyframes vfStageJustChanged {
+      0%   { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
+      60%  { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
+      100% { box-shadow: 0 0 0 0 transparent, var(--shadow); }
+    }
+    .stage-card.just-changed {
+      animation: vfStageJustChanged 1500ms ease-out;
+    }
+    pre {
+      margin: 0;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 12px; line-height: 1.55;
+      color: var(--text); background: var(--panel-2);
+      border: 1px solid var(--border); border-radius: 8px;
+      padding: 14px; overflow: auto; max-height: 60vh;
+    }
+    .empty {
+      color: var(--muted);
+      font-size: 13px;
+      padding: 48px 12px;
+      text-align: center;
+    }
+    .footer-hint {
+      padding: 10px 20px 20px;
+      font-size: 11px; color: var(--muted);
+      text-align: center;
+    }
+    code.kbd {
+      background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px;
+      padding: 1px 6px; font-family: ui-monospace, monospace; font-size: 11px;
+    }
+    details.json-section { margin-top: 0; }
+    details.json-section > summary {
+      cursor: pointer; list-style: none;
+      font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
+      color: var(--muted); font-weight: 600;
+      padding: 6px 0;
+    }
+    details.json-section > summary::-webkit-details-marker { display: none; }
+    details.json-section > summary::before {
+      content: '▸'; display: inline-block; margin-right: 6px;
+      transition: transform 0.15s ease;
+    }
+    details.json-section[open] > summary::before { transform: rotate(90deg); }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="brand">Vox<span class="accent">Flow</span> Stage <span style="color:var(--muted)">/ slice</span></div>
+    <div class="src" id="src" title="${safePath}">${safePath}</div>
+    <div class="grow"></div>
+    <div class="status">
+      <span class="dot" id="dot"></span>
+      <span id="status-label">connecting…</span>
+    </div>
+    <button class="render-btn" id="render-btn" type="button" aria-label="Render this deck to mp4 (cloud)">
+      <span class="icon">▶</span>
+      <span id="render-btn-label">Render mp4</span>
+    </button>
+    <button class="versions-btn" id="versions-btn" type="button" aria-label="Show version history" aria-expanded="false">
+      <span class="icon">📚</span>
+      <span>History</span>
+      <span class="count-pill" id="versions-count" hidden>0</span>
+    </button>
+    <button class="theme-toggle" id="theme-toggle" type="button" aria-label="Toggle color theme">
+      <span class="icon" id="theme-icon">◐</span>
+      <span id="theme-label">auto</span>
+    </button>
+  </header>
+  <aside class="versions-drawer" id="versions-drawer" role="dialog" aria-modal="false" aria-labelledby="versions-drawer-title">
+    <header class="drawer-head">
+      <span id="versions-drawer-title">Version history</span>
+      <span class="grow"></span>
+      <button class="drawer-close" id="versions-close" type="button" aria-label="Close history">×</button>
+    </header>
+    <div class="drawer-body" id="versions-body">
+      <div class="empty-msg">No history yet — edits will show up here.</div>
+    </div>
+    <div class="store-path" id="versions-store-path" hidden></div>
+  </aside>
+  <main>
+    <section>
+      <h2>
+        Cards
+        <span class="count" id="card-count" hidden>0</span>
+        <span class="preview-tag">preview · final mp4 from voxflow.studio/apps/slice</span>
+      </h2>
+      <div class="parse-error-banner" id="parse-error-banner" role="status" aria-live="polite">
+        <strong>Deck JSON is invalid — preview shows last good version</strong>
+        <span id="parse-error-detail"></span>
+      </div>
+      <div class="deck-toolbar" id="deck-toolbar">
+        <button id="copy-json-btn" type="button" disabled title="Copy raw deck.json to clipboard">Copy JSON</button>
+        <button id="download-json-btn" type="button" disabled title="Save deck.json to disk">Download .json</button>
+        <button id="copy-md-btn" type="button" disabled title="Copy as Markdown — paste into Notion / blog / 飞书">Copy as Markdown</button>
+      </div>
+      <div id="cards-pane" class="empty">Waiting for deck…</div>
+    </section>
+    <section>
+      <details class="json-section">
+        <summary>Deck JSON</summary>
+        <pre id="json-pane">// no deck loaded yet</pre>
+      </details>
+    </section>
+  </main>
+  <div class="footer-hint">
+    Edit <code class="kbd">${safePath}</code> in your editor — this page hot-reloads on save.
+    &nbsp;·&nbsp; Listening on <code class="kbd">http://127.0.0.1:${Number(port) || 5180}</code>
+  </div>
+  <button class="selection-fab" id="selection-fab" type="button" aria-label="Edit selection with AI">
+    <span>✏</span><span>Edit selection with AI</span>
+  </button>
+  <div class="modal-backdrop" id="render-modal" role="dialog" aria-modal="true" aria-labelledby="render-modal-title" hidden>
+    <div class="modal">
+      <div class="modal-header">
+        <h3 id="render-modal-title">Render this deck to mp4</h3>
+        <div class="grow"></div>
+        <button class="modal-close" id="render-modal-close" type="button" aria-label="Close">×</button>
+      </div>
+      <div class="modal-body render-modal-body" id="render-modal-body">
+        <div class="quota-line">
+          <span class="key">Cost</span>
+          <span class="val">500 quota</span>
+        </div>
+        <div class="quota-line" id="render-quota-line">
+          <span class="key">Your remaining</span>
+          <span class="val" id="render-quota-val">loading…</span>
+        </div>
+        <div class="progress-msg" id="render-progress-msg" hidden>
+          <span class="stage-label" id="render-progress-stage">Submitting…</span>
+          <span id="render-progress-detail"></span>
+        </div>
+        <div class="err-msg" id="render-err" hidden></div>
+      </div>
+      <div class="modal-footer">
+        <span class="hint">
+          Cloud rendered at voxflow.studio/apps/slice. The mp4 link opens in a new tab when ready.
+        </span>
+        <button class="render-confirm-btn" id="render-confirm" type="button" disabled>Render now</button>
+      </div>
+    </div>
+  </div>
+  <div class="modal-backdrop" id="edit-modal" role="dialog" aria-modal="true" aria-labelledby="edit-modal-title" hidden>
+    <div class="modal">
+      <div class="modal-header">
+        <h3 id="edit-modal-title">Edit with AI</h3>
+        <div class="grow"></div>
+        <button class="modal-close" id="modal-close" type="button" aria-label="Close">×</button>
+      </div>
+      <div class="modal-body">
+        <label for="edit-instruction">Tell the AI what to change</label>
+        <textarea
+          id="edit-instruction"
+          class="instruction"
+          placeholder="e.g. shorten the narration to 30 chars and make it punchier"
+          autocomplete="off"
+          spellcheck="false"
+        ></textarea>
+        <label>Prompt to send (auto-generated)</label>
+        <pre class="prompt" id="edit-prompt-preview"></pre>
+      </div>
+      <div class="modal-footer">
+        <span class="hint">
+          Paste into Claude Code / Cursor / ChatGPT — the file edit will hot-reload here.
+        </span>
+        <button class="copy-btn" id="copy-prompt" type="button">Copy prompt</button>
+      </div>
+    </div>
+  </div>
+  <script>
+    (function () {
+      // ─── Theme toggle (auto → light → dark → auto) ───────────────────────
+      var THEME_KEY = 'voxflow.stage.theme';
+      var html = document.documentElement;
+      var toggleBtn = document.getElementById('theme-toggle');
+      var iconEl = document.getElementById('theme-icon');
+      var labelEl = document.getElementById('theme-label');
+      function applyTheme(mode) {
+        html.setAttribute('data-theme', mode);
+        if (mode === 'light')      { iconEl.textContent = '☀'; labelEl.textContent = 'light'; }
+        else if (mode === 'dark')  { iconEl.textContent = '☾'; labelEl.textContent = 'dark';  }
+        else                       { iconEl.textContent = '◐'; labelEl.textContent = 'auto';  }
+      }
+      var stored;
+      try { stored = localStorage.getItem(THEME_KEY); } catch (_) { stored = null; }
+      applyTheme(stored === 'light' || stored === 'dark' ? stored : 'auto');
+      toggleBtn.addEventListener('click', function () {
+        var next = ({ auto: 'light', light: 'dark', dark: 'auto' })[
+          html.getAttribute('data-theme') || 'auto'
+        ];
+        try { localStorage.setItem(THEME_KEY, next); } catch (_) {}
+        applyTheme(next);
+      });
+      // ─── Card-theme palettes (best-effort approximation of the 6 Slice
+      //     themes — final pixel-accurate render lives in the cloud). ──────
+      var CARD_THEMES = {
+        'paper-slide': {
+          bg: '#f4ecd8', fg: '#2d2417', accent: '#8b6f47',
+          font: 'Georgia, "Times New Roman", serif',
+          titleWeight: 600, surface: 'light',
+        },
+        'editorial-mag': {
+          bg: '#ffffff', fg: '#0a0a0a', accent: '#c41e3a',
+          font: 'Georgia, "Times New Roman", serif',
+          titleWeight: 700, surface: 'light',
+        },
+        'bold-poster': {
+          bg: '#fde047', fg: '#0a0a0a', accent: '#dc2626',
+          font: 'system-ui, -apple-system, sans-serif',
+          titleWeight: 900, surface: 'light',
+        },
+        'notion-card': {
+          bg: '#ffffff', fg: '#37352f', accent: '#787774',
+          font: 'system-ui, "Segoe UI", -apple-system, sans-serif',
+          titleWeight: 600, surface: 'light',
+          border: '1px solid #e9e9e7',
+        },
+        'brutalist': {
+          bg: '#ffffff', fg: '#000000', accent: '#000000',
+          font: 'ui-monospace, "Courier New", monospace',
+          titleWeight: 900, surface: 'light',
+          border: '4px solid #000',
+        },
+        'glass-dark': {
+          bg: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)',
+          fg: '#e8e6f0', accent: '#a78bfa',
+          font: 'system-ui, -apple-system, sans-serif',
+          titleWeight: 700, surface: 'dark',
+          border: '1px solid rgba(255,255,255,0.12)',
+        },
+      };
+      var DEFAULT_THEME = 'paper-slide';
+      // ─── Element refs ────────────────────────────────────────────────────
+      var dot = document.getElementById('dot');
+      var statusLabel = document.getElementById('status-label');
+      var cardsPane = document.getElementById('cards-pane');
+      var jsonPane = document.getElementById('json-pane');
+      var countBadge = document.getElementById('card-count');
+      var modal = document.getElementById('edit-modal');
+      var modalTitle = document.getElementById('edit-modal-title');
+      var modalClose = document.getElementById('modal-close');
+      var instructionInput = document.getElementById('edit-instruction');
+      var promptPreview = document.getElementById('edit-prompt-preview');
+      var copyBtn = document.getElementById('copy-prompt');
+      var selectionFab = document.getElementById('selection-fab');
+      var errorBanner = document.getElementById('parse-error-banner');
+      var errorDetail = document.getElementById('parse-error-detail');
+      // ─── Text-export (Phase 1.4) — refs + formatter source embed ────────
+      var copyJsonBtn = document.getElementById('copy-json-btn');
+      var downloadJsonBtn = document.getElementById('download-json-btn');
+      var copyMdBtn = document.getElementById('copy-md-btn');
+      // Pure formatters lifted verbatim from lib/stage-core/deck-format.js
+      // via Function.prototype.toString — single source of truth, the
+      // node:test units cover the same source that runs in the browser.
+      var formatCardAsText = ${formatCardAsText.toString()};
+      var formatDeckAsMarkdown = ${formatDeckAsMarkdown.toString()};
+      var suggestDeckFilename = ${suggestDeckFilename.toString()};
+      function flashCopied(btn) {
+        var orig = btn.textContent;
+        btn.textContent = 'Copied!';
+        btn.classList.add('copied');
+        setTimeout(function () {
+          btn.textContent = orig;
+          btn.classList.remove('copied');
+        }, 1200);
+      }
+      function copyTextToClipboard(text, btn) {
+        if (navigator.clipboard && window.isSecureContext) {
+          navigator.clipboard.writeText(text).then(function () { flashCopied(btn); });
+          return;
+        }
+        // Fallback for non-secure contexts: hidden textarea + execCommand
+        var ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.position = 'fixed';
+        ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.select();
+        try { document.execCommand('copy'); flashCopied(btn); } catch (_) {}
+        document.body.removeChild(ta);
+      }
+      function downloadJson(deck, btn) {
+        var blob = new Blob([JSON.stringify(deck, null, 2)], { type: 'application/json' });
+        var url = URL.createObjectURL(blob);
+        var a = document.createElement('a');
+        a.href = url;
+        a.download = suggestDeckFilename(deck);
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        flashCopied(btn);
+      }
+      copyJsonBtn.addEventListener('click', function () {
+        if (!currentDeck) return;
+        copyTextToClipboard(JSON.stringify(currentDeck, null, 2), copyJsonBtn);
+      });
+      downloadJsonBtn.addEventListener('click', function () {
+        if (!currentDeck) return;
+        downloadJson(currentDeck, downloadJsonBtn);
+      });
+      copyMdBtn.addEventListener('click', function () {
+        if (!currentDeck) return;
+        copyTextToClipboard(formatDeckAsMarkdown(currentDeck), copyMdBtn);
+      });
+      // Per-card "Copy text" — event delegation on cardsPane so we don't
+      // re-bind on every hot-reload re-render.
+      cardsPane.addEventListener('click', function (ev) {
+        var btn = ev.target.closest && ev.target.closest('[data-action="copy-card"]');
+        if (!btn || !currentDeck) return;
+        var idx = parseInt(btn.getAttribute('data-card-index'), 10);
+        if (!Number.isFinite(idx)) return;
+        var cards = Array.isArray(currentDeck.cards) ? currentDeck.cards : [];
+        var card = cards[idx];
+        if (!card) return;
+        copyTextToClipboard(formatCardAsText(card), btn);
+      });
+      // For highlighting cards that just changed on hot-reload, we keep a
+      // hash of each card's stringified JSON. On the next deck event we
+      // diff per-index and add the just-changed CSS class to whichever
+      // DOM card moved.
+      var prevCardKeys = [];
+      // Whole-deck de-dup hash: editors that save atomically (write new,
+      // rename over old) cause fs.watch to fire 2-3 events for one save,
+      // which produced duplicate 'deck' SSE messages. Without this guard
+      // each duplicate would re-write innerHTML and wipe the
+      // .just-changed animation class added by the first render.
+      var lastRenderedDeckHash = null;
+      // Latest deck snapshot — populated by SSE. Edit-prompt builder reads
+      // current card data from here so the prompt always reflects what's
+      // on screen, not what was on screen when the modal first opened.
+      var currentDeck = null;
+      var currentDeckPath = '';
+      // Set when a deck event arrives with restoredFrom — the next
+      // renderDeck call should NOT flash diff highlights, because the user
+      // intentionally rewound history (every card is "different from prev"
+      // but that's the wrong story to tell visually).
+      var suppressDiffOnce = false;
+      function setStatus(state, label) {
+        dot.className = 'dot ' + state;
+        statusLabel.textContent = label;
+      }
+      function escapeHtml(s) {
+        return String(s == null ? '' : s).replace(/[<>&"']/g, function (c) {
+          return ({ '<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;',"'":'&#39;' })[c];
+        });
+      }
+      function renderCard(card, i, themeId) {
+        var t = CARD_THEMES[themeId] || CARD_THEMES[DEFAULT_THEME];
+        var kind = card.kind === 'title' ? 'title' : 'body';
+        var titleHtml = '';
+        if (kind === 'title') {
+          var titleArr;
+          if (Array.isArray(card.title)) titleArr = card.title;
+          else if (typeof card.title === 'string') titleArr = [card.title];
+          else titleArr = ['(card ' + (i + 1) + ')'];
+          titleHtml = '<div class="title-text">'
+            + titleArr.map(function (line) {
+                return '<span class="line">' + escapeHtml(line) + '</span>';
+              }).join('')
+            + '</div>';
+        } else {
+          var caption = typeof card.caption === 'string' ? card.caption : ('Card ' + (i + 1));
+          var narration = typeof card.narration === 'string' ? card.narration : '';
+          titleHtml = '<div class="caption">' + escapeHtml(caption) + '</div>'
+            + (narration ? '<div class="narration">' + escapeHtml(narration) + '</div>' : '');
+        }
+        var figureChip = card.figureKeyword
+          ? '<div class="figure-chip">' + escapeHtml(card.figureKeyword) + '</div>'
+          : '';
+        var styleParts = [
+          'background:' + t.bg,
+          'color:' + t.fg,
+          'font-family:' + t.font,
+          '--card-title-weight:' + t.titleWeight,
+          '--card-accent:' + t.accent,
+        ];
+        if (t.border) styleParts.push('border:' + t.border);
+        return '<div class="stage-card kind-' + kind + '"'
+          + ' data-card-bg="' + (t.surface === 'dark' ? 'dark' : 'light') + '"'
+          + ' data-card-idx="' + i + '"'
+          + ' style="' + styleParts.join(';') + '">'
+          + '<div class="frame-meta">'
+              + '<span class="idx">#' + (i + 1) + '</span>'
+              + '<span>' + escapeHtml(themeId) + ' · ' + escapeHtml(kind) + '</span>'
+          + '</div>'
+          + figureChip
+          + '<div class="body">' + titleHtml + '</div>'
+          + '<div class="accent-bar"></div>'
+          + '<div class="card-actions">'
+              + '<button type="button" data-action="copy-card" data-card-index="' + i + '"'
+              + ' aria-label="Copy card ' + (i + 1) + ' as text">Copy text</button>'
+          + '</div>'
+          + '<button class="edit-btn" type="button" data-edit-card-idx="' + i + '"'
+              + ' aria-label="Edit card ' + (i + 1) + ' with AI">'
+              + '<span class="icon">✏</span>Edit with AI'
+          + '</button>'
+          + '</div>';
+      }
+      function renderDeck(deck) {
+        currentDeck = deck;
+        // A successful render means the file is parseable now; clear any
+        // stale error banner from a previous broken-JSON state.
+        hideParseError();
+        var hasDeck = !!(deck && Array.isArray(deck.cards) && deck.cards.length > 0);
+        copyJsonBtn.disabled = !hasDeck;
+        downloadJsonBtn.disabled = !hasDeck;
+        copyMdBtn.disabled = !hasDeck;
+        if (!deck) {
+          cardsPane.className = 'empty';
+          cardsPane.textContent = 'Deck unavailable.';
+          jsonPane.textContent = '// no deck';
+          countBadge.hidden = true;
+          prevCardKeys = [];
+          lastRenderedDeckHash = null;
+          return;
+        }
+        // Skip identical-content re-renders (atomic save → duplicate SSE).
+        // This both saves work and preserves the .just-changed animation
+        // applied on the first render of the new content.
+        var deckHash;
+        try { deckHash = JSON.stringify(deck); } catch (_) { deckHash = null; }
+        if (deckHash !== null && deckHash === lastRenderedDeckHash) return;
+        lastRenderedDeckHash = deckHash;
+        var cards = Array.isArray(deck.cards) ? deck.cards : [];
+        var themeId = (typeof deck.theme === 'string' && CARD_THEMES[deck.theme])
+          ? deck.theme : DEFAULT_THEME;
+        // Compute per-card keys + which indices changed since the last
+        // render. We diff BEFORE replacing innerHTML so the prev hash list
+        // reflects the cards currently on screen.
+        var newKeys = cards.map(function (c) {
+          try { return JSON.stringify(c); } catch (_) { return Math.random().toString(36); }
+        });
+        var changedIdxs = [];
+        for (var k = 0; k < newKeys.length; k++) {
+          if (newKeys[k] !== prevCardKeys[k]) changedIdxs.push(k);
+        }
+        var firstRender = prevCardKeys.length === 0;
+        prevCardKeys = newKeys;
+        if (cards.length === 0) {
+          cardsPane.className = 'empty';
+          cardsPane.textContent = 'Deck has no cards yet.';
+          countBadge.hidden = true;
+        } else {
+          cardsPane.className = 'cards-grid';
+          var html = '';
+          for (var i = 0; i < cards.length; i++) {
+            html += renderCard(cards[i] || {}, i, themeId);
+          }
+          cardsPane.innerHTML = html;
+          countBadge.textContent = cards.length + ' · ' + themeId;
+          countBadge.hidden = false;
+          // Highlight changed cards on hot-reload — but skip the very first
+          // render so we don't flash every card just because the page loaded.
+          // Also skip after a restore: the user just rewound history on
+          // purpose; flashing every card as "just changed" would be noise.
+          var skipDiffFlash = firstRender || suppressDiffOnce;
+          suppressDiffOnce = false;
+          if (!skipDiffFlash && changedIdxs.length > 0 && changedIdxs.length < cards.length) {
+            for (var c2 = 0; c2 < changedIdxs.length; c2++) {
+              var el = cardsPane.querySelector('[data-card-idx="' + changedIdxs[c2] + '"]');
+              if (el) el.classList.add('just-changed');
+            }
+          }
+        }
+        try {
+          jsonPane.textContent = JSON.stringify(deck, null, 2);
+        } catch (e) {
+          jsonPane.textContent = '// could not stringify deck: ' + e.message;
+        }
+      }
+      function showParseError(detailMsg) {
+        errorDetail.innerHTML = '<code>' + escapeHtml(String(detailMsg || 'unknown')) + '</code>';
+        errorBanner.classList.add('visible');
+      }
+      function hideParseError() {
+        errorBanner.classList.remove('visible');
+        errorDetail.textContent = '';
+      }
+      function connect() {
+        setStatus('warn', 'connecting…');
+        var es = new EventSource('/events');
+        es.addEventListener('deck', function (e) {
+          setStatus('good', 'live');
+          try {
+            var msg = JSON.parse(e.data);
+            if (msg && typeof msg.sourcePath === 'string') currentDeckPath = msg.sourcePath;
+            if (msg && msg.restoredFrom) suppressDiffOnce = true;
+            renderDeck(msg.deck);
+            // Refresh the version drawer count + (if open) the row list. We
+            // call this on every deck event so users always see the latest
+            // count without having to re-open the drawer.
+            refreshVersions();
+          } catch (err) {
+            setStatus('bad', 'parse error');
+          }
+        });
+        // The server bus emits { type: 'error', error: 'JSON parse failed: …' }
+        // when the deck file becomes unparseable; that arrives here as an
+        // SSE message with name=error AND data set. The connection-level
+        // EventSource error (lost socket, etc.) arrives WITHOUT data — we
+        // discriminate on e.data so neither swallows the other.
+        es.addEventListener('error', function (e) {
+          if (e && typeof e.data === 'string' && e.data.length > 0) {
+            try {
+              var msg = JSON.parse(e.data);
+              if (msg && msg.type === 'error') {
+                showParseError(msg.error || 'invalid JSON');
+                setStatus('warn', 'deck error');
+                return;
+              }
+            } catch (_) { /* fall through */ }
+          }
+          if (es.readyState === EventSource.CLOSED) {
+            setStatus('bad', 'disconnected');
+          } else {
+            setStatus('warn', 'reconnecting…');
+          }
+        });
+        es.addEventListener('open', function () {
+          setStatus('good', 'live');
+        });
+      }
+      connect();
+      // ─── Version history drawer ─────────────────────────────────────────
+      var versionsBtn = document.getElementById('versions-btn');
+      var versionsCount = document.getElementById('versions-count');
+      var versionsDrawer = document.getElementById('versions-drawer');
+      var versionsBody = document.getElementById('versions-body');
+      var versionsClose = document.getElementById('versions-close');
+      var versionsStorePath = document.getElementById('versions-store-path');
+      // Cached version list — rendered into the drawer when it opens.
+      // We always poll on deck events to keep the count pill fresh, even
+      // when the drawer is closed.
+      var lastVersions = [];
+      var lastStorePath = '';
+      var restoringId = null;
+      function fmtRelativeTime(ts) {
+        var diffSec = Math.floor((Date.now() - ts) / 1000);
+        if (diffSec < 5) return 'just now';
+        if (diffSec < 60) return diffSec + 's ago';
+        if (diffSec < 3600) return Math.floor(diffSec / 60) + 'm ago';
+        if (diffSec < 86400) return Math.floor(diffSec / 3600) + 'h ago';
+        return Math.floor(diffSec / 86400) + 'd ago';
+      }
+      function refreshVersions() {
+        fetch('/api/snapshots', { credentials: 'omit' })
+          .then(function (r) { return r.ok ? r.json() : null; })
+          .then(function (data) {
+            if (!data || !Array.isArray(data.versions)) return;
+            lastVersions = data.versions;
+            lastStorePath = data.storePath || '';
+            versionsCount.textContent = String(lastVersions.length);
+            versionsCount.hidden = lastVersions.length === 0;
+            if (versionsDrawer.classList.contains('open')) renderVersionsList();
+          })
+          .catch(function () { /* drawer feature is best-effort */ });
+      }
+      function renderVersionsList() {
+        if (lastVersions.length === 0) {
+          versionsBody.innerHTML = '<div class="empty-msg">No history yet — edits will show up here.</div>';
+          versionsStorePath.hidden = true;
+          return;
+        }
+        // The current deck = the newest snapshot (since every parseable
+        // change is snapshotted before publish). Tag its row.
+        var html = '';
+        for (var i = 0; i < lastVersions.length; i++) {
+          var v = lastVersions[i];
+          var isCurrent = (i === 0);
+          var label = isCurrent ? 'current' : fmtRelativeTime(v.ts);
+          var meta = v.cardCount + ' cards · ' + (v.sizeBytes >= 1024
+            ? (v.sizeBytes / 1024).toFixed(1) + 'KB' : v.sizeBytes + 'B');
+          var btn = isCurrent ? '' :
+            '<button class="restore-btn" type="button" data-restore-id="' + escapeHtml(v.id) + '"'
+            + (restoringId === v.id ? ' disabled' : '')
+            + '>' + (restoringId === v.id ? 'restoring…' : 'Restore') + '</button>';
+          html += '<div class="version-row ' + (isCurrent ? 'current' : '') + '">'
+            + '<div>'
+            + '<div class="ts">' + escapeHtml(label) + '</div>'
+            + '<div class="meta">' + escapeHtml(meta) + '</div>'
+            + '</div>'
+            + btn
+            + '</div>';
+        }
+        versionsBody.innerHTML = html;
+        if (lastStorePath) {
+          versionsStorePath.textContent = lastStorePath;
+          versionsStorePath.hidden = false;
+        } else {
+          versionsStorePath.hidden = true;
+        }
+      }
+      function openVersionsDrawer() {
+        versionsDrawer.classList.add('open');
+        versionsBtn.setAttribute('aria-expanded', 'true');
+        renderVersionsList();
+      }
+      function closeVersionsDrawer() {
+        versionsDrawer.classList.remove('open');
+        versionsBtn.setAttribute('aria-expanded', 'false');
+      }
+      versionsBtn.addEventListener('click', function () {
+        if (versionsDrawer.classList.contains('open')) closeVersionsDrawer();
+        else openVersionsDrawer();
+      });
+      versionsClose.addEventListener('click', closeVersionsDrawer);
+      // Esc closes the drawer (mirrors modal behavior).
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && versionsDrawer.classList.contains('open')) {
+          closeVersionsDrawer();
+        }
+      });
+      versionsBody.addEventListener('click', function (e) {
+        var target = e.target.closest('[data-restore-id]');
+        if (!target) return;
+        var id = target.getAttribute('data-restore-id');
+        if (!id || restoringId) return;
+        restoringId = id;
+        renderVersionsList();
+        fetch('/api/snapshots/restore', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'omit',
+          body: JSON.stringify({ id: id }),
+        })
+          .then(function (r) {
+            if (!r.ok) throw new Error('restore failed: ' + r.status);
+            // Watcher → SSE deck event will fire shortly with restoredFrom set;
+            // the diff-highlight suppression and refreshVersions both run there.
+          })
+          .catch(function (err) {
+            // Surface the failure inline in the drawer so the user isn't
+            // left wondering why the page didn't update.
+            versionsBody.innerHTML = '<div class="empty-msg" style="color:var(--bad)">'
+              + escapeHtml('Restore failed: ' + err.message) + '</div>';
+          })
+          .finally(function () {
+            restoringId = null;
+            // Re-render after the deck event lands, but also after a short
+            // tick so the disabled button visually clears even if the deck
+            // event somehow doesn't arrive.
+            setTimeout(function () {
+              if (versionsDrawer.classList.contains('open')) renderVersionsList();
+            }, 250);
+          });
+      });
+      // First load (the initial deck SSE event also calls this, but we want
+      // the count pill populated even if the deck event arrives late).
+      refreshVersions();
+      // ─── Render to MP4 (cloud) ──────────────────────────────────────────
+      // State machine:
+      //   idle         → button "Render mp4", click opens modal
+      //   confirming   → modal open, fetching quota, "Render now" enables
+      //                  once quota ≥ 500 (or 401/network error shown)
+      //   submitting   → POST /api/render-mp4, button disabled
+      //   polling      → modal hidden, button shows "Rendering…", poll every 3s
+      //   completed    → button becomes "Open mp4 ↗" link to video URL
+      //   failed       → button reverts to idle, modal shows error on next click
+      var renderBtn = document.getElementById('render-btn');
+      var renderBtnLabel = document.getElementById('render-btn-label');
+      var renderModal = document.getElementById('render-modal');
+      var renderModalClose = document.getElementById('render-modal-close');
+      var renderConfirm = document.getElementById('render-confirm');
+      var renderQuotaLine = document.getElementById('render-quota-line');
+      var renderQuotaVal = document.getElementById('render-quota-val');
+      var renderProgressMsg = document.getElementById('render-progress-msg');
+      var renderProgressStage = document.getElementById('render-progress-stage');
+      var renderProgressDetail = document.getElementById('render-progress-detail');
+      var renderErr = document.getElementById('render-err');
+      var RENDER_COST = 500;
+      var renderState = 'idle';
+      var renderJobId = null;
+      var renderVideoUrl = null;
+      var renderPollTimer = null;
+      var renderLastError = null;
+      function setRenderError(msg) {
+        renderLastError = msg;
+        renderErr.textContent = msg;
+        renderErr.hidden = false;
+      }
+      function clearRenderError() {
+        renderLastError = null;
+        renderErr.hidden = true;
+        renderErr.textContent = '';
+      }
+      function refreshRenderBtn() {
+        renderBtn.classList.remove('completed');
+        if (renderState === 'idle' || renderState === 'failed') {
+          renderBtn.disabled = false;
+          renderBtnLabel.textContent = 'Render mp4';
+          renderBtn.setAttribute('aria-label', 'Render this deck to mp4 (cloud)');
+        } else if (renderState === 'submitting') {
+          renderBtn.disabled = true;
+          renderBtnLabel.textContent = 'Submitting…';
+        } else if (renderState === 'polling') {
+          renderBtn.disabled = false; // click reopens modal to show progress
+          renderBtnLabel.textContent = 'Rendering…';
+        } else if (renderState === 'completed') {
+          renderBtn.disabled = false;
+          renderBtn.classList.add('completed');
+          renderBtnLabel.textContent = 'Open mp4 ↗';
+        }
+      }
+      function openRenderModal() {
+        renderModal.hidden = false;
+        renderModal.classList.add('open');
+        clearRenderError();
+        if (renderState === 'polling') {
+          // Reopen during polling: show progress, hide confirm.
+          renderProgressMsg.hidden = false;
+          renderQuotaLine.style.display = 'none';
+          renderConfirm.hidden = true;
+          return;
+        }
+        renderProgressMsg.hidden = true;
+        renderQuotaLine.style.display = '';
+        renderConfirm.hidden = false;
+        renderConfirm.disabled = true;
+        renderConfirm.textContent = 'Render now';
+        // Pull quota balance.
+        renderQuotaVal.textContent = 'loading…';
+        renderQuotaLine.classList.remove('short');
+        fetch('/api/quota-balance', { credentials: 'omit' })
+          .then(function (r) { return r.json().then(function (j) { return { status: r.status, json: j }; }); })
+          .then(function (resp) {
+            if (resp.status === 401 || resp.json.code === 'not_logged_in') {
+              renderQuotaVal.textContent = 'not logged in';
+              setRenderError('Run \\u0060voxflow login\\u0060 in your terminal, then refresh this page.');
+              return;
+            }
+            if (resp.status !== 200 || resp.json.code !== 'success') {
+              renderQuotaVal.textContent = '?';
+              setRenderError('Could not read quota: ' + (resp.json.message || 'HTTP ' + resp.status));
+              return;
+            }
+            var rem = resp.json.remaining == null ? null : Number(resp.json.remaining);
+            renderQuotaVal.textContent = rem == null ? '?' : rem.toLocaleString();
+            if (rem !== null && rem < RENDER_COST) {
+              renderQuotaLine.classList.add('short');
+              setRenderError('Insufficient quota — need ' + RENDER_COST + ', have ' + rem + '.');
+              renderConfirm.disabled = true;
+            } else {
+              renderConfirm.disabled = false;
+            }
+          })
+          .catch(function (err) {
+            renderQuotaVal.textContent = '?';
+            setRenderError('Quota lookup failed: ' + err.message);
+          });
+      }
+      function closeRenderModal() {
+        renderModal.classList.remove('open');
+        renderModal.hidden = true;
+      }
+      function startPolling() {
+        function tick() {
+          fetch('/api/render-status/' + encodeURIComponent(renderJobId), { credentials: 'omit' })
+            .then(function (r) { return r.json().then(function (j) { return { status: r.status, json: j }; }); })
+            .then(function (resp) {
+              if (resp.status !== 200 || resp.json.code !== 'success') {
+                // Transient errors — keep polling. The user can give up by
+                // refreshing the page; we don't auto-cancel because the job
+                // itself is still running on the backend.
+                renderProgressDetail.textContent = ' · ' + (resp.json.message || 'retrying…');
+                return;
+              }
+              var st = resp.json.status || 'unknown';
+              renderProgressStage.textContent = st;
+              renderProgressDetail.textContent = '';
+              if (st === 'completed') {
+                renderState = 'completed';
+                renderVideoUrl = resp.json.videoUrl || null;
+                clearInterval(renderPollTimer);
+                renderPollTimer = null;
+                refreshRenderBtn();
+                closeRenderModal();
+                if (renderVideoUrl) {
+                  // Auto-open the mp4 — same gesture as a "Render → Open"
+                  // single click would be elsewhere. Future click on the
+                  // button still re-opens (browser may block the auto-open
+                  // but the button is the recovery affordance).
+                  try { window.open(renderVideoUrl, '_blank', 'noopener'); } catch (_) { /* popup blocked */ }
+                }
+              } else if (st === 'failed' || st === 'error') {
+                renderState = 'failed';
+                clearInterval(renderPollTimer);
+                renderPollTimer = null;
+                refreshRenderBtn();
+                setRenderError('Render failed. Check \\u0060voxflow status\\u0060 or retry.');
+              }
+            })
+            .catch(function (err) {
+              renderProgressDetail.textContent = ' · ' + err.message;
+            });
+        }
+        tick();
+        renderPollTimer = setInterval(tick, 3000);
+      }
+      renderBtn.addEventListener('click', function () {
+        if (renderState === 'completed' && renderVideoUrl) {
+          window.open(renderVideoUrl, '_blank', 'noopener');
+          return;
+        }
+        openRenderModal();
+      });
+      renderModalClose.addEventListener('click', closeRenderModal);
+      // Click outside the inner modal closes (mirrors edit-modal).
+      renderModal.addEventListener('click', function (e) {
+        if (e.target === renderModal) closeRenderModal();
+      });
+      // Esc closes (mirrors edit-modal + drawer).
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && renderModal.classList.contains('open')) {
+          closeRenderModal();
+        }
+      });
+      renderConfirm.addEventListener('click', function () {
+        if (!currentDeck || !Array.isArray(currentDeck.cards)) {
+          setRenderError('No deck loaded — fix the JSON parse error first.');
+          return;
+        }
+        renderConfirm.disabled = true;
+        renderConfirm.textContent = 'Submitting…';
+        clearRenderError();
+        renderState = 'submitting';
+        refreshRenderBtn();
+        fetch('/api/render-mp4', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'omit',
+          body: JSON.stringify({ deck: currentDeck }),
+        })
+          .then(function (r) { return r.json().then(function (j) { return { status: r.status, json: j }; }); })
+          .then(function (resp) {
+            if (resp.status !== 200 || resp.json.code !== 'success') {
+              renderState = 'failed';
+              refreshRenderBtn();
+              setRenderError(resp.json.message || ('Render submit failed (' + resp.status + ')'));
+              renderConfirm.disabled = false;
+              renderConfirm.textContent = 'Render now';
+              return;
+            }
+            renderJobId = resp.json.jobId;
+            renderState = 'polling';
+            refreshRenderBtn();
+            // Switch the modal into "rendering…" mode so the user sees the
+            // job pick up. They can close the modal — polling continues in
+            // the background and the button label tracks state.
+            renderQuotaLine.style.display = 'none';
+            renderConfirm.hidden = true;
+            renderProgressMsg.hidden = false;
+            renderProgressStage.textContent = 'pending';
+            renderProgressDetail.textContent = ' · job ' + renderJobId;
+            startPolling();
+          })
+          .catch(function (err) {
+            renderState = 'failed';
+            refreshRenderBtn();
+            setRenderError('Network error: ' + err.message);
+            renderConfirm.disabled = false;
+            renderConfirm.textContent = 'Render now';
+          });
+      });
+      refreshRenderBtn();
+      // ─── Edit-with-AI: prompt builder (mirrors stage-core/edit-prompt.js) ─
+      // Kept as a small in-browser duplicate because the template is an
+      // inline string — pulling the Node module across the boundary would
+      // need a build step we deliberately don't have. The Node module is
+      // unit-tested; the template version follows the same contract.
+      function buildEditPrompt(args) {
+        var deckPath = String(args.deckPath || '').trim();
+        var cardIdx = (typeof args.cardIdx === 'number') ? args.cardIdx : 0;
+        var card = (args.card && typeof args.card === 'object') ? args.card : {};
+        var selection = (typeof args.selectedText === 'string') ? args.selectedText.trim() : '';
+        var instruction = (typeof args.instruction === 'string') ? args.instruction.trim() : '';
+        var kind = (typeof card.kind === 'string' && card.kind) ? card.kind : 'unknown';
+        var cardJson;
+        try {
+          cardJson = JSON.stringify(card, null, 2);
+        } catch (_) {
+          cardJson = JSON.stringify({ kind: card.kind || null, _note: 'card not stringifiable' }, null, 2);
+        }
+        var instructionLine = instruction
+          ? '  ' + instruction
+          : '  <REPLACE THIS WITH YOUR INSTRUCTION — e.g. "make it punchier"; "shorten to 12 chars">';
+        var lines = [
+          "I'm iterating on a Slice deck (vertical 1080x1920 card video — narrated, theme-styled).",
+          '',
+          'File to edit:',
+          '  ' + deckPath,
+          '',
+          'Card to change: cards[' + cardIdx + ']  (kind: ' + kind + ')',
+        ];
+        if (selection) {
+          lines.push('');
+          lines.push('Specifically, this exact substring needs to change:');
+          lines.push('  ' + JSON.stringify(selection));
+          lines.push('');
+          lines.push('Replace only that substring; keep everything else in the card identical unless the change requires touching adjacent text.');
+        }
+        lines.push('');
+        lines.push('Current card value:');
+        lines.push('\`\`\`json');
+        lines.push(cardJson);
+        lines.push('\`\`\`');
+        lines.push('');
+        lines.push('Change request:');
+        lines.push(instructionLine);
+        lines.push('');
+        lines.push('When you finish, save the file in place — preserve every other field and the JSON structure.');
+        lines.push('The local stage server is watching this file and will hot-reload the browser preview within ~150ms.');
+        return lines.join('\\n');
+      }
+      // ─── Edit-with-AI: modal state + handlers ────────────────────────────
+      var modalCtx = null; // { cardIdx, selectedText }
+      function refreshPromptPreview() {
+        if (!modalCtx) return;
+        var card = (currentDeck && Array.isArray(currentDeck.cards))
+          ? currentDeck.cards[modalCtx.cardIdx] : null;
+        if (!card) {
+          promptPreview.textContent = '// card no longer exists in deck — close and pick another';
+          return;
+        }
+        promptPreview.textContent = buildEditPrompt({
+          deckPath: currentDeckPath,
+          cardIdx: modalCtx.cardIdx,
+          card: card,
+          selectedText: modalCtx.selectedText,
+          instruction: instructionInput.value,
+        });
+      }
+      function openModal(cardIdx, selectedText) {
+        modalCtx = { cardIdx: cardIdx, selectedText: selectedText || '' };
+        modalTitle.textContent = selectedText
+          ? ('Edit selection in card #' + (cardIdx + 1))
+          : ('Edit card #' + (cardIdx + 1) + ' with AI');
+        instructionInput.value = '';
+        copyBtn.classList.remove('copied');
+        copyBtn.textContent = 'Copy prompt';
+        refreshPromptPreview();
+        modal.classList.add('open');
+        modal.removeAttribute('hidden');
+        // Focus the instruction box so the user can type immediately.
+        setTimeout(function () { instructionInput.focus(); }, 30);
+      }
+      function closeModal() {
+        modal.classList.remove('open');
+        modal.setAttribute('hidden', '');
+        modalCtx = null;
+        hideSelectionFab();
+      }
+      modalClose.addEventListener('click', closeModal);
+      modal.addEventListener('click', function (e) {
+        // Click on backdrop (not the inner .modal) closes.
+        if (e.target === modal) closeModal();
+      });
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && modal.classList.contains('open')) closeModal();
+      });
+      instructionInput.addEventListener('input', refreshPromptPreview);
+      copyBtn.addEventListener('click', function () {
+        var text = promptPreview.textContent;
+        var done = function () {
+          copyBtn.classList.add('copied');
+          copyBtn.textContent = '✓ Copied — paste in your AI';
+          // Auto-close the modal so the user can switch straight to their
+          // AI tool. 700ms gives them time to read the "Copied" state.
+          setTimeout(function () {
+            if (modal.classList.contains('open')) closeModal();
+            copyBtn.classList.remove('copied');
+            copyBtn.textContent = 'Copy prompt';
+          }, 700);
+        };
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(text).then(done, function () {
+            // Fallback for non-secure contexts (file://, very old browsers)
+            fallbackCopy(text); done();
+          });
+        } else {
+          fallbackCopy(text); done();
+        }
+      });
+      function fallbackCopy(text) {
+        var ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.position = 'fixed'; ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.select();
+        try { document.execCommand('copy'); } catch (_) { /* give up */ }
+        document.body.removeChild(ta);
+      }
+      // ─── Per-card "Edit with AI" button (event delegation) ───────────────
+      cardsPane.addEventListener('click', function (e) {
+        var btn = e.target.closest && e.target.closest('.edit-btn');
+        if (!btn) return;
+        var idx = parseInt(btn.getAttribute('data-edit-card-idx'), 10);
+        if (Number.isFinite(idx)) openModal(idx, '');
+      });
+      // ─── Text-selection floating button ──────────────────────────────────
+      function hideSelectionFab() {
+        selectionFab.classList.remove('visible');
+        selectionFab._cardIdx = null;
+        selectionFab._text = '';
+      }
+      function maybeShowSelectionFab() {
+        var sel = window.getSelection();
+        if (!sel || sel.isCollapsed || sel.rangeCount === 0) {
+          hideSelectionFab();
+          return;
+        }
+        var text = sel.toString().trim();
+        if (!text) { hideSelectionFab(); return; }
+        // Anchor must be inside a stage card.
+        var anchor = sel.anchorNode;
+        var cardEl = (anchor && anchor.nodeType === 1)
+          ? anchor.closest && anchor.closest('.stage-card')
+          : (anchor && anchor.parentElement && anchor.parentElement.closest('.stage-card'));
+        if (!cardEl) { hideSelectionFab(); return; }
+        var idxStr = cardEl.getAttribute('data-card-idx');
+        var idx = parseInt(idxStr, 10);
+        if (!Number.isFinite(idx)) { hideSelectionFab(); return; }
+        var rect = sel.getRangeAt(0).getBoundingClientRect();
+        // Position just below the selection, clamped inside viewport.
+        var x = Math.min(window.innerWidth - 220, Math.max(8, rect.left));
+        var y = Math.min(window.innerHeight - 40, rect.bottom + 6);
+        selectionFab.style.left = x + 'px';
+        selectionFab.style.top = y + 'px';
+        selectionFab._cardIdx = idx;
+        selectionFab._text = text;
+        selectionFab.classList.add('visible');
+      }
+      document.addEventListener('mouseup', function () {
+        // Defer so the selection settles after click-release.
+        setTimeout(maybeShowSelectionFab, 10);
+      });
+      document.addEventListener('selectionchange', function () {
+        var sel = window.getSelection();
+        if (!sel || sel.isCollapsed || !sel.toString().trim()) hideSelectionFab();
+      });
+      selectionFab.addEventListener('mousedown', function (e) {
+        // Prevent the mousedown from clearing the selection before our click handler runs.
+        e.preventDefault();
+      });
+      selectionFab.addEventListener('click', function () {
+        if (Number.isFinite(selectionFab._cardIdx)) {
+          openModal(selectionFab._cardIdx, selectionFab._text);
+        }
+      });
+    })();
+  </script>
+</body>
+</html>`;
+}
+module.exports = { renderSliceStageHtml };