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/sw.js

@@ -1,49 +1,118 @@
-
-const CACHE = "sami-cloud-dashboard-v9";
+const CACHE = 'dashcaddy-shell-v10';
 const PRECACHE = [
-  "index.html",
-  "assets/site.webmanifest",
-  "assets/favicon.svg",
-  "assets/icon-192.png",
-  "assets/icon-512.png",
-  "assets/apple-touch-icon.png",
-  "assets/weather/clear-day.svg",
-  "assets/weather/clear-night.svg",
-  "assets/weather/partly-cloudy-day.svg",
-  "assets/weather/partly-cloudy-night.svg",
-  "assets/weather/cloudy.svg",
-  "assets/weather/fog.svg",
-  "assets/weather/drizzle.svg",
-  "assets/weather/rain.svg",
-  "assets/weather/sleet.svg",
-  "assets/weather/snow.svg",
-  "assets/weather/thunderstorm.svg",
-  "assets/weather/wind.svg"
+  '/',
+  '/index.html',
+  '/css/themes.css',
+  '/css/dashboard.css',
+  '/css/driver.min.css',
+  '/css/onboarding.css',
+  '/dist/core.js',
+  '/dist/features.js',
+  '/dist/init.js',
+  '/dist/onboarding.js',
+  '/assets/fonts.css',
+  '/assets/site.webmanifest',
+  '/assets/favicon.svg',
+  '/assets/dashcaddy-favicon.ico',
+  '/assets/icon-192.png',
+  '/assets/icon-512.png',
+  '/assets/apple-touch-icon.png',
+  '/assets/dashcaddy-logo-dark.png',
+  '/assets/dashcaddy-logo-light.png',
+  '/assets/sami7777-logo.png',
+  '/assets/fonts/sami-grotesk/SamiGrotesk-Regular.woff2',
+  '/assets/fonts/sami-grotesk/SamiGrotesk-Medium.woff2',
+  '/assets/fonts/sami-grotesk/SamiGrotesk-Bold.woff2',
+  '/assets/fonts/DSEG7Classic-Bold.woff2',
+  '/assets/weather/clear-day.svg',
+  '/assets/weather/clear-night.svg',
+  '/assets/weather/partly-cloudy-day.svg',
+  '/assets/weather/partly-cloudy-night.svg',
+  '/assets/weather/cloudy.svg',
+  '/assets/weather/fog.svg',
+  '/assets/weather/drizzle.svg',
+  '/assets/weather/rain.svg',
+  '/assets/weather/sleet.svg',
+  '/assets/weather/snow.svg',
+  '/assets/weather/thunderstorm.svg',
+  '/assets/weather/wind.svg'
 ];
 
-self.addEventListener("install", (e) => {
+function isNavigationRequest(request) {
+  return request.mode === 'navigate';
+}
+
+function isStaticAsset(pathname) {
+  return pathname.startsWith('/assets/')
+    || pathname.startsWith('/css/')
+    || pathname.startsWith('/dist/');
+}
+
+async function networkFirst(request, preloadResponsePromise) {
+  const cache = await caches.open(CACHE);
+  try {
+    const preloadResponse = preloadResponsePromise ? await preloadResponsePromise : null;
+    if (preloadResponse) {
+      cache.put(request, preloadResponse.clone()).catch(() => {});
+      return preloadResponse;
+    }
+    const response = await fetch(request);
+    cache.put(request, response.clone()).catch(() => {});
+    return response;
+  } catch (_) {
+    return caches.match(request) || caches.match('/index.html');
+  }
+}
+
+async function staleWhileRevalidate(request) {
+  const cache = await caches.open(CACHE);
+  const cached = await cache.match(request);
+
+  const networkPromise = fetch(request)
+    .then((response) => {
+      cache.put(request, response.clone()).catch(() => {});
+      return response;
+    })
+    .catch(() => null);
+
+  if (cached) return cached;
+  return networkPromise.then((response) => response || Response.error());
+}
+
+self.addEventListener('install', (event) => {
   self.skipWaiting();
-  e.waitUntil(caches.open(CACHE).then((c) => c.addAll(PRECACHE)));
-});
-
-self.addEventListener("activate", (e) => {
-  e.waitUntil(
-    caches.keys().then(keys =>
-      Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k)))
-    ).then(() => self.clients.claim())
+  event.waitUntil(
+    caches.open(CACHE).then((cache) =>
+      cache.addAll(PRECACHE.map((url) => new Request(url, { cache: 'reload' })))
+    )
   );
 });
 
-self.addEventListener("fetch", (e) => {
-  const { request } = e;
+self.addEventListener('activate', (event) => {
+  event.waitUntil((async () => {
+    const keys = await caches.keys();
+    await Promise.all(keys.filter((key) => key !== CACHE).map((key) => caches.delete(key)));
+    if ('navigationPreload' in self.registration) {
+      await self.registration.navigationPreload.enable();
+    }
+    await self.clients.claim();
+  })());
+});
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  if (request.method !== 'GET') return;
+
   const url = new URL(request.url);
-  if (url.origin !== location.origin) return;
-  // Never cache API or probe responses - always go to network
-  if (url.pathname.startsWith("/api/") || url.pathname.startsWith("/probe/")) return;
-  e.respondWith(
-    fetch(request).then(resp => {
-      caches.open(CACHE).then(cache => cache.put(request, resp.clone())).catch(()=>{});
-      return resp.clone();
-    }).catch(() => caches.match(request))
-  );
+  if (url.origin !== self.location.origin) return;
+  if (url.pathname.startsWith('/api/') || url.pathname.startsWith('/probe/')) return;
+
+  if (isNavigationRequest(request) || url.pathname === '/' || url.pathname.endsWith('/index.html')) {
+    event.respondWith(networkFirst(request, event.preloadResponse));
+    return;
+  }
+
+  if (isStaticAsset(url.pathname)) {
+    event.respondWith(staleWhileRevalidate(request));
+  }
 });