§5 Folding: in-flight indicator on viewers + stats while folding runs

Clicking ▶ fold used to leave the cached cartoons and stats visible
unchanged while a fresh run was in flight — the only feedback was a
small status line ("carbon generating…") at the bottom of the toolbar,
which is easy to miss. Visitors couldn't tell whether the button did
anything for the 10-20s the pipeline takes.

Now during runFold:
- both viewers dim their canvas (opacity .28) and overlay a JetBrains
Mono "computing" label with a pulsing green dot; the cached cartoon
stays dimly visible underneath for visual continuity rather than
blanking out
- the overlay label updates per phase: "generating · 1608 bp" while
streaming from Carbon, "folding · esmfold" while the two ESMFold
calls are in flight
- the four stat slots (residues, both pLDDTs, identity) get muted to
signal their values are stale
- the action button reads "running…" instead of "▶ fold"

Everything reverts to the live result on success or to the cached
example on error, via the existing try/finally.

Co-authored-by: Cursor <cursoragent@cursor.com>

demo.html

@@ -352,7 +352,7 @@
     border: 1px solid #eee;
     overflow: hidden;
   }
-  .fold-viewer canvas { display: block; }
+  .fold-viewer canvas { display: block; transition: opacity .15s ease-out; }
   .fold-viewer .fold-empty {
     position: absolute; inset: 0;
     display: flex; align-items: center; justify-content: center;
@@ -360,6 +360,23 @@
     color: #bbb; letter-spacing: 1.5px; text-transform: uppercase;
     pointer-events: none;
   }
+  /* Loading overlay shown over the cartoon while runFold() is in flight.
+     The cached cartoon stays dimly visible underneath so the visitor can
+     still compare to it once the fresh result lands. */
+  .fold-viewer .fold-overlay {
+    position: absolute; inset: 0;
+    display: none; align-items: center; justify-content: center; gap: 8px;
+    background: rgba(250, 250, 247, 0.72);
+    font-family: "JetBrains Mono", monospace; font-size: 10px;
+    color: #555; letter-spacing: 1.5px; text-transform: uppercase;
+    pointer-events: none;
+  }
+  .fold-viewer .fold-overlay .dot {
+    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
+    background: #317f3f; animation: pulse 1.2s ease-in-out infinite;
+  }
+  .fold-viewer.running .fold-overlay { display: flex; }
+  .fold-viewer.running canvas { opacity: 0.28; }
   .fold-legend {
     font-family: "JetBrains Mono", monospace;
     font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 1.2px;
@@ -2813,8 +2830,8 @@ function loadGenes() {
   let viewersLinked = false;
   function ensureViewers() {
     if (!window.$3Dmol) return false;
-    if (!viewerCarbon) viewerCarbon = makeViewer(els.vCarbon);
-    if (!viewerRef)    viewerRef    = makeViewer(els.vRef);
+    if (!viewerCarbon) { viewerCarbon = makeViewer(els.vCarbon); attachOverlay(els.vCarbon); }
+    if (!viewerRef)    { viewerRef    = makeViewer(els.vRef);    attachOverlay(els.vRef);    }
     if (!viewersLinked && viewerCarbon && viewerRef &&
         typeof viewerCarbon.linkViewer === "function") {
       viewerCarbon.linkViewer(viewerRef);
@@ -2824,6 +2841,31 @@ function loadGenes() {
     return !!(viewerCarbon && viewerRef);
   }
 
+  // Inject the "running" overlay once per viewer host. CSS keeps it
+  // hidden until the host gets the .running class via setRunning().
+  function attachOverlay(host) {
+    if (host.querySelector(".fold-overlay")) return;
+    const o = document.createElement("div");
+    o.className = "fold-overlay";
+    o.innerHTML = '<span class="dot"></span><span class="fold-overlay-label">computing</span>';
+    host.appendChild(o);
+  }
+
+  // Toggle the running state on both viewers + the stat row. The cached
+  // cartoon stays underneath at low opacity so the visitor still has
+  // visual context while waiting (vs blanking everything to a spinner).
+  function setRunning(running, label = "computing") {
+    for (const host of [els.vCarbon, els.vRef]) {
+      host.classList.toggle("running", running);
+      const t = host.querySelector(".fold-overlay-label");
+      if (t) t.textContent = label;
+    }
+    for (const el of [els.nRes, els.plddtC, els.plddtR, els.identity]) {
+      el.classList.toggle("muted", running);
+    }
+    els.go.textContent = running ? "running…" : "▶ fold";
+  }
+
   // Editorial pLDDT palette. The three anchor colours match the legend
   // bar under the viewers (#b00020 demo-red / #f0e8e0 paper-beige /
   // #2c5aa0 demo-blue) — same tones used throughout §1 mismatches and
@@ -2893,6 +2935,7 @@ function loadGenes() {
     abortCtrl?.abort();
     abortCtrl = new AbortController();
     els.go.disabled = true;
+    ensureViewers();  // overlay must exist before we toggle .running on it
 
     try {
       // --- Reference: spliced mRNA → longest ORF → AA -------------------
@@ -2910,6 +2953,7 @@ function loadGenes() {
       const genBP     = Math.max(0, targetBP - prefixLen) + 60; // 60-bp safety margin
       const maxTokens = Math.ceil(genBP / 6) + 8;
 
+      setRunning(true, `generating · ${targetBP} bp`);
       setStatus(`carbon generating (${prefixLen}→${targetBP} bp)…`, "streaming");
       const continuation = await streamGenerate(promptDNA, maxTokens, 0.7, abortCtrl.signal);
       const carbonDNA    = (promptDNA + continuation).slice(0, prefixLen + genBP);
@@ -2922,6 +2966,7 @@ function loadGenes() {
       }
 
       // --- Fold both in parallel ----------------------------------------
+      setRunning(true, "folding · esmfold");
       setStatus("folding both…", "streaming");
       const [carbonR, refR] = await Promise.all([
         postFold(carbonORF.aa),
@@ -2931,7 +2976,6 @@ function loadGenes() {
       if (refR.error)    throw new Error("ref fold: "    + refR.error);
 
       // --- Render -------------------------------------------------------
-      ensureViewers();
       renderStructure(viewerCarbon, carbonR.pdb);
       renderStructure(viewerRef,    refR.pdb);
 
@@ -2952,6 +2996,7 @@ function loadGenes() {
       if (e.name === "AbortError") setStatus("aborted", "");
       else setStatus("error: " + (e.message || e), "error");
     } finally {
+      setRunning(false);
       abortCtrl = null;
       els.go.disabled = false;
     }