feat(frontend): post collected samples to /api/v1/reports (closes #53)

A Reporter class beside AppState POSTs a JSON report to the same-origin
/api/v1/reports every reportInterval (default 60s, a new CONFIG value).
buildReport is a pure function of host state: it emits each host's
unreported, non-paused samples ({t, latency, error}) plus a random
per-browser clientId from localStorage, geo null, and an ISO 8601 UTC
timestamp. A per-host high-water mark keyed on sample time makes every
report a delta and only advances on a delivered POST, so a failed send
re-sends next interval, bounded by the existing history window. Failure
is quiet: one debug-log line per outage, one on recovery, no alert, no
tight retry loop, never blocking probing. While paused nothing is sent.

vite.config.js proxies /api to 127.0.0.1:8080 so yarn dev exercises the
real path against a local netwatch-server. Backend and schema unchanged.

Model: opus-4-8

.gitignore

@@ -1,4 +1,27 @@
-node_modules/
-dist/
+# OS
 .DS_Store
+Thumbs.db
+
+# Editors
+*.swp
+*.swo
+*~
+*.bak
+.idea/
+.vscode/
+*.sublime-*
+
+# Node
+node_modules/
+
+# Environment / secrets
+.env
+.env.*
+*.pem
+*.key
+
+# Build output
+dist/
+
+# Logs
 *.log

Dockerfile

@@ -3,9 +3,12 @@ FROM node@sha256:e4bf2a82ad0a4037d28035ae71529873c069b13eb0455466ae0bc13363826e3
 WORKDIR /app
 COPY package.json yarn.lock ./
 RUN yarn install --frozen-lockfile
-RUN apk add --no-cache git
+RUN apk add --no-cache git make
 COPY . .
-RUN yarn build
+# make check runs script/check (test + lint + fmt-check); its test step
+# is the production yarn build, so this both produces dist/ and gates the
+# image on lint/fmt-check/test regressions, not merely a broken build.
+RUN make check
 
 # nginx:stable-alpine as of 2026-02-22
 FROM nginx@sha256:15e96e59aa3b0aada3a121296e3bce117721f42d88f5f64217ef4b18f458c6ab

Dockerfile.backend

@@ -1,25 +1,50 @@
+# Lint stage — fast feedback on formatting and lint issues. The
+# golangci/golangci-lint image ships Go, gofmt, make and the linter, so
+# nothing is installed here.
+# golangci/golangci-lint:v2.7.2 (2026-08-09)
+FROM golangci/golangci-lint@sha256:5d6d5c70a61f1356adfd9dd6316ce286799fefc9d743421356ff1b00842368ba AS lint
+
+WORKDIR /src
+COPY backend/go.mod backend/go.sum ./
+RUN go mod download
+COPY backend/ .
+RUN make fmt-check
+RUN make lint
+
+# Build stage
 # golang:1.25-alpine (2026-02-27)
 FROM golang:1.25-alpine@sha256:f6751d823c26342f9506c03797d2527668d095b0a15f1862cddb4d927a7a4ced AS builder
 
-RUN apk add --no-cache git make gcc musl-dev
+RUN apk add --no-cache make
 
-# golangci-lint v2.7.2 (2026-02-27)
-RUN CGO_ENABLED=0 go install github.com/golangci/golangci-lint/v2/cmd/golangci-lint@9f61b0f53f80672872fced07b6874397c3ed197b
+WORKDIR /src
+
+# Force BuildKit to run the lint stage before proceeding. BuildKit runs
+# stages in parallel by default; without this no-op copy a lint failure
+# would not gate compilation.
+COPY --from=lint /src/go.sum /dev/null
 
-WORKDIR /repo/backend
 COPY backend/go.mod backend/go.sum ./
 RUN go mod download
-COPY .git /repo/.git
 COPY backend/ .
 
-RUN make check
-RUN make build
+RUN make test
 
+# The build is driven through the Makefile so there is exactly one
+# definition of the build command; it expands to
+# CGO_ENABLED=0 go build -trimpath -ldflags "-s -w -X main.Version=... -X main.Buildarch=..."
+# VERSION is handed over in the environment rather than as a make
+# variable so it still reaches the build if the target is ever turned
+# into a shim around a script.
+ARG VERSION=dev
+RUN VERSION="${VERSION}" make build
+
+# Runtime stage
 # alpine:3.23 (2026-02-27)
 FROM alpine:3.23@sha256:25109184c71bdad752c8312a8623239686a9a2071e8825f20acb8f2198c3f659
 
 RUN apk add --no-cache ca-certificates
-COPY --from=builder /repo/backend/netwatch-server /usr/local/bin/netwatch-server
+COPY --from=builder /src/netwatch-server /usr/local/bin/netwatch-server
 
 EXPOSE 8080
 ENTRYPOINT ["netwatch-server"]

README.md

@@ -23,6 +23,9 @@ docker build -t netwatch .
 docker run -p 8080:8080 netwatch
 ```
 
+`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
 
 This repository adheres to the
@@ -71,6 +74,18 @@ code lives in `src/main.js` with a class-based architecture:
 - **`tick()`**: Main loop — measures all hosts in parallel via `Promise.all`,
   pushes samples, redraws UI. When paused, pushes blank markers (no probes, no
   false outage)
+- **`Reporter`**: Posts collected samples to the backend
+
+### Reporting
+
+Every `reportInterval` (default 60s) the page POSTs a JSON report to the
+same-origin path `/api/v1/reports`: a random per-browser `clientId` kept in
+`localStorage`, `geo` sent as null, and each host's unreported, non-paused
+samples (timestamp, latency, error). A per-host high-water mark makes every
+report a delta, so only new samples are sent; the mark advances only on a
+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.
 
 ### Monitoring targets
 
@@ -125,9 +140,6 @@ dist/
   false outage)
 - Clickable service URLs
 - Canvas-based sparkline rendering with devicePixelRatio scaling
-- Mobile detection: viewports narrower than 768px show a friendly "not yet
-  available on mobile" message instead of the monitoring UI (no polling or
-  network requests on mobile)
 - Zero runtime dependencies: all resources bundled into build artifacts
 
 ## Deployment
@@ -151,8 +163,6 @@ properties.
 
 ## Limitations
 
-- **Mobile**: Viewports below 768px wide show a static "not yet available"
-  message. The full monitoring UI requires a desktop-width browser.
 - **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.

TODO.md

@@ -22,6 +22,27 @@ files, so merging it also closes most compliance gaps.
 
 # Completed Steps
 
+- 2026-09-21: frontend reporting client — a `Reporter` class posts collected
+  samples to `/api/v1/reports` every `reportInterval` (default 60s) as a
+  per-host delta, with the report-building step a pure function of host state;
+  `vite.config.js` proxies `/api` to the local backend for `yarn dev`
+- 2026-08-10: every interactive control now meets the 44x44 CSS px minimum tap
+  target (`.pin-btn`, `#interval-select`, the debug-log label and, on narrow
+  viewports, `#pause-btn`). The pin button's hit area grows via matching
+  negative margins, so its layout footprint and row density are unchanged
+- 2026-08-10: per-host status line wraps below the 768px breakpoint instead of
+  forcing horizontal page scroll at 320px
+- 2026-08-09: `Dockerfile.backend` reworked to the mandated Go multistage
+  lint-stage pattern: separate `lint` stage on the hash-pinned
+  `golangci/golangci-lint` image, `COPY --from=lint` stage dependency,
+  `CGO_ENABLED=0` static build driven by `ARG VERSION`, and no more `COPY .git`
+- 2026-08-09: dotfile compliance — lifted `backend/.editorconfig` to the repo
+  root so `root = true` covers the frontend too, and replaced `.gitignore` with
+  the org model (OS, editor, node, and environment/secrets sections) plus this
+  repo's `dist/` and `*.log`. `.env`, `.env.*`, `*.pem`, and `*.key` are now
+  ignored repo-wide, not just under `backend/`. Excluding `.git` from
+  `.dockerignore` stays deferred: both images read git metadata at build time
+  (`COPY .git` in `Dockerfile.backend`, `git rev-parse` in `vite.config.js`)
 - 2026-07-07 Adopted scripts-to-rule-them-all: `script/` entrypoints, Makefile
   shims, README Entrypoints section
 - 2026-02-27: backend with buffered zstd-compressed report storage; CI workflow

backend/Makefile

@@ -1,25 +1,22 @@
-UNAME_S := $(shell uname -s)
-VERSION := $(shell git describe --always --dirty)
+# VERSION is overridable (the Dockerfile passes its ARG VERSION in) and
+# degrades to "dev" when git is unavailable or there is no .git — the
+# build must not depend on the repository history being in the build
+# context.
+VERSION ?= $(shell { git describe --always --dirty; } 2>/dev/null || echo dev)
 BUILDARCH := $(shell uname -m)
 BINARY := netwatch-server
 
+GOLDFLAGS += -s -w
 GOLDFLAGS += -X main.Version=$(VERSION)
 GOLDFLAGS += -X main.Buildarch=$(BUILDARCH)
 
-ifeq ($(UNAME_S),Darwin)
-	GOFLAGS := -ldflags "$(GOLDFLAGS)"
-else
-	GOFLAGS = -ldflags "-linkmode external -extldflags -static $(GOLDFLAGS)"
-endif
-
 .PHONY: all build test lint fmt fmt-check check docker hooks run clean
 
 all: build
 
-build: ./$(BINARY)
-
-./$(BINARY): $(shell find . -name '*.go' -type f) go.mod go.sum
-	go build -o $@ $(GOFLAGS) ./cmd/netwatch-server/
+build:
+	CGO_ENABLED=0 go build -trimpath -ldflags "$(GOLDFLAGS)" \
+		-o ./$(BINARY) ./cmd/netwatch-server/
 
 test:
 	timeout 30 go test ./...

src/main.js

@@ -7,9 +7,11 @@ import "./styles.css";
 // 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 = {
     updateInterval: 3000,
     maxHistoryPoints: 100,
+    reportInterval: 60000,
     get historyDuration() {
         return (this.maxHistoryPoints * this.updateInterval) / 1000;
     },
@@ -346,6 +348,121 @@ class AppState {
     }
 }
 
+// --- Reporting ---------------------------------------------------------------
+
+// A random id identifying this browser across reports. Generated once and
+// kept in localStorage; if storage is unavailable (e.g. private mode) a
+// fresh id is used for this session only.
+function getClientId() {
+    const key = "netwatch-client-id";
+    try {
+        let id = localStorage.getItem(key);
+        if (!id) {
+            id = crypto.randomUUID();
+            localStorage.setItem(key, id);
+        }
+        return id;
+    } catch {
+        return crypto.randomUUID();
+    }
+}
+
+// Build the delta report body the backend decodes, plus the new per-host
+// high-water marks. Pure function of the passed state: `hosts` is an array
+// of { name, url, status, history }, `since` maps a host url to the Unix-ms
+// timestamp of the last sample already reported for it, and `now` is a Date.
+// Only non-paused samples newer than the mark are included. Returns null
+// when no host has an unreported sample.
+function buildReport(hosts, clientId, now, since) {
+    const reportHosts = [];
+    const marks = new Map();
+    for (const host of hosts) {
+        const mark = since.get(host.url) ?? 0;
+        const samples = [];
+        let high = mark;
+        for (const p of host.history) {
+            if (p.paused) continue;
+            if (p.timestamp <= mark) continue;
+            samples.push({
+                t: p.timestamp,
+                latency: p.latency,
+                error: p.error ?? null,
+            });
+            if (p.timestamp > high) high = p.timestamp;
+        }
+        if (samples.length === 0) continue;
+        reportHosts.push({
+            name: host.name,
+            url: host.url,
+            status: host.status,
+            history: samples,
+        });
+        marks.set(host.url, high);
+    }
+    if (reportHosts.length === 0) return null;
+    return {
+        body: {
+            clientId,
+            geo: null,
+            hosts: reportHosts,
+            timestamp: now.toISOString(),
+        },
+        marks,
+    };
+}
+
+// Periodically POSTs unreported samples to the same-origin backend. Holds
+// the per-host high-water marks so each report is a delta; marks only
+// advance on a delivered report, so a failed POST simply re-sends those
+// samples next interval (bounded by the history window — whatever has since
+// fallen out is dropped). Failure is quiet: one debug line per outage, one
+// on recovery, never an alert, never a tight retry loop.
+class Reporter {
+    constructor(state, clientId, intervalMs) {
+        this.state = state;
+        this.clientId = clientId;
+        this.intervalMs = intervalMs;
+        this.marks = new Map();
+        this.failing = false;
+        this.timerId = null;
+    }
+
+    start() {
+        if (this.timerId) return;
+        this.timerId = setInterval(() => this.flush(), this.intervalMs);
+    }
+
+    async flush() {
+        if (this.state.paused) return;
+        const report = buildReport(
+            this.state.allHosts,
+            this.clientId,
+            new Date(),
+            this.marks,
+        );
+        if (!report) return;
+        try {
+            const resp = await fetch("/api/v1/reports", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                credentials: "omit",
+                body: JSON.stringify(report.body),
+            });
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            for (const [url, t] of report.marks) this.marks.set(url, t);
+            if (this.failing) {
+                log.debug("Report delivery recovered");
+                this.failing = false;
+            }
+        } catch (err) {
+            if (!this.failing) {
+                log.debug(`Report delivery failed: ${err.message}`);
+                this.failing = true;
+            }
+        }
+    }
+}
+
 // --- Latency Measurement -----------------------------------------------------
 
 async function measureLatency(url) {
@@ -537,6 +654,12 @@ class SparklineRenderer {
 
 // --- UI Renderer -------------------------------------------------------------
 
+// The per-host status line must stay wrappable: its populated content is
+// wider than the host column at a 320px viewport, and `whitespace-nowrap`
+// here overflows the element and forces the whole document to scroll
+// horizontally.
+const STATUS_TEXT_CLASS = "status-text text-xs text-right col-span-2 mt-5";
+
 function hostRowHTML(host, index, showPin = true) {
     const pinColor = host.pinned
         ? "text-blue-500"
@@ -562,7 +685,7 @@ function hostRowHTML(host, index, showPin = true) {
             <span class="text-gray-500">---</span>
           </div>
           <a href="${host.url}" target="_blank" rel="noopener" class="text-xs text-gray-500 truncate block col-span-2 -mt-2">${host.url}</a>
-          <div class="status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-5" data-host="${index}">waiting...</div>
+          <div class="${STATUS_TEXT_CLASS} text-gray-500" data-host="${index}">waiting...</div>
         </div>
         <div class="flex-grow sparkline-container rounded overflow-hidden border border-gray-700/30">
           <canvas class="sparkline-canvas w-full" data-host="${index}" height="${CONFIG.canvasHeight}"></canvas>
@@ -671,7 +794,7 @@ function buildUI(state) {
         </p>
         <p class="mt-2"><a href="https://git.eeqj.de/sneak/netwatch/commit/${__COMMIT_FULL__}" target="_blank" rel="noopener" class="text-gray-600 hover:text-gray-400">${__COMMIT_HASH__}</a></p>
         <p class="mt-2">
-          <label class="cursor-pointer">
+          <label class="debug-toggle-label cursor-pointer">
             <input type="checkbox" id="debug-toggle" class="mr-1">
             <span>Debug log</span>
           </label>
@@ -688,6 +811,26 @@ function buildUI(state) {
 
 // --- UI Updaters -------------------------------------------------------------
 
+// Renders `min 1ms / med 2ms / avg 3ms / max 4ms`. Each label, value and
+// trailing separator is one unbreakable unit, so wrapping only ever happens
+// between stats and a wrapped line never starts with a separator.
+function statusStatsHTML(stats) {
+    return stats
+        .map(([label, value], i) => {
+            const sep =
+                i < stats.length - 1
+                    ? ` <span class="text-gray-500">/</span>`
+                    : "";
+            return (
+                `<span class="whitespace-nowrap">` +
+                `<span class="text-gray-400">${label} </span>` +
+                `<span class="${latencyClass(value, "online")}">${value}ms</span>` +
+                `${sep}</span>`
+            );
+        })
+        .join(" ");
+}
+
 function updateHostRow(host, index) {
     const latencyEl = document.querySelector(
         `.latency-value[data-host="${index}"]`,
@@ -712,28 +855,22 @@ function updateHostRow(host, index) {
     const min = host.minLatency();
     const max = host.maxLatency();
     if (host.status === "online" && avg !== null) {
-        statusEl.innerHTML =
-            `<span class="text-gray-400">min </span><span class="${latencyClass(min, "online")}">${min}ms</span>` +
-            ` <span class="text-gray-500">/</span> ` +
-            `<span class="text-gray-400">med </span><span class="${latencyClass(med, "online")}">${med}ms</span>` +
-            ` <span class="text-gray-500">/</span> ` +
-            `<span class="text-gray-400">avg </span><span class="${latencyClass(avg, "online")}">${avg}ms</span>` +
-            ` <span class="text-gray-500">/</span> ` +
-            `<span class="text-gray-400">max </span><span class="${latencyClass(max, "online")}">${max}ms</span>`;
-        statusEl.className =
-            "status-text text-xs whitespace-nowrap text-right col-span-2 mt-5";
+        statusEl.innerHTML = statusStatsHTML([
+            ["min", min],
+            ["med", med],
+            ["avg", avg],
+            ["max", max],
+        ]);
+        statusEl.className = STATUS_TEXT_CLASS;
     } else if (host.status === "offline") {
         statusEl.textContent = "unreachable";
-        statusEl.className =
-            "status-text text-xs text-red-400 whitespace-nowrap text-right col-span-2 mt-5";
+        statusEl.className = `${STATUS_TEXT_CLASS} text-red-400`;
     } else if (host.status === "error") {
         statusEl.textContent = "timeout";
-        statusEl.className =
-            "status-text text-xs text-orange-400 whitespace-nowrap text-right col-span-2 mt-5";
+        statusEl.className = `${STATUS_TEXT_CLASS} text-orange-400`;
     } else {
         statusEl.textContent = "connecting...";
-        statusEl.className =
-            "status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-5";
+        statusEl.className = `${STATUS_TEXT_CLASS} text-gray-500`;
     }
 
     SparklineRenderer.draw(canvas, host.history);
@@ -1044,8 +1181,7 @@ function greyOutUI(state) {
         }
         if (statusEl) {
             statusEl.textContent = "paused";
-            statusEl.className =
-                "status-text text-xs text-gray-500 whitespace-nowrap text-right col-span-2 mt-5";
+            statusEl.className = `${STATUS_TEXT_CLASS} text-gray-500`;
         }
         // Grey out the status dot
         const row = document.querySelector(`.host-row[data-index="${i}"]`);
@@ -1126,46 +1262,11 @@ function handleResize(state) {
     });
 }
 
-// --- Mobile Detection --------------------------------------------------------
-
-const MOBILE_BREAKPOINT = 768;
-
-function isMobileViewport() {
-    return window.innerWidth < MOBILE_BREAKPOINT;
-}
-
-function buildMobileUI() {
-    const app = document.getElementById("app");
-    app.innerHTML = `
-    <div class="mx-auto px-[5%] py-8">
-      <header class="mb-8">
-        <h1 class="text-3xl font-bold text-white"><a href="https://git.eeqj.de/sneak/netwatch" target="_blank" rel="noopener" class="underline decoration-dashed decoration-gray-500 underline-offset-4">NetWatch</a> by <a href="https://sneak.berlin" target="_blank" rel="noopener" class="text-blue-400 underline hover:text-blue-300">@sneak</a></h1>
-        <p class="text-gray-400 text-sm mt-2">Real-time network latency monitor</p>
-      </header>
-      <div class="flex items-center justify-center min-h-[60vh]">
-        <div class="bg-gray-800/70 border border-gray-700/50 rounded-lg p-8 max-w-md text-center">
-          <p class="text-4xl mb-4">📡</p>
-          <p class="text-xl font-semibold text-white mb-2">Not yet available on mobile</p>
-          <p class="text-gray-400 text-sm">NetWatch requires a wider viewport to display latency charts and monitoring data. Please visit on a desktop browser.</p>
-        </div>
-      </div>
-      <footer class="mt-8 text-center text-gray-600 text-xs">
-        <p><a href="https://git.eeqj.de/sneak/netwatch/commit/${__COMMIT_FULL__}" target="_blank" rel="noopener" class="text-gray-600 hover:text-gray-400">${__COMMIT_HASH__}</a></p>
-      </footer>
-    </div>`;
-}
-
 // --- Bootstrap ---------------------------------------------------------------
 
 async function init() {
     log.info("NetWatch starting");
 
-    if (isMobileViewport()) {
-        log.info("Mobile viewport detected — skipping monitoring");
-        buildMobileUI();
-        return;
-    }
-
     // Probe common gateway IPs to find the local router
     const gateway = await detectGateway();
     const localHosts = [LOCAL_CPE];
@@ -1178,6 +1279,9 @@ async function init() {
     buildUI(state);
     log.info("UI built, starting tick loop");
 
+    const reporter = new Reporter(state, getClientId(), CONFIG.reportInterval);
+    reporter.start();
+
     document
         .getElementById("pause-btn")
         .addEventListener("click", () => togglePause(state));

src/styles.css

@@ -14,6 +14,38 @@ body {
         ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 }
 
+/* ---- Minimum tap targets ----------------------------------------------
+   Every interactive control is at least 44x44 CSS px (Apple HIG, WCAG 2.2
+   SC 2.5.5). Not scoped to a breakpoint or to `pointer: coarse`: a large
+   phone in landscape is above the 768px breakpoint and still a touch
+   device. */
+
+/* The button grows to 44x44 while the negative margins keep its layout
+   footprint at the 16x16 of the icon inside it, so row height and the
+   icon's position are unchanged. */
+.pin-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    margin: -0.875rem;
+}
+
+/* A select paints its own background and border, so it has to actually be
+   44 tall rather than borrow the trick above. */
+#interval-select {
+    min-height: 2.75rem;
+}
+
+/* The tappable target for #debug-toggle is the label wrapping it. */
+.debug-toggle-label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2.75rem;
+}
+
 .sparkline-container {
     background: linear-gradient(
         to bottom,
@@ -38,9 +70,10 @@ body {
         gap: 0.75rem;
     }
 
-    /* Pause button: smaller on mobile */
+    /* Pause button: smaller on mobile, but not below the tap-target floor */
     #pause-btn {
         padding: 0.5rem 1rem;
+        min-height: 2.75rem;
     }
 
     #pause-btn svg {

vite.config.js

@@ -7,6 +7,13 @@ const commitFull = execSync("git rev-parse HEAD").toString().trim();
 
 export default defineConfig({
     plugins: [tailwindcss()],
+    server: {
+        // Proxy /api to a locally running netwatch-server so `yarn dev`
+        // exercises the real report-posting path.
+        proxy: {
+            "/api": "http://127.0.0.1:8080",
+        },
+    },
     define: {
         __COMMIT_HASH__: JSON.stringify(commitHash),
         __COMMIT_FULL__: JSON.stringify(commitFull),