Latency statistics written once, thresholds read from CONFIG (closes #102)

A target's min, max, median and average latency now come from one list
of its answers, through latencyStats(), which the summary's figures use
too, so the median is written once. latencyHex() and latencyClass() read
one table of color limits in CONFIG. The health thresholds, the debug
log's length, the gateway check's timeout, the recovery probe's number
of hosts and interval, how often the rows are sorted and the delay
before the first sparkline resize are CONFIG entries, read where the
numbers were. HostState's minLatency(), maxLatency(), averageLatency()
and medianLatency() are gone; the statistics test reads historyStats().
Nothing the page does or shows changes. A unit test now covers the
summary's figures.

Model: opus-5-5

README.md

@@ -1,33 +1,30 @@
 NetWatch is an MIT-licensed JavaScript single-page application by
 [@sneak](https://sneak.berlin) that provides real-time network latency
 monitoring to common internet hosts, displayed with color-coded figures and
-sparkline graphs, served from a static bucket or from its Docker image, where a
-small Go backend stores the measurements the page reports.
+sparkline graphs, served from a static bucket or Docker container.
 
 ## Getting Started
 
 ```bash
-# Install the dependencies and the git pre-commit hook
-make setup
+# Install dependencies
+yarn install
 
-# Run the page on the Vite dev server
-make dev
+# Development server
+yarn dev
 
-# Run the tests, both linters and the format check
-make check
+# Production build
+yarn build
 
-# Build the page into dist/
-make build
+# Preview production build
+yarn preview
 
-# Build the image and run it
-make docker
+# Docker
+docker build -t netwatch .
 docker run -p 8080:8080 netwatch
 ```
 
-`make check` and `make docker` need Docker. `make dev` passes `/api` to
-`http://127.0.0.1:8080`, where `make run` in `backend/` starts `netwatch-server`
-with its defaults, so the reports the page posts are stored in
-`backend/data/reports`.
+`yarn dev` proxies `/api` to `http://127.0.0.1:8080`, so a locally running
+`netwatch-server` (see `backend/`) receives the reports the page posts.
 
 ## Entrypoints
 
@@ -97,25 +94,22 @@ halves, so the root `make check` fails if either one is broken. We provide:
 The narrow-viewport layout lives in the `max-width: 768px` media block in
 `src/styles.css`. It is verified automatically by `make frontend-viewport-test`,
 which drives a digest-pinned headless Chrome against the built `dist/` and
-asserts on computed layout at widths derived from that CSS — on every breakpoint
-it declares and one pixel either side of it, plus a 320px floor, a desktop
-baseline and two landscape sizes. See
-[test/viewport/README.md](test/viewport/README.md) for what it covers and what
-it genuinely cannot.
+asserts on computed layout at widths derived from that CSS — one pixel either
+side of every breakpoint it declares, plus a 320px floor, a desktop baseline and
+two landscape sizes. See [test/viewport/README.md](test/viewport/README.md) for
+what it covers and what it genuinely cannot.
 
 ## Rationale
 
 When debugging network issues, it's useful to have a persistent at-a-glance view
 of latency and reachability to multiple well-known internet endpoints. NetWatch
-provides this as a single page that does all its measuring in the browser, so it
-can be served from anywhere static files are served. The backend in its Docker
-image only stores the measurements the page reports; without it, the page works
-the same and nothing is stored.
+provides this as a zero-dependency SPA that can be deployed anywhere static
+files are served, with no backend required.
 
 ## Design
 
-The page is built with Vite and Tailwind CSS v4. Its code is all in
-`src/main.js`, with a class-based architecture:
+The application is a single-page app built with Vite and Tailwind CSS v4. All
+code lives in `src/main.js` with a class-based architecture:
 
 - **`CONFIG`**: Configuration object (update interval, timeouts, axis ticks,
   etc.). The interval menu sets `updateInterval`, the one value the page writes
@@ -131,10 +125,10 @@ The page is built with Vite and Tailwind CSS v4. Its code is all in
   `updateSummary()` / `updateHealthBox()` handle incremental updates
 - **`tick()`**: Main loop — measures all hosts in parallel, pushing each host's
   sample and redrawing its row as soon as its check ends, then redraws every
-  row, the summary and the health box once the last check ends. The first round,
-  after loading or an interval change, is discarded. The rows are sorted when
-  the last check ends in round 2, the first one kept, and in rounds 11, 21, 31
-  and so on. When paused, pushes blank markers (no probes, no false outage)
+  row, the summary and the health box once the last check ends. The rows are
+  sorted then too, after the first round that is not discarded and every tenth
+  round after that. When paused, pushes blank markers (no probes, no false
+  outage)
 - **`Reporter`**: Posts collected samples to the backend
 
 ### Reporting
@@ -148,35 +142,12 @@ delivered report, and while paused nothing is sent. Delivery failure is quiet
 one debug-log line per outage, retried at the next interval, never blocking
 probing. The report-building step is a pure function of host state.
 
-### Backend
-
-`netwatch-server`, in `backend/`, is a small Go HTTP server that stores the
-reports the page posts. It keeps them in memory and writes them to `DATA_DIR` as
-zstd-compressed files of JSON lines: every minute, whenever 10 MiB are waiting,
-and when it stops. Its routes:
-
-- `POST /api/v1/reports` — takes a report, without credentials; each client
-  address may send a limited number a minute, and the report files are capped in
-  size, the oldest deleted first
-- `GET /.well-known/healthcheck` — answers 200 with `"status":"ok"`, the
-  server's version and its uptime
-- `GET /metrics` — Prometheus metrics behind basic auth, only when
-  `METRICS_USERNAME` and `METRICS_PASSWORD` are set; each client address may
-  make a limited number of requests to it a minute
-
-In the image, the `builder` stage of `Dockerfile` tests it and builds it with
-`backend/script/build`, and `bin/entrypoint.sh` runs it as user `netwatch` on
-`127.0.0.1:8081`, behind nginx. Outside the image, `make run` in `backend/`
-builds it and runs it on port 8080. Its settings, report storage and limits are
-in [backend/README.md](backend/README.md).
-
 ### Monitoring targets
 
-- **26 WAN hosts**: datavi.be (pinned at start), Anthropic API, OpenAI API, AWS
-  Console, Google Cloud Console, Microsoft Azure, Cloudflare, Fastly CDN,
-  Akamai, Google, GitHub, B2, 8 S3 regional endpoints (Cape Town, London,
-  Bahrain, Tokyo, Singapore, Sydney, Oregon, São Paulo) and 6 Hetzner speed test
-  servers (Nuremberg, Falkenstein, Helsinki, Ashburn, Hillsboro, Singapore)
+- **22 WAN hosts**: datavi.be, Anthropic API, OpenAI API, AWS Console, GCP
+  Console, Azure, Cloudflare, Fastly, Akamai, GitHub, B2, 7 S3 regional
+  endpoints (Cape Town, London, Bahrain, Tokyo, Sydney, Oregon, São Paulo), 4
+  GCS locational endpoints (Iowa, Belgium, Singapore, Sydney)
 - **Local CPE**: Cable modem at 192.168.100.1 (always monitored)
 - **Local Gateway**: Auto-detected on startup by probing common default gateway
   addresses (192.168.1.1, 192.168.0.1, 192.168.8.1, 10.0.0.1); first responder
@@ -188,17 +159,15 @@ Local hosts are tracked separately from WAN stats.
 
 ### Latency measurement
 
-GET requests with `mode: 'no-cors'`, `cache: 'no-store'` and a cache-busting
-query parameter, timed with `performance.now()`. Each check times out after 80%
-of the refresh interval (24 seconds at 30 seconds) and is then recorded as a
-timeout, so a round's checks have all finished before the next round is due.
-When no WAN host answers, a recovery probe checks 4 WAN hosts, picked at random
-when it starts, every half second, giving up the checks it started half a second
-before. As soon as one answers, a new round starts at once, as it does after an
-interval change. A round started early gives up the last round's checks if they
-are still waiting, and that round records nothing more, so rounds never overlap.
-The browser chooses between IPv4 and IPv6 for each target, as for any request;
-the local targets are IPv4 addresses.
+HEAD requests with `mode: 'no-cors'` and `cache: 'no-store'`, timed with
+`performance.now()`. Each check times out after 80% of the refresh interval (24
+seconds at 30 seconds) and is then recorded as a timeout, so a round's checks
+have all finished before the next round is due. When no WAN host answers, a
+recovery probe checks 4 random WAN hosts every half second, giving up the checks
+it started half a second before. As soon as one answers, a new round starts at
+once, as it does after an interval change. A round started early gives up the
+last round's checks if they are still waiting, and that round records nothing
+more, so rounds never overlap. IPv4 only.
 
 ### Color coding
 
@@ -223,42 +192,25 @@ dist/
 
 ## Features
 
-- A round of checks every 3 seconds by default; the interval menu sets 1, 2, 3,
-  5, 10, 15, 30 or 60 seconds and clears the history
-- Sparklines of each target's last 100 rounds: 300 seconds at 3 seconds
-- The first round after loading or an interval change is discarded, as DNS and
-  TLS setup inflate its latencies
-- Health indicator from the WAN hosts' latest results: OFFLINE (red) when more
-  than 10 fail and at most 4 answer, otherwise DEGRADED (orange) when more than
-  4 fail, otherwise SLOW (yellow) when more than 3 take over 1000ms, otherwise
-  HEALTHY (green)
-- Summary stats across WAN hosts only: how many answered, the min, median,
-  average and max of their latest latencies, the min and max over the whole
-  history, and the number of rounds run (`Checks`)
-- Fixed chart axes: Y-axis 0–1000ms, higher latencies drawn at the top; X-axis
-  the time the history spans
+- Real-time monitoring with 2s update interval and 300s history sparklines
+- Health indicator: green (HEALTHY) or red (DEGRADED) based on WAN reachability
+- Summary stats: reachable count, min/max/avg latency across WAN hosts only
+- Fixed chart axes: Y-axis 0–1000ms, X-axis 0–300s
 - Color-coded latency figures and sparkline line segments
-- WAN host rows sorted by latest latency, unreachable last; pinned rows stay on
-  top, in name order
 - Play/pause: pause stops probes but history keeps scrolling (blank gaps, no
   false outage)
-- Debug log panel, behind a checkbox in the footer, with five levels (error,
-  warning, notice, info, debug) and the last 1000 lines
-- Local and UTC clocks
 - Clickable service URLs
-- A footer link to the commit the page was built from
 - Canvas-based sparkline rendering with devicePixelRatio scaling
 - Zero runtime dependencies: all resources bundled into build artifacts
 
 ## Deployment
 
-`make build` writes the page to `dist/`, which any static file host (S3, GCS,
-Cloudflare Pages, Vercel, Netlify, GitHub Pages) can serve; with no backend
-there, its reports fail quietly and nothing is stored. Or run the Docker image
-behind a reverse proxy.
+After running `yarn build`, deploy the contents of the `dist/` directory to any
+static file host (S3, GCS, Cloudflare Pages, Vercel, Netlify, GitHub Pages) or
+use the Docker image behind a reverse proxy.
 
-The Docker image, built from `Dockerfile` by `make docker`, is the whole service
-in one container: nginx serves the built frontend and passes `/api/`,
+The Docker image, built from `Dockerfile`, is the whole service in one
+container: nginx serves the built frontend and passes `/api/`,
 `/.well-known/healthcheck` and `/metrics` to the Go backend, `netwatch-server`,
 which listens only inside the container, on `127.0.0.1:8081`. The image:
 
@@ -331,19 +283,19 @@ properties.
 
 ## Limitations
 
-- **CORS**: The checks are cross-origin requests in `no-cors` mode, so the page
-  cannot read the answer, only time it: any answer counts as reachable, an error
-  page included.
-- **Local targets**: The cable modem at 192.168.100.1 and the detected gateway
-  answer only on a network that has them, and only when NetWatch is served from
-  localhost or a private address (see Monitoring targets).
+- **CORS**: Some hosts may block cross-origin HEAD requests. The app uses
+  `no-cors` mode which allows the request but provides opaque responses. Latency
+  is still measurable based on request timing.
+- **Local gateway**: The 192.168.100.1 endpoint requires the host to be
+  accessible from your network.
 - **Network conditions**: Measurements reflect browser-to-endpoint latency,
   which includes your local network, ISP, and internet routing.
 
 ## TODO
 
-The to-do list is [TODO.md](TODO.md): where the work stands, the next step, the
-open work, and what has been done.
+- Add configurable host list (environment variable or config file)
+- Add latency history export (CSV/JSON)
+- Add notification/alert when status changes to DEGRADED
 
 ## License
 

TODO.md

@@ -1,39 +1,38 @@
 # Workflow
 
-- branch from `next`
+- branch (from `main`)
 - do the work in Next Step
 - move Next Step to the top of Completed Steps
 - move the top item of Future Steps into Next Step
 - commit (`TODO.md` changes in the same commit as the work)
-- push the branch and open a PR against `next`
+- merge to `main` if the branch is not protected, otherwise open a PR
+- push
 
 # Status
 
-pre-1.0. No git tags. `main` is the stable branch and `next` the development
-branch, which every PR targets. The frontend and the Go backend ship as one
-Docker image, and the Gitea workflow `.gitea/workflows/check.yml` runs
-`script/cibuild` on every push. Working toward 1.0.0.
+pre-1.0. No git tags. `feat/reportbuf-storage` is merged; the backend, the CI
+workflow, and the backend repo standard files are all on `main`. Frontend and
+backend are both functional. Working toward the 1.0.0 milestone by closing the
+remaining repo-compliance issues on the tracker.
 
 # Next Step
 
-Write the latency statistics once and move the thresholds written inline in
-`src/main.js` into `CONFIG`
-([#102](https://git.eeqj.de/sneak/netwatch/issues/102)).
+Confirm the `.gitea/workflows/check.yml` run is green (main always green
+policy). The workflow file is already on `main`; what is unverified is that its
+latest run passes.
 
 # Completed Steps
 
-- 2026-10-04: `README.md`, `TODO.md` and `test/viewport/README.md` say what the
-  tree does (issue #24). The README's Getting Started leads with `make` targets;
-  a new Backend section says what `netwatch-server` stores, its routes and how
-  the image builds and runs it, and points to `backend/README.md` for its
-  settings; the checks are GET requests; the 26 WAN hosts, the four health
-  states, the summary's figures and the features the list lacked are described
-  as the page has them; and its TODO section points here, as does the one in
-  `backend/README.md`, whose open items moved to Future Steps. This file's
-  Workflow branches from `next` and opens the PR against `next`, Status says
-  where the repo stands, and Next Step and Future Steps hold only open work,
-  linked to its issue where one exists. The viewport harness README names Node's
-  test runner, not `vitest`
+- 2026-10-04: in `src/main.js` (issue #102), a target's min, max, median and
+  average latency come from one list of its answers, through the same function
+  the summary's figures use, so the median is written once. The latency color
+  limits are one table in `CONFIG`, read by both the figure's and the
+  sparkline's color. The health thresholds, the debug log's length, the gateway
+  check's timeout, the recovery probe's number of hosts and interval, how often
+  the rows are sorted and the delay before the first sparkline resize are
+  `CONFIG` entries too. A unit test checks the summary's figures. Nothing the
+  page does or shows changed; the footer's color legend still writes the limits
+  out as text
 - 2026-10-04: password guesses at `/metrics` are rate limited (issue #104): each
   client address, resolved through `TRUSTED_PROXIES` as for reports, may make 60
   requests to `/metrics` a minute, counted by `go-chi/httprate` apart from its
@@ -375,19 +374,12 @@ Write the latency statistics once and move the thresholds written inline in
 
 # Future Steps
 
-- Take "IPv4 only" out of the page's footer, as nothing in the page limits a
-  check to IPv4 ([#111](https://git.eeqj.de/sneak/netwatch/issues/111))
-- Decide whether the repo moves to the layout `REPO_POLICIES.md` gives, with
-  `backend/` no longer repeating files from the root
-  ([#30](https://git.eeqj.de/sneak/netwatch/issues/30))
-- Run `make frontend-viewport-test` in CI as its own step; it is not part of
-  `make check`, as it needs Docker and takes minutes
-- A backend test that posts a report to `POST /api/v1/reports` and checks the
-  compressed file it is written to
-- A backend route that decompresses the stored reports and answers queries on
-  them
-- Prometheus metrics for the backend's in-memory buffer: its size, the number of
-  flushes and the number of reports
-- A configurable host list (an environment variable or a config file)
-- Export of the latency history (CSV or JSON)
-- A notification when the health status changes to DEGRADED
+- Wire `script/frontend-viewport-test` into CI as its own step (deliberately not
+  part of `make check` today; the decision has real CI-runtime cost and is
+  tracked separately)
+- Compliance top-up as one small commit: add .editorconfig and add the hooks
+  target to the Makefile
+- After merge, confirm .gitea/workflows/check.yml is on main and CI is green
+  (main always green policy)
+- Decide what to do with untracked resume.sh: commit it, gitignore it, or delete
+  it

backend/README.md

@@ -219,8 +219,9 @@ sent to it.
 
 ## TODO
 
-The to-do list, this backend's open work included, is [TODO.md](../TODO.md) at
-the repo root.
+- Add integration test that POSTs a report and verifies the compressed output
+- Add report decompression/query endpoint
+- Add metrics (Prometheus) for buffer size, flush count, report count
 
 ## License
 

src/main.js

@@ -30,6 +30,39 @@ export const CONFIG = {
         return [0, 1, 2, 3, 4, 5].map((i) => Math.round((d * i) / 5));
     },
     canvasHeight: 96,
+    // A latency figure and its sparkline take the color of the first entry
+    // whose limit, in ms, the latency is below.
+    latencyColors: [
+        { below: 50, hex: "#22c55e", className: "text-green-500" },
+        { below: 100, hex: "#84cc16", className: "text-lime-500" },
+        { below: 200, hex: "#eab308", className: "text-yellow-500" },
+        { below: 500, hex: "#f97316", className: "text-orange-500" },
+        { below: Infinity, hex: "#ef4444", className: "text-red-500" },
+    ],
+    // The health is offline when more than offlineTimeouts WAN hosts timed
+    // out or were unreachable and at most offlineReachable answered;
+    // otherwise degraded when more than degradedTimeouts timed out or were
+    // unreachable; otherwise slow when more than slowHosts answered after
+    // more than slowLatency ms.
+    offlineTimeouts: 10,
+    offlineReachable: 4,
+    degradedTimeouts: 4,
+    slowHosts: 3,
+    slowLatency: 1000,
+    // The debug log keeps its last maxLogEntries lines.
+    maxLogEntries: 1000,
+    // A gateway candidate that has not answered after gatewayTimeout ms is
+    // passed over.
+    gatewayTimeout: 1500,
+    // When no WAN host answers, the recovery probe checks recoveryProbeHosts
+    // random ones every recoveryProbeInterval ms.
+    recoveryProbeHosts: 4,
+    recoveryProbeInterval: 500,
+    // The rows are sorted after the first round that is not discarded, then
+    // every roundsPerSort rounds.
+    roundsPerSort: 10,
+    // The sparklines are sized and drawn again resizeDelay ms after start.
+    resizeDelay: 100,
 };
 
 // WAN endpoints to monitor. These are used for the aggregate health/stats
@@ -114,7 +147,8 @@ const debugLog = [];
 const log = (() => {
     function append(level, message) {
         debugLog.push({ timestamp: new Date(), level, message });
-        if (debugLog.length > 1000) debugLog.splice(0, debugLog.length - 1000);
+        if (debugLog.length > CONFIG.maxLogEntries)
+            debugLog.splice(0, debugLog.length - CONFIG.maxLogEntries);
         const panel = document.getElementById("debug-panel");
         if (panel && !panel.classList.contains("hidden")) renderDebugLog();
     }
@@ -174,7 +208,10 @@ async function detectGateway() {
         const result = await Promise.any(
             GATEWAY_CANDIDATES.map(async (url) => {
                 const controller = new AbortController();
-                const timeoutId = setTimeout(() => controller.abort(), 1500);
+                const timeoutId = setTimeout(
+                    () => controller.abort(),
+                    CONFIG.gatewayTimeout,
+                );
                 try {
                     await fetch(url, {
                         method: "GET",
@@ -199,6 +236,27 @@ async function detectGateway() {
 
 // --- App State ---------------------------------------------------------------
 
+// The min, max, median and average of latencies, a list of numbers, or all
+// null when it is empty. The median of an even count is the mean of the
+// middle two; it and the average are rounded.
+function latencyStats(latencies) {
+    if (latencies.length === 0)
+        return { min: null, max: null, med: null, avg: null };
+    const sorted = [...latencies].sort((a, b) => a - b);
+    const mid = Math.floor(sorted.length / 2);
+    return {
+        min: sorted[0],
+        max: sorted[sorted.length - 1],
+        med:
+            sorted.length % 2
+                ? sorted[mid]
+                : Math.round((sorted[mid - 1] + sorted[mid]) / 2),
+        avg: Math.round(
+            latencies.reduce((a, b) => a + b, 0) / latencies.length,
+        ),
+    };
+}
+
 export class HostState {
     constructor(host, pinned = false) {
         this.name = host.name;
@@ -230,38 +288,16 @@ export class HostState {
         this._trim();
     }
 
-    averageLatency() {
-        const valid = this.history.filter((p) => p.latency !== null);
-        if (valid.length === 0) return null;
-        return Math.round(
-            valid.reduce((s, p) => s + p.latency, 0) / valid.length,
+    // The min, max, median and average latency of the checks in the history
+    // that got an answer.
+    historyStats() {
+        return latencyStats(
+            this.history
+                .filter((p) => p.latency !== null)
+                .map((p) => p.latency),
         );
     }
 
-    minLatency() {
-        const valid = this.history.filter((p) => p.latency !== null);
-        if (valid.length === 0) return null;
-        return Math.min(...valid.map((p) => p.latency));
-    }
-
-    maxLatency() {
-        const valid = this.history.filter((p) => p.latency !== null);
-        if (valid.length === 0) return null;
-        return Math.max(...valid.map((p) => p.latency));
-    }
-
-    medianLatency() {
-        const sorted = this.history
-            .filter((p) => p.latency !== null)
-            .map((p) => p.latency)
-            .sort((a, b) => a - b);
-        if (sorted.length === 0) return null;
-        const mid = Math.floor(sorted.length / 2);
-        return sorted.length % 2
-            ? sorted[mid]
-            : Math.round((sorted[mid - 1] + sorted[mid]) / 2);
-    }
-
     _trim() {
         while (this.history.length > CONFIG.maxHistoryPoints)
             this.history.shift();
@@ -288,33 +324,13 @@ export class AppState {
 
     /** WAN-only stats from latest sample (excludes local) */
     wanStats() {
-        const reachable = this.wan.filter((h) => h.lastLatency !== null);
-        const latencies = reachable.map((h) => h.lastLatency);
-        const total = this.wan.length;
-        if (latencies.length === 0)
-            return {
-                reachable: 0,
-                total,
-                min: null,
-                max: null,
-                med: null,
-                avg: null,
-            };
-        const sorted = [...latencies].sort((a, b) => a - b);
-        const mid = Math.floor(sorted.length / 2);
-        const med =
-            sorted.length % 2
-                ? sorted[mid]
-                : Math.round((sorted[mid - 1] + sorted[mid]) / 2);
+        const latencies = this.wan
+            .filter((h) => h.lastLatency !== null)
+            .map((h) => h.lastLatency);
         return {
             reachable: latencies.length,
-            total,
-            min: Math.min(...latencies),
-            max: Math.max(...latencies),
-            med,
-            avg: Math.round(
-                latencies.reduce((a, b) => a + b, 0) / latencies.length,
-            ),
+            total: this.wan.length,
+            ...latencyStats(latencies),
         };
     }
 
@@ -340,12 +356,16 @@ export class AppState {
         const timeouts = this.wan.filter(
             (h) => h.status === "error" || h.status === "offline",
         ).length;
-        if (timeouts > 10 && reachable <= 4) return "offline";
-        if (timeouts > 4) return "degraded";
+        if (
+            timeouts > CONFIG.offlineTimeouts &&
+            reachable <= CONFIG.offlineReachable
+        )
+            return "offline";
+        if (timeouts > CONFIG.degradedTimeouts) return "degraded";
         const slow = this.wan.filter(
-            (h) => h.lastLatency !== null && h.lastLatency > 1000,
+            (h) => h.lastLatency !== null && h.lastLatency > CONFIG.slowLatency,
         ).length;
-        if (slow > 3) return "slow";
+        if (slow > CONFIG.slowHosts) return "slow";
         return "healthy";
     }
 
@@ -557,21 +577,13 @@ export async function measureLatency(url, signal) {
 
 export function latencyHex(latency) {
     if (latency === null) return "#6b7280";
-    if (latency < 50) return "#22c55e";
-    if (latency < 100) return "#84cc16";
-    if (latency < 200) return "#eab308";
-    if (latency < 500) return "#f97316";
-    return "#ef4444";
+    return CONFIG.latencyColors.find((c) => latency < c.below).hex;
 }
 
 export function latencyClass(latency, status) {
     if (status === "offline" || status === "error" || latency === null)
         return "text-gray-500";
-    if (latency < 50) return "text-green-500";
-    if (latency < 100) return "text-lime-500";
-    if (latency < 200) return "text-yellow-500";
-    if (latency < 500) return "text-orange-500";
-    return "text-red-500";
+    return CONFIG.latencyColors.find((c) => latency < c.below).className;
 }
 
 // --- Sparkline Renderer ------------------------------------------------------
@@ -912,10 +924,7 @@ function updateHostRow(host, index) {
         latencyEl.innerHTML = `<span class="text-gray-500">---</span>`;
     }
 
-    const avg = host.averageLatency();
-    const med = host.medianLatency();
-    const min = host.minLatency();
-    const max = host.maxLatency();
+    const { min, med, avg, max } = host.historyStats();
     if (host.status === "online" && avg !== null) {
         statusEl.innerHTML = statusStatsHTML([
             ["min", min],
@@ -1182,8 +1191,9 @@ export async function tick(state, signal, onOffline) {
     // rows whose check ended before the resume still read "paused"
     state.allHosts.forEach((host, i) => updateHostRow(host, i));
 
-    // Sort after the first real check, then every 10 ticks thereafter
-    if (state.tickCount === 2 || state.tickCount % 10 === 1) {
+    // Sort after the first real check, then every CONFIG.roundsPerSort
+    // ticks thereafter
+    if (state.tickCount === 2 || state.tickCount % CONFIG.roundsPerSort === 1) {
         sortAndRebuildWAN(state);
     }
 
@@ -1206,9 +1216,10 @@ export async function tick(state, signal, onOffline) {
 
 // --- Recovery Probe ----------------------------------------------------------
 
-// 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.
+// When offline, check CONFIG.recoveryProbeHosts random WAN hosts every
+// CONFIG.recoveryProbeInterval ms, giving up the checks started one interval
+// before, so at most that many 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];
@@ -1216,7 +1227,7 @@ function startRecoveryProbe(state, startRounds) {
         const j = Math.floor(Math.random() * (i + 1));
         [candidates[i], candidates[j]] = [candidates[j], candidates[i]];
     }
-    const canaries = candidates.slice(0, 4);
+    const canaries = candidates.slice(0, CONFIG.recoveryProbeHosts);
     log.notice(
         `Recovery probe started (${canaries.map((h) => h.name).join(", ")})`,
     );
@@ -1233,7 +1244,7 @@ function startRecoveryProbe(state, startRounds) {
                 startRounds();
             });
         }
-    }, 500);
+    }, CONFIG.recoveryProbeInterval);
 }
 
 function stopRecoveryProbe(state) {
@@ -1497,7 +1508,7 @@ async function init() {
         });
 
     window.addEventListener("resize", () => handleResize(state));
-    setTimeout(() => handleResize(state), 100);
+    setTimeout(() => handleResize(state), CONFIG.resizeDelay);
 }
 
 // Bootstrap only when loaded as the page: a real DOM containing the #app

test/unit/main.test.js

@@ -347,19 +347,35 @@ for (const { history, latencies, statistics } of [
     },
 ]) {
     test(`a target's min, max, average and median latency over ${history}`, () => {
-        const host = hostAfter(latencies);
-        assert.deepEqual(
-            {
-                min: host.minLatency(),
-                max: host.maxLatency(),
-                average: host.averageLatency(),
-                median: host.medianLatency(),
-            },
-            statistics,
-        );
+        const { min, max, avg, med } = hostAfter(latencies).historyStats();
+        assert.deepEqual({ min, max, average: avg, median: med }, statistics);
     });
 }
 
+// The summary's figures come from each WAN target's last check, by the same
+// rules as a target's own: here four answered, one was found unreachable
+// and the rest have not been checked yet. The median, 22.5, and the
+// average, 21.25, are rounded.
+test("the summary's min, max, median and average latency over the WAN targets' last checks", () => {
+    const state = new AppState([]);
+    [30, 10, null, 25, 20].forEach((latency, i) =>
+        state.wan[i].pushSample(
+            Date.now(),
+            latency === null
+                ? { latency: null, error: "unreachable" }
+                : { latency, error: null },
+        ),
+    );
+    assert.deepEqual(state.wanStats(), {
+        reachable: 4,
+        total: state.wan.length,
+        min: 10,
+        max: 30,
+        med: 23,
+        avg: 21,
+    });
+});
+
 // An app state in which, of the WAN targets, the first timedOut timed out,
 // the next unreachable were found unreachable, the next answered answered
 // after latency ms, and the rest have not been checked yet.

test/viewport/README.md

@@ -77,7 +77,7 @@ the internet, so the app's latency probes cannot reach anything real. The
 harness answers them itself from a fixed delay table, with a deterministic
 fraction failed outright, so the rows render a realistic spread of one-, two-
 and three-digit latencies plus some unreachable rows. That spread is what the
-layout has to survive; a `---` placeholder in every row would not exercise it.
+layout has to survive; 24 identical `---` placeholders would not exercise it.
 
 ## What this cannot verify
 
@@ -104,11 +104,10 @@ Everything else this issue was actually about — does the layout reflow, does
 anything overflow, is content clipped, are the controls big enough — is a
 function of viewport width and CSS, and is covered above.
 
-## Relation to the unit tests
+## Relation to the unit test framework (#21)
 
-Complementary layers, not two stacks. The unit tests in `test/unit/`, which
-`make test` runs with Node's built-in test runner, exercise the functions
-`src/main.js` exports in-process with no browser. This harness exercises
-rendered layout in a real engine and is the only thing here that can see a media
-query. Neither replaces the other; assertions about computed styles and element
-geometry belong here, assertions about functions belong in `test/unit/`.
+Complementary layers, not two stacks. `vitest` (#21) will exercise module-level
+logic in-process with no browser. This harness exercises rendered layout in a
+real engine and is the only thing here that can see a media query. Neither
+replaces the other; assertions about computed styles and element geometry belong
+here, assertions about functions belong in `vitest`.