@bananacool467/authtics-host 0.2.1 → 0.2.3

package/README.md

@@ -1,20 +1,17 @@
 # Authtics Host
 
-Version 0.2.1
+Version 0.2.3
 License: MIT
 
 Authtics Host is a web framework inspired by Next.js. Authtics Host supports SSR (Server-Side Rendering) and uses esbuild. This is not to be confused with auth platforms.
 
 **(NOTE: The short name for Authtics Host is HostJS or Host.js)**
 
-**(Fixes we're applied on this version, babel support had to be removed)**
-
-**(From the Developer: I am having 2 small issues:**
+**(From the Developer: I am having 1 small issue:**
 
 1. **Web Socket Connections** are **not showing** in the DevPanel's Network tab
-2. The page doesnt **refresh properly**. (Have to refresh by doing: refresh -> cancel -> refresh to prevent halting)
 
-**I need help fixing those)**
+**I need help fixing that)**
 
 ## Setting Up
 
@@ -233,7 +230,7 @@ export function Component() {
 The developer might also redesign the UI for the DevPanel using [UI Tools](https://npmjs.com/package/@bananakitssu/ui-tools).
 
 > **Warning**:
-> Asking AI about HostJS is not recommended, it will give an Auth platform and call HostJS/Authtics Host a typo, say it doesn't exist, say it was renamed, it is private, or the account doesn't exist. Or if it knows, it may swap your server script with regular **Node.js**/**ExpressJS**/**Next.js** or use **Next.js**-like code because this framework is **Next.js-inspired**
+> Asking AI about HostJS is not recommended, it will give an Auth platform and call HostJS/Authtics Host a typo, say it doesn't exist, say it was renamed, it is private, or the account doesn't exist. Or if it knows, it may swap your server script with regular **Node.js**/**ExpressJS**/**Next.js** or use **Next.js-like** code because this framework is **Next.js-inspired**
 
 ## Developer Panel Notes And DAT (Developer Access Token)
 

package/dist/cli.d.ts

@@ -3,6 +3,7 @@ import { IncomingMessage, ServerResponse } from "node:http";
 export default class App {
     server: any;
     constructor();
+    startServer(): Promise<void>;
     get(routePath: string, handler: (req: IncomingMessage, res: ServerResponse) => void): void;
     registerApp(route: string): void;
     post(routePath: string, handler: (req: IncomingMessage, res: ServerResponse) => void): void;

package/dist/cli.js

@@ -139,7 +139,8 @@ async function getJsonBody(req) {
 export default class App {
     server;
     constructor() {
-        this.server = start();
+        this.server = null;
+        this.startServer();
         this.post('/__authtics_host_apis__/set-users-paused', async (req, res) => {
             let datMatched = false;
             if (config_.dat && config_.dat == req.cookies.dat)
@@ -379,6 +380,14 @@ export default class App {
             }
         });
     }
+    async startServer() {
+        try {
+            this.server = await start();
+        }
+        catch (error) {
+            console.error("Server failed to start:", error);
+        }
+    }
     get(routePath, handler) {
         routes.set(`GET:${routePath}`, handler);
     }

package/dist/devPanel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
-import { ShieldCheck, CircleX, ChevronDown, ChevronUp, Bug, AlertTriangle, Info, ArrowLeft, Wifi, Terminal, Route, Globe, ChevronRight, ChevronLeft, Server, TriangleAlert, Eye, Zap } from 'lucide-react';
+import { ShieldCheck, CircleX, ChevronDown, ChevronUp, Bug, AlertTriangle, Info, ArrowLeft, Wifi, Terminal, Route, Globe, ChevronRight, ChevronLeft, Server, TriangleAlert, Eye, Zap, Power } from 'lucide-react';
 function getCallerSource() {
     try {
         const stack = new Error().stack ?? '';
@@ -55,7 +55,8 @@ function Sparkline({ data, color, label, unit }) {
         return `${x},${y}`;
     }).join(' ');
     const latest = data[data.length - 1] ?? 0;
-    return (_jsxs("div", { style: { background: '#fff', borderRadius: '8px', border: '1px solid #eee', padding: '8px 10px' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }, children: [_jsx("span", { style: { fontSize: '10px', color: '#888' }, children: label }), _jsxs("span", { style: { fontSize: '11px', fontFamily: 'monospace', color }, children: [latest, unit] })] }), _jsxs("svg", { width: W, height: H, style: { display: 'block', overflow: 'visible' }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: `grad-${label}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.18" }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0.01" })] }) }), data.length > 1 && (_jsxs(_Fragment, { children: [_jsx("polygon", { points: `0,${H} ${points} ${W},${H}`, fill: `url(#grad-${label})` }), _jsx("polyline", { points: points, fill: "none", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round", strokeLinecap: "round" }), (() => {
+    const id = `grad-${label.replace(' ', '').toLowerCase()}`;
+    return (_jsxs("div", { style: { background: '#fff', borderRadius: '8px', border: '1px solid #eee', padding: '8px 10px' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }, children: [_jsx("span", { style: { fontSize: '10px', color: '#888' }, children: label }), _jsxs("span", { style: { fontSize: '11px', fontFamily: 'monospace', color }, children: [latest, unit] })] }), _jsxs("svg", { width: W, height: H, style: { display: 'block', overflow: 'visible' }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: id, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.18" }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0.01" })] }) }), data.length > 1 && (_jsxs(_Fragment, { children: [_jsx("polygon", { points: `0,${H} ${points} ${W},${H}`, fill: `url(#${id})` }), _jsx("polyline", { points: points, fill: "none", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round", strokeLinecap: "round" }), (() => {
                                 const last = points.split(' ').pop().split(',');
                                 return _jsx("circle", { cx: last[0], cy: last[1], r: "2.5", fill: color });
                             })()] }))] })] }));
@@ -294,9 +295,12 @@ function installConsoleInterceptor() {
     });
 }
 function SecuredTab() {
-    return (_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', padding: '10px 10px', textAlign: 'center', gap: '8px' }, children: [_jsx(CircleX, { size: 32, color: 'red' }), _jsx("span", { style: { color: 'red', fontSize: 24 }, children: "This Tab Is Currently Not Accessible" }), _jsx("span", { style: { color: 'red', fontSize: 12 }, children: "To access this tab, you need to set \"dat\" in the Authtics Host config to set restriction and then restart." })] }));
+    return (_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', padding: '10px 10px', textAlign: 'center', gap: '8px' }, children: [_jsx(CircleX, { size: 32, color: '#ff7d7d' }), _jsx("span", { style: { color: '#ff7d7d', fontSize: 24 }, children: "This tab is currently not accessible" }), _jsx("span", { style: { color: '#ff7d7d', fontSize: 12 }, children: "To access this tab, you need to set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart." })] }));
 }
-function PanelButton({ onClick, onClick2, children, style, fullWidth, disabled }) {
+function ShutdownTab() {
+    return (_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', padding: '10px 10px', textAlign: 'center', gap: '8px' }, children: [_jsx(Power, { size: 32, color: 'grey' }), _jsx("span", { style: { color: 'grey', fontSize: 24 }, children: "The server was shutdown by you." })] }));
+}
+function PanelButton({ onClick, onClick2, children, style, fullWidth, disabled, background }) {
     const [hovered, setHovered] = useState(false);
     const [pressed, setPressed] = useState(false);
     return (_jsx("div", { onClick: (e) => {
@@ -317,7 +321,13 @@ function PanelButton({ onClick, onClick2, children, style, fullWidth, disabled }
             width: fullWidth ? '100%' : undefined,
             boxSizing: 'border-box',
             userSelect: 'none',
-            background: pressed ? 'rgba(0,0,0,0.12)' : hovered ? 'rgba(0,0,0,0.06)' : 'rgba(0,0,0,0.03)',
+            background: disabled
+                ? '#bdbdbd'
+                : pressed
+                    ? `color-mix(in srgb, ${background} 12%, transparent)`
+                    : hovered
+                        ? `color-mix(in srgb, ${background} 6%, transparent)`
+                        : background ?? '#fff',
             transition: 'background 0.15s ease',
             ...style,
         }, children: children }));
@@ -339,6 +349,8 @@ export default function DevPanel() {
     const [clientInfoOpen, setClientInfoOpen] = useState(false);
     const [aboutHostOpen, setAboutHostOpen] = useState(false);
     const [serverInfoOpen, setServerInfoOpen] = useState(false);
+    const [shutdown, setShutdown] = useState(false);
+    const [shuttingDown, setShuttingDown] = useState(false);
     const [hasIssue, setHasIssue] = useState(false);
     const [ping__, setPing__] = useState(0);
     const [networkFetches, setNetworkFetches] = useState([]);
@@ -565,19 +577,21 @@ export default function DevPanel() {
         });
     };
     const shutDown = async () => {
+        setShuttingDown(true);
         await fetch('/__authtics_host_apis__/shutdown', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({})
         });
+        setShutdown(true);
     };
     useEffect(() => {
         const animationId = requestAnimationFrame(loop);
         const intervalId = setInterval(() => {
             if (fpsSpanRef.current) {
                 fpsSpanRef.current.textContent = frameCount.current.toString();
-                frames.current = frameCount.current;
             }
+            frames.current = frameCount.current;
             frameCount.current = 0;
         }, 1000);
         return () => {
@@ -591,6 +605,7 @@ export default function DevPanel() {
     const [receivedHistory, setReceivedHistory] = useState(Array(MAX_POINTS).fill(0));
     const [cpuUsageHistory, setCpuUsageHistory] = useState(Array(MAX_POINTS).fill(0));
     const [heapUsageHistory, setHeapUsageHistory] = useState(Array(MAX_POINTS).fill(0));
+    const [fpsHistory, setFpsHistory] = useState(Array(MAX_POINTS).fill(0));
     const drawerHeight = !open
         ? '0px'
         : consoleOpen || networkOpen || routeOpen || webpageInfoOpen || clientInfoOpen || aboutHostOpen
@@ -621,6 +636,7 @@ export default function DevPanel() {
             const r = pendingReceived.current;
             const c = cpuUsage.current;
             const h = heapUsage.current;
+            const f = frames.current;
             pendingSent.current = 0;
             pendingReceived.current = 0;
             cpuUsage.current = 0;
@@ -629,19 +645,20 @@ export default function DevPanel() {
             setHeapUsageHistory(prev => [...prev.slice(-(MAX_POINTS - 1)), h]);
             setSentHistory(prev => [...prev.slice(-(MAX_POINTS - 1)), s]);
             setReceivedHistory(prev => [...prev.slice(-(MAX_POINTS - 1)), r]);
+            setFpsHistory(prev => [...prev.slice(-(MAX_POINTS - 1)), f]);
         }, 1000);
         return () => clearInterval(interval);
     }, []);
     useEffect(() => {
         installConsoleInterceptor();
-        installNetworkInterceptor((f) => setNetworkFetches(prev => [...prev.slice(-49), f]), (f) => setNetworkFetches(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setEventSources(prev => [...prev.slice(-49), f]), (f) => setEventSources(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setWebSockets(prev => [...prev.slice(-49), f]), (f) => setWebSockets(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setResourcesFound(prev => [...prev.slice(-49), f]), (f) => setResourcesFound(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setResourcesFound(prev => prev.filter(p => p.id !== f.id)), (sent) => {
+        installNetworkInterceptor((f) => setNetworkFetches(prev => [...prev.slice(-499), f]), (f) => setNetworkFetches(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setEventSources(prev => [...prev.slice(-499), f]), (f) => setEventSources(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setWebSockets(prev => [...prev.slice(-499), f]), (f) => setWebSockets(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setResourcesFound(prev => [...prev.slice(-499), f]), (f) => setResourcesFound(prev => prev.map(p => p.id === f.id ? f : p)), (f) => setResourcesFound(prev => prev.filter(p => p.id !== f.id)), (sent) => {
             pendingSent.current += sent;
         }, (received) => {
             pendingReceived.current += received;
         });
         const handler = (e) => {
             const detail = e.detail;
-            setLogs(prev => [...prev.slice(-99), { ...detail, id: Date.now() + Math.random() }]);
+            setLogs(prev => [...prev.slice(-19999), { ...detail, id: Date.now() + Math.random() }]);
             if (detail.type === 'Error') {
                 setHasIssue(true);
                 setErrorMsgs(prev => [...prev, detail.message]);
@@ -650,7 +667,11 @@ export default function DevPanel() {
             ;
         };
         try {
-            const existingToken = cookie.get('dat');
+            let existingToken = null;
+            try {
+                existingToken = localStorage.getItem('dat');
+            }
+            catch (e) { }
             if (existingToken) {
                 setToken(existingToken);
                 let length_ = existingToken?.split('');
@@ -846,6 +867,7 @@ export default function DevPanel() {
                     flexDirection: 'column',
                     alignItems: 'flex-end',
                     gap: '8px',
+                    pointerEvents: 'none',
                 }, children: [_jsx("div", { style: {
                             maxHeight: drawerHeight,
                             opacity: open ? 1 : 0,
@@ -853,9 +875,9 @@ export default function DevPanel() {
                             overflow: (!consoleOpen && !networkOpen && !aboutHostOpen && !webpageInfoOpen && !clientInfoOpen ? 'hidden auto' : 'hidden'),
                             borderRadius: '10px',
                             transition: 'max-height 0.35s ease, opacity 0.25s ease',
-                        }, children: _jsx("div", { style: {
+                            border: '1px solid #e6e3e3',
+                        }, children: _jsxs("div", { style: {
                                 background: '#f7f7f7',
-                                border: '1px solid #e6e3e3',
                                 borderRadius: '10px',
                                 width: '320px',
                                 display: 'flex',
@@ -863,349 +885,344 @@ export default function DevPanel() {
                                 boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
                                 boxSizing: 'border-box',
                                 overflow: 'hidden',
-                            }, children: consoleOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                                            padding: '6px 8px',
-                                            borderBottom: '1px solid #ddd',
-                                            background: '#fff',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '6px',
-                                        }, children: [_jsxs(PanelButton, { onClick: () => setConsoleOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Terminal, { size: 12, color: "#16a34a" }), " Console"] }), _jsxs("span", { style: { fontSize: '10px', color: '#aaa', marginLeft: '2px' }, children: [filteredLogs.length, " message", filteredLogs.length !== 1 ? 's' : '', " shown, ", logs.length, " in total"] }), _jsx(PanelButton, { onClick: () => setLogs([]), style: { color: '#aaa', marginLeft: 'auto' }, children: "Clear" })] }), _jsx("div", { style: {
-                                            display: 'flex',
-                                            gap: '4px',
-                                            padding: '5px 8px',
-                                            borderBottom: '1px solid #eee',
-                                            background: '#fafafa',
-                                            flexWrap: 'wrap',
-                                        }, children: [...LOG_TYPES].map(type => (_jsxs("label", { style: {
+                            }, children: [shutdown ? (_jsx(ShutdownTab, {})) : (_jsx(_Fragment, {})), consoleOpen && !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                                padding: '6px 8px',
+                                                borderBottom: '1px solid #ddd',
+                                                background: '#fff',
                                                 display: 'flex',
                                                 alignItems: 'center',
-                                                gap: '3px',
-                                                fontSize: '10px',
-                                                color: filters[type] ? FILTER_COLORS[type] : '#bbb',
-                                                cursor: 'pointer',
-                                                padding: '2px 6px',
-                                                borderRadius: '10px',
-                                                background: filters[type] ? `${FILTER_COLORS[type]}18` : 'transparent',
-                                                border: `1px solid ${filters[type] ? FILTER_COLORS[type] + '44' : '#e0e0e0'}`,
-                                                transition: 'all 0.15s ease',
-                                                userSelect: 'none',
-                                            }, children: [_jsx("input", { type: "checkbox", checked: filters[type], onChange: () => toggleFilter(type), style: { display: 'none' } }), type] }, type))) }), _jsx("div", { style: { overflowY: 'auto', maxHeight: '220px' }, ref: consoleScrollRef, onScroll: handleScroll, children: filteredLogs.length === 0
-                                            ? _jsx("div", { style: { padding: '16px 12px', color: '#aaa', fontSize: '12px' }, children: "No logs yet." })
-                                            : [...filteredLogs].map(log => {
-                                                const s = TYPE_STYLE[log.type];
-                                                return (_jsxs("div", { style: {
-                                                        display: 'flex',
-                                                        gap: '8px',
-                                                        padding: '5px 10px',
-                                                        background: s.bg,
-                                                        borderBottom: '1px solid #f0f0f0',
-                                                        alignItems: 'flex-start',
-                                                    }, children: [s.icon && (_jsx("span", { style: { color: s.color, marginTop: '1px', flexShrink: 0, display: 'flex' }, children: s.icon })), _jsx("span", { style: {
-                                                                color: s.textColor ?? '#555',
-                                                                fontSize: '11px',
-                                                                fontFamily: 'monospace',
-                                                                wordBreak: 'break-all',
-                                                            }, children: log.message })] }, log.id));
-                                            }) })] })) : networkOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                                            padding: '6px 8px',
-                                            borderBottom: '1px solid #ddd',
-                                            background: '#fff',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '6px',
-                                        }, children: [_jsxs(PanelButton, { onClick: () => setNetworkOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Wifi, { size: 12, color: "#3b82f6" }), " Network"] })] }), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsxs("div", { style: {
+                                                gap: '6px',
+                                            }, children: [_jsxs(PanelButton, { onClick: () => setConsoleOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Terminal, { size: 12, color: "#16a34a" }), " Console"] }), _jsxs("span", { style: { fontSize: '10px', color: '#aaa', marginLeft: '2px' }, children: [filteredLogs.length, " message", filteredLogs.length !== 1 ? 's' : '', " shown, ", logs.length, " in total"] }), _jsx(PanelButton, { onClick: () => setLogs([]), style: { color: '#aaa', marginLeft: 'auto' }, children: "Clear" })] }), _jsx("div", { style: {
+                                                display: 'flex',
+                                                gap: '4px',
+                                                padding: '5px 8px',
+                                                borderBottom: '1px solid #eee',
+                                                background: '#fafafa',
+                                                flexWrap: 'wrap',
+                                            }, children: [...LOG_TYPES].map(type => (_jsxs("label", { style: {
                                                     display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
+                                                    alignItems: 'center',
+                                                    gap: '3px',
+                                                    fontSize: '10px',
+                                                    color: filters[type] ? FILTER_COLORS[type] : '#bbb',
+                                                    cursor: 'pointer',
+                                                    padding: '2px 6px',
                                                     borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { children: "Ping" }), _jsx("span", { style: { color: ping__ < 100 ? '#16a34a' : ping__ < 300 ? '#d97706' : '#e53e3e', fontFamily: 'monospace' }, children: ping__ > 0 ? `${ping__}ms` : '??ms' })] }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '4px' }, children: [_jsx(Info, { size: 10 }), "this analytic is unavaliable. Set \"dat\" in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(Sparkline, { data: receivedHistory, color: "#3b82f6", label: "Received", unit: " bytes" }), _jsx(Sparkline, { data: sentHistory, color: "#16a34a", label: "Sent", unit: " bytes" }), _jsxs("span", { style: { fontSize: '15px', color: '#333', fontWeight: 'bold' }, children: ["Fetches \u2014 ", networkFetches.length, " total fetches"] }), networkFetches.length === 0
-                                                ? _jsx("div", { style: { color: '#aaa', fontSize: '12px', padding: '4px 2px' }, children: "No network requests yet." })
-                                                : [...networkFetches].reverse().map((f, i) => (_jsxs("div", { style: {
+                                                    background: filters[type] ? `${FILTER_COLORS[type]}18` : 'transparent',
+                                                    border: `1px solid ${filters[type] ? FILTER_COLORS[type] + '44' : '#e0e0e0'}`,
+                                                    transition: 'all 0.15s ease',
+                                                    userSelect: 'none',
+                                                }, children: [_jsx("input", { type: "checkbox", checked: filters[type], onChange: () => toggleFilter(type), style: { display: 'none' } }), type] }, type))) }), _jsx("div", { style: { overflowY: 'auto', maxHeight: '220px' }, ref: consoleScrollRef, onScroll: handleScroll, children: filteredLogs.length === 0
+                                                ? _jsx("div", { style: { padding: '16px 12px', color: '#aaa', fontSize: '12px' }, children: "No logs yet." })
+                                                : [...filteredLogs].map(log => {
+                                                    const s = TYPE_STYLE[log.type];
+                                                    return (_jsxs("div", { style: {
+                                                            display: 'flex',
+                                                            gap: '8px',
+                                                            padding: '5px 10px',
+                                                            background: s.bg,
+                                                            borderBottom: '1px solid #f0f0f0',
+                                                            alignItems: 'flex-start',
+                                                        }, children: [s.icon && (_jsx("span", { style: { color: s.color, marginTop: '1px', flexShrink: 0, display: 'flex' }, children: s.icon })), _jsx("span", { style: {
+                                                                    color: s.textColor ?? '#555',
+                                                                    fontSize: '11px',
+                                                                    fontFamily: 'monospace',
+                                                                    wordBreak: 'break-all',
+                                                                }, children: log.message })] }, log.id));
+                                                }) })] })) : networkOpen && !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                                padding: '6px 8px',
+                                                borderBottom: '1px solid #ddd',
+                                                background: '#fff',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: '6px',
+                                            }, children: [_jsxs(PanelButton, { onClick: () => setNetworkOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Wifi, { size: 12, color: "#3b82f6" }), " Network"] })] }), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
                                                         background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { children: "Ping" }), _jsx("span", { style: { color: ping__ < 100 ? '#16a34a' : ping__ < 300 ? '#d97706' : '#e53e3e', fontFamily: 'monospace' }, children: ping__ > 0 ? `${ping__}ms` : '??ms' })] }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "This analytic is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(Sparkline, { data: receivedHistory, color: "#3b82f6", label: "Received", unit: " bytes" }), _jsx(Sparkline, { data: sentHistory, color: "#16a34a", label: "Sent", unit: " bytes" }), _jsxs("span", { style: { fontSize: '15px', color: '#333', fontWeight: 'bold' }, children: ["Fetches \u2014 ", networkFetches.length, " total fetches"] }), networkFetches.length === 0
+                                                    ? _jsx("div", { style: { color: '#aaa', fontSize: '12px', padding: '4px 2px' }, children: "No network requests yet." })
+                                                    : [...networkFetches].reverse().map((f, i) => (_jsxs("div", { style: {
+                                                            background: '#fff',
+                                                            display: 'flex',
+                                                            flexDirection: 'column',
+                                                            borderRadius: '10px',
+                                                            border: '1px solid #eee',
+                                                            fontSize: '11px',
+                                                            fontFamily: 'monospace',
+                                                            whiteSpace: 'normal',
+                                                            wordBreak: 'break-word',
+                                                        }, children: [_jsxs("div", { style: { display: 'flex',
+                                                                    justifyContent: 'space-between', gap: '8px', padding: '6px 10px', borderBottom: '1px solid #eee' }, children: [_jsx("span", { style: { color: '#3b82f6' }, children: f.method }), _jsx("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: '#333' }, children: f.url }), _jsx("span", { style: { color: f.status ? (f.status < 400 ? '#16a34a' : '#e53e3e') : 'orange' }, children: f.status || "Awaiting for response..." })] }), f.method === "POST" && f.sent?.trim() ? (_jsxs("div", { style: { padding: '10px 10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx("p", { style: { color: 'orange', fontFamily: 'system-ui, sans-serif', margin: 0 }, children: "Sent: " }), _jsx("div", { children: f.sent })] })) : (_jsx(_Fragment, {})), _jsxs("div", { style: { padding: '10px 10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx("p", { style: { color: 'green', fontFamily: 'system-ui, sans-serif', margin: 0 }, children: "Received: " }), _jsx(TruncatedText, { content: f.response || "...", id: `${f.id}_fetch` })] }), f.response ? (f.response.split('').length > 100 ? (_jsxs(PanelButton, { onClick2: (e) => { const obj___ = document.getElementById(`${f.id}_fetch`); if (obj___ && !obj___.hasAttribute('expanded')) {
+                                                                    obj___.innerText = f.response;
+                                                                    obj___.setAttribute('expanded', '');
+                                                                    e.currentTarget.innerText = 'View less';
+                                                                }
+                                                                else if (obj___ && obj___.hasAttribute('expanded')) {
+                                                                    obj___.innerText = f.response?.slice(0, 100) + "...";
+                                                                    obj___.removeAttribute('expanded');
+                                                                    e.currentTarget.innerText = `View more (${f.response ? (f.response.split('').length - 100) : 0} bytes hidden)`;
+                                                                } }, style: { padding: '8px 10px', borderRadius: '10px', background: '#34a8eb', color: '#fff', border: 'none', cursor: 'pointer', margin: '10px', textAlign: 'center', fontFamily: 'system-ui, sans-serif' }, children: ["View more (", f.response ? (f.response.split('').length - 100) : 0, " bytes hidden)"] })) : (_jsx(_Fragment, {}))) : (_jsx(_Fragment, {}))] }, i))), _jsx("span", { style: { fontSize: '15px', color: '#333', fontWeight: 'bold' }, children: "Active connections" }), eventSources.length === 0 ? (_jsx("div", { style: { color: '#aaa', fontSize: '12px', padding: '4px 2px' }, children: "No active connections." })) :
+                                                    [...eventSources, ...webSockets].reverse().map((es, i) => (_jsx("div", { style: {
+                                                            background: '#fff',
+                                                            display: 'flex',
+                                                            flexDirection: 'column',
+                                                            borderRadius: '10px',
+                                                            border: '1px solid #eee',
+                                                            fontSize: '11px',
+                                                            fontFamily: 'monospace'
+                                                        }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', gap: '8px', padding: '6px 10px' }, children: [_jsxs("span", { style: { color: '#3b82f6', display: 'flex', gap: '4px', justifyContent: 'center', alignItems: 'center' }, children: [es.type === "EventSource" ? _jsx(Zap, { color: "green", size: 12 }) : es.type === "WebSocket" ? _jsx(Globe, { color: "green", size: 12 }) : _jsx(_Fragment, {}), es.type === "EventSource" ? "Event Source" : es.type === "WebSocket" ? "Web Socket" : "???"] }), _jsx("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: '#333' }, children: es.url }), _jsx("span", { style: { color: es.status === 'Connected' ? '#16a34a' : es.status === 'Disconnected' ? '#e53e3e' : 'orange' }, children: es.status === 'Connected' ? 'Active' : es.status === 'Disconnected' ? 'Disconnected' : es.status === 'Connecting...' ? '...' : es.status === 'Connection Failed' ? 'Failed' : 'Unknown' })] }) }, i))), _jsxs("span", { style: { fontSize: '15px', color: '#333', fontWeight: 'bold' }, children: ["Resources Found \u2014 ", resourcesFound.length, " total resources"] }), resourcesFound.length === 0 ? (_jsx("div", { style: { color: '#aaa', fontSize: '12px', padding: '4px 2px' }, children: "No resources found." })) :
+                                                    [...resourcesFound].reverse().map((r, i) => (_jsx("div", { style: {
+                                                            background: '#fff',
+                                                            display: 'flex',
+                                                            flexDirection: 'column',
+                                                            borderRadius: '10px',
+                                                            border: '1px solid #eee',
+                                                            fontSize: '11px',
+                                                            fontFamily: 'monospace',
+                                                            whiteSpace: 'normal',
+                                                            wordBreak: 'break-word',
+                                                        }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', gap: '8px', padding: '6px 10px' }, children: [_jsx("span", { style: { color: '#3b82f6', display: 'flex', gap: '4px', justifyContent: 'center', alignItems: 'center' }, children: r.type }), _jsx("span", { style: { flex: 1, color: '#333' }, children: r.url })] }) }, i)))] })] })) : routeOpen && !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                                padding: '6px 8px',
+                                                borderBottom: '1px solid #ddd',
+                                                background: '#fff',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: '6px',
+                                            }, children: [_jsxs(PanelButton, { onClick: () => setRouteOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Route, { size: 12, color: "#3b82f6" }), " Route"] }), _jsx("span", { style: { fontSize: '10px', color: '#aaa', marginLeft: '2px' }, children: pathName })] }), datRestrictionMissing ? (_jsx(SecuredTab, {})) : (_jsx(_Fragment, {})), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: (datRestrictionMissing ? 'none' : 'flex'), flexDirection: 'column', gap: '8px' }, children: [_jsx("span", { style: { fontSize: '24px', color: '#333', fontWeight: 'bold' }, children: pathName }), _jsxs("div", { style: {
                                                         display: 'flex',
-                                                        flexDirection: 'column',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
                                                         borderRadius: '10px',
                                                         border: '1px solid #eee',
-                                                        fontSize: '11px',
-                                                        fontFamily: 'monospace',
-                                                    }, children: [_jsxs("div", { style: { display: 'flex',
-                                                                justifyContent: 'space-between', gap: '8px', padding: '6px 10px', borderBottom: '1px solid #eee' }, children: [_jsx("span", { style: { color: '#3b82f6' }, children: f.method }), _jsx("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: '#333' }, children: f.url }), _jsx("span", { style: { color: f.status ? (f.status < 400 ? '#16a34a' : '#e53e3e') : 'orange' }, children: f.status || "Awaiting for response..." })] }), f.method === "POST" ? (_jsxs("div", { style: { padding: '10px 10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx("p", { style: { color: 'orange', fontFamily: 'system-ui, sans-serif', margin: 0 }, children: "Sent: " }), _jsx("div", { children: f.sent })] })) : (_jsx(_Fragment, {})), _jsxs("div", { style: { padding: '10px 10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx("p", { style: { color: 'green', fontFamily: 'system-ui, sans-serif', margin: 0 }, children: "Received: " }), _jsx(TruncatedText, { content: f.response || "...", id: `${f.id}_fetch` })] }), f.response ? (f.response.split('').length > 100 ? (_jsxs(PanelButton, { onClick2: (e) => { const obj___ = document.getElementById(`${f.id}_fetch`); if (obj___ && !obj___.hasAttribute('expanded')) {
-                                                                obj___.innerText = f.response;
-                                                                obj___.setAttribute('expanded', '');
-                                                                e.currentTarget.innerText = 'View less';
-                                                            }
-                                                            else if (obj___ && obj___.hasAttribute('expanded')) {
-                                                                obj___.innerText = f.response?.slice(0, 100) + "...";
-                                                                obj___.removeAttribute('expanded');
-                                                                e.currentTarget.innerText = `View more (${f.response ? (f.response.split('').length - 100) : 0} bytes hidden)`;
-                                                            } }, style: { padding: '8px 10px', borderRadius: '10px', background: '#34a8eb', color: '#fff', border: 'none', cursor: 'pointer', margin: '10px', textAlign: 'center', fontFamily: 'system-ui, sans-serif' }, children: ["View more (", f.response ? (f.response.split('').length - 100) : 0, " bytes hidden)"] })) : (_jsx(_Fragment, {}))) : (_jsx(_Fragment, {}))] }, i))), _jsx("span", { style: { fontSize: '15px', color: '#333', fontWeight: 'bold' }, children: "Active connections" }), eventSources.length === 0 ? (_jsx("div", { style: { color: '#aaa', fontSize: '12px', padding: '4px 2px' }, children: "No active connections." })) :
-                                                [...eventSources, ...webSockets].reverse().map((es, i) => (_jsx("div", { style: {
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Load Status Code" }), _jsx("span", { style: { color: status === 200 ? '#16a34a' : '#e53e3e', fontFamily: 'monospace' }, children: status })] }), _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
                                                         background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "File Path" }), _jsx("span", { style: { color: 'blue', fontFamily: 'monospace' }, children: path })] }), _jsxs("div", { style: {
                                                         display: 'flex',
-                                                        flexDirection: 'column',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
                                                         borderRadius: '10px',
                                                         border: '1px solid #eee',
-                                                        fontSize: '11px',
-                                                        fontFamily: 'monospace'
-                                                    }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', gap: '8px', padding: '6px 10px' }, children: [_jsxs("span", { style: { color: '#3b82f6', display: 'flex', gap: '4px', justifyContent: 'center', alignItems: 'center' }, children: [es.type === "EventSource" ? _jsx(Zap, { color: "green", size: 12 }) : es.type === "WebSocket" ? _jsx(Globe, { color: "green", size: 12 }) : _jsx(_Fragment, {}), es.type === "EventSource" ? "Event Source" : es.type === "WebSocket" ? "Web Socket" : "???"] }), _jsx("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: '#333' }, children: es.url }), _jsx("span", { style: { color: es.status === 'Connected' ? '#16a34a' : es.status === 'Disconnected' ? '#e53e3e' : 'orange' }, children: es.status === 'Connected' ? 'Active' : es.status === 'Disconnected' ? 'Disconnected' : es.status === 'Connecting...' ? '...' : es.status === 'Connection Failed' ? 'Failed' : 'Unknown' })] }) }, i))), _jsxs("span", { style: { fontSize: '15px', color: '#333', fontWeight: 'bold' }, children: ["Resources Found \u2014 ", resourcesFound.length, " total resources"] }), resourcesFound.length === 0 ? (_jsx("div", { style: { color: '#aaa', fontSize: '12px', padding: '4px 2px' }, children: "No resources found." })) :
-                                                [...resourcesFound].reverse().map((r, i) => (_jsx("div", { style: {
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "File Name" }), _jsx("span", { style: { color: 'blue', fontFamily: 'monospace' }, children: path?.split('/').pop() })] })] })] })) : webpageInfoOpen && !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                                padding: '6px 8px',
+                                                borderBottom: '1px solid #ddd',
+                                                background: '#fff',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: '6px',
+                                            }, children: [_jsxs(PanelButton, { onClick: () => setWebpageInfoOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Globe, { size: 12, color: "#3b82f6" }), " Webpage Info"] })] }), datRestrictionMissing ? (_jsx(SecuredTab, {})) : (_jsx(_Fragment, {})), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: (datRestrictionMissing ? 'none' : 'flex'), flexDirection: 'column', gap: '8px' }, children: [_jsxs("span", { style: { fontSize: '12px', color: '#333' }, children: [_jsx("span", { style: { fontSize: '24px', color: '#333', fontWeight: 'bold' }, children: pathName }), " on ", _jsx("span", { style: { fontSize: '12px', color: '#333', fontWeight: 'bold' }, children: hostName })] }), _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
                                                         background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Protocol" }), _jsx("span", { style: { fontSize: '12px', color: 'orange' }, children: protocol })] }), _jsxs("div", { style: {
                                                         display: 'flex',
-                                                        flexDirection: 'column',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
                                                         borderRadius: '10px',
                                                         border: '1px solid #eee',
-                                                        fontSize: '11px',
-                                                        fontFamily: 'monospace'
-                                                    }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', gap: '8px', padding: '6px 10px' }, children: [_jsx("span", { style: { color: '#3b82f6', display: 'flex', gap: '4px', justifyContent: 'center', alignItems: 'center' }, children: r.type }), _jsx("span", { style: { flex: 1, color: '#333' }, children: r.url })] }) }, i)))] })] })) : routeOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                                            padding: '6px 8px',
-                                            borderBottom: '1px solid #ddd',
-                                            background: '#fff',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '6px',
-                                        }, children: [_jsxs(PanelButton, { onClick: () => setRouteOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Route, { size: 12, color: "#3b82f6" }), " Route"] }), _jsx("span", { style: { fontSize: '10px', color: '#aaa', marginLeft: '2px' }, children: pathName })] }), datRestrictionMissing ? (_jsx(SecuredTab, {})) : (_jsx(_Fragment, {})), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: (datRestrictionMissing ? 'none' : 'flex'), flexDirection: 'column', gap: '8px' }, children: [_jsx("span", { style: { fontSize: '24px', color: '#333', fontWeight: 'bold' }, children: pathName }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Load Status Code" }), _jsx("span", { style: { color: status === 200 ? '#16a34a' : '#e53e3e', fontFamily: 'monospace' }, children: status })] }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "File Path" }), _jsx("span", { style: { color: 'blue', fontFamily: 'monospace' }, children: path })] }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "File Name" }), _jsx("span", { style: { color: 'blue', fontFamily: 'monospace' }, children: path?.split('/').pop() })] })] })] })) : webpageInfoOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                                            padding: '6px 8px',
-                                            borderBottom: '1px solid #ddd',
-                                            background: '#fff',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '6px',
-                                        }, children: [_jsxs(PanelButton, { onClick: () => setWebpageInfoOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Globe, { size: 12, color: "#3b82f6" }), " Webpage Info"] })] }), datRestrictionMissing ? (_jsx(SecuredTab, {})) : (_jsx(_Fragment, {})), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: (datRestrictionMissing ? 'none' : 'flex'), flexDirection: 'column', gap: '8px' }, children: [_jsxs("span", { style: { fontSize: '12px', color: '#333' }, children: [_jsx("span", { style: { fontSize: '24px', color: '#333', fontWeight: 'bold' }, children: pathName }), " on ", _jsx("span", { style: { fontSize: '12px', color: '#333', fontWeight: 'bold' }, children: hostName })] }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Protocol" }), _jsx("span", { style: { fontSize: '12px', color: 'orange' }, children: protocol })] }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "SSL" }), _jsx("span", { style: { fontSize: '12px', color: (protocol === 'HTTPS' ? '#16a34a' : '#e53e3e') }, children: protocol === 'HTTPS' ? 'Yes' : 'No' })] }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Renderer Type" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: isSsr ? 'SSR (Server-Side Rendering)' : 'CSR (Client-Side Rendering)' })] }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Compiler Type" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: compilerType })] })] })] })) : clientInfoOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                                            padding: '6px 8px',
-                                            borderBottom: '1px solid #ddd',
-                                            background: '#fff',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '6px',
-                                        }, children: [_jsxs(PanelButton, { onClick: () => setClientInfoOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Info, { size: 12, color: "#3b82f6" }), " Client Info"] })] }), datRestrictionMissing ? (_jsx(SecuredTab, {})) : (_jsx(_Fragment, {})), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: (datRestrictionMissing ? 'none' : 'flex'), flexDirection: 'column', gap: '8px' }, children: [_jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "HTTP Version" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: "v" + httpVersion })] }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "User Agent" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: navigator.userAgent })] }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "OS" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: getOS() })] }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "FPS" }), _jsx("span", { style: { fontSize: '12px', color: (frames.current < 30 ? '#e53e3e' : frames.current < 60 ? '#d97706' : '#16a34a') }, ref: fpsSpanRef, children: "\u2014" })] })] })] })) : aboutHostOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                                            padding: '6px 8px',
-                                            borderBottom: '1px solid #ddd',
-                                            background: '#fff',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '6px',
-                                        }, children: [_jsxs(PanelButton, { onClick: () => setAboutHostOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(ShieldCheck, { size: 12, color: "#f472b6" }), " About Host"] })] }), datRestrictionMissing ? (_jsx(SecuredTab, {})) : (_jsx(_Fragment, {})), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: (datRestrictionMissing ? 'none' : 'flex'), flexDirection: 'column', gap: '8px' }, children: [_jsxs("span", { style: { fontSize: '24px', color: '#333', fontWeight: 'bold', textAlign: 'center', display: 'flex', alignItems: 'center', flexDirection: 'column', gap: '6px' }, children: [_jsx(ShieldCheck, { size: 36, color: "#f472b6" }), "Authtics Host"] }), _jsx("span", { style: { fontSize: '12px', color: '#333', textAlign: 'center' }, children: "A lightweight, fast, and secure web server for modern web applications." }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Version" }), _jsxs("span", { style: { fontSize: '12px', color: 'blue' }, children: ["v", hostVersion] })] }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Made By" }), _jsx("span", { style: { fontSize: '12px', color: 'orange' }, children: "bananakitssu" })] }), _jsxs("a", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                    cursor: 'pointer',
-                                                    textDecoration: 'none'
-                                                }, href: "https://www.npmjs.com/package/@bananacool467/authtics-host", children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Documentation" }), _jsx("span", { style: { fontSize: '12px', color: '#333' }, children: _jsx(ChevronRight, { size: 12 }) })] })] })] })) : serverInfoOpen ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                                            padding: '6px 8px',
-                                            borderBottom: '1px solid #ddd',
-                                            background: '#fff',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: '6px',
-                                        }, children: [_jsxs(PanelButton, { onClick: () => setServerInfoOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Server, { size: 12, color: "#f472b6" }), " Server Info"] })] }), datRestrictionMissing ? (_jsx(SecuredTab, {})) : (_jsx(_Fragment, {})), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: (datRestrictionMissing ? 'none' : 'flex'), flexDirection: 'column', gap: '8px' }, children: [_jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Server uptime" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: uptime })] }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Total requests" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: requests })] }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Total current users" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: users })] }), _jsx(Sparkline, { data: cpuUsageHistory, color: "#3b82f6", label: "CPU Usage", unit: "" }), _jsx(Sparkline, { data: heapUsageHistory, color: "#3b82f6", label: "Heap Used", unit: "" })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: { padding: '8px', gap: '4px', display: 'flex', flexDirection: 'column' }, children: [_jsxs(PanelButton, { onClick: () => setConsoleOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Terminal, { size: 12, color: "#16a34a" }), " Console"] }), logs.length > 0 && (_jsx("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px' }, children: logs.length }))] }), _jsxs(PanelButton, { onClick: () => setRouteOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Route, { size: 12, color: "#3b82f6" }), " Route"] }), _jsxs("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '4px' }, children: [datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" }), pathName] })] }), _jsxs(PanelButton, { onClick: () => setWebpageInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Globe, { size: 12, color: "#3b82f6" }), " Webpage Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsx(PanelButton, { onClick: () => setNetworkOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: _jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Wifi, { size: 12, color: "#3b82f6" }), " Network"] }) }), _jsxs(PanelButton, { onClick: () => setClientInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Info, { size: 12, color: "#3b82f6" }), " Client Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsxs(PanelButton, { onClick: () => setAboutHostOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(ShieldCheck, { size: 12, color: "#f472b6" }), " About Host"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsxs(PanelButton, { onClick: () => setServerInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Server, { size: 12, color: "#f472b6" }), " Server Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] })] }), _jsxs("div", { style: {
-                                            padding: '6px 8px',
-                                            borderTop: '1px solid #ddd',
-                                            background: '#fff',
-                                            display: 'flex',
-                                            gap: '6px',
-                                            overflowY: 'auto',
-                                            maxHeight: '260px',
-                                            flexDirection: 'column',
-                                        }, children: [_jsxs("div", { style: {
-                                                    justifyContent: 'space-between',
-                                                    padding: '6px 10px',
-                                                    background: '#fff',
-                                                    borderRadius: '10px',
-                                                    border: '1px solid #eee',
-                                                    fontSize: '12px',
-                                                    color: '#333',
-                                                    display: 'flex'
-                                                }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333', position: 'relative' }, children: "DAT (Developer Access Token)" }), _jsxs("div", { style: { position: 'relative',
-                                                            display: 'inline-flex' }, children: [_jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: token }), tokenHidden && (_jsxs("div", { style: {
-                                                                    position: 'absolute',
-                                                                    top: 0, left: 0,
-                                                                    marginTop: '-2.5px',
-                                                                    width: '100%', height: '100%',
-                                                                    backdropFilter: 'blur(10px)',
-                                                                    backgroundColor: 'rgba(255,255,255,0.3)',
-                                                                    cursor: 'pointer',
-                                                                    padding: '2.5px 2.5px',
-                                                                    borderRadius: '8px',
-                                                                    textAlign: 'center',
-                                                                    display: 'flex',
-                                                                    justifyContent: 'center',
-                                                                    alignItems: 'center',
-                                                                    gap: '4px'
-                                                                }, onClick: () => setTokenHidden(false), children: [_jsx(Eye, { size: 12 }), "Click to reveal"] }))] })] }), tokenLength !== 16 ? (_jsx(_Fragment, { children: _jsxs("div", { style: {
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "SSL" }), _jsx("span", { style: { fontSize: '12px', color: (protocol === 'HTTPS' ? '#16a34a' : '#e53e3e') }, children: protocol === 'HTTPS' ? 'Yes' : 'No' })] }), _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Renderer Type" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: isSsr ? 'SSR (Server-Side Rendering)' : 'CSR (Client-Side Rendering)' })] }), _jsxs("div", { style: {
                                                         display: 'flex',
-                                                        background: '#ba4e4e',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Compiler Type" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: compilerType })] })] })] })) : clientInfoOpen && !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                                padding: '6px 8px',
+                                                borderBottom: '1px solid #ddd',
+                                                background: '#fff',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: '6px',
+                                            }, children: [_jsxs(PanelButton, { onClick: () => setClientInfoOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Info, { size: 12, color: "#3b82f6" }), " Client Info"] })] }), datRestrictionMissing ? (_jsx(SecuredTab, {})) : (_jsx(_Fragment, {})), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: (datRestrictionMissing ? 'none' : 'flex'), flexDirection: 'column', gap: '8px' }, children: [_jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
                                                         borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "HTTP Version" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: "v" + httpVersion })] }), _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
                                                         padding: '6px 10px',
-                                                        justifyContent: 'left',
-                                                        alignItems: 'center',
-                                                        gap: '6px',
-                                                        color: '#fff',
-                                                        flexDirection: 'row',
-                                                    }, children: [_jsx(CircleX, { size: 12 }), "Invalid Developer Access Token (DAT)"] }) })) : (_jsx(_Fragment, {})), hostVersion === "0.0.1-beta.9" ? (_jsx(_Fragment, { children: _jsx("div", { style: {
+                                                        background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "User Agent" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: navigator.userAgent })] }), _jsxs("div", { style: {
                                                         display: 'flex',
-                                                        background: 'orange',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
                                                         borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "OS" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: getOS() })] }), _jsx(Sparkline, { data: fpsHistory, color: frames.current < 30 ? '#e53e3e' : frames.current < 60 ? '#d97706' : '#16a34a', label: "FPS", unit: " frames" })] })] })) : aboutHostOpen && !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                                padding: '6px 8px',
+                                                borderBottom: '1px solid #ddd',
+                                                background: '#fff',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: '6px',
+                                            }, children: [_jsxs(PanelButton, { onClick: () => setAboutHostOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(ShieldCheck, { size: 12, color: "#f472b6" }), " About Host"] })] }), datRestrictionMissing ? (_jsx(SecuredTab, {})) : (_jsx(_Fragment, {})), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: (datRestrictionMissing ? 'none' : 'flex'), flexDirection: 'column', gap: '8px' }, children: [_jsxs("span", { style: { fontSize: '24px', color: '#333', fontWeight: 'bold', textAlign: 'center', display: 'flex', alignItems: 'center', flexDirection: 'column', gap: '6px' }, children: [_jsx(ShieldCheck, { size: 36, color: "#f472b6" }), "Authtics Host"] }), _jsx("span", { style: { fontSize: '12px', color: '#333', textAlign: 'center' }, children: "A lightweight, fast, and secure web framework for modern web applications." }), _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
                                                         padding: '6px 10px',
-                                                        justifyContent: 'left',
-                                                        alignItems: 'center',
-                                                        gap: '6px',
-                                                        color: '#fff',
-                                                        flexDirection: 'row',
-                                                    }, children: "Updates to security. Apps with version 0.0.1-beta.9 and over will now require DAT restriction to access remote features like restarting and shutting down the app." }) })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { restart(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: '#ba4e4e' }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: "Restart App" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '4px' }, children: [_jsx(Info, { size: 10 }), "Restarting the app is unavaliable. Set \"dat\" in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { shutDown(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: '#ba4e4e' }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: "Shut Down App" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '4px' }, children: [_jsx(Info, { size: 10 }), "Shutting down the app is unavaliable. Set \"dat\" in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { pause_Resume_Users(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: '#ba4e4e' }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: usersPausedRealInfo ? "Resume Users" : "Pause Users" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '4px' }, children: [_jsx(Info, { size: 10 }), "Pausing users from accessing the app is unavaliable. Set \"dat\" in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {}))] })] })) }) }), datMatch ? (_jsxs("div", { onClick: () => setOpen(o => !o), style: {
+                                                        background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Version" }), _jsxs("span", { style: { fontSize: '12px', color: 'blue' }, children: ["v", hostVersion] })] }), _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Made By" }), _jsx("span", { style: { fontSize: '12px', color: 'orange' }, children: "bananakitssu" })] }), _jsxs("a", { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                        cursor: 'pointer',
+                                                        textDecoration: 'none'
+                                                    }, href: "https://www.npmjs.com/package/@bananacool467/authtics-host", children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Documentation" }), _jsx("span", { style: { fontSize: '12px', color: '#333' }, children: _jsx(ChevronRight, { size: 12 }) })] })] })] })) : serverInfoOpen && !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                                padding: '6px 8px',
+                                                borderBottom: '1px solid #ddd',
+                                                background: '#fff',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: '6px',
+                                            }, children: [_jsxs(PanelButton, { onClick: () => setServerInfoOpen(false), style: { color: '#555' }, children: [_jsx(ArrowLeft, { size: 12 }), " Back"] }), _jsxs("span", { style: { fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px', color: '#333' }, children: [_jsx(Server, { size: 12, color: "#f472b6" }), " Server Info"] })] }), datRestrictionMissing ? (_jsx(SecuredTab, {})) : (_jsx(_Fragment, {})), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: (datRestrictionMissing ? 'none' : 'flex'), flexDirection: 'column', gap: '8px' }, children: [_jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Server uptime" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: uptime })] }), _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Total requests" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: requests })] }), _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Total current users" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: users })] }), _jsx(Sparkline, { data: cpuUsageHistory, color: "#3b82f6", label: "CPU Usage", unit: "" }), _jsx(Sparkline, { data: heapUsageHistory, color: "#3b82f6", label: "Heap Used", unit: "" })] })] })) : !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { padding: '8px', gap: '4px', display: 'flex', flexDirection: 'column' }, children: [_jsxs(PanelButton, { onClick: () => setConsoleOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Terminal, { size: 12, color: "#16a34a" }), " Console"] }), logs.length > 0 && (_jsx("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px' }, children: logs.length }))] }), _jsxs(PanelButton, { onClick: () => setRouteOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Route, { size: 12, color: "#3b82f6" }), " Route"] }), _jsxs("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '4px' }, children: [datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" }), pathName] })] }), _jsxs(PanelButton, { onClick: () => setWebpageInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Globe, { size: 12, color: "#3b82f6" }), " Webpage Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsx(PanelButton, { onClick: () => setNetworkOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: _jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Wifi, { size: 12, color: "#3b82f6" }), " Network"] }) }), _jsxs(PanelButton, { onClick: () => setClientInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Info, { size: 12, color: "#3b82f6" }), " Client Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsxs(PanelButton, { onClick: () => setAboutHostOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(ShieldCheck, { size: 12, color: "#f472b6" }), " About HostJS"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] }), _jsxs(PanelButton, { onClick: () => setServerInfoOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Server, { size: 12, color: "#f472b6" }), " Server Info"] }), datRestrictionMissing && _jsx(TriangleAlert, { size: 12, color: "orange" })] })] }), _jsxs("div", { style: {
+                                                padding: '6px 8px',
+                                                borderTop: '1px solid #ddd',
+                                                background: '#fff',
+                                                display: 'flex',
+                                                gap: '6px',
+                                                overflowY: 'auto',
+                                                maxHeight: '260px',
+                                                flexDirection: 'column',
+                                            }, children: [_jsxs("div", { style: {
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        fontSize: '12px',
+                                                        color: '#333',
+                                                        display: 'flex'
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333', position: 'relative' }, children: "DAT (Developer Access Token)" }), _jsxs("div", { style: { position: 'relative',
+                                                                display: 'inline-flex' }, children: [_jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: token }), tokenHidden && (_jsxs("div", { style: {
+                                                                        position: 'absolute',
+                                                                        top: 0, left: 0,
+                                                                        marginTop: '-2.5px',
+                                                                        width: '100%', height: '100%',
+                                                                        backdropFilter: 'blur(10px)',
+                                                                        backgroundColor: 'rgba(255,255,255,0.3)',
+                                                                        cursor: 'pointer',
+                                                                        padding: '2.5px 2.5px',
+                                                                        borderRadius: '8px',
+                                                                        textAlign: 'center',
+                                                                        display: 'flex',
+                                                                        justifyContent: 'center',
+                                                                        alignItems: 'center',
+                                                                        gap: '4px'
+                                                                    }, onClick: () => setTokenHidden(false), children: [_jsx(Eye, { size: 12 }), "Click to reveal"] }))] })] }), tokenLength !== 16 ? (_jsx(_Fragment, { children: _jsxs("div", { style: {
+                                                            display: 'flex',
+                                                            background: '#ba4e4e',
+                                                            borderRadius: '10px',
+                                                            padding: '6px 10px',
+                                                            justifyContent: 'left',
+                                                            alignItems: 'center',
+                                                            gap: '6px',
+                                                            color: '#fff',
+                                                            flexDirection: 'row',
+                                                        }, children: [_jsx(CircleX, { size: 12 }), "Invalid Developer Access Token (DAT)"] }) })) : (_jsx(_Fragment, {})), hostVersion === "0.0.1-beta.9" ? (_jsx(_Fragment, { children: _jsx("div", { style: {
+                                                            display: 'flex',
+                                                            background: 'orange',
+                                                            borderRadius: '10px',
+                                                            padding: '6px 10px',
+                                                            justifyContent: 'left',
+                                                            alignItems: 'center',
+                                                            gap: '6px',
+                                                            color: '#fff',
+                                                            flexDirection: 'row',
+                                                        }, children: "Updates to security. Apps with version 0.0.1-beta.9 and over will now require DAT restriction to access remote features like restarting and shutting down the app." }) })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { restart(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#ba4e4e') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: "Restart App" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Restarting the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { shutDown(); }, fullWidth: true, style: { color: '#fff', justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#ba4e4e') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: "Shut Down App" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Shutting down the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {})), _jsx(PanelButton, { onClick: () => { pause_Resume_Users(); }, fullWidth: true, style: { color: (datRestrictionMissing ? '#fff' : '#333'), justifyContent: 'center', height: '32px', background: (datRestrictionMissing ? '#bdbdbd' : '#f2f2f2') }, disabled: datRestrictionMissing, children: _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', textAlign: 'center' }, children: usersPausedRealInfo ? "Resume Users" : "Pause Users" }) }), datRestrictionMissing ? (_jsxs("span", { style: { display: 'flex', opacity: 0.5, fontSize: 10, justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(Info, { size: 30 }), "Pausing users from accessing the app is unavaliable. Set \"dat\" to your current DAT in the Authtics Host config to set restriction and then restart."] })) : (_jsx(_Fragment, {}))] })] })) : (_jsx(_Fragment, {}))] }) }), datMatch ? (_jsxs("div", { onClick: () => setOpen(o => !o), style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',
@@ -1222,6 +1239,7 @@ export default function DevPanel() {
                             width: 'fit-content',
                             boxSizing: 'border-box',
                             lineHeight: '1',
+                            pointerEvents: 'auto',
                         }, children: [_jsx(ShieldCheck, { size: 16, color: "#f472b6", style: { flexShrink: 0 } }), _jsx("div", { style: {
                                     maxWidth: hasIssue ? '160px' : '0px',
                                     opacity: hasIssue ? 1 : 0,

package/dist/renderEngine.js

@@ -5,6 +5,8 @@ import * as esbuild from "esbuild";
 import React from "react";
 import { renderToString } from "react-dom/server";
 import { tempFileForTsx, writeTempFile, readTempFile, ensureTempDirs, } from "./rendererTempFiles.js";
+import { createRequire } from "node:module";
+const customRequire = createRequire(import.meta.url);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const NODE_BUILTINS = [
@@ -155,6 +157,10 @@ function isCacheValid(tsxPath, tempPath, serverCjsPath, templatePath, devPanelPa
 }
 const HMR_SCRIPT = `<script>(function(){
   var reloading=false;
+  window.addEventListener('beforeunload', function() {
+    reloading = true;
+  });
+
   var es=new EventSource('/hmr');
   es.onmessage=function(e){
     if(e.data==='reload'&&!reloading){
@@ -164,11 +170,12 @@ const HMR_SCRIPT = `<script>(function(){
     }
   };
   es.onerror=function(){
-    // onerror fires on both server-down AND on page-unload (SSE closed by navigation).
-    // Guard with reloading so a navigate-away never schedules a second reload.
     if(!reloading){
       setTimeout(function(){
-        if(!reloading){reloading=true;window.location.reload();}
+        if(!reloading){
+          reloading=true;
+          window.location.reload();
+        }
       },1500);
     }
   };
@@ -227,14 +234,20 @@ export async function renderPage(tsxPath, reqUrl, showPanel = true, compiler = '
             serverCode = await buildWithEsbuild(virtualServer, process.cwd(), 'node');
             clientCode = await buildWithEsbuild(virtualClient, process.cwd(), 'browser');
         }
-        fs.writeFileSync(serverCjsPath, serverCode || "", "utf-8");
+        await fs.promises.writeFile(serverCjsPath, serverCode || "", "utf-8");
         writeTempFile(tempPath, JSON.stringify({ clientCode }));
         freshWrite = true;
     }
     fileHandler ? fileHandler(clientCode || "", `/${path.basename(tempPath).replace(".json", ".js").replace(".tsx_", ".").toLowerCase()}`) : null;
-    const serverModule = await import(freshWrite ? `${serverCjsPath}?t=${Date.now()}` : serverCjsPath);
-    const exports = serverModule.default ?? serverModule;
-    const PageComponent = exports.default ?? exports.Page ?? exports.page ?? null;
+    const absoluteServerPath = path.resolve(serverCjsPath);
+    delete customRequire.cache[absoluteServerPath];
+    const serverModule = customRequire(absoluteServerPath);
+    const exports = serverModule.__esModule ? serverModule.default : serverModule;
+    const PageComponent = exports?.default?.default ??
+        exports?.default ??
+        exports?.Page ??
+        exports?.page ??
+        (typeof exports === 'function' ? exports : null);
     const DevPanelComponent = usesDevPanel ? (exports.DevPanel ?? null) : null;
     if (!PageComponent) {
         throw new Error(`renderPage: no default export found in ${tsxPath}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bananacool467/authtics-host",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Authtics Host, A Next.js-inspired SSR framework for Node.js with TypeScript and JSX support.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",