From 172703c33b3463635ac3d3249dbb65f05d045023 Mon Sep 17 00:00:00 2001
From: KingKDot <why_are_you_looking_at_this@stoppeeping.com>
Date: Tue, 14 Jul 2026 00:25:36 -0500
Subject: [PATCH] improve file browser and metrics UI.

---
 Overlord-Server/public/assets/filebrowser.js |  15 ++-
 Overlord-Server/public/assets/metrics.js     |  16 ++-
 Overlord-Server/public/filebrowser.html      | 130 ++++++++-----------
 Overlord-Server/public/metrics.html          | 103 ++++++++-------
 4 files changed, 130 insertions(+), 134 deletions(-)

diff --git a/Overlord-Server/public/assets/filebrowser.js b/Overlord-Server/public/assets/filebrowser.js
index 88e9d0b..d2cb28d 100644
--- a/Overlord-Server/public/assets/filebrowser.js
+++ b/Overlord-Server/public/assets/filebrowser.js
@@ -85,7 +85,7 @@ const editorCancelBtn = document.getElementById("editor-cancel-btn");
 const editorCloseBtn = document.getElementById("editor-close-btn");
 
 if (clientIdHeader) {
-  clientIdHeader.textContent = `${clientId} - File Browser`;
+  clientIdHeader.innerHTML = `<i class="fa-solid fa-computer mr-1.5 text-sky-400"></i>${escapeHtml(clientId)}`;
 }
 
 let sortField = localStorage.getItem("filebrowser.sortField") || "name";
@@ -141,10 +141,13 @@ function updateStatus(state, text) {
   };
 
   statusEl.innerHTML = `${icons[state] || icons.disconnected} ${text}`;
-  statusEl.className =
-    state === "connected"
-      ? "inline-flex items-center gap-2 px-3 py-2 rounded-full bg-green-900/40 text-green-100 border border-green-700/60"
-      : "inline-flex items-center gap-2 px-3 py-2 rounded-full bg-slate-800 text-slate-300";
+  const stateClasses = {
+    connected: "bg-emerald-500/10 text-emerald-300 border-emerald-500/30",
+    error: "bg-red-500/10 text-red-300 border-red-500/30",
+    disconnected: "bg-slate-800 text-slate-300 border-slate-700",
+    connecting: "bg-sky-500/10 text-sky-300 border-sky-500/30",
+  };
+  statusEl.className = `inline-flex self-start sm:self-auto items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-medium ${stateClasses[state] || stateClasses.disconnected}`;
 }
 
 function enableControls(enabled) {
@@ -1401,7 +1404,7 @@ function createFileRow(entry) {
 
   row.innerHTML = `
     <input type="checkbox" class="file-checkbox" data-path="${escapeHtml(entry.path)}">
-    <div class="col-span-6 flex items-center gap-2 truncate pl-3">
+    <div class="col-span-6 flex items-center gap-2 truncate pl-8">
       ${icon}
       <span class="truncate">${escapeHtml(entry.name)}</span>
       ${pinBtn}
diff --git a/Overlord-Server/public/assets/metrics.js b/Overlord-Server/public/assets/metrics.js
index 2a14dce..b3c731f 100644
--- a/Overlord-Server/public/assets/metrics.js
+++ b/Overlord-Server/public/assets/metrics.js
@@ -760,7 +760,7 @@ function updateMetrics(data, debug) {
         .map((route) => {
           const errorClass = route.errorsLastMinute > 0 ? "text-red-300" : "text-slate-400";
           return `
-            <div class="bg-slate-800/50 rounded p-3 min-w-0">
+            <div class="bg-slate-950/40 border border-slate-800 rounded-lg p-3 min-w-0">
               <div class="text-xs text-slate-400 mb-2 truncate" title="${escapeHtml(route.route)}">
                 ${escapeHtml(route.route)}
               </div>
@@ -790,7 +790,7 @@ function updateMetrics(data, debug) {
     if (tasks.length > 0) {
       internalTasksList.innerHTML = tasks
         .map((task) => `
-          <div class="bg-slate-800/50 rounded p-3 min-w-0">
+          <div class="bg-slate-950/40 border border-slate-800 rounded-lg p-3 min-w-0">
             <div class="text-xs text-slate-400 mb-2 truncate" title="${escapeHtml(task.task)}">
               ${escapeHtml(task.task)}
             </div>
@@ -828,7 +828,7 @@ function updateMetrics(data, debug) {
               ? value ? "yes" : "no"
               : Number(value || 0).toLocaleString();
           return `
-            <div class="bg-slate-800/50 rounded p-3 min-w-0">
+            <div class="bg-slate-950/40 border border-slate-800 rounded-lg p-3 min-w-0">
               <div class="text-xs text-slate-500 mb-1 truncate" title="${escapeHtml(key)}">
                 ${escapeHtml(key)}
               </div>
@@ -854,7 +854,7 @@ function updateMetrics(data, debug) {
     commandTypesList.innerHTML = topCommands
       .map(
         ([type, count]) => `
-      <div class="bg-slate-800/50 rounded p-3">
+      <div class="bg-slate-950/40 border border-slate-800 rounded-lg p-3">
         <div class="text-xs text-slate-400 mb-1">${escapeHtml(type)}</div>
         <div class="text-xl font-bold">${count.toLocaleString()}</div>
       </div>
@@ -1831,10 +1831,16 @@ async function fetchMetrics() {
     updateCharts(data.history, data.snapshot);
 
     document.getElementById("status-text").textContent = "Live";
+    const status = document.getElementById("metrics-status");
+    status?.classList.remove("bg-red-500/10", "text-red-300", "border-red-500/30");
+    status?.classList.add("bg-emerald-500/10", "text-emerald-300", "border-emerald-500/30");
   } catch (err) {
     if (!metricsPageActive) return;
     console.error("Error fetching metrics:", err);
-    document.getElementById("status-text").textContent = "Error";
+    document.getElementById("status-text").textContent = "Unavailable";
+    const status = document.getElementById("metrics-status");
+    status?.classList.remove("bg-emerald-500/10", "text-emerald-300", "border-emerald-500/30");
+    status?.classList.add("bg-red-500/10", "text-red-300", "border-red-500/30");
   }
 }
 
diff --git a/Overlord-Server/public/filebrowser.html b/Overlord-Server/public/filebrowser.html
index e6624bc..7da7d5c 100644
--- a/Overlord-Server/public/filebrowser.html
+++ b/Overlord-Server/public/filebrowser.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="/vendor/inter/400.css" />
     <link rel="stylesheet" href="/vendor/inter/600.css" />
     <link rel="stylesheet" href="/vendor/inter/700.css" />
-<link rel="stylesheet" href="/assets/tailwind.css" />
+    <link rel="stylesheet" href="/assets/tailwind.css" />
     <link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css" />
     <link rel="stylesheet" href="/vendor/highlight.js/atom-one-dark.min.css" />
     <link rel="stylesheet" href="/assets/main.css" />
@@ -18,30 +18,28 @@
     <script defer src="/vendor/msgpackr/msgpackr.js"></script>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
     <style>
-      body {
-        font-family: "Inter", sans-serif;
-      }
       .file-item:hover {
-        background-color: rgba(51, 65, 85, 0.5);
+        background-color: rgba(30, 41, 59, 0.62);
       }
       .file-item {
         position: relative;
       }
       .file-item.selected {
-        background-color: rgba(59, 130, 246, 0.2);
-        border-color: rgba(59, 130, 246, 0.4);
+        background-color: rgba(14, 165, 233, 0.12);
+        box-shadow: inset 3px 0 0 rgb(56 189 248);
       }
       .file-checkbox {
         appearance: none;
         -webkit-appearance: none;
         position: absolute;
-        left: 0;
-        top: 0;
-        width: 12px;
-        height: 100%;
-        border: none;
-        border-radius: 0;
+        left: 0.75rem;
+        top: 50%;
+        width: 16px;
+        height: 16px;
+        border: 1px solid rgb(71 85 105);
+        border-radius: 0.25rem;
         background-color: rgba(100, 116, 139, 0.3);
+        transform: translateY(-50%);
         cursor: pointer;
         transition: all 0.2s ease;
         z-index: 1;
@@ -51,6 +49,8 @@
       }
       .file-checkbox:checked {
         background-color: #3b82f6;
+        border-color: #60a5fa;
+        box-shadow: inset 0 0 0 3px #0f172a;
       }
       .file-checkbox:checked:hover {
         background-color: #2563eb;
@@ -90,23 +90,6 @@
 
       /* Mobile responsive styles */
       @media (max-width: 768px) {
-        header {
-          padding: 0.75rem;
-        }
-        header .flex {
-          flex-wrap: nowrap;
-          gap: 0.5rem;
-        }
-        header span,
-        header a {
-          font-size: 0.875rem;
-        }
-        #client-id-header {
-          display: none;
-        }
-        main {
-          padding: 1rem 0.5rem;
-        }
         .file-header {
           display: none !important;
         }
@@ -456,12 +439,22 @@
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>
 
-    <main class="px-5 py-4">
-      <div class="max-w-[1600px] mx-auto flex gap-4">
+    <main class="max-w-[1600px] w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div class="mb-6 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
+        <div>
+          <h1 class="text-2xl font-bold">File Browser</h1>
+          <p id="client-id-header" class="mt-1 text-sm text-slate-400 font-mono">Loading client...</p>
+        </div>
+        <span id="status-indicator" class="inline-flex self-start sm:self-auto items-center gap-2 px-3 py-1.5 rounded-full bg-slate-800 text-slate-300 border border-slate-700 text-xs font-medium">
+          <i class="fa-solid fa-circle-notch fa-spin"></i> Connecting...
+        </span>
+      </div>
+
+      <div class="flex gap-4">
         <!-- Sidebar -->
         <aside id="sidebar" class="w-52 flex-shrink-0 hidden lg:block">
           <div class="sticky flex flex-col gap-3 sidebar-scroll" style="top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto;">
-            <div class="bg-slate-900/70 border border-slate-800 rounded-lg overflow-hidden">
+            <div class="bg-slate-900/60 border border-slate-800 rounded-xl overflow-hidden">
               <div class="px-3 py-2.5 border-b border-slate-700/50 flex items-center justify-between gap-2">
                 <div class="flex items-center gap-2">
                   <i class="fa-solid fa-star text-yellow-400 text-xs"></i>
@@ -480,7 +473,7 @@
                 <div class="text-xs text-slate-500 text-center py-3">No pinned paths.<br><span class="text-slate-600">Right-click any folder.</span></div>
               </div>
             </div>
-            <div class="bg-slate-900/70 border border-slate-800 rounded-lg overflow-hidden">
+            <div class="bg-slate-900/60 border border-slate-800 rounded-xl overflow-hidden">
               <div class="px-3 py-2.5 border-b border-slate-700/50 flex items-center gap-2">
                 <i class="fa-solid fa-bookmark text-blue-400 text-xs"></i>
                 <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Quick Access</span>
@@ -489,7 +482,7 @@
                 <div class="text-xs text-slate-500 text-center py-4">Connecting...</div>
               </div>
             </div>
-            <div class="bg-slate-900/70 border border-slate-800 rounded-lg overflow-hidden">
+            <div class="bg-slate-900/60 border border-slate-800 rounded-xl overflow-hidden">
               <div class="px-3 py-2.5 border-b border-slate-700/50 flex items-center gap-2">
                 <i class="fa-solid fa-hard-drive text-slate-400 text-xs"></i>
                 <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Drives</span>
@@ -502,51 +495,40 @@
         </aside>
         <!-- Main Content -->
         <div class="flex-1 min-w-0 flex flex-col gap-4">
-        <!-- Status Bar -->
-        <div class="flex items-center justify-between gap-3 flex-wrap">
-          <div class="flex items-center gap-2 flex-wrap">
-            <span
-              id="status-indicator"
-              class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-slate-800 text-slate-300"
-            >
-              <i class="fa-solid fa-circle-notch fa-spin"></i> Connecting...
-            </span>
-            <span
-              id="client-id-header"
-              class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-slate-900/60 text-slate-200 border border-slate-800"
-            >
-              <i class="fa-solid fa-computer"></i>
-              <span>Loading client...</span>
-            </span>
+        <!-- Workspace actions -->
+        <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+          <div class="flex items-center gap-3">
+            <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-sky-500/10 border border-sky-500/20"><i class="fa-solid fa-folder-tree text-sky-400"></i></span>
+            <div><h2 class="text-sm font-semibold">Remote files</h2><p class="text-xs text-slate-500">Browse, transfer, and manage this client’s filesystem.</p></div>
           </div>
           <div class="flex items-center gap-2 flex-wrap">
             <button
               id="search-btn"
-              class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 text-white"
+              class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 text-sm disabled:opacity-40"
               disabled
             >
               <i class="fa-solid fa-search"></i> Search
             </button>
             <button
               id="refresh-btn"
-              class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white"
+              class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 text-sm disabled:opacity-40"
               disabled
             >
               <i class="fa-solid fa-refresh"></i> Refresh
             </button>
             <button
               id="upload-btn"
-              class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-green-600 hover:bg-green-700 text-white"
+              class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 border border-emerald-500 text-white text-sm font-medium disabled:opacity-40"
               disabled
             >
-              <i class="fa-solid fa-upload"></i> Upload File
+              <i class="fa-solid fa-upload"></i> Upload
             </button>
             <button
               id="mkdir-btn"
-              class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white"
+              class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-violet-600 hover:bg-violet-500 border border-violet-500 text-white text-sm font-medium disabled:opacity-40"
               disabled
             >
-              <i class="fa-solid fa-folder-plus"></i> New Folder
+              <i class="fa-solid fa-folder-plus"></i> New folder
             </button>
           </div>
         </div>
@@ -554,15 +536,15 @@
         <!-- Search Bar (hidden by default) -->
         <div
           id="search-bar"
-          class="hidden px-4 py-3 bg-slate-900/70 border border-slate-800 rounded-lg"
+          class="hidden px-4 py-3 bg-slate-900/60 border border-slate-800 rounded-xl"
         >
-          <div class="flex items-center gap-2">
+          <div class="flex items-center gap-2 flex-wrap sm:flex-nowrap">
             <i class="fa-solid fa-search text-slate-400"></i>
             <input
               type="text"
               id="search-input"
               placeholder="Search files or content..."
-              class="flex-1 bg-transparent outline-none text-sm text-slate-100 placeholder:text-slate-500"
+              class="flex-1 min-w-48 bg-transparent outline-none text-sm text-slate-100 placeholder:text-slate-500"
             />
             <label
               class="inline-flex items-center gap-2 text-sm text-slate-300"
@@ -592,13 +574,13 @@
         <!-- Bulk Actions Bar (hidden by default) -->
         <div
           id="bulk-actions-bar"
-          class="hidden bulk-actions-bar px-4 py-3 rounded-lg"
+          class="hidden bulk-actions-bar px-4 py-3 rounded-xl"
         >
-          <div class="flex items-center justify-between">
+          <div class="flex items-center justify-between gap-3 flex-wrap">
             <span class="text-sm font-medium"
               ><span id="selected-count">0</span> items selected</span
             >
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-2 flex-wrap">
               <button
                 id="bulk-download-btn"
                 class="inline-flex items-center gap-2 px-3 py-1 rounded bg-blue-600 hover:bg-blue-700 text-white text-sm"
@@ -635,7 +617,7 @@
 
         <!-- Path Navigation Bar -->
         <div
-          class="flex items-center gap-2 px-4 py-3 bg-slate-900/70 border border-slate-800 rounded-lg"
+          class="flex items-center gap-2 px-3 py-3 bg-slate-900/60 border border-slate-800 rounded-xl"
         >
           <button
             id="back-btn"
@@ -652,7 +634,7 @@
             <i class="fa-solid fa-home"></i>
           </button>
           <div
-            class="flex-1 flex items-center gap-2 px-3 py-2 bg-slate-950/50 border border-slate-700 rounded"
+            class="flex-1 flex items-center gap-2 px-3 py-2 bg-slate-950/60 border border-slate-700 rounded-lg focus-within:border-sky-500 focus-within:ring-2 focus-within:ring-sky-500/20"
           >
             <i class="fa-solid fa-folder-open text-yellow-400 text-sm"></i>
             <input
@@ -673,7 +655,7 @@
 
         <!-- Breadcrumb Navigation -->
         <div
-          class="flex items-center gap-2 px-4 py-3 bg-slate-900/70 border border-slate-800 rounded-lg overflow-x-auto"
+          class="flex items-center gap-2 px-3 py-2 bg-slate-950/30 border border-slate-800 rounded-xl overflow-x-auto"
         >
           <i class="fa-solid fa-folder-open text-yellow-400"></i>
           <div id="breadcrumb" class="flex items-center gap-1 text-sm"></div>
@@ -681,7 +663,7 @@
 
         <!-- List Controls -->
         <div
-          class="px-4 py-3 bg-slate-900/70 border border-slate-800 rounded-lg flex items-center justify-between gap-3 flex-wrap"
+          class="px-4 py-3 bg-slate-900/60 border border-slate-800 rounded-xl flex items-center justify-between gap-3 flex-wrap"
         >
           <div class="flex items-center gap-2 flex-wrap">
             <label for="sort-field" class="text-xs uppercase tracking-wide text-slate-400"
@@ -689,7 +671,7 @@
             >
             <select
               id="sort-field"
-              class="px-2 py-1 rounded bg-slate-800 border border-slate-700 text-sm text-slate-100"
+              class="px-3 py-1.5 rounded-lg bg-slate-950/60 border border-slate-700 text-sm text-slate-100"
             >
               <option value="name">Name</option>
               <option value="size">Size</option>
@@ -698,7 +680,7 @@
             </select>
             <button
               id="sort-order-btn"
-              class="px-3 py-1 rounded bg-slate-700 hover:bg-slate-600 text-sm text-slate-100"
+              class="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-sm text-slate-100"
               type="button"
             >
               Asc
@@ -709,7 +691,7 @@
             >
             <select
               id="filter-type"
-              class="px-2 py-1 rounded bg-slate-800 border border-slate-700 text-sm text-slate-100"
+              class="px-3 py-1.5 rounded-lg bg-slate-950/60 border border-slate-700 text-sm text-slate-100"
             >
               <option value="all">All</option>
               <option value="dirs">Folders</option>
@@ -729,10 +711,10 @@
         <!-- File List -->
         <div
           id="file-list-panel"
-          class="bg-slate-900/70 border border-slate-800 rounded-lg overflow-hidden"
+          class="bg-slate-900/60 border border-slate-800 rounded-xl overflow-hidden min-h-72"
         >
           <div
-            class="file-header grid grid-cols-12 gap-3 px-4 py-3 bg-slate-800 border-b border-slate-700 text-xs font-semibold uppercase text-slate-400"
+            class="file-header grid grid-cols-12 gap-3 px-4 py-3 bg-slate-950/60 border-b border-slate-800 text-[11px] font-semibold uppercase tracking-wider text-slate-500"
           >
             <div class="col-span-6">Name</div>
             <div class="col-span-2">Size</div>
@@ -747,7 +729,7 @@
 
         <!-- Preview pane -->
         <aside id="preview-pane-host" class="hidden lg:block">
-          <div id="preview-pane" class="bg-slate-900/70 border border-slate-800 rounded-lg empty">
+          <div id="preview-pane" class="bg-slate-900/60 border border-slate-800 rounded-xl empty">
             <div class="px-3 py-2.5 border-b border-slate-700/50 flex items-center justify-between gap-2">
               <div class="flex items-center gap-2 min-w-0">
                 <i class="fa-solid fa-eye text-blue-400 text-xs flex-shrink-0"></i>
@@ -983,7 +965,7 @@
     <!-- Transfer Progress Panel -->
     <div
       id="transfer-panel"
-      class="hidden fixed bottom-4 right-4 w-96 max-w-full bg-slate-900 border border-slate-700 rounded-lg shadow-2xl overflow-hidden z-50"
+      class="hidden fixed bottom-4 right-4 w-96 max-w-[calc(100vw-2rem)] bg-slate-900 border border-slate-700 rounded-xl shadow-2xl overflow-hidden z-50"
     >
       <div
         class="px-4 py-3 bg-slate-800 border-b border-slate-700 flex items-center justify-between"
diff --git a/Overlord-Server/public/metrics.html b/Overlord-Server/public/metrics.html
index c29df91..669c7df 100644
--- a/Overlord-Server/public/metrics.html
+++ b/Overlord-Server/public/metrics.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="/vendor/inter/400.css" />
     <link rel="stylesheet" href="/vendor/inter/600.css" />
     <link rel="stylesheet" href="/vendor/inter/700.css" />
-<link rel="stylesheet" href="/assets/tailwind.css" />
+    <link rel="stylesheet" href="/assets/tailwind.css" />
     <link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css" />
     <link rel="stylesheet" href="/vendor/flag-icons/css/flag-icons.min.css" />
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
@@ -82,62 +82,59 @@
   <body class="min-h-screen bg-slate-950 text-slate-100">
     <header id="top-nav"></header>
 
-    <main class="px-5 py-6">
-      <div class="max-w-7xl mx-auto flex flex-col gap-6">
+    <main class="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div class="flex flex-col gap-6">
         <!-- Header -->
-        <div class="flex items-center justify-between gap-3 flex-wrap">
+        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
           <div>
-            <h1 class="text-2xl font-semibold">Metrics Dashboard</h1>
-            <p class="text-slate-400">
-              Real-time server statistics and performance
-            </p>
+            <h1 class="text-2xl font-bold">Metrics Dashboard</h1>
+            <p class="text-sm text-slate-400 mt-1">Live infrastructure health, traffic, and runtime performance.</p>
           </div>
-          <div class="flex items-center gap-2">
+          <div class="flex items-center gap-2 text-xs">
             <span
-              class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-green-900/40 text-green-100 border border-green-700/60"
+              id="metrics-status"
+              class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 text-emerald-300 border border-emerald-500/30 font-medium"
             >
-              <i class="fa-solid fa-circle-check"></i>
+              <span class="relative flex h-2 w-2"><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60"></span><span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-400"></span></span>
               <span id="status-text">Live</span>
             </span>
-            <span class="text-sm text-slate-400"
-              >Updated: <span id="last-update">Never</span></span
-            >
+            <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-slate-800 bg-slate-900/60 text-slate-400"><i class="fa-solid fa-clock-rotate-left text-slate-500"></i><span id="last-update">Never</span></span>
           </div>
         </div>
 
         <!-- Key Metrics Cards -->
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
           <!-- Clients Online -->
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="relative overflow-hidden bg-slate-900/60 border border-slate-800 rounded-xl p-5">
             <div class="flex items-center justify-between mb-2">
-              <span class="text-slate-400 text-sm">Clients Online</span>
-              <i class="fa-solid fa-desktop text-blue-400"></i>
+              <span class="text-slate-400 text-sm font-medium">Clients Online</span>
+              <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-sky-500/10 border border-sky-500/20"><i class="fa-solid fa-desktop text-sky-400"></i></span>
             </div>
-            <div class="text-3xl font-bold" id="clients-online">0</div>
+            <div class="text-3xl font-bold tracking-tight" id="clients-online">0</div>
             <div class="text-xs text-slate-500 mt-1">
               <span id="clients-total">0</span> total
             </div>
           </div>
 
           <!-- Active Sessions -->
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="relative overflow-hidden bg-slate-900/60 border border-slate-800 rounded-xl p-5">
             <div class="flex items-center justify-between mb-2">
-              <span class="text-slate-400 text-sm">Active Sessions</span>
-              <i class="fa-solid fa-plug text-green-400"></i>
+              <span class="text-slate-400 text-sm font-medium">Active Sessions</span>
+              <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-500/10 border border-emerald-500/20"><i class="fa-solid fa-plug text-emerald-400"></i></span>
             </div>
-            <div class="text-3xl font-bold" id="active-sessions">0</div>
+            <div class="text-3xl font-bold tracking-tight" id="active-sessions">0</div>
             <div class="text-xs text-slate-500 mt-1">
               Console, RD, Files, Processes
             </div>
           </div>
 
           <!-- Commands (Last Hour) -->
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="relative overflow-hidden bg-slate-900/60 border border-slate-800 rounded-xl p-5">
             <div class="flex items-center justify-between mb-2">
-              <span class="text-slate-400 text-sm">Commands/Hour</span>
-              <i class="fa-solid fa-terminal text-purple-400"></i>
+              <span class="text-slate-400 text-sm font-medium">Commands/Hour</span>
+              <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-violet-500/10 border border-violet-500/20"><i class="fa-solid fa-terminal text-violet-400"></i></span>
             </div>
-            <div class="text-3xl font-bold" id="commands-hour">0</div>
+            <div class="text-3xl font-bold tracking-tight" id="commands-hour">0</div>
             <div class="text-xs text-slate-500 mt-1">
               <span id="commands-minute">0</span>/min •
               <span id="commands-total">0</span> total
@@ -145,14 +142,12 @@
           </div>
 
           <!-- Bandwidth -->
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="relative overflow-hidden bg-slate-900/60 border border-slate-800 rounded-xl p-5">
             <div class="flex items-center justify-between mb-2">
-              <span class="text-slate-400 text-sm">Bandwidth</span>
-              <i
-                class="fa-solid fa-arrow-up-right-from-square text-orange-400"
-              ></i>
+              <span class="text-slate-400 text-sm font-medium">Bandwidth</span>
+              <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-orange-500/10 border border-orange-500/20"><i class="fa-solid fa-arrow-right-arrow-left text-orange-400"></i></span>
             </div>
-            <div class="text-3xl font-bold" id="bandwidth-rate">0 KB/s</div>
+            <div class="text-3xl font-bold tracking-tight" id="bandwidth-rate">0 KB/s</div>
             <div class="text-xs text-slate-500 mt-1">
               ↑ <span id="bandwidth-sent">0 MB</span> • ↓
               <span id="bandwidth-received">0 MB</span>
@@ -160,10 +155,15 @@
           </div>
         </div>
 
+        <div class="flex items-center gap-3 pt-1">
+          <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-500/10 border border-indigo-500/20"><i class="fa-solid fa-chart-line text-indigo-400"></i></div>
+          <div><h2 class="font-semibold">Traffic and activity</h2><p class="text-xs text-slate-500">Live client and command volume.</p></div>
+        </div>
+
         <!-- Charts Row -->
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
           <!-- Clients Timeline -->
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
             <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
               <i class="fa-solid fa-chart-area text-blue-400"></i>
               Clients Over Time
@@ -174,7 +174,7 @@
           </div>
 
           <!-- Commands Timeline -->
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
             <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
               <i class="fa-solid fa-chart-line text-purple-400"></i>
               Commands Per Minute
@@ -185,9 +185,14 @@
           </div>
         </div>
 
+        <div class="flex items-center gap-3 pt-2">
+          <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-rose-500/10 border border-rose-500/20"><i class="fa-solid fa-gauge-high text-rose-400"></i></div>
+          <div><h2 class="font-semibold">Operational pressure</h2><p class="text-xs text-slate-500">Throughput, latency, memory, and event-loop health.</p></div>
+        </div>
+
         <!-- Operational Pressure Charts -->
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
             <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
               <i class="fa-solid fa-network-wired text-orange-400"></i>
               Network Throughput
@@ -197,7 +202,7 @@
             </div>
           </div>
 
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
             <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
               <i class="fa-solid fa-arrow-right-arrow-left text-emerald-400"></i>
               HTTP Requests
@@ -207,7 +212,7 @@
             </div>
           </div>
 
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
             <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
               <i class="fa-solid fa-gauge-high text-rose-400"></i>
               HTTP Latency
@@ -217,7 +222,7 @@
             </div>
           </div>
 
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
             <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
               <i class="fa-solid fa-memory text-cyan-400"></i>
               Runtime Memory
@@ -227,7 +232,7 @@
             </div>
           </div>
 
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
             <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
               <i class="fa-solid fa-stopwatch text-amber-400"></i>
               Event Loop Lag
@@ -239,7 +244,7 @@
         </div>
 
         <!-- Slow HTTP Routes -->
-        <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
           <div class="flex items-center justify-between gap-3 flex-wrap mb-3">
             <h3 class="text-lg font-semibold flex items-center gap-2">
               <i class="fa-solid fa-route text-rose-400"></i>
@@ -258,7 +263,7 @@
         </div>
 
         <!-- Slow Internal Jobs -->
-        <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+        <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
           <div class="flex items-center justify-between gap-3 flex-wrap mb-3">
             <h3 class="text-lg font-semibold flex items-center gap-2">
               <i class="fa-solid fa-gears text-cyan-400"></i>
@@ -277,7 +282,7 @@
         </div>
 
         <!-- Retained Runtime State -->
-        <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+        <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
           <div class="flex items-center justify-between gap-3 flex-wrap mb-3">
             <h3 class="text-lg font-semibold flex items-center gap-2">
               <i class="fa-solid fa-box-archive text-violet-400"></i>
@@ -297,7 +302,7 @@
 
         <!-- Mix Charts -->
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
             <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
               <i class="fa-solid fa-plug text-emerald-400"></i>
               Session Mix
@@ -307,7 +312,7 @@
             </div>
           </div>
 
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
             <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
               <i class="fa-brands fa-windows text-cyan-400"></i>
               Operating Systems
@@ -321,7 +326,7 @@
         <!-- Additional Stats -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           <!-- Server Stats -->
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
             <h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
               <i class="fa-solid fa-server text-green-400"></i>
               Server
@@ -355,7 +360,7 @@
           </div>
 
           <!-- Clients by OS -->
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
             <h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
               <i class="fa-brands fa-windows text-cyan-400"></i>
               Clients by OS
@@ -366,7 +371,7 @@
           </div>
 
           <!-- HTTP, Ping & Event Loop -->
-          <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+          <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
             <h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
               <i class="fa-solid fa-wave-square text-amber-400"></i>
               HTTP, Ping & Event Loop
@@ -419,7 +424,7 @@
         </div>
 
         <!-- Country Globe -->
-        <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+        <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
           <div class="flex items-center justify-between gap-3 flex-wrap mb-3">
             <h3 class="text-lg font-semibold flex items-center gap-2">
               <i class="fa-solid fa-globe text-emerald-400"></i>
@@ -461,7 +466,7 @@
         </div>
 
         <!-- Command Types Breakdown -->
-        <div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4">
+        <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
           <h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
             <i class="fa-solid fa-list text-indigo-400"></i>
             Command Types