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>
2026-03-11 22:39:29 -07:00
parent 063bf948b1
commit 0f4bd419e1
6 changed files with 476 additions and 150 deletions
--- a/status/js/clock.js
+++ b/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();
    });
  });
--- a/status/js/core/grid.js
+++ b/status/js/core/grid.js
@@ -29,45 +29,8 @@
      card.setAttribute('data-status', up ? 'on' : 'off');
    }

-    // Internet card packet blink effect
-    if (id === 'internet' && dot && up) {
-      blinkInternetPacket(dot);
-    }
  }

-  // Internet card packet activity blink
-  let internetBlinkInterval = null;
-  function blinkInternetPacket(dot) {
-    // Alternate between rx (green) and tx (blue) to simulate bidirectional traffic
-    const isRx = Math.random() > 0.5;
-    dot.classList.add(isRx ? 'packet-rx' : 'packet-tx');
-    setTimeout(() => {
-      dot.classList.remove('packet-rx', 'packet-tx');
-    }, 150);
-  }
-
-  // Continuous packet simulation for Internet card when online
-  function startInternetPacketSimulation() {
-    if (internetBlinkInterval) return;
-    internetBlinkInterval = setInterval(() => {
-      const dot = document.getElementById('internet-dot');
-      const card = document.querySelector('[data-app="internet"]');
-      if (dot && card && card.getAttribute('data-status') === 'on') {
-        blinkInternetPacket(dot);
-      }
-    }, 300 + Math.random() * 400); // Random interval 300-700ms
-  }
-
-  function stopInternetPacketSimulation() {
-    if (internetBlinkInterval) {
-      clearInterval(internetBlinkInterval);
-      internetBlinkInterval = null;
-    }
-  }
-
-  // Start simulation on page load
-  startInternetPacketSimulation();
-
  function getResponseTimeClass(time, isUp) {
    if (!isUp) return 'timeout';
    if (time < 200) return 'excellent';
@@ -93,6 +56,8 @@

  /* App grid - loaded from API */
  window.APPS = []; // Use window.APPS as the main array
+  let refreshInFlight = null;
+  let refreshQueued = false;

  // Load services from API
  async function loadServices() {
@@ -290,17 +255,17 @@
      btn.onclick = () => window.open(serviceUrl(s.id), '_blank', 'noopener');
      btnRow.appendChild(btn);
      card.appendChild(btnRow);
+      card.style.transitionDelay = `${Math.min(i * 45, 270)}ms`;

      root.appendChild(card);
-
-      // Staggered loading animation
-      setTimeout(() => {
-        card.classList.add('loaded');
-      }, i * 100); // 100ms delay between each card
    }

+    requestAnimationFrame(() => {
+      root.querySelectorAll('.card').forEach(card => card.classList.add('loaded'));
+    });
+
    // Group recipe cards visually after grid is built
-    if (window.groupRecipeCards) setTimeout(window.groupRecipeCards, 50);
+    if (window.groupRecipeCards) requestAnimationFrame(() => window.groupRecipeCards());
  }

  function setBadge(id, up, responseTime = null) {
@@ -332,30 +297,83 @@
  }

  async function refreshAll() {
-    // Check DNS servers dynamically (only those configured in SITE.dnsServers)
-    const dnsIds = Object.keys(SITE.dnsServers);
-    const topChecks = dnsIds.map(id => checkServiceWithTiming(id));
-    topChecks.push(checkServiceWithTiming('internet'));
-    const topResults = await Promise.all(topChecks);
+    if (refreshInFlight) {
+      refreshQueued = true;
+      return refreshInFlight;
+    }

-    dnsIds.forEach((id, i) => setQuick(id, topResults[i].isUp, topResults[i].responseTime));
-    const internetResult = topResults[topResults.length - 1];
-    setQuick('internet', internetResult.isUp, internetResult.responseTime);
+    function updateStamp(label, checkedAt = new Date()) {
+      const stamp = document.getElementById('stamp');
+      if (stamp) stamp.textContent = `${label}: ${new Date(checkedAt).toLocaleTimeString()}`;
+    }

-    // Check app services with timing
-    const appResults = await Promise.all(
-      window.APPS.map(async s => {
-        const result = await checkServiceWithTiming(s.id);
-        return { id: s.id, ...result };
-      })
-    );
+    function applyBatchResults(statuses) {
+      const dnsIds = Object.keys(SITE.dnsServers);
+      dnsIds.forEach((id) => {
+        const result = statuses[id];
+        if (result) setQuick(id, result.isUp, result.responseTime);
+      });

-    appResults.forEach(result => {
-      setBadge(result.id, result.isUp, result.responseTime);
-    });
+      if (statuses.internet) {
+        setQuick('internet', statuses.internet.isUp, statuses.internet.responseTime);
+      }

-    const stamp = document.getElementById('stamp');
-    if (stamp) stamp.textContent = 'last check: ' + new Date().toLocaleTimeString();
+      window.APPS.forEach((service) => {
+        const result = statuses[service.id];
+        if (result) setBadge(service.id, result.isUp, result.responseTime);
+      });
+    }
+
+    async function refreshFallback() {
+      const dnsIds = Object.keys(SITE.dnsServers);
+      const topChecks = dnsIds.map(id => checkServiceWithTiming(id));
+      topChecks.push(checkServiceWithTiming('internet'));
+      const topResults = await Promise.all(topChecks);
+
+      dnsIds.forEach((id, i) => setQuick(id, topResults[i].isUp, topResults[i].responseTime));
+      const internetResult = topResults[topResults.length - 1];
+      setQuick('internet', internetResult.isUp, internetResult.responseTime);
+
+      const appResults = await Promise.all(
+        window.APPS.map(async s => {
+          const result = await checkServiceWithTiming(s.id);
+          return { id: s.id, ...result };
+        })
+      );
+
+      appResults.forEach(result => {
+        setBadge(result.id, result.isUp, result.responseTime);
+      });
+    }
+
+    refreshInFlight = (async () => {
+      try {
+        const response = await fetch('/api/v1/services/status', { cache: 'no-store' });
+        if (!response.ok) {
+          throw new Error(`Status refresh failed (${response.status})`);
+        }
+        const data = await response.json();
+        applyBatchResults(data.statuses || {});
+        updateStamp('last check', data.checkedAt || new Date());
+      } catch (batchError) {
+        console.warn('Batched status refresh failed, falling back to direct probes:', batchError);
+        try {
+          await refreshFallback();
+          updateStamp('last check');
+        } catch (fallbackError) {
+          console.error('Dashboard refresh failed:', fallbackError);
+          updateStamp('last failed');
+        }
+      } finally {
+        refreshInFlight = null;
+        if (refreshQueued) {
+          refreshQueued = false;
+          setTimeout(() => { window.refreshAll(); }, 0);
+        }
+      }
+    })();
+
+    return refreshInFlight;
  }

  // DNS open buttons — use event delegation on .top container
--- a/status/js/core/init.js
+++ b/status/js/core/init.js
@@ -25,14 +25,28 @@
  function animateTopCards() {
    const topCards = document.querySelectorAll('.top .card');
    topCards.forEach((card, index) => {
-      card.style.opacity = '0';
-      card.style.transform = 'translateY(20px)';
-      setTimeout(() => {
-        card.style.transition = 'opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
-        card.style.opacity = '1';
-        card.style.transform = 'translateY(0)';
-      }, index * 150); // 150ms delay between top cards
+      card.style.transitionDelay = `${Math.min(index * 60, 300)}ms`;
    });
+    requestAnimationFrame(() => {
+      topCards.forEach(card => card.classList.add('loaded'));
+    });
+  }
+
+  function registerServiceWorker() {
+    if (!('serviceWorker' in navigator)) return;
+    if (!window.isSecureContext && location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') return;
+
+    const register = () => {
+      navigator.serviceWorker.register('/sw.js', { updateViaCache: 'none' }).catch((error) => {
+        console.warn('[init] Service worker registration failed:', error);
+      });
+    };
+
+    if (document.readyState === 'complete') {
+      register();
+    } else {
+      window.addEventListener('load', register, { once: true });
+    }
  }

  // Initialize dashboard (called after TOTP gate check or directly if TOTP disabled)
@@ -184,6 +198,7 @@

  window.initializeDashboard = initializeDashboard;
  window.loadCustomServices = loadCustomServices;
+  registerServiceWorker();

  // TOTP-gated initialization
  (async () => {