From 71ddd37711f63d6a58290ab20c247bfc8528bda3 Mon Sep 17 00:00:00 2001
From: Dejvino <dejvino@gmail.com>
Date: Tue, 18 Aug 2026 16:29:09 +0200
Subject: [PATCH] A minimum variety bar in the gallery, drawn as a red line
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A visualizer that looks the same wherever it appears does not just fail to vary
— it leaks between songs, because it is cast into many of them and the viewer
who watches two videos ends up recognising the shot rather than the song. That
makes the floor a property of the scene, so the gallery now states it and the
scene has to clear it.

0.04 to start with, and honestly a starting bar rather than a derived one: set
where the flat cluster measurably sits, to be raised as scenes are lifted to it.

Drawn twice, because the two readings are different questions. Every meter
carries a red marker at the bar, so a single row can be judged on its own. And
in the default sort the list is cut by one red line where the scores cross it,
which answers the browsing question — everything above that line repeats itself
between songs.

Also restored progressive drawing, which the caching rewrite had quietly lost:
every draw had moved to the end of the build, leaving three minutes of spinner
and nothing to look at. The first rows are the interesting ones, since the sort
puts the repetitive scenes on top.

Verified by seeding the cache with rows spanning the bar and reloading: four
below, four above, the line between them, the marker at 20% of each meter, and
the grade colours switching at the right place.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 flow-state/gallery.html          | 68 +++++++++++++++++++-------------
 flow-state/src/checks/gallery.js | 14 +++++++
 2 files changed, 54 insertions(+), 28 deletions(-)

diff --git a/flow-state/gallery.html b/flow-state/gallery.html
index 6c56f5c..ec61e19 100644
--- a/flow-state/gallery.html
+++ b/flow-state/gallery.html
@@ -47,8 +47,10 @@
     .name { font-size: 14px; color: #e6eaf2; }
     .fam { color: #6b7280; }
     .score { color: #9aa3b5; }
-    .meter { display: inline-block; width: 130px; height: 7px; background: #1a1e28; border-radius: 4px; overflow: hidden; vertical-align: middle; }
-    .meter i { display: block; height: 100%; background: #4ade80; }
+    .meter { position: relative; display: inline-block; width: 130px; height: 7px; background: #1a1e28; border-radius: 4px; vertical-align: middle; }
+    .meter i { display: block; height: 100%; background: #4ade80; border-radius: 4px 0 0 4px; }
+    /* The bar, on every meter, so a row can be read on its own. */
+    .meter b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #ef4444; }
     .row.flat .meter i { background: #ef4444; }
     .row.thin .meter i { background: #eab308; }
     .blocks { color: #5c6577; font-size: 11px; }
@@ -57,6 +59,11 @@
     .thumbs canvas { width: 100%; display: block; background: #05070a; border-radius: 2px; aspect-ratio: 16 / 9; }
     .thumbs figcaption { font-size: 10px; color: #565f70; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     .err { color: #f87171; }
+    .cutline { position: relative; border-top: 2px solid #ef4444; margin: 26px 0 24px; }
+    .cutline span {
+        position: absolute; top: -9px; left: 12px; background: #0b0d12;
+        padding: 0 8px; color: #ef4444; font-size: 11px; letter-spacing: .04em;
+    }
     @media (max-width: 1100px) { .thumbs { grid-template-columns: repeat(3, 1fr); } }
 </style>
 </head>
@@ -87,7 +94,7 @@
     <div id="out"></div>
 
 <script type="module">
-import { buildGallery, galleryContexts, THUMB } from '/src/checks/gallery.js';
+import { buildGallery, galleryContexts, THUMB, MIN_VARIETY } from '/src/checks/gallery.js';
 import {
     sourceFingerprint, loadGallery, saveGallery, clearGallery,
     pixelsToBlob, blobToCanvas,
@@ -103,7 +110,9 @@ const rebuildBtn = document.getElementById('rebuild');
 let rows = [];        // { name, family, role, variety, byBlock, blobs, error }
 let contexts = [];
 
-const grade = (v) => (v < 0.05 ? 'flat' : v < 0.10 ? 'thin' : 'good');
+// Graded against the bar rather than against taste: below it is a failure, and
+// the band just above it is where a scene is passing by too little to trust.
+const grade = (v) => (v < MIN_VARIETY ? 'flat' : v < MIN_VARIETY * 2 ? 'thin' : 'good');
 
 function draw() {
     const mode = sortSel.value;
@@ -113,7 +122,17 @@ function draw() {
         : a.variety - b.variety));
 
     out.innerHTML = '';
+    let drewCut = false;
     for (const row of sorted) {
+        // One line across the whole gallery, where the sort crosses the bar.
+        // Everything above it repeats itself between songs.
+        if (mode === 'variety' && !drewCut && row.variety >= MIN_VARIETY) {
+            drewCut = true;
+            const cut = document.createElement('div');
+            cut.className = 'cutline';
+            cut.innerHTML = `<span>minimum variety ${MIN_VARIETY.toFixed(3)} — everything above repeats itself between songs</span>`;
+            out.appendChild(cut);
+        }
         const el = document.createElement('div');
         el.className = `row ${grade(row.variety)}`;
         const blocks = Object.entries(row.byBlock || {})
@@ -123,7 +142,7 @@ function draw() {
                 <span class="name">${row.name}</span>
                 <span class="fam">${row.family}${row.role === 'accent' ? ' · accent' : ''}</span>
                 <span class="score">
-                    <span class="meter"><i style="width:${Math.min(100, row.variety * 500)}%"></i></span>
+                    <span class="meter"><i style="width:${Math.min(100, row.variety * 500)}%"></i><b style="left:${MIN_VARIETY * 500}%" title="minimum ${MIN_VARIETY}"></b></span>
                     ${row.variety.toFixed(3)}
                 </span>
                 <span class="blocks">${row.error ? `<span class="err">${row.error}</span>` : blocks}</span>
@@ -150,8 +169,8 @@ function draw() {
 sortSel.addEventListener('change', draw);
 
 function summarise(built) {
-    const flat = rows.filter((r) => r.variety < 0.05).length;
-    return `${rows.length} scenes · ${flat} barely change across songs` +
+    const flat = rows.filter((r) => r.variety < MIN_VARIETY).length;
+    return `${rows.length} scenes · ${flat} below the ${MIN_VARIETY} bar` +
         (built ? ` · built ${new Date(built).toLocaleString()}` : '');
 }
 
@@ -170,33 +189,26 @@ async function build(fingerprint) {
         .map((c) => `<span title="${c.identity}">${c.name}</span>`).join('');
 
     const started = Date.now();
-    const built = await buildGallery({
+    await buildGallery({
         contexts,
-        onScene: (done, total, name) => {
+        onScene: async (done, total, name, row) => {
             status.textContent = `rendering ${done}/${total} · ${name}`;
             progress.style.width = `${(done / total) * 100}%`;
+            // Show rows as they land. The caching rewrite moved every draw to
+            // the end, which left three minutes of spinner and nothing to look
+            // at — and the first scenes are the interesting ones, since the
+            // sort puts the repetitive ones on top.
+            rows.push({
+                name: row.module.name, family: row.module.family,
+                role: row.module.role || 'stage', variety: row.variety,
+                byBlock: row.byBlock, error: row.error,
+                blobs: await Promise.all(row.thumbs.map(
+                    (px) => pixelsToBlob(px, THUMB.width, THUMB.height))),
+            });
+            if (done % 8 === 0 || done === total) draw();
         },
     });
 
-    status.textContent = 'compressing…';
-    await new Promise((r) => setTimeout(r, 0));
-    rows = [];
-    for (const row of built) {
-        const blobs = [];
-        for (const pixels of row.thumbs) {
-            blobs.push(await pixelsToBlob(pixels, THUMB.width, THUMB.height));
-        }
-        rows.push({
-            name: row.module.name,
-            family: row.module.family,
-            role: row.module.role || 'stage',
-            variety: row.variety,
-            byBlock: row.byBlock,
-            error: row.error,
-            blobs,
-        });
-    }
-
     const payload = {
         fingerprint,
         built: Date.now(),
diff --git a/flow-state/src/checks/gallery.js b/flow-state/src/checks/gallery.js
index da0d487..b2801fb 100644
--- a/flow-state/src/checks/gallery.js
+++ b/flow-state/src/checks/gallery.js
@@ -28,6 +28,20 @@ import { descriptorDistance, STRUCTURAL } from './variety/signature.js';
 
 const THUMB = { width: 256, height: 144 };
 
+/**
+ * The floor a visualizer has to clear: how different its own six frames must be
+ * from each other, across six songs' identities.
+ *
+ * Below this a scene is the same picture wherever it appears, and because it is
+ * cast into many songs that repetition leaks between them — the viewer who
+ * watches two videos recognises the shot rather than the song. It is a property
+ * of the scene, not of the generator, so it is the scene that has to be lifted.
+ *
+ * 0.04 is a starting bar rather than a derived one. Set where the flat cluster
+ * measurably sits, to be raised as scenes are brought up to it.
+ */
+export const MIN_VARIETY = 0.04;
+
 /**
  * Six contexts, one per song: everything a scene is handed when it is cast.
  *