Show whether the status on / and /status is fresh (closes #152)

Each page's script turns a one-character braille spinner next to the
status whenever a stats answer counts more messages than the one
before. Its colour cycles as rtnetmon's does. A separate check runs
every second. Once no such answer has come for three refresh periods,
15 seconds on / and 6 on /status, it shows "stale" and the seconds
since, in the page's disconnected colour. A failed or hung request
counts as no fresh answer. On / the card has no room beside
"Connected", so the indicator sits on the line under it. A test renders
both pages and checks the indicator follows the status element.

Model: opus-5-5

internal/templates/status.html

@@ -126,7 +126,8 @@
         .connected {
             color: #22c55e;
         }
-        .disconnected {
+        .disconnected,
+        .stale {
             color: #ef4444;
         }
         .error {
@@ -180,7 +181,10 @@
             <h2>RouteWatch</h2>
             <div class="metric">
                 <span class="metric-label">Status</span>
-                <span class="metric-value" id="connected">-</span>
+                <span>
+                    <span class="metric-value" id="connected">-</span>
+                    <span class="metric-value" id="freshness"></span>
+                </span>
             </div>
             <div class="metric">
                 <span class="metric-label">Uptime</span>
@@ -386,6 +390,44 @@
     </div>
 
     <script nonce="{{.CSPNonce}}">
+        // The stats are fetched every REFRESH_PERIOD_MS. Next to the status, a
+        // spinner turns one frame each time an answer counts more messages
+        // than the one before. After STALE_AFTER_REFRESHES refreshes without
+        // such an answer, the spinner gives way to "stale" and the time since.
+        const REFRESH_PERIOD_MS = 2000;
+        const STALE_AFTER_REFRESHES = 3;
+        const MS_PER_SECOND = 1000;
+        const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+        const SPINNER_COLOURS = ['#e74c3c', '#e67e22', '#f1c40f', '#27ae60', '#3498db', '#9b59b6'];
+
+        let spinnerFrame = 0;
+        let lastMessageCount = null;
+        let lastFreshAt = Date.now();
+
+        // Turn the spinner when the message count has risen since the last answer.
+        function noteMessageCount(count) {
+            if (lastMessageCount !== null && count > lastMessageCount) {
+                spinnerFrame = (spinnerFrame + 1) % SPINNER_FRAMES.length;
+                lastFreshAt = Date.now();
+            }
+            lastMessageCount = count;
+            showFreshness();
+        }
+
+        function showFreshness() {
+            const freshness = document.getElementById('freshness');
+            const sinceFreshMs = Date.now() - lastFreshAt;
+            const stale = sinceFreshMs >= STALE_AFTER_REFRESHES * REFRESH_PERIOD_MS;
+            freshness.classList.toggle('stale', stale);
+            if (stale) {
+                freshness.textContent = 'stale for ' + Math.floor(sinceFreshMs / MS_PER_SECOND) + 's';
+                freshness.style.color = '';
+                return;
+            }
+            freshness.textContent = SPINNER_FRAMES[spinnerFrame];
+            freshness.style.color = SPINNER_COLOURS[spinnerFrame % SPINNER_COLOURS.length];
+        }
+
         function formatBytes(bytes) {
             if (bytes === 0) return '0 B';
             const k = 1024;
@@ -569,7 +611,8 @@
                     const connectedEl = document.getElementById('connected');
                     connectedEl.textContent = data.connected ? 'Connected' : 'Disconnected';
                     connectedEl.className = 'metric-value ' + (data.connected ? 'connected' : 'disconnected');
-                    
+                    noteMessageCount(data.total_messages);
+
                     // Update all metrics
                     document.getElementById('uptime').textContent = data.uptime;
                     document.getElementById('go_version').textContent = data.go_version;
@@ -643,9 +686,12 @@
                 });
         }
         
-        // Update immediately and then every 2 seconds
+        // Update immediately and then every REFRESH_PERIOD_MS. The freshness
+        // check runs every second on its own, so a request that never returns
+        // still turns the spinner into "stale".
         updateStatus();
-        setInterval(updateStatus, 2000);
+        setInterval(updateStatus, REFRESH_PERIOD_MS);
+        setInterval(showFreshness, MS_PER_SECOND);
     </script>
     </main>