add error message banner

app.py

@@ -389,7 +389,124 @@ with gr.Blocks(title="🧳 Torn Foreign Stocks") as iface:
         ["tear gas in argentina", "smoke grenade in south africa", "flash grenade in switzerland"], c),
         inputs=[capacity_slider], outputs=[result_df, meta_box])
 
-    # --- JS: convert all UTC ISO timestamps to browser's local time ---
+    
+    # --- JS: global error banner (captures JS errors & unhandled promise rejections) ---
+    gr.HTML("""
+    <script>
+    (function () {
+      const DEDUP_MS = 10000; // suppress duplicates for 10s
+      const errorTimestamps = new Map();
+      // Inject minimal styles
+      const css = `
+      .errban-wrap{position:fixed;inset:auto 0 0 0;top:0;z-index:2147483647;pointer-events:none}
+      .errban{pointer-events:auto;margin:8px;border-left:4px solid #ef4444;background:#fee2e2;color:#991b1b;
+              box-shadow:0 6px 16px rgba(0,0,0,.15);border-radius:8px;overflow:hidden;font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
+      .errban-hd{display:flex;gap:8px;align-items:center;padding:10px 12px}
+      .errban-title{font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+      .errban-btn{appearance:none;border:0;background:transparent;color:#7f1d1d;cursor:pointer;padding:6px 8px;border-radius:6px}
+      .errban-btn:hover{background:rgba(153,27,27,.1)}
+      .errban-body{display:none;border-top:1px dashed rgba(153,27,27,.35);padding:10px 12px;background:#ffe4e6;max-height:40vh;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap}
+      @media (prefers-color-scheme: dark){
+        .errban{background:#2b0f12;color:#ffd7d7;border-left-color:#ff6b6b}
+        .errban-body{background:#361317}
+        .errban-btn{color:#ffd7d7}
+        .errban-btn:hover{background:rgba(255,215,215,.12)}
+      }`;
+      const style = document.createElement('style');
+      style.textContent = css;
+      document.head.appendChild(style);
+      // Root container
+      const root = document.createElement('div');
+      root.className = 'errban-wrap';
+      document.body.appendChild(root);
+      function now() { return Date.now(); }
+      function dedup(key) {
+        const t = errorTimestamps.get(key) || 0;
+        if (now() - t < DEDUP_MS) return true;
+        errorTimestamps.set(key, now());
+        return false;
+      }
+      function showBanner(title, details) {
+        const key = title + '|' + (details || '');
+        if (dedup(key)) return;
+        const el = document.createElement('div');
+        el.className = 'errban';
+        const hd = document.createElement('div');
+        hd.className = 'errban-hd';
+        const ttl = document.createElement('div');
+        ttl.className = 'errban-title';
+        ttl.textContent = title;
+        const copyBtn = document.createElement('button');
+        copyBtn.className = 'errban-btn';
+        copyBtn.textContent = 'Copy';
+        copyBtn.title = 'Copy error details';
+        copyBtn.onclick = async () => {
+          try {
+            await navigator.clipboard.writeText(details || title);
+            copyBtn.textContent = 'Copied!';
+            setTimeout(() => (copyBtn.textContent = 'Copy'), 1200);
+          } catch {}
+        };
+        const detBtn = document.createElement('button');
+        detBtn.className = 'errban-btn';
+        detBtn.textContent = 'Details';
+        const body = document.createElement('div');
+        body.className = 'errban-body';
+        body.textContent = (details || '').trim() || '(no additional details)';
+        detBtn.onclick = () => {
+          body.style.display = body.style.display === 'block' ? 'none' : 'block';
+        };
+        const closeBtn = document.createElement('button');
+        closeBtn.className = 'errban-btn';
+        closeBtn.textContent = 'Dismiss';
+        closeBtn.onclick = () => el.remove();
+        hd.append(ttl, copyBtn, detBtn, closeBtn);
+        el.appendChild(hd);
+        el.appendChild(body);
+        // Insert newest at top
+        root.prepend(el);
+      }
+      function formatErrorEvent(ev) {
+        const parts = [];
+        if (ev.message) parts.push(ev.message);
+        if (ev.filename) parts.push(`${ev.filename}${ev.lineno ? ':' + ev.lineno : ''}${ev.colno ? ':' + ev.colno : ''}`);
+        if (ev.error && ev.error.stack) parts.push(ev.error.stack);
+        return {
+          title: ev.message || 'Script error',
+          details: parts.join('\n')
+        };
+      }
+      function formatRejection(ev) {
+        const r = ev.reason;
+        let title = 'Unhandled promise rejection';
+        let details = '';
+        if (r && typeof r === 'object') {
+          title = r.message ? `${title}: ${r.message}` : title;
+          details = (r.stack || JSON.stringify(r, Object.getOwnPropertyNames(r))).toString();
+        } else {
+          details = String(r);
+        }
+        return { title, details };
+      }
+      // Global listeners
+      window.addEventListener('error', (ev) => {
+        const { title, details } = formatErrorEvent(ev);
+        showBanner(title, details);
+      });
+      window.addEventListener('unhandledrejection', (ev) => {
+        const { title, details } = formatRejection(ev);
+        showBanner(title, details);
+      });
+      // Manual reporting API
+      window.reportErrorBanner = function (err, context) {
+        const title = context ? `Error: ${context}` : (err && err.message) || 'Error';
+        const details = (err && err.stack) ? err.stack : String(err);
+        showBanner(title, details);
+      };
+    })();
+    </script>
+    """)
+# --- JS: convert all UTC ISO timestamps to browser's local time ---
     gr.HTML("""
     <script>
     (function () {