hightjs 0.3.4 → 0.4.0

package/example/src/web/routes/login.tsx

@@ -1,154 +1,9 @@
 import {RouteConfig, router} from "hightjs/client";
 import {GuestOnly, useSession} from "hightjs/auth/react"
 import React, {useState} from "react";
+import LoginPage from "../components/LoginPage";
 
 
-function LoginPage() {
-    const [username, setUsername] = useState("");
-    const [password, setPassword] = useState("");
-    const [isLoading, setIsLoading] = useState(false);
-    const {signIn} = useSession();
-
-    const [error, setError] = useState<string | null>(null);
-
-    const handleLogin = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setIsLoading(true);
-        setError(null);
-
-        try {
-            const result = await signIn('credentials', {
-                redirect: false,
-                username: username,
-                password: password,
-                callbackUrl: '/'
-            });
-            console.log(result)
-            if (!result || result.error) {
-                setError('Credenciais inválidas. Verifique seus dados e senha.');
-                setIsLoading(false);
-                return;
-            }
-            router.push("/")
-
-        } catch (err) {
-            setError('Ocorreu um erro inesperado. Tente novamente.');
-            setIsLoading(false);
-        }
-
-    };
-
-    return (
-        <div className="font-sans min-h-screen flex items-center justify-center p-8 bg-gradient-to-r from-black to-gray-500 text-gray-200 relative overflow-hidden">
-            {/* Background gradient */}
-            <div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-r from-black to-gray-500 bg-[radial-gradient(circle_500px_at_50%_200px,#3e007555,transparent)]"></div>
-
-            {/* Additional ambient lights */}
-            <div className="absolute top-1/4 left-1/4 w-72 h-72 bg-purple-500/10 rounded-full blur-3xl -z-10"></div>
-            <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl -z-10"></div>
-
-            {/* Login Container */}
-            <div className="w-full max-w-md">
-                {/* Header */}
-                <div className="text-center mb-8">
-                    <div className="flex items-center justify-center gap-3 mb-4">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-purple-500">
-                            <path d="m12 3-8.9 5.06a4 4 0 0 0-1.1 5.44l1.1 1.94a4 4 0 0 0 5.44 1.1l8.9-5.06a4 4 0 0 0 1.1-5.44l-1.1-1.94a4 4 0 0 0-5.44-1.1z"></path>
-                        </svg>
-                        <h1 className="text-2xl font-bold text-purple-400 [text-shadow:_0_0_12px_theme(colors.purple.500)]">HightJS</h1>
-                    </div>
-                    <h2 className="text-xl font-medium text-gray-300 mb-2">Bem-vindo de volta</h2>
-                    <p className="text-sm text-gray-400">Faça login em sua conta</p>
-                </div>
-
-                {/* Glass Login Form */}
-                <div className="relative">
-                    {/* Glass background */}
-                    <div className="absolute inset-0 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl"></div>
-
-                    {/* error */}
-                    {error && (
-                        <div className="relative p-4 mb-4 text-sm text-red-800 bg-red-200 rounded-lg" role="alert">
-                            {error}
-                        </div>
-                    )}
-
-                    {/* Form content */}
-                    <form onSubmit={handleLogin} className="relative p-8 space-y-6">
-                        {/* Email field */}
-                        <div className="space-y-2">
-                            <label htmlFor="email" className="text-sm font-medium text-gray-300">
-                                Usuário
-                            </label>
-                            <input
-                                id="username"
-                                type="username"
-                                value={username}
-                                onChange={(e) => setUsername(e.target.value)}
-                                className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-gray-200 placeholder-gray-400 focus:border-purple-500/50 focus:ring-2 focus:ring-purple-500/20 focus:outline-none backdrop-blur-sm transition-all duration-300"
-                                required
-                            />
-                        </div>
-
-                        {/* Password field */}
-                        <div className="space-y-2">
-                            <label htmlFor="password" className="text-sm font-medium text-gray-300">
-                                Senha
-                            </label>
-                            <input
-                                id="password"
-                                type="password"
-                                placeholder="••••••••"
-                                value={password}
-                                onChange={(e) => setPassword(e.target.value)}
-                                className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-gray-200 placeholder-gray-400 focus:border-purple-500/50 focus:ring-2 focus:ring-purple-500/20 focus:outline-none backdrop-blur-sm transition-all duration-300"
-                                required
-                            />
-                        </div>
-
-                        {/* Remember me and forgot password */}
-                        <div className="flex items-center justify-between text-sm">
-                            <label className="flex items-center text-gray-400 cursor-pointer">
-                                <input
-                                    type="checkbox"
-                                    className="mr-2 rounded border-white/20 bg-white/5 text-purple-500 focus:ring-purple-500/20"
-                                />
-                                Lembrar de mim
-                            </label>
-                            <a href="#" className="text-purple-400 hover:text-purple-300 transition-colors hover:underline">
-                                Esqueceu a senha?
-                            </a>
-                        </div>
-
-                        {/* Login button */}
-                        <button
-                            type="submit"
-                            disabled={isLoading}
-                            className="w-full bg-purple-600 hover:bg-purple-500 text-white font-medium py-3 px-4 rounded-xl transition-all duration-300 shadow-[0_0_15px_-3px_theme(colors.purple.600)] hover:shadow-[0_0_25px_-3px_theme(colors.purple.500)] disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-purple-500/20"
-                        >
-                            {isLoading ? (
-                                <div className="flex items-center justify-center gap-2">
-                                    <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
-                                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                    </svg>
-                                    Entrando...
-                                </div>
-                            ) : (
-                                'Entrar'
-                            )}
-                        </button>
-
-
-
-
-                    </form>
-                </div>
-
-            </div>
-        </div>
-    );
-}
 
 const wrapper = () => {
     const session = useSession()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hightjs",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "HightJS is a high-level framework for building web applications with ease and speed. It provides a robust set of tools and features to streamline development and enhance productivity.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.21",
+    "@types/fs-extra": "^11.0.4",
     "@types/node": "^20.11.24",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
@@ -65,6 +66,7 @@
     "express": "^4.0.0",
     "fastify": "^5.6.1",
     "framer-motion": "^12.23.22",
+    "fs-extra": "^11.3.2",
     "ws": "^8.18.1"
   },
   "peerDependency": {

package/src/api/console.ts

@@ -202,7 +202,9 @@ export default class Console {
     }
 
     static logWithout(level: Levels, colors?:Colors, ...args: any[]): void {
-        const color = colors || level === Levels.ERROR ? Colors.BgRed : level === Levels.WARN ? Colors.BgYellow : level === Levels.INFO ? Colors.BgMagenta : level === Levels.SUCCESS ? Colors.BgGreen : Colors.BgCyan;
+
+        const color = colors ? colors :  level === Levels.ERROR ? Colors.BgRed : level === Levels.WARN ? Colors.BgYellow : level === Levels.INFO ? Colors.BgMagenta : level === Levels.SUCCESS ? Colors.BgGreen : Colors.BgCyan;
+
         let output = "";
         for (const arg of args) {
             let msg = (arg instanceof Error) ? arg.stack : (typeof arg === 'string') ? arg : JSON.stringify(arg, null, 2);

package/src/bin/hightjs.js

@@ -133,11 +133,11 @@ program
             await app.prepare();
             console.log('✅ Build complete\n');
 
-            // 3. Copia a pasta hweb-dist para exported
-            const distDir = path.join(projectDir, 'hweb-dist');
+            // 3. Copia a pasta .hight para exported
+            const distDir = path.join(projectDir, '.hight');
             if (fs.existsSync(distDir)) {
                 console.log('📦 Copying JavaScript files...');
-                const exportDistDir = path.join(exportDir, 'hweb-dist');
+                const exportDistDir = path.join(exportDir, '.hight');
                 fs.mkdirSync(exportDistDir, { recursive: true });
 
                 const files = fs.readdirSync(distDir);

package/src/builder.js

@@ -18,6 +18,8 @@ const esbuild = require('esbuild');
 const path = require('path');
 const Console = require("./api/console").default
 const fs = require('fs');
+const {readdir, stat} = require("node:fs/promises");
+const {rm} = require("fs-extra");
 // Lista de módulos nativos do Node.js para marcar como externos (apenas os built-ins do Node)
 const nodeBuiltIns = [
     'assert', 'buffer', 'child_process', 'cluster', 'crypto', 'dgram', 'dns', 
@@ -189,6 +191,45 @@ const reactResolvePlugin = {
     }
 };
 
+/**
+ * Plugin para adicionar suporte a HMR (Hot Module Replacement)
+ */
+const hmrPlugin = {
+    name: 'hmr-plugin',
+    setup(build) {
+        // Adiciona runtime de HMR para arquivos TSX/JSX
+        build.onLoad({ filter: /\.(tsx|jsx)$/ }, async (args) => {
+            // Ignora arquivos de node_modules
+            if (args.path.includes('node_modules')) {
+                return null;
+            }
+
+            const fs = require('fs');
+            const contents = await fs.promises.readFile(args.path, 'utf8');
+
+            // Adiciona código de HMR apenas em componentes de rota
+            if (args.path.includes('/routes/') || args.path.includes('\\routes\\')) {
+                const hmrCode = `
+// HMR Runtime
+if (typeof window !== 'undefined' && window.__HWEB_HMR__) {
+    const moduleId = ${JSON.stringify(args.path)};
+    if (!window.__HWEB_HMR_MODULES__) {
+        window.__HWEB_HMR_MODULES__ = new Map();
+    }
+    window.__HWEB_HMR_MODULES__.set(moduleId, module.exports);
+}
+`;
+                return {
+                    contents: contents + '\n' + hmrCode,
+                    loader: 'tsx'
+                };
+            }
+
+            return null;
+        });
+    }
+};
+
 /**
  * Builds with code splitting into multiple chunks based on module types.
  * @param {string} entryPoint - The path to the entry file.
@@ -197,8 +238,8 @@ const reactResolvePlugin = {
  * @returns {Promise<void>}
  */
 async function buildWithChunks(entryPoint, outdir, isProduction = false) {
-    // limpar diretorio
-    fs.rmSync(outdir, { recursive: true, force: true });
+    // limpar diretorio, menos a pasta temp
+    await cleanDirectoryExcept(outdir, 'temp');
 
   try {
     await esbuild.build({
@@ -242,7 +283,7 @@ async function buildWithChunks(entryPoint, outdir, isProduction = false) {
  */
 async function watchWithChunks(entryPoint, outdir, hotReloadManager = null) {
     // limpar diretorio
-    fs.rmSync(outdir, { recursive: true, force: true });
+    await cleanDirectoryExcept(outdir, 'temp');
     try {
         // Plugin para notificar quando o build termina
         const buildCompletePlugin = {
@@ -272,7 +313,7 @@ async function watchWithChunks(entryPoint, outdir, hotReloadManager = null) {
             outdir: outdir,
             loader: { '.js': 'jsx', '.ts': 'tsx' },
             external: nodeBuiltIns,
-            plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin, buildCompletePlugin],
+            plugins: [postcssPlugin, npmDependenciesPlugin, reactResolvePlugin, hmrPlugin, buildCompletePlugin],
             format: 'esm',
             jsx: 'automatic',
             define: {
@@ -306,7 +347,7 @@ async function watchWithChunks(entryPoint, outdir, hotReloadManager = null) {
 async function build(entryPoint, outfile, isProduction = false) {
     // limpar diretorio do outfile
     const outdir = path.dirname(outfile);
-    fs.rmSync(outdir, { recursive: true, force: true });
+    await cleanDirectoryExcept(outdir, 'temp');
 
   try {
     await esbuild.build({
@@ -407,5 +448,25 @@ async function watch(entryPoint, outfile, hotReloadManager = null) {
         throw error;
     }
 }
+/**
+ * Remove todo o conteúdo de um diretório,
+ * exceto a pasta (ou pastas) especificada(s) em excludeFolder.
+ *
+ * @param {string} dirPath - Caminho do diretório a limpar
+ * @param {string|string[]} excludeFolder - Nome ou nomes das pastas a manter
+ */
+async function cleanDirectoryExcept(dirPath, excludeFolder) {
+    const excludes = Array.isArray(excludeFolder) ? excludeFolder : [excludeFolder];
+
+    const items = await readdir(dirPath);
+
+    for (const item of items) {
+        if (excludes.includes(item)) continue; // pula as pastas excluídas
 
+        const itemPath = path.join(dirPath, item);
+        const info = await stat(itemPath);
+
+        await rm(itemPath, { recursive: info.isDirectory(), force: true });
+    }
+}
 module.exports = { build, watch, buildWithChunks, watchWithChunks };

package/src/client/entry.client.tsx

@@ -30,7 +30,7 @@ interface AppProps {
 
 function App({ componentMap, routes, initialComponentPath, initialParams, layoutComponent }: AppProps) {
     // Estado que guarda o componente a ser renderizado atualmente
-
+    const [hmrTimestamp, setHmrTimestamp] = useState(Date.now());
     const [CurrentPageComponent, setCurrentPageComponent] = useState(() => {
         // Se for a rota especial __404__, não busca no componentMap
         if (initialComponentPath === '__404__') {
@@ -40,6 +40,72 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
     });
     const [params, setParams] = useState(initialParams);
 
+    // HMR: Escuta eventos de hot reload
+    useEffect(() => {
+        // Ativa o sistema de HMR
+        (window as any).__HWEB_HMR__ = true;
+
+        const handleHMRUpdate = async (event: CustomEvent) => {
+            const { file, timestamp } = event.detail;
+            const fileName = file ? file.split('/').pop()?.split('\\').pop() : 'unknown';
+            console.log('🔥 HMR: Hot reloading...', fileName);
+
+            try {
+                // Aguarda um pouco para o esbuild terminar de recompilar
+                await new Promise(resolve => setTimeout(resolve, 300));
+
+                // Re-importa o módulo principal com cache busting
+                const mainScript = document.querySelector('script[src*="main.js"]') as HTMLScriptElement;
+                if (mainScript) {
+                    const mainSrc = mainScript.src.split('?')[0];
+                    const cacheBustedSrc = `${mainSrc}?t=${timestamp}`;
+
+                    // Cria novo script
+                    const newScript = document.createElement('script');
+                    newScript.type = 'module';
+                    newScript.src = cacheBustedSrc;
+
+                    // Quando o novo script carregar, força re-render
+                    newScript.onload = () => {
+                        console.log('✅ HMR: Modules reloaded');
+
+                        // Força re-render do componente
+                        setHmrTimestamp(timestamp);
+
+                        // Marca sucesso
+                        (window as any).__HMR_SUCCESS__ = true;
+                        setTimeout(() => {
+                            (window as any).__HMR_SUCCESS__ = false;
+                        }, 3000);
+                    };
+
+                    newScript.onerror = () => {
+                        console.error('❌ HMR: Failed to reload modules');
+                        (window as any).__HMR_SUCCESS__ = false;
+                    };
+
+                    // Remove o script antigo e adiciona o novo
+                    // (não remove para não quebrar o app)
+                    document.head.appendChild(newScript);
+                } else {
+                    // Se não encontrou o script, apenas força re-render
+                    console.log('⚡ HMR: Forcing re-render');
+                    setHmrTimestamp(timestamp);
+                    (window as any).__HMR_SUCCESS__ = true;
+                }
+            } catch (error) {
+                console.error('❌ HMR Error:', error);
+                (window as any).__HMR_SUCCESS__ = false;
+            }
+        };
+
+        window.addEventListener('hmr:component-update' as any, handleHMRUpdate);
+
+        return () => {
+            window.removeEventListener('hmr:component-update' as any, handleHMRUpdate);
+        };
+    }, []);
+
     const findRouteForPath = useCallback((path: string) => {
         for (const route of routes) {
             const regexPattern = route.pattern
@@ -123,7 +189,8 @@ function App({ componentMap, routes, initialComponentPath, initialParams, layout
     }
 
     // Renderiza o componente atual (sem Context, usa o router diretamente)
-    const PageContent = <CurrentPageComponent params={params} />;
+    // Usa key com timestamp para forçar re-mount durante HMR
+    const PageContent = <CurrentPageComponent key={`page-${hmrTimestamp}`} params={params} />;
 
     // SEMPRE usa o layout - se não existir, cria um wrapper padrão
     const content = layoutComponent
@@ -153,6 +220,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 +228,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 +279,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 +388,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] Initial data not found on page.');
+        console.error('[hweb] Failed to parse initial data.');
         return;
     }
 

package/src/helpers.ts

@@ -112,6 +112,7 @@ async function loadHightConfig(projectDir: string, phase: string): Promise<Hight
         serverTimeout: 35000,
         individualRequestTimeout: 30000,
         maxUrlLength: 2048,
+        accessLogging: true,
     };
 
     try {
@@ -265,6 +266,10 @@ async function initNativeServer(hwebApp: HWebApp, options: HightJSOptions, port:
     // 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');
@@ -281,11 +286,44 @@ async function initNativeServer(hwebApp: HWebApp, options: HightJSOptions, port:
         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 (usa configuração personalizada)
-            const url = req.url || '/';
             const maxUrlLength = hightConfig.maxUrlLength || 2048;
             if (url.length > maxUrlLength) {
                 res.statusCode = 414; // URI Too Long