Add batched status endpoint and optimize frontend performance

Server-side batched /api/v1/services/status endpoint replaces N
individual browser probes with a single API call (HEAD-first with
GET fallback, concurrency-limited, CA-aware HTTPS agent).

Frontend: clock reuses DOM instead of rebuilding innerHTML every
second with drift-correcting timer that pauses on hidden tabs.
Card animations use CSS transitionDelay + requestAnimationFrame.
Internet dot blink moved from JS intervals to CSS keyframes with
prefers-reduced-motion support. Service worker rewritten with
network-first navigation, stale-while-revalidate assets, and
navigation preload. Font faces drop TTF fallbacks, use font-display
swap.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

status/js/clock.js

@@ -12,6 +12,9 @@
   let lastChimeHour = -1;
   let chimePlaying = false;
   let prevFlipDigits = '';
+  let activeLayout = '';
+  let digitalRefs = null;
+  let tickTimer = null;
 
   // ===== CHIMES =====
   function playChimes(count) {
@@ -37,24 +40,49 @@
     return DAYS[now.getDay()] + ', ' + MONTHS[now.getMonth()] + ' ' + now.getDate() + ', ' + now.getFullYear();
   }
 
+  function resetRenderLayout() {
+    activeLayout = '';
+    digitalRefs = null;
+  }
+
+  function ensureDigitalLayout() {
+    if (activeLayout !== 'digital') {
+      render.innerHTML =
+        '<div class="clock-time"><span class="clock-main"></span><span class="clock-seconds"></span><span class="clock-ampm"></span></div>' +
+        '<div class="clock-date"></div>';
+      digitalRefs = {
+        main: render.querySelector('.clock-main'),
+        seconds: render.querySelector('.clock-seconds'),
+        ampm: render.querySelector('.clock-ampm'),
+        date: render.querySelector('.clock-date')
+      };
+      activeLayout = 'digital';
+    }
+    return digitalRefs;
+  }
+
   // ===== STYLE RENDERERS =====
 
   function renderDefault(now) {
     const h24 = now.getHours(), m = now.getMinutes(), s = now.getSeconds();
     const ampm = h24 >= 12 ? 'PM' : 'AM';
     const h = h24 % 12 || 12;
-    render.innerHTML =
-      `<div class="clock-time">${h}:${String(m).padStart(2,'0')}<span class="clock-seconds">:${String(s).padStart(2,'0')}</span><span class="clock-ampm">${ampm}</span></div>` +
-      `<div class="clock-date">${dateStr(now)}</div>`;
+    const refs = ensureDigitalLayout();
+    refs.main.textContent = `${h}:${String(m).padStart(2,'0')}`;
+    refs.seconds.textContent = `:${String(s).padStart(2,'0')}`;
+    refs.ampm.textContent = ampm;
+    refs.date.textContent = dateStr(now);
   }
 
   function renderLcd(now, cls) {
     const h24 = now.getHours(), m = now.getMinutes(), s = now.getSeconds();
     const ampm = h24 >= 12 ? 'PM' : 'AM';
     const h = h24 % 12 || 12;
-    render.innerHTML =
-      `<div class="clock-time">${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}<span class="clock-seconds">:${String(s).padStart(2,'0')}</span><span class="clock-ampm">${ampm}</span></div>` +
-      `<div class="clock-date">${dateStr(now)}</div>`;
+    const refs = ensureDigitalLayout();
+    refs.main.textContent = `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`;
+    refs.seconds.textContent = `:${String(s).padStart(2,'0')}`;
+    refs.ampm.textContent = ampm;
+    refs.date.textContent = dateStr(now);
   }
 
   function renderFlip(now) {
@@ -79,6 +107,7 @@
     html += '</div>';
     html += `<div class="clock-date">${dateStr(now)}</div>`;
     render.innerHTML = html;
+    activeLayout = 'flip';
 
     // Trigger flip animation on changed digits
     if (prevFlipDigits) {
@@ -130,6 +159,7 @@
     html += '</div>';
     html += `<div class="clock-date">${dateStr(now)}</div>`;
     render.innerHTML = html;
+    activeLayout = 'binary';
   }
 
   function renderAnalog(now, useRoman) {
@@ -180,6 +210,7 @@
 
     const ampm = now.getHours() >= 12 ? 'PM' : 'AM';
     render.innerHTML = `<div class="analog-clock-wrap">${svg}<div class="analog-info"><span class="analog-digital">${(now.getHours() % 12 || 12)}:${String(m).padStart(2,'0')} ${ampm}</span><span class="analog-date-sm">${dateStr(now)}</span></div></div>`;
+    activeLayout = 'analog';
   }
 
   // ===== MAIN TICK =====
@@ -190,7 +221,10 @@
     const s = now.getSeconds();
 
     // Set style class on widget
-    widget.className = 'clock-widget' + (currentStyle !== 'default' ? ' ' + currentStyle : '');
+    const nextClassName = 'clock-widget' + (currentStyle !== 'default' ? ' ' + currentStyle : '');
+    if (widget.className !== nextClassName) {
+      widget.className = nextClassName;
+    }
 
     switch (currentStyle) {
       case 'lcd': renderLcd(now); break;
@@ -213,8 +247,25 @@
     if (m !== 0) lastChimeHour = -1;
   }
 
+  function scheduleNextTick() {
+    clearTimeout(tickTimer);
+    const interval = document.hidden ? 60000 : 1000;
+    const delay = interval - (Date.now() % interval) + 25;
+    tickTimer = setTimeout(() => {
+      tick();
+      scheduleNextTick();
+    }, delay);
+  }
+
+  document.addEventListener('visibilitychange', () => {
+    prevFlipDigits = '';
+    resetRenderLayout();
+    tick();
+    scheduleNextTick();
+  });
+
   tick();
-  setInterval(tick, 1000);
+  scheduleNextTick();
 
   // ===== SETTINGS MODAL =====
   const STYLES = [
@@ -308,7 +359,9 @@
     safeSet('clock-chime-volume', volumeSlider.value);
     currentStyle = style;
     prevFlipDigits = '';
+    resetRenderLayout();
     tick();
+    scheduleNextTick();
     modal.classList.remove('show');
     showNotification('Clock settings saved', 'success', 2000);
   });
@@ -324,6 +377,7 @@
     radio.addEventListener('change', () => {
       currentStyle = radio.value;
       prevFlipDigits = '';
+      resetRenderLayout();
       tick();
     });
   });