retake-demos 0.2.1 → 0.3.0

package/dist/render.js

@@ -18,9 +18,13 @@ import path from "node:path";
 import { createHash } from "node:crypto";
 import { execFileSync, spawnSync } from "node:child_process";
 import { capSecondsFor } from "./record.js";
+import { bandHeightFor, maxCharsFor, wrap } from "./captions.js";
+import { renderCard, renderCalloutOverlay, renderTitledCover } from "./cards.js";
+import { describeIdle, planIdle, warpFilterArgs, warpTake } from "./pace.js";
+import { DEFAULT_VOICE, audioSeconds, synthesize } from "./voice.js";
 import { createRequire } from "node:module";
 import { chromium } from "playwright";
-import { resolve } from "./manifest.js";
+import { expandEnv, resolve } from "./manifest.js";
 /** What the render depends on: the raw take + everything in the manifest that
     shapes the picture. Same hash → same output → skip. */
 export function renderHash(m, take) {
@@ -28,7 +32,14 @@ export function renderHash(m, take) {
     const src = take.video && fs.existsSync(take.video) ? fs.statSync(take.video) : null;
     const h = createHash("sha1");
     const merged = applyManifest(m, take);
-    h.update(JSON.stringify({ q, tempo: m.tempo, cap: m.captions, theme: m.theme, camera: m.camera, gif: m.outputs.gif, thumb: m.outputs.thumbnail, stills: m.outputs.stills, video: src ? [src.size, Math.round(src.mtimeMs)] : null, tl: merged.timeline.map((t) => [t.start, t.end, t.label, t.caption, t.holdMs, t.camera]), trim: [merged.trimBefore, merged.duration] }));
+    h.update(JSON.stringify({ q, tempo: m.tempo, cap: m.captions, theme: m.theme, camera: m.camera, cards: [m.intro, m.outro], idle: m.compressIdle, vo: m.voiceover, music: m.music ? [m.music, (() => { try {
+                const f = typeof m.music === "string" ? m.music : m.music.file;
+                const st = fs.statSync(path.resolve(f));
+                return [st.size, Math.round(st.mtimeMs)];
+            }
+            catch {
+                return null;
+            } })()] : null, gif: m.outputs.gif, thumb: m.outputs.thumbnail, stills: m.outputs.stills, video: src ? [src.size, Math.round(src.mtimeMs)] : null, tl: merged.timeline.map((t) => [t.start, t.end, t.label, t.caption, t.holdMs, t.camera, t.callout]), trim: [merged.trimBefore, merged.duration] }));
     return h.digest("hex").slice(0, 12);
 }
 const require = createRequire(import.meta.url);
@@ -79,38 +90,6 @@ export function probe(file) {
     };
 }
 export const videoDuration = (file) => probe(file).duration;
-/** Word-wrap long captions; two-line captions break near the middle so no
-    word is left orphaned on the second line. */
-function wrap(text, max) {
-    if (text.length <= max)
-        return text;
-    const words = text.split(/\s+/);
-    if (text.length <= max * 2) {
-        let best = 1, bestDiff = Infinity;
-        for (let i = 1; i < words.length; i++) {
-            const a = words.slice(0, i).join(" ").length;
-            const b = words.slice(i).join(" ").length;
-            if (a <= max && b <= max && Math.abs(a - b) < bestDiff) {
-                best = i;
-                bestDiff = Math.abs(a - b);
-            }
-        }
-        return words.slice(0, best).join(" ") + "\n" + words.slice(best).join(" ");
-    }
-    const out = [];
-    let line = "";
-    for (const w of words) {
-        if (line && (line + " " + w).length > max) {
-            out.push(line);
-            line = w;
-        }
-        else
-            line = line ? line + " " + w : w;
-    }
-    if (line)
-        out.push(line);
-    return out.join("\n");
-}
 /** ffmpeg drawtext needs a few characters escaped inside the filter graph. */
 function esc(s) {
     return s.replace(/\\/g, "\\\\").replace(/'/g, "\u2019").replace(/:/g, "\\:").replace(/%/g, "\\%").replace(/,/g, "\\,");
@@ -296,6 +275,21 @@ export async function render(m, take, outDir, opts = {}) {
     }
     // Captions, holds, camera zooms and trim come from the manifest as it is now.
     take = applyManifest(m, take);
+    // Idle compression: re-cut the source so the app's dead waits are shown
+    // short, and remap every clock in the take through the same warp.
+    let idleLines = [];
+    if (m.compressIdle && take.video) {
+        const keep = m.compressIdle === true ? 1.5 : m.compressIdle.keepSeconds;
+        const segs = planIdle(take, keep);
+        if (segs.length) {
+            const paced = path.join(outDir, ".paced.mp4");
+            ff([...warpFilterArgs(take.video, segs, take.duration, paced).slice(0, -1), "-r", String(resolve(m).fps), "-c:v", "libx264", "-crf", "14", "-preset", "veryfast", "-pix_fmt", "yuv420p", paced], log);
+            idleLines = describeIdle(take, segs);
+            for (const l of idleLines)
+                log?.(`idle: ${l}`);
+            take = { ...warpTake(take, segs), video: paced };
+        }
+    }
     // Tempo: the source is cut in its own time (-ss/-t below), then every
     // clock downstream — captions, camera keys, stills — runs in output time.
     const srcTake = take;
@@ -316,7 +310,7 @@ export async function render(m, take, outDir, opts = {}) {
         const to = sc[i + 1] ? sc[i + 1].start : take.duration;
         take = { ...take, trimBefore: from, duration: to };
     }
-    const src = path.resolve(srcVideo);
+    const src = path.resolve(take.video ?? srcVideo); // take.video may be the idle-warped re-cut
     // Source (recorded viewport) vs canvas (preset output). They differ when a
     // narrow app was recorded at its own aspect and gets centred on the canvas.
     const SW = take.quality?.width ?? q.viewport.width;
@@ -344,13 +338,17 @@ export async function render(m, take, outDir, opts = {}) {
     let frameInput = null;
     let geom = null;
     const capSize = q.captions ? q.captions.fontSize : 0;
+    // One band height for the whole take, from its captions (see captions.ts).
+    const bandH = bandHeightFor(q, W, captionWindows(take).map((w) => w.text), H);
     if (layout === "band") {
-        // Site fills the frame; caption strip below it.
-        filters.push(`pad=${W}:${H + q.bandHeight}:0:0:color=${bg}`);
-        capY = `${H}+${q.bandHeight / 2}-th/2`;
+        // Site fills the frame; caption strip below it — none at all if captions are off.
+        if (bandH) {
+            filters.push(`pad=${W}:${H + bandH}:0:0:color=${bg}`);
+            capY = `${H}+${bandH / 2}-th/2`;
+        }
     }
     else if (layout === "card") {
-        geom = cardGeometry(W, H, SW, SH, q.bandHeight);
+        geom = cardGeometry(W, H, SW, SH, bandH);
         frameInput = path.join(outDir, ".frame.png");
         await renderCardFrame(frameInput, W, H, geom, bg);
         filters.push(`scale=${geom.vw}:${geom.vh}:flags=lanczos`, `pad=${W}:${H}:${geom.vx}:${geom.vy}:color=${bg}`);
@@ -364,16 +362,40 @@ export async function render(m, take, outDir, opts = {}) {
     filters.push("format=yuv420p");
     const captionFilters = [];
     if (q.captions && layout !== "none") {
-        const maxChars = Math.max(28, Math.round((W / capSize) * 1.55));
+        const maxChars = maxCharsFor(W, capSize);
         for (const w of captionWindows(take)) {
             captionFilters.push(`drawtext=${font}text='${esc(wrap(w.text, maxChars))}':fontsize=${capSize}:fontcolor=${capColor}${capBox}:line_spacing=${Math.round(capSize * 0.25)}` +
                 `:x=(w-tw)/2:y=${capY}:enable='between(t,${w.from.toFixed(2)},${w.to.toFixed(2)})'`);
         }
     }
-    const graph = frameInput
-        ? `[0:v]${filters.join(",")}[v];[v][1:v]overlay=0:0:format=auto${captionFilters.length ? "," + captionFilters.join(",") : ""}[out]`
-        : `[0:v]${[...filters, ...captionFilters].join(",")}[out]`;
-    const inputs = ["-ss", srcTake.trimBefore.toFixed(3), "-t", (srcTake.duration - srcTake.trimBefore).toFixed(3), "-i", src, ...(frameInput ? ["-i", frameInput] : [])];
+    // Callouts: recorded boxes become animated overlays, applied in SOURCE
+    // coordinates (before the camera filter) so a moving camera carries them.
+    const callouts = take.timeline.filter((e) => e.callout && e.ok);
+    const calloutInputs = [];
+    let preCam = "";
+    if (callouts.length && !o.scene && !frameInput) {
+        const camIdx = cam.filter ? filters.indexOf(cam.filter) : filters.length;
+        const before = filters.slice(0, camIdx), after = filters.slice(camIdx);
+        let label = "b0";
+        let g = `[0:v]${before.join(",")}[${label}]`;
+        for (let i = 0; i < callouts.length; i++) {
+            const e = callouts[i];
+            const from = Math.max(0, e.start - take.trimBefore);
+            const webm = await renderCalloutOverlay(ffmpegBin(), outDir, i, e.callout, SW, SH, fps, Math.max(15, Math.round(q.captions ? q.captions.fontSize * 0.55 : 20)), ink);
+            calloutInputs.push(webm);
+            const inIdx = 1 + (frameInput ? 1 : 0) + i;
+            const next = `b${i + 1}`;
+            g += `;[${inIdx}:v]setpts=PTS+${from.toFixed(3)}/TB[c${i}];[${label}][c${i}]overlay=0:0:eof_action=pass[${next}]`;
+            label = next;
+        }
+        preCam = `${g};[${label}]${after.length ? after.join(",") : "null"}`;
+    }
+    const graph = preCam
+        ? `${preCam}${captionFilters.length ? "," + captionFilters.join(",") : ""}[out]`
+        : frameInput
+            ? `[0:v]${filters.join(",")}[v];[v][1:v]overlay=0:0:format=auto${captionFilters.length ? "," + captionFilters.join(",") : ""}[out]`
+            : `[0:v]${[...filters, ...captionFilters].join(",")}[out]`;
+    const inputs = ["-ss", srcTake.trimBefore.toFixed(3), "-t", (srcTake.duration - srcTake.trimBefore).toFixed(3), "-i", src, ...(frameInput ? ["-i", frameInput] : []), ...calloutInputs.flatMap((f) => ["-c:v", "libvpx-vp9", "-i", f])];
     const compose = ["-filter_complex", graph, "-map", "[out]", "-r", String(fps), "-an", "-pix_fmt", "yuv420p", "-movflags", "+faststart"];
     const x264 = (crf, preset) => ["-c:v", "libx264", "-crf", String(crf), "-preset", preset];
     // Hardware encode is a macOS thing; elsewhere the "fast" presets are a fast x264.
@@ -401,6 +423,98 @@ export async function render(m, take, outDir, opts = {}) {
     }
     if (frameInput)
         fs.rmSync(frameInput, { force: true });
+    for (const f of calloutInputs)
+        fs.rmSync(f, { force: true });
+    // Title cards: rendered at the finished frame size, spliced on. The intro's
+    // settled frame becomes cover.png — the poster.
+    let cover;
+    if ((m.intro || m.outro) && !o.scene) {
+        const dims = probe(mp4);
+        const segs = [];
+        if (m.intro) {
+            const c = await renderCard(ffmpegBin(), outDir, "intro", m.intro, dims.width, dims.height, fps, q.theme);
+            segs.push(c.mp4);
+            cover = c.cover;
+        }
+        segs.push(mp4);
+        if (m.outro)
+            segs.push((await renderCard(ffmpegBin(), outDir, "outro", m.outro, dims.width, dims.height, fps, q.theme)).mp4);
+        if (segs.length > 1) {
+            const joined = path.join(outDir, ".joined.mp4");
+            ff([...segs.flatMap((f) => ["-i", f]), "-filter_complex", `${segs.map((_, i) => `[${i}:v]`).join("")}concat=n=${segs.length}:v=1:a=0[out]`, "-map", "[out]", "-r", String(fps), "-pix_fmt", "yuv420p", "-movflags", "+faststart", "-an", ...x264(q.crf, "medium"), joined], log);
+            fs.renameSync(joined, mp4);
+            for (const f of segs)
+                if (f !== mp4)
+                    fs.rmSync(f, { force: true });
+        }
+        mark("cards");
+    }
+    // Audio: the music bed and/or the captions read aloud, mixed in one pass.
+    // The deliverable gets it; the master stays a clean video-only source.
+    if ((m.music || m.voiceover) && !o.scene) {
+        const dur = probe(mp4).duration;
+        // Cards shift every scene: narration is placed in FINAL time.
+        const introShift = m.intro ? m.intro.ms / 1000 : 0;
+        const audioIn = [];
+        const chains = [];
+        const mixIns = [];
+        let idx = 1; // 0 is the video
+        if (m.music) {
+            const spec = typeof m.music === "string" ? { file: m.music, gainDb: -14, fadeOutMs: 1800 } : m.music;
+            const musicFile = path.resolve(expandEnv(spec.file));
+            if (!fs.existsSync(musicFile))
+                throw new Error(`music: no such file ${musicFile} — the track ships inside the video, so it must be one the person may use (CC0 or licensed)`);
+            const fadeStart = Math.max(0, dur - spec.fadeOutMs / 1000);
+            // Ducked a step further when a voice speaks over it.
+            const gain = spec.gainDb - (m.voiceover ? 7 : 0);
+            audioIn.push("-stream_loop", "-1", "-i", musicFile);
+            chains.push(`[${idx}:a]volume=${gain}dB,afade=t=in:st=0:d=0.6,afade=t=out:st=${fadeStart.toFixed(2)}:d=${(spec.fadeOutMs / 1000).toFixed(2)}[mus]`);
+            mixIns.push("[mus]");
+            idx++;
+        }
+        if (m.voiceover) {
+            const spec = m.voiceover === true ? { voice: DEFAULT_VOICE, gainDb: 0, script: undefined, fragments: true } : m.voiceover;
+            if (spec.script) {
+                // One script, one performance: prosody carries across the whole
+                // video the way a person reads. Starts after the title card.
+                const clip = path.join(outDir, ".vo-0.mp3");
+                synthesize(spec.script, spec.voice, clip);
+                const spoken = audioSeconds(ffmpegBin(), clip);
+                if (spoken > dur - introShift + 0.5)
+                    log?.(`voiceover: the script reads ${spoken.toFixed(1)}s but there are ${(dur - introShift).toFixed(1)}s of video after the title card — cut the script or lengthen the scenes, then re-render`);
+                audioIn.push("-i", clip);
+                chains.push(`[${idx}:a]volume=${spec.gainDb}dB,adelay=${Math.round(introShift * 1000)}:all=1[vo0]`);
+                mixIns.push("[vo0]");
+                idx++;
+            }
+            else {
+                // Explicitly-asked-for fragments: one clip per caption. Known to
+                // reset prosody at every line; the schema refuses it by default.
+                const wins = captionWindows(take);
+                for (let i = 0; i < wins.length; i++) {
+                    const w = wins[i];
+                    const clip = path.join(outDir, `.vo-${i}.mp3`);
+                    synthesize(w.text, spec.voice, clip);
+                    const spoken = audioSeconds(ffmpegBin(), clip);
+                    const at = w.from + introShift;
+                    if (spoken > w.to - w.from + 0.4)
+                        log?.(`voiceover: “${w.text.slice(0, 40)}…” runs ${spoken.toFixed(1)}s but its scene holds ${(w.to - w.from).toFixed(1)}s — lengthen the scene's holdMs or trailing wait and re-render`);
+                    audioIn.push("-i", clip);
+                    chains.push(`[${idx}:a]volume=${spec.gainDb}dB,adelay=${Math.round(at * 1000)}:all=1[vo${i}]`);
+                    mixIns.push(`[vo${i}]`);
+                    idx++;
+                }
+            }
+        }
+        const mixed = path.join(outDir, ".with-audio.mp4");
+        const graph = `${chains.join(";")};${mixIns.join("")}amix=inputs=${mixIns.length}:duration=longest:normalize=0,atrim=0:${dur.toFixed(2)}[a]`;
+        ff(["-i", mp4, ...audioIn, "-filter_complex", graph, "-map", "0:v", "-map", "[a]", "-c:v", "copy", "-c:a", "aac", "-b:a", "160k", "-movflags", "+faststart", "-shortest", mixed], log);
+        fs.renameSync(mixed, mp4);
+        for (const f of fs.readdirSync(outDir))
+            if (/^\.vo-\d+\.mp3$/.test(f))
+                fs.rmSync(path.join(outDir, f), { force: true });
+        mark("audio");
+    }
     if (o.scene)
         return { mp4, proofLog };
     // --- 3. GIF (secondary, opt-in) --------------------------------------------
@@ -429,9 +543,19 @@ export async function render(m, take, outDir, opts = {}) {
         }
         mark("gif");
     }
+    // Cards are spliced onto the front of the deliverable, so every timestamp
+    // in the take is that much later in the file frames are pulled from.
+    const cardShift = !o.scene && m.intro ? m.intro.ms / 1000 : 0;
     // --- 4. thumbnail ----------------------------------------------------------
+    // A person's chosen poster (the window's "Use this frame" / a still / an
+    // upload) outlives re-renders: the choice writes a .poster marker, and the
+    // scene-based default never overwrites a deliberate choice.
     let thumbnail;
-    if (m.outputs.thumbnail) {
+    if (m.outputs.thumbnail && fs.existsSync(path.join(outDir, ".poster")) && fs.existsSync(path.join(outDir, "thumbnail.png"))) {
+        thumbnail = path.join(outDir, "thumbnail.png");
+        log?.("thumbnail: keeping the poster you chose (delete .poster to go back to the scene default)");
+    }
+    else if (m.outputs.thumbnail) {
         const sc = scenes(take);
         let at;
         if (typeof m.outputs.thumbnail === "object") {
@@ -449,7 +573,14 @@ export async function render(m, take, outDir, opts = {}) {
             at = last ? last.start - take.trimBefore + 1.0 : Math.max(0, take.duration - take.trimBefore - 0.5);
         }
         thumbnail = path.join(outDir, "thumbnail.png");
-        ff(["-ss", Math.max(0, at).toFixed(2), "-i", mp4, "-frames:v", "1", thumbnail], log);
+        ff(["-ss", Math.max(0, at + cardShift).toFixed(2), "-i", mp4, "-frames:v", "1", thumbnail], log);
+        // A launch cut gets a second candidate: this frame with the title on it.
+        // The person picks between them (or any still, or their own file) in the
+        // window; both are just PNGs, and the poster is whichever is thumbnail.png.
+        if (m.mode === "launch" && m.intro) {
+            const d = probe(mp4);
+            await renderTitledCover(ffmpegBin(), thumbnail, path.join(outDir, "cover-titled.png"), m.intro, d.width, d.height, q.theme);
+        }
         mark("thumbnail");
     }
     // --- 5. scene stills -------------------------------------------------------
@@ -470,14 +601,14 @@ export async function render(m, take, outDir, opts = {}) {
             const at = Math.min(Math.max(0, from + Math.max(0.8, (next - from) / 2)), Math.max(0, end - 0.2));
             const base = `${String(i + 1).padStart(2, "0")}-${(sce.label || "scene").replace(/[^a-z0-9-]+/gi, "-")}`;
             const file = path.join(dir, `${base}.png`);
-            ff(["-ss", at.toFixed(2), "-i", mp4, "-frames:v", "1", file], log);
+            ff(["-ss", (at + cardShift).toFixed(2), "-i", mp4, "-frames:v", "1", file], log);
             stills.push(file);
             // And the scene's last moment: the caption names what the scene
             // achieves, and that is usually on screen at the end, not the middle.
             const atEnd = Math.min(Math.max(from + 0.4, next - 0.6), Math.max(0, end - 0.2));
             if (atEnd - at > 0.5) {
                 const fe = path.join(dir, `${base}-end.png`);
-                ff(["-ss", atEnd.toFixed(2), "-i", mp4, "-frames:v", "1", fe], log);
+                ff(["-ss", (atEnd + cardShift).toFixed(2), "-i", mp4, "-frames:v", "1", fe], log);
                 stills.push(fe);
             }
         }

package/dist/ui/chat.html

@@ -56,7 +56,9 @@
   /* the video */
   .pin { display:none; }
   .pin.show { display:block; }
-  .pin video { width:100%; height:auto; max-height:62vh; border-radius:12px; background:#000; display:block; border:1px solid var(--rule2); box-shadow:0 10px 30px rgba(24,28,24,.10); }
+  /* The element takes the video's own shape: width follows the height cap, so
+     a 1.6:1 take gets no black bars at the sides. */
+  .pin video { width:auto; max-width:100%; height:auto; max-height:62vh; margin:0 auto; border-radius:12px; background:#000; display:block; border:1px solid var(--rule2); box-shadow:0 10px 30px rgba(24,28,24,.10); }
   .under { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
   .under a, .under button { color:var(--ink); text-decoration:none; border:1px solid var(--rule2); background:#fff; border-radius:999px; padding:5px 12px; cursor:pointer; font-size:13px; }
   .under a:hover, .under button:hover { border-color:var(--ink); }
@@ -68,6 +70,13 @@
   .stills { display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; }
   .stills img { height:64px; border-radius:7px; border:1px solid var(--rule2); box-shadow:0 2px 6px rgba(24,28,24,.06); cursor:pointer; flex:none; }
   .stills img:hover { border-color:var(--ink); }
+  .stills img.poster, .coverrow img.poster { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
+  .coverrow { display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
+  .coverrow img { height:64px; border-radius:7px; border:1px solid var(--rule2); cursor:pointer; }
+  .coverrow img:hover { border-color:var(--ink); }
+  .coverrow .lab { font:11px ui-monospace, Menlo, monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
+  .coverrow label.up { font-size:12.5px; color:var(--muted); border:1px dashed var(--rule2); border-radius:8px; padding:8px 12px; cursor:pointer; }
+  .coverrow label.up:hover { border-color:var(--ink); color:var(--ink); }
   /* the library: one quiet card at the video's side */
   .lib { border:1px solid var(--rule); background:var(--card); border-radius:16px; padding:14px 10px; position:sticky; top:14px; line-height:1.4; }
   .lib h2 { font:11px ui-monospace, Menlo, monospace; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:2px 0 10px 12px; }
@@ -140,15 +149,17 @@
           <option value="0.75">0.75×</option><option value="0.85">0.85×</option><option value="1" selected>1×</option><option value="1.15">1.15×</option><option value="1.3">1.3×</option>
         </select>
         <a id="vidDl" download>Download</a>
-        <button id="vidFolder">Show in Finder</button>
-        <a id="vidEdit" href="/classic">Edit</a>
+        <button id="vidFolder">Show in folder</button>
+        <button id="vidCover" title="Make the frame showing right now the poster">Use this frame</button>
+        <!-- The workshop (/classic) still exists but is not advertised until it has been tested as carefully as this page. -->
       </div>
+      <div class="coverrow" id="coverrow"></div>
       <div class="stills" id="stills"></div>
     </div>
     <div class="empty" id="empty" style="display:none">
       <div class="mark"><i></i><i></i><i></i><i></i></div>
       <h2>Nothing recorded yet</h2>
-      <p>Ask your agent for a demo — <code>record a demo of my app showing the sign-up flow</code> —<br>or build one by hand in the <a href="/classic">workshop</a>. It will appear here.<br><a href="/guide">How Retake works</a> — one page, two minutes.</p>
+      <p>Ask your agent for a demo — <code>record a demo of my app showing the sign-up flow</code> —<br>It will appear here.<br><a href="/guide">How Retake works</a> — one page, two minutes.</p>
     </div>
     </div>
     <aside class="lib" id="lib" style="display:none">
@@ -164,6 +175,19 @@ let current = null, demos = [], settings = null;
 async function api(u, o) { const r = await fetch(u, o); const j = await r.json().catch(() => ({})); if (!r.ok) throw new Error(j.error || r.statusText); return j; }
 
 const REPO = 'https://github.com/glebbogachev00/retake';
+async function setCover(body, marked) {
+  try {
+    await api('/api/cover/' + current, { method: 'POST', body: JSON.stringify(body) });
+    // Cache-bust: the poster keeps its filename, so the browser needs telling.
+    const v = '?v=' + Date.now();
+    $('vid').poster = `/out/${current}/thumbnail.png` + v;
+    for (const i of document.querySelectorAll('.stills img, .coverrow img')) i.classList.remove('poster');
+    if (marked) marked.classList.add('poster');
+    const meta = $('vidMeta').textContent;
+    $('vidMeta').textContent = meta.replace(/ · poster set$/, '') + ' · poster set';
+  } catch (e) { $('vidMeta').textContent = 'could not set the poster: ' + e.message; }
+}
+
 document.getElementById('gremlinBtn').onclick = async () => {
   const veil = document.createElement('div');
   veil.className = 'veil';
@@ -246,13 +270,30 @@ async function pin(name) {
   $('vidMeta').title = failed?.screen ? 'On screen at that moment: ' + failed.screen : '';
   $('vidDl').href = `/out/${name}/demo.mp4${q}`; $('vidDl').setAttribute('download', name + '.mp4');
   $('vidFolder').onclick = () => api('/api/open/' + name, { method: 'POST' }).catch(() => {});
-  $('vidEdit').href = '/classic#' + encodeURIComponent(name);
+$('vidCover').onclick = () => setCover({ at: $('vid').currentTime });
   const tempo = (demos.find((x) => x.name === name)?.settings?.tempo) || 1;
   $('vidSpeed').value = String(tempo);
   $('vid').playbackRate = 1; // the file already carries its tempo
+  // The poster is the first thing anyone sees of a video, so it is chosen
+  // here, not guessed: any scene still, any frame of the take, a generated
+  // cover, or the person's own image. All of it just rewrites thumbnail.png,
+  // so it costs no re-render.
   const st = (d.files || []).filter((f) => f.startsWith('stills/')).sort();
-  $('stills').innerHTML = st.map((f) => `<img src="/out/${name}/${f}${q}" title="${esc(f.slice(7, -4))}" loading="lazy">`).join('');
-  for (const img of $('stills').querySelectorAll('img')) img.onclick = () => window.open(img.src, '_blank');
+  $('stills').innerHTML = st.map((f) => `<img src="/out/${name}/${f}${q}" title="Make this the poster — ${esc(f.slice(7, -4))}" loading="lazy" data-still="${esc(f.slice(7))}">`).join('');
+  for (const img of $('stills').querySelectorAll('img')) img.onclick = () => setCover({ still: img.dataset.still }, img);
+
+  const covers = (d.files || []).filter((f) => f === 'cover.png' || f === 'cover-titled.png');
+  $('coverrow').innerHTML =
+    (covers.length ? `<span class="lab">poster</span>` + covers.map((f) => `<img src="/out/${name}/${f}${q}" title="${f === 'cover.png' ? 'The title card' : 'This frame, with the title on it'}" data-file="${f}">`).join('') : `<span class="lab">poster</span>`) +
+    `<label class="up">Upload an image<input type="file" accept="image/png,image/jpeg,image/webp" hidden id="coverUp"></label>`;
+  for (const img of $('coverrow').querySelectorAll('img[data-file]')) img.onclick = () => setCover({ file: img.dataset.file }, img);
+  $('coverUp').onchange = (e) => {
+    const f = e.target.files?.[0];
+    if (!f) return;
+    const r = new FileReader();
+    r.onload = () => setCover({ dataUrl: r.result });
+    r.readAsDataURL(f);
+  };
   $('pin').classList.add('show');
   drawDemos();
   return true;
@@ -286,7 +327,7 @@ async function drawDemos() {
       const dot = p.lastTake ? (p.lastTake.ok && !p.lastTake.partial ? 'ok' : 'bad') : '';
       const when = p.lastTake ? new Date(p.lastTake.finishedAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : 'no take yet';
       el.innerHTML = `<span class="dot ${dot}"></span><span class="nm">${esc(p.name)}</span><small>${esc(when)}</small><button class="zap" title="Archive this demo">✕</button>`;
-      el.onclick = () => { if (p.lastTake) pin(p.name); else location.href = '/classic#' + encodeURIComponent(p.name); };
+      el.onclick = () => { if (p.lastTake) pin(p.name); };
       el.querySelector('.zap').onclick = async (ev) => {
         ev.stopPropagation();
         // Archive, not destroy — but moving someone's work still deserves a beat.
@@ -356,6 +397,41 @@ $('vidSpeed').addEventListener('change', async () => {
   } catch (e) { $('vidMeta').textContent = `${current} · could not re-render: ${e.message}`; }
 });
 
+// ---- secrets: the agent asks by name; the value goes to .env, never to it ----
+const secretOpen = new Set();
+function askSecrets(r) {
+  if (!r || secretOpen.has(r.id)) return;
+  secretOpen.add(r.id);
+  const isSecret = (n) => /PASS|SECRET|TOKEN|KEY|PIN|OTP/.test(n);
+  const veil = document.createElement('div');
+  veil.className = 'veil';
+  veil.innerHTML = `<div class="modal" role="dialog" aria-modal="true" style="width:min(92vw,460px)">
+    <h3>Your agent needs a sign-in</h3>
+    <p>${esc(r.why || 'The demo starts behind a login.')}</p>
+    <p style="font-size:13px;color:var(--muted)"><b>This stays on your computer.</b> What you type is written to one local file — <code>${esc(settings?.envPath || '.env')}</code>, readable by you only — so Retake can sign in during recording. It is not sent to the agent, to any server, or to us; the agent only learns that the names are set. Use a <b>demo account</b>: the result is a video.</p>
+    <form id="secForm" autocomplete="off">
+      ${r.names.map((n) => `<label style="display:block;margin:10px 0 4px;font-size:12.5px;letter-spacing:.04em;color:var(--muted)">${esc(n)}</label>
+        <input name="${esc(n)}" type="${isSecret(n) ? 'password' : 'text'}" autocomplete="${isSecret(n) ? 'new-password' : 'off'}" style="width:100%;border:1px solid var(--rule2);border-radius:10px;padding:10px 12px;font:inherit" />`).join('')}
+      <div class="row" style="margin-top:16px">
+        <button class="btn" type="button" data-no>Not now</button>
+        <button class="btn" type="submit" style="background:var(--accent);border-color:var(--accent);color:#fff">Save to .env</button>
+      </div>
+    </form>
+  </div>`;
+  const close = () => { veil.remove(); secretOpen.delete(r.id); };
+  veil.querySelector('[data-no]').onclick = close;
+  veil.querySelector('#secForm').onsubmit = async (e) => {
+    e.preventDefault();
+    const values = {};
+    for (const n of r.names) { const v = veil.querySelector(`input[name="${n}"]`).value; if (v.trim()) values[n] = v; }
+    if (!Object.keys(values).length) return;
+    try { await api('/api/secrets/fill', { method: 'POST', body: JSON.stringify({ id: r.id, values }) }); close(); }
+    catch (err) { veil.querySelector('h3').textContent = 'Could not save: ' + err.message; }
+  };
+  document.body.appendChild(veil);
+  setTimeout(() => veil.querySelector('input')?.focus(), 40);
+}
+
 // ---- the live feed: an agent working shows up here as it works -------------
 function watchActivity() {
   const es = new EventSource('/api/activity/stream');
@@ -373,8 +449,10 @@ function watchActivity() {
     if (window.__boot && d.boot && d.boot !== window.__boot) location.reload();
     window.__boot = d.boot || window.__boot;
     apply(d);
+    for (const r of d.secrets || []) askSecrets(r);
   });
   es.addEventListener('line', (ev) => apply(JSON.parse(ev.data)));
+  es.addEventListener('secrets', (ev) => askSecrets(JSON.parse(ev.data)));
   es.addEventListener('finished', async (ev) => { apply(JSON.parse(ev.data)); await drawDemos(); await newest(); setTimeout(() => $('live').classList.remove('show'), 8000); });
   es.onerror = () => { es.close(); setTimeout(watchActivity, 3000); };
 }

package/dist/ui/guide.html

@@ -50,7 +50,7 @@
 
   <section>
     <h3>2 · Judge the take</h3>
-    <p>The video lands here — newest on top, one still per scene under it. <b>Download</b> for the file, <b>Edit</b> to open its steps and knobs in the workshop.</p>
+    <p>The video lands here — newest on top, one still per scene under it. <b>Download</b> for the file, <b>Show in folder</b> for everything else — the stills, the proof log, the manifest.</p>
   </section>
 
   <section>
@@ -75,8 +75,9 @@
   <section>
     <h3>Good to know</h3>
     <ul>
+      <li><b>Two kinds of take.</b> A <i>demo</i> proves how something works — a client walkthrough, a clip for a pull request, a lesson — and keeps everything but your product out of the frame. That is the default. A <i>launch</i> video presents your product in public, and only then do a title card, music and a closing card belong. Your agent asks where it is going; if you shrug, it makes a demo.</li>
       <li>Retake never starts your app without you saying so.</li>
-      <li>Passwords stay in <code>.env</code> — never in a demo file, never on camera.</li>
+      <li><b>Apps behind a login:</b> when the agent needs a sign-in, a form appears here asking for a demo account. What you type is written to one local file (<code>.env</code> in your workspace) and never sent to the agent or anywhere else. The sign-in runs before the camera and is cut off; the session is kept, so later takes skip it. For codes from your phone, SSO or a captcha: <code>retake signin demos/&lt;name&gt;.yaml</code> — log in once by hand, Retake keeps the session.</li>
       <li>A failed step names what was on screen at the time — read the proof log before guessing.</li>
     </ul>
   </section>

package/dist/ui/index.html

@@ -402,7 +402,7 @@ function fillSettings(d) {
   const st = d.settings || {};
   $('sPreset').value = st.preset || 'post-landscape';
   $('sLayout').value = (st.layout === 'band' || !st.layout) ? 'default' : st.layout;
-  $('sCamera').value = st.camera || 'auto';
+  $('sCamera').value = st.camera || 'static';
   $('sCursor').value = st.cursor || 'default';
   paintAction();
 }
@@ -499,7 +499,7 @@ function openScene(label, t) {
   sceneOpen = label;
   $('sceneWho').textContent = `Scene “${label}” · ${t.toFixed(1)}s`;
   $('sceneCap').value = sc?.caption || '';
-  $('sceneCam').value = typeof sc?.camera === 'number' ? String(sc.camera) : (sc?.camera || 'auto');
+  $('sceneCam').value = typeof sc?.camera === 'number' ? String(sc.camera) : (sc?.camera || 'static');
   $('sceneEdit').classList.add('show');
   $('scrub').querySelectorAll('b').forEach((b) => b.classList.toggle('on', b.dataset.label === label));
   const v = $('stage').querySelector('video'); if (v) { v.currentTime = t; v.pause(); }