retake-demos 0.3.0 → 0.4.0

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 */
@@ -58,46 +58,58 @@
   .pin.show { display:block; }
   /* 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; }
+  .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(--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; }
+  .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 { 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 .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; }
@@ -123,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>
@@ -132,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">
@@ -143,18 +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>
-        <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 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>
@@ -163,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>
@@ -188,6 +244,45 @@ async function setCover(body, marked) {
   } 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';
@@ -266,7 +361,8 @@ 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(() => {});
@@ -278,15 +374,17 @@ $('vidCover').onclick = () => setCover({ at: $('vid').currentTime });
   // 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="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>`) +
+  $('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 $('coverrow').querySelectorAll('img[data-file]')) img.onclick = () => setCover({ file: img.dataset.file }, img);
+  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;
@@ -306,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); }
@@ -316,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));
@@ -326,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.
@@ -341,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; }
@@ -350,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';
@@ -360,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);
 }

package/dist/ui/server.js

@@ -10,6 +10,7 @@
  *   POST /api/describe              { name, url, describe } → scout + model → draft manifest (saved)
  *   GET  /api/provider              { active, available }
  *   GET  /api/presets               [{name, ...}]
+ *   GET  /api/releases              what's new, from site/releases.json
  *   GET/PUT/DELETE /api/drafts/:id   an unfinished "new demo" (auto-saved as you go)
  *   DELETE /api/demos/:name         remove a demo (manifest + outputs)
  *   PATCH /api/demos/:name/settings { preset?, layout?, camera?, cursor? } → edits keys, keeps comments
@@ -34,7 +35,7 @@ import { applyEdits, receiptsFor } from "../edits.js";
 import { dryRun } from "../dryrun.js";
 import { startOperator, getSession, addPending, answerPending, markDone, stopSession } from "../operator/run.js";
 import { ffmpegBin, gifskiBin, makeGif } from "../render.js";
-import { captureHash } from "../record.js";
+import { captureHash, restorePrevious } 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";
@@ -163,6 +164,34 @@ function unassignDemoProject(name) {
     delete map[name];
     fs.writeFileSync(DEMO_PROJECTS, JSON.stringify(map, null, 2) + "\n");
 }
+/** Parsed manifests, keyed by path and invalidated by mtime+size.
+    Listing 32 demos meant 64 YAML parses and zod validations per request —
+    two seconds, on a call the window makes on load, on every agent event and
+    every 30s. Nothing about a file that has not changed can have changed. */
+const manifestCache = new Map();
+function cachedManifest(file) {
+    let key;
+    try {
+        const st = fs.statSync(file);
+        key = `${st.mtimeMs}:${st.size}`;
+    }
+    catch {
+        manifestCache.delete(file);
+        return null;
+    }
+    const hit = manifestCache.get(file);
+    if (hit && hit.key === key)
+        return hit.manifest;
+    let manifest = null;
+    try {
+        manifest = loadManifest(file).manifest;
+    }
+    catch {
+        manifest = null;
+    }
+    manifestCache.set(file, { key, manifest });
+    return manifest;
+}
 function listDemos(project) {
     if (!fs.existsSync(DEMOS))
         return [];
@@ -170,13 +199,12 @@ function listDemos(project) {
     const assignments = demoProjects();
     const byUrl = new Map();
     for (const f of fs.readdirSync(DEMOS).filter((x) => /\.ya?ml$/.test(x))) {
-        try {
-            const mm = loadManifest(path.join(DEMOS, f)).manifest;
+        const mm = cachedManifest(path.join(DEMOS, f));
+        if (mm) {
             const asg = assignments[mm.name];
             if (asg && mm.url && !byUrl.has(mm.url))
                 byUrl.set(mm.url, asg);
         }
-        catch { /* invalid manifest: no vote */ }
     }
     return fs
         .readdirSync(DEMOS)
@@ -185,7 +213,9 @@ function listDemos(project) {
         const file = path.join(DEMOS, f);
         let title = "", name = f.replace(/\.ya?ml$/, ""), valid = true, url = "", settings = {};
         try {
-            const m = loadManifest(file).manifest;
+            const m = cachedManifest(file);
+            if (!m)
+                throw new Error("invalid");
             title = m.title ?? "";
             name = m.name;
             url = m.url;
@@ -206,6 +236,11 @@ function listDemos(project) {
         // Capture lands in a second "localhost:3100" fold next to "capture".
         const assigned = assignments[name] ?? (url ? byUrl.get(url) : undefined);
         const group = assigned ? path.basename(assigned) : shortGroup(url);
+        // Heal a folder whose run was killed mid-recording: the previous take is
+        // in its stash and nothing has put it back yet. The window must never
+        // show someone an empty demo when their recording is safe on disk.
+        if (!fs.existsSync(path.join(outRoot(), name, "take.json")))
+            restorePrevious(path.join(outRoot(), name));
         const take = path.join(outRoot(), name, "take.json");
         let lastTake = null;
         // Does the browser need to run again, or is a re-render enough? The
@@ -415,7 +450,6 @@ function noteActivity(b) {
 }
 export function serve(port) {
     loadDotenv(ROOT);
-    const page = fs.readFileSync(path.join(HERE, "index.html"), "utf8");
     const chatPage = fs.readFileSync(path.join(HERE, "chat.html"), "utf8");
     const guidePage = fs.readFileSync(path.join(HERE, "guide.html"), "utf8");
     const server = http.createServer(async (req, res) => {
@@ -435,6 +469,16 @@ export function serve(port) {
             }
             // Both prefixes: the page is served at /landing here and from a site
             // root when deployed, so its asset paths are relative either way.
+            // releases.json sits beside index.html when deployed, so the preview
+            // has to serve it from the same two prefixes the page might be under.
+            const mrel = /^(?:\/landing)?\/releases\.json$/.exec(p);
+            if (mrel && (req.method === "GET" || req.method === "HEAD")) {
+                const f = path.join(PKG_ROOT, "site", "releases.json");
+                if (!fs.existsSync(f))
+                    return json(res, 404, { error: "not found" });
+                res.writeHead(200, { "content-type": "application/json" });
+                return res.end(req.method === "HEAD" ? undefined : fs.readFileSync(f));
+            }
             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", msite[1], msite[2]);
@@ -449,10 +493,6 @@ export function serve(port) {
                 res.writeHead(200, { "content-type": "text/html" });
                 return res.end(guidePage);
             }
-            if (p === "/classic" && req.method === "GET") {
-                res.writeHead(200, { "content-type": "text/html" });
-                return res.end(page);
-            }
             if (p === "/manifest.webmanifest") {
                 res.writeHead(200, { "content-type": "application/manifest+json" });
                 return res.end(JSON.stringify({ name: "Retake", short_name: "Retake", description: "Rerun the demo, don't re-record it.", start_url: "/", scope: "/", display: "standalone", background_color: "#edefe8", theme_color: "#edefe8", icons: [{ src: "/icon-192.png", sizes: "192x192", type: "image/png" }, { src: "/icon-512.png", sizes: "512x512", type: "image/png", purpose: "any maskable" }] }));
@@ -494,6 +534,19 @@ export function serve(port) {
             }
             if (p === "/api/provider" && req.method === "GET")
                 return json(res, 200, providerStatus());
+            if (p === "/api/releases" && req.method === "GET") {
+                // The same site/releases.json the landing page reads — one list, so
+                // the window and the page can never disagree about what shipped.
+                const f = path.join(PKG_ROOT, "site", "releases.json");
+                if (!fs.existsSync(f))
+                    return json(res, 200, { releases: [] });
+                try {
+                    return json(res, 200, JSON.parse(fs.readFileSync(f, "utf8")));
+                }
+                catch {
+                    return json(res, 200, { releases: [] });
+                }
+            }
             if (p === "/api/presets" && req.method === "GET")
                 return json(res, 200, Object.values(PRESETS));
             if (p === "/api/drafts" && req.method === "GET")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "retake-demos",
-  "version": "0.3.0",
+  "version": "0.4.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",
@@ -40,8 +40,7 @@
     "scripts/patch-testreel.mjs",
     "AGENTS.md",
     "llms.txt",
-    "site/index.html",
-    "site/logos"
+    "site/releases.json"
   ],
   "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",