Auto refresh

app/static/auto_refresh.js

@@ -0,0 +1,51 @@
+(function () {
+  const body = document.body;
+  if (!body) return;
+
+  if (body.dataset.autoRefresh !== "true") return;
+
+  const statusEl = document.getElementById("refreshStatus");
+
+  const intervalSeconds = Number(body.dataset.collectIntervalSeconds || "0");
+  if (!Number.isFinite(intervalSeconds) || intervalSeconds <= 0) return;
+
+  const intervalMs = Math.max(60000, intervalSeconds * 1000);
+  const graceMs = 8000;
+  const timeFmt = new Intl.DateTimeFormat([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+
+  function setStatus(lastRefreshAt, nextRefreshAt) {
+    if (!statusEl) return;
+    statusEl.textContent = `Last refresh: ${timeFmt.format(lastRefreshAt)} | Next refresh: ${timeFmt.format(nextRefreshAt)}`;
+  }
+
+  function reloadWhenVisible() {
+    if (document.visibilityState === "visible") {
+      window.location.reload();
+      return;
+    }
+
+    function onVisibilityChange() {
+      if (document.visibilityState !== "visible") return;
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      window.location.reload();
+    }
+
+    document.addEventListener("visibilitychange", onVisibilityChange);
+  }
+
+  function scheduleAlignedRefresh() {
+    const now = Date.now();
+    const nextBoundary = Math.ceil(now / intervalMs) * intervalMs;
+    const runAt = nextBoundary + graceMs;
+    setStatus(new Date(now), new Date(runAt));
+    const delay = Math.max(1000, runAt - now);
+
+    window.setTimeout(reloadWhenVisible, delay);
+  }
+
+  scheduleAlignedRefresh();
+})();

app/static/styles.css

@@ -31,6 +31,7 @@ a {
   top: 0;
   z-index: 10;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
@@ -62,6 +63,18 @@ a {
   color: #fff;
 }
 
+.refresh-status {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.82rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.refresh-status:empty {
+  display: none;
+}
+
 .page {
   width: min(1180px, calc(100vw - 32px));
   margin: 0 auto;
@@ -305,6 +318,15 @@ th {
 }
 
 @media (max-width: 900px) {
+  .topbar {
+    align-items: flex-start;
+  }
+
+  .refresh-status {
+    width: 100%;
+    white-space: normal;
+  }
+
   .cards {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }