Fix result-panel UI: accurate seam ribbon, full waveform, instant readout, intro replays

- Seam 'needle' was drifting/stuck: it measured WaveSurfer's waveform in the
browser. Replace with a self-contained before/after ribbon rendered server-side
(YOUR PART | CODA split + join), so the marker is always exactly at src/total.
- Output waveform was clipped (~15px bleeding into the timestamps): give the
waveform container real height (min 90px, centered) so it shows in full.
- 'CODA heard' sat greyed until generation on slow hosts: make analyze_on_upload
stream a 'listening...' state the instant a clip lands, then the key/tempo readout.
- Intro only played on first load (localStorage gate): remove the gate so the
2016 intro replays on every page load.
- Polish: easing/transition refinements, lighter front-end (dropped the fragile
seam-overlay JS and its observers).

app.py

@@ -121,6 +121,19 @@ def _warn_html(title, body):
             f"<div class='coda-hud-note'>{body}</div></div>")
 
 
+def _listening_html():
+    """Instant 'CODA is reading your clip' state for the readout, shown the moment
+    a clip lands so the panel lights up immediately instead of sitting greyed-out
+    until the (CPU-bound) key/tempo analysis finishes. Replaced in-place by the
+    real fingerprint readout a beat later."""
+    return ("<div class='coda-hud coda-hud-listening'>"
+            "<div class='coda-hud-head'><span class='coda-hud-dot'></span>"
+            "CODA&nbsp;HEARD<span class='coda-hud-live'>LISTENING…</span></div>"
+            "<div class='coda-hud-scan'><span></span></div>"
+            "<div class='coda-hud-note'>Reading key, tempo and groove from your "
+            "clip…</div></div>")
+
+
 # the live "what is CODA doing right now" overlay shown over the result panel
 # during generation. finish_song yields these at each real pipeline milestone.
 _STAGE_STEPS = ["listening", "composing", "splicing"]
@@ -146,20 +159,60 @@ def _stage_html(phase, label, sub=""):
         "</div>")
 
 
+def _mmss(seconds):
+    s = int(round(max(float(seconds), 0.0)))
+    return f"{s // 60}:{s % 60:02d}"
+
+
 def _seam_html(source_seconds, total):
-    """Hidden data carrier the Feature-B (seam-reveal) JS reads via data-* on a
-    stable id. Purely cosmetic surfacing of values finish_song already computed;
-    does NOT touch enhance -> fingerprint -> continue_audio -> stitch."""
-    return (f"<div id='coda-seam-data' hidden "
-            f"data-seam='{float(source_seconds):.4f}' "
-            f"data-total='{float(total):.4f}'></div>")
+    """A self-contained before/after 'composition ribbon' for the finished track:
+    one bar split at the EXACT seam — YOUR PART on the left, CODA's continuation
+    on the right — with the join marked and labelled.
+
+    Rendered SERVER-SIDE from the precise numbers finish_song already computed, so
+    the marker is always exactly where CODA begins. The old approach measured the
+    WaveSurfer waveform in the browser and drifted/stuck (the 'needle in the wrong
+    place' bug); this can't, because the split is baked into the HTML. Purely
+    cosmetic — does NOT touch enhance -> fingerprint -> continue_audio -> stitch."""
+    src = max(float(source_seconds), 0.0)
+    tot = max(float(total), src + 0.001)
+    pct = max(0.0, min(src / tot, 1.0)) * 100.0
+    added = max(tot - src, 0.0)
+    return (
+        "<div class='coda-seam-ribbon'>"
+        "<div class='coda-seam-cap'>"
+        "<span>The finished track</span>"
+        f"<span class='coda-seam-cap-tot'>{_mmss(tot)} total</span>"
+        "</div>"
+        "<div class='coda-seam-track'>"
+        f"<div class='coda-seam-seg coda-seam-seg-yours' style='width:{pct:.3f}%'>"
+        "<span class='coda-seam-seg-lab'>YOUR&nbsp;PART</span></div>"
+        f"<div class='coda-seam-seg coda-seam-seg-coda' style='width:{100.0 - pct:.3f}%'>"
+        "<span class='coda-seam-seg-lab'>CODA</span></div>"
+        f"<div class='coda-seam-join' style='left:{pct:.3f}%'></div>"
+        "</div>"
+        "<div class='coda-seam-foot'>"
+        f"<span class='coda-seam-foot-y'>Your original&nbsp;·&nbsp;{_mmss(src)}</span>"
+        f"<span class='coda-seam-foot-c'>CODA added&nbsp;·&nbsp;+{_mmss(added)}</span>"
+        "</div>"
+        "</div>")
 
 
 def analyze_on_upload(audio_path):
     """Fast CPU-only pass the instant a clip loads, so the user sees what CODA
-    heard immediately instead of a dead screen."""
+    heard immediately instead of a dead screen.
+
+    A GENERATOR so the readout lights up the MOMENT a clip lands: it yields a
+    'listening…' state first, then replaces it with the real key/tempo readout
+    once the (CPU-bound) analysis completes. That kills the 'CODA heard stays
+    greyed until you generate' feel on slower hosts. Does NOT touch the
+    generation pipeline — it only drives the readout panel + the Finish button's
+    armed state."""
     if not audio_path:
-        return gr.update(value="", visible=False), gr.update(interactive=False)
+        yield gr.update(value="", visible=False), gr.update(interactive=False)
+        return
+    # instant feedback — panel lights up before the analysis even starts
+    yield gr.update(value=_listening_html(), visible=True), gr.update(interactive=False)
     try:
         listen_path = enhance_to_tempfile(audio_path)
         info = fingerprint(listen_path)
@@ -174,14 +227,15 @@ def analyze_on_upload(audio_path):
                 f"{engine.MAX_SOURCE_SECONDS:.0f}s (Stable Audio 3's "
                 f"{engine.MAX_TOTAL_SECONDS:.0f}s total cap). Trim it shorter and "
                 f"re-upload.")
-            return gr.update(value=msg, visible=True), gr.update(interactive=False)
+            yield gr.update(value=msg, visible=True), gr.update(interactive=False)
+            return
         html = _readout_html(info, quality)
-        return gr.update(value=html, visible=True), gr.update(interactive=True)
+        yield gr.update(value=html, visible=True), gr.update(interactive=True)
     except Exception as e:
         print(f"[coda] analysis failed ({e})", flush=True)
-        return (gr.update(value=_warn_html("Couldn't read that file", str(e)),
-                          visible=True),
-                gr.update(interactive=False))
+        yield (gr.update(value=_warn_html("Couldn't read that file", str(e)),
+                         visible=True),
+               gr.update(interactive=False))
 
 
 @spaces.GPU(duration=120)
@@ -1163,6 +1217,118 @@ body.coda-intro-lock{ overflow:hidden !important; }
   .coda-intro-beat, #coda-intro-eq{ opacity:1 !important; transform:none !important; filter:none !important; }
   #coda-intro-overlay{ transition:opacity .2s linear; }
 }
+
+/* ===================================================================== */
+/* CODA UI FIXES (additive) — server-rendered before/after ribbon, full   */
+/* waveform, instant 'listening' readout, and elegance polish.            */
+/* ===================================================================== */
+
+/* ---------- before/after COMPOSITION RIBBON (server-rendered, exact) ----------
+   replaces the old client-side seam overlay that drifted/stuck on the waveform.
+   The split is baked in as inline width/left %, so the join is ALWAYS exactly
+   where CODA begins. */
+.coda-seam-ribbon{
+  margin:16px 2px 2px; font-family:'Space Grotesk',sans-serif;
+  animation:codaSeamRibbonIn .7s var(--ease-expo) both;
+}
+@keyframes codaSeamRibbonIn{ from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none} }
+.coda-seam-cap{
+  display:flex; justify-content:space-between; align-items:baseline;
+  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
+  color:var(--sub); margin:0 2px 8px; font-weight:600;
+}
+.coda-seam-cap-tot{
+  font-family:'JetBrains Mono',ui-monospace,monospace; color:#cfd6f5;
+  letter-spacing:.05em; font-variant-numeric:tabular-nums;
+}
+.coda-seam-track{
+  position:relative; display:flex; height:38px; border-radius:11px; overflow:hidden;
+  border:1px solid rgba(150,160,220,.16);
+  box-shadow:inset 0 1px 4px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.04);
+}
+.coda-seam-seg{
+  display:flex; align-items:center; min-width:0; padding:0 13px; overflow:hidden;
+  position:relative; transition:width .5s var(--ease-expo);
+}
+.coda-seam-seg-yours{
+  justify-content:flex-start;
+  background:linear-gradient(180deg, rgba(111,224,245,.13), rgba(111,224,245,.04));
+}
+.coda-seam-seg-coda{
+  justify-content:flex-end;
+  background:linear-gradient(180deg, rgba(246,214,138,.18), rgba(246,214,138,.06));
+}
+.coda-seam-seg-lab{ font-size:.62rem; font-weight:600; letter-spacing:.16em; white-space:nowrap; }
+.coda-seam-seg-yours .coda-seam-seg-lab{ color:var(--cyan); text-shadow:0 0 10px rgba(111,224,245,.3); }
+.coda-seam-seg-coda  .coda-seam-seg-lab{ color:var(--gold); text-shadow:0 0 10px rgba(246,214,138,.35); }
+.coda-seam-join{
+  position:absolute; top:0; bottom:0; width:2px; transform:translateX(-1px);
+  background:linear-gradient(180deg, rgba(246,214,138,.25), var(--gold) 22%, var(--gold) 78%, rgba(246,214,138,.25));
+  box-shadow:0 0 10px rgba(246,214,138,.7), 0 0 2px rgba(246,214,138,.9);
+  transform-origin:center; animation:codaSeamWipe .7s var(--ease-expo) .25s both;
+}
+.coda-seam-join::before, .coda-seam-join::after{
+  content:''; position:absolute; left:50%; width:7px; height:7px;
+  transform:translateX(-50%) rotate(45deg); background:var(--gold); border-radius:1px;
+  box-shadow:0 0 8px rgba(246,214,138,.8);
+}
+.coda-seam-join::before{ top:-3px; }
+.coda-seam-join::after{ bottom:-3px; }
+.coda-seam-foot{
+  display:flex; justify-content:space-between; margin:9px 2px 0;
+  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.66rem;
+  font-variant-numeric:tabular-nums; letter-spacing:.02em;
+}
+.coda-seam-foot-y{ color:var(--cyan); }
+.coda-seam-foot-c{ color:var(--gold); }
+
+/* ---------- OUTPUT WAVEFORM: show it in full (was clipped ~15px) ----------
+   WaveSurfer draws taller than Gradio's default container, so the lower part of
+   the waveform was bleeding into the timestamps and looking 'cut off'. Give it
+   real vertical room and let it breathe. */
+.coda-player .component-wrapper{ overflow:visible; }
+.coda-player .waveform-container{
+  min-height:90px !important; align-items:center !important; overflow:visible !important;
+}
+
+/* ---------- 'CODA HEARD' instant LISTENING state ----------
+   the readout lights up the moment a clip lands, before key/tempo analysis is
+   done — so it never sits greyed-out waiting on generation. */
+.coda-hud-listening .coda-hud-live{
+  color:var(--gold); border-color:rgba(246,214,138,.3); background:rgba(246,214,138,.06);
+}
+.coda-hud-scan{
+  height:6px; margin:2px 0 12px; border-radius:3px; overflow:hidden;
+  background:rgba(0,0,0,.42); box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
+}
+.coda-hud-scan span{
+  display:block; height:100%; width:36%; border-radius:3px;
+  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
+  animation:codaHudScan 1.15s var(--ease-expo) infinite;
+}
+@keyframes codaHudScan{ 0%{transform:translateX(-120%)} 100%{transform:translateX(380%)} }
+
+/* ---------- ELEGANCE POLISH ---------- */
+.gradio-container *{ -webkit-tap-highlight-color:transparent; }
+/* one consistent, soft focus ring instead of the browser default */
+.gradio-container button:focus-visible,
+.gradio-container [tabindex]:focus-visible,
+.coda-vibe textarea:focus-visible{
+  outline:none !important;
+  box-shadow:0 0 0 2px rgba(111,224,245,.5), 0 0 18px rgba(111,224,245,.25) !important;
+}
+/* quiet utility key easing (was a generic 'all .25s ease') */
+.coda-demo{ transition:color .25s var(--ease-expo), border-color .25s var(--ease-expo),
+            background .25s var(--ease-expo), box-shadow .25s var(--ease-expo) !important; }
+/* the finished summary settles in gently with the reveal rather than popping */
+.coda-summary h3, .coda-summary p{ animation:codaSeamRibbonIn .6s var(--ease-expo) both; }
+@media (prefers-reduced-motion: reduce){
+  .coda-seam-ribbon, .coda-seam-join, .coda-seam-seg, .coda-hud-scan span,
+  .coda-summary h3, .coda-summary p{
+    animation:none !important; transition:none !important;
+  }
+  .coda-hud-scan{ display:none; }
+}
 """
 
 # ethereal hero spectrum: a frequency-spectrum bar field with a centered
@@ -1351,141 +1517,12 @@ CODA_INIT_JS = """
       W.heroSync = sync;
     }
 
-    /* ===== FEATURE B — BEFORE/AFTER SEAM REVEAL ===== */
-    (function featureB() {
-      if (W.seam) return;
-      var S = (W.seam = { booted: true, _seam: null });
-
-      function readSeam() {
-        try {
-          var el = doc.getElementById('coda-seam-data');
-          if (!el) return null;
-          var src = parseFloat(el.getAttribute('data-seam'));
-          var tot = parseFloat(el.getAttribute('data-total'));
-          if (!isFinite(src) || !isFinite(tot) || tot <= 0 || src < 0) return null;
-          if (src >= tot) return null;
-          return { src: src, total: tot, frac: clamp(src / tot, 0, 1) };
-        } catch (e) { return null; }
-      }
-      /* visible .coda-player audio DOES carry a real src in this build (verified
-       * C.src=url), so it's the cleanest predictable target. */
-      function findPlayable(result) {
-        try {
-          var vis = result.querySelector('.coda-player audio');
-          if (vis && ((vis.currentSrc && vis.currentSrc.length) || (vis.src && vis.src.length))) return vis;
-          var auds = result.querySelectorAll('audio');
-          for (var i = 0; i < auds.length; i++) if (auds[i].currentSrc && auds[i].currentSrc.length) return auds[i];
-          for (var j = 0; j < auds.length; j++) if (auds[j].src && auds[j].src.length) return auds[j];
-          return vis || auds[0] || null;
-        } catch (e) { return null; }
-      }
-      function ensureOverlay(wc) {
-        var ov = wc.querySelector('#coda-seam-overlay');
-        if (!ov) {
-          ov = doc.createElement('div');
-          ov.id = 'coda-seam-overlay';
-          ov.setAttribute('aria-hidden', 'true');
-          ov.innerHTML =
-            '<div class="coda-seam-line"></div>' +
-            '<div class="coda-seam-tag coda-seam-yours">YOUR PART</div>' +
-            '<div class="coda-seam-tag coda-seam-coda">CODA</div>';
-          if (getComputedStyle(wc).position === 'static') wc.style.position = 'relative';
-          wc.appendChild(ov);
-          if (!REDUCED) ov.classList.add('coda-seam-in');
-        }
-        return ov;
-      }
-      function ensureButton(result, seam) {
-        var btn = result.querySelector('#coda-seam-btn');
-        if (!btn) {
-          var head = result.querySelector('.coda-result-head');
-          btn = doc.createElement('button');
-          btn.id = 'coda-seam-btn'; btn.type = 'button'; btn.className = 'coda-seam-btn';
-          btn.innerHTML = '<span class="coda-seam-ico">&#9654;</span>' +
-                          '<span class="coda-seam-txt">Play from the seam</span>';
-          btn.addEventListener('click', function () {
-            try {
-              var s = S._seam; if (!s) return;
-              var a = findPlayable(result); if (!a) return;
-              AUDIO.pauseOthers(a); /* avoid double audio; drive the el Feature A taps */
-              var seekAndPlay = function () {
-                try {
-                  var dur = (a.duration && isFinite(a.duration)) ? a.duration : 0;
-                  var t = dur > 0 ? clamp(s.src, 0, Math.max(0, dur - 0.05)) : s.src;
-                  a.currentTime = t;
-                  var p = a.play(); if (p && p.catch) p.catch(function () {});
-                } catch (e) {}
-              };
-              if (a.readyState >= 1 && isFinite(a.duration) && a.duration > 0) seekAndPlay();
-              else a.addEventListener('loadedmetadata', seekAndPlay, { once: true });
-              /* do NOT call a.load() — src already set by Gradio; load() races it */
-            } catch (e) {}
-          });
-          if (head) head.appendChild(btn); else result.insertBefore(btn, result.firstChild);
-        }
-        var txt = btn.querySelector('.coda-seam-txt');
-        if (txt) txt.textContent = 'Play from the seam · ' + fmtTime(seam.src);
-        btn.title = 'Hear the join: your original ends at ' + fmtTime(seam.src) + ', CODA takes over';
-        btn.style.display = '';
-        return btn;
-      }
-      function teardown(result) {
-        try {
-          var ov = result.querySelector('#coda-seam-overlay'); if (ov) ov.style.display = 'none';
-          var btn = result.querySelector('#coda-seam-btn'); if (btn) btn.style.display = 'none';
-        } catch (e) {}
-      }
-      function place(seam) {
-        var result = doc.getElementById('coda-result'); if (!result) return;
-        var wc = result.querySelector('.coda-player .waveform-container'); if (!wc) return;
-        if (!seam) { teardown(result); return; }
-        var ov = ensureOverlay(wc);
-        ov.style.setProperty('--seam', (seam.frac * 100).toFixed(3) + '%');
-        ov.style.display = 'block';
-        ov.classList.toggle('coda-seam-near-end', seam.frac > 0.88);
-        ov.classList.toggle('coda-seam-near-start', seam.frac < 0.12);
-        /* play-from-seam button removed: WaveSurfer playback is not controllable from app JS. The gold seam marker + labels carry the before/after reveal. */
-      }
-      function sync() {
-        try {
-          var seam = readSeam(); var prev = S._seam; S._seam = seam;
-          var changed = !prev || !seam || prev.src !== seam.src || prev.total !== seam.total;
-          var result = doc.getElementById('coda-result');
-          var ovEl = result && result.querySelector('#coda-seam-overlay');
-          var hasOverlay = ovEl && ovEl.style.display !== 'none';
-          if (changed || (seam && !hasOverlay)) place(seam);
-        } catch (e) {}
-      }
-      var rafPending = false;
-      function onResize() {
-        if (rafPending) return; rafPending = true;
-        requestAnimationFrame(function () { rafPending = false; if (S._seam) place(S._seam); });
-      }
-      if ('ResizeObserver' in window) {
-        try {
-          S._ro = new ResizeObserver(onResize);
-          S._observeWC = function () {
-            try {
-              var wc = doc.querySelector('#coda-result .coda-player .waveform-container');
-              if (wc && wc !== S._wc) { if (S._wc) S._ro.unobserve(S._wc); S._ro.observe(wc); S._wc = wc; }
-            } catch (e) {}
-          };
-        } catch (e) { S._observeWC = function () {}; }
-      } else { window.addEventListener('resize', onResize, { passive: true }); S._observeWC = function () {}; }
-      function boot() {
-        var result = doc.getElementById('coda-result');
-        if (!result) { setTimeout(boot, 250); return; }
-        if (S._mo) return;
-        var t = null;
-        S._mo = new MutationObserver(function () {
-          if (t) return; t = setTimeout(function () { t = null; S._observeWC(); sync(); }, 60);
-        });
-        S._mo.observe(result, { childList: true, subtree: true, attributes: true,
-          attributeFilter: ['data-seam', 'data-total'] });
-        S._observeWC(); sync();
-      }
-      boot();
-    })();
+    /* ===== FEATURE B — BEFORE/AFTER SEAM REVEAL =====
+     * The before/after split (YOUR PART | CODA + the join marker) is now rendered
+     * SERVER-SIDE as a self-contained ribbon (see _seam_html in app.py) with the
+     * exact proportions baked into inline styles. That removes the old, fragile
+     * client-side path that measured WaveSurfer's waveform and could leave the
+     * marker stuck in the wrong place. No JS needed here anymore. */
 
     /* ===== FEATURE C — CINEMATIC ONBOARDING ===== */
     (function featureC() {
@@ -1506,14 +1543,9 @@ CODA_INIT_JS = """
           host.setAttribute('aria-hidden', 'true'); host.remove();
         } catch (e) {}
       }
-      var seenFlag = false;
-      try { seenFlag = hasLS && localStorage.getItem(KEY) === '1'; } catch (e) {}
-      if (seenFlag) {
-        var existing = doc.getElementById('coda-intro-overlay');
-        if (existing) hardRemove(existing);
-        wireReplay();
-        return;
-      }
+      /* Tony's call: the 2016 intro replays on EVERY page load, not just the
+       * first. So there is NO localStorage "seen" gate — we always boot it.
+       * Skip / Esc / click-outside / auto-advance still dismiss it per load. */
       var tries = 0;
       function boot() {
         var host = doc.getElementById('coda-intro-overlay');
@@ -1521,9 +1553,7 @@ CODA_INIT_JS = """
         init(host);
       }
       function init(host) {
-        var seen = false;
-        try { seen = hasLS && localStorage.getItem(KEY) === '1'; } catch (e) {}
-        if (seen) { hardRemove(host); wireReplay(); return; }
+        /* no seen-gate: the intro plays every load (see featureC note above) */
         try { if (host.parentNode !== doc.body) doc.body.appendChild(host); } catch (e) {}
         try { doc.body.classList.add('coda-intro-lock'); } catch (e) {}
         host.classList.add('coda-intro-on');
@@ -1543,7 +1573,7 @@ CODA_INIT_JS = """
             if (done) return; done = true;
             hardRemove(host);
             try { doc.body.classList.remove('coda-intro-lock'); } catch (e) {}
-            try { if (hasLS) localStorage.setItem(KEY, '1'); } catch (e) {}
+            /* intentionally do NOT persist a 'seen' flag — replay every load */
           }
           host.addEventListener('transitionend', finish, { once: true });
           setTimeout(finish, 750);
@@ -1713,16 +1743,17 @@ with gr.Blocks(title="CODA", head=HEAD_SCRIPT) as app:
                                         waveform_options=gr.WaveformOptions(
                                             waveform_color="#3a3060",
                                             waveform_progress_color="#a98bff"))
+                # before/after composition ribbon, sat right under the player.
+                # finish_song fills it on reveal with a fully self-contained,
+                # server-computed YOUR PART | CODA split (see _seam_html) — the
+                # marker is always exactly where CODA begins, no client-side
+                # waveform measuring. Empty until a result lands.
+                seam_data = gr.HTML("", elem_id="coda-seam-host")
                 # built visible with an empty value (an empty Markdown renders
                 # nothing). finish_song fills it in the SAME event that sets the
                 # audio, so there's no second `.then` to toggle visibility — one
                 # event = one completion signal, so the spinner always clears.
                 summary_md = gr.Markdown(elem_classes="coda-summary")
-                # hidden seam-data carrier: finish_song fills this with a
-                # <div id='coda-seam-data' data-seam data-total> on reveal; the
-                # Feature-B JS (MutationObserver on #coda-result) reads it to draw
-                # the before/after seam marker + "play from the seam" control.
-                seam_data = gr.HTML("", elem_id="coda-seam-host")
 
     gr.HTML(
         "<div id='coda-foot'>Demo clip: <strong>Track0000</strong> — recorded "