From bbbe3705d865d8c5e065bd94fbc3fe16ebe9c2f0 Mon Sep 17 00:00:00 2001
From: VPS 4 Builder <deploy@clube67.com>
Date: Sun, 14 Jun 2026 02:55:03 +0200
Subject: [PATCH] =?UTF-8?q?feat(ux):=20auto-reload=20anti-tela-branca=20p?=
 =?UTF-8?q?=C3=B3s-deploy=20(stale=20chunk/bundle)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- watchdog inline no index.html: erro de asset /assets/ (404 de bundle antiga em
  cache), import dinâmico falho, ou #root vazio após 8s → reload automático
- index.tsx: listener vite:preloadError → reload
- anti-loop por timestamp (só recarrega se última tentativa >30s; re-arma sozinho)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/index.html | 32 ++++++++++++++++++++++++++++++++
 frontend/index.tsx  | 11 +++++++++++
 2 files changed, 43 insertions(+)

diff --git a/frontend/index.html b/frontend/index.html
index 20f43aa..4c5dc71 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -16,6 +16,38 @@
     })();
   </script>
 
+  <script>
+    /* Anti-tela-branca pós-deploy: se um asset (bundle/chunk/css) falhar — ex.: index
+       antigo em cache apontando p/ bundle removida (404) — ou o app não montar,
+       recarrega UMA vez para pegar o index/bundle novo. O flag é limpo no app ao
+       montar com sucesso, rearmando a proteção para o próximo deploy. */
+    (function () {
+      function reloadOnce() {
+        try {
+          var last = +sessionStorage.getItem('__sd_stale_reload__') || 0;
+          if (Date.now() - last < 30000) return; /* recarregou há <30s → evita loop */
+          sessionStorage.setItem('__sd_stale_reload__', String(Date.now()));
+        } catch (_) {}
+        location.reload();
+      }
+      window.addEventListener('error', function (e) {
+        var t = e && e.target; if (!t) return;
+        var url = t.src || t.href || '';
+        if ((t.tagName === 'SCRIPT' || t.tagName === 'LINK') && /\/assets\/|\/index\.tsx/.test(url)) reloadOnce();
+      }, true);
+      window.addEventListener('unhandledrejection', function (e) {
+        var m = e && e.reason && (e.reason.message || String(e.reason));
+        if (m && /dynamically imported module|module script failed|Failed to fetch/i.test(m)) reloadOnce();
+      });
+      window.addEventListener('load', function () {
+        setTimeout(function () {
+          var root = document.getElementById('root');
+          if (root && root.childElementCount === 0) reloadOnce();
+        }, 8000);
+      });
+    })();
+  </script>
+
   <base href="/">
 
 
diff --git a/frontend/index.tsx b/frontend/index.tsx
index e8709af..462a1b7 100644
--- a/frontend/index.tsx
+++ b/frontend/index.tsx
@@ -19,6 +19,17 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const queryClient = new QueryClient();
 
+// Auto-reload em chunk obsoleto pós-deploy (par do watchdog inline no index.html).
+// Timestamp evita loop: só recarrega se a última tentativa foi há mais de 30s.
+window.addEventListener('vite:preloadError', () => {
+  try {
+    const last = +(sessionStorage.getItem('__sd_stale_reload__') || 0);
+    if (Date.now() - last < 30000) return;
+    sessionStorage.setItem('__sd_stale_reload__', String(Date.now()));
+  } catch { /* ignore */ }
+  window.location.reload();
+});
+
 const rootElement = document.getElementById('root');
 if (rootElement) {
   const root = createRoot(rootElement);