@bananacool467/authtics-host 0.2.5 → 0.2.7

package/dist/devPanel.js

@@ -1,27 +1,119 @@
 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, Power } from 'lucide-react';
-function getCallerSource() {
+import { ShieldCheck, Shield, CircleX, ChevronDown, ChevronUp, Bug, AlertTriangle, Info, ArrowLeft, Wifi, Terminal, Route, Globe, ChevronRight, ChevronLeft, Server, Cog, TriangleAlert, Eye, Zap, Power, Check as Tick, CheckCircle2 } from 'lucide-react';
+import { TraceMap, originalPositionFor, sourceContentFor, } from "@jridgewell/trace-mapping";
+export async function mapGeneratedLocation(location) {
     try {
-        const stack = new Error().stack ?? '';
-        const lines = stack.split('\n');
-        for (let i = 3; i < lines.length; i++) {
-            const line = lines[i];
-            if (line.trim() === '')
-                continue;
-            const match = line.match(/\(?(https?:\/\/[^)]+)\)?$/) ??
-                line.match(/at\s+(https?:\/\/\S+)/);
-            if (match) {
-                const url = match[1];
-                const parts = url.replace(/\?.*/, '').split('/');
-                const file = parts[parts.length - 1];
-                const colonLine = url.match(/:(\d+):\d+$/);
-                return colonLine ? `${file.split(':')[0]}:${colonLine[1]}` : file;
+        if (!location.file || !location.line || !location.column) {
+            return location;
+        }
+        const response = await fetch(location.file, {
+            cache: "no-store",
+        });
+        if (!response.ok) {
+            return location;
+        }
+        const generatedCode = await response.text();
+        const sourceMapReference = generatedCode.match(/\/\/[#@]\s*sourceMappingURL=([^\s]+)/)?.[1];
+        if (!sourceMapReference) {
+            console.warn("[HostJS] No source map URL found in", location.file);
+            return location;
+        }
+        let sourceMapJson;
+        if (sourceMapReference.startsWith("data:")) {
+            const commaIndex = sourceMapReference.indexOf(",");
+            if (commaIndex === -1)
+                return location;
+            const metadata = sourceMapReference.slice(0, commaIndex);
+            const encodedMap = sourceMapReference.slice(commaIndex + 1);
+            if (metadata.includes(";base64")) {
+                const binary = atob(encodedMap);
+                const bytes = Uint8Array.from(binary, (character) => character.charCodeAt(0));
+                sourceMapJson = new TextDecoder().decode(bytes);
+            }
+            else {
+                sourceMapJson = decodeURIComponent(encodedMap);
             }
         }
+        else {
+            const mapUrl = new URL(sourceMapReference, response.url || new URL(location.file, window.location.href).href);
+            const mapResponse = await fetch(mapUrl, {
+                cache: "no-store",
+                credentials: "same-origin",
+            });
+            if (!mapResponse.ok) {
+                console.warn("[HostJS] Could not load source map:", mapUrl.href);
+                return location;
+            }
+            sourceMapJson = await mapResponse.text();
+        }
+        const sourceMap = JSON.parse(sourceMapJson);
+        const traceMap = new TraceMap(sourceMap);
+        const original = originalPositionFor(traceMap, {
+            line: location.line,
+            column: Math.max(0, location.column - 1),
+        });
+        if (!original.source || !original.line) {
+            return location;
+        }
+        const sourceText = sourceContentFor(traceMap, original.source) ?? "";
+        const originalLine = sourceText.split(/\r?\n/)[original.line - 1] ?? "";
+        return {
+            ...location,
+            file: original.source,
+            line: original.line,
+            column: (original.column ?? 0) + 1,
+            sourceText: originalLine,
+            mapped: true,
+            lines: getApproximateLines(sourceText, original.line),
+        };
+    }
+    catch (error) {
+        console.warn("[HostJS] Could not map source location:", error);
+        return location;
     }
-    catch { }
-    return '';
+}
+function getCallerSource() {
+    const location = parseStackLocation(new Error().stack ?? "");
+    if (!location) {
+        return "";
+    }
+    return `${location.file}:${location.line}:${location.column}`;
+}
+function getApproximateLines(source, line) {
+    const allLines = source.split(/\r?\n/);
+    const start = Math.max(0, line - 2);
+    const end = Math.min(allLines.length, line + 1);
+    return allLines.slice(start, end).map((text, index) => {
+        const lineNumber = start + index + 1;
+        return `${lineNumber} | ${text}`;
+    });
+}
+function getPreciseMarker(sourceLine, column, length = 1, lineNumber) {
+    const safeColumn = Math.min(Math.max(1, column), Math.max(1, sourceLine.length + 1));
+    const marker = length > 1
+        ? "\u25B2" + "~".repeat(length - 1)
+        : "\u25B2";
+    return `${String(lineNumber).length ? " ".repeat(String(lineNumber).length) + " " : "   "}| ${" ".repeat(safeColumn - 1)}${marker}`;
+}
+function parseStackLocations(stack) {
+    const locations = [];
+    for (const stackLine of stack.split(/\r?\n/)) {
+        const match = stackLine.match(/(?:\(|\s|^)((?:https?:\/\/|file:\/\/|\/|\.\.?\/)[^)\s]+):(\d+):(\d+)\)?$/);
+        if (!match)
+            continue;
+        const [, file, line, column] = match;
+        locations.push({
+            file: file.replace(/\?.*$/, ""),
+            line: Number(line),
+            column: Number(column),
+            mapped: false,
+        });
+    }
+    return locations;
+}
+function parseStackLocation(stack, skip = 0) {
+    return parseStackLocations(stack)[skip];
 }
 const LOG_TYPES = ['Log', 'Info', 'Warn', 'Error', 'Debug'];
 let fetchId = 0;
@@ -278,19 +370,87 @@ function installConsoleInterceptor() {
     if (window.__authtics_intercepted__)
         return;
     window.__authtics_intercepted__ = true;
+    window.addEventListener("error", event => {
+        const error = event.error;
+        const stack = error?.stack ?? "";
+        const location = stack
+            ? parseStackLocation(stack)
+            : event.filename
+                ? {
+                    file: event.filename,
+                    line: event.lineno || 0,
+                    column: event.colno || 0,
+                    mapped: false,
+                }
+                : undefined;
+        window.dispatchEvent(new CustomEvent("authtics:log", {
+            detail: {
+                type: "Error",
+                message: error?.message || event.message,
+                source: location?.file || "browser",
+                stack,
+                location,
+                time: Date.now(),
+            },
+        }));
+    });
+    window.addEventListener("unhandledrejection", event => {
+        const reason = event.reason;
+        const error = reason instanceof Error
+            ? reason
+            : new Error(String(reason));
+        const stack = error.stack ?? "";
+        window.dispatchEvent(new CustomEvent("authtics:log", {
+            detail: {
+                type: "Error",
+                message: error.message,
+                source: "unhandledrejection",
+                stack,
+                location: parseStackLocation(stack),
+                time: Date.now(),
+            },
+        }));
+    });
     LOG_TYPES.forEach(type => {
         const t = type.toLowerCase();
         const original = console[t].bind(console);
         console[t] = (...args) => {
             original(...args);
-            window.dispatchEvent(new CustomEvent('authtics:log', {
-                detail: {
-                    type,
-                    message: args.map(a => typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a)).join(' '),
-                    time: Date.now(),
-                    source: getCallerSource(),
+            const errorArgument = args.find(value => value instanceof Error);
+            const stack = errorArgument?.stack || new Error().stack || "";
+            const generatedLocation = parseStackLocation(stack, errorArgument ? 0 : 1);
+            const message = args
+                .map(value => {
+                if (value instanceof Error) {
+                    return value.message;
                 }
-            }));
+                if (typeof value === "object") {
+                    try {
+                        return JSON.stringify(value, null, 2);
+                    }
+                    catch {
+                        return String(value);
+                    }
+                }
+                return String(value);
+            })
+                .join(" ");
+            void mapGeneratedLocation(generatedLocation ?? {
+                file: "",
+                line: 0,
+                column: 0,
+            }).then(location => {
+                window.dispatchEvent(new CustomEvent("authtics:log", {
+                    detail: {
+                        type,
+                        message,
+                        time: Date.now(),
+                        source: location.file || getCallerSource(),
+                        stack,
+                        location: location.file ? location : undefined,
+                    },
+                }));
+            });
         };
     });
 }
@@ -340,7 +500,7 @@ export default function DevPanel() {
     const [logs, setLogs] = useState([]);
     const [open, setOpen] = useState(false);
     const [errorBoxOpen, setErrorBoxOpen] = useState(false);
-    const [errorMsgs, setErrorMsgs] = useState([]);
+    const [errors, setErrors] = useState([]);
     const [selectedError, setSelectedError] = useState(1);
     const [consoleOpen, setConsoleOpen] = useState(false);
     const [networkOpen, setNetworkOpen] = useState(false);
@@ -349,8 +509,18 @@ export default function DevPanel() {
     const [clientInfoOpen, setClientInfoOpen] = useState(false);
     const [aboutHostOpen, setAboutHostOpen] = useState(false);
     const [serverInfoOpen, setServerInfoOpen] = useState(false);
+    const [panelCustomOpen, setPanelCustomOpen] = useState(false);
+    const [settingsOpen, setSettingsOpen] = useState(false);
     const [shutdown, setShutdown] = useState(false);
     const [shuttingDown, setShuttingDown] = useState(false);
+    const [packageSecurityOpen, setPackageSecurityOpen] = useState(false);
+    const [highRiskDeps, setHighRiskDeps] = useState([]);
+    const [mediumRiskDeps, setMediumRiskDeps] = useState([]);
+    const [lowRiskDeps, setLowRiskDeps] = useState([]);
+    const [panelColor, setPanelColor] = useState({
+        background: '#111',
+        border: '#333'
+    });
     const [hasIssue, setHasIssue] = useState(false);
     const [ping__, setPing__] = useState(0);
     const [networkFetches, setNetworkFetches] = useState([]);
@@ -363,7 +533,7 @@ export default function DevPanel() {
     const [hostName, setHostName] = useState(undefined);
     const [protocol, setProtocol] = useState(undefined);
     const [path, setPath] = useState(undefined);
-    const [isSsr, setIsSsr] = useState(false);
+    const [renderType, setRenderType] = useState("???");
     const datRestrictionMissingRef = useRef(true);
     const cpuUsage = useRef(0);
     const heapUsage = useRef(0);
@@ -371,7 +541,7 @@ export default function DevPanel() {
     const [datMatch, setDatMatch] = useState(false);
     const [compilerType, setCompilerType] = useState("?");
     const [httpVersion, setHttpVersion] = useState("v?.?");
-    const [errorBoxOpenable, setErrorBoxOpenable] = useState(false);
+    const [errorBoxOpenable, setErrorBoxOpenable] = useState(true);
     const [uptime, setUptime] = useState("00:00:00:00");
     const [requests, setRequests] = useState(0);
     const [hostVersion, setHostVersion] = useState("Loading...");
@@ -379,6 +549,17 @@ export default function DevPanel() {
     const [token, setToken] = useState(null);
     const [tokenLength, setTokenLength] = useState(0);
     const [tokenHidden, setTokenHidden] = useState(true);
+    const [locationMode, setLocationMode] = useState("approximate");
+    const NOTIFICATION_SLEEP_MS = 10 * 60 * 1000;
+    const notificationSleepingUntilRef = useRef(0);
+    const [notificationSleepingUntil, setNotificationSleepingUntil] = useState(0);
+    const sleepErrorNotifications = () => {
+        const until = Date.now() + NOTIFICATION_SLEEP_MS;
+        notificationSleepingUntilRef.current = until;
+        setNotificationSleepingUntil(until);
+        setErrorBoxOpen(false);
+        setHasIssue(false);
+    };
     const fpsSpanRef = useRef(null);
     const frameCount = useRef(0);
     const frames = useRef(0);
@@ -387,11 +568,33 @@ export default function DevPanel() {
     const [datRestrictionMissing, setDatRestrictionMissing] = useState(true);
     const [heapResult, setHeapResult] = useState("0 Bytes / 0 Bytes");
     const cookie = {
-        set: (k, v) => document.cookie = `${k}=${v}; path=/`,
-        get: (k) => Object.fromEntries(document.cookie.split(";")
-            .filter(Boolean)
-            .map(c => c.trim().split("=")))[k],
-        del: (k) => document.cookie = `${k}=; path=/; max-age=0`
+        set: (k, v, sS = "Lax", s = true, mA = null) => {
+            const cookieParts = [`${encodeURIComponent(k)}=${encodeURIComponent(v)}`, "path=/"];
+            if (mA !== null) {
+                cookieParts.push(`max-age=${mA}`);
+                const d = new Date();
+                d.setTime(d.getTime() + (mA * 1000));
+                cookieParts.push(`expires=${d.toUTCString()}`);
+            }
+            if (s)
+                cookieParts.push("secure");
+            if (sS)
+                cookieParts.push(`samesite=${sS}`);
+            document.cookie = cookieParts.join("; ");
+        },
+        get: (k) => {
+            const cookies = document.cookie.split(";").filter(Boolean);
+            for (const c of cookies) {
+                const [key, ...valParts] = c.trim().split("=");
+                if (decodeURIComponent(key) === k) {
+                    return decodeURIComponent(valParts.join("="));
+                }
+            }
+            return undefined;
+        },
+        del: (k) => {
+            document.cookie = `${encodeURIComponent(k)}=; path=/; max-age=0; samesite=Lax; secure`;
+        }
     };
     const [doc, setDoc] = useState(null);
     const [filters, setFilters] = useState({
@@ -465,15 +668,15 @@ export default function DevPanel() {
             }
             return "";
         };
-        const isSSR = async () => {
-            const resp = await fetch('/__authtics_host_apis__/get-is-ssr', {
+        const getRenderType = async () => {
+            const resp = await fetch('/__authtics_host_apis__/get-render-type', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({})
             });
             if (resp.status === 200) {
                 const data = await resp.json();
-                setIsSsr(data.isSsr);
+                setRenderType(data.renderType);
             }
         };
         const getUsage = async () => {
@@ -561,7 +764,7 @@ export default function DevPanel() {
                     getPath();
                     getCompilerType();
                     getHttpVersion();
-                    isSSR();
+                    getRenderType();
                     userSettings();
                     getHostVersion();
                     setInterval(() => {
@@ -664,6 +867,16 @@ export default function DevPanel() {
         }, 1000);
         return () => clearInterval(interval);
     }, []);
+    useEffect(() => {
+        if (!notificationSleepingUntil)
+            return;
+        const remaining = notificationSleepingUntil - Date.now();
+        const timer = window.setTimeout(() => {
+            notificationSleepingUntilRef.current = 0;
+            setNotificationSleepingUntil(0);
+        }, Math.max(remaining, 0));
+        return () => window.clearTimeout(timer);
+    }, [notificationSleepingUntil]);
     useEffect(() => {
         installConsoleInterceptor();
         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) => {
@@ -671,18 +884,39 @@ export default function DevPanel() {
         }, (received) => {
             pendingReceived.current += received;
         });
-        const handler = (e) => {
-            const detail = e.detail;
-            setLogs(prev => [...prev.slice(-19999), { ...detail, id: Date.now() + Math.random() }]);
-            if (detail.type === 'Error') {
-                setHasIssue(true);
-                setErrorMsgs(prev => [...prev, detail.message]);
-                setErrorBoxOpen(true);
+        const handler = (event) => {
+            const detail = event.detail;
+            const entry = {
+                ...detail,
+                id: Date.now() + Math.random(),
+            };
+            setLogs(prev => [...prev.slice(-99), entry]);
+            const isNotificationSleeping = notificationSleepingUntilRef.current > Date.now();
+            if (detail.type === "Error") {
+                setErrors(prev => [...prev, entry]);
+                if (!isNotificationSleeping) {
+                    setHasIssue(true);
+                    setErrorBoxOpen(true);
+                }
             }
-            ;
         };
         try {
             const existingToken = cookie.get('dat');
+            const panelColor = cookie.get('panelColor');
+            if (panelColor) {
+                setPanelColor({
+                    background: panelColor.split('|')[0],
+                    border: panelColor.split('|')[1]
+                });
+            }
+            else {
+                const cfg = window.__authtics_config__;
+                const serverDevMode = cfg?.devMode !== false;
+                const serverDatRestricted = cfg?.datRestricted === true;
+                if (serverDevMode && !serverDatRestricted) {
+                    cookie.set('panelColor', '#111|#333', "Lax", true, 365 * 24 * 60 * 60);
+                }
+            }
             if (existingToken) {
                 setToken(existingToken);
                 let length_ = existingToken?.split('');
@@ -696,7 +930,7 @@ export default function DevPanel() {
                 const serverDatRestricted = cfg?.datRestricted === true;
                 if (serverDevMode && !serverDatRestricted) {
                     const newToken = generateToken();
-                    cookie.set('dat', newToken);
+                    cookie.set('dat', newToken, "Lax", true, 5 * 365 * 24 * 60 * 60);
                     setToken(newToken);
                     let length_ = newToken?.split('');
                     let length;
@@ -815,11 +1049,11 @@ export default function DevPanel() {
                     left: 0,
                     width: '100%',
                     height: '100%',
-                    display: errorBoxOpen && errorBoxOpenable && errorMsgs.length > 0 ? 'flex' : 'none',
+                    display: errorBoxOpen && errorBoxOpenable && errors.length > 0 ? 'flex' : 'none',
                     justifyContent: 'center',
                     alignItems: 'center',
-                    transition: errorBoxOpen && errorBoxOpenable && errorMsgs.length > 0 ? 'opacity 0.25s ease' : '',
-                }, ref: errorBoxRef, children: errorBoxOpen && errorBoxOpenable && errorMsgs.length > 0 ? (_jsxs("div", { style: {
+                    transition: errorBoxOpen && errorBoxOpenable && errors.length > 0 ? 'opacity 0.25s ease' : '',
+                }, ref: errorBoxRef, children: errorBoxOpen && errorBoxOpenable && errors.length > 0 ? (_jsxs("div", { style: {
                         background: '#f7f7f7',
                         border: '1px solid #e6e3e3',
                         borderRadius: '10px',
@@ -828,7 +1062,9 @@ export default function DevPanel() {
                         display: 'flex',
                         flexDirection: 'column',
                         zIndex: 9999999,
-                        width: '320px'
+                        width: '320px',
+                        maxHeight: '320px',
+                        overflow: 'auto'
                     }, children: [_jsxs("div", { style: {
                                 padding: '6px 8px',
                                 display: 'flex',
@@ -845,19 +1081,83 @@ export default function DevPanel() {
                                         alignItems: 'center',
                                         whiteSpace: 'nowrap',
                                         gap: '4px'
-                                    }, children: [_jsx(ShieldCheck, { size: 16, color: "#f472b6", style: { flexShrink: 0 } }), " Authtics Host"] }), _jsxs("p", { style: { color: 'red', fontSize: '12px' }, children: ["Error found (", selectedError, "/", errorMsgs.length, ")"] }), _jsx(PanelButton, { onClick: () => { setErrorBoxOpen(false); }, style: { marginLeft: 'auto', }, children: "Close" })] }), _jsx("div", { style: {
+                                    }, children: [_jsx(ShieldCheck, { size: 16, color: "#f472b6", style: { flexShrink: 0 } }), " Authtics Host"] }), _jsxs("p", { style: { color: 'red', fontSize: '12px' }, children: ["Error found (", selectedError, "/", errors.length, ")"] }), _jsx(PanelButton, { onClick: () => { setErrorBoxOpen(false); sleepErrorNotifications(); }, style: { marginLeft: 'auto', }, children: "Close" })] }), _jsxs("div", { style: {
                                 padding: '6px 2px',
                                 display: 'flex',
                                 alignItems: 'center',
                                 gap: '6px',
-                                fontFamily: 'system-ui, sans-serif'
-                            }, children: _jsxs("p", { style: { color: 'red', fontSize: '24px', gap: '6px', display: 'flex', justifyContent: 'center', alignItems: 'center', marginLeft: '10px' }, children: [_jsx(CircleX, { size: 24, color: 'red' }), errorMsgs[selectedError - 1]] }) }), _jsxs("div", { style: {
+                                fontFamily: 'system-ui, sans-serif',
+                                flexDirection: 'column'
+                            }, children: [_jsxs("p", { style: { color: 'red', fontSize: '24px', gap: '6px', display: 'flex', justifyContent: 'left', alignItems: 'left', textAlign: 'left', marginLeft: '10px', whiteSpace: 'normal', wordBreak: 'break-word', width: '100%' }, children: [_jsx(CircleX, { size: 24, color: 'red' }), errors[selectedError - 1]?.message] }), _jsxs("div", { style: {
+                                        display: "flex",
+                                        gap: "6px",
+                                        marginTop: "10px",
+                                        marginBottom: "6px",
+                                        flexDirection: 'row'
+                                    }, children: [_jsx(PanelButton, { onClick: () => setLocationMode("approximate"), style: {
+                                                background: locationMode === "approximate"
+                                                    ? "#34a8eb"
+                                                    : undefined,
+                                            }, children: "Approximate" }), _jsx(PanelButton, { onClick: () => setLocationMode("precise"), style: {
+                                                background: locationMode === "precise"
+                                                    ? "#34a8eb"
+                                                    : undefined,
+                                            }, children: "Precise" })] }), (() => {
+                                    const selected = errors[selectedError - 1];
+                                    const location = selected?.location;
+                                    if (!location) {
+                                        return _jsx("p", { style: { textAlign: "left" }, children: "At an unknown location" });
+                                    }
+                                    const line = location.line || 0;
+                                    const column = location.column || 1;
+                                    return _jsxs("p", { style: { textAlign: "left" }, children: ["At ", location ? `${location.file.replace(window?.location.host, "")}:${line}:${column}` : `an unknown location`] });
+                                })(), (() => {
+                                    const selected = errors[selectedError - 1];
+                                    const location = selected?.location;
+                                    if (!location) {
+                                        return (_jsx("pre", { style: { color: "#777", fontSize: "12px" }, children: "No source location available." }));
+                                    }
+                                    const sourceLine = location.sourceText || "";
+                                    const line = location.line || 0;
+                                    const column = location.column || 1;
+                                    const length = location.length || 1;
+                                    if (locationMode === "precise") {
+                                        return (_jsxs("pre", { style: {
+                                                background: "#1e1e1e",
+                                                color: "#ddd",
+                                                padding: "8px",
+                                                overflowX: "auto",
+                                                fontSize: "12px",
+                                                width: "310px",
+                                                maxWidth: "90%",
+                                                whiteSpace: "pre-wrap",
+                                                wordBreak: "break-all",
+                                                overflowWrap: "break-word",
+                                                borderRadius: "10px"
+                                            }, children: [line, " | ", sourceLine, "\n", _jsx("div", { style: {
+                                                        color: "#f472b6"
+                                                    }, children: getPreciseMarker(sourceLine, column, length, line) })] }));
+                                    }
+                                    return (_jsx("pre", { style: {
+                                            background: "#1e1e1e",
+                                            color: "#ddd",
+                                            padding: "8px",
+                                            overflowX: "auto",
+                                            fontSize: "12px",
+                                            width: "310px",
+                                            maxWidth: "90%",
+                                            whiteSpace: "pre-wrap",
+                                            wordBreak: "break-all",
+                                            overflowWrap: "break-word",
+                                            borderRadius: "10px"
+                                        }, children: location.lines?.join("\n") || `` }));
+                                })()] }), _jsxs("div", { style: {
                                 padding: '6px 8px',
                                 display: 'flex',
                                 alignItems: 'center',
                                 gap: '6px',
                                 fontFamily: 'system-ui, sans-serif'
-                            }, children: [_jsxs(PanelButton, { onClick: () => { setSelectedError(selectedError - 1 < 1 ? selectedError : selectedError - 1); }, style: { marginLeft: 'auto', width: '50%', justifyContent: 'space-between', display: 'flex' }, children: ["Previous ", _jsx(ChevronLeft, { size: 12 })] }), _jsxs(PanelButton, { onClick: () => { setSelectedError(selectedError + 1 > errorMsgs.length ? selectedError : selectedError + 1); }, style: { marginLeft: 'auto', width: '50%', justifyContent: 'space-between', display: 'flex', background: '#34a8eb' }, children: ["Next ", _jsx(ChevronRight, { size: 12 })] })] })] })) : (_jsx(_Fragment, {})) }), _jsxs("div", { style: {
+                            }, children: [_jsxs(PanelButton, { onClick: () => { setSelectedError(selectedError - 1 < 1 ? selectedError : selectedError - 1); }, style: { marginLeft: 'auto', width: '50%', justifyContent: 'space-between', display: 'flex' }, children: [_jsx(ChevronLeft, { size: 12 }), " Previous"] }), _jsxs(PanelButton, { onClick: () => { setSelectedError(selectedError + 1 > errors.length ? selectedError : selectedError + 1); }, style: { marginLeft: 'auto', width: '50%', justifyContent: 'space-between', display: 'flex', background: '#34a8eb' }, children: ["Next ", _jsx(ChevronRight, { size: 12 })] })] })] })) : (_jsx(_Fragment, {})) }), _jsxs("div", { style: {
                     position: 'fixed',
                     bottom: '15px',
                     right: '15px',
@@ -1056,7 +1356,7 @@ export default function DevPanel() {
                                                         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: {
+                                                    }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Renderer Type" }), _jsx("span", { style: { fontSize: '12px', color: 'blue' }, children: renderType === "ssr" ? 'SSR (Server-Side Rendering)' : renderType === "csr" ? 'CSR (Client-Side Rendering)' : renderType === "ssg" ? 'SSG (Static Site Generation)' : renderType === "srtws" ? "SRTWS (Site Rendering Through WebSockets)" : '???' })] }), _jsxs("div", { style: {
                                                         display: 'flex',
                                                         justifyContent: 'space-between',
                                                         padding: '6px 10px',
@@ -1099,7 +1399,46 @@ export default function DevPanel() {
                                                         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: {
+                                                    }, 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" })] })] })) : panelCustomOpen && !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: () => setPanelCustomOpen(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(Cog, { size: 12, color: "#3b82f6" }), " Panel Configuration"] })] }), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx("span", { style: { fontSize: '12px', color: '#333' }, children: "Colors" }), _jsxs("div", { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        padding: '6px 10px',
+                                                        background: '#fff',
+                                                        borderRadius: '10px',
+                                                        border: '1px solid #eee',
+                                                        alignItems: 'center'
+                                                    }, children: [_jsxs("div", { style: { background: '#16a34a', width: '50px', height: '50px', borderRadius: '100px', cursor: 'pointer', alignItems: 'center', textAlign: 'center', justifyContent: 'center', flexDirection: 'column', display: 'flex', border: '1px solid #15803d', gap: '8px' }, onClick: () => {
+                                                                setPanelColor({
+                                                                    background: '#16a34a',
+                                                                    border: '#15803d'
+                                                                });
+                                                                cookie.set('panelColor', '#16a34a|#15803d', "Lax", true, 365 * 24 * 60 * 60);
+                                                            }, children: [panelColor.background === '#16a34a' ? _jsx(Tick, { color: "white", size: 12 }) : _jsx(_Fragment, {}), " ", _jsx("span", { style: { fontSize: '12px', color: '#fff' }, children: "Green" })] }), _jsxs("div", { style: { background: '#111', width: '50px', height: '50px', borderRadius: '100px', cursor: 'pointer', alignItems: 'center', textAlign: 'center', justifyContent: 'center', flexDirection: 'column', display: 'flex', border: '1px solid #333', gap: '8px' }, onClick: () => {
+                                                                setPanelColor({
+                                                                    background: '#111',
+                                                                    border: '#333'
+                                                                });
+                                                                cookie.set('panelColor', '#111|#333', "Lax", true, 365 * 24 * 60 * 60);
+                                                            }, children: [panelColor.background === '#111' ? _jsx(Tick, { color: "white", size: 12 }) : _jsx(_Fragment, {}), " ", _jsx("span", { style: { fontSize: '12px', color: '#fff' }, children: "Black" })] }), _jsxs("div", { style: { background: '#f7c623', width: '50px', height: '50px', borderRadius: '100px', cursor: 'pointer', alignItems: 'center', textAlign: 'center', justifyContent: 'center', flexDirection: 'column', display: 'flex', border: '1px solid #d9ad1e', gap: '8px' }, onClick: () => {
+                                                                setPanelColor({
+                                                                    background: '#f7c623',
+                                                                    border: '#d9ad1e'
+                                                                });
+                                                                cookie.set('panelColor', '#f7c623|#d9ad1e', "Lax", true, 365 * 24 * 60 * 60);
+                                                            }, children: [panelColor.background === '#f7c623' ? _jsx(Tick, { color: "white", size: 12 }) : _jsx(_Fragment, {}), " ", _jsx("span", { style: { fontSize: '12px', color: '#fff' }, children: "Yellow" })] }), _jsxs("div", { style: { background: '#3bb0ff', width: '50px', height: '50px', borderRadius: '100px', cursor: 'pointer', alignItems: 'center', textAlign: 'center', justifyContent: 'center', flexDirection: 'column', display: 'flex', border: '1px solid #3290cf', gap: '8px' }, onClick: () => {
+                                                                setPanelColor({
+                                                                    background: '#3bb0ff',
+                                                                    border: '#3290cf'
+                                                                });
+                                                                cookie.set('panelColor', '#3bb0ff|#3290cf', "Lax", true, 365 * 24 * 60 * 60);
+                                                            }, children: [panelColor.background === '#3bb0ff' ? _jsx(Tick, { color: "white", size: 12 }) : _jsx(_Fragment, {}), " ", _jsx("span", { style: { fontSize: '12px', color: '#fff' }, children: "Blue" })] })] })] })] })) : aboutHostOpen && !shutdown ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
                                                 padding: '6px 8px',
                                                 borderBottom: '1px solid #ddd',
                                                 background: '#fff',
@@ -1169,7 +1508,24 @@ export default function DevPanel() {
                                                         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: heapResult })] })] })) : !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: {
+                                                    }, 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: heapResult })] })] })) : packageSecurityOpen && !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: () => setPackageSecurityOpen(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(Shield, { size: 12, color: "#f472b6" }), " Package Security"] })] }), _jsxs("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx(ShieldCheck, { size: 36, color: "#f472b6", style: { flexShrink: 0, marginTop: '20px' } }), _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', color: '#333', fontSize: 26, fontWeight: 'bold' }, children: "This feature is currently in BETA." }), _jsx("span", { style: { display: 'flex', alignItems: 'center', gap: '6px', color: '#333', fontSize: 13 }, children: "The newest version of Authtics Host may have this feature completely implemented." })] })] })) : settingsOpen && !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: () => setSettingsOpen(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(Cog, { size: 12, color: "#f472b6" }), " Settings"] })] }), _jsx("div", { style: { overflowY: 'auto', maxHeight: '260px', padding: '10px', display: 'flex', flexDirection: 'column', gap: '8px' }, children: _jsxs(PanelButton, { onClick: () => setPanelCustomOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Cog, { size: 12, color: "#3b82f6" }), " Panel Customization"] }), _jsx(ChevronRight, { size: 12 })] }) })] })) : !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: () => setSettingsOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: _jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Cog, { size: 12, color: "#f472b6" }), " Settings"] }) }), _jsxs(PanelButton, { onClick: () => setPackageSecurityOpen(true), fullWidth: true, style: { color: '#333', justifyContent: 'space-between', height: '32px' }, children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx(Shield, { size: 12, color: "#f472b6" }), " Package Security"] }), highRiskDeps.length > 0 ?
+                                                            (_jsxs("div", { style: { gap: '4px', alignItems: 'center', justifyContent: 'center', display: 'flex' }, children: [_jsx(TriangleAlert, { size: 12, color: "red" }), _jsx("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px' }, children: highRiskDeps.length })] })) : mediumRiskDeps.length > 0 ?
+                                                            (_jsxs("div", { style: { gap: '8px', alignItems: 'center', justifyContent: 'center', display: 'flex' }, children: [_jsx(TriangleAlert, { size: 12, color: "#f7c623" }), _jsx("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px' }, children: mediumRiskDeps.length })] })) : lowRiskDeps.length > 0 ?
+                                                            (_jsxs("div", { style: { gap: '8px', alignItems: 'center', justifyContent: 'center', display: 'flex' }, children: [_jsx(Info, { size: 12, color: "#3bb0ff" }), _jsx("span", { style: { color: '#111', borderRadius: '100px', padding: '1px 6px', fontSize: '10px' }, children: lowRiskDeps.length })] })) : _jsx(CheckCircle2, { size: 12, color: "#16a34a" })] }), _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',
@@ -1229,8 +1585,8 @@ export default function DevPanel() {
                             alignItems: 'center',
                             padding: '8px 12px',
                             borderRadius: hasIssue ? '100px' : '10px',
-                            background: hasIssue ? '#ba4e4e' : '#111',
-                            border: hasIssue ? '1px solid #991b1b' : '1px solid #333',
+                            background: hasIssue ? '#ba4e4e' : panelColor.background,
+                            border: hasIssue ? '1px solid #991b1b' : `1px solid ${panelColor.border ?? '#333'}`,
                             boxShadow: hasIssue
                                 ? '0 4px 20px rgba(220,38,38,0.2)'
                                 : '0 4px 20px rgba(0,0,0,0.4)',