vatts 1.0.1 → 1.0.2-alpha.2

package/dist/hotReload.js

@@ -32,6 +32,9 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HotReloadManager = void 0;
 /*
@@ -53,9 +56,25 @@ exports.HotReloadManager = void 0;
 const ws_1 = require("ws");
 const chokidar = __importStar(require("chokidar"));
 const path = __importStar(require("path"));
+const typescript_1 = __importDefault(require("typescript"));
 const router_1 = require("./router");
 const console_1 = __importStar(require("./api/console"));
+// Chaves para persistência global para sobreviver a reloads do backend
+const GLOBAL_ERROR_KEY = '__VATTS_LAST_BUILD_ERROR__';
+const GLOBAL_ACTIVE_MANAGER_KEY = '__VATTS_ACTIVE_HOT_RELOAD_MANAGER__';
 class HotReloadManager {
+    // Getter/Setter para acessar o erro persistente no escopo Global
+    // Agora armazena um objeto { frontend: ..., backend: ... }
+    get buildState() {
+        const state = global[GLOBAL_ERROR_KEY];
+        if (!state) {
+            return { frontend: null, backend: null };
+        }
+        return state;
+    }
+    set buildState(value) {
+        global[GLOBAL_ERROR_KEY] = value;
+    }
     constructor(projectDir) {
         this.wss = null;
         this.watchers = [];
@@ -67,13 +86,23 @@ class HotReloadManager {
         this.customHotReloadListener = null;
         this.isBuilding = false;
         this.buildCompleteResolve = null;
-        this.lastBuildError = null;
+        // Impede que um "success" fora de ordem limpe um erro real de frontend.
+        this.lastFrontendErrorBuildId = 0;
+        // DEBUG: stack traces (rate-limited) para descobrir quem dispara onBuildComplete
+        this.lastBuildCompleteTraceAt = 0;
+        this.lastTypecheckAt = 0;
+        this.lastTypecheckResult = null;
         this.projectDir = projectDir;
+        // Registra esta instância como a ativa globalmente
+        global[GLOBAL_ACTIVE_MANAGER_KEY] = this;
+        // Inicializa estado se vazio
+        if (!global[GLOBAL_ERROR_KEY]) {
+            this.buildState = { frontend: null, backend: null };
+        }
     }
     async start() {
         this.setupWatchers();
     }
-    // Método para integrar com Express
     handleUpgrade(request, socket, head) {
         if (this.isShuttingDown) {
             socket.destroy();
@@ -82,8 +111,8 @@ class HotReloadManager {
         if (!this.wss) {
             this.wss = new ws_1.WebSocketServer({
                 noServer: true,
-                perMessageDeflate: false, // Desabilita compressão para melhor performance
-                maxPayload: 1024 * 1024 // Limite de 1MB por mensagem
+                perMessageDeflate: false,
+                maxPayload: 1024 * 1024
             });
             this.setupWebSocketServer();
         }
@@ -99,11 +128,9 @@ class HotReloadManager {
                 ws.close();
                 return;
             }
-            // Setup ping/pong para detectar conexões mortas
             const pingTimer = setInterval(() => {
                 const client = this.clients.get(ws);
                 if (client && ws.readyState === ws_1.WebSocket.OPEN) {
-                    // Se não recebeu pong há mais de 60 segundos, desconecta
                     if (Date.now() - client.lastPong > 60000) {
                         ws.terminate();
                         return;
@@ -117,39 +144,17 @@ class HotReloadManager {
                 lastPong: Date.now()
             };
             this.clients.set(ws, clientConnection);
-            // Ao conectar, envia o status atual (especialmente último erro de build),
-            // mas faz isso no próximo tick pra evitar corrida do handshake.
+            // Ao conectar, envia o status atual combinado
             setTimeout(() => {
                 if (ws.readyState !== ws_1.WebSocket.OPEN)
                     return;
-                if (this.lastBuildError) {
-                    try {
-                        ws.send(JSON.stringify({ type: 'build-error', data: this.lastBuildError, timestamp: Date.now() }));
-                    }
-                    catch {
-                        // ignore
-                    }
-                }
-                else {
-                    try {
-                        ws.send(JSON.stringify({ type: 'build-complete', data: { success: true }, timestamp: Date.now() }));
-                    }
-                    catch {
-                        // ignore
-                    }
-                }
+                this.broadcastCurrentState(ws);
             }, 0);
             ws.on('message', (raw) => {
                 try {
                     const msg = JSON.parse(String(raw || ''));
                     if (msg?.type === 'status-request') {
-                        // responde com o estado atual
-                        if (this.lastBuildError) {
-                            ws.send(JSON.stringify({ type: 'build-error', data: this.lastBuildError, timestamp: Date.now() }));
-                        }
-                        else {
-                            ws.send(JSON.stringify({ type: 'build-complete', data: { success: true }, timestamp: Date.now() }));
-                        }
+                        this.broadcastCurrentState(ws);
                     }
                 }
                 catch {
@@ -171,6 +176,23 @@ class HotReloadManager {
             });
         });
     }
+    // Helper para enviar o estado correto (Erro se Tiver Frontend OU Backend error)
+    broadcastCurrentState(ws) {
+        const state = this.buildState;
+        const activeError = state.backend || state.frontend;
+        if (activeError) {
+            try {
+                ws.send(JSON.stringify({ type: 'build-error', data: activeError, timestamp: Date.now() }));
+            }
+            catch { }
+        }
+        else {
+            try {
+                ws.send(JSON.stringify({ type: 'build-complete', data: { success: true }, timestamp: Date.now() }));
+            }
+            catch { }
+        }
+    }
     cleanupClient(ws) {
         const client = this.clients.get(ws);
         if (client) {
@@ -179,7 +201,6 @@ class HotReloadManager {
         }
     }
     setupWatchers() {
-        // Remove watchers antigos e use apenas um watcher global para src
         const debouncedChange = this.debounce((filePath) => {
             this.handleAnySrcChange(filePath);
         }, 100);
@@ -187,7 +208,7 @@ class HotReloadManager {
             path.join(this.projectDir, 'src/**/*'),
         ], {
             ignored: [
-                /(^|[\/\\])\../, // arquivos ocultos
+                /(^|[\/\\])\../,
                 '**/node_modules/**',
                 '**/.git/**',
                 '**/dist/**'
@@ -203,22 +224,32 @@ class HotReloadManager {
         watcher.on('change', debouncedChange);
         watcher.on('add', debouncedChange);
         watcher.on('unlink', (filePath) => {
-            console_1.default.info(`🗑️ Arquivo removido: ${path.basename(filePath)}`);
+            console_1.default.info(`File removed: ${path.basename(filePath)}`);
             (0, router_1.clearFileCache)(filePath);
             this.clearBackendCache(filePath);
-            this.frontendChangeCallback?.();
-            this.backendApiChangeCallback?.();
+            // Unlink também precisa de try-catch se for chamar callbacks
+            try {
+                this.frontendChangeCallback?.();
+            }
+            catch (e) {
+                this.setBackendError(e);
+            }
+            try {
+                this.backendApiChangeCallback?.();
+            }
+            catch (e) {
+                this.setBackendError(e);
+            }
             this.notifyClients('src-reload', { file: filePath, event: 'unlink' });
         });
         this.watchers.push(watcher);
     }
     debounce(func, wait) {
         return (...args) => {
-            const key = args[0]; // usa o primeiro argumento como chave
+            const key = args[0];
             const existingTimer = this.debounceTimers.get(key);
-            if (existingTimer) {
+            if (existingTimer)
                 clearTimeout(existingTimer);
-            }
             const timer = setTimeout(() => {
                 this.debounceTimers.delete(key);
                 func.apply(this, args);
@@ -226,44 +257,108 @@ class HotReloadManager {
             this.debounceTimers.set(key, timer);
         };
     }
+    // Método para capturar erro do Backend explicitamente
+    setBackendError(error) {
+        const currentState = this.buildState;
+        // Formata o erro para ser amigável ao JSON
+        const errorData = {
+            message: error?.message || 'Unknown Backend Error',
+            stack: error?.stack,
+            type: 'BackendError',
+            ts: Date.now()
+        };
+        // Se for erro de TypeScript/ts-node compilando TSX, trata como erro de FRONT também
+        // (é a mesma causa raiz que impede o app de rodar).
+        const isTypeScriptCompileError = typeof errorData.message === 'string' &&
+            (errorData.message.includes('Unable to compile TypeScript') ||
+                errorData.message.includes('TSError') ||
+                errorData.message.includes('TS2304') ||
+                errorData.message.includes('TS1005') ||
+                errorData.message.includes('TS17002'));
+        console_1.default.error("Captured Backend Error:", errorData.message);
+        this.buildState = {
+            ...currentState,
+            backend: errorData,
+            frontend: isTypeScriptCompileError ? (currentState.frontend || errorData) : currentState.frontend
+        };
+        // Notifica clientes imediatamente
+        this.notifyStatusChange();
+    }
     async handleAnySrcChange(filePath) {
         const dm = console_1.default.dynamicLine(`File change detected ${path.basename(filePath)}, processing...`);
-        // Detecta se é arquivo de frontend ou backend
+        let hasBackendError = false;
         const isFrontendFile = filePath.includes(path.join('src', 'web', 'routes')) ||
             filePath.includes(path.join('src', 'web', 'components')) ||
             filePath.includes('layout.tsx') ||
             filePath.includes('not-found.tsx') ||
             filePath.endsWith('.tsx');
         const isBackendFile = filePath.includes(path.join('src', 'backend')) && !isFrontendFile;
-        // Limpa o cache do arquivo alterado
         (0, router_1.clearFileCache)(filePath);
         this.clearBackendCache(filePath);
-        // Se for arquivo de frontend, NÃO aguarda build. Apenas avisa o frontend para tentar um soft reload.
-        // Em modo dev com Vite, o bundler já recompila/serve as mudanças.
-        if (isFrontendFile) {
-            console_1.default.logWithout(console_1.Levels.INFO, undefined, `Frontend change detected: ${path.basename(filePath)}`);
-            // Mantém a regeneração do entry file/rotas no backend (necessário para novas rotas/layout/not-found)
-            this.frontendChangeCallback?.();
-            dm.end(`Frontend change detected for ${path.basename(filePath)}, notifying clients.`);
-            // O client tenta HMR/soft-reload (sem recarregar a página inteira)
-            this.notifyClients('frontend-reload', { file: filePath, event: 'change' });
-            return;
+        // Tenta executar os callbacks e captura erros do Backend (Router/SSR)
+        try {
+            if (isFrontendFile) {
+                console_1.default.logWithout(console_1.Levels.INFO, undefined, `Frontend change detected: ${path.basename(filePath)}`);
+                // CRÍTICO: Executa e captura erro
+                try {
+                    this.frontendChangeCallback?.();
+                    // Se passou aqui, limpa erro de backend anterior
+                    const s = this.buildState;
+                    if (s.backend) {
+                        this.buildState = { ...s, backend: null };
+                        this.notifyStatusChange();
+                    }
+                }
+                catch (e) {
+                    this.setBackendError(e);
+                    hasBackendError = true;
+                }
+                dm.end(`Frontend change detected for ${path.basename(filePath)}, notifying clients.`);
+                this.notifyClients('frontend-reload', { file: filePath, event: 'change' });
+            }
+            else if (isBackendFile) {
+                console_1.default.logWithout(console_1.Levels.INFO, undefined, `Backend change detected: ${path.basename(filePath)}. Reloading backend...`);
+                try {
+                    this.backendApiChangeCallback?.();
+                    // Se passou aqui, limpa erro de backend anterior
+                    const s = this.buildState;
+                    if (s.backend) {
+                        this.buildState = { ...s, backend: null };
+                        this.notifyStatusChange();
+                    }
+                }
+                catch (e) {
+                    this.setBackendError(e);
+                    hasBackendError = true;
+                }
+                this.notifyClients('backend-api-reload', { file: filePath, event: 'change' });
+                dm.end(`Backend reloaded for ${path.basename(filePath)}.`);
+            }
+            else {
+                // Fallback
+                try {
+                    this.frontendChangeCallback?.();
+                }
+                catch (e) {
+                    this.setBackendError(e);
+                    hasBackendError = true;
+                }
+                try {
+                    this.backendApiChangeCallback?.();
+                }
+                catch (e) {
+                    if (!hasBackendError)
+                        this.setBackendError(e);
+                    hasBackendError = true;
+                }
+                this.notifyClients('src-reload', { file: filePath, event: 'change' });
+                dm.end(`Application reload triggered by ${path.basename(filePath)}.`);
+            }
         }
-        // Se for arquivo de backend, recarrega o módulo e notifica
-        if (isBackendFile) {
-            console_1.default.logWithout(console_1.Levels.INFO, undefined, `Backend change detected: ${path.basename(filePath)}. Reloading backend...`);
-            this.backendApiChangeCallback?.();
-            this.notifyClients('backend-api-reload', { file: filePath, event: 'change' });
-            dm.end(`Backend reloaded for ${path.basename(filePath)}.`);
-            return;
+        catch (e) {
+            // Catch-all de segurança
+            this.setBackendError(e);
         }
-        // Fallback: se não for nem frontend nem backend detectado, recarrega tudo
-        console_1.default.logWithout(console_1.Levels.INFO, undefined, `File change detected (misc): ${path.basename(filePath)}. Reloading application...`);
-        this.frontendChangeCallback?.();
-        this.backendApiChangeCallback?.();
-        this.notifyClients('src-reload', { file: filePath, event: 'change' });
-        dm.end(`Application reload triggered by ${path.basename(filePath)}.`);
-        // Chama listener customizado se definido
         if (this.customHotReloadListener) {
             try {
                 await this.customHotReloadListener(filePath);
@@ -274,9 +369,26 @@ class HotReloadManager {
             }
         }
     }
+    notifyStatusChange() {
+        const state = this.buildState;
+        const activeError = state.backend || state.frontend; // Backend tem prioridade ou unificamos?
+        if (activeError) {
+            this.notifyClients('build-error', activeError);
+        }
+        else {
+            this.notifyClients('build-complete', { success: true });
+        }
+    }
     notifyClients(type, data) {
-        if (this.isShuttingDown || this.clients.size === 0) {
+        if (this.isShuttingDown)
             return;
+        if (this.clients.size === 0) {
+            const activeManager = global[GLOBAL_ACTIVE_MANAGER_KEY];
+            if (activeManager && activeManager !== this) {
+                // @ts-ignore
+                activeManager.notifyClients(type, data);
+                return;
+            }
         }
         const message = JSON.stringify({ type, data, timestamp: Date.now() });
         const deadClients = [];
@@ -286,7 +398,6 @@ class HotReloadManager {
                     ws.send(message);
                 }
                 catch (error) {
-                    console_1.default.logWithout(console_1.Levels.ERROR, console_1.Colors.BgRed, `Error sending WebSocket message: ${error}`);
                     deadClients.push(ws);
                 }
             }
@@ -294,15 +405,9 @@ class HotReloadManager {
                 deadClients.push(ws);
             }
         });
-        // Remove clientes mortos
         deadClients.forEach(ws => this.cleanupClient(ws));
     }
-    restartServer() {
-        this.notifyClients('server-restart');
-        setTimeout(() => {
-            this.notifyClients('server-ready');
-        }, 2000);
-    }
+    // ... (rest of methods like getClientScript, clearBackendCache keep unchanged or minimally adjusted)
     // Script do cliente otimizado com reconnection backoff
     getClientScript() {
         return `
@@ -315,165 +420,89 @@ class HotReloadManager {
                 let reconnectInterval = 1000;
                 let reconnectTimer;
                 let isConnected = false;
-
-                // Estado de erro de build (o app pode usar para UI)
                 let lastBuildError = null;
 
                 function emitBuildError(error) {
                     try {
                         lastBuildError = error;
-                        window.__VATTS_BUILD_ERROR__ = error;
-                        try {
-                            sessionStorage.setItem('__VATTS_BUILD_ERROR__', JSON.stringify(error));
-                        } catch {}
-
+                        // Não persistimos erro no client. Ele sempre vem do servidor via WebSocket.
                         window.dispatchEvent(new CustomEvent('vatts:build-error', { detail: error }));
-                    } catch {
-                        // noop
-                    }
+                    } catch {}
                 }
 
                 function clearBuildError() {
                     try {
                         lastBuildError = null;
-                        window.__VATTS_BUILD_ERROR__ = null;
-                        try {
-                            sessionStorage.removeItem('__VATTS_BUILD_ERROR__');
-                        } catch {}
-
                         window.dispatchEvent(new CustomEvent('vatts:build-ok', { detail: { ts: Date.now() } }));
-                    } catch {
-                        // noop
-                    }
+                    } catch {}
                 }
 
-                // Se a página recarregou e já existe erro salvo, re-dispara o evento
-                // para garantir que o React pegue (mesmo se o WS ainda não mandou).
-                (function bootstrapStoredBuildError() {
-                    try {
-                        const existing = window.__VATTS_BUILD_ERROR__;
-                        if (existing) {
-                            setTimeout(() => {
-                                try { window.dispatchEvent(new CustomEvent('vatts:build-error', { detail: existing })); } catch {}
-                            }, 0);
-                            return;
-                        }
-
-                        const fromStorage = sessionStorage.getItem('__VATTS_BUILD_ERROR__');
-                        if (fromStorage) {
-                            const parsed = JSON.parse(fromStorage);
-                            window.__VATTS_BUILD_ERROR__ = parsed;
-                            setTimeout(() => {
-                                try { window.dispatchEvent(new CustomEvent('vatts:build-error', { detail: parsed })); } catch {}
-                            }, 0);
-                        }
-                    } catch {
-                        // ignore
-                    }
-                })();
+                // Não faz bootstrap de erro salvo (sem sessionStorage/localStorage).
 
                 function notifyHotReloadState(state, payload) {
                     try {
-                        // estado global simples pra debug/telemetria local
                         window.__VATTS_HOT_RELOAD__ = { state: state, payload: payload || null, ts: Date.now() };
                         const ev = new CustomEvent('vatts:hotreload', { detail: window.__VATTS_HOT_RELOAD__ });
                         window.dispatchEvent(ev);
-                    } catch {
-                        // noop
-                    }
+                    } catch {}
                 }
 
                 function requestBuildStatus(reason) {
                     try {
                         if (!ws || ws.readyState !== WebSocket.OPEN) return;
                         ws.send(JSON.stringify({ type: 'status-request', reason: reason || 'unknown', ts: Date.now() }));
-                    } catch {
-                        // ignore
-                    }
+                    } catch {}
                 }
 
-                // Aguarda o main.js ficar "atual" antes de disparar o soft reload.
-                // Isso evita o problema de o evento chegar antes do bundler (Vite/dev server) terminar de servir o novo conteúdo.
                 async function waitForMainToBeUpdated(timeoutMs, pollMs) {
                     try {
                         const script = document.querySelector('script[src*="main.js"]');
-                        if (!script || !script.src) return true; // se não achou, não bloqueia
-
+                        if (!script || !script.src) return true;
                         const mainUrl = script.src.split('?')[0];
                         const start = Date.now();
-
-                        // conteúdo atual (baseline)
                         let baseline = '';
                         try {
                             const r0 = await fetch(mainUrl + '?t=' + Date.now(), { cache: 'no-store' });
                             baseline = await r0.text();
-                        } catch {
-                            // se falhar o fetch baseline, segue sem bloquear
-                            return true;
-                        }
+                        } catch { return true; }
 
                         while (Date.now() - start < timeoutMs) {
                             await new Promise(r => setTimeout(r, pollMs));
                             try {
                                 const r = await fetch(mainUrl + '?t=' + Date.now(), { cache: 'no-store' });
                                 const txt = await r.text();
-                                if (txt && txt !== baseline) {
-                                    return true;
-                                }
-                            } catch {
-                                // ignora e continua tentando
-                            }
+                                if (txt && txt !== baseline) return true;
+                            } catch {}
                         }
-
-                        // timeout: deixa o app seguir e usar fallback (reload) se precisar
                         return false;
-                    } catch {
-                        return true;
-                    }
+                    } catch { return true; }
                 }
                 
                 function connect() {
-                    const url = window.location; // Objeto com info da URL atual
-                    const protocol = url.protocol === "https:" ? "wss:" : "ws:"; // Usa wss se for https
+                    const url = window.location;
+                    const protocol = url.protocol === "https:" ? "wss:" : "ws:";
                     const wsUrl = protocol + '//' + url.host + '/hweb-hotreload/';
-                    if (ws && (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)) {
-                        return;
-                    }
+                    if (ws && (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)) return;
 
                     try {
                         ws = new WebSocket(wsUrl);
-                        
                         ws.onopen = function() {
                             console.log('\u001b[32m[vatts]\u001b[0m Hot-reload connected');
                             isConnected = true;
                             reconnectAttempts = 0;
-                            reconnectInterval = 1000;
                             clearTimeout(reconnectTimer);
-
-                            // Pede o status atual (erro de build / ok) sempre que reconectar.
+                            // Ao conectar, sempre pede o status atual ao servidor.
                             requestBuildStatus('ws-open');
-
-                            // Também tenta sincronizar UI com algum erro já persistido
-                            try {
-                                if (window.__VATTS_BUILD_ERROR__) {
-                                    setTimeout(() => {
-                                        try { window.dispatchEvent(new CustomEvent('vatts:build-error', { detail: window.__VATTS_BUILD_ERROR__ })); } catch {}
-                                    }, 0);
-                                }
-                            } catch {}
                         };
                         
                         ws.onmessage = function(event) {
                             try {
                                 const message = JSON.parse(event.data);
-                                
                                 switch(message.type) {
                                     case 'frontend-reload':
-                                        // Agora pode recarregar mesmo com erro.
                                         handleFrontendReload(message.data);
                                         break;
                                     case 'backend-api-reload':
-                                        // Backend ainda precisa do callback (server-side). No client, fazemos reload por segurança.
                                         console.log('[vatts] Backend changed, reloading page...');
                                         window.location.reload();
                                         break;
@@ -484,8 +513,8 @@ class HotReloadManager {
                                         setTimeout(() => window.location.reload(), 500);
                                         break;
                                     case 'build-error':
+                                        console.log('Erro detectado')
                                         notifyHotReloadState('build-error', message.data);
-                                        // Em vez de só console.log, manda pro app renderizar UI.
                                         emitBuildError(message.data);
                                         break;
                                     case 'build-complete':
@@ -493,216 +522,263 @@ class HotReloadManager {
                                         clearBuildError();
                                         console.log('[vatts] Build complete');
                                         break;
-                                    case 'frontend-error':
-                                        console.error('[vatts] Frontend error:', message.data);
-                                        break;
-                                    case 'hmr-update':
-                                        handleHMRUpdate(message.data);
-                                        break;
                                 }
                             } catch (e) {
-                                console.error('[vatts] Erro ao processar mensagem do hot-reload:', e);
+                                console.error('[vatts] Error processing msg:', e);
                             }
                         };
                         
                         async function handleFrontendReload(data) {
-                            // sinaliza no DevIndicator que estamos processando reload
                             notifyHotReloadState('reloading', { type: 'frontend', data: data || null });
-
                             if (!data || !data.file) {
-                                // Sem info suficiente, tenta soft reload mesmo
-                                const event = new CustomEvent('hmr:component-update', { 
-                                    detail: { file: null, timestamp: Date.now() } 
-                                });
-                                window.dispatchEvent(event);
+                                window.dispatchEvent(new CustomEvent('hmr:component-update', { detail: { file: null, timestamp: Date.now() } }));
                                 return;
                             }
-                            
                             const file = (data.file || '').toLowerCase();
                             console.log('[vatts] Frontend changed:', data.file);
-                            
-                            // Mudanças que exigem reload completo
-                            const needsFullReload = 
-                                file.includes('layout.tsx') ||
-                                file.includes('not-found.tsx') ||
-                                file.endsWith('.css');
-                            
+                            const needsFullReload = file.includes('layout.tsx') || file.includes('not-found.tsx') || file.endsWith('.css');
                             if (needsFullReload) {
-                                console.log('[vatts] Layout/CSS changed, full reload...');
                                 notifyHotReloadState('full-reload', { reason: 'layout/css', file: data.file });
                                 window.location.reload();
                                 return;
                             }
 
-                            // Espera o bundle (main.js) ser atualizado/servido antes de disparar HMR.
-                            // Timeout curtinho pra não travar o dev flow.
+                            // Recarrega main.js (o bundle do app) com cache-busting.
+                            // Em DEV, React/ReactDOM agora são externos, então isso não duplica hooks.
                             await waitForMainToBeUpdated(5000, 120);
 
-                            // Dispara um soft reload (HMR via evento capturado pelo React)
-                            const ts = Date.now();
-                            const event = new CustomEvent('hmr:component-update', { 
-                                detail: { file: data.file, timestamp: ts } 
-                            });
-                            window.dispatchEvent(event);
+                            const script = document.querySelector('script[src*="main.js"]');
+                            if (script) {
+                                const mainUrl = (script.getAttribute('src') || script.src || '');
+                                const base = String(mainUrl).split('?')[0];
+
+                                // Remove scripts antigos de main.js para evitar múltiplas execuções do bundle
+                                try {
+                                    document.querySelectorAll('script[src*="main.js"]').forEach(s => {
+                                        if (s && s.parentNode) s.parentNode.removeChild(s);
+                                    });
+                                } catch {}
+
+                                const newScript = document.createElement('script');
+                                newScript.type = 'module';
+                                newScript.src = base + '?t=' + Date.now();
+
+                                newScript.onload = () => {
+                                    // depois de carregar o novo bundle, pede render/update
+                                    const ts = Date.now();
+                                    window.dispatchEvent(new CustomEvent('hmr:component-update', { detail: { file: data.file, timestamp: ts } }));
+                                    setTimeout(() => requestBuildStatus('after-frontend-reload'), 50);
+                                };
 
-                            // Após disparar o HMR, pede ao backend o status atual do build.
-                            // Isso garante que, se o código ainda estiver com erro, o modal reapareça/atualize.
-                            setTimeout(() => requestBuildStatus('after-frontend-reload'), 50);
+                                newScript.onerror = () => {
+                                    window.location.reload();
+                                };
+
+                                document.head.appendChild(newScript);
+                            } else {
+                                // fallback
+                                const ts = Date.now();
+                                window.dispatchEvent(new CustomEvent('hmr:component-update', { detail: { file: data.file, timestamp: ts } }));
+                                setTimeout(() => requestBuildStatus('after-frontend-reload'), 50);
+                            }
 
-                            // Se após um tempo o app não marcou sucesso, cai pro reload completo
                             setTimeout(() => {
-                                const hmrSuccess = window.__HMR_SUCCESS__;
-                                if (hmrSuccess) {
+                                if (window.__HMR_SUCCESS__) {
                                     notifyHotReloadState('idle', { success: true, file: data.file });
-                                    // Garante sincronização final do status
                                     requestBuildStatus('after-hmr-success');
                                     return;
                                 }
-
-                                console.log('[vatts] Soft reload failed, falling back to full reload');
-                                notifyHotReloadState('full-reload', { reason: 'hmr-failed', file: data.file });
+                 
                                 window.location.reload();
-                            }, 1200);
-                        }
-                        
-                        function handleHMRUpdate(data) {
-                            console.log('[vatts] HMR Update:', data);
-                            
-                            // Dispara evento customizado para o React capturar
-                            const event = new CustomEvent('hmr:update', { 
-                                detail: data 
-                            });
-                            window.dispatchEvent(event);
+                            }, 1600);
                         }
                         
                         ws.onclose = function(event) {
                             isConnected = false;
-                            
-                            // Não tenta reconectar se foi fechamento intencional
-                            if (event.code === 1000) {
-                                return;
-                            }
-                            
+                            if (event.code === 1000) return;
                             scheduleReconnect();
                         };
-                        
-                        ws.onerror = function(error) {
-                            isConnected = false;
-                            // Não loga erros de conexão para evitar spam no console
-                        };
-                        
-                    } catch (error) {
-                        console.error('[vatts] Error creating WebSocket:', error);
-                        scheduleReconnect();
-                    }
+                        ws.onerror = function() {};
+                    } catch (error) { scheduleReconnect(); }
                 }
                 
                 function scheduleReconnect() {
-                    if (reconnectTimer) {
-                        clearTimeout(reconnectTimer);
-                    }
-                    
+                    if (reconnectTimer) clearTimeout(reconnectTimer);
                     reconnectAttempts++;
-                    
-                    // Exponential backoff com jitter
                     const baseInterval = Math.min(reconnectInterval * Math.pow(1.5, reconnectAttempts - 1), maxReconnectInterval);
-                    const jitter = Math.random() * 1000; // Adiciona até 1 segundo de variação
-                    const finalInterval = baseInterval + jitter;
-                    
-                    reconnectTimer = setTimeout(() => {
-                        if (!isConnected) {
-                            connect();
-                        }
-                    }, finalInterval);
+                    reconnectTimer = setTimeout(() => { if (!isConnected) connect(); }, baseInterval + Math.random() * 1000);
                 }
                 
-                // Detecta quando a página está sendo fechada para evitar reconexões desnecessárias
-                window.addEventListener('beforeunload', function() {
-                    if (ws && ws.readyState === WebSocket.OPEN) {
-                        ws.close(1000, 'Page unloading');
-                    }
-                    clearTimeout(reconnectTimer);
-                });
-                
-                // Detecta quando a aba fica visível novamente para reconectar se necessário
-                document.addEventListener('visibilitychange', function() {
-                    if (!document.hidden && !isConnected) {
-                        reconnectAttempts = 0; // Reset do contador quando a aba fica ativa
-                        connect();
-                    }
-                });
-                
+                window.addEventListener('beforeunload', function() { if (ws && ws.readyState === WebSocket.OPEN) ws.close(1000, 'Page unloading'); });
+                document.addEventListener('visibilitychange', function() { if (!document.hidden && !isConnected) { reconnectAttempts = 0; connect(); } });
                 connect();
             }
         })();
         </script>
         `;
     }
+    // Mantendo métodos de cache iguais
     clearBackendCache(filePath) {
         const absolutePath = path.resolve(filePath);
         delete require.cache[absolutePath];
-        // Limpa dependências relacionadas de forma mais eficiente
         const dirname = path.dirname(absolutePath);
         Object.keys(require.cache).forEach(key => {
-            if (key.startsWith(dirname)) {
+            if (key.startsWith(dirname))
                 delete require.cache[key];
-            }
         });
     }
-    onBackendApiChange(callback) {
-        this.backendApiChangeCallback = callback;
-    }
-    onFrontendChange(callback) {
-        this.frontendChangeCallback = callback;
-    }
+    onBackendApiChange(callback) { this.backendApiChangeCallback = callback; }
+    onFrontendChange(callback) { this.frontendChangeCallback = callback; }
     setHotReloadListener(listener) {
         this.customHotReloadListener = listener;
-        console_1.default.info('🔌 Hot reload custom listener registered');
+        console_1.default.info('Hot reload custom listener registered');
     }
-    removeHotReloadListener() {
-        this.customHotReloadListener = null;
+    removeHotReloadListener() { this.customHotReloadListener = null; }
+    traceBuildComplete(success, error) {
+        try {
+            const now = Date.now();
+            // Rate limit pra não floodar o console
+            if (now - this.lastBuildCompleteTraceAt < 500)
+                return;
+            this.lastBuildCompleteTraceAt = now;
+        }
+        catch {
+            // noop
+        }
     }
     onBuildComplete(success, error) {
+        // DEBUG stack
+        this.traceBuildComplete(success, error);
+        const activeManager = global[GLOBAL_ACTIVE_MANAGER_KEY];
+        if (activeManager && activeManager !== this) {
+            activeManager.onBuildComplete(success, error);
+            return;
+        }
         if (this.buildCompleteResolve) {
             this.buildCompleteResolve();
             this.buildCompleteResolve = null;
         }
         this.isBuilding = false;
+        const currentState = this.buildState;
+        const buildId = typeof error?.buildId === 'number' ? error.buildId : undefined;
         if (success) {
-            this.lastBuildError = null;
-        }
-        else {
-            this.lastBuildError = error || { message: 'Build failed', ts: Date.now() };
-        }
-        // Notifica os clientes que o build terminou
-        if (success) {
-            this.notifyClients('build-complete', { success: true });
-        }
-        else {
-            this.notifyClients('build-error', this.lastBuildError);
+            // Não confia no bundler. Antes de ficar "verde", roda typecheck real.
+            const tc = this.typecheckFrontend();
+            if (!tc.ok) {
+                // Se já existe um erro de bundler (esbuild/rollup) mais específico, preserva ele.
+                // O typecheck serve como "gate" para não ficar verde, mas não deve piorar a mensagem.
+                const existing = currentState.frontend;
+                const shouldKeepExistingBundlerError = existing &&
+                    typeof existing?.message === 'string' &&
+                    (existing.message.includes('Transform failed') || existing.message.includes('Expected') || existing.message.includes('esbuild'));
+                this.buildState = {
+                    ...currentState,
+                    frontend: shouldKeepExistingBundlerError ? existing : (tc.error ?? existing)
+                };
+                this.notifyStatusChange();
+                return;
+            }
+            // Proteção: não deixa um success antigo limpar um erro mais novo
+            if (buildId !== undefined && buildId < this.lastFrontendErrorBuildId) {
+                this.buildState = { ...currentState };
+                this.notifyStatusChange();
+                return;
+            }
+            this.buildState = { ...currentState, frontend: null, backend: null };
+            this.notifyStatusChange();
+            return;
         }
+        // error
+        const errData = error || { message: 'Build failed', ts: Date.now() };
+        if (buildId !== undefined)
+            this.lastFrontendErrorBuildId = Math.max(this.lastFrontendErrorBuildId, buildId);
+        this.buildState = { ...currentState, frontend: errData };
+        // Notifica baseado no estado combinado (Frontend + Backend)
+        this.notifyStatusChange();
     }
     stop() {
         this.isShuttingDown = true;
-        // Limpa todos os debounce timers
         this.debounceTimers.forEach(timer => clearTimeout(timer));
         this.debounceTimers.clear();
-        // Para todos os watchers
         this.watchers.forEach(watcher => watcher.close());
         this.watchers = [];
-        // Limpa todos os clientes
         this.clients.forEach((client, ws) => {
             clearInterval(client.pingTimer);
-            if (ws.readyState === ws_1.WebSocket.OPEN) {
+            if (ws.readyState === ws_1.WebSocket.OPEN)
                 ws.close();
-            }
         });
         this.clients.clear();
-        // Fecha WebSocket server
         if (this.wss) {
             this.wss.close();
             this.wss = null;
         }
     }
+    typecheckFrontend() {
+        try {
+            const now = Date.now();
+            if (this.lastTypecheckResult && now - this.lastTypecheckAt < 750)
+                return this.lastTypecheckResult;
+            const projectDir = this.projectDir;
+            const configPath = typescript_1.default.findConfigFile(projectDir, typescript_1.default.sys.fileExists, 'tsconfig.json');
+            if (!configPath) {
+                this.lastTypecheckAt = now;
+                this.lastTypecheckResult = { ok: true };
+                return this.lastTypecheckResult;
+            }
+            const configFile = typescript_1.default.readConfigFile(configPath, typescript_1.default.sys.readFile);
+            if (configFile.error) {
+                const msg = typescript_1.default.flattenDiagnosticMessageText(configFile.error.messageText, '\n');
+                const err = { message: `tsconfig read error: ${msg}`, type: 'TypeScriptConfigError', ts: Date.now() };
+                this.lastTypecheckAt = now;
+                this.lastTypecheckResult = { ok: false, error: err };
+                return this.lastTypecheckResult;
+            }
+            const parsed = typescript_1.default.parseJsonConfigFileContent(configFile.config, typescript_1.default.sys, path.dirname(configPath));
+            const options = { ...parsed.options, noEmit: true };
+            const rootNames = parsed.fileNames;
+            const webRoot = path.resolve(projectDir, 'src', 'web') + path.sep;
+            const filteredRoots = rootNames.filter(f => f.startsWith(webRoot));
+            const program = typescript_1.default.createProgram(filteredRoots.length ? filteredRoots : rootNames, options);
+            const diagnostics = typescript_1.default.getPreEmitDiagnostics(program);
+            if (!diagnostics.length) {
+                this.lastTypecheckAt = now;
+                this.lastTypecheckResult = { ok: true };
+                return this.lastTypecheckResult;
+            }
+            const first = diagnostics[0];
+            const message = typescript_1.default.flattenDiagnosticMessageText(first.messageText, '\n');
+            const code = typeof first.code === 'number' ? `TS${first.code}` : undefined;
+            const loc = first.file && typeof first.start === 'number'
+                ? (() => {
+                    const pos = first.file.getLineAndCharacterOfPosition(first.start);
+                    return { file: first.file.fileName, line: pos.line + 1, column: pos.character + 1 };
+                })()
+                : undefined;
+            const lines = [];
+            lines.push(`TypeScript check failed${code ? ` (${code})` : ''}: ${message}`);
+            if (loc?.file)
+                lines.push(`at ${loc.file}:${loc.line}:${loc.column}`);
+            // stack sintético só pra debug (sem poluir com stack interna do TS)
+            const syntheticStack = ['Error: ' + lines[0], ...(loc?.file ? [lines[1]] : [])].join('\n');
+            const err = {
+                message: lines[0],
+                type: 'TypeScriptError',
+                code,
+                loc,
+                // compat: alguns overlays procuram stack
+                stack: syntheticStack,
+                ts: Date.now()
+            };
+            this.lastTypecheckAt = now;
+            this.lastTypecheckResult = { ok: false, error: err };
+            return this.lastTypecheckResult;
+        }
+        catch (e) {
+            const err = { message: e?.message || 'TypeScript check failed', stack: e?.stack, type: 'TypeScriptError', ts: Date.now() };
+            this.lastTypecheckAt = Date.now();
+            this.lastTypecheckResult = { ok: false, error: err };
+            return this.lastTypecheckResult;
+        }
+    }
 }
 exports.HotReloadManager = HotReloadManager;