hightjs 0.3.3 → 0.3.5

package/src/client/entry.client.tsx

@@ -153,6 +153,7 @@ const DEV_INDICATOR_CORNERS = [
 function DevIndicator() {
     const [corner, setCorner] = useState(3); // Canto atual (0-3)
     const [isDragging, setIsDragging] = useState(false); // Estado de arrastar
+    const [isBuilding, setIsBuilding] = useState(false); // Estado de build
 
     // Posição visual do indicador durante o arraste
     const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
@@ -160,6 +161,49 @@ function DevIndicator() {
     const indicatorRef = useRef<HTMLDivElement>(null);
     const dragStartRef = useRef<{ x: number; y: number; moved: boolean } | null>(null);
 
+    // Escuta eventos de hot reload para mostrar estado de build
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        const handleHotReloadMessage = (event: MessageEvent) => {
+            try {
+                const message = JSON.parse(event.data);
+
+                // Quando detecta mudança em arquivo, ativa loading
+                if (message.type === 'frontend-reload' ||
+                    message.type === 'backend-api-reload' ||
+                    message.type === 'src-reload') {
+                    setIsBuilding(true);
+                }
+
+                // Quando o build termina ou servidor fica pronto, desativa loading
+                if (message.type === 'server-ready' || message.type === 'build-complete') {
+                    setIsBuilding(false);
+                }
+            } catch (e) {
+                // Ignora mensagens que não são JSON
+            }
+        };
+
+        // Intercepta mensagens WebSocket
+        const originalWebSocket = window.WebSocket;
+        window.WebSocket = class extends originalWebSocket {
+            constructor(url: string | URL, protocols?: string | string[]) {
+                super(url, protocols);
+
+                this.addEventListener('message', (event) => {
+                    if (url.toString().includes('hweb-hotreload')) {
+                        handleHotReloadMessage(event);
+                    }
+                });
+            }
+        } as any;
+
+        return () => {
+            window.WebSocket = originalWebSocket;
+        };
+    }, []);
+
     // --- Estilos Dinâmicos ---
     const getIndicatorStyle = (): React.CSSProperties => {
         const baseStyle: React.CSSProperties = {
@@ -168,17 +212,22 @@ function DevIndicator() {
             width: DEV_INDICATOR_SIZE,
             height: DEV_INDICATOR_SIZE,
             borderRadius: '50%',
-            background: 'linear-gradient(135deg, #8e2de2, #4a00e0)', // Gradiente Roxo
+            background: isBuilding
+                ? 'linear-gradient(135deg, #f093fb, #f5576c)' // Gradiente Rosa/Vermelho quando building
+                : 'linear-gradient(135deg, #8e2de2, #4a00e0)', // Gradiente Roxo normal
             color: 'white',
             fontWeight: 'bold',
             fontSize: 28,
-            boxShadow: '0 4px 15px rgba(0,0,0,0.2)',
+            boxShadow: isBuilding
+                ? '0 4px 25px rgba(245, 87, 108, 0.6)' // Shadow mais forte quando building
+                : '0 4px 15px rgba(0,0,0,0.2)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             cursor: isDragging ? 'grabbing' : 'grab',
             userSelect: 'none',
-            transition: isDragging ? 'none' : 'all 0.3s ease-out', // Animação suave ao soltar
+            transition: isDragging ? 'none' : 'all 0.3s ease-out',
+            animation: isBuilding ? 'hweb-pulse 1.5s ease-in-out infinite' : 'none',
         };
 
         if (isDragging) {
@@ -272,19 +321,85 @@ function DevIndicator() {
 
 
     return (
-        <div ref={indicatorRef} style={getIndicatorStyle()} onMouseDown={handleMouseDown} title="Modo Dev HightJS">
-            H
-        </div>
+        <>
+            <style>
+                {`
+                    @keyframes hweb-pulse {
+                        0%, 100% {
+                            transform: scale(1);
+                            opacity: 1;
+                        }
+                        50% {
+                            transform: scale(1.1);
+                            opacity: 0.8;
+                        }
+                    }
+                    
+                    @keyframes hweb-spin {
+                        from {
+                            transform: rotate(0deg);
+                        }
+                        to {
+                            transform: rotate(360deg);
+                        }
+                    }
+                `}
+            </style>
+            <div
+                ref={indicatorRef}
+                style={getIndicatorStyle()}
+                onMouseDown={handleMouseDown}
+                title={isBuilding ? "Building..." : "Modo Dev HightJS"}
+            >
+                {isBuilding ? (
+                    <span style={{ animation: 'hweb-spin 1s linear infinite' }}>⟳</span>
+                ) : (
+                    'H'
+                )}
+            </div>
+        </>
     );
 }
 
 // --- Inicialização do Cliente (CSR - Client-Side Rendering) ---
 
+function deobfuscateData(obfuscated: string): any {
+    try {
+        // Remove o hash fake
+        const parts = obfuscated.split('.');
+        const base64 = parts.length > 1 ? parts[1] : parts[0];
+
+        // Decodifica base64
+        const jsonStr = atob(base64);
+
+        // Parse JSON
+        return JSON.parse(jsonStr);
+    } catch (error) {
+        console.error('[hweb] Failed to decode data:', error);
+        return null;
+    }
+}
+
 function initializeClient() {
-    const initialData = (window as any).__HWEB_INITIAL_DATA__;
+    // Lê os dados do atributo data-h
+    const dataElement = document.getElementById('__hight_data__');
+
+    if (!dataElement) {
+        console.error('[hweb] Initial data script not found.');
+        return;
+    }
+
+    const obfuscated = dataElement.getAttribute('data-h');
+
+    if (!obfuscated) {
+        console.error('[hweb] Data attribute not found.');
+        return;
+    }
+
+    const initialData = deobfuscateData(obfuscated);
 
     if (!initialData) {
-        console.error('[hweb] Dados iniciais não encontrados na página.');
+        console.error('[hweb] Failed to parse initial data.');
         return;
     }
 
@@ -298,7 +413,7 @@ function initializeClient() {
 
     const container = document.getElementById('root');
     if (!container) {
-        console.error('[hweb] Container #root não encontrado.');
+        console.error('[hweb] Container #root not found.');
         return;
     }
 
@@ -316,7 +431,7 @@ function initializeClient() {
             />
         );
     } catch (error) {
-        console.error('[hweb] Erro ao renderizar aplicação:', error);
+        console.error('[hweb] Error rendering application:', error);
     }
 }
 

package/src/helpers.ts

@@ -1,3 +1,5 @@
+#!/usr/bin/env node
+
 /*
  * This file is part of the HightJS Project.
  * Copyright (c) 2025 itsmuzin
@@ -19,9 +21,10 @@
 import http, {IncomingMessage, Server, ServerResponse} from 'http';
 import os from 'os';
 import {URLSearchParams} from 'url'; // API moderna, substitui 'querystring'
+import path from 'path';
 // Helpers para integração com diferentes frameworks
 import hweb, {FrameworkAdapterFactory} from './index'; // Importando o tipo
-import type {HightJSOptions} from './types';
+import type {HightJSOptions, HightConfig, HightConfigFunction} from './types';
 import Console, {Colors} from "./api/console";
 import https, { Server as HttpsServer } from 'https'; // <-- ADICIONAR
 import fs from 'fs'; // <-- ADICIONAR
@@ -66,7 +69,7 @@ function getLocalExternalIp(): string {
 }
 
 const sendBox = (options: HightJSOptions) => {
-    const isDev = options.dev ? "Rodando em modo de desenvolvimento" : null;
+    const isDev = options.dev ? "Running in development mode" : null;
 
     // 1. Verifica se o SSL está ativado (baseado na mesma lógica do initNativeServer)
     const isSSL = options.ssl && options.ssl.key && options.ssl.cert;
@@ -75,12 +78,12 @@ const sendBox = (options: HightJSOptions) => {
 
     // 2. Monta as mensagens com o protocolo correto
     const messages = [
-        ` ${Colors.FgGray}┃${Colors.Reset} Local: ${Colors.FgGreen}${protocol}://localhost:${options.port}${Colors.Reset}`,
+        ` ${Colors.FgGray}┃${Colors.Reset} Local:    ${Colors.FgGreen}${protocol}://localhost:${options.port}${Colors.Reset}`,
     ];
 
     // Só adiciona a rede se o IP local for encontrado
     if (localIp) {
-        messages.push(` ${Colors.FgGray}┃${Colors.Reset} Rede:  ${Colors.FgGreen}${protocol}://${localIp}:${options.port}${Colors.Reset}`);
+        messages.push(` ${Colors.FgGray}┃${Colors.Reset} Network:  ${Colors.FgGreen}${protocol}://${localIp}:${options.port}${Colors.Reset}`);
     }
 
     if (isDev) {
@@ -89,10 +92,79 @@ const sendBox = (options: HightJSOptions) => {
 
     // Adiciona aviso de redirecionamento se estiver em modo SSL
     if (isSSL && options.ssl?.redirectPort) {
-        messages.push(` ${Colors.FgGray}┃${Colors.Reset} HTTP (porta ${options.ssl?.redirectPort}) está redirecionando para HTTPS.`);
+        messages.push(` ${Colors.FgGray}┃${Colors.Reset} HTTP (port ${options.ssl?.redirectPort}) is redirecting to HTTPS.`);
     }
 
-    Console.box(messages.join("\n"), { title: "Acesse em:" });
+    Console.box(messages.join("\n"), { title: "Access on:" });
+}
+
+/**
+ * Carrega o arquivo de configuração hightjs.config.ts ou hightjs.config.js do projeto
+ * @param projectDir Diretório raiz do projeto
+ * @param phase Fase de execução ('development' ou 'production')
+ * @returns Configuração mesclada com os valores padrão
+ */
+async function loadHightConfig(projectDir: string, phase: string): Promise<HightConfig> {
+    const defaultConfig: HightConfig = {
+        maxHeadersCount: 100,
+        headersTimeout: 60000,
+        requestTimeout: 30000,
+        serverTimeout: 35000,
+        individualRequestTimeout: 30000,
+        maxUrlLength: 2048,
+        accessLogging: true,
+    };
+
+    try {
+        // Tenta primeiro .ts, depois .js
+        const possiblePaths = [
+            path.join(projectDir, 'hightjs.config.ts'),
+            path.join(projectDir, 'hightjs.config.js'),
+        ];
+
+        let configPath: string | null = null;
+        for (const p of possiblePaths) {
+            if (fs.existsSync(p)) {
+                configPath = p;
+                break;
+            }
+        }
+
+        if (!configPath) {
+            return defaultConfig;
+        }
+
+        // Remove do cache para permitir hot reload da configuração em dev
+        delete require.cache[require.resolve(configPath)];
+
+        const configModule = require(configPath);
+        const configExport = configModule.default || configModule;
+
+        let userConfig: HightConfig;
+
+        if (typeof configExport === 'function') {
+            // Suporta tanto função síncrona quanto assíncrona
+            userConfig = await Promise.resolve(
+                (configExport as HightConfigFunction)(phase, { defaultConfig })
+            );
+        } else {
+            userConfig = configExport;
+        }
+
+        // Mescla a configuração do usuário com a padrão
+        const mergedConfig = { ...defaultConfig, ...userConfig };
+
+        const configFileName = path.basename(configPath);
+        Console.info(`${Colors.FgCyan}[Config]${Colors.Reset} Loaded ${configFileName}`);
+
+        return mergedConfig;
+    } catch (error) {
+        if (error instanceof Error) {
+            Console.warn(`${Colors.FgYellow}[Config]${Colors.Reset} Error loading hightjs.config: ${error.message}`);
+            Console.warn(`${Colors.FgYellow}[Config]${Colors.Reset} Using default configuration`);
+        }
+        return defaultConfig;
+    }
 }
 
 /**
@@ -181,13 +253,23 @@ async function initNativeServer(hwebApp: HWebApp, options: HightJSOptions, port:
     const time = Date.now();
 
     await hwebApp.prepare();
+
+    // Carrega a configuração do arquivo hightjs.config.js
+    const projectDir = options.dir || process.cwd();
+    const phase = options.dev ? 'development' : 'production';
+    const hightConfig = await loadHightConfig(projectDir, phase);
+
     const handler = hwebApp.getRequestHandler();
-    const msg = Console.dynamicLine(`    ${Colors.BgYellow} ready ${Colors.Reset}  ${Colors.Bright}Iniciando HightJS na porta ${options.port}${Colors.Reset}`);
+    const msg = Console.dynamicLine(`    ${Colors.BgYellow} ready ${Colors.Reset}  ${Colors.Bright}Starting HightJS on port ${options.port}${Colors.Reset}`);
 
     // --- LÓGICA DO LISTENER (REUTILIZÁVEL) ---
     // Extraímos a lógica principal para uma variável
     // para que possa ser usada tanto pelo servidor HTTP quanto HTTPS.
     const requestListener = async (req: HWebIncomingMessage, res: ServerResponse) => {
+        const requestStartTime = Date.now();
+        const method = req.method || 'GET';
+        const url = req.url || '/';
+
         // Configurações de segurança básicas
         res.setHeader('X-Content-Type-Options', 'nosniff');
         res.setHeader('X-Frame-Options', 'DENY');
@@ -200,16 +282,50 @@ async function initNativeServer(hwebApp: HWebApp, options: HightJSOptions, port:
             res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');
         }
 
-        // Timeout por requisição
-        req.setTimeout(30000, () => {
+        // Timeout por requisição (usa configuração personalizada)
+        req.setTimeout(hightConfig.individualRequestTimeout || 30000, () => {
             res.statusCode = 408; // Request Timeout
             res.end('Request timeout');
+
+            // Log de timeout
+            if (hightConfig.accessLogging) {
+                const duration = Date.now() - requestStartTime;
+                Console.info(`${Colors.FgYellow}${method}${Colors.Reset} ${url} ${Colors.FgRed}408${Colors.Reset} ${Colors.FgGray}${duration}ms${Colors.Reset}`);
+            }
         });
 
+        // Intercepta o método end() para logar quando a resposta for enviada
+        const originalEnd = res.end.bind(res);
+        let hasEnded = false;
+
+        res.end = function(this: ServerResponse, ...args: any[]): any {
+            if (!hasEnded && hightConfig.accessLogging) {
+                hasEnded = true;
+                const duration = Date.now() - requestStartTime;
+                const statusCode = res.statusCode || 200;
+
+                // Define cor baseada no status code
+                let statusColor = Colors.FgGreen; // 2xx
+                if (statusCode >= 500) statusColor = Colors.FgRed; // 5xx
+                else if (statusCode >= 400) statusColor = Colors.FgYellow; // 4xx
+                else if (statusCode >= 300) statusColor = Colors.FgCyan; // 3xx
+
+                // Formata o método com cor
+                let methodColor = Colors.BgCyan;
+                if (method === 'POST') methodColor = Colors.BgGreen;
+                else if (method === 'PUT') methodColor = Colors.BgYellow;
+                else if (method === 'DELETE') methodColor = Colors.BgRed;
+                else if (method === 'PATCH') methodColor = Colors.BgMagenta;
+                Console.logCustomLevel(method, true, methodColor, `${url} ${statusColor}${statusCode}${Colors.Reset} ${Colors.FgGray}${duration}ms${Colors.Reset}`);
+            }
+            // @ts-ignore
+            return originalEnd.apply(this, args);
+        } as any;
+
         try {
-            // Validação básica de URL
-            const url = req.url || '/';
-            if (url.length > 2048) {
+            // Validação básica de URL (usa configuração personalizada)
+            const maxUrlLength = hightConfig.maxUrlLength || 2048;
+            if (url.length > maxUrlLength) {
                 res.statusCode = 414; // URI Too Long
                 res.end('URL too long');
                 return;
@@ -227,9 +343,9 @@ async function initNativeServer(hwebApp: HWebApp, options: HightJSOptions, port:
         } catch (error) {
             // Log do erro no servidor
             if (error instanceof Error) {
-                Console.error(`Erro no servidor nativo: ${error.message}`);
+                Console.error(`Native server error: ${error.message}`);
             } else {
-                Console.error('Erro desconhecido no servidor nativo:', error);
+                Console.error('Unknown native server error:', error);
             }
 
             // Tratamento de erro (idêntico ao seu original)
@@ -297,15 +413,15 @@ async function initNativeServer(hwebApp: HWebApp, options: HightJSOptions, port:
         server = http.createServer(requestListener as any); // (any para contornar HWebIncomingMessage)
     }
 
-    // Configurações de segurança do servidor (Comum a ambos)
-    server.setTimeout(35000); // Timeout geral do servidor
-    server.maxHeadersCount = 100; // Limita número de headers
-    server.headersTimeout = 60000; // Timeout para headers
-    server.requestTimeout = 30000; // Timeout para requisições
+    // Configurações de segurança do servidor (usa configuração personalizada)
+    server.setTimeout(hightConfig.serverTimeout || 35000); // Timeout geral do servidor
+    server.maxHeadersCount = hightConfig.maxHeadersCount || 100; // Limita número de headers
+    server.headersTimeout = hightConfig.headersTimeout || 60000; // Timeout para headers
+    server.requestTimeout = hightConfig.requestTimeout || 30000; // Timeout para requisições
 
     server.listen(port, hostname, () => {
         sendBox({ ...options, port });
-        msg.end(`  ${Colors.BgGreen} ready ${Colors.Reset}    ${Colors.Bright}Pronto na porta ${Colors.BgGreen} ${options.port} ${Colors.Reset}${Colors.Bright} em ${Date.now() - time}ms${Colors.Reset}\n`);
+        msg.end(`  ${Colors.BgGreen} ready ${Colors.Reset}    ${Colors.Bright}Ready on port ${Colors.BgGreen} ${options.port} ${Colors.Reset}${Colors.Bright} in ${Date.now() - time}ms${Colors.Reset}\n`);
     });
 
     // Configura WebSocket para hot reload (Comum a ambos)
@@ -344,7 +460,7 @@ export function app(options: HightJSOptions = {}) {
                     const cookieParser = require('cookie-parser');
                     serverApp.use(cookieParser());
                 } catch (e) {
-                    Console.error("Não foi possivel achar cookie-parser");
+                    Console.error("Could not find cookie-parser");
                 }
                 serverApp.use(express.json());
                 serverApp.use(express.urlencoded({ extended: true }));
@@ -355,12 +471,12 @@ export function app(options: HightJSOptions = {}) {
                 try {
                     await serverApp.register(require('@fastify/cookie'));
                 } catch (e) {
-                    Console.error("Não foi possivel achar @fastify/cookie");
+                    Console.error("Could not find @fastify/cookie");
                 }
                 try {
                     await serverApp.register(require('@fastify/formbody'));
                 } catch (e) {
-                    Console.error("Não foi possivel achar @fastify/formbody");
+                    Console.error("Could not find @fastify/formbody");
                 }
                 await serverApp.register(async (fastify: any) => {
                     fastify.all('*', handler);
@@ -390,7 +506,7 @@ export function app(options: HightJSOptions = {}) {
                     const data = await response.json();
                     return data.version;
                 } catch (error) {
-                    Console.error('Não foi possível verificar a versão mais recente do HightJS:', error);
+                    Console.error('Could not check for the latest HightJS version:', error);
                     return currentVersion; // Retorna a versão atual em caso de erro
                 }
             }
@@ -398,23 +514,21 @@ export function app(options: HightJSOptions = {}) {
             const isUpToDate = latestVersion === currentVersion;
             let message;
             if (!isUpToDate) {
-                message = `${Colors.FgGreen}   Há uma nova versão disponível (v${latestVersion})${Colors.FgMagenta}`
+                message = `${Colors.FgGreen}   A new version is available (v${latestVersion})${Colors.FgMagenta}`
             } else {
-                message = `${Colors.FgGreen}   Você está na versão mais recente${Colors.FgMagenta}`
+                message = `${Colors.FgGreen}   You are on the latest version${Colors.FgMagenta}`
             }
             console.log(`${Colors.FgMagenta}
             __       ___ ${Colors.FgGreen}      __  ${Colors.FgMagenta}
     |__| | / _\` |__|  |  ${Colors.FgGreen}   | /__\` ${Colors.FgMagenta}   ${Colors.FgMagenta}HightJS ${Colors.FgGray}(v${require('../package.json').version}) - itsmuzin${Colors.FgMagenta}
-    |  | | \\__> |  |  |  ${Colors.FgGreen}\\__/ .__/ ${message}
-                               
-                               
+    |  | | \\__> |  |  |  ${Colors.FgGreen}\\__/ .__/ ${message}        
               ${Colors.Reset}`);
 
             const actualPort = options.port || 3000;
             const actualHostname = options.hostname || "0.0.0.0";
 
             if (framework !== 'native') {
-                Console.warn(`O framework "${framework}" foi selecionado, mas o método init() só funciona com o framework "native". Iniciando servidor nativo...`);
+                Console.warn(`The "${framework}" framework was selected, but the init() method only works with the "native" framework. Starting native server...`);
             }
 
 

package/src/hotReload.ts

@@ -204,7 +204,7 @@ export class HotReloadManager {
 
         // Se for arquivo de frontend, aguarda o build terminar antes de recarregar
         if (isFrontendFile) {
-            Console.logWithout(Levels.INFO, Colors.BgRed,`📄 Aguardando build do frontend...`);
+            Console.logWithout(Levels.INFO, Colors.BgRed,`📄 Waiting for frontend build...`);
 
             // Marca que estamos esperando um build
             this.isBuilding = true;
@@ -221,11 +221,11 @@ export class HotReloadManager {
 
             try {
                 await Promise.race([buildPromise, timeoutPromise]);
-                Console.logWithout(Levels.INFO, Colors.BgRed,`✅ Build concluído, recarregando frontend...`);
+                Console.logWithout(Levels.INFO, Colors.BgRed,`✅ Build complete, reloading frontend...`);
                 this.frontendChangeCallback?.();
                 this.notifyClients('frontend-reload', { file: filePath, event: 'change' });
             } catch (error) {
-                Console.logWithout(Levels.ERROR, Colors.BgRed,`⚠️ Timeout no build, recarregando mesmo assim...`);
+                Console.logWithout(Levels.ERROR, Colors.BgRed,`⚠️ Timeout in build, reloading anyway...`);
                 this.frontendChangeCallback?.();
                 this.notifyClients('frontend-reload', { file: filePath, event: 'change' });
             } finally {
@@ -236,14 +236,14 @@ export class HotReloadManager {
 
         // Se for arquivo de backend, recarrega o módulo e notifica
         if (isBackendFile) {
-            Console.logWithout(Levels.INFO, Colors.BgRed,`⚙️ Recarregando backend...`);
+            Console.logWithout(Levels.INFO, Colors.BgRed,`⚙️ Reloading backend...`);
             this.backendApiChangeCallback?.();
             this.notifyClients('backend-api-reload', { file: filePath, event: 'change' });
         }
 
         // Fallback: se não for nem frontend nem backend detectado, recarrega tudo
         if (!isFrontendFile && !isBackendFile) {
-            Console.logWithout(Levels.INFO, Colors.BgRed,`🔄 Recarregando aplicação...`);
+            Console.logWithout(Levels.INFO, Colors.BgRed,`🔄 Reloading application...`);
             this.frontendChangeCallback?.();
             this.backendApiChangeCallback?.();
             this.notifyClients('src-reload', { file: filePath, event: 'change' });
@@ -255,7 +255,7 @@ export class HotReloadManager {
                 await this.customHotReloadListener(filePath);
             } catch (error) {
                 // @ts-ignore
-                Console.logWithout(Levels.ERROR, `Erro no listener customizado: ${error.message}`);
+                Console.logWithout(Levels.ERROR, `Error in custom listener: ${error.message}`);
             }
         }
     }
@@ -273,7 +273,7 @@ export class HotReloadManager {
                 try {
                     ws.send(message);
                 } catch (error) {
-                    Console.logWithout(Levels.ERROR, Colors.BgRed, `Erro ao enviar mensagem WebSocket: ${error}`);
+                    Console.logWithout(Levels.ERROR, Colors.BgRed, `Error sending WebSocket message: ${error}`);
                     deadClients.push(ws);
                 }
             } else {
@@ -327,22 +327,24 @@ export class HotReloadManager {
             if (typeof window !== 'undefined') {
                 let ws;
                 let reconnectAttempts = 0;
-                let maxReconnectInterval = 30000; // 30 segundos max
-                let reconnectInterval = 1000; // Começa com 1 segundo
+                let maxReconnectInterval = 30000; 
+                let reconnectInterval = 1000;
                 let reconnectTimer;
                 let isConnected = false;
                 
                 function connect() {
-                    // Evita múltiplas tentativas simultâneas
+                    const url = window.location; // Objeto com info da URL atual
+                    const protocol = url.protocol === "https:" ? "wss:" : "ws:"; // Usa wss se for https
+                    const wsUrl = protocol + '//' + url.host + '/hweb-hotreload/';
                     if (ws && (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)) {
                         return;
                     }
 
                     try {
-                        ws = new WebSocket('ws://localhost:3000/hweb-hotreload/');
+                        ws = new WebSocket(wsUrl);
                         
                         ws.onopen = function() {
-                            console.log('🔌 Hot-reload conectado');
+                            console.log('🔌 Hot-reload connected');
                             isConnected = true;
                             reconnectAttempts = 0;
                             reconnectInterval = 1000;
@@ -362,13 +364,13 @@ export class HotReloadManager {
                                         window.location.reload();
                                         break;
                                     case 'server-restart':
-                                        console.log('🔄 Servidor reiniciando...');
+                                        console.log('🔄 Server restarting...');
                                         break;
                                     case 'server-ready':
                                         setTimeout(() => window.location.reload(), 500);
                                         break;
                                     case 'frontend-error':
-                                        console.error('❌ Erro no frontend:', message.data);
+                                        console.error('❌ Frontend error:', message.data);
                                         break;
                                 }
                             } catch (e) {
@@ -393,7 +395,7 @@ export class HotReloadManager {
                         };
                         
                     } catch (error) {
-                        console.error('Erro ao criar WebSocket:', error);
+                        console.error('Error creating WebSocket:', error);
                         scheduleReconnect();
                     }
                 }
@@ -463,7 +465,7 @@ export class HotReloadManager {
 
     setHotReloadListener(listener: (file: string) => Promise<void> | void) {
         this.customHotReloadListener = listener;
-        Console.info('🔌 Hot reload listener customizado registrado');
+        Console.info('🔌 Hot reload custom listener registered');
     }
 
     removeHotReloadListener() {
@@ -476,5 +478,12 @@ export class HotReloadManager {
             this.buildCompleteResolve = null;
         }
         this.isBuilding = false;
+
+        // Notifica os clientes que o build terminou
+        if (success) {
+            this.notifyClients('build-complete', { success: true });
+        } else {
+            this.notifyClients('build-error', { success: false });
+        }
     }
 }