test: automated responsive-layout harness (closes #13)

Verifies the mobile layout from #5 with a real browser engine instead of
by hand on a phone. make frontend-viewport-test builds dist/, serves it
from the same digest-pinned nginx image and the same nginx.conf the
shipping container uses, and drives a digest-pinned headless Chrome
against it over CDP.

Viewport widths are derived from the app's own CSS rather than from a
list of phone models: the @media conditions in src/styles.css and any
Tailwind responsive prefixes in the markup are parsed, and each
breakpoint is tested one pixel below, exactly on, and one pixel above.
max-width: 768px matches at 768, and a generic 375px test sails past
that boundary entirely. Four anchor viewports are added with stated
reasons: a 320px floor, a desktop baseline, and two phone-landscape
sizes straddling the breakpoint.

Assertions are on computed layout, not screenshots: horizontal overflow,
elements past the viewport edge, clipped text (deliberate ellipsis
truncation excluded), 44x44 minimum tap targets, and genuine reflow of
the host rows checked on both flex-direction and geometry. Probing and
gateway detection are asserted to still run at narrow widths, since the
early-return mobile path rejected in #8 is what would silently regress.
Screenshots are written to tmp/viewport/ as artifacts alongside the
results, not as the evidence.

puppeteer-core rather than playwright: it is the one variant of either
that never downloads or bundles a browser, so the browser stays a
digest-pinned image and the npm side is pinned by yarn.lock integrity.

The browser container runs on an --internal docker network with no route
off the host; the harness answers the app's latency probes itself from a
fixed delay table so the rows render a realistic spread of value widths.

Kept out of make check: it needs Docker and takes minutes, where make
test has to stay under 20 seconds.

The harness was observed failing before being trusted, twice: a planted
900px fixed-width element in a host row, and the mobile reflow rule
neutered. Both reverted.

Against the current layout it reports two real defects, filed as #42
(horizontal overflow at 320px) and #43 (tap targets below 44x44).

test/viewport/README.md

@@ -0,0 +1,105 @@
+# Responsive-layout harness
+
+Automated verification of the responsive layout that landed in #5. Run it with:
+
+```bash
+make frontend-viewport-test
+```
+
+It builds `dist/`, serves it from the same digest-pinned `nginx` image and the
+same `nginx.conf` the shipping container uses, drives a digest-pinned headless
+Chrome against it over CDP, and asserts on computed layout at every viewport
+width derived from the app's own CSS. Screenshots land in `tmp/viewport/`
+alongside a `results.json`; they are artifacts for a human to look at when
+something fails, not the evidence. The assertions are the evidence.
+
+The target is deliberately outside `make check`: it needs Docker and takes
+minutes, and `make test` has to stay under 20 seconds.
+
+## How the widths are chosen
+
+Not from a list of phone models. `viewports.js` parses the `@media` conditions
+out of `src/styles.css` and scans `src/main.js` and `index.html` for Tailwind
+responsive prefixes, then tests every breakpoint it finds at one pixel below it,
+exactly on it, and one pixel above it. A generic 375px "phone" test sails
+straight past an off-by-one at a media query boundary; `max-width: 768px`
+matches _at_ 768, and the sweep pins down which side of that line each layout is
+on.
+
+Nothing hardcodes 768. Add a second media block or start using `md:` classes and
+the new breakpoint is covered without this directory being touched. Four further
+viewports are fixed anchors, each with a stated reason: a 320px floor, a 1280px
+desktop baseline, and two phone-landscape sizes straddling the breakpoint for
+the rotation case.
+
+## What it asserts
+
+- **app-rendered** — enough host rows exist and enough of them show a numeric
+  latency. This one exists so the rest cannot pass vacuously against a blank
+  page.
+- **no-horizontal-overflow** — `documentElement.scrollWidth` fits the layout
+  viewport, with the widest offending element named.
+- **nothing-past-viewport-edge** — no visible element's box extends past the
+  viewport edge.
+- **no-clipped-text** — nothing hides text behind `overflow: hidden`. Deliberate
+  ellipsis truncation (Tailwind's `truncate`, used on host names and URLs) is
+  excluded: it is a design choice, not breakage.
+- **tap-targets-44px** — every interactive control is at least 44x44 CSS px on
+  touch viewports. See below.
+- **host-rows-stacked / host-rows-side-by-side** — the rows genuinely reflow.
+  Computed `flex-direction` _and_ the actual geometry are checked, and in the
+  narrow layout the info block and the sparkline must each occupy essentially
+  the full row width. A row that merely shrank its 420px column would fail.
+- **probing-still-runs / gateway-detection-still-runs** — narrow viewports keep
+  probing and keep detecting the gateway. The mobile early-return path proposed
+  in #8 was rejected; this is what would catch it coming back.
+
+### The tap-target threshold
+
+44x44 CSS px. That is the figure in Apple's Human Interface Guidelines and in
+WCAG 2.2 SC 2.5.5 "Target Size (Enhanced)". WCAG 2.2 SC 2.5.8 (level AA) sets a
+lower 24x24 floor, but that floor comes with a spacing exception these controls
+do not qualify for — the pin buttons sit directly against the host name they
+belong to.
+
+## Determinism
+
+The browser container runs on an `--internal` docker network and has no route to
+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; 24 identical `---` placeholders would not exercise it.
+
+## What this cannot verify
+
+Real limits, so nobody re-parks this issue as needing hardware:
+
+- **Non-Chromium engines.** This is Chrome. iOS Safari is WebKit and cannot be
+  emulated by it; Safari-specific bugs (viewport units under a collapsing URL
+  bar, `-webkit-fill-available`, form control metrics) will not show up here.
+- **Real touch input.** `hasTouch` emulation changes what the page is told, not
+  how a finger behaves. Gesture handling, scroll momentum, double-tap zoom and
+  hover-state fallbacks on touch are out of scope.
+- **Physical pixel density and rendering.** `deviceScaleFactor` is set, but
+  subpixel antialiasing, OLED colour rendering and actual legibility at a given
+  physical size are not measurable here.
+- **Fonts.** The container has DejaVu, not the platform's own UI monospace. Text
+  metrics are therefore close to, but not identical to, a real device — a layout
+  that fits here by a few pixels might not there.
+- **On-device performance.** Canvas sparkline redraw cost, battery, and
+  behaviour on a slow radio are not measured.
+- **Browser chrome.** The address bar, safe-area insets and notch cutouts are
+  not simulated.
+
+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 test framework (#21)
+
+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`.

test/viewport/checks.js

@@ -0,0 +1,203 @@
+// Pass/fail decisions for the responsive-layout harness.
+//
+// Kept in node rather than in the page so that a failure can be reported
+// with the measurements that produced it. Every check runs at every
+// viewport; none of them short-circuits, so one failure does not hide the
+// rest.
+
+// Minimum tap target, in CSS pixels. 44x44 is the figure in Apple's Human
+// Interface Guidelines and in WCAG 2.2 SC 2.5.5 "Target Size (Enhanced)".
+// WCAG 2.2 SC 2.5.8 (level AA) sets a lower 24x24 floor, but that floor
+// comes with a spacing exception these controls do not qualify for: the
+// pin buttons sit directly against the host name they belong to. Held at
+// 44 deliberately.
+export const MIN_TAP_TARGET_PX = 44;
+
+// The controls named in the definition of done, plus the pause button.
+export const INTERACTIVE_SELECTORS = [
+    "#pause-btn",
+    "#interval-select",
+    ".pin-btn",
+    "#debug-toggle",
+];
+
+// A host row is only "reflowed" if it stacked *and* went full width.
+// A row that merely shrank its 420px info column would keep
+// flex-direction: row, and a row that stacked but left the info column at
+// its fixed width would fail the width test.
+const FULL_WIDTH_FRACTION = 0.9;
+
+function summarise(items, format, limit = 3) {
+    const shown = items.slice(0, limit).map(format).join("; ");
+    const rest = items.length > limit ? ` (+${items.length - limit} more)` : "";
+    return shown + rest;
+}
+
+// Collapse an overflow report to the elements actually responsible.
+// Identical elements (24 host rows all doing the same thing) are counted
+// rather than listed, and the deepest ones come first, since every
+// ancestor of an overflowing element also reports as overflowing.
+function deepestOffenders(entries) {
+    const byElement = new Map();
+    for (const entry of entries) {
+        const reach = entry.reach ?? entry.right;
+        const existing = byElement.get(entry.el);
+        if (existing) {
+            existing.count += 1;
+            existing.reach = Math.max(existing.reach, reach);
+        } else {
+            byElement.set(entry.el, { ...entry, reach, count: 1 });
+        }
+    }
+    return [...byElement.values()].sort(
+        (a, b) => b.depth - a.depth || b.reach - a.reach,
+    );
+}
+
+function checkRowLayout(row, expectStacked) {
+    if (expectStacked) {
+        if (row.flexDirection !== "column") {
+            return `row ${row.index}: flex-direction is ${row.flexDirection}, expected column`;
+        }
+        if (row.sparkline.top < row.info.bottom - 1) {
+            return `row ${row.index}: sparkline top ${row.sparkline.top} is above info bottom ${row.info.bottom} — still side by side`;
+        }
+        const minWidth = row.containerWidth * FULL_WIDTH_FRACTION;
+        if (row.info.width < minWidth) {
+            return `row ${row.index}: info block is ${row.info.width}px of ${row.containerWidth}px — shrunk, not reflowed`;
+        }
+        if (row.sparkline.width < minWidth) {
+            return `row ${row.index}: sparkline is ${row.sparkline.width}px of ${row.containerWidth}px — shrunk, not reflowed`;
+        }
+        return null;
+    }
+
+    if (row.flexDirection !== "row") {
+        return `row ${row.index}: flex-direction is ${row.flexDirection}, expected row`;
+    }
+    if (row.sparkline.left < row.info.right - 1) {
+        return `row ${row.index}: sparkline left ${row.sparkline.left} overlaps info right ${row.info.right} — not side by side`;
+    }
+    return null;
+}
+
+export function evaluateChecks(facts, viewport, probes) {
+    const checks = [];
+    const check = (name, ok, detail) => checks.push({ name, ok, detail });
+
+    // Guard against the whole harness passing vacuously because the page
+    // never rendered. Everything below is only meaningful if this holds.
+    check(
+        "app-rendered",
+        facts.rowCount >= 10 && facts.numericLatencies >= 5,
+        `${facts.rowCount} host rows, ${facts.numericLatencies} showing a numeric latency`,
+    );
+
+    const viewportWidth = Math.min(facts.innerWidth, facts.documentClientWidth);
+    const culprits = deepestOffenders([
+        ...facts.overflowing,
+        ...facts.contentOverflowing,
+    ]);
+    check(
+        "no-horizontal-overflow",
+        facts.documentScrollWidth <= viewportWidth,
+        `documentElement.scrollWidth ${facts.documentScrollWidth} vs viewport ${viewportWidth}` +
+            (culprits.length === 0
+                ? ""
+                : "; widest content: " +
+                  summarise(
+                      culprits,
+                      (c) =>
+                          `${c.el} reaches ${Math.round(c.reach)}px${c.count > 1 ? ` (x${c.count})` : ""}`,
+                  )),
+    );
+
+    check(
+        "nothing-past-viewport-edge",
+        facts.overflowing.length === 0,
+        facts.overflowing.length === 0
+            ? "no element extends past the viewport"
+            : `${facts.overflowing.length} element(s) past the edge: ` +
+                  summarise(
+                      facts.overflowing,
+                      (o) => `${o.el} spans ${o.left}..${o.right}`,
+                  ),
+    );
+
+    check(
+        "no-clipped-text",
+        facts.clipped.length === 0,
+        facts.clipped.length === 0
+            ? "no element hides text behind overflow (deliberate ellipsis excluded)"
+            : `${facts.clipped.length} element(s) clipping text: ` +
+                  summarise(
+                      facts.clipped,
+                      (c) =>
+                          `${c.el} scrollWidth ${c.scrollWidth} > clientWidth ${c.clientWidth}`,
+                  ),
+    );
+
+    if (viewport.touch) {
+        const undersized = facts.tapTargets.filter(
+            (t) => t.width < MIN_TAP_TARGET_PX || t.height < MIN_TAP_TARGET_PX,
+        );
+        const bySelector = new Map();
+        for (const target of undersized) {
+            const existing = bySelector.get(target.selector);
+            if (!existing || target.width * target.height < existing.area) {
+                bySelector.set(target.selector, {
+                    ...target,
+                    area: target.width * target.height,
+                    count: (existing?.count ?? 0) + 1,
+                });
+            } else {
+                existing.count += 1;
+            }
+        }
+        check(
+            `tap-targets-${MIN_TAP_TARGET_PX}px`,
+            undersized.length === 0,
+            undersized.length === 0
+                ? `all ${facts.tapTargets.length} controls are at least ${MIN_TAP_TARGET_PX}x${MIN_TAP_TARGET_PX}`
+                : `${undersized.length} of ${facts.tapTargets.length} controls below ${MIN_TAP_TARGET_PX}x${MIN_TAP_TARGET_PX}: ` +
+                      summarise(
+                          [...bySelector.values()],
+                          (t) =>
+                              `${t.selector} ${t.width}x${t.height}${t.count > 1 ? ` (x${t.count})` : ""}`,
+                          4,
+                      ),
+        );
+    }
+
+    const badRows = facts.rows
+        .map((row) => checkRowLayout(row, viewport.expectStacked))
+        .filter(Boolean);
+    check(
+        viewport.expectStacked ? "host-rows-stacked" : "host-rows-side-by-side",
+        facts.rows.length > 0 && badRows.length === 0,
+        facts.rows.length === 0
+            ? "no host rows were measured"
+            : badRows.length === 0
+              ? `all ${facts.rows.length} rows laid out as expected`
+              : `${badRows.length} of ${facts.rows.length} rows wrong: ` +
+                summarise(badRows, (r) => r),
+    );
+
+    // The mobile early-return path proposed in #8 was rejected: narrow
+    // viewports must keep probing and keep detecting the gateway, not
+    // quietly skip work.
+    check(
+        "probing-still-runs",
+        probes.attempted > 0,
+        `${probes.attempted} outbound probe requests issued`,
+    );
+    check(
+        "gateway-detection-still-runs",
+        facts.gatewayDetected,
+        facts.gatewayDetected
+            ? "Local Gateway row present"
+            : "no Local Gateway row — gateway detection did not run or did not complete",
+    );
+
+    return checks;
+}

test/viewport/facts.js

@@ -0,0 +1,184 @@
+// Layout facts collected from inside the page.
+//
+// This function is serialised and evaluated in the browser, so it must be
+// entirely self-contained: no imports, no closures over module scope. It
+// only *measures*; every pass/fail decision is made back in node by
+// checks.js, so failures can be reported with real numbers attached.
+
+export function collectLayoutFacts(options) {
+    const describe = (el) => {
+        const id = el.id ? "#" + el.id : "";
+        const classes =
+            typeof el.className === "string" && el.className.trim()
+                ? "." + el.className.trim().split(/\s+/).slice(0, 3).join(".")
+                : "";
+        return el.tagName.toLowerCase() + id + classes;
+    };
+
+    const round = (n) => Math.round(n * 10) / 10;
+
+    // Overflow propagates up every ancestor, so a single wide element
+    // reports as body, #app, the row, and so on. Depth lets the report
+    // name the deepest — that is, the actual — offender.
+    const depthOf = (el) => {
+        let depth = 0;
+        for (let node = el.parentElement; node; node = node.parentElement) {
+            depth++;
+        }
+        return depth;
+    };
+
+    const isVisible = (el) => {
+        const style = getComputedStyle(el);
+        if (style.display === "none") return false;
+        if (style.visibility === "hidden") return false;
+        const rect = el.getBoundingClientRect();
+        return rect.width > 0 && rect.height > 0;
+    };
+
+    const innerWidth = window.innerWidth;
+    const clientWidth = document.documentElement.clientWidth;
+    // Under mobile emulation Chrome lets window.innerWidth *grow* to the
+    // width of overflowing content, exactly as a phone zooms out to fit a
+    // too-wide page. Measuring against it would therefore hide the
+    // overflow it is supposed to expose: at a 320px device width a page
+    // that spills to 350 reports innerWidth 350 and looks clean. Every
+    // comparison below is against the layout viewport instead.
+    const viewportWidth = Math.min(innerWidth, clientWidth);
+    const elements = Array.from(document.querySelectorAll("body *"));
+
+    // Elements sticking out past the right (or left) edge of the viewport.
+    // The document-level scrollWidth check says *that* the page overflows;
+    // this says *what* is doing it.
+    const overflowing = [];
+    // Elements clipping their own text. Deliberate ellipsis truncation
+    // (Tailwind's `truncate`) is opt-in and excluded: it is a design
+    // choice, not breakage.
+    const clipped = [];
+    // Elements whose content spills out of their own box without being
+    // clipped, past the right edge of the viewport. A block element is
+    // only ever as wide as its container, so text overflowing it has no
+    // element rect of its own to catch — but it is exactly what drags
+    // documentElement.scrollWidth past the viewport width, so without
+    // this the page-level overflow failure has nothing to point at.
+    const contentOverflowing = [];
+
+    for (const el of elements) {
+        if (!isVisible(el)) continue;
+        const rect = el.getBoundingClientRect();
+        if (rect.right > viewportWidth + 1 || rect.left < -1) {
+            overflowing.push({
+                el: describe(el),
+                depth: depthOf(el),
+                left: round(rect.left),
+                right: round(rect.right),
+            });
+        }
+        const style = getComputedStyle(el);
+        const clips =
+            style.overflowX === "hidden" || style.overflowX === "clip";
+        const ellipsis = style.textOverflow === "ellipsis";
+        const hasText = el.textContent.trim().length > 0;
+        const spills =
+            el.clientWidth > 0 && el.scrollWidth > el.clientWidth + 1;
+        if (clips && !ellipsis && hasText && spills) {
+            clipped.push({
+                el: describe(el),
+                scrollWidth: el.scrollWidth,
+                clientWidth: el.clientWidth,
+            });
+        }
+        if (
+            !clips &&
+            spills &&
+            rect.left + el.scrollWidth > viewportWidth + 1
+        ) {
+            contentOverflowing.push({
+                el: describe(el),
+                depth: depthOf(el),
+                scrollWidth: el.scrollWidth,
+                clientWidth: el.clientWidth,
+                reach: round(rect.left + el.scrollWidth),
+            });
+        }
+    }
+
+    // Interactive controls. The measured target is the nearest thing that
+    // is genuinely tappable — for a checkbox that is the <label> wrapping
+    // it, which is larger than the box itself and is what a finger hits.
+    const tapTargets = [];
+    for (const selector of options.interactiveSelectors) {
+        for (const el of document.querySelectorAll(selector)) {
+            if (!isVisible(el)) continue;
+            const target = el.closest("button, a, label, select") || el;
+            const rect = target.getBoundingClientRect();
+            tapTargets.push({
+                selector,
+                el: describe(target),
+                width: round(rect.width),
+                height: round(rect.height),
+            });
+        }
+    }
+
+    // Host rows. The question is not "did it get narrower" but "did it
+    // reflow": the info block and the sparkline must end up stacked
+    // vertically and full width in the narrow layout, and side by side in
+    // the wide one. Both the computed flex-direction and the actual
+    // geometry are recorded so a row that claims to be a column but is
+    // still laid out side by side cannot slip through.
+    const rows = [];
+    for (const row of document.querySelectorAll(".host-row")) {
+        const inner = row.firstElementChild;
+        if (!inner) continue;
+        const sparkline = inner.querySelector(".sparkline-container");
+        const info = sparkline ? sparkline.previousElementSibling : null;
+        if (!sparkline || !info) continue;
+        const innerStyle = getComputedStyle(inner);
+        const innerRect = inner.getBoundingClientRect();
+        const infoRect = info.getBoundingClientRect();
+        const sparkRect = sparkline.getBoundingClientRect();
+        rows.push({
+            index: row.dataset.index,
+            flexDirection: innerStyle.flexDirection,
+            containerWidth: round(innerRect.width),
+            info: {
+                left: round(infoRect.left),
+                right: round(infoRect.right),
+                bottom: round(infoRect.bottom),
+                width: round(infoRect.width),
+            },
+            sparkline: {
+                left: round(sparkRect.left),
+                top: round(sparkRect.top),
+                width: round(sparkRect.width),
+            },
+        });
+    }
+
+    const localRows = Array.from(
+        document.querySelectorAll("#local-hosts .host-row"),
+    );
+
+    return {
+        innerWidth,
+        // innerWidth includes any classic scrollbar, clientWidth does not.
+        // Reported separately so the overflow check can hold itself to the
+        // narrower of the two rather than to whichever one is more
+        // forgiving.
+        documentClientWidth: document.documentElement.clientWidth,
+        documentScrollWidth: document.documentElement.scrollWidth,
+        overflowing,
+        contentOverflowing,
+        clipped,
+        tapTargets,
+        rows,
+        rowCount: document.querySelectorAll(".host-row").length,
+        numericLatencies: Array.from(
+            document.querySelectorAll(".latency-value"),
+        ).filter((el) => /\d/.test(el.textContent)).length,
+        gatewayDetected: localRows.some((row) =>
+            row.textContent.includes("Local Gateway"),
+        ),
+    };
+}

test/viewport/harness.js

@@ -0,0 +1,258 @@
+// Responsive-layout harness.
+//
+// Drives the built frontend in a real, containerised, digest-pinned Chrome
+// over CDP and asserts on computed layout at every viewport width derived
+// from the app's own CSS. Screenshots are written alongside as artifacts;
+// they are not the evidence, the assertions are.
+//
+// This is not meant to be run by hand. `make frontend-viewport-test` brings
+// up the browser and the web server and then runs this; every input it
+// needs arrives in the environment.
+
+import { mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import puppeteer from "puppeteer-core";
+import { collectLayoutFacts } from "./facts.js";
+import { evaluateChecks, INTERACTIVE_SELECTORS } from "./checks.js";
+import { deriveViewports } from "./viewports.js";
+
+function required(name) {
+    const value = process.env[name];
+    if (!value) {
+        throw new Error(
+            `${name} is not set; run this via script/frontend-viewport-test`,
+        );
+    }
+    return value;
+}
+
+const ROOT = required("NETWATCH_ROOT");
+const BASE_URL = required("NETWATCH_BASE_URL");
+const CDP_URL = required("NETWATCH_CDP_URL");
+const ARTIFACT_DIR = required("NETWATCH_ARTIFACT_DIR");
+
+const BROWSER_TIMEOUT_MS = 60000;
+const PAGE_TIMEOUT_MS = 30000;
+
+// Canned responses for the app's outbound latency probes. The browser
+// container sits on an --internal docker network and physically cannot
+// reach the internet, so nothing here is about blocking traffic; it is
+// about determinism. Real probes would render 24 rows of whatever the
+// network happened to be doing. These delays make the rows show a
+// realistic spread of value widths — one, two and three digit latencies,
+// plus some unreachable rows — because that spread is what the layout has
+// to survive.
+const PROBE_DELAYS_MS = [2, 45, 123, 456, 780];
+// One in every UNREACHABLE_MODULUS probes is failed outright so that the
+// offline row rendering is exercised too.
+const UNREACHABLE_MODULUS = 7;
+// The gateway candidate that "answers", so gateway detection succeeds and
+// the Local Gateway row renders. Matches GATEWAY_CANDIDATES in src/main.js.
+const RESPONSIVE_GATEWAY = "http://192.168.1.1";
+
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+function stableHash(text) {
+    let hash = 0;
+    for (let i = 0; i < text.length; i++) {
+        hash = (hash * 31 + text.charCodeAt(i)) | 0;
+    }
+    return Math.abs(hash);
+}
+
+async function connectBrowser() {
+    const deadline = Date.now() + BROWSER_TIMEOUT_MS;
+    let lastError;
+    for (;;) {
+        try {
+            const response = await fetch(`${CDP_URL}/json/version`);
+            const info = await response.json();
+            // The endpoint advertises whatever Host it was reached on;
+            // pin it back to the address we actually dialled.
+            const endpoint = new URL(info.webSocketDebuggerUrl);
+            endpoint.host = new URL(CDP_URL).host;
+            const browser = await puppeteer.connect({
+                browserWSEndpoint: endpoint.toString(),
+                protocolTimeout: BROWSER_TIMEOUT_MS,
+            });
+            return { browser, version: info.Browser };
+        } catch (error) {
+            lastError = error;
+            if (Date.now() > deadline) {
+                throw new Error(`browser never came up: ${lastError}`);
+            }
+            await sleep(250);
+        }
+    }
+}
+
+function installProbeResponder(page, probes) {
+    const respond = (request, delayMs) =>
+        sleep(delayMs).then(() =>
+            request.respond({
+                status: 200,
+                contentType: "text/plain",
+                body: "",
+            }),
+        );
+
+    page.on("request", (request) => {
+        const url = request.url();
+        const settle = async () => {
+            if (url.startsWith(BASE_URL) || url.startsWith("data:")) {
+                return request.continue();
+            }
+            probes.attempted++;
+            if (url.startsWith(RESPONSIVE_GATEWAY)) {
+                probes.fulfilled++;
+                return respond(request, 5);
+            }
+            const hash = stableHash(url);
+            if (hash % UNREACHABLE_MODULUS === 0) {
+                probes.failed++;
+                return request.abort("connectionfailed");
+            }
+            probes.fulfilled++;
+            return respond(
+                request,
+                PROBE_DELAYS_MS[hash % PROBE_DELAYS_MS.length],
+            );
+        };
+        // The page may be torn down while a delayed response is pending;
+        // that is not a harness failure.
+        settle().catch(() => {});
+    });
+}
+
+async function runViewport(browser, viewport) {
+    const page = await browser.newPage();
+    const probes = { attempted: 0, fulfilled: 0, failed: 0 };
+    try {
+        page.setDefaultTimeout(PAGE_TIMEOUT_MS);
+        await page.setRequestInterception(true);
+        installProbeResponder(page, probes);
+        await page.setViewport({
+            width: viewport.width,
+            height: viewport.height,
+            deviceScaleFactor: viewport.deviceScaleFactor,
+            isMobile: viewport.touch,
+            hasTouch: viewport.touch,
+            isLandscape: viewport.width > viewport.height,
+        });
+
+        await page.goto(BASE_URL, { waitUntil: "load" });
+        await page.waitForSelector(".host-row");
+
+        // The app discards its first tick as a cold start, so rows only
+        // carry real values from the second one. Changing the interval
+        // restarts the loop at 1s, which reaches a populated UI without
+        // waiting out two default 3s intervals — and exercises the
+        // interval dropdown while we are at it.
+        await page.select("#interval-select", "1000");
+        await page.waitForFunction(
+            () =>
+                Array.from(document.querySelectorAll(".latency-value")).filter(
+                    (el) => /\d/.test(el.textContent),
+                ).length >= 5,
+        );
+        // Let the resize/redraw handlers settle before measuring.
+        await page.evaluate(
+            () =>
+                new Promise((resolve) =>
+                    requestAnimationFrame(() => requestAnimationFrame(resolve)),
+                ),
+        );
+
+        const facts = await page.evaluate(collectLayoutFacts, {
+            interactiveSelectors: INTERACTIVE_SELECTORS,
+        });
+
+        const screenshot = join(
+            ARTIFACT_DIR,
+            `${viewport.width}x${viewport.height}-${viewport.name}.png`,
+        );
+        await page.screenshot({ path: screenshot, fullPage: true });
+
+        return {
+            viewport,
+            probes,
+            facts,
+            screenshot,
+            checks: evaluateChecks(facts, viewport, probes),
+        };
+    } finally {
+        await page.close().catch(() => {});
+    }
+}
+
+function report(results, conditions, browserVersion) {
+    const label = (viewport) =>
+        `${viewport.width}x${viewport.height}`.padEnd(9) +
+        " " +
+        viewport.name.padEnd(24);
+
+    console.log(`browser:     ${browserVersion}`);
+    console.log(`served from: ${BASE_URL} (built dist/)`);
+    console.log(
+        "breakpoints: " +
+            conditions
+                .map((c) => `${c.type}-width ${c.px}px (${c.source})`)
+                .join(", "),
+    );
+    console.log("");
+
+    let passed = 0;
+    let failed = 0;
+    for (const result of results) {
+        const bad = result.checks.filter((c) => !c.ok);
+        passed += result.checks.length - bad.length;
+        failed += bad.length;
+        // Passing viewports get one line. Detail is for failures.
+        console.log(
+            `${bad.length === 0 ? "PASS" : "FAIL"} ${label(result.viewport)} ` +
+                `${result.checks.length - bad.length}/${result.checks.length} checks` +
+                `${result.viewport.expectStacked ? "  [narrow layout expected]" : ""}`,
+        );
+        for (const check of bad) {
+            console.log(`       ${check.name}: ${check.detail}`);
+        }
+        if (bad.length > 0) {
+            console.log(`       why this width: ${result.viewport.why}`);
+            console.log(`       screenshot: ${result.screenshot}`);
+        }
+    }
+
+    console.log("");
+    console.log(
+        `${results.length} viewports, ${passed + failed} checks: ` +
+            `${passed} passed, ${failed} failed`,
+    );
+    console.log(`artifacts: ${ARTIFACT_DIR}`);
+    return failed;
+}
+
+async function main() {
+    const { conditions, viewports } = deriveViewports(ROOT);
+    mkdirSync(ARTIFACT_DIR, { recursive: true });
+
+    const { browser, version } = await connectBrowser();
+    const results = [];
+    try {
+        for (const viewport of viewports) {
+            results.push(await runViewport(browser, viewport));
+        }
+    } finally {
+        await browser.disconnect().catch(() => {});
+    }
+
+    writeFileSync(
+        join(ARTIFACT_DIR, "results.json"),
+        JSON.stringify({ browser: version, conditions, results }, null, 2) +
+            "\n",
+    );
+
+    const failed = report(results, conditions, version);
+    process.exitCode = failed === 0 ? 0 : 1;
+}
+
+await main();

test/viewport/viewports.js

@@ -0,0 +1,185 @@
+// Viewport derivation for the responsive-layout harness.
+//
+// The widths tested are read out of the CSS the application actually
+// ships, not taken from a list of popular phone models. A generic 375px
+// "phone" test sails straight past an off-by-one error at a media query
+// boundary, which is the classic way a responsive layout breaks, so
+// every breakpoint found in the sources is probed three times: one pixel
+// below it, exactly on it, and one pixel above it.
+//
+// Nothing here hardcodes 768. If someone adds a second media block or
+// starts using Tailwind responsive prefixes, that breakpoint starts
+// being covered without this file being edited.
+
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
+// Tailwind CSS v4 default breakpoints, in rem. The app currently uses
+// none of these prefixes, so the whole table is inert until someone
+// writes an `md:`-prefixed utility class.
+const TAILWIND_BREAKPOINT_REM = {
+    sm: 40,
+    md: 48,
+    lg: 64,
+    xl: 80,
+    "2xl": 96,
+};
+
+// The app does not override the root font size, so rem and em in media
+// queries resolve against the browser default.
+const ROOT_FONT_SIZE_PX = 16;
+
+// Extract every min-width / max-width condition from the @media blocks in
+// a stylesheet. Returns e.g. [{ type: "max", px: 768, source: "..." }].
+export function mediaConditionsFromCss(css, source) {
+    const conditions = [];
+    for (const block of css.matchAll(/@media([^{]+)\{/g)) {
+        const features = block[1].matchAll(
+            /\(\s*(min|max)-width\s*:\s*([\d.]+)(px|rem|em)\s*\)/g,
+        );
+        for (const feature of features) {
+            const scale = feature[3] === "px" ? 1 : ROOT_FONT_SIZE_PX;
+            conditions.push({
+                type: feature[1],
+                px: Math.round(Number(feature[2]) * scale),
+                source,
+            });
+        }
+    }
+    return conditions;
+}
+
+// Extract the breakpoints implied by Tailwind responsive prefixes used in
+// markup. A prefix only counts when it opens a utility class, so `text-sm`
+// does not masquerade as the `sm:` breakpoint.
+export function mediaConditionsFromMarkup(sources) {
+    const conditions = [];
+    for (const { path, text } of sources) {
+        for (const [name, rem] of Object.entries(TAILWIND_BREAKPOINT_REM)) {
+            const used = new RegExp(
+                `(^|["'\\s])${name}:[a-z0-9[\\](),_./%-]+`,
+                "m",
+            ).test(text);
+            if (used) {
+                conditions.push({
+                    type: "min",
+                    px: rem * ROOT_FONT_SIZE_PX,
+                    source: path,
+                });
+            }
+        }
+    }
+    return conditions;
+}
+
+// Whether a given width should be rendering the app's narrow (stacked)
+// layout. The app keeps all of its narrow-viewport rules inside
+// `max-width` blocks, so a width is narrow exactly when one of those
+// blocks matches. Note that `max-width: 768px` matches *at* 768: getting
+// this inclusive boundary wrong in either direction is precisely what the
+// three-widths-per-breakpoint sweep exists to catch.
+export function expectsStackedLayout(width, conditions) {
+    return conditions.some((c) => c.type === "max" && width <= c.px);
+}
+
+// Viewports that are not derived from a breakpoint. Each one is here for
+// a stated reason; none of them is a stand-in for "a phone".
+const ANCHOR_VIEWPORTS = [
+    {
+        name: "floor-portrait",
+        width: 320,
+        height: 568,
+        deviceScaleFactor: 2,
+        touch: true,
+        why: "320px is the narrowest viewport still in mainstream use; nothing has to work below it",
+    },
+    {
+        name: "phone-landscape-narrow",
+        width: 667,
+        height: 375,
+        deviceScaleFactor: 2,
+        touch: true,
+        why: "phone rotated to landscape, still inside the narrow layout",
+    },
+    {
+        name: "phone-landscape-wide",
+        width: 844,
+        height: 390,
+        deviceScaleFactor: 3,
+        touch: true,
+        why: "large phone rotated to landscape: crosses into the wide layout while still being a touch device",
+    },
+    {
+        name: "desktop",
+        width: 1280,
+        height: 800,
+        deviceScaleFactor: 1,
+        touch: false,
+        why: "desktop baseline",
+    },
+];
+
+export function deriveViewports(root) {
+    const conditions = [
+        ...mediaConditionsFromCss(
+            readFileSync(join(root, "src/styles.css"), "utf8"),
+            "src/styles.css",
+        ),
+        ...mediaConditionsFromMarkup([
+            {
+                path: "src/main.js",
+                text: readFileSync(join(root, "src/main.js"), "utf8"),
+            },
+            {
+                path: "index.html",
+                text: readFileSync(join(root, "index.html"), "utf8"),
+            },
+        ]),
+    ];
+
+    if (conditions.length === 0) {
+        throw new Error(
+            "no responsive breakpoints found in src/styles.css, src/main.js or " +
+                "index.html — either the responsive layout was deleted or this " +
+                "derivation has stopped matching the sources",
+        );
+    }
+
+    const viewports = new Map();
+    const add = (viewport) => {
+        const key = `${viewport.width}x${viewport.height}`;
+        if (!viewports.has(key)) viewports.set(key, viewport);
+    };
+
+    for (const condition of conditions) {
+        for (const [offset, label] of [
+            [-1, "below"],
+            [0, "at"],
+            [+1, "above"],
+        ]) {
+            const width = condition.px + offset;
+            add({
+                name: `${condition.type}-width-${condition.px}-${label}`,
+                width,
+                // Tall enough that the whole app is laid out in one column
+                // without the viewport height influencing wrapping.
+                height: 1024,
+                deviceScaleFactor: 2,
+                touch: true,
+                why: `${offset === 0 ? "exactly on" : `1px ${label}`} the ${condition.type}-width: ${condition.px}px breakpoint declared in ${condition.source}`,
+            });
+        }
+    }
+
+    for (const anchor of ANCHOR_VIEWPORTS) add(anchor);
+
+    return {
+        conditions,
+        viewports: [...viewports.values()]
+            .map((viewport) => ({
+                ...viewport,
+                expectStacked: expectsStackedLayout(viewport.width, conditions),
+            }))
+            .sort((a, b) => a.width - b.width || a.height - b.height),
+    };
+}