From c935caa09321abe4523076e1a6feea4bbe731216 Mon Sep 17 00:00:00 2001
From: Jan Unterbrink <19386509+subpathdev@users.noreply.github.com>
Date: Sun, 1 Nov 2026 16:51:00 +0100
Subject: [PATCH] feat: show a status dot in the page's top right corner

Green with "All OK" only when the server and broker are reachable and every
thermostat has reported recently and confirmed its commands. Otherwise it's red
with the reason in words, because a page that loads says nothing about the
devices, and old values look like fresh ones.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 internal/web/static/index.html | 39 ++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/internal/web/static/index.html b/internal/web/static/index.html
index e27a853..a4340df 100644
--- a/internal/web/static/index.html
+++ b/internal/web/static/index.html
@@ -13,11 +13,13 @@
     color-scheme: light dark;
     --bg: #f6f5f2; --card: #ffffff; --text: #1d1f21; --muted: #666a70;
     --line: #dddcd7; --button: #eceae5; --accent: #b4490f; --error: #a4161a;
+    --good: #1a7f37; --bad: #c62828;
   }
   @media (prefers-color-scheme: dark) {
     :root {
       --bg: #191a1c; --card: #24262a; --text: #eeeeec; --muted: #a2a6ac;
       --line: #383a3f; --button: #33363b; --accent: #f08a4b; --error: #ff8a8a;
+      --good: #3fb950; --bad: #ff6b6b;
     }
   }
   * { box-sizing: border-box; }
@@ -27,7 +29,11 @@
     background: var(--bg); color: var(--text);
     font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   }
-  h1 { font-size: 1.25rem; margin: 4px 0 16px; }
+  header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 16px; }
+  h1 { font-size: 1.25rem; margin: 0; }
+  #status { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; text-align: right; }
+  #status::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
+  #status.good::before { background: var(--good); }
   .room {
     background: var(--card); border: 1px solid var(--line); border-radius: 12px;
     padding: 14px; margin-bottom: 12px;
@@ -56,12 +62,16 @@
 </style>
 </head>
 <body>
-<h1>Heating</h1>
+<header>
+  <h1>Heating</h1>
+  <div id="status" role="status">Connecting…</div>
+</header>
 <div id="rooms"></div>
 <p id="error" role="status"></p>
 <script>
   const roomsEl = document.getElementById('rooms');
   const errorEl = document.getElementById('error');
+  const statusEl = document.getElementById('status');
   const steps = [-1, -0.5, 0.5, 1];
   const cards = new Map();
   let data = null;
@@ -79,12 +89,16 @@ <h1>Heating</h1>
   }
 
   const airingMinutes = [5, 15, 30, 60];
+  // Thermostats report at least about every 25 minutes.
+  const staleAfterMs = 2 * 3600 * 1000;
 
   const clock = iso => new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
   const degrees = v => v == null ? '–' : v.toFixed(1) + ' °C';
   const signed = s => (s > 0 ? '+' : '−') + Math.abs(s);
   const inRange = v => v >= data.minTarget && v <= data.maxTarget;
 
+  const isStale = room => room.lastSeen && Date.now() - new Date(room.lastSeen) > staleAfterMs;
+
   function describe(room) {
     switch (room.airingState) {
       case 'starting': return 'Airing: turning the heating off';
@@ -101,8 +115,7 @@ <h1>Heating</h1>
     if (room.targetState === 'failed') return { text: 'The thermostat didn\'t take the last change.', problem: true };
     if (room.targetState === 'held') return { text: 'Target applies when heating is back.', problem: false };
     if (room.targetState === 'sending') return { text: 'Sending the target…', problem: false };
-    const lastSeen = room.lastSeen ? Date.now() - new Date(room.lastSeen) : 0;
-    if (lastSeen > 2 * 3600 * 1000) return { text: 'Last report at ' + clock(room.lastSeen) + '.', problem: true };
+    if (isStale(room)) return { text: 'Last report at ' + clock(room.lastSeen) + '.', problem: true };
     return { text: '', problem: false };
   }
 
@@ -159,6 +172,22 @@ <h1>Heating</h1>
     return { now, state, value, buttons, start, stop, problem };
   }
 
+  // The page loading proves nothing about the devices, so green means the server,
+  // the broker and every thermostat are all fine.
+  function roomProblem() {
+    for (const room of data.rooms) {
+      if (room.commandFailed) return room.label + ': not confirming';
+      if (!room.lastSeen) return room.label + ': no report yet';
+      if (isStale(room)) return room.label + ': no report since ' + clock(room.lastSeen);
+    }
+    return '';
+  }
+
+  function showStatus(problem) {
+    statusEl.className = problem ? '' : 'good';
+    statusEl.textContent = problem || 'All OK';
+  }
+
   // Updates the existing elements: replacing a button during a tap loses the tap.
   function render() {
     for (const room of data.rooms) {
@@ -192,9 +221,11 @@ <h1>Heating</h1>
       data = next;
       render();
       connectionError = data.connected ? '' : 'No connection to the broker: values may be old and commands wait.';
+      showStatus(data.connected ? roomProblem() : 'No broker');
     } catch {
       if (generation !== refreshGeneration) return;
       connectionError = 'Can\'t reach the server. Are you on the home Wi-Fi?';
+      showStatus('No server');
     }
     showError();
   }