retake-demos 0.3.0 → 0.4.1

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,55 @@
   .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; }
+  .live .prog { margin-top:12px; }
+  .live .bar { height:4px; border-radius:99px; background:var(--rule); overflow:hidden; }
+  .live .bar i { display:block; height:100%; background:var(--amber); border-radius:99px;
+    transition:width .45s cubic-bezier(.2,.7,.3,1); }
+  .live .under { display:flex; align-items:baseline; gap:8px; margin-top:7px; font-size:12.5px; color:var(--muted); }
+  .live .under .sp { flex:1; }
+  .live .count { font-variant-numeric:tabular-nums; }
+  .live .quip { color:var(--ink); font-weight:500; }
+  .live .elapsed { font-variant-numeric:tabular-nums; opacity:.7; }
+  .spin { width:9px; height:9px; border-radius:99px; background:var(--amber); flex:none;
+    animation:pulse 1.4s ease-in-out infinite; }
+  @keyframes pulse { 0%,100% { opacity:.35; transform:scale(.82) } 50% { opacity:1; transform:scale(1) } }
+  @media (prefers-reduced-motion:reduce) { .spin { animation:none; opacity:.9 } .live .bar i { transition:none } }
 </style>
 </head>
 <body>
@@ -132,29 +193,41 @@
     <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">
     <div class="col-main">
     <div class="live" id="live">
-      <div class="head"><span class="dot live" id="liveDot"></span><b id="liveWho"></b><span id="liveWhat"></span></div>
+      <div class="head"><span class="spin" id="liveDot"></span><b id="liveWho"></b><span id="liveWhat"></span></div>
+      <div class="prog" id="liveProg" style="display:none">
+        <div class="bar"><i id="liveBar" style="width:0%"></i></div>
+        <div class="under"><span class="quip" id="liveQuip"></span><span class="sp"></span><span class="count" id="liveCount"></span><span class="elapsed" id="liveElapsed"></span></div>
+      </div>
       <div class="lines" id="liveLines"></div>
     </div>
     <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 +236,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 +261,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 +378,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 +391,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 +421,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 +431,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 +460,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 +483,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 +543,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 +553,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);
 }
@@ -434,14 +630,107 @@ function askSecrets(r) {
 
 // ---- the live feed: an agent working shows up here as it works -------------
 function watchActivity() {
+
+// While a take runs there is nothing to look at and a lot of time to look at
+// it. A bar for how far in, a clock for how long, and something to read that
+// is not a spinner. Recording-flavoured, because that is what is happening,
+// and none of them claim progress they do not have.
+const QUIPS = [
+  'Rolling.', 'Lining up the shot.', 'Waiting on your app.',
+  'Not fumbling the take.', 'Holding the frame.', 'Letting the app think.',
+  'Clicking things, patiently.', 'Doing the boring part.',
+  'Take one. Also the only take.', 'Typing at a speed people can read.',
+  'Watching the spinner so you do not have to.', 'No sighing this time.',
+  'Getting it right the first time, on purpose.',
+];
+let quipAt = 0, quipTimer = null, elapsedTimer = null, runStart = 0, lastActivity = null;
+
+function fmtElapsed(ms) {
+  const t = Math.max(0, Math.round(ms / 1000));
+  return t < 60 ? t + 's' : Math.floor(t / 60) + 'm ' + String(t % 60).padStart(2, '0') + 's';
+}
+
+function startLiveTickers(startedAt) {
+  const want = startedAt || Date.now();
+  if (runStart !== want) runStart = want;   // a new run restarts the clock
+  if (!quipTimer) {
+    // Slow enough to read, and it only moves while something is happening.
+    quipTimer = setInterval(() => {
+      quipAt = (quipAt + 1) % QUIPS.length;
+      const q = $('liveQuip'); if (q) q.textContent = QUIPS[quipAt];
+    }, 4200);
+  }
+  if (!elapsedTimer) {
+    elapsedTimer = setInterval(() => {
+      const e = $('liveElapsed'); if (e) e.textContent = fmtElapsed(Date.now() - runStart);
+      // No events arrive while ffmpeg works, so the render bar advances on
+      // the clock or it would look frozen for the whole render.
+      if (lastActivity && lastActivity.progress && lastActivity.progress.phase === 'rendering') drawProgress(lastActivity);
+    }, 1000);
+  }
+}
+function stopLiveTickers() {
+  clearInterval(quipTimer); clearInterval(elapsedTimer);
+  quipTimer = elapsedTimer = null;
+}
+
+function drawProgress(a) {
+  const box = $('liveProg'); if (!box) return;
+  if (a) lastActivity = a;
+  const p = a && a.progress;
+  if (!a || !a.active) { box.style.display = 'none'; stopLiveTickers(); return; }
+  // Nothing has reported in five minutes: the run is over, or whatever was
+  // running is gone. Either way the bar is lying, so stop showing it.
+  if (p && p.since && Date.now() - p.since > 5 * 60_000) { box.style.display = 'none'; stopLiveTickers(); return; }
+  if (!p) { box.style.display = 'none'; stopLiveTickers(); return; }
+  // Measure THIS run, not the activity feed. The feed goes active on the
+  // first line and stays that way, so a window left open all day reported a
+  // four-minute take as 529 minutes.
+  startLiveTickers(p.runStart || a.startedAt);
+  if (!$('liveQuip').textContent) $('liveQuip').textContent = QUIPS[0];
+  $('liveElapsed').textContent = fmtElapsed(Date.now() - runStart);
+  // Rendering: there are no steps to count, but the last render of this demo
+  // measured itself, so the bar can run on that. Capped at 95% — it must not
+  // claim finished before it is, and an estimate is never a promise.
+  if (p && p.phase === 'rendering') {
+    box.style.display = '';
+    const eta = (p.etaSec || 0) * 1000;
+    const gone = Date.now() - (p.since || Date.now());
+    $('liveBar').style.width = (eta ? Math.min(95, Math.round((gone / eta) * 100)) : 0) + '%';
+    const left = Math.max(0, Math.round((eta - gone) / 1000));
+    $('liveCount').textContent = eta
+      ? (left > 0 ? `rendering · about ${left}s left` : 'rendering · nearly there')
+      : 'rendering';
+    return;
+  }
+  if (!p || !p.total) {
+    // Working, but nothing countable yet — show the clock, not a fake bar.
+    box.style.display = '';
+    $('liveBar').style.width = '0%';
+    $('liveCount').textContent = '';
+    return;
+  }
+  box.style.display = '';
+  // The last STEP is not the end of the take: the final hold still has to
+  // play, the video still has to be finalised and its dead tail trimmed. A
+  // bar sitting at 100% while the thing is visibly still going is the kind
+  // of small lie that makes someone stop trusting the rest of the window.
+  const pct = Math.min(96, Math.round((p.step / p.total) * 96));
+  $('liveBar').style.width = pct + '%';
+  $('liveCount').textContent = `step ${p.step} of ${p.total}`;
+}
+
   const es = new EventSource('/api/activity/stream');
   const apply = (a) => {
     if (!a || (!a.active && !a.lines?.length)) return;
     $('live').classList.add('show');
-    $('liveDot').className = 'dot ' + (a.active ? 'live' : 'ok');
+    // 'spin' has to survive: this line used to replace it wholesale, so the
+    // spinner existed in the markup and never once appeared.
+    $('liveDot').className = a.active ? 'spin' : 'dot ok';
     $('liveWho').textContent = a.active ? (a.who || 'your agent') : 'Done';
     $('liveWhat').textContent = a.demo ? `· ${a.demo}` : '';
     $('liveLines').innerHTML = (a.lines || []).slice(-4).map((l) => `<div>${esc(l)}</div>`).join('');
+    drawProgress(a);
   };
   es.addEventListener('state', (ev) => {
     const d = JSON.parse(ev.data);
@@ -452,6 +741,7 @@ function watchActivity() {
     for (const r of d.secrets || []) askSecrets(r);
   });
   es.addEventListener('line', (ev) => apply(JSON.parse(ev.data)));
+  es.addEventListener('progress', (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); };