Target check timeout is 80% of the refresh interval (closes #78)

Each target check now times out after 80% of the refresh interval, 24
seconds at 30 seconds, where it was capped at 3 seconds, so slow, far
targets are recorded with their real time. Rounds never overlap: a
round gives up the last round's checks if they are still waiting, which
happens only when a round starts early, after an interval change or
when the recovery probe finds a target answering. The probe still
checks every half second, giving up its previous checks, so they do not
pile up.

The frontend has its first unit tests, run by script/frontend-test with
Node's built-in test runner on a mocked clock. index.html now links
src/styles.css, which src/main.js imported, since Node cannot import
CSS.

Model: opus-5-5

src/main.js

@@ -1,14 +1,14 @@
-import "./styles.css";
-
 // --- Configuration -----------------------------------------------------------
 
-// Timing, axis labels, and display constants. Latency above maxLatency is
-// clamped to "unreachable". The sparkline Y-axis is capped at
+// Timing, axis labels, and display constants. A target check times out
+// after requestTimeout, 80% of updateInterval, so a round's checks have
+// all finished before the next round is due; latency above maxLatency is
+// recorded as a timeout. The sparkline Y-axis is capped at
 // graphMaxLatency — values above it pin to the top of the chart but still
 // display their real value in the latency figure. The history buffer holds
 // maxHistoryPoints samples (historyDuration / updateInterval).
 // reportInterval is how often collected samples are POSTed to the backend.
-const CONFIG = {
+export const CONFIG = {
     updateInterval: 3000,
     maxHistoryPoints: 100,
     reportInterval: 60000,
@@ -16,7 +16,7 @@ const CONFIG = {
         return (this.maxHistoryPoints * this.updateInterval) / 1000;
     },
     get requestTimeout() {
-        return Math.min(this.updateInterval - 100, 3000);
+        return this.updateInterval * 0.8;
     },
     get maxLatency() {
         return this.requestTimeout;
@@ -503,12 +503,16 @@ class Reporter {
 
 // --- Latency Measurement -----------------------------------------------------
 
-async function measureLatency(url) {
+// Checks one target. The check times out after CONFIG.requestTimeout; the
+// caller can give it up sooner through the optional signal, which also ends
+// it as a timeout.
+export async function measureLatency(url, signal) {
     const controller = new AbortController();
     const timeoutId = setTimeout(
         () => controller.abort(),
         CONFIG.requestTimeout,
     );
+    signal?.addEventListener("abort", () => controller.abort());
 
     const targetUrl = new URL(url);
     targetUrl.searchParams.set("_cb", Date.now().toString());
@@ -1101,7 +1105,7 @@ function sortAndRebuildWAN(state) {
 
 // --- Main Loop ---------------------------------------------------------------
 
-async function tick(state, onOffline) {
+async function tick(state, signal, onOffline) {
     const ts = Date.now();
 
     if (state.paused) {
@@ -1123,11 +1127,12 @@ async function tick(state, onOffline) {
     log.debug(`Tick #${state.tickCount + 1} started`);
 
     const results = await Promise.all(
-        state.allHosts.map((h) => measureLatency(h.url)),
+        state.allHosts.map((h) => measureLatency(h.url, signal)),
     );
 
-    // User may have paused while awaiting results — discard them
-    if (state.paused) return;
+    // User may have paused, or the next round may have given up this
+    // one's checks, while awaiting results — discard them
+    if (state.paused || signal.aborted) return;
 
     state.tickCount++;
 
@@ -1168,9 +1173,10 @@ async function tick(state, onOffline) {
 
 // --- Recovery Probe ----------------------------------------------------------
 
-// When offline, rapidly poll 4 random WAN hosts every 500ms. As soon as any
-// responds, stop probing and fire a normal tick to refresh all hosts.
-function startRecoveryProbe(state, triggerTick) {
+// When offline, check 4 random WAN hosts every 500ms, giving up the checks
+// started 500ms before, so at most 4 are ever waiting. As soon as one
+// answers, stop probing and start a new round at once.
+function startRecoveryProbe(state, startRounds) {
     if (state._recoveryProbeId) return; // already running
     const candidates = [...state.wan];
     for (let i = candidates.length - 1; i > 0; i--) {
@@ -1181,15 +1187,18 @@ function startRecoveryProbe(state, triggerTick) {
     log.notice(
         `Recovery probe started (${canaries.map((h) => h.name).join(", ")})`,
     );
-    state._recoveryProbeId = setInterval(async () => {
+    state._recoveryProbeId = setInterval(() => {
         if (state.paused) return;
-        const results = await Promise.all(
-            canaries.map((h) => measureLatency(h.url)),
-        );
-        if (results.some((r) => r.error === null)) {
-            log.notice("Recovery probe: connectivity detected");
-            stopRecoveryProbe(state);
-            triggerTick();
+        state._recoveryProbeChecks?.abort();
+        const checks = new AbortController();
+        state._recoveryProbeChecks = checks;
+        for (const host of canaries) {
+            measureLatency(host.url, checks.signal).then((r) => {
+                if (r.error !== null || checks.signal.aborted) return;
+                log.notice("Recovery probe: connectivity detected");
+                stopRecoveryProbe(state);
+                startRounds();
+            });
         }
     }, 500);
 }
@@ -1198,6 +1207,7 @@ function stopRecoveryProbe(state) {
     if (state._recoveryProbeId) {
         clearInterval(state._recoveryProbeId);
         state._recoveryProbeId = null;
+        state._recoveryProbeChecks?.abort();
     }
 }
 
@@ -1374,18 +1384,34 @@ async function init() {
     updateClocks();
     setInterval(updateClocks, 1000);
 
+    // Rounds never overlap: a round first gives up the last round's checks
+    // if they are still waiting, and the last round then records nothing.
+    // At a steady interval they never are, as they time out at 80% of it;
+    // they can be when a round starts early, after an interval change or
+    // when the recovery probe finds a target answering.
+    let roundChecks = new AbortController();
     function doTick() {
-        tick(state, () => startRecoveryProbe(state, doTick));
+        roundChecks.abort();
+        roundChecks = new AbortController();
+        tick(state, roundChecks.signal, () =>
+            startRecoveryProbe(state, startRounds),
+        );
     }
 
-    doTick();
-    let tickIntervalId = setInterval(doTick, CONFIG.updateInterval);
+    // Starts a round now and then one every CONFIG.updateInterval.
+    let tickIntervalId;
+    function startRounds() {
+        clearInterval(tickIntervalId);
+        doTick();
+        tickIntervalId = setInterval(doTick, CONFIG.updateInterval);
+    }
+
+    startRounds();
 
     document
         .getElementById("interval-select")
         .addEventListener("change", (e) => {
             const newInterval = parseInt(e.target.value, 10);
-            clearInterval(tickIntervalId);
             CONFIG.updateInterval = newInterval;
             log.notice(
                 `Interval changed to ${humanDuration(newInterval / 1000)}, history reset`,
@@ -1434,8 +1460,7 @@ async function init() {
 
             // Start immediately with new interval
             stopRecoveryProbe(state);
-            doTick();
-            tickIntervalId = setInterval(doTick, CONFIG.updateInterval);
+            startRounds();
         });
 
     window.addEventListener("resize", () => handleResize(state));
@@ -1444,7 +1469,7 @@ async function init() {
 
 // Bootstrap only when loaded as the page: a real DOM containing the #app
 // mount point this module renders into. Importing the module in a unit test
-// (which has no #app) runs nothing, so buildReport can be tested in isolation.
+// (which has no #app) runs nothing, so its exports can be tested in isolation.
 if (typeof document !== "undefined" && document.getElementById("app")) {
     if (document.readyState === "loading") {
         document.addEventListener("DOMContentLoaded", init);