ccdeck 3.24.0 → 3.25.0

package/dist/web/index.html

@@ -44,8 +44,8 @@
           stored === "light" || (stored !== "dark" && light) ? "light" : "dark");
       })();
     </script>
-    <script type="module" crossorigin src="/assets/index-DFezFf9U.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DFTb6plM.css">
+    <script type="module" crossorigin src="/assets/index-BoR2dMqR.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-7a7ISatq.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccdeck",
-  "version": "3.24.0",
+  "version": "3.25.0",
   "description": "Live dashboard for Claude Code and Codex — which agent is waiting on you, tool calls, token spend and every Claude Code subagent on one calm canvas. Run it with npx ccdeck.",
   "type": "module",
   "bin": {

package/release-notes.json

@@ -45,6 +45,30 @@
     "3.23.3",
     "3.23.4"
   ],
+  "3.25.0": [
+    {
+      "title": "🖱️ A click goes to the session, a double-click opens the details",
+      "body": "Clicking a card frames it with the rest of its session and leaves the detail panel shut. Double-click a card to open its details; `j`/`k`, the session list, Enter and `D` still open them too."
+    },
+    {
+      "title": "🔭 Cards stay readable when you zoom out",
+      "body": "At every zoom a card shows its name, its state and anything waiting on you, instead of shrinking to a coloured pill. Hover or focus a card to see it whole. Recap notes read at a distance too, and show the full recap on hover."
+    },
+    {
+      "title": "🌐 The Machine panel shows your network",
+      "body": "A new Network section shows download, upload and the round trip to Claude's API, and names the route when traffic goes through a VPN or a Tailscale exit node. Those checks run only while the panel is open. The panel is regrouped into CPU, Memory, Network and Thermal, with a flag at the top when something needs attention."
+    },
+    {
+      "title": "🎨 See each theme before you pick it",
+      "body": "The Appearance menu shows a small preview of the deck in Light and in Dark. Claude FM also keeps its volume when a notification chime plays, instead of dipping under it."
+    }
+  ],
+  "3.24.1": [
+    {
+      "title": "🎛️ Appearance is one small menu now",
+      "body": "The topbar's appearance control opens a compact menu where you can choose Light or Dark and show or hide the character. The character stays on by default, and your choice is remembered."
+    }
+  ],
   "3.24.0": [
     {
       "title": "🎧 Claude FM plays from the minimap",

package/src/server/index.mjs

@@ -7393,7 +7393,7 @@ export async function startServer({ port = 4317, host = "127.0.0.1", persist = n
       // An allowlist, not a pass-through: the parameter names a section of this
       // panel and nothing else, so an unknown one is a 400 rather than an empty
       // chart that looks like a machine with nothing to report.
-      if (!["thermal", "cores", "memory", "load"].includes(group)) {
+      if (!["thermal", "cores", "memory", "load", "network"].includes(group)) {
         return send(res, 400, { ok: false, error: "unknown_group" });
       }
       return send(res, 200, historySnapshot(group));
@@ -7509,8 +7509,10 @@ export async function startServer({ port = 4317, host = "127.0.0.1", persist = n
       // reads `transcript_path`, which Codex hooks never send — and unref'd
       // like its neighbours.
       startOutputWatch();
-      // Both timers are unref'd, so this never holds the process open.
-      startSystemMetrics();
+      // Every timer is unref'd, so this never holds the process open. `probe`
+      // lets the network section time the API and read the route while the
+      // Machine panel is open — the only caller allowed to reach out.
+      startSystemMetrics({ probe: true });
       // LAN sync, from the prefs the import read — and only from here, so a
       // deck that had it on comes back with it on, and a launcher that only
       // asked the registry never binds a port it is about to walk away from.

package/src/server/network-metrics.mjs

@@ -0,0 +1,190 @@
+// The network section's readings, as pure functions of what the platform prints.
+//
+// Everything here is text in, numbers out, so a Linux answer can be checked from
+// a Mac and a Windows one from either — the same reason every parser in
+// system-metrics.mjs is exported and pure. The sampler that runs the commands,
+// times the connection and keeps the history lives there; this file only reads.
+//
+// THREE READINGS, AND WHY THESE THREE (#network). The first build of this idea
+// was a speed test, and a speed test is the wrong instrument twice over: it
+// fills the line for as long as it runs — which is exactly the stall a person
+// opens this section to explain — and the maximum a line can carry is not what
+// was wrong the day this was designed. That day the Wi-Fi measured 270 Mbit/s
+// and Claude FM still went silent for twenty seconds at a time, because every
+// packet was leaving through a Tailscale exit node on another continent's relay.
+// So the section reports what is MOVING (throughput), how FAR Claude is
+// (latency), and which WAY the traffic goes (the route) — the three things a
+// person needs to tell "the network is slow" from "the network is fine and
+// something else is".
+
+/**
+ * Bytes received and sent across the interfaces that are wires, out of
+ * `/proc/net/dev`.
+ *
+ * `include` decides which interfaces count, and the sampler passes the set of
+ * physical ones (those with a `device` under /sys/class/net). Counting every
+ * interface would count a VPN's traffic twice — once inside the tunnel and once
+ * again, encrypted, on the Wi-Fi that carries it — and loopback's traffic,
+ * which never leaves the machine, would read as the deck downloading.
+ *
+ * Returns null when nothing matched, which is not the same as zero: a machine
+ * whose counters read zero moved nothing, and one this could not read did not
+ * say.
+ */
+export function parseProcNetDev(text, include = name => name !== "lo") {
+  if (typeof text !== "string") return null;
+  let rx = 0;
+  let tx = 0;
+  const ifaces = [];
+  for (const line of text.split("\n")) {
+    const colon = line.indexOf(":");
+    if (colon < 0) continue;
+    const name = line.slice(0, colon).trim();
+    if (!name || name.includes("|") || !include(name)) continue;
+    const f = line.slice(colon + 1).trim().split(/\s+/).map(Number);
+    // Receive is the first eight columns and transmit the next eight; bytes
+    // lead each group.
+    if (f.length < 9 || !Number.isFinite(f[0]) || !Number.isFinite(f[8])) continue;
+    rx += f[0];
+    tx += f[8];
+    ifaces.push(name);
+  }
+  return ifaces.length ? { rx, tx, ifaces } : null;
+}
+
+/**
+ * The same two totals out of macOS's `netstat -ibn`.
+ *
+ * Only the `enN` rows, which are the Mac's Ethernet and Wi-Fi ports, and only
+ * their `<Link#N>` row — netstat prints one row per address family per
+ * interface, and summing all of them would count every byte two or three times.
+ * `utun` (every VPN, Tailscale included), `lo`, `awdl`, `llw`, `bridge` and the
+ * rest are left out for the reason the Linux reader leaves virtual interfaces
+ * out. Read from the END of the row, because the Address column is empty on
+ * some interfaces and a count from the front would shift by one.
+ */
+export function parseNetstatIbn(text) {
+  if (typeof text !== "string") return null;
+  let rx = 0;
+  let tx = 0;
+  let seen = 0;
+  for (const line of text.split("\n")) {
+    const f = line.trim().split(/\s+/);
+    if (f.length < 8 || !/^en\d+$/.test(f[0]) || !f.some(c => c.startsWith("<Link#"))) continue;
+    // … Ipkts Ierrs Ibytes Opkts Oerrs Obytes Coll
+    const ibytes = Number(f[f.length - 5]);
+    const obytes = Number(f[f.length - 2]);
+    if (!Number.isFinite(ibytes) || !Number.isFinite(obytes)) continue;
+    rx += ibytes;
+    tx += obytes;
+    seen++;
+  }
+  return seen ? { rx, tx } : null;
+}
+
+/**
+ * The two totals out of Windows' `netstat -e`.
+ *
+ * Found by shape rather than by label: the first row that is a word followed by
+ * exactly two integers is the Bytes row, in every language Windows ships —
+ * "Bytes" is "Octets" on a French machine, and a parser that matched the word
+ * would read nothing there. The totals cover every adapter; Windows offers no
+ * cheaper per-adapter figure than a PowerShell start, which costs more than
+ * this whole section is worth every five seconds.
+ */
+export function parseNetstatE(text) {
+  if (typeof text !== "string") return null;
+  for (const line of text.split(/\r?\n/)) {
+    const m = /^\s*\S[^\d]*?\s+(\d+)\s+(\d+)\s*$/.exec(line);
+    if (m) return { rx: Number(m[1]), tx: Number(m[2]) };
+  }
+  return null;
+}
+
+/**
+ * Bytes per second between two readings, or null when the pair cannot say.
+ *
+ * A counter that went BACKWARDS is an adapter that was reset — unplugged,
+ * resumed from sleep, a driver reloaded — and the difference across a reset is
+ * not a rate, it is a large negative number. Too short a gap is refused for the
+ * opposite reason: two reads a few milliseconds apart turn one packet into a
+ * wild figure.
+ */
+export function rateBetween(prev, next) {
+  if (!prev || !next) return null;
+  const seconds = (next.at - prev.at) / 1000;
+  if (!(seconds >= 0.5)) return null;
+  const drx = next.rx - prev.rx;
+  const dtx = next.tx - prev.tx;
+  if (drx < 0 || dtx < 0) return null;
+  return { down: Math.round(drx / seconds), up: Math.round(dtx / seconds) };
+}
+
+/** The interface Linux would send a packet for this address out of, from
+ *  `ip -o route get <address>`. Asking sends nothing; it reads the routing
+ *  table, including the policy tables a Tailscale exit node installs, which
+ *  `/proc/net/route` does not show. */
+export function routeIfaceLinux(text) {
+  if (typeof text !== "string") return null;
+  return /\bdev\s+(\S+)/.exec(text)?.[1] ?? null;
+}
+
+/** The same question on macOS, from `route -n get <address>`. */
+export function routeIfaceDarwin(text) {
+  if (typeof text !== "string") return null;
+  return /^\s*interface:\s*(\S+)/m.exec(text)?.[1] ?? null;
+}
+
+/**
+ * What kind of path an interface name is.
+ *
+ * Direct is the ordinary case and draws nothing at all in the panel: only a
+ * route that is not the machine's own connection is worth a line. Names, not
+ * probes, because the kernel already named them — `tailscale0`, `wg0`,
+ * `nordlynx`, `utun4`, `tun0`, `ppp0`, `zt…` — and asking each VPN client
+ * whether it is running would cost a process per client per sample.
+ */
+export function classifyRoute(iface) {
+  if (typeof iface !== "string" || !iface) return null;
+  if (/^tailscale\d*$/.test(iface)) return { kind: "tailscale", iface };
+  if (/^(wg\d|nordlynx|mullvad|proton|wgpia)/.test(iface)) return { kind: "vpn", iface, name: "WireGuard" };
+  if (/^zt/.test(iface)) return { kind: "vpn", iface, name: "ZeroTier" };
+  if (/^(utun|tun|tap|ppp|ipsec|gpd|cscotun|vpn)/.test(iface)) return { kind: "vpn", iface, name: null };
+  return { kind: "direct", iface };
+}
+
+/**
+ * The exit node carrying this machine's traffic, and whether it is reached
+ * directly or through one of Tailscale's relays, from `tailscale status --json`.
+ *
+ * The relay is the half that matters. A direct path to an exit node costs a
+ * hop; a relayed one sends every byte through a DERP server — `nue` is
+ * Nuremberg — and adds the round trip to wherever that is, twice. That is what
+ * made a live stream buffer every few minutes on the day this was written, on a
+ * line that was otherwise fine.
+ */
+export function tailscaleExitFromStatus(json) {
+  let status = json;
+  if (typeof json === "string") {
+    try { status = JSON.parse(json); } catch { return null; }
+  }
+  if (!status || typeof status !== "object" || !status.ExitNodeStatus) return null;
+  const peer = Object.values(status.Peer ?? {}).find(p => p && p.ExitNode);
+  const node = peer?.HostName || peer?.DNSName?.split(".")[0] || null;
+  // CurAddr is set when the path is direct; an empty one with a Relay named is
+  // every packet going through that relay.
+  const relay = peer && !peer.CurAddr && peer.Relay ? String(peer.Relay) : null;
+  return { node, relay };
+}
+
+/** One line for a route, the same words the panel and the history use, so the
+ *  two can never describe one path differently. */
+export function routeLabel(route) {
+  if (!route) return null;
+  if (route.kind === "direct") return "direct";
+  if (route.kind === "tailscale-exit") {
+    return `through Tailscale exit node${route.node ? ` ${route.node}` : ""}${route.relay ? `, relayed via ${route.relay}` : ""}`;
+  }
+  if (route.kind === "tailscale") return "through Tailscale";
+  return `through ${route.name ? `${route.name} ` : "a "}VPN${route.iface ? ` (${route.iface})` : ""}`;
+}

package/src/server/system-metrics.mjs

@@ -18,8 +18,15 @@
 // readout the loudest producer in the application. So this is a plain poll
 // endpoint, exactly like /api/quota and /api/codex-usage already are.
 import { spawn } from "node:child_process";
-import { readdir, readFile } from "node:fs/promises";
+import { lookup } from "node:dns/promises";
+import { access, readdir, readFile } from "node:fs/promises";
+import net from "node:net";
 import os from "node:os";
+import { hasClaudeInstalled } from "./claude-dir.mjs";
+import {
+  classifyRoute, parseNetstatE, parseNetstatIbn, parseProcNetDev, rateBetween,
+  routeIfaceDarwin, routeIfaceLinux, routeLabel, tailscaleExitFromStatus,
+} from "./network-metrics.mjs";
 
 /** CPU is the metric with spikes, so it is sampled often enough to catch one. */
 const CPU_INTERVAL_MS = 3_000;
@@ -1690,9 +1697,44 @@ function seriesFor(group) {
     }];
   }
 
+  if (group === "network") {
+    // Download and upload are two charts, not two lines on one: upload is
+    // usually a hundredth of download, and on a shared scale it is a line along
+    // the floor. Each gets a top fitted to its own peak. No bands: there is no
+    // throughput that is too much, only more than usual, and a threshold here
+    // would be a number this module made up.
+    const down = at("net:down");
+    const up = at("net:up");
+    const api = at("net:api");
+    const series = [
+      // Floors of 100 KB/s and 100 ms, so a quiet line is drawn as quiet.
+      { key: "net:down", label: "Download", unit: "B/s", top: niceTop(down, 100_000), warnAt: null, critAt: null, restsAtZero: false, points: down },
+      { key: "net:up", label: "Upload", unit: "B/s", top: niceTop(up, 100_000), warnAt: null, critAt: null, restsAtZero: false, points: up },
+      { key: "net:api", label: "Claude API latency", unit: "ms", top: niceTop(api, 100), warnAt: null, critAt: null, restsAtZero: false, points: api },
+    ].filter(s => s.points.length);
+    // The path the traffic took, as marks on the last chart — the question the
+    // section exists for is "was it the VPN", and a line that jumps where a
+    // mark sits answers it without a legend.
+    const since = history.length ? history[0].m * BUCKET_MS : 0;
+    const changes = routeLog.filter(c => c.t >= since).map(c => ({ t: c.t, label: c.label, from: c.from }));
+    if (series.length && changes.length) series[series.length - 1].changes = changes;
+    return series;
+  }
+
   return [];
 }
 
+/** A scale top a person would choose — 1, 2 or 5 times a power of ten — just
+ *  above the peak, and never below `floor`, so an idle line is not drawn as a
+ *  dramatic climb. */
+function niceTop(points, floor) {
+  const peak = points.reduce((a, p) => Math.max(a, p.v), 0);
+  const want = Math.max(floor, peak * 1.15);
+  const pow = 10 ** Math.floor(Math.log10(want));
+  for (const m of [1, 2, 5, 10]) if (m * pow >= want) return m * pow;
+  return want;
+}
+
 /**
  * Whether this machine has been held back AT ALL since the deck started, and
  * when it last was.
@@ -1854,23 +1896,219 @@ function sampleCpu() {
   if (process.platform !== "win32") record("load:1m", Math.round(load[0] * 100) / 100);
 }
 
+// ── the network ────────────────────────────────────────────────────────────
+//
+// Three readings, taken at two very different costs (network-metrics.mjs says
+// why these three). THROUGHPUT is two counters the kernel already keeps, so it
+// rides its own five-second timer for the life of the process like CPU does,
+// and its history is as complete as every other section's. LATENCY and ROUTE
+// leave the machine or spawn a process, so they are taken only while somebody
+// is looking: the panel is the only thing that polls /api/system, and a probe
+// runs only within NET_ASKED_MS of that poll. A deck left open in a background
+// tab all day makes no connection it was not asked for — the rule Claude FM's
+// probe already follows ("makes no request until a page asks for one").
+
+/** Counters on Linux are a file read; on macOS and Windows one short command.
+ *  Five seconds is often enough to catch a burst and rare enough that the
+ *  command costs nothing anybody could measure. */
+const NET_INTERVAL_MS = 5_000;
+/** How often the far end is asked, while the panel is open. */
+const NET_PROBE_MS = 30_000;
+/** How recently a poll must have come for the probe to run at all. */
+const NET_ASKED_MS = 20_000;
+/** A probe older than this is from before the panel was last closed, and is
+ *  not reported as the present. */
+const NET_STALE_MS = NET_PROBE_MS * 2 + 5_000;
+/** What "how far is Claude" is measured against: the host every request Claude
+ *  Code makes goes to, and the one quota.mjs already reads from. */
+const API_HOST = "api.anthropic.com";
+const API_PORT = 443;
+const CONNECT_TIMEOUT_MS = 4_000;
+/** Where the route is asked for when there is no API address to ask about. A
+ *  routing-table lookup sends no packet, so this contacts nobody. */
+const ROUTE_FALLBACK = "1.1.1.1";
+/** Route changes kept for the history's markers. A path changes a handful of
+ *  times a day; forty is several days of it. */
+const ROUTE_LOG = 40;
+
+let netTimer = null;
+let netInFlight = false;
+let prevNet = null;
+let netRate = null;
+let physical = null;
+let physicalAt = 0;
+let probeTimer = null;
+/** Whether this process may reach out at all. Off unless the server says so:
+ *  the suite starts this module in dozens of cases, and none of them should
+ *  open a connection to Anthropic or spawn `ip` and `tailscale` to do it. */
+let probeEnabled = false;
+let probeInFlight = false;
+let probeAt = 0;
+let askedAt = 0;
+/** Undefined until measured, null when the host could not be reached. */
+let apiMs;
+let route = null;
+const routeLog = [];
+
+/** Interfaces that are hardware, by the one test the kernel offers: a
+ *  `device` link under /sys/class/net. Rechecked each minute, because a dock or
+ *  a phone tethered over USB is a new wire. */
+async function physicalInterfaces(root = "/sys/class/net") {
+  try {
+    const names = await readdir(root);
+    const real = await Promise.all(names.map(n => access(`${root}/${n}/device`).then(() => n, () => null)));
+    return new Set(real.filter(Boolean));
+  } catch { return null; }
+}
+
+async function readNetCounters(platform = process.platform) {
+  if (platform === "linux") {
+    if (!physical || Date.now() - physicalAt > 60_000) {
+      physical = await physicalInterfaces();
+      physicalAt = Date.now();
+    }
+    try {
+      const include = physical?.size ? name => physical.has(name) : name => name !== "lo";
+      return parseProcNetDev(await readFile("/proc/net/dev", "utf8"), include);
+    } catch { return null; }
+  }
+  if (platform === "darwin") return parseNetstatIbn(await run("netstat", ["-ibn"]));
+  if (platform === "win32") return parseNetstatE(await run("netstat", ["-e"]));
+  return null;
+}
+
+async function sampleNetwork() {
+  if (netInFlight) return;
+  netInFlight = true;
+  try {
+    const counters = await readNetCounters();
+    if (!counters) return;
+    const next = { rx: counters.rx, tx: counters.tx, at: Date.now() };
+    const rate = rateBetween(prevNet, next);
+    prevNet = next;
+    if (!rate) return;
+    netRate = rate;
+    record("net:down", rate.down);
+    record("net:up", rate.up);
+  } finally { netInFlight = false; }
+}
+
+/** Milliseconds for a TCP handshake with `address`, or null. The connection
+ *  is closed the moment it opens: nothing is sent, so this is a round trip and
+ *  nothing else — no TLS, no request, nothing the far end has to answer. */
+function connectMs(address, port = API_PORT, timeoutMs = CONNECT_TIMEOUT_MS) {
+  return new Promise(resolve => {
+    const t0 = performance.now();
+    let done = false;
+    const socket = net.connect({ host: address, port });
+    const finish = ms => {
+      if (done) return;
+      done = true;
+      socket.destroy();
+      resolve(ms);
+    };
+    socket.setTimeout(timeoutMs, () => finish(null));
+    socket.once("connect", () => finish(Math.round(performance.now() - t0)));
+    socket.once("error", () => finish(null));
+  });
+}
+
+/** Which way traffic to `address` leaves, and — for a Tailscale exit node —
+ *  through which machine and whether through a relay. */
+async function readRoute(address, platform, runner) {
+  let iface = null;
+  if (platform === "linux") iface = routeIfaceLinux(await runner("ip", ["-o", "route", "get", address]));
+  else if (platform === "darwin") iface = routeIfaceDarwin(await runner("route", ["-n", "get", address]));
+  const kind = classifyRoute(iface);
+  if (!kind || kind.kind === "direct") return kind;
+  // Tailscale on a Mac is a utun like every other VPN there, so the question is
+  // asked of any tunnel rather than only of one named tailscale0. A machine
+  // without the CLI answers null and keeps the generic label.
+  const exit = tailscaleExitFromStatus(await runner("tailscale", ["status", "--json"], 3_000));
+  if (exit) return { kind: "tailscale-exit", iface, ...exit };
+  return kind;
+}
+
+/**
+ * One probe: how far the API is and which way the traffic to it goes.
+ *
+ * Guarded twice, because a GET can start it (see systemSnapshot) and a read's
+ * cost must have a ceiling (#544): never two at once, and never more often than
+ * half the probe interval however many tabs poll. `deps` is the seam the tests
+ * use — nothing else here can be made to answer "unreachable" on demand.
+ */
+export async function probeNetwork(deps = {}) {
+  const now = deps.now ?? Date.now;
+  if (!probeEnabled && !deps.force) return;
+  if (probeInFlight || now() - probeAt < NET_PROBE_MS / 2) return;
+  if (!deps.force && now() - askedAt > NET_ASKED_MS) return;
+  probeInFlight = true;
+  probeAt = now();
+  try {
+    const platform = deps.platform ?? process.platform;
+    const runner = deps.run ?? run;
+    const measureApi = (deps.hasClaude ?? hasClaudeInstalled)();
+    let address = null;
+    if (measureApi) {
+      try { address = (await (deps.lookup ?? lookup)(API_HOST)).address; } catch { address = null; }
+      apiMs = address ? await (deps.connect ?? connectMs)(address) : null;
+      if (apiMs != null) record("net:api", apiMs);
+    }
+    const next = await readRoute(address ?? ROUTE_FALLBACK, platform, runner);
+    if (next) {
+      const label = routeLabel(next);
+      const prev = routeLog[routeLog.length - 1]?.label ?? null;
+      if (prev !== label) {
+        // `from` null is the first route this process saw — the state when it
+        // started looking, not a change, and the chart draws no mark for it.
+        routeLog.push({ t: now(), label, from: prev });
+        while (routeLog.length > ROUTE_LOG) routeLog.shift();
+      }
+    }
+    route = next;
+  } finally { probeInFlight = false; }
+}
+
+/** What the panel shows for the network, or null before anything is known. */
+function networkSnapshot(nowMs = Date.now()) {
+  const fresh = nowMs - probeAt <= NET_STALE_MS;
+  const api = fresh && apiMs !== undefined ? { host: API_HOST, ms: apiMs } : null;
+  // `to` says what the route was asked about: the API itself when Claude Code
+  // is here, the open internet otherwise — a split tunnel can send one and not
+  // the other, and the panel should not claim more than was measured.
+  const via = fresh && route && route.kind !== "direct"
+    ? { ...route, label: routeLabel(route), to: apiMs !== undefined ? "claude" : "internet" }
+    : null;
+  if (!netRate && !api && !via) return null;
+  return { down: netRate?.down ?? null, up: netRate?.up ?? null, api, route: via };
+}
+
 /**
- * Begin sampling. Idempotent, and both timers are unref'd so this can never be
+ * Begin sampling. Idempotent, and every timer is unref'd so this can never be
  * the reason the process stays alive.
+ *
+ * `probe` is the network section's permission to leave the machine — latency to
+ * the API and the route there. The server passes it; nothing else should.
  */
-export function startSystemMetrics() {
+export function startSystemMetrics({ probe = false } = {}) {
   if (cpuTimer) return;
+  probeEnabled = probe;
   prevTicks = readTicks();          // baseline, so the first tick has a delta
   prevCoreTicks = readCoreTicks();
   sampleMemory();
   historySince = Date.now();
   sampleThermal();
+  sampleNetwork();
   cpuTimer = setInterval(sampleCpu, CPU_INTERVAL_MS);
   memTimer = setInterval(sampleMemory, MEM_INTERVAL_MS);
   thermalTimer = setInterval(sampleThermal, THERMAL_INTERVAL_MS);
+  netTimer = setInterval(sampleNetwork, NET_INTERVAL_MS);
+  if (probeEnabled) probeTimer = setInterval(() => { probeNetwork(); }, NET_PROBE_MS);
   cpuTimer.unref?.();
   memTimer.unref?.();
   thermalTimer.unref?.();
+  netTimer.unref?.();
+  probeTimer?.unref?.();
 }
 
 /**
@@ -1894,7 +2132,19 @@ export function stopSystemMetrics() {
   if (cpuTimer) clearInterval(cpuTimer);
   if (memTimer) clearInterval(memTimer);
   if (thermalTimer) clearInterval(thermalTimer);
-  cpuTimer = memTimer = thermalTimer = null;
+  if (netTimer) clearInterval(netTimer);
+  if (probeTimer) clearInterval(probeTimer);
+  cpuTimer = memTimer = thermalTimer = netTimer = probeTimer = null;
+  probeEnabled = false;
+  prevNet = null;
+  netRate = null;
+  physical = null;
+  physicalAt = 0;
+  probeAt = 0;
+  askedAt = 0;
+  apiMs = undefined;
+  route = null;
+  routeLog.length = 0;
   thermal = null;
   thermalMisses = 0;
   thermalEverAnswered = false;
@@ -1924,6 +2174,13 @@ export function stopSystemMetrics() {
  */
 export function systemSnapshot() {
   const cpu = cpuHistory.length ? cpuHistory[cpuHistory.length - 1] : null;
+  // The panel is the only poller, so a poll is the signal somebody is looking.
+  // The first one after the panel was closed asks at once rather than waiting
+  // out the probe timer, so the latency is on screen by the second poll; the
+  // guards inside probeNetwork are what keep a busy poller from paying twice.
+  const idle = Date.now() - askedAt > NET_ASKED_MS;
+  askedAt = Date.now();
+  if (idle && probeEnabled) void probeNetwork();
   const load = os.loadavg();
   // Platform alone, for the reason spelled out beside the `load:1m` record in
   // sampleCpu: Node's own contract makes the platform test sufficient, and the
@@ -1945,6 +2202,7 @@ export function systemSnapshot() {
     uptimeSec: Math.round(os.uptime()),
     platform: process.platform,
     loadavg: hasLoad ? load.map(n => Math.round(n * 100) / 100) : null,
+    network: networkSnapshot(),
     intervalMs: CPU_INTERVAL_MS,
     sampledAt: Date.now(),
   };