retake-demos 0.2.2 → 0.4.0

package/dist/tidy.js

@@ -0,0 +1,103 @@
+/**
+ * Reclaiming disk without losing anything you cannot get back.
+ *
+ * Measured across 37 real demos: 506 MB of outputs, of which 345 MB was
+ * DERIVED — master.mp4, demo.mp4, stills, thumbnails and gifs all re-render
+ * from `take.json` plus the raw recording, in seconds. Only the raw `.webm`
+ * and `take.json` are irreplaceable: lose those and the demo has to be
+ * performed again, which is the one cost this tool exists to avoid.
+ *
+ * So tidy never touches those two, reports before it removes anything, and
+ * separates "safe, re-renders in seconds" from "the whole take is rubbish".
+ */
+import fs from "node:fs";
+import path from "node:path";
+const bytesOf = (p) => {
+    try {
+        const st = fs.statSync(p);
+        if (!st.isDirectory())
+            return st.size;
+        let n = 0;
+        for (const f of fs.readdirSync(p))
+            n += bytesOf(path.join(p, f));
+        return n;
+    }
+    catch {
+        return 0;
+    }
+};
+export const mb = (n) => `${(n / 1e6).toFixed(0)} MB`;
+/** Derived files: every one of these comes back from a re-render. */
+const DERIVED = ["master.mp4", "thumbnail.png", "cover.png", "cover-titled.png", "contact.png", "stills"];
+const DERIVED_RE = [/\.gif$/, /^\.card-.*\.mp4$/, /^\.callout-.*\.webm$/, /^\.paced\.mp4$/, /^\.joined\.mp4$/, /^debug-filter\.txt$/, /^stalled-\d+\.png$/, /^dry-failed-\d+\.png$/, /^failed-step\.png$/, /^not-the-app\.png$/];
+export function planTidy(outRoot, o) {
+    const groups = [];
+    const add = (what, why, files) => {
+        if (!files.length)
+            return;
+        groups.push({ what, why, files, bytes: files.reduce((n, f) => n + bytesOf(f), 0) });
+    };
+    if (!fs.existsSync(outRoot))
+        return { groups: [], bytes: 0, keptBytes: 0 };
+    const failed = [], orphaned = [], derived = [], deliverables = [];
+    let keptBytes = 0;
+    for (const name of fs.readdirSync(outRoot)) {
+        const dir = path.join(outRoot, name);
+        if (!fs.statSync(dir).isDirectory())
+            continue;
+        const takePath = path.join(dir, "take.json");
+        const hasManifest = fs.existsSync(path.join(o.demosDir, `${name}.yaml`)) || fs.existsSync(path.join(o.demosDir, `${name}.json`));
+        // A whole folder with no manifest cannot be re-rendered or re-recorded
+        // from anything in this workspace — it is a leftover, not an asset.
+        if (!hasManifest) {
+            orphaned.push(dir);
+            continue;
+        }
+        let take = null;
+        try {
+            take = JSON.parse(fs.readFileSync(takePath, "utf8"));
+        }
+        catch { /* no take */ }
+        // A take whose steps failed is not something anyone goes back to.
+        if (take && take.ok === false) {
+            failed.push(dir);
+            continue;
+        }
+        for (const f of fs.readdirSync(dir)) {
+            const full = path.join(dir, f);
+            if (f === "take.json" || f.endsWith(".webm") || f === ".retake-lock" || f === ".poster" || f === ".history" || f === "manifest.used.yaml" || f === "proof-log.md" || f === "facts.json") {
+                keptBytes += bytesOf(full);
+                continue;
+            }
+            if (f === "demo.mp4") {
+                (o.deep ? deliverables : null)?.push(full);
+                if (!o.deep)
+                    keptBytes += bytesOf(full);
+                continue;
+            }
+            if (DERIVED.includes(f) || DERIVED_RE.some((re) => re.test(f))) {
+                derived.push(full);
+                continue;
+            }
+            keptBytes += bytesOf(full);
+        }
+    }
+    add("re-renderable", "master, stills, thumbnails, gifs, working files — all come back from `retake render`, in seconds", derived);
+    add("failed takes", "their steps did not pass; nobody goes back to a broken recording", failed);
+    if (o.orphans)
+        add("orphaned folders", "no manifest in demos/ — nothing here can be re-recorded or re-rendered", orphaned);
+    if (o.deep)
+        add("deliverables", "demo.mp4 — re-renders from the recording, but it IS the file you hand over", deliverables);
+    const bytes = groups.reduce((n, g) => n + g.bytes, 0);
+    return { groups, bytes, keptBytes };
+}
+export function applyTidy(plan) {
+    let freed = 0;
+    for (const g of plan.groups) {
+        for (const f of g.files) {
+            freed += bytesOf(f);
+            fs.rmSync(f, { recursive: true, force: true });
+        }
+    }
+    return freed;
+}

package/dist/ui/chat.html

@@ -16,13 +16,13 @@
   html,body { margin:0; height:100%; background:var(--paper); color:var(--ink); font:15px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, Arial, sans-serif; -webkit-font-smoothing:antialiased; }
   button, input { font:inherit; color:inherit; }
   .app { min-height:100%; display:flex; flex-direction:column; }
-  .top { display:flex; align-items:center; gap:10px; padding:14px 22px; }
+  .top { display:flex; align-items:center; gap:10px; padding:0 24px; height:56px; border-bottom:1px solid var(--rule); background:var(--paper); }
   .mark { width:22px; height:22px; border-radius:7px; background:var(--accent); position:relative; flex:none; }
   .mark i { position:absolute; left:5.5px; height:2.5px; border-radius:2px; background:#eceee9; }
   .mark i:nth-child(1){top:4px;width:4px;opacity:.55} .mark i:nth-child(2){top:8px;width:7px;opacity:.8} .mark i:nth-child(3){top:12px;width:11px;background:var(--amber)} .mark i:nth-child(4){top:16px;width:7px;opacity:.8}
   .top h1 { font-size:15px; font-weight:600; margin:0; }
   .controls { position:relative; display:flex; align-items:center; gap:8px; margin-left:8px; }
-  .chip { border:1px solid var(--rule2); background:#fff; border-radius:999px; padding:6px 13px; font-size:13px; color:var(--ink); cursor:pointer; }
+  .chip { border:1px solid var(--rule2); background:#fff; border-radius:999px; height:32px; padding:0 14px; display:inline-flex; align-items:center; font-size:13px; font-weight:500; color:var(--ink); cursor:pointer; transition:border-color .12s; }
   .chip:hover { border-color:var(--ink); }
   .pop { position:absolute; left:0; top:38px; z-index:40; background:#fff; border:1px solid var(--rule2); border-radius:14px; box-shadow:0 12px 34px rgba(24,28,24,.13); padding:8px; width:290px; display:none; }
   .pop.show { display:block; }
@@ -36,13 +36,13 @@
   @keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:1} }
   .quiet { padding:8px 10px; color:var(--muted); font-size:13px; }
   .sp { flex:1; }
-  .wrap { width:100%; margin:0; padding:6px 22px 40px; display:grid; grid-template-columns:minmax(0,1fr); gap:26px; align-items:start; }
-  .col-main { max-width:720px; width:100%; margin:0 auto; min-width:0; }
+  .wrap { width:100%; margin:0; padding:24px 24px 56px; display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
+  .col-main { max-width:760px; width:100%; margin:0 auto; min-width:0; }
   /* wide screens: the library floats as its own card at the left, detached
      from the window edge; the video centers in the space beside it. */
   @media (min-width: 1000px) {
-    .wrap.two { grid-template-columns:280px minmax(0,1fr); gap:30px; }
-    .wrap.two .lib { position:sticky; top:14px; order:-1; }
+    .wrap.two { grid-template-columns:272px minmax(0,1fr); gap:32px; }
+    .wrap.two .lib { position:sticky; top:24px; order:-1; }
   }
 
   /* live activity — what an agent is doing to this library right now */
@@ -56,39 +56,60 @@
   /* 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); }
-  .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; }
+  /* 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:60vh; margin:0 auto; border-radius:14px; background:#000; display:block; border:1px solid var(--rule2); box-shadow:0 16px 40px rgba(24,28,24,.10); }
+  .under { display:flex; align-items:baseline; gap:8px; margin-top:16px; flex-wrap:wrap; }
+  .vtitle { font-size:15px; font-weight:600; color:var(--ink); }
+  .vmeta { font-size:13px; color:var(--muted); }
+  .under a, .under button { color:var(--ink); text-decoration:none; border:1px solid var(--rule2); background:#fff; border-radius:999px; padding:0 14px; cursor:pointer; font-size:13px; font-weight:500; display:inline-flex; align-items:center; transition:border-color .12s; }
   .under a:hover, .under button:hover { border-color:var(--ink); }
   /* A native select with its arrow removed leaves lopsided padding; make it
      sit exactly like the pills beside it, text centred, same height. */
-  .under select { color:var(--ink); border:1px solid var(--rule2); background:#fff; border-radius:999px; padding:0 12px; height:29px; line-height:27px; font-size:13px; font-family:inherit; text-align:center; text-align-last:center; cursor:pointer; -webkit-appearance:none; appearance:none; min-width:58px; }
-  .under a, .under button { height:29px; line-height:17px; box-sizing:border-box; }
+  .under select { color:var(--ink); border:1px solid var(--rule2); background:#fff; border-radius:999px; padding:0 12px; height:32px; font-size:13px; font-weight:500; font-family:inherit; text-align:center; text-align-last:center; cursor:pointer; -webkit-appearance:none; appearance:none; min-width:58px; transition:border-color .12s; }
+  .under a, .under button { height:32px; box-sizing:border-box; align-self:center; }
   .under select:hover { border-color:var(--ink); }
-  .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; }
+  .frames { margin-top:16px; border:1px solid var(--rule); background:var(--card); border-radius:16px; padding:14px 16px; }
+  .frames .fhead { display:flex; align-items:center; margin-bottom:10px; }
+  .frames .fhead .lab { font:11px ui-monospace, Menlo, monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
+  .frames .fhead .hint { margin-left:10px; font-size:12.5px; color:var(--muted); }
+  .stills { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; align-items:center; }
+  .stills label.up { font-size:12.5px; font-weight:500; color:var(--muted); border:1px dashed var(--rule2); border-radius:8px; height:58px; display:inline-flex; align-items:center; padding:0 14px; cursor:pointer; flex:none; transition:border-color .12s, color .12s; }
+  .stills label.up:hover { border-color:var(--ink); color:var(--ink); }
+  .stills img { height:58px; border-radius:8px; border:1px solid var(--rule2); cursor:pointer; flex:none; transition:border-color .12s; }
   .stills img:hover { border-color:var(--ink); }
+  .stills img.poster, .coverrow img.poster { border-color:var(--ink); box-shadow:0 0 0 2px var(--ink); }
+  .coverrow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
+  .coverrow:empty { display:none; margin:0; }
+  .coverrow img { height:58px; border-radius:8px; border:1px solid var(--rule2); cursor:pointer; transition:border-color .12s; }
+  .coverrow img:hover { border-color:var(--ink); }
+  .coverrow .lab { display:none; }
+  .coverrow label.up { font-size:12.5px; font-weight:500; color:var(--muted); border:1px dashed var(--rule2); border-radius:8px; height:58px; display:inline-flex; align-items:center; padding:0 14px; cursor:pointer; transition:border-color .12s, color .12s; }
+  .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; }
+  .lib { border:1px solid var(--rule); background:var(--card); border-radius:16px; padding:12px 8px; position:sticky; top:24px; line-height:1.4; }
+  .lib h2 { font:11px ui-monospace, Menlo, monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:4px 4px 10px 14px; }
   details.group { margin-bottom:0; }
-  details.group summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:12px 12px 12px 8px; border-radius:12px; font-size:15.5px; color:var(--muted); min-height:48px; }
+  details.group summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:0 12px 0 6px; border-radius:10px; font-size:14px; color:var(--muted); height:38px; }
   details.group summary::-webkit-details-marker { display:none; }
   details.group summary:hover { background:#eef1ea; color:var(--ink); }
-  details.group summary .tri { transition:transform .15s; font-size:12px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:8px; flex:none; }
-  details.group summary:hover .tri { background:#e6e9e1; }
-  details.group summary .fold { width:18px; height:14px; flex:none; position:relative; }
-  details.group summary .fold::before { content:""; position:absolute; inset:0; border-radius:3px; background:var(--amber); opacity:.9; }
-  details.group summary .fold::after { content:""; position:absolute; left:0; top:-3px; width:8px; height:5px; border-radius:2px 2px 0 0; background:var(--amber); opacity:.9; }
+  details.group summary .tri { transition:transform .15s; font-size:9px; color:var(--rule2); width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex:none; }
+  details.group summary:hover .tri { color:var(--muted); }
+  /* The folder mark is quiet: amber belongs to the brand and the live dot,
+     not to every row of a list. */
+  details.group summary .fold { width:15px; height:12px; flex:none; position:relative; opacity:.8; }
+  details.group summary .fold::before { content:""; position:absolute; inset:0; border-radius:2.5px; background:var(--rule2); }
+  details.group summary .fold::after { content:""; position:absolute; left:0; top:-2.5px; width:7px; height:4px; border-radius:2px 2px 0 0; background:var(--rule2); }
+  details.group[open] summary .fold::before, details.group[open] summary .fold::after { background:var(--amber); opacity:.85; }
   details.group[open] summary .tri { transform:rotate(90deg); }
-  details.group summary b { color:var(--ink); font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-  details.group summary small { margin-left:auto; font-size:12.5px; }
-  details.group .demo { margin-left:14px; }
-  .demo { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; cursor:pointer; min-height:40px; }
+  details.group summary b { color:var(--ink); font-weight:500; font-size:13.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  details.group summary small { margin-left:auto; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
+  details.group .demo { margin-left:24px; }
+  .demo { display:flex; align-items:center; gap:9px; padding:0 10px; border-radius:9px; cursor:pointer; height:34px; }
   .demo:hover { background:#eef1ea; }
-  .demo.on { background:#fff; border:1px solid var(--rule); }
-  .demo .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14.5px; }
-  .demo small { color:var(--muted); font-size:12px; flex:none; }
+  .demo.on { background:#fff; border:1px solid var(--rule); box-shadow:0 1px 3px rgba(24,28,24,.05); }
+  .demo .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; }
+  .demo small { color:var(--muted); font-size:11.5px; flex:none; font-variant-numeric:tabular-nums; }
   .demo .zap { flex:none; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:14px; width:26px; height:26px; border-radius:7px; visibility:hidden; }
   .demo .zap:hover { background:#f3e9e6; }
   .demo:hover .zap { visibility:visible; }
@@ -114,6 +135,42 @@
   .empty h2 { color:var(--ink); font-size:17px; margin:0 0 6px; }
   .empty p { margin:0; font-size:14px; }
   .empty code { background:var(--card); border:1px solid var(--rule); border-radius:6px; padding:2px 7px; font:13px ui-monospace, Menlo, monospace; }
+  .modal.wide { width:min(94vw, 560px); max-height:82vh; display:flex; flex-direction:column; }
+  .modal.wide h3 { display:flex; align-items:baseline; gap:9px; }
+  .modal.wide .scroll { overflow-y:auto; margin:0 -4px; padding:0 4px; }
+  .rel { border-top:1px solid var(--rule); padding:15px 0; }
+  .rel:first-child { border-top:0; padding-top:2px; }
+  .relhead { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; margin-bottom:7px; }
+  .relhead b { font-size:14.5px; color:var(--ink); letter-spacing:-.01em; }
+  .relmeta { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
+  /* --accent is near-black in this window; the badge needs the amber token or
+     it renders dark ink on a dark pill and reads as a redaction bar. */
+  .rel.latest .relmeta::after { content:"newest"; margin-left:7px; padding:1.5px 7px; border-radius:99px; background:var(--amber); color:#241d0c; font-size:10.5px; font-weight:600; letter-spacing:.01em; }
+  .rel ul { margin:0; padding-left:17px; }
+  .rel li { margin:4px 0; font-size:13.5px; line-height:1.55; color:var(--muted); }
+  .rel:not(.latest) li { opacity:.8; }
+  .chip .ndot { display:inline-block; width:6px; height:6px; border-radius:99px; background:var(--amber); margin-left:6px; vertical-align:middle; }
+  .lib h2 { display:flex; align-items:center; gap:8px; }
+  .lib h2 .selbtn { margin-left:auto; border:1px solid var(--rule2); background:#fff; color:var(--muted); border-radius:8px; font-size:11.5px; padding:3px 9px; cursor:pointer; line-height:1.4; }
+  .lib h2 .selbtn:hover { border-color:var(--ink); color:var(--ink); }
+  .lib h2 .selbtn.on { background:var(--ink); border-color:var(--ink); color:#fff; }
+  .demo .pick { display:none; width:15px; height:15px; margin-right:2px; accent-color:var(--ink); flex:none; cursor:pointer; }
+  body.selecting .demo .pick { display:inline-block; }
+  body.selecting .demo .zap { display:none; }
+  body.selecting .demo { cursor:pointer; }
+  .selbar { position:sticky; bottom:0; margin-top:10px; padding:10px 12px; background:var(--paper); border-top:1px solid var(--rule2); display:flex; align-items:center; gap:9px; }
+  .selbar small { color:var(--muted); font-size:12px; }
+  .selbar .sp { flex:1; }
+  .selbar button { border:1px solid var(--rule2); background:#fff; border-radius:8px; font-size:12px; padding:5px 11px; cursor:pointer; }
+  .selbar button:hover { border-color:var(--ink); }
+  .selbar button.go { background:var(--bad); border-color:var(--bad); color:#fff; }
+  .selbar button.go:disabled { opacity:.4; cursor:default; }
+  .selbar button.go:not(:disabled):hover { filter:brightness(.92); }
+  .group summary .gpick { display:none; width:15px; height:15px; margin-right:2px; accent-color:var(--ink); flex:none; cursor:pointer; vertical-align:middle; }
+  body.selecting .group summary .gpick { display:inline-block; }
+  .arch summary .emptybtn { margin-left:auto; border:1px solid var(--rule2); background:#fff; color:var(--muted); border-radius:8px; font-size:11px; padding:2px 8px; cursor:pointer; }
+  .arch summary .emptybtn:hover { background:var(--bad); border-color:var(--bad); color:#fff; }
+  .arch summary { display:flex; align-items:center; gap:6px; }
 </style>
 </head>
 <body>
@@ -123,6 +180,7 @@
     <h1>Retake</h1>
     <span class="sp"></span>
     <a class="chip" href="/guide" style="text-decoration:none">How it works</a>
+    <button class="chip" id="newsBtn" title="What changed in this version">What's new</button>
     <button class="chip" id="gremlinBtn" title="Something's off? Tell me.">Bug?</button>
   </div>
   <div class="wrap two">
@@ -134,16 +192,25 @@
     <div class="pin" id="pin">
       <video id="vid" controls playsinline></video>
       <div class="under">
-        <span id="vidMeta"></span>
+        <span class="vtitle" id="vidName"></span>
+        <span class="vmeta" id="vidMeta"></span>
         <span class="sp"></span>
         <select id="vidSpeed" title="Playback speed — preview now, and Download gets this speed">
           <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 folder</button>
-        <!-- The workshop (/classic) still exists but is not advertised until it has been tested as carefully as this page. -->
       </div>
-      <div class="stills" id="stills"></div>
+      <div class="frames">
+        <div class="fhead">
+          <span class="lab">Poster & frames</span>
+          <span class="hint">click any frame to make it the poster</span>
+          <span class="sp"></span>
+          <button class="chip" id="vidCover" title="Make the frame showing right now the poster">Use current frame</button>
+        </div>
+        <div class="coverrow" id="coverrow"></div>
+        <div class="stills" id="stills"></div>
+      </div>
     </div>
     <div class="empty" id="empty" style="display:none">
       <div class="mark"><i></i><i></i><i></i><i></i></div>
@@ -152,7 +219,7 @@
     </div>
     </div>
     <aside class="lib" id="lib" style="display:none">
-      <h2 id="libTtl">Demos</h2>
+      <h2><span id="libTtl">Library</span><button class="selbtn" id="selBtn" title="Pick several to archive at once">Select</button></h2>
       <div id="demos"></div>
     </aside>
   </div>
@@ -164,6 +231,58 @@ 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; }
+}
+
+
+// What's new — reads the same list the landing page does. The dot appears when
+// the newest entry is one this browser has not seen, and only until it is read;
+// nothing interrupts a person who is in the middle of something.
+const SEEN_KEY = 'retake:seen-release';
+let releases = null;
+async function loadReleases() {
+  if (releases) return releases;
+  try { releases = (await api('/api/releases')).releases || []; } catch { releases = []; }
+  return releases;
+}
+(async () => {
+  const rs = await loadReleases();
+  const btn = $('newsBtn');
+  if (!rs.length) { btn.style.display = 'none'; return; }
+  if (localStorage.getItem(SEEN_KEY) !== rs[0].version) btn.insertAdjacentHTML('beforeend', '<span class="ndot"></span>');
+})();
+$('newsBtn').onclick = async () => {
+  const rs = await loadReleases();
+  if (!rs.length) return;
+  const fmt = (d) => { const x = new Date(d + 'T00:00:00'); return isNaN(x) ? '' : x.toLocaleDateString(undefined, { month: 'long', day: 'numeric', year: 'numeric' }); };
+  const veil = document.createElement('div');
+  veil.className = 'veil';
+  veil.innerHTML = '<div class="modal wide"><h3>What\'s new</h3>' +
+    '<div class="scroll">' + rs.map((r, i) =>
+      '<div class="rel' + (i ? '' : ' latest') + '">' +
+        '<div class="relhead"><b>' + esc(r.headline) + '</b><span class="relmeta">' + esc(r.version) + (r.date ? ' · ' + fmt(r.date) : '') + '</span></div>' +
+        '<ul>' + (r.notes || []).map((n) => '<li>' + esc(n) + '</li>').join('') + '</ul>' +
+      '</div>').join('') + '</div>' +
+    '<div class="row" style="margin-top:18px"><button class="btn" id="newsClose">Close</button></div></div>';
+  document.body.appendChild(veil);
+  localStorage.setItem(SEEN_KEY, rs[0].version);
+  $('newsBtn').querySelector('.ndot')?.remove();
+  const shut = () => veil.remove();
+  veil.querySelector('#newsClose').onclick = shut;
+  veil.onclick = (e) => { if (e.target === veil) shut(); };
+  document.addEventListener('keydown', function esc2(e) { if (e.key === 'Escape') { shut(); document.removeEventListener('keydown', esc2); } });
+};
+
 document.getElementById('gremlinBtn').onclick = async () => {
   const veil = document.createElement('div');
   veil.className = 'veil';
@@ -242,16 +361,37 @@ async function pin(name) {
   }
   const t = d.take;
   const failed = (t.timeline || []).find((e) => e.ok === false);
-  $('vidMeta').textContent = `${name} · ${(t.duration - t.trimBefore).toFixed(0)}s · ${t.ok ? 'all steps passed' : failed ? `stopped at step ${failed.index}: ${failed.summary}` : 'some steps failed'}${d.facts ? ` · ${d.facts.width}×${d.facts.height}` : ''}`;
+  $('vidName').textContent = name;
+  $('vidMeta').textContent = `${(t.duration - t.trimBefore).toFixed(0)}s · ${t.ok ? 'all steps passed' : failed ? `stopped at step ${failed.index}: ${failed.summary}` : 'some steps failed'}${d.facts ? ` · ${d.facts.width}×${d.facts.height}` : ''}`;
   $('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.
+  // One tray: generated covers first, then every scene frame, then upload —
+  // a single row a person scans once, left to right.
   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');
+  const covers = (d.files || []).filter((f) => f === 'cover.png' || f === 'cover-titled.png');
+  $('coverrow').innerHTML = '';
+  $('stills').innerHTML =
+    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('') +
+    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('') +
+    `<label class="up">Upload an image<input type="file" accept="image/png,image/jpeg,image/webp" hidden id="coverUp"></label>`;
+  for (const img of $('stills').querySelectorAll('img[data-still]')) img.onclick = () => setCover({ still: img.dataset.still }, img);
+  for (const img of $('stills').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;
@@ -264,7 +404,7 @@ async function drawDemos() {
   $('empty').style.display = has ? 'none' : '';
   $('lib').style.display = has ? '' : 'none';
   document.body.classList.toggle('rail', has);
-  $('libTtl').textContent = `Demos · ${demos.length}`;
+  $('libTtl').textContent = `Library · ${demos.length}`;
   $('demos').innerHTML = '';
   const groups = new Map();
   for (const p of demos) { const g = p.group || 'unsorted'; if (!groups.has(g)) groups.set(g, []); groups.get(g).push(p); }
@@ -274,7 +414,26 @@ async function drawDemos() {
     det.className = 'group';
     const holdsCurrent = items.some((x) => x.name === current);
     if (open.has(g) || groups.size === 1 || holdsCurrent) det.open = true;
-    det.innerHTML = `<summary><span class="tri">▶</span><span class="fold" aria-hidden="true"></span><b>${esc(g)}</b><small>${items.length}</small></summary>`;
+    det.innerHTML = `<summary><input type="checkbox" class="gpick"><span class="tri">▶</span><span class="fold" aria-hidden="true"></span><b>${esc(g)}</b><small>${items.length}</small></summary>`;
+    // A whole folder in one click — with 35 demos in a handful of projects,
+    // ticking them one at a time is the thing this is meant to replace.
+    const gbox = det.querySelector('.gpick');
+    const names = items.map((x) => x.name);
+    gbox.checked = names.length > 0 && names.every((n) => picked.has(n));
+    // Clicking a checkbox inside <summary> also toggles the folder open/shut,
+    // and preventDefault would stop BOTH — including the tick, which is what
+    // makes "select the folder" look like it did nothing. So the fold is
+    // allowed to happen and then put straight back, and the tick is left
+    // entirely alone.
+    gbox.onclick = (ev) => {
+      ev.stopPropagation();
+      const wasOpen = det.open;
+      const all = names.every((n) => picked.has(n));
+      for (const n of names) all ? picked.delete(n) : picked.add(n);
+      for (const b of det.querySelectorAll('.demo .pick')) b.checked = !all;
+      drawSelBar();
+      setTimeout(() => { det.open = wasOpen; }, 0);
+    };
     det.addEventListener('toggle', () => {
       const now = [...document.querySelectorAll('details.group[open] summary b')].map((b) => b.textContent);
       localStorage.setItem('retake.openGroups', JSON.stringify(now));
@@ -284,8 +443,16 @@ async function drawDemos() {
       el.className = 'demo' + (p.name === current ? ' on' : '');
       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); };
+      el.innerHTML = `<input type="checkbox" class="pick"${picked.has(p.name) ? ' checked' : ''}><span class="dot ${dot}"></span><span class="nm">${esc(p.name)}</span><small>${esc(when)}</small><button class="zap" title="Archive this demo">✕</button>`;
+      const box = el.querySelector('.pick');
+      const syncGroup = () => { const gb = det.querySelector('.gpick'); if (gb) gb.checked = items.every((x) => picked.has(x.name)); };
+      box.onclick = (ev) => { ev.stopPropagation(); box.checked ? picked.add(p.name) : picked.delete(p.name); syncGroup(); drawSelBar(); };
+      el.onclick = () => {
+        // In select mode the whole row is the checkbox — hunting for a 15px
+        // target is exactly the fiddliness this is meant to remove.
+        if (selecting) { box.checked = !box.checked; box.checked ? picked.add(p.name) : picked.delete(p.name); syncGroup(); drawSelBar(); return; }
+        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.
@@ -299,8 +466,59 @@ async function drawDemos() {
     $('demos').appendChild(det);
   }
   await drawArchive();
+  drawSelBar();
 }
 
+
+// Bulk archive. Off by default: a list you can accidentally multi-select from
+// is worse than one that needs a deliberate "Select" first.
+let selecting = false;
+const picked = new Set();
+
+function drawSelBar() {
+  const old = document.querySelector('.selbar'); if (old) old.remove();
+  if (!selecting) return;
+  const bar = document.createElement('div');
+  bar.className = 'selbar';
+  const n = picked.size;
+  bar.innerHTML = `<small>${n ? n + ' selected' : 'none selected'}</small><span class="sp"></span>` +
+    `<button id="selAll">${n === demos.length ? 'None' : 'All'}</button>` +
+    `<button class="go" id="selGo"${n ? '' : ' disabled'}>Archive${n ? ' ' + n : ''}</button>`;
+  $('lib').appendChild(bar);
+  bar.querySelector('#selAll').onclick = () => {
+    if (picked.size === demos.length) picked.clear(); else for (const d of demos) picked.add(d.name);
+    for (const b of document.querySelectorAll('.demo .pick')) b.checked = picked.has(b.parentElement.querySelector('.nm').textContent);
+    drawSelBar();
+  };
+  bar.querySelector('#selGo').onclick = async () => {
+    const names = [...picked];
+    if (!names.length) return;
+    if (!(await ask(`Archive ${names.length} demo${names.length === 1 ? '' : 's'}?`,
+      names.slice(0, 8).join(', ') + (names.length > 8 ? ` and ${names.length - 8} more` : '') +
+      '. Their videos are removed. The demos move to the archive below and can be restored any time.', 'Archive'))) return;
+    const failed = [];
+    for (const nm of names) {
+      try { await api('/api/demos/' + nm, { method: 'DELETE' }); } catch (e) { failed.push(nm + ' (' + e.message + ')'); }
+    }
+    if (current && picked.has(current)) { current = null; $('pin').classList.remove('show'); }
+    picked.clear();
+    selecting = false;
+    document.body.classList.remove('selecting');
+    $('selBtn').classList.remove('on');
+    await drawDemos();
+    if (failed.length) alert('Could not archive:\n' + failed.join('\n'));
+  };
+}
+
+$('selBtn').onclick = () => {
+  selecting = !selecting;
+  picked.clear();
+  document.body.classList.toggle('selecting', selecting);
+  $('selBtn').classList.toggle('on', selecting);
+  $('selBtn').textContent = selecting ? 'Done' : 'Select';
+  drawDemos();
+};
+
 async function drawArchive() {
   let items = [];
   try { items = await api('/api/trash'); } catch { return; }
@@ -308,7 +526,7 @@ async function drawArchive() {
   if (!items.length) return;
   const det = document.createElement('details');
   det.className = 'group arch';
-  det.innerHTML = `<summary><span class="tri">▶</span><b>Archive</b><small>${items.length}</small></summary>`;
+  det.innerHTML = `<summary><span class="tri">▶</span><b>Archive</b><small>${items.length}</small><button class="emptybtn" id="emptyArch" title="Delete every archived demo, permanently">Empty</button></summary>`;
   for (const t of items) {
     const el = document.createElement('div');
     el.className = 'row2';
@@ -318,12 +536,15 @@ async function drawArchive() {
   }
   const clear = document.createElement('button');
   clear.className = 'clear';
-  clear.textContent = 'Clear archive — gone for good';
-  clear.onclick = async () => {
-    if (!(await ask('Clear the archive?', `${items.length} archived demo${items.length === 1 ? '' : 's'} will be deleted permanently. There is no way back from this one.`, 'Delete forever'))) return;
+  clear.textContent = `Empty the archive — delete ${items.length} demo${items.length === 1 ? '' : 's'} for good`;
+  const empty = async (ev) => {
+    if (ev) { ev.stopPropagation(); ev.preventDefault(); }   // the summary must not fold
+    if (!(await ask('Empty the archive?', `${items.length} archived demo${items.length === 1 ? '' : 's'} will be deleted permanently — the manifests and everything recorded from them. There is no way back from this one.`, 'Delete forever'))) return;
     await api('/api/trash/clear', { method: 'POST' });
     await drawDemos();
   };
+  clear.onclick = empty;
+  det.querySelector('#emptyArch').onclick = empty;
   det.appendChild(clear);
   $('demos').appendChild(det);
 }
@@ -355,6 +576,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 +628,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>