From 3a0cf26e6c3ab2802a3d899d58314e9fab036dbc Mon Sep 17 00:00:00 2001
From: Dejvino <dejvino@gmail.com>
Date: Thu, 20 Aug 2026 09:02:10 +0200
Subject: [PATCH] The filmstrip fills in as it renders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A full build is a couple of minutes of GPU work, and the page spent all of it
showing an empty screen and then everything at once. The interesting failure —
a strip whose frames could be shuffled without anyone noticing — is visible in
the first row, so waiting for the seventeenth to look at the first is a
needlessly slow way to find it out.

Rows are appended as they land, in bank order, and re-sorted once at the end
when there is finally something to sort by. One row renderer handles both raw
pixels, which is what exists mid-build, and the compressed blobs the cache
holds afterwards, so what you watch appear is what you keep.

The song is announced BEFORE its render rather than only after it, too:
synthesising and rendering one is tens of seconds, and a page that says nothing
until the first one lands looks broken for exactly as long as that takes.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 flow-state/filmstrip.html          | 107 ++++++++++++++++++++---------
 flow-state/src/checks/filmstrip.js |  11 ++-
 2 files changed, 83 insertions(+), 35 deletions(-)

diff --git a/flow-state/filmstrip.html b/flow-state/filmstrip.html
index 89c78ba..3f11ee3 100644
--- a/flow-state/filmstrip.html
+++ b/flow-state/filmstrip.html
@@ -45,6 +45,8 @@
     .num { color: #9aa3b5; }
     .num b { color: #d6dae3; font-weight: normal; }
     .story { color: #a5b4fc; font-size: 11px; }
+    .watch { font-size: 11px; text-decoration: none; }
+    .watch:hover { text-decoration: underline; }
     .err { color: #f87171; }
 
     /* The strip scrolls sideways rather than wrapping: a filmstrip that wraps
@@ -91,6 +93,8 @@
 
 <script type="module">
 import { buildFilmstrip, songNames, STRIP, DEFAULT_EVERY, DEFAULT_DURATION } from '/src/checks/filmstrip.js';
+import { blit } from '/src/checks/blit.js';
+import { hashString } from '/src/engine/rng.js';
 import {
     sourceFingerprint, loadGallery, saveGallery,
     pixelsToBlob, blobToCanvas,
@@ -118,6 +122,63 @@ const grade = (row) => (row.error ? 'broken'
     : row.direction < 0.15 ? 'static'
     : row.direction < 0.45 ? 'churn' : 'arc');
 
+// Nine stills are an argument about a video, and the only reply to them is the
+// video. The app takes the bank's wav straight from `?song=`, and the seed is
+// the one renderSong() uses — hashed off the name — so what plays is the take
+// the strip measured rather than a fresh draw that happens to share a title.
+const watchLink = (name) =>
+    `/?song=${encodeURIComponent(name)}&seed=${hashString(name)}`;
+
+/**
+ * One song's row.
+ *
+ * Shots arrive as raw pixels while the build is running and as compressed blobs
+ * once it has finished (and on every later sort, out of the cache). Both are
+ * drawn here rather than in two places, because the whole point of painting
+ * during the build is that what you see then is what you keep.
+ */
+function renderRow(row) {
+    const el = document.createElement('div');
+    el.className = `row ${grade(row)}`;
+    el.innerHTML = `
+        <div class="head">
+            <span class="name">${row.name}</span>
+            <a class="watch" href="${watchLink(row.name)}" target="_blank"
+               title="play this song in the app, on the seed this strip was rendered with">watch ▸</a>
+            <span class="meta">${row.bpm ?? '?'} bpm · ${row.sections ?? '?'} sections · ${row.director || ''}</span>
+            <span class="num">direction <b>${(row.direction ?? 0).toFixed(2)}</b> · drift <b>${(row.drift ?? 0).toFixed(3)}</b></span>
+            <span class="story">${row.error ? `<span class="err">${row.error}</span>` : (row.storyLine || '')}</span>
+        </div>
+        <div class="strip"></div>`;
+    const strip = el.querySelector('.strip');
+    for (const shot of row.shots || row.frames || []) {
+        const fig = document.createElement('figure');
+        if (shot.moment === 'climax') fig.className = 'climax';
+        const canvas = document.createElement('canvas');
+        fig.appendChild(canvas);
+        const cap = document.createElement('figcaption');
+        const mm = Math.floor(shot.time / 60);
+        const ss = String(Math.round(shot.time % 60)).padStart(2, '0');
+        cap.innerHTML =
+            `<span class="t">${mm}:${ss}</span> ${shot.kind}` +
+            (shot.moment ? ` <span class="moment">${shot.moment}</span>` : '') +
+            `<span class="sc">${shot.scene}</span>` +
+            `<span class="sc">j ${shot.journey.toFixed(2)} · t ${shot.tension.toFixed(2)}</span>`;
+        fig.appendChild(cap);
+        strip.appendChild(fig);
+        if (shot.pixels) {
+            // Straight from the render, mid-build. Synchronous and cheap — it is
+            // one song's nine frames, not the whole bank's.
+            blit(canvas, shot.pixels, STRIP.width, STRIP.height);
+        } else {
+            // Decoded lazily: seventeen songs of nine frames is 150 images and
+            // decoding them synchronously stalls the page.
+            blobToCanvas(canvas, shot.blob);
+        }
+    }
+    return el;
+}
+
 function draw() {
     const mode = sortSel.value;
     const order = songNames();
@@ -128,39 +189,7 @@ function draw() {
         : a.direction - b.direction));
 
     out.innerHTML = '';
-    for (const row of sorted) {
-        const el = document.createElement('div');
-        el.className = `row ${grade(row)}`;
-        el.innerHTML = `
-            <div class="head">
-                <span class="name">${row.name}</span>
-                <span class="meta">${row.bpm ?? '?'} bpm · ${row.sections ?? '?'} sections · ${row.director || ''}</span>
-                <span class="num">direction <b>${(row.direction ?? 0).toFixed(2)}</b> · drift <b>${(row.drift ?? 0).toFixed(3)}</b></span>
-                <span class="story">${row.error ? `<span class="err">${row.error}</span>` : (row.storyLine || '')}</span>
-            </div>
-            <div class="strip"></div>`;
-        const strip = el.querySelector('.strip');
-        (row.shots || []).forEach((shot) => {
-            const fig = document.createElement('figure');
-            if (shot.moment === 'climax') fig.className = 'climax';
-            const canvas = document.createElement('canvas');
-            fig.appendChild(canvas);
-            const cap = document.createElement('figcaption');
-            const mm = Math.floor(shot.time / 60);
-            const ss = String(Math.round(shot.time % 60)).padStart(2, '0');
-            cap.innerHTML =
-                `<span class="t">${mm}:${ss}</span> ${shot.kind}` +
-                (shot.moment ? ` <span class="moment">${shot.moment}</span>` : '') +
-                `<span class="sc">${shot.scene}</span>` +
-                `<span class="sc">j ${shot.journey.toFixed(2)} · t ${shot.tension.toFixed(2)}</span>`;
-            fig.appendChild(cap);
-            strip.appendChild(fig);
-            // Decoded lazily: seventeen songs of nine frames is 150 images and
-            // decoding them synchronously stalls the page.
-            blobToCanvas(canvas, shot.blob);
-        });
-        out.appendChild(el);
-    }
+    for (const row of sorted) out.appendChild(renderRow(row));
 }
 
 sortSel.addEventListener('change', draw);
@@ -187,9 +216,19 @@ async function build() {
     const total = (only || songNames()).length;
     const built = await buildFilmstrip({
         duration, every, names: only,
+        // Painted as they land, in bank order, rather than after the whole run.
+        // A full build is a couple of minutes of GPU work and the interesting
+        // failure — a strip whose frames could be shuffled — is visible in the
+        // first row. Waiting for the seventeenth to look at the first is a
+        // needlessly slow way to find that out. Re-sorted once at the end, when
+        // there is finally something to sort by.
+        onSongStart: (done, of, name) => {
+            status.textContent = `rendering ${name}… (${done}/${of})`;
+            progress.style.width = `${((done - 1) / of) * 100}%`;
+        },
         onSong: (done, of, row) => {
-            status.textContent = `rendering ${row.name}… (${done}/${of})`;
             progress.style.width = `${(done / of) * 100}%`;
+            out.appendChild(renderRow(row));
         },
     });
 
diff --git a/flow-state/src/checks/filmstrip.js b/flow-state/src/checks/filmstrip.js
index 2c72243..86443e9 100644
--- a/flow-state/src/checks/filmstrip.js
+++ b/flow-state/src/checks/filmstrip.js
@@ -161,13 +161,22 @@ function momentAt(story, index) {
  * times for nothing.
  */
 export async function buildFilmstrip({
-    duration = DEFAULT_DURATION, every = DEFAULT_EVERY, names = null, onSong = null,
+    duration = DEFAULT_DURATION, every = DEFAULT_EVERY, names = null,
+    onSong = null, onSongStart = null,
 } = {}) {
     const list = names && names.length ? names : songNames();
     const show = new Show({ ...STRIP });
     const rows = [];
     try {
         for (let i = 0; i < list.length; i++) {
+            // Announced BEFORE the work, not only after it. Synthesising and
+            // rendering one song is tens of seconds, and a page that says
+            // nothing until the first one lands looks broken for exactly as
+            // long as the first one takes.
+            if (onSongStart) {
+                onSongStart(i + 1, list.length, list[i]);
+                await new Promise((r) => setTimeout(r, 0));
+            }
             let row;
             try {
                 row = renderSong(show, list[i], { duration, every });