feat: show quota/error toast and restore UI state on failed regen

- Snapshot waveform HTML and video src before firing regen
- On process_completed with error (e.g. ZeroGPU quota exceeded):
- Show red toast with full error message including countdown timer
- Restore waveform to pre-regen HTML
- Restore video src to pre-regen value
- Set segment label to 'Regen failed — quota exceeded'
- Add _showRegenToast() helper styled like ZeroGPU warnings
- Remove debug SSE data[0]/data[1] console.log

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app.py

@@ -2078,6 +2078,15 @@ _GLOBAL_JS = """
 
     console.log('[fireRegen] calling api', apiName, 'fn_index', fnIndex, 'seg', seg_idx);
 
+    // Snapshot current waveform HTML + video src before mutating anything,
+    // so we can restore on error (e.g. quota exceeded).
+    var _preRegenWaveHtml = null;
+    var _preRegenVideoSrc = null;
+    var waveElSnap = document.getElementById('slot_wave_' + slot_id);
+    if (waveElSnap) _preRegenWaveHtml = waveElSnap.innerHTML;
+    var vidElSnap = document.getElementById('slot_vid_' + slot_id);
+    if (vidElSnap) { var vSnap = vidElSnap.querySelector('video'); if (vSnap) _preRegenVideoSrc = vSnap.getAttribute('src'); }
+
     // Show spinner immediately
     const lbl = document.getElementById('wf_seglabel_' + slot_id);
     if (lbl) lbl.textContent = 'Regenerating Seg ' + (seg_idx + 1) + '...';
@@ -2096,10 +2105,11 @@ _GLOBAL_JS = """
       if (!j.event_id) { console.error('[fireRegen] no event_id:', j); return; }
       console.log('[fireRegen] queued, event_id:', j.event_id);
       // Subscribe to SSE stream and apply outputs when ready
-      _listenAndApply(j.event_id, slot_id, seg_idx);
+      _listenAndApply(j.event_id, slot_id, seg_idx, _preRegenWaveHtml, _preRegenVideoSrc);
     }).catch(function(e) {
       console.error('[fireRegen] fetch error:', e);
       if (lbl) lbl.textContent = 'Error — see console';
+      _showRegenToast('Request failed: ' + e.message, true);
     });
   }
 
@@ -2118,7 +2128,24 @@ _GLOBAL_JS = """
     return true;
   }
 
-  function _listenAndApply(eventId, slot_id, seg_idx) {
+  // Toast notification — styled like ZeroGPU quota warnings.
+  function _showRegenToast(message, isError) {
+    var t = document.createElement('div');
+    t.style.cssText = 'position:fixed;bottom:24px;left:50%;transform:translateX(-50%);' +
+      'z-index:999999;padding:12px 20px;border-radius:8px;font-family:sans-serif;' +
+      'font-size:13px;max-width:480px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.5);' +
+      'background:' + (isError ? '#7a1c1c' : '#1c4a1c') + ';color:#fff;' +
+      'border:1px solid ' + (isError ? '#c0392b' : '#27ae60') + ';';
+    t.textContent = message;
+    document.body.appendChild(t);
+    setTimeout(function() {
+      t.style.transition = 'opacity 0.5s';
+      t.style.opacity = '0';
+      setTimeout(function() { t.parentNode && t.parentNode.removeChild(t); }, 600);
+    }, isError ? 8000 : 3000);
+  }
+
+  function _listenAndApply(eventId, slot_id, seg_idx, preRegenWaveHtml, preRegenVideoSrc) {
     var _pendingVideoSrc = null;  // track the latest resolved video URL
     const es = new EventSource('/gradio_api/queue/data?session_hash=' + window.__gradio_session_hash__);
     es.onmessage = function(e) {
@@ -2128,8 +2155,6 @@ _GLOBAL_JS = """
       if (msg.msg === 'process_generating' || msg.msg === 'process_completed') {
         var out = msg.output;
         if (out && out.data) {
-          console.log('[fireRegen] SSE data[0]:', JSON.stringify(out.data[0]).slice(0,200),
-                      ' data[1]:', JSON.stringify(out.data[1]).slice(0,80));
           // data[0] = video update, data[1] = waveform HTML update
           var vidUpdate  = out.data[0];
           var waveUpdate = out.data[1];
@@ -2173,28 +2198,53 @@ _GLOBAL_JS = """
 
         if (msg.msg === 'process_completed') {
           es.close();
+          var errMsg = msg.output && msg.output.error;
+          var hadError = !!errMsg;
+          console.log('[fireRegen] completed for', slot_id, 'error:', hadError, errMsg || '');
+
           var lbl = document.getElementById('wf_seglabel_' + slot_id);
-          if (lbl) lbl.textContent = msg.output && msg.output.error ?
-            'Error regenerating' : 'Done';
-          var hadError = !!(msg.output && msg.output.error);
-          console.log('[fireRegen] completed for', slot_id, 'error:', hadError, msg.output && msg.output.error || '');
-
-          // Apply video src AFTER Gradio/Svelte finishes its own re-render cycle.
-          // We try at 50ms, 300ms, and 800ms to catch whenever Svelte settles.
-          var src = _pendingVideoSrc;
-          if (src) {
-            _applyVideoSrc(slot_id, src);
-            setTimeout(function() { _applyVideoSrc(slot_id, src); }, 50);
-            setTimeout(function() { _applyVideoSrc(slot_id, src); }, 300);
-            setTimeout(function() { _applyVideoSrc(slot_id, src); }, 800);
-            // Also install a MutationObserver for 2s to re-apply if Svelte resets src
-            var vidEl = document.getElementById('slot_vid_' + slot_id);
-            if (vidEl) {
-              var obs = new MutationObserver(function() {
-                _applyVideoSrc(slot_id, src);
-              });
-              obs.observe(vidEl, {subtree: true, attributes: true, attributeFilter: ['src'], childList: true});
-              setTimeout(function() { obs.disconnect(); }, 2000);
+
+          if (hadError) {
+            // Show toast with the full error message (includes quota countdown)
+            var toastMsg = typeof errMsg === 'string' ? errMsg : JSON.stringify(errMsg);
+            _showRegenToast('⚠ ' + toastMsg, true);
+
+            // Restore waveform HTML to pre-regen snapshot
+            if (preRegenWaveHtml !== null) {
+              var waveEl = document.getElementById('slot_wave_' + slot_id);
+              if (waveEl) waveEl.innerHTML = preRegenWaveHtml;
+            }
+
+            // Restore video src to pre-regen snapshot
+            if (preRegenVideoSrc !== null) {
+              var vidElR = document.getElementById('slot_vid_' + slot_id);
+              if (vidElR) {
+                var vR = vidElR.querySelector('video');
+                if (vR) { vR.setAttribute('src', preRegenVideoSrc); vR.src = preRegenVideoSrc; vR.load(); }
+              }
+            }
+
+            if (lbl) lbl.textContent = 'Regen failed — quota exceeded';
+          } else {
+            if (lbl) lbl.textContent = 'Done';
+
+            // Apply video src AFTER Gradio/Svelte finishes its own re-render cycle.
+            // We try at 50ms, 300ms, and 800ms to catch whenever Svelte settles.
+            var src = _pendingVideoSrc;
+            if (src) {
+              _applyVideoSrc(slot_id, src);
+              setTimeout(function() { _applyVideoSrc(slot_id, src); }, 50);
+              setTimeout(function() { _applyVideoSrc(slot_id, src); }, 300);
+              setTimeout(function() { _applyVideoSrc(slot_id, src); }, 800);
+              // Also install a MutationObserver for 2s to re-apply if Svelte resets src
+              var vidEl = document.getElementById('slot_vid_' + slot_id);
+              if (vidEl) {
+                var obs = new MutationObserver(function() {
+                  _applyVideoSrc(slot_id, src);
+                });
+                obs.observe(vidEl, {subtree: true, attributes: true, attributeFilter: ['src'], childList: true});
+                setTimeout(function() { obs.disconnect(); }, 2000);
+              }
             }
           }
         }