docs(scrubber): label science projections and fix hidden in-flight #3 (#491)

Add per-projection index labels (1..6) under the Acquire-lane triangles so
the audience can count the sequence and read the interrupted-then-restarted
#3 as a retry, mirroring the i# caps on the iteration bands. Atomic marks get
labels only, not verdict bands; the Scan phase bar carries the grouping.

Fix the in-flight #3 triangle vanishing for earlier cursor positions: it was
bundled with the dashed open interval and toggled via display:none across the
whole pre-flight span. Separate the triangle so it future-fades like every
other projection before the cursor reaches it, and hide it only after
re-acquire when the solid #3 takes over.

Co-authored-by: Claude <noreply@anthropic.com>

Author: xmap

docs/javascripts/scrubber-demo.js

@@ -386,12 +386,25 @@
     projs.forEach((a) => {
       if (a.result !== "ok") return;
       const x = X(parseT(a.sampled_at) - run.t0);
+      const tt = parseT(a.sampled_at) - run.t0;
       const tri = svg("polygon", {
         points: `${x},${yA - 5} ${x - 5},${yA + 4} ${x + 5},${yA + 4}`,
         class: "cs-mark cs-mark--projection",
       });
       g.appendChild(tri);
-      timed.push({ el: tri, t: parseT(a.sampled_at) - run.t0 });
+      timed.push({ el: tri, t: tt });
+      // Index label under each projection: the count makes the interrupted #3
+      // legible as a retry (its number reappears after the hold), mirroring the
+      // i# caps on the iteration bands above.
+      const lab = svg("text", {
+        x,
+        y: yA + 16,
+        class: "cs-projlabel",
+        "text-anchor": "middle",
+      });
+      lab.textContent = String(a.payload.params.index);
+      g.appendChild(lab);
+      timed.push({ el: lab, t: tt });
     });
 
     // Open interval for the in-flight projection (drawn dynamically on fold).
@@ -479,12 +492,18 @@
       el.classList.toggle("cs-future", et > t + 1e-6);
     }
 
-    // The in-flight open interval: visible only while #3 is open at the cursor.
-    const open = folded.inflightIdx !== null && t >= scene.inflightT && t < scene.reacq;
+    // The in-flight open interval: the dashed line and label appear only while
+    // #3 is open at the cursor. The triangle itself stays on the lane as a
+    // future-faded mark before the cursor reaches it (like every other
+    // projection), and is hidden only after re-acquire, when the solid #3 takes
+    // over. Toggling it via cs-hidden for the whole pre-flight span was the bug:
+    // it vanished instead of dimming for earlier cursor positions.
     const showOpen = t >= scene.inflightT && t < scene.reacq;
-    [scene.openLine, scene.openTip, scene.openLab].forEach((el) =>
+    [scene.openLine, scene.openLab].forEach((el) =>
       el.classList.toggle("cs-hidden", !showOpen),
     );
+    scene.openTip.classList.toggle("cs-hidden", t >= scene.reacq);
+    scene.openTip.classList.toggle("cs-future", t < scene.inflightT - 1e-6);
     if (showOpen) {
       scene.openLine.setAttribute("x2", X(t));
       scene.openLab.setAttribute("x", (X(scene.inflightT) + X(t)) / 2);

docs/stylesheets/extra.css

@@ -1028,6 +1028,12 @@ body::before {
 .cs-mark--check { fill: var(--cs-state); }
 .cs-mark--projection { fill: var(--cs-sub); }
 .cs-mark--inflight { fill: var(--cs-alarm); }
+.cs-projlabel {
+  fill: var(--cs-sub);
+  font-family: "JetBrains Mono", monospace;
+  font-size: 9.5px;
+  text-anchor: middle;
+}
 .cs-mark--save { fill: var(--cs-mute); }
 
 .cs-future { opacity: 0.22; }