From 3cb6501bad4e433ae1797243f10edb77f4e92a8d Mon Sep 17 00:00:00 2001
From: Ben Cos <contact@jarvisdiscordbot.net>
Date: Sat, 6 Jun 2026 09:55:17 +0100
Subject: [PATCH] Update clusters.html

---
 clusters.html | 133 +++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 120 insertions(+), 13 deletions(-)

diff --git a/clusters.html b/clusters.html
index fc4d113..c57feb7 100644
--- a/clusters.html
+++ b/clusters.html
@@ -5,8 +5,11 @@
   <link rel="icon" href="/favicon.ico" type="image/x-icon">
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Live cluster telemetry for Jarvis Discord Bot — uptime, system health, and shard status." />
   <title>Jarvis Bot - Cluster Status</title>
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"
+    integrity="sha384-vsrfeLOOY6KuIYKDlmVH5UiBmgIdB1oEf7p01YgWHuqmOHfZr374+odEv96n9tNC"
+    crossorigin="anonymous"></script>
   <style>
     :root {
       color-scheme: dark;
@@ -536,6 +539,15 @@
       text-align: center;
     }
 
+    footer a {
+      color: var(--accent);
+      text-decoration: none;
+    }
+
+    footer a:hover {
+      text-decoration: underline;
+    }
+
     @media (max-width: 640px) {
       body {
         padding-top: 24px;
@@ -651,7 +663,8 @@ <h2>Clusters</h2>
       <div class="cluster-container" id="clusters"></div>
     </section>
 
-    <footer>&copy; 2026 Jarvis Discord Bot | Live cluster telemetry</footer>
+    <footer>&copy; 2026 Jarvis Discord Bot | <a href="https://jarvisdiscordbot.net/">Back to home</a> | Live cluster
+      telemetry</footer>
   </div>
 
   <script>
@@ -659,6 +672,8 @@ <h2>Clusters</h2>
     const latencyCapMs = 300;
     const tabStorageKey = 'clusterDashboard.activeTab';
     const validTabs = ['overview', 'system', 'latency', 'clusters'];
+    let loadRequestId = 0;
+    let refreshIntervalId = null;
 
     const gaugeNeedle = {
       id: 'gaugeNeedle',
@@ -710,6 +725,38 @@ <h2>Clusters</h2>
       return '';
     }
 
+    function destroyGauges() {
+      Object.values(gauges).forEach(chart => chart.destroy());
+      Object.keys(gauges).forEach(key => delete gauges[key]);
+    }
+
+    function clearTelemetryDisplay(message = 'Telemetry unavailable') {
+      destroyGauges();
+
+      document.getElementById('api-version').innerText = '--';
+      document.getElementById('api-version-note').innerText = 'Payload version for this endpoint';
+      document.getElementById('bot-uptime').innerText = '--';
+      document.getElementById('server-uptime').innerText = '--';
+      document.getElementById('platform').innerText = '--';
+      document.getElementById('cpu-summary').innerText = 'CPU: --';
+      document.getElementById('cpu-source').innerText = 'Core source: --';
+      document.getElementById('bot-ram-val').innerText = '--';
+      document.getElementById('bot-ram-detail').innerText = 'Process RSS and configured limit';
+      document.getElementById('ram-val').innerText = '--';
+      document.getElementById('swap-val').innerText = 'Swap: --';
+      document.getElementById('total-servers').innerText = '--';
+      document.getElementById('total-users').innerText = 'Total users: --';
+      document.getElementById('cluster-count').innerText = '0 clusters';
+
+      updateMetricBar('bot-ram-bar', 0, 1);
+      updateMetricBar('ram-bar', 0, 1);
+
+      document.getElementById('system-details').innerHTML = '';
+      document.getElementById('gauge-area').innerHTML = '';
+      document.getElementById('clusters').innerHTML =
+        `<div class="empty-state">${escapeHtml(message)}</div>`;
+    }
+
     function createGauge(id, name, color) {
       const container = document.getElementById('gauge-area');
       const box = document.createElement('div');
@@ -814,7 +861,7 @@ <h3 class="detail-card-title">${escapeHtml(title)}</h3>
       addDetailRow(hostRows, 'OS', systemStats.os);
       addDetailRow(hostRows, 'OS Release', systemStats.os_release);
       addDetailRow(hostRows, 'OS Version', systemStats.os_version);
-      addDetailRow(hostRows, 'Platform', systemStats.platform || 'Linux x86_64');
+      addDetailRow(hostRows, 'Platform', systemStats.platform || 'Unknown');
       addDetailRow(hostRows, 'Machine', systemStats.machine);
       addDetailRow(hostRows, 'Processor', systemStats.processor);
       addDetailRow(hostRows, 'Python Version', systemStats.python_version);
@@ -856,10 +903,6 @@ <h3 class="detail-card-title">${escapeHtml(title)}</h3>
       container.appendChild(createDetailCard('Process', processRows, 'Bot process and runtime information.'));
     }
 
-    function formatCoreSummary(systemStats) {
-      return getCoreSummaryInfo(systemStats).summary;
-    }
-
     function getCoreSummaryInfo(systemStats) {
       const toPositiveNumber = value => {
         const numberValue = Number(value);
@@ -912,6 +955,7 @@ <h3 class="detail-card-title">${escapeHtml(title)}</h3>
       tabs.forEach(tab => {
         const isActive = tab.dataset.tab === resolvedTab;
         tab.setAttribute('aria-selected', String(isActive));
+        tab.tabIndex = isActive ? 0 : -1;
       });
 
       panels.forEach(panel => {
@@ -942,7 +986,33 @@ <h3 class="detail-card-title">${escapeHtml(title)}</h3>
       button.addEventListener('click', () => setActiveTab(button.dataset.tab));
     });
 
+    document.querySelector('.tabs').addEventListener('keydown', event => {
+      const tabs = [...document.querySelectorAll('.tab-button')];
+      const currentIndex = tabs.findIndex(tab => tab.getAttribute('aria-selected') === 'true');
+      if (currentIndex === -1) {
+        return;
+      }
+
+      let nextIndex = currentIndex;
+      if (event.key === 'ArrowRight') {
+        nextIndex = (currentIndex + 1) % tabs.length;
+      } else if (event.key === 'ArrowLeft') {
+        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+      } else if (event.key === 'Home') {
+        nextIndex = 0;
+      } else if (event.key === 'End') {
+        nextIndex = tabs.length - 1;
+      } else {
+        return;
+      }
+
+      event.preventDefault();
+      setActiveTab(tabs[nextIndex].dataset.tab);
+      tabs[nextIndex].focus();
+    });
+
     async function loadClusters() {
+      const requestId = ++loadRequestId;
       const syncStatus = document.getElementById('sync-status');
       const syncDetail = document.getElementById('sync-detail');
 
@@ -951,6 +1021,9 @@ <h3 class="detail-card-title">${escapeHtml(title)}</h3>
         if (!res.ok) throw new Error(`Request failed: ${res.status}`);
 
         const data = await res.json();
+        if (requestId !== loadRequestId) {
+          return;
+        }
         const sys = data.system_stats || {};
         const clusterList = Array.isArray(data.clusters) ? data.clusters : [];
 
@@ -967,7 +1040,7 @@ <h3 class="detail-card-title">${escapeHtml(title)}</h3>
         document.getElementById('api-version-note').innerText = apiVersion ? 'Payload version for this endpoint' : 'Version field not present in payload';
         document.getElementById('bot-uptime').innerText = data.bot_uptime || 'Unknown';
         document.getElementById('server-uptime').innerText = data.server_uptime || 'Unknown';
-        document.getElementById('platform').innerText = sys.platform || 'Linux x86_64';
+        document.getElementById('platform').innerText = sys.platform || 'Unknown';
         const coreInfo = getCoreSummaryInfo(sys);
         document.getElementById('cpu-summary').innerText = `CPU: ${formatPercent(cpuPercent)} | ${coreInfo.summary}`;
         document.getElementById('cpu-source').innerText = `Core source: ${coreInfo.source}${coreInfo.missing.length ? ` | missing: ${coreInfo.missing.join(', ')}` : ''}`;
@@ -985,6 +1058,7 @@ <h3 class="detail-card-title">${escapeHtml(title)}</h3>
         let globalUsers = 0;
         const clusterContainer = document.getElementById('clusters');
         const gaugeArea = document.getElementById('gauge-area');
+        destroyGauges();
         clusterContainer.innerHTML = '';
         gaugeArea.innerHTML = '';
 
@@ -1004,9 +1078,14 @@ <h3 class="detail-card-title">${escapeHtml(title)}</h3>
 
           const latency = Number(cluster.latency_ms ?? 0);
           const gauge = gauges[shardId];
-          gauge.data.datasets[0].data = [Math.min(latency, latencyCapMs), Math.max(0, latencyCapMs - latency)];
-          gauge.update();
-          document.getElementById(`val-${shardId}`).innerText = `${formatNumber(latency, 0)} ms`;
+          if (gauge) {
+            gauge.data.datasets[0].data = [Math.min(latency, latencyCapMs), Math.max(0, latencyCapMs - latency)];
+            gauge.update();
+          }
+          const gaugeValue = document.getElementById(`val-${shardId}`);
+          if (gaugeValue) {
+            gaugeValue.innerText = `${formatNumber(latency, 0)} ms`;
+          }
 
           const servers = Number(cluster.servers ?? 0);
           const users = Number(cluster.users ?? 0);
@@ -1054,14 +1133,42 @@ <h3 class="cluster-name">${escapeHtml(clusterName)}</h3>
         syncDetail.innerText = `Last refresh: ${new Date().toLocaleTimeString()}`;
 
       } catch (err) {
+        if (requestId !== loadRequestId) {
+          return;
+        }
+
         console.error('Failed to load cluster telemetry', err);
+        clearTelemetryDisplay('Unable to reach /clusters right now');
         syncStatus.innerText = 'Telemetry unavailable';
         syncDetail.innerText = 'Unable to reach /clusters right now';
       }
     }
 
-    loadClusters();
-    setInterval(loadClusters, 10000);
+    function startRefreshLoop() {
+      if (refreshIntervalId !== null) {
+        clearInterval(refreshIntervalId);
+      }
+
+      loadClusters();
+      refreshIntervalId = setInterval(loadClusters, 10000);
+    }
+
+    function stopRefreshLoop() {
+      if (refreshIntervalId !== null) {
+        clearInterval(refreshIntervalId);
+        refreshIntervalId = null;
+      }
+    }
+
+    startRefreshLoop();
+
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden) {
+        stopRefreshLoop();
+      } else {
+        startRefreshLoop();
+      }
+    });
   </script>
 </body>