feat: add bot action controls and real-time vital statistics to the web dashboard

src/web/public/script.js

@@ -16,19 +16,24 @@ function formatUptime(seconds) {
 }
 
 function updateUptime() {
-    const el = document.getElementById("uptime-display");
+    const elements = document.querySelectorAll(".uptime-display, #uptime-display");
-    if (!el) return;
+    elements.forEach(el => {
+        const startTimestamp = parseInt(el.getAttribute("data-start-timestamp"), 10);
+        if (isNaN(startTimestamp)) return;
 
-    const startTimestamp = parseInt(el.getAttribute("data-start-timestamp"), 10);
+        const now = Date.now();
-    if (isNaN(startTimestamp)) return;
+        const elapsedSeconds = (now - startTimestamp) / 1000;
 
-    const now = Date.now();
+        el.textContent = formatUptime(elapsedSeconds);
-    const elapsedSeconds = (now - startTimestamp) / 1000;
+    });
-
-    el.textContent = formatUptime(elapsedSeconds);
 }
 
 document.addEventListener("DOMContentLoaded", () => {
+    // Initialize Lucide Icons
+    if (window.lucide) {
+        window.lucide.createIcons();
+    }
+
     // Update immediately to prevent stale content flash if possible
     updateUptime();
     // Update every second
@@ -51,9 +56,7 @@ document.addEventListener("DOMContentLoaded", () => {
             try {
                 const msg = JSON.parse(event.data);
                 if (msg.type === "HEARTBEAT") {
-                    console.log("Heartbeat:", msg.data);
+                    updateVitals(msg.data);
-                    // Sync uptime?
-                    // We can optionally verify if client clock is drifting, but let's keep it simple.
                 } else if (msg.type === "WELCOME") {
                     console.log(msg.message);
                 } else if (msg.type === "LOG") {
@@ -64,12 +67,74 @@ document.addEventListener("DOMContentLoaded", () => {
             }
         };
 
+        function updateVitals(data) {
+            // Update Stats
+            if (data.guildCount !== undefined) {
+                const el = document.getElementById("stat-servers");
+                if (el) el.textContent = data.guildCount;
+            }
+            if (data.userCount !== undefined) {
+                const el = document.getElementById("stat-users");
+                if (el) el.textContent = data.userCount;
+            }
+            if (data.commandCount !== undefined) {
+                const el = document.getElementById("stat-commands");
+                if (el) el.textContent = data.commandCount;
+            }
+            if (data.ping !== undefined) {
+                const el = document.getElementById("stat-ping");
+                if (el) el.textContent = `${data.ping < 0 ? "?" : data.ping}ms`;
+
+                const trend = document.getElementById("stat-ping-trend");
+                if (trend) {
+                    trend.className = `stat-trend ${data.ping < 100 ? "up" : "down"}`;
+                    const icon = trend.querySelector('i');
+                    if (icon) {
+                        icon.setAttribute('data-lucide', data.ping < 100 ? "check-circle" : "alert-circle");
+                        if (window.lucide) window.lucide.createIcons();
+                    }
+                    const text = trend.querySelector('span');
+                    if (text) text.textContent = data.ping < 100 ? "Excellent" : "Decent";
+                }
+            }
+
+            // Update System Health
+            if (data.memory !== undefined) {
+                const el = document.getElementById("stat-memory");
+                if (el && data.memoryTotal) {
+                    el.textContent = `${data.memory} / ${data.memoryTotal} MB`;
+                } else if (el) {
+                    el.textContent = `${data.memory} MB`;
+                }
+
+                const bar = document.getElementById("stat-memory-bar");
+                if (bar && data.memoryTotal) {
+                    const percent = Math.min(100, (data.memory / data.memoryTotal) * 100);
+                    bar.style.width = `${percent}%`;
+                }
+            }
+
+            if (data.uptime !== undefined) {
+                // We handle uptime fluidly in updateUptime() using data-start-timestamp.
+                // We just ensure the attribute is kept in sync if needed (though startTimestamp shouldn't change).
+                const elements = document.querySelectorAll(".uptime-display, #uptime-display");
+                elements.forEach(el => {
+                    const currentStart = parseInt(el.getAttribute("data-start-timestamp"), 10);
+                    const newStart = Math.floor(Date.now() - (data.uptime * 1000));
+                    // Only update if there's a significant drift (> 5s)
+                    if (isNaN(currentStart) || Math.abs(currentStart - newStart) > 5000) {
+                        el.setAttribute("data-start-timestamp", newStart);
+                    }
+                });
+            }
+        }
+
         function appendToActivityFeed(log) {
             const list = document.querySelector(".activity-feed");
             if (!list) return;
 
             const item = document.createElement("li");
-            item.className = `activity-item ${log.type}`;
+            item.className = "activity-item";
 
             const timeSpan = document.createElement("span");
             timeSpan.className = "time";
@@ -82,13 +147,9 @@ document.addEventListener("DOMContentLoaded", () => {
             item.appendChild(timeSpan);
             item.appendChild(messageSpan);
 
-            // Prepend to top
+            // Prepend
             list.insertBefore(item, list.firstChild);
-
+            if (list.children.length > 50) list.lastChild.remove();
-            // Limit history
-            if (list.children.length > 50) {
-                list.removeChild(list.lastChild);
-            }
         }
 
         ws.onclose = () => {
@@ -104,5 +165,52 @@ document.addEventListener("DOMContentLoaded", () => {
         };
     }
 
+    // Action Buttons
+    document.querySelectorAll(".btn[data-action]").forEach(btn => {
+        btn.addEventListener("click", async () => {
+            const action = btn.getAttribute("data-action");
+            const actionName = btn.textContent.trim();
+
+            if (action === "restart_bot") {
+                if (!confirm("Are you sure you want to restart the bot? This will cause a brief downtime.")) {
+                    return;
+                }
+            }
+
+            btn.disabled = true;
+            const originalText = btn.textContent;
+            btn.textContent = "Processing...";
+
+            try {
+                const response = await fetch("/api/actions", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ action })
+                });
+
+                const result = await response.json();
+                if (result.success) {
+                    alert(`${actionName} successful: ${result.message}`);
+                    if (action === "restart_bot") {
+                        btn.textContent = "Restarting...";
+                        setTimeout(() => window.location.reload(), 5000);
+                    } else {
+                        btn.disabled = false;
+                        btn.textContent = originalText;
+                    }
+                } else {
+                    alert(`Error: ${result.error}`);
+                    btn.disabled = false;
+                    btn.textContent = originalText;
+                }
+            } catch (err) {
+                console.error("Action error:", err);
+                alert("Failed to execute action. Check console.");
+                btn.disabled = false;
+                btn.textContent = originalText;
+            }
+        });
+    });
+
     connectWs();
 });

src/web/public/style.css

@@ -1,525 +1,203 @@
 :root {
-    /* Color Palette - HSL (Hue, Saturation, Lightness) */
+    /* Geist Inspired Minimal Palette */
-    /* Primary (Aurora Cyan) */
+    --background: #000;
-    --primary-h: 180;
+    --foreground: #fff;
-    --primary-s: 100%;
+    --accents-1: #111;
-    --primary-l: 50%;
+    --accents-2: #333;
-    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
+    --accents-3: #444;
+    --accents-4: #666;
+    --accents-5: #888;
+    --accents-6: #999;
+    --accents-7: #eaeaea;
+    --accents-8: #fafafa;
 
-    /* Secondary (Aurora Purple) */
+    --success: #0070f3;
-    --secondary-h: 270;
+    --success-light: #3291ff;
-    --secondary-s: 100%;
+    --error: #ee0000;
-    --secondary-l: 65%;
+    --error-light: #ff1a1a;
-    --secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
+    --warning: #f5a623;
+    --warning-light: #f7b955;
 
-    /* Backgrounds (Dark Slate) */
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    --bg-h: 222;
+    --font-mono: 'Menlo', 'Monaco', 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace;
-    --bg-s: 47%;
-    --bg-l: 7%;
-    /* Very Dark */
-    --bg-color: hsl(var(--bg-h), var(--bg-s), var(--bg-l));
 
-    --card-bg-h: 217;
+    --radius: 5px;
-    --card-bg-s: 33%;
+    --header-height: 64px;
-    --card-bg-l: 15%;
+    --sidebar-width: 240px;
-    --card-bg: hsl(var(--card-bg-h), var(--card-bg-s), var(--card-bg-l));
-
-    /* Text */
-    --text-main: hsl(210, 40%, 98%);
-    --text-muted: hsl(215, 20%, 65%);
-    --text-accent: var(--primary);
-
-    /* Borders */
-    --border-color: hsl(215, 25%, 25%);
-
-    /* Typography */
-    --font-heading: 'Outfit', system-ui, sans-serif;
-    --font-body: 'Inter', system-ui, sans-serif;
-
-    /* Spacing & Radii */
-    --radius-md: 0.75rem;
-    --radius-lg: 1rem;
-    --header-height: 4rem;
-
-    /* Effects */
-    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    --shadow-glow: 0 0 15px hsla(var(--primary-h), var(--primary-s), 50%, 0.15);
 }
 
-*,
+* {
-*::before,
-*::after {
     box-sizing: border-box;
 }
 
 body {
-    background-color: var(--bg-color);
+    background: var(--background);
-    color: var(--text-main);
+    color: var(--foreground);
-    font-family: var(--font-body);
+    font-family: var(--font-sans);
     margin: 0;
-    line-height: 1.6;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 14px;
 }
 
+/* Typography */
 h1,
 h2,
 h3,
-h4,
+h4 {
-h5,
+    font-weight: 600;
-h6 {
+    margin: 0;
-    font-family: var(--font-heading);
+    color: var(--foreground);
-    margin-top: 0;
-    line-height: 1.2;
-    color: var(--text-main);
 }
 
 h1 {
-    font-weight: 700;
+    font-size: 2rem;
+    letter-spacing: -0.05rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+    letter-spacing: -0.02rem;
+}
+
+h3 {
+    font-size: 1rem;
+}
+
+a {
+    color: var(--accents-5);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+a:hover {
+    color: var(--foreground);
 }
 
 /* Header */
 header {
-    background: rgba(15, 23, 42, 0.8);
-    /* Semi-transparent */
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border-bottom: 1px solid var(--border-color);
     height: var(--header-height);
-    padding: 0 2rem;
+    border-bottom: 1px solid var(--accents-2);
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    padding: 0 24px;
     position: sticky;
     top: 0;
-    z-index: 50;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: saturate(180%) blur(5px);
+    z-index: 1000;
 }
 
 header h1 {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
-    margin: 0;
+    font-weight: 700;
-    background: linear-gradient(135deg, var(--primary), var(--secondary));
+}
-    -webkit-background-clip: text;
+
-    background-clip: text;
+header nav {
-    -webkit-text-fill-color: transparent;
+    margin-left: 24px;
-    letter-spacing: -0.02em;
+    display: flex;
+    gap: 16px;
 }
 
 header nav a {
-    color: var(--text-muted);
-    text-decoration: none;
-    font-weight: 500;
-    margin-left: 1.5rem;
-    transition: color 0.15s ease;
-    font-size: 0.95rem;
-}
-
-header nav a:hover {
-    color: var(--primary);
-}
-
-/* Main Layout */
-main {
-    flex: 1;
-    padding: 2rem;
-    max-width: 1200px;
-    margin: 0 auto;
-    width: 100%;
-}
-
-/* Card Component */
-.card {
-    background-color: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-lg);
-    padding: 2rem;
-    margin-bottom: 1.5rem;
-    box-shadow: var(--shadow-md);
-    position: relative;
-    overflow: hidden;
-    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-}
-
-.card:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-glow), var(--shadow-md);
-    border-color: hsla(var(--primary-h), var(--primary-s), 50%, 0.3);
-}
-
-.card h2 {
-    font-size: 1.25rem;
-    margin-bottom: 1rem;
-    color: var(--text-main);
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.card p {
-    color: var(--text-muted);
-    margin-bottom: 0;
-    font-size: 0.95rem;
-}
-
-/* Links */
-a {
-    color: var(--primary);
-    text-decoration: none;
-    transition: opacity 0.2s;
-}
-
-a:hover {
-    opacity: 0.8;
-}
-
-/* Buttons (Future Proofing) */
-.btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.5rem 1rem;
-    border-radius: var(--radius-md);
-    font-weight: 600;
-    font-family: var(--font-heading);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: none;
-    font-size: 0.9rem;
-    text-decoration: none;
-}
-
-.btn-primary {
-    background: linear-gradient(135deg, var(--primary), hsl(var(--primary-h), 90%, 45%));
-    color: #000;
-    /* Contrast text on Cyan */
-    box-shadow: 0 4px 6px -1px hsla(var(--primary-h), var(--primary-s), 50%, 0.2);
-}
-
-.btn-primary:hover {
-    filter: brightness(1.1);
-    box-shadow: 0 6px 8px -1px hsla(var(--primary-h), var(--primary-s), 50%, 0.3);
-}
-
-/* Forms & Inputs */
-input[type="text"],
-input[type="email"],
-input[type="password"],
-textarea,
-select {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    background-color: rgba(15, 23, 42, 0.5);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-md);
-    color: var(--text-main);
-    font-family: var(--font-body);
-    font-size: 0.95rem;
-    transition: all 0.2s;
-}
-
-input:focus,
-textarea:focus,
-select:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 2px hsla(var(--primary-h), var(--primary-s), 50%, 0.2);
-    background-color: rgba(15, 23, 42, 0.8);
-}
-
-/* Tables */
-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 1rem 0;
-}
-
-th {
-    text-align: left;
-    padding: 1rem;
-    background-color: rgba(15, 23, 42, 0.5);
-    color: var(--text-muted);
-    font-weight: 600;
-    font-size: 0.85rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    border-bottom: 1px solid var(--border-color);
-}
-
-td {
-    padding: 1rem;
-    border-bottom: 1px solid #1e293b;
-    /* Fallback or specific border */
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    color: var(--text-main);
-}
-
-tr:last-child td {
-    border-bottom: none;
-}
-
-tr:hover td {
-    background-color: rgba(255, 255, 255, 0.02);
-}
-
-/* Footer */
-footer {
-    padding: 2rem;
-    text-align: center;
-    color: var(--text-muted);
     font-size: 0.875rem;
-    border-top: 1px solid var(--border-color);
-    background: var(--bg-color);
 }
 
-/* Utilities */
+header nav a.active {
-.text-gradient {
+    color: var(--foreground);
-    background: linear-gradient(135deg, var(--primary), var(--secondary));
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
 }
 
-/* Animations & Micro-Interactions */
+/* Layout */
-@keyframes fadeIn {
+main {
-    from {
+    max-width: 1000px;
-        opacity: 0;
+    margin: 0 auto;
-        transform: translateY(10px);
+    padding: 48px 24px;
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
 }
 
-@keyframes slideUp {
+/* Dashboard Grid */
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Entry Animations */
-.fade-in {
-    animation: fadeIn 0.4s ease-out forwards;
-}
-
-/* Stagger animations for children using nth-child */
-main>* {
-    opacity: 0;
-    /* Initially hidden */
-    animation: slideUp 0.5s ease-out forwards;
-}
-
-main>*:nth-child(1) {
-    animation-delay: 0.1s;
-}
-
-main>*:nth-child(2) {
-    animation-delay: 0.2s;
-}
-
-main>*:nth-child(3) {
-    animation-delay: 0.3s;
-}
-
-main>*:nth-child(4) {
-    animation-delay: 0.4s;
-}
-
-/* Dynamic Background */
-body::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background:
-        radial-gradient(circle at 15% 50%, hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.08), transparent 25%),
-        radial-gradient(circle at 85% 30%, hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.08), transparent 25%);
-    z-index: -1;
-    pointer-events: none;
-}
-
-/* Link Interactions */
-a {
-    position: relative;
-    transition: color 0.2s ease, opacity 0.2s ease;
-}
-
-header nav a::after {
-    content: '';
-    position: absolute;
-    bottom: -4px;
-    left: 0;
-    width: 0%;
-    height: 2px;
-    background: var(--primary);
-    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-header nav a:hover::after {
-    width: 100%;
-}
-
-/* Accessibility: Reduced Motion */
-@media (prefers-reduced-motion: reduce) {
-
-    *,
-    *::before,
-    *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-        scroll-behavior: auto !important;
-    }
-}
-
-/* Mobile Responsiveness */
-@media (max-width: 768px) {
-    :root {
-        --header-height: 3.5rem;
-        /* Compact header on mobile */
-    }
-
-    body {
-        font-size: 14px;
-        /* Slightly smaller base font */
-    }
-
-    /* Layout Adjustments */
-    header {
-        padding: 0 1rem;
-    }
-
-    header nav a {
-        margin-left: 1rem;
-        font-size: 0.9rem;
-    }
-
-    main {
-        padding: 1rem;
-        width: 100%;
-        max-width: 100%;
-    }
-
-    /* Typography Scaling */
-    h1 {
-        font-size: 1.75rem;
-    }
-
-    h2 {
-        font-size: 1.5rem;
-    }
-
-    h3 {
-        font-size: 1.25rem;
-    }
-
-    /* Card Adjustments */
-    .card {
-        padding: 1.25rem;
-        border-radius: var(--radius-md);
-        /* Slightly smaller radius */
-    }
-
-    /* Stack flex containers if needed (general util) */
-    .flex-col-mobile {
-        flex-direction: column !important;
-    }
-
-    /* Touch Targets */
-    .btn,
-    a,
-    input,
-    select {
-        min-height: 44px;
-        /* Compliance with touch target guidelines */
-    }
-
-    /* Horizontal scroll for wide tables */
-    .table-container {
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-        margin-left: -1rem;
-        margin-right: -1rem;
-        padding-left: 1rem;
-        padding-right: 1rem;
-    }
-}
-/* Dashboard Layout */
 .dashboard-grid {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(3, 1fr);
-    gap: 1.5rem;
+    gap: 24px;
-    margin-bottom: 2rem;
+}
+
+/* Cards */
+.card,
+.panel,
+.stat-card {
+    background: var(--background);
+    border: 1px solid var(--accents-2);
+    border-radius: var(--radius);
+    padding: 24px;
+    transition: border-color 0.2s ease;
+}
+
+.card:hover,
+.panel:hover,
+.stat-card:hover {
+    border-color: var(--accents-4);
 }
 
 .stat-card {
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    padding: 1.5rem;
-    border-radius: var(--radius-lg);
-    text-align: center;
-    box-shadow: var(--shadow-sm);
-}
-
-.stat-card h3 {
-    font-size: 0.85rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--text-muted);
-    margin-bottom: 0.5rem;
-}
-
-.stat-card .stat-value {
-    font-size: 2rem;
-    font-weight: 700;
-    color: var(--text-main);
-    font-family: var(--font-heading);
-}
-
-.dashboard-main {
-    grid-column: 1 / -1;
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    gap: 1.5rem;
-}
-
-.panel {
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-lg);
-    padding: 1.5rem;
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
+    min-height: 120px;
 }
 
-.panel.control-panel {
+.stat-header {
-    grid-column: 1 / -1;
-}
-
-.panel-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 1rem;
+    margin-bottom: 8px;
-    border-bottom: 1px solid var(--border-color);
+}
-    padding-bottom: 0.75rem;
+
+.stat-header h3 {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    color: var(--accents-5);
+    letter-spacing: 1px;
+}
+
+.stat-value {
+    font-size: 2rem;
+    font-weight: 700;
+    letter-spacing: -1px;
+}
+
+.stat-trend {
+    font-size: 0.75rem;
+    margin-top: 8px;
+    color: var(--accents-5);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.stat-trend.up {
+    color: var(--success);
+}
+
+.stat-trend.down {
+    color: var(--error);
+}
+
+/* Panels */
+.dashboard-main {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: 1.5fr 1fr;
+    gap: 24px;
+    margin-top: 24px;
+}
+
+.panel-header {
+    margin-bottom: 20px;
 }
 
 .panel-header h2 {
     font-size: 1.1rem;
-    margin: 0;
+    font-weight: 600;
 }
 
 /* Activity Feed */
@@ -527,81 +205,181 @@ header nav a:hover::after {
     list-style: none;
     padding: 0;
     margin: 0;
-    max-height: 300px;
+    max-height: 400px;
     overflow-y: auto;
 }
 
 .activity-item {
-    display: flex;
+    padding: 12px 0;
-    gap: 1rem;
+    border-bottom: 1px solid var(--accents-2);
-    padding: 0.75rem 0;
+    font-size: 0.875rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
-    font-size: 0.9rem;
+
+.activity-item:last-child {
+    border-bottom: none;
 }
 
 .activity-item .time {
-    color: var(--text-muted);
+    color: var(--accents-4);
-    font-family: monospace;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    display: block;
+    margin-bottom: 4px;
 }
 
-.activity-item.info .message { color: var(--text-main); }
+/* Badges */
-.activity-item.success .message { color: hsl(150, 60%, 45%); }
+.badge {
-.activity-item.warning .message { color: hsl(35, 90%, 60%); }
+    padding: 2px 8px;
-.activity-item.error .message { color: hsl(0, 80%, 60%); }
+    border-radius: 20px;
+    font-size: 0.65rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
 
 .badge.live {
-    background: hsla(0, 100%, 50%, 0.2);
+    background: rgba(0, 112, 243, 0.1);
-    color: hsl(0, 100%, 60%);
+    color: var(--success);
-    padding: 0.25rem 0.5rem;
+    border: 1px solid rgba(0, 112, 243, 0.2);
-    border-radius: 4px;
-    font-size: 0.7rem;
-    font-weight: bold;
-    text-transform: uppercase;
-    animation: pulse 2s infinite;
 }
 
-@keyframes pulse {
+/* System Metrics */
-    0% { opacity: 1; }
+.metrics-grid {
-    50% { opacity: 0.5; }
-    100% { opacity: 1; }
-}
-
-/* Mock Chart */
-.mock-chart-container {
-    height: 200px;
     display: flex;
-    align-items: flex-end;
+    flex-direction: column;
-    gap: 4px;
+    gap: 16px;
-    padding-top: 1rem;
-    border-bottom: 1px solid var(--border-color);
-    margin-bottom: 0.5rem;
 }
 
-.mock-chart-bar {
+.metric-card {
-    flex: 1;
+    padding: 12px;
-    background: var(--primary);
+    border: 1px solid var(--accents-2);
-    opacity: 0.5;
+    border-radius: var(--radius);
-    border-radius: 2px 2px 0 0;
-    transition: height 0.5s ease;
 }
 
-.mock-chart-bar:hover {
+.metric-header {
-    opacity: 0.8;
+    display: flex;
-}
+    justify-content: space-between;
-
-.metrics-legend {
     font-size: 0.8rem;
-    color: var(--text-muted);
+    margin-bottom: 8px;
-    text-align: center;
 }
 
-/* Responsive Dashboard */
+.metric-label {
+    color: var(--accents-5);
+}
+
+.metric-value {
+    font-weight: 500;
+    font-family: var(--font-mono);
+}
+
+.progress-bar-bg {
+    height: 4px;
+    background: var(--accents-2);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.progress-bar-fill {
+    height: 100%;
+    background: var(--foreground);
+    transition: width 0.3s ease;
+}
+
+/* Buttons */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 16px;
+    height: 32px;
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid var(--accents-2);
+    background: var(--background);
+    color: var(--foreground);
+}
+
+.btn:hover:not(:disabled) {
+    border-color: var(--foreground);
+}
+
+.btn-primary {
+    background: var(--foreground);
+    color: var(--background);
+    border: 1px solid var(--foreground);
+}
+
+.btn-primary:hover:not(:disabled) {
+    background: var(--background);
+    color: var(--foreground);
+}
+
+.btn-danger {
+    color: var(--error);
+    border-color: var(--error);
+}
+
+.btn-danger:hover:not(:disabled) {
+    background: var(--error);
+    color: white;
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Control Panel */
+.control-panel {
+    grid-column: 1 / -1;
+    margin-top: 24px;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+/* Footer */
+footer {
+    padding: 48px 24px;
+    border-top: 1px solid var(--accents-2);
+    color: var(--accents-5);
+    font-size: 0.8rem;
+}
+
+.footer-content {
+    max-width: 1000px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.status-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+    background: var(--accents-4);
+    margin-right: 8px;
+}
+
+.status-indicator.online {
+    background: var(--success);
+    box-shadow: 0 0 8px var(--success);
+}
+
+/* Responsive */
 @media (max-width: 768px) {
     .dashboard-grid {
-        grid-template-columns: 1fr 1fr; /* 2 columns on tablet/mobile */
+        grid-template-columns: 1fr;
     }
 
     .dashboard-main {
-        grid-template-columns: 1fr; /* Stack panels */
+        grid-template-columns: 1fr;
     }
 }

src/web/router.ts

@@ -45,5 +45,12 @@ export async function router(request: Request): Promise<Response> {
         }
     }
 
+    if (method === "POST") {
+        if (url.pathname === "/api/actions") {
+            const { actionsRoute } = await import("./routes/actions");
+            return actionsRoute(request);
+        }
+    }
+
     return new Response("Not Found", { status: 404 });
 }

src/web/routes/actions.ts

@@ -0,0 +1,56 @@
+import { AuroraClient } from "@/lib/BotClient";
+import { logger } from "@/lib/logger";
+
+export async function actionsRoute(request: Request): Promise<Response> {
+    const url = new URL(request.url);
+    const body = await request.json().catch(() => ({})) as any;
+    const action = body.action;
+
+    if (!action) {
+        return new Response(JSON.stringify({ success: false, error: "No action provided" }), {
+            status: 400,
+            headers: { "Content-Type": "application/json" }
+        });
+    }
+
+    try {
+        switch (action) {
+            case "reload_commands":
+                logger.info("Web Dashboard: Triggering command reload...");
+                await AuroraClient.loadCommands(true);
+                await AuroraClient.deployCommands();
+                return new Response(JSON.stringify({ success: true, message: "Commands reloaded successfully" }), {
+                    headers: { "Content-Type": "application/json" }
+                });
+
+            case "clear_cache":
+                logger.info("Web Dashboard: Triggering cache clear...");
+                // For now, we'll reload events and commands as a "clear cache" action
+                await AuroraClient.loadEvents(true);
+                await AuroraClient.loadCommands(true);
+                return new Response(JSON.stringify({ success: true, message: "Cache cleared and systems reloaded" }), {
+                    headers: { "Content-Type": "application/json" }
+                });
+
+            case "restart_bot":
+                logger.info("Web Dashboard: Triggering bot restart...");
+                // We don't await this because it will exit the process
+                setTimeout(() => AuroraClient.shutdown(), 1000);
+                return new Response(JSON.stringify({ success: true, message: "Bot shutdown initiated. If managed by a process manager, it will restart." }), {
+                    headers: { "Content-Type": "application/json" }
+                });
+
+            default:
+                return new Response(JSON.stringify({ success: false, error: `Unknown action: ${action}` }), {
+                    status: 400,
+                    headers: { "Content-Type": "application/json" }
+                });
+        }
+    } catch (error: any) {
+        logger.error(`Error executing action ${action}:`, error);
+        return new Response(JSON.stringify({ success: false, error: error.message }), {
+            status: 500,
+            headers: { "Content-Type": "application/json" }
+        });
+    }
+}

src/web/routes/dashboard.ts

@@ -12,72 +12,115 @@ export function dashboardRoute(): Response {
     const ping = AuroraClient.ws.ping;
 
     // Real system metrics
-    const memoryUsage = (process.memoryUsage().heapUsed / 1024 / 1024).toFixed(2);
+    const memUsage = process.memoryUsage();
+    const memoryUsage = (memUsage.heapUsed / 1024 / 1024).toFixed(2);
+    const memoryTotal = (memUsage.rss / 1024 / 1024).toFixed(1);
     const uptimeSeconds = process.uptime();
     const uptime = new Date(uptimeSeconds * 1000).toISOString().substr(11, 8); // HH:MM:SS
+    const startTimestamp = Date.now() - (uptimeSeconds * 1000);
 
     // Real activity logs
     const activityLogs = getRecentLogs();
 
+    const memPercent = Math.min(100, (memUsage.heapUsed / memUsage.rss) * 100).toFixed(1);
+
+    // Get top guilds
+    const topGuilds = AuroraClient.guilds.cache
+        .sort((a, b) => b.memberCount - a.memberCount)
+        .first(5);
+
     const content = `
         <div class="dashboard-grid">
             <!-- Top Stats Row -->
             <div class="stat-card">
-                <h3>Servers</h3>
+                 <div class="stat-header">
-                <div class="stat-value">${guildCount}</div>
+                    <h3>Members</h3>
+                    <i data-lucide="users" style="width: 14px; height: 14px; color: var(--accents-5)"></i>
+                </div>
+                <div id="stat-users" class="stat-value">${userCount.toLocaleString()}</div>
+                <div class="stat-trend">
+                     <span>Total user reach</span>
+                </div>
             </div>
             <div class="stat-card">
-                <h3>Users</h3>
+                 <div class="stat-header">
-                <div class="stat-value">${userCount}</div>
+                    <h3>Guilds</h3>
+                    <i data-lucide="server" style="width: 14px; height: 14px; color: var(--accents-5)"></i>
+                </div>
+                <div id="stat-servers" class="stat-value">${guildCount}</div>
+                <div class="stat-trend">
+                     <span>Active connections</span>
+                </div>
             </div>
             <div class="stat-card">
-                <h3>Commands</h3>
+                 <div class="stat-header">
-                <div class="stat-value">${commandCount}</div>
+                    <h3>Latency</h3>
-            </div>
+                    <i data-lucide="activity" style="width: 14px; height: 14px; color: var(--accents-5)"></i>
-            <div class="stat-card">
+                </div>
-                <h3>Ping</h3>
+                <div id="stat-ping" class="stat-value">${ping < 0 ? "?" : ping}ms</div>
-                <div class="stat-value">${ping < 0 ? "?" : ping}ms</div>
+                <div id="stat-ping-trend" class="stat-trend ${ping < 100 ? "up" : "down"}">
+                     <i data-lucide="${ping < 100 ? "check-circle" : "alert-circle"}" style="width: 12px; height: 12px"></i>
+                     <span>${ping < 100 ? "Stable" : "High"}</span>
+                </div>
             </div>
 
             <!-- Main Content Area -->
             <div class="dashboard-main">
                 <div class="panel activity-panel">
-                    <div class="panel-header">
+                    <div class="panel-header" style="display: flex; justify-content: space-between; align-items: center;">
-                        <h2>Live Activity</h2>
+                        <h2>Activity Flow</h2>
-                        <span class="badge live">LIVE</span>
+                        <span class="badge live">Live</span>
                     </div>
                     <ul class="activity-feed">
                         ${activityLogs.length > 0 ? activityLogs.map(log => `
-                            <li class="activity-item ${log.type}">
+                            <li class="activity-item">
                                 <span class="time">${log.time}</span>
                                 <span class="message">${log.message}</span>
                             </li>
                         `).join('') : `
-                            <li class="activity-item info"><span class="time">--:--:--</span> <span class="message">No recent activity.</span></li>
+                            <li class="activity-item">
+                                <span class="message" style="color: var(--accents-5)">Listening for activity...</span>
+                            </li>
                         `}
                     </ul>
                 </div>
 
-                <div class="panel metrics-panel">
+                <div class="panel" style="display: flex; flex-direction: column; gap: 24px;">
-                    <div class="panel-header">
+                    <div>
-                        <h2>System Health</h2>
+                        <div class="panel-header">
+                            <h2>Health</h2>
+                        </div>
+                        <div class="metrics-grid">
+                            <div class="metric-card">
+                                <div class="metric-header">
+                                    <span class="metric-label">Memory</span>
+                                    <span id="stat-memory" class="metric-value">${memoryUsage} MB</span>
+                                </div>
+                                <div class="progress-bar-bg">
+                                    <div id="stat-memory-bar" class="progress-bar-fill" style="width: ${memPercent}%"></div>
+                                </div>
+                            </div>
+                            
+                            <div class="metric-card">
+                                 <div class="metric-header">
+                                    <span class="metric-label">Uptime</span>
+                                    <span id="stat-uptime" class="metric-value uptime-display" data-start-timestamp="${Math.floor(startTimestamp)}">${uptime}</span>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <div class="metrics-grid">
+
-                        <div class="metric-item">
+                    <div>
-                            <span class="metric-label">Uptime</span>
+                        <div class="panel-header">
-                            <span class="metric-value">${uptime}</span>
+                            <h2>Top Guilds</h2>
                         </div>
-                        <div class="metric-item">
+                        <div class="guild-list" style="display: flex; flex-direction: column; gap: 12px;">
-                            <span class="metric-label">Memory (Heap)</span>
+                            ${topGuilds.map(g => `
-                            <span class="metric-value">${memoryUsage} MB</span>
+                                <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem;">
-                        </div>
+                                    <span style="font-weight: 500;">${g.name}</span>
-                         <div class="metric-item">
+                                    <span style="color: var(--accents-5); font-family: var(--font-mono);">${g.memberCount} members</span>
-                            <span class="metric-label">Node Version</span>
+                                </div>
-                            <span class="metric-value">${process.version}</span>
+                            `).join('')}
-                        </div>
-                         <div class="metric-item">
-                            <span class="metric-label">Platform</span>
-                            <span class="metric-value">${process.platform}</span>
                         </div>
                     </div>
                 </div>
@@ -89,9 +132,15 @@ export function dashboardRoute(): Response {
                     <h2>Quick Actions</h2>
                 </div>
                 <div class="action-buttons">
-                    <button class="btn btn-secondary" disabled>Clear Cache</button>
+                    <button class="btn" data-action="clear_cache">
-                    <button class="btn btn-secondary" disabled>Reload Commands</button>
+                        Clear Cache
-                    <button class="btn btn-danger" disabled>Restart Bot</button>
+                    </button>
+                    <button class="btn" data-action="reload_commands">
+                        Reload Commands
+                    </button>
+                    <button class="btn btn-danger" data-action="restart_bot">
+                        Restart Bot
+                    </button>
                 </div>
             </div>
         </div>

src/web/server.ts

@@ -1,6 +1,7 @@
 import { env } from "@/lib/env";
 import { router } from "./router";
 import type { Server } from "bun";
+import { AuroraClient } from "@/lib/BotClient";
 
 export class WebServer {
     private static server: Server<unknown> | null = null;
@@ -42,16 +43,22 @@ export class WebServer {
         // Start a heartbeat loop
         this.heartbeatInterval = setInterval(() => {
             if (this.server) {
-                const uptime = process.uptime();
+                const memoryUsage = process.memoryUsage();
                 this.server.publish("status-updates", JSON.stringify({
                     type: "HEARTBEAT",
                     data: {
-                        uptime,
+                        guildCount: AuroraClient.guilds.cache.size,
+                        userCount: AuroraClient.guilds.cache.reduce((acc, guild) => acc + guild.memberCount, 0),
+                        commandCount: AuroraClient.commands.size,
+                        ping: AuroraClient.ws.ping,
+                        memory: (memoryUsage.heapUsed / 1024 / 1024).toFixed(2),
+                        memoryTotal: (memoryUsage.rss / 1024 / 1024).toFixed(2),
+                        uptime: process.uptime(),
                         timestamp: Date.now()
                     }
                 }));
             }
-        }, 5000);
+        }, 3000); // Update every 3 seconds for better responsiveness
     }
 
     public static stop() {

src/web/views/layout.ts

@@ -24,14 +24,15 @@ export function BaseLayout({ title, content }: LayoutProps): string {
     <meta name="description" content="Aurora Bot Web Interface">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/lucide@latest"></script>
 </head>
 <body>
     <header>
-        <h1>Aurora Web</h1>
+        <h1>Aurora</h1>
         <nav>
             <a href="/">Home</a>
-            <a href="/dashboard">Dashboard</a>
+            <a href="/dashboard" class="active">Dashboard</a>
         </nav>
     </header>
     <main>
@@ -39,12 +40,12 @@ export function BaseLayout({ title, content }: LayoutProps): string {
     </main>
     <footer>
         <div class="footer-content">
-            <p>&copy; ${new Date().getFullYear()} Aurora Bot</p>
+            <p>&copy; ${new Date().getFullYear()} Aurora</p>
             <div class="footer-status">
-                <span class="status-indicator online">●</span>
+                <span class="status-indicator online"></span>
-                <span>System Operational</span>
+                <span>Operational</span>
-                <span class="separator">|</span>
+                <span style="margin: 0 8px; color: var(--accents-2)">/</span>
-                <span>Uptime: <span id="uptime-display" data-start-timestamp="${Math.floor(startTimestamp)}">${initialUptimeString}</span></span>
+                <span id="uptime-display" data-start-timestamp="${Math.floor(startTimestamp)}">${initialUptimeString}</span>
             </div>
         </div>
     </footer>