Merge branch 'main' into TODO

Redesigns host rows for portrait/mobile viewports (<=768px):
- Host info panel stacks on top, full width
- Sparkline renders full width below
- Each host row becomes taller to accommodate vertical layout
- Summary line wraps gracefully
- Header controls stack below title

Desktop layout is unchanged — all changes are inside a `@media (max-width: 768px)` query and CSS class hooks added to the HTML.

Closes #2

Co-authored-by: user <user@Mac.lan guest wan>
Reviewed-on: #5
Co-authored-by: clawbot <clawbot@noreply.example.org>
Co-committed-by: clawbot <clawbot@noreply.example.org>

TODO.md

@@ -0,0 +1,47 @@
+# Workflow
+
+* 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)
+* merge to `main` if the branch is not protected, otherwise open a PR
+* push
+
+# Status
+
+pre-1.0. No git tags. Backend work in flight on feat/reportbuf-storage
+(dirty: src/main.js). Frontend is functional; backend is new and unmerged.
+
+# Next Step
+
+Land feat/reportbuf-storage: finish the in-progress src/main.js change,
+get make check green, and merge the branch to main. The branch adds the
+backend (buffered zstd-compressed report storage), the CI workflow, and
+backend repo standard files, so merging it also closes most compliance
+gaps.
+
+# Completed Steps
+
+- 2026-02-27: backend with buffered zstd-compressed report storage; CI
+  workflow and backend repo standard files; backend Dockerfile fixed (Go
+  1.25, golangci-lint) and moved to repo root (feat/reportbuf-storage,
+  unmerged)
+- 2026-02-26: host row layout redesigned with CSS grid; overflow and
+  spacing fixes; nginx config extracted; port hardcoded to 8080
+- 2026-02-26: debug log panel, median stats, recovery probe, Docker
+  build fix, S3 Singapore endpoint added
+- 2026-02-23: summary box redesign, host pinning, local and UTC clocks,
+  checks counter
+- 2026-02-23: hosts sorted by latency; GET instead of HEAD for latency;
+  timeout derived from interval; Hetzner regional endpoints; 3s interval
+- 2026-01-29: initial NetWatch network latency monitor
+
+# Future Steps
+
+- 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

src/main.js

@@ -140,50 +140,6 @@ const GATEWAY_CANDIDATES = [
     "http://10.0.0.1",
 ];
 
-// --- Geolocation via API -----------------------------------------------------
-
-async function fetchGeoInfo() {
-    try {
-        const res = await fetch("https://freeipapi.com/api/json/");
-        if (!res.ok) return null;
-        return await res.json();
-    } catch {
-        return null;
-    }
-}
-
-// --- Telemetry Report --------------------------------------------------------
-
-function getClientId() {
-    const key = "netwatch_client_id";
-    let id = localStorage.getItem(key);
-    if (!id) {
-        id = crypto.randomUUID();
-        localStorage.setItem(key, id);
-    }
-    return id;
-}
-
-const clientId = getClientId();
-
-function buildReport(state) {
-    return {
-        clientId,
-        timestamp: new Date().toISOString(),
-        geo: state.geoInfo,
-        hosts: state.wan.map((h) => ({
-            name: h.name,
-            url: h.url,
-            status: h.status,
-            history: h.history.map((s) => ({
-                t: s.timestamp,
-                latency: s.latency,
-                error: s.error || null,
-            })),
-        })),
-    };
-}
-
 // --- Formatting Helpers ------------------------------------------------------
 
 function formatUTCTimestamp(date) {
@@ -313,7 +269,6 @@ class AppState {
         this.local = localHosts.map((h) => new HostState(h));
         this.paused = false;
         this.tickCount = 0;
-        this.geoInfo = null;
     }
 
     get allHosts() {
@@ -1185,9 +1140,6 @@ async function init() {
     }
 
     const state = new AppState(localHosts);
-    fetchGeoInfo().then((geo) => {
-        state.geoInfo = geo;
-    });
     buildUI(state);
     log.info("UI built, starting tick loop");
 
@@ -1242,11 +1194,6 @@ async function init() {
     doTick();
     let tickIntervalId = setInterval(doTick, CONFIG.updateInterval);
 
-    setInterval(() => {
-        if (state.tickCount > 1)
-            console.log("NetWatch report:", buildReport(state));
-    }, 60000);
-
     document
         .getElementById("interval-select")
         .addEventListener("change", (e) => {

src/styles.css

@@ -21,3 +21,96 @@ body {
         rgba(255, 255, 255, 0) 100%
     );
 }
+
+/* ---- Mobile responsive layout (portrait / narrow viewports) ---- */
+@media (max-width: 768px) {
+    /* Header: stack title and controls vertically */
+    header .flex.items-center.justify-between {
+        flex-direction: column;
+        align-items: flex-start !important;
+        gap: 1rem;
+    }
+
+    header .flex.flex-col.items-end {
+        align-items: flex-start !important;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+    }
+
+    /* Pause button: smaller on mobile */
+    #pause-btn {
+        padding: 0.5rem 1rem;
+    }
+
+    #pause-btn svg {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+
+    #pause-text {
+        font-size: 0.875rem;
+    }
+
+    /* Summary box: wrap into a grid for readability */
+    #summary {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.25rem 0.5rem;
+        justify-content: center;
+        line-height: 1.6;
+    }
+
+    /* Hide the pipe separators on mobile */
+    #summary .text-gray-600.mx-3 {
+        display: none;
+    }
+
+    /* Host row: stack vertically */
+    .host-row .flex.items-center.gap-4 {
+        flex-direction: column;
+        align-items: stretch !important;
+        gap: 0.5rem;
+    }
+
+    /* Info section: full width, remove fixed width */
+    .host-row .w-\[420px\] {
+        width: 100% !important;
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: center;
+    }
+
+    /* Host name row with dot */
+    .host-row .flex.items-center.gap-2.min-w-\[200px\] {
+        min-width: 0;
+    }
+
+    /* Latency value: slightly smaller on mobile */
+    .host-row .latency-value {
+        font-size: 1.875rem;
+        line-height: 2.25rem;
+    }
+
+    /* Sparkline: full width below the info */
+    .host-row .sparkline-container {
+        width: 100%;
+        flex-shrink: 0;
+    }
+
+    /* Pin button: inline with the host info */
+    .host-row .pin-btn {
+        position: absolute;
+        right: 0.5rem;
+        top: 0.5rem;
+    }
+
+    .host-row {
+        position: relative;
+    }
+
+    /* Footer legend: wrap nicely */
+    footer p {
+        line-height: 1.8;
+    }
+}