From 39febb67b6cf12f77b3f8df61d8edf6554a1df20 Mon Sep 17 00:00:00 2001
From: Sergey Krashevich <svk@svk.su>
Date: Fri, 13 Feb 2026 15:47:08 +0300
Subject: [PATCH] feat(index.html): add time history for system info graph -
 introduce timeHistory array to track timestamps - implement formatClock
 function for time formatting - create renderXAxisLabels function for x-axis
 labels

---
 www/index.html | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/www/index.html b/www/index.html
index 98f5893e..541fb1f5 100644
--- a/www/index.html
+++ b/www/index.html
@@ -150,6 +150,7 @@
     const infoURL = new URL('api', location.href);
     const cpuHistory = [];
     const memHistory = [];
+    const timeHistory = [];
     const graphWidth = 36;
     const graphHeight = 8;
     const infoUpdateInterval = window.SYSTEM_INFO_UPDATE_INTERVAL_MS ?? 2000;
@@ -180,6 +181,20 @@
         return `${value.toFixed(value >= 100 || index === 0 ? 0 : 1)} ${units[index]}`;
     }
 
+    function formatClock(timeMs) {
+        return new Date(timeMs).toTimeString().slice(0, 8);
+    }
+
+    function renderXAxisLabels(width) {
+        if (!timeHistory.length) return ' '.repeat(width);
+
+        const start = formatClock(timeHistory[0]);
+        const end = formatClock(timeHistory[timeHistory.length - 1]);
+        if (start.length + end.length >= width) return `${start} ${end}`;
+
+        return `${start}${' '.repeat(width - start.length - end.length)}${end}`;
+    }
+
     function renderAsciiGraphLines(history) {
         const bars = Array.from({length: graphWidth}, (_, index) => {
             const value = history[index] ?? 0;
@@ -219,6 +234,8 @@
             for (let i = 0; i < cpuLines.length; i++) {
                 detailsLines.push(`${cpuLines[i]}   ${memLines[i]}`);
             }
+            const timeLabels = renderXAxisLabels(graphBlockWidth);
+            detailsLines.push(`${timeLabels}   ${timeLabels}`);
         }
 
         const lines = [
@@ -251,8 +268,10 @@
             const isUsageUnsupported = cpuUsage === 0 && memUsage === 0;
 
             if (!isUsageUnsupported) {
+                const now = Date.now();
                 pushHistory(cpuHistory, cpuUsage);
                 pushHistory(memHistory, memUsage);
+                pushHistory(timeHistory, now);
             } else {
                 stopInfoUpdates();
             }