retake-demos 0.2.2 → 0.3.0

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; }
@@ -141,8 +150,10 @@
         </select>
         <a id="vidDl" download>Download</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">
@@ -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,12 +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(() => {});
+$('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;
@@ -355,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');
@@ -372,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

@@ -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(); }

package/dist/ui/server.js

@@ -33,11 +33,12 @@ import { draftManifest, loadDotenv, pickProvider, proposeEdits, providerStatus,
 import { applyEdits, receiptsFor } from "../edits.js";
 import { dryRun } from "../dryrun.js";
 import { startOperator, getSession, addPending, answerPending, markDone, stopSession } from "../operator/run.js";
-import { gifskiBin, makeGif } from "../render.js";
+import { ffmpegBin, gifskiBin, makeGif } from "../render.js";
 import { captureHash } from "../record.js";
 import { digest } from "../digest.js";
 import { startOffer, startApp, listeningPorts } from "../appserver.js";
 import { PKG_ROOT, PROJECT_ROOT, VERSION, entry } from "../paths.js";
+import { SECRET_NAME, missingSecrets, writeEnvFile } from "../env.js";
 const ROOT = PROJECT_ROOT;
 const DEMOS = path.join(ROOT, "demos");
 /** Where takes land. Default outputs/ in the project; changeable in Settings
@@ -117,7 +118,7 @@ const readBody = (req) => new Promise((ok) => {
     req.on("end", () => ok(b));
 });
 const safeName = (s) => /^[a-z0-9-]+$/.test(s);
-const MIME = { ".mp4": "video/mp4", ".gif": "image/gif", ".png": "image/png", ".md": "text/markdown", ".json": "application/json", ".html": "text/html", ".yaml": "text/yaml" };
+const MIME = { ".mp4": "video/mp4", ".gif": "image/gif", ".png": "image/png", ".jpg": "image/jpeg", ".svg": "image/svg+xml", ".md": "text/markdown", ".json": "application/json", ".html": "text/html", ".yaml": "text/yaml" };
 /** A short name for "the app at this URL": the last path segment if there
     is one (demo.playwright.dev/todomvc → todomvc), else the host without
     www and TLD (www.saucedemo.com → saucedemo). localhost keeps its port —
@@ -326,25 +327,7 @@ function startRun(name, mode = {}) {
     return run;
 }
 /** Read/write the .env in the project root — only the keys we own. */
-function writeEnv(set) {
-    const file = path.join(ROOT, ".env");
-    const lines = fs.existsSync(file) ? fs.readFileSync(file, "utf8").split("\n") : [];
-    for (const [k, v] of Object.entries(set)) {
-        if (v === undefined)
-            continue;
-        const i = lines.findIndex((l) => l.startsWith(k + "="));
-        const line = `${k}=${v}`;
-        if (v === "") {
-            if (i >= 0)
-                lines.splice(i, 1);
-        }
-        else if (i >= 0)
-            lines[i] = line;
-        else
-            lines.push(line);
-    }
-    fs.writeFileSync(file, lines.filter((l, i, a) => l !== "" || i < a.length - 1).join("\n").replace(/\n*$/, "\n"));
-}
+function writeEnv(set) { writeEnvFile(ROOT, set); }
 function envSummary() {
     return { localUrl: process.env.RETAKE_LOCAL_URL ?? "", localModel: process.env.RETAKE_LOCAL_MODEL ?? "", groq: !!process.env.GROQ_API_KEY, mistral: !!process.env.MISTRAL_API_KEY };
 }
@@ -405,6 +388,8 @@ function withStaleness(a) {
         return { ...a, active: false, stale: true };
     return a;
 }
+const secretRequests = new Map();
+const openSecretRequests = () => [...secretRequests.values()].filter((r) => !r.filled).map(({ id, names, why }) => ({ id, names, why }));
 function noteActivity(b) {
     if (!activity.active && !b.done) {
         activity.active = true;
@@ -448,9 +433,11 @@ export function serve(port) {
                 res.writeHead(200, { "content-type": "text/html" });
                 return res.end(fs.readFileSync(f));
             }
-            const msite = /^\/landing\/media\/([A-Za-z0-9._-]+)$/.exec(p);
+            // Both prefixes: the page is served at /landing here and from a site
+            // root when deployed, so its asset paths are relative either way.
+            const msite = /^(?:\/landing)?\/(media|logos)\/([A-Za-z0-9._-]+)$/.exec(p);
             if (msite && (req.method === "GET" || req.method === "HEAD")) {
-                const f = path.join(PKG_ROOT, "site", "media", msite[1]);
+                const f = path.join(PKG_ROOT, "site", msite[1], msite[2]);
                 if (!fs.existsSync(f))
                     return json(res, 404, { error: "not found" });
                 res.writeHead(200, { "content-type": MIME[path.extname(f)] ?? "application/octet-stream", "content-length": fs.statSync(f).size });
@@ -536,6 +523,61 @@ export function serve(port) {
                 const seen = new Set();
                 return json(res, 200, items.filter((x) => !seen.has(x.name) && seen.add(x.name)));
             }
+            // ---------- the poster: any frame, a card, or their own file ----------
+            // thumbnail.png IS the poster. Every source here just writes it, so the
+            // choice costs no re-render and never touches the video.
+            const mcov = /^\/api\/cover\/([a-z0-9-]+)$/.exec(p);
+            if (mcov && req.method === "POST") {
+                const name = mcov[1];
+                const dir = path.join(outRoot(), name);
+                const target = path.join(dir, "thumbnail.png");
+                if (!fs.existsSync(dir))
+                    return json(res, 404, { error: `no take for ${name}` });
+                const b = JSON.parse(await readBody(req));
+                if (b.auto) {
+                    fs.rmSync(path.join(dir, ".poster"), { force: true });
+                    return json(res, 200, { ok: true, poster: "auto — the next render takes it from the thumbnail scene" });
+                }
+                try {
+                    if (b.still) {
+                        // A scene still, by its file name under stills/.
+                        const src = path.join(dir, "stills", path.basename(b.still));
+                        if (!fs.existsSync(src))
+                            return json(res, 404, { error: `no still ${b.still}` });
+                        fs.copyFileSync(src, target);
+                    }
+                    else if (b.file) {
+                        // A candidate already in the take (cover.png, cover-titled.png).
+                        const src = path.join(dir, path.basename(b.file));
+                        if (!fs.existsSync(src))
+                            return json(res, 404, { error: `no file ${b.file}` });
+                        fs.copyFileSync(src, target);
+                    }
+                    else if (typeof b.at === "number") {
+                        // Any moment of the finished video — usually the best frame is
+                        // nowhere near a scene marker.
+                        const mp4 = path.join(dir, "demo.mp4");
+                        if (!fs.existsSync(mp4))
+                            return json(res, 404, { error: "no demo.mp4" });
+                        execFileSync(ffmpegBin(), ["-y", "-loglevel", "error", "-ss", Math.max(0, b.at).toFixed(2), "-i", mp4, "-frames:v", "1", target]);
+                    }
+                    else if (b.dataUrl) {
+                        // Their own image.
+                        const m2 = /^data:image\/(png|jpe?g|webp);base64,(.+)$/.exec(b.dataUrl);
+                        if (!m2)
+                            return json(res, 400, { error: "expected a png, jpeg or webp data URL" });
+                        fs.writeFileSync(target, Buffer.from(m2[2], "base64"));
+                    }
+                    else
+                        return json(res, 400, { error: "give a still, a file, an `at` time, or a dataUrl" });
+                }
+                catch (e) {
+                    return json(res, 500, { error: e.message });
+                }
+                // The choice survives re-renders; "auto" hands it back to the scene default.
+                fs.writeFileSync(path.join(dir, ".poster"), JSON.stringify({ ...b, dataUrl: b.dataUrl ? "(uploaded)" : undefined, at: b.at }));
+                return json(res, 200, { ok: true, poster: "thumbnail.png" });
+            }
             if (p === "/api/trash/clear" && req.method === "POST") {
                 const trash = path.join(ROOT, ".trash");
                 let n = 0;
@@ -720,9 +762,50 @@ export function serve(port) {
             }
             if (p === "/api/activity" && req.method === "GET")
                 return json(res, 200, withStaleness(activity));
+            // ---------- secrets: asked for by name, typed into the window, written here ----------
+            if (p === "/api/secrets/request" && req.method === "POST") {
+                const b = JSON.parse(await readBody(req));
+                const names = (b.names ?? []).filter((n) => SECRET_NAME.test(n));
+                if (!names.length)
+                    return json(res, 400, { error: "names must be like APP_PASSWORD" });
+                // The same ask twice is one form, not two stacked ones.
+                const dup = [...secretRequests.values()].find((x) => !x.filled && x.names.join() === names.join());
+                if (dup)
+                    return json(res, 200, { id: dup.id });
+                const r = { id: "s" + Date.now().toString(36), names, why: String(b.why ?? "").slice(0, 300), filled: false, at: Date.now() };
+                secretRequests.set(r.id, r);
+                for (const w of activityWatchers)
+                    w({ type: "secrets", data: { id: r.id, names: r.names, why: r.why } });
+                return json(res, 200, { id: r.id });
+            }
+            if (p === "/api/secrets/pending" && req.method === "GET")
+                return json(res, 200, openSecretRequests());
+            if (p === "/api/secrets/fill" && req.method === "POST") {
+                const b = JSON.parse(await readBody(req));
+                const r = secretRequests.get(b.id);
+                if (!r)
+                    return json(res, 404, { error: "no such request" });
+                const values = {};
+                for (const [k, v] of Object.entries(b.values ?? {}))
+                    if (r.names.includes(k) && typeof v === "string" && v.trim())
+                        values[k] = v;
+                if (!Object.keys(values).length)
+                    return json(res, 400, { error: "nothing to save" });
+                writeEnvFile(ROOT, values);
+                if (!missingSecrets(ROOT, r.names).length)
+                    r.filled = true;
+                for (const w of activityWatchers)
+                    w({ type: "secrets-done", data: { id: r.id, filled: r.filled } });
+                return json(res, 200, { ok: true, filled: r.filled, set: Object.keys(values) });
+            }
+            const msec = /^\/api\/secrets\/(s[a-z0-9]+)$/.exec(p);
+            if (msec && req.method === "GET") {
+                const r = secretRequests.get(msec[1]);
+                return r ? json(res, 200, { filled: r.filled, missing: missingSecrets(ROOT, r.names) }) : json(res, 404, { error: "no such request" });
+            }
             if (p === "/api/activity/stream" && req.method === "GET") {
                 res.writeHead(200, { "content-type": "text/event-stream", "cache-control": "no-cache", connection: "keep-alive" });
-                res.write(`event: state\ndata: ${JSON.stringify({ ...activity, boot: BOOT })}\n\n`);
+                res.write(`event: state\ndata: ${JSON.stringify({ ...activity, boot: BOOT, secrets: openSecretRequests() })}\n\n`);
                 const send = (ev) => res.write(`event: ${ev.type}\ndata: ${JSON.stringify(ev.data)}\n\n`);
                 activityWatchers.add(send);
                 const beat = setInterval(() => res.write(": ping\n\n"), 25_000);
@@ -859,7 +942,7 @@ export function serve(port) {
                 return json(res, 200, { provider, selected, models: [{ id: selected, name: selected || "Configured default" }] });
             }
             if (p === "/api/settings" && req.method === "GET")
-                return json(res, 200, { ...providerStatus(), model: process.env.RETAKE_MODEL ?? "", selection: modelSelection(), gifski: !!gifskiBin(), env: envSummary(), outDir: outRoot(), outDefault: OUT_DEFAULT, version: VERSION });
+                return json(res, 200, { envPath: path.join(ROOT, ".env"), ...providerStatus(), model: process.env.RETAKE_MODEL ?? "", selection: modelSelection(), gifski: !!gifskiBin(), env: envSummary(), outDir: outRoot(), outDefault: OUT_DEFAULT, version: VERSION });
             const mopen = /^\/api\/open\/([a-z0-9-]+)$/.exec(p);
             if (mopen && req.method === "POST") {
                 const dir = path.join(outRoot(), mopen[1]);
@@ -1023,7 +1106,7 @@ export function serve(port) {
                         if (b.camera === "static")
                             node.set("camera", "static");
                         else if (b.camera === "auto")
-                            node.delete("camera");
+                            node.set("camera", "auto");
                         else if (typeof b.camera === "object")
                             node.set("camera", b.camera);
                     }

package/dist/voice.js

@@ -0,0 +1,36 @@
+/**
+ * Voiceover: the captions read aloud. The captions ARE the script — each
+ * scene's line is synthesized once and placed at the scene's start, so the
+ * narration is honest to the take by construction.
+ *
+ * Engine: edge-tts (Microsoft's neural voices — free, network). Found as a
+ * CLI (`edge-tts`, pipx/pip) or module (`python3 -m edge_tts`). Retake does
+ * not bundle a voice engine; the error says how to install one.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { execFileSync, spawnSync } from "node:child_process";
+export const DEFAULT_VOICE = "en-US-JennyNeural";
+function engine() {
+    const home = process.env.HOME ?? "";
+    for (const c of ["edge-tts", path.join(home, ".local", "bin", "edge-tts")]) {
+        if (spawnSync(c, ["--help"], { stdio: "ignore" }).status === 0)
+            return { cmd: c, args: [] };
+    }
+    if (spawnSync("python3", ["-m", "edge_tts", "--help"], { stdio: "ignore" }).status === 0)
+        return { cmd: "python3", args: ["-m", "edge_tts"] };
+    throw new Error("voiceover needs edge-tts — install it once with `pipx install edge-tts` (or `pip install edge-tts`), then re-render");
+}
+export function synthesize(text, voice, out) {
+    const e = engine();
+    execFileSync(e.cmd, [...e.args, "--voice", voice, "--text", text, "--write-media", out], { stdio: "pipe", timeout: 60_000 });
+    if (!fs.existsSync(out) || fs.statSync(out).size < 200)
+        throw new Error(`voiceover: nothing came back for “${text.slice(0, 40)}…” — is the network up? (edge-tts is a network service)`);
+}
+export function audioSeconds(ffmpeg, file) {
+    const out = String(spawnSync(ffmpeg, ["-hide_banner", "-i", file], { encoding: "utf8" }).stderr);
+    const m = /Duration:\s*(\d+):(\d+):(\d+\.?\d*)/.exec(out);
+    if (!m)
+        throw new Error(`could not read duration of ${file}`);
+    return Number(m[1]) * 3600 + Number(m[2]) * 60 + Number(m[3]);
+}

package/llms.txt

@@ -0,0 +1,11 @@
+# Retake
+
+> Demo-as-code for coding agents: a YAML manifest in, a product walkthrough video out. Rerun the demo instead of re-recording it.
+
+An agent that was handed this repository should read README.md first — its "If you are a coding agent" section is the setup sequence — then AGENTS.md (the CLI loop, manifests, logins, what trips agents up) and skill/SKILL.md (the method Claude Code loads as a skill).
+
+- README.md: https://raw.githubusercontent.com/glebbogachev00/retake/main/README.md
+- AGENTS.md: https://raw.githubusercontent.com/glebbogachev00/retake/main/AGENTS.md
+- skill/SKILL.md: https://raw.githubusercontent.com/glebbogachev00/retake/main/skill/SKILL.md
+- demos/example.yaml: https://raw.githubusercontent.com/glebbogachev00/retake/main/demos/example.yaml
+- npm: https://www.npmjs.com/package/retake-demos

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "retake-demos",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Demo-as-code for coding agents: a YAML manifest in, a product walkthrough video out. Rerun the demo instead of re-recording it.",
   "keywords": [
     "demo",
@@ -30,7 +30,6 @@
   "files": [
     "dist",
     "skill",
-    "site/index.html",
     "assets/logo.svg",
     "assets/icon-192.png",
     "assets/icon-512.png",
@@ -38,7 +37,11 @@
     ".env.example",
     "README.md",
     "LICENSE",
-    "scripts/patch-testreel.mjs"
+    "scripts/patch-testreel.mjs",
+    "AGENTS.md",
+    "llms.txt",
+    "site/index.html",
+    "site/logos"
   ],
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json && mkdir -p dist/ui && cp src/ui/*.html dist/ui/ && chmod +x dist/cli.js",