@jsenv/core 41.4.0 → 41.4.2

package/src/dev/dev_server_plugins/dev_server_plugin_serve_source_files.js

@@ -2,6 +2,7 @@ import { bufferToEtag } from "@jsenv/filesystem";
 import { formatError } from "@jsenv/humanize";
 import { composeTwoResponses, fetchDirectory } from "@jsenv/server";
 import { URL_META } from "@jsenv/url-meta";
+import { normalizeUrl } from "@jsenv/urls";
 import { readFileSync } from "node:fs";
 
 import { watchSourceFiles } from "../../helpers/watch_source_files.js";
@@ -115,8 +116,14 @@ export const devServerPluginServeSourceFiles = ({
             //   was compared using etag and it has changed
             return false;
           }
-          if (!urlInfo.isWatched) {
-            // file is not watched, check the filesystem
+          // Watched files trust the watcher — except the ones marked
+          // revalidateOnFileSystem (package.json files, see node_esm_resolver):
+          // the watcher fires a beat AFTER a change, and what these files
+          // decide (a package version, hence the ?v= the importer embeds) is
+          // cached as immutable by the browser — a request racing the watcher
+          // must not win a stale answer it would then keep forever.
+          if (!urlInfo.isWatched || urlInfo.revalidateOnFileSystem) {
+            // check the filesystem
             let fileContentAsBuffer;
             try {
               fileContentAsBuffer = readFileSync(new URL(urlInfo.url));
@@ -215,7 +222,14 @@ export const devServerPluginServeSourceFiles = ({
               rootDirectoryUrl,
             );
             requestedUrlObject.searchParams.delete("hot");
-            requestedUrl = requestedUrlObject.href;
+            // normalizeUrl, because searchParams.delete re-serializes the whole
+            // query and turns a valueless param ("?enabled") into "?enabled=".
+            // Every url in the graph is normalized the other way (kitchen.js
+            // strips those "="), and requestedUrl is compared to graph urls as
+            // a string: an inline urlInfo decides "is this request for me?"
+            // that way (jsenv:inline_content_fetcher) and re-cooks its own
+            // ALREADY COOKED content when the comparison wrongly fails.
+            requestedUrl = normalizeUrl(requestedUrlObject.href);
           }
           const { referer } = request.headers;
           const parentUrl = referer
@@ -278,7 +292,36 @@ export const devServerPluginServeSourceFiles = ({
                 return respondWithNotModified();
               }
             }
-            await urlInfo.cook({ request, reference });
+            // Cooking is not memoized in dev (see cookGuard in kitchen.js): a
+            // request that reaches cook() re-fetches and re-transforms the file
+            // even when nothing changed. The 304 path above already avoids that
+            // for a browser that revalidates — but a browser with its cache
+            // disabled (devtools open, the common way to reload during dev)
+            // sends no if-none-match and would re-cook the entire graph on
+            // every reload, turning a warm reload into seconds of transform
+            // work. Same validity check as the 304 path, same trust: when the
+            // graph's in-memory content is still valid, it IS the response —
+            // only the status differs (200 with content, since there is no
+            // client etag to match).
+            const servableFromMemory =
+              !urlInfo.error &&
+              !inlineParentUrlInfo &&
+              !urlInfo.response &&
+              urlInfo.content !== undefined &&
+              !cacheIsDisabledInResponseHeader(urlInfo) &&
+              // a "?hot" request exists to bypass every cache, this one
+              // included: it must be cooked, because cooking is what rewrites
+              // its references so "?hot" cascades to the modified files below
+              // (see jsenv_plugin_hot_search_param) — the memory content was
+              // cooked before the change and its references carry nothing.
+              // The urlInfo itself often IS valid here (hot reload of a
+              // dependency: the file re-requested did not change, one below
+              // it did), so isValid() alone cannot catch this.
+              !request.searchParams.has("hot") &&
+              urlInfo.isValid();
+            if (!servableFromMemory) {
+              await urlInfo.cook({ request, reference });
+            }
             let { response } = urlInfo;
             if (response) {
               return response;
@@ -319,7 +362,14 @@ export const devServerPluginServeSourceFiles = ({
                 "content-length": urlInfo.contentLength,
               },
               body: urlInfo.content,
-              timing: urlInfo.timing, // TODO: use something else
+              // Where the time went, readable in devtools (Network > Timing):
+              // the server merges this into the server-timing header. Served
+              // from memory: a marker saying so, since nothing was cooked for
+              // this request. Cooked: what the kitchen measured (each plugin
+              // hook, and the fetch/transform/finalize roll-ups).
+              timing: servableFromMemory
+                ? { "served from memory cache": null }
+                : urlInfo.timing,
             };
             const augmentResponseInfo = {
               ...kitchen.context,

package/src/dev/start_dev_server.js

@@ -18,6 +18,7 @@ import { jsenvCoreDirectoryUrl } from "../jsenv_core_directory_url.js";
 import { createPackageDirectory } from "../kitchen/package_directory.js";
 import { createJsenvPluginStore } from "../plugins/jsenv_plugins_controller.js";
 import { jsenvPluginClientMonitoring } from "../plugins/client_monitoring/jsenv_plugin_client_monitoring.js";
+import { jsenvPluginPageSwitcher } from "../plugins/page_switcher/jsenv_plugin_page_switcher.js";
 import { getCorePlugins } from "../plugins/plugins.js";
 import { jsenvPluginServerEvents } from "../plugins/server_events/jsenv_plugin_server_events.js";
 import { devServerPluginChromeDevToolsJson } from "./dev_server_plugins/dev_server_plugin_chrome_devtools_json.js";
@@ -40,12 +41,13 @@ const EXECUTED_BY_TEST_PLAN = process.argv.includes("--jsenv-test");
  * @param {string} [params.sourceMainFilePath="./index.html"] - File served for "/".
  * @param {number} [params.port=3456] - Port to listen on (0 = a free port).
  * @param {string} [params.hostname] - Hostname to bind to.
- * @param {boolean} [params.acceptAnyIp=true] - Also accept connections on the machine's IPs.
+ * @param {boolean} [params.acceptAnyIp=false] - Also accept connections on the machine's IPs (so other devices on the network — a phone — can reach the server). Off by default: exposing the dev server beyond localhost is an explicit choice, not something a dev tool decides.
  * @param {boolean|object} [params.https=false] - HTTPS as `{ certificate, privateKey }`.
  * @param {boolean} [params.http2=false] - HTTP/2 (requires https).
  * @param {Array} [params.plugins=[]] - jsenv plugins (transformUrlContent, serverRoutes, serverEvents, effect, …).
  * @param {Array} [params.serverPlugins=[]] - `@jsenv/server`-level plugins.
  * @param {boolean|object} [params.clientAutoreload=true] - Live reload; also gates the server-events channel.
+ * @param {boolean|object} [params.serverTiming={ minDuration: 0.5 }] - server-timing response headers; `minDuration` (ms) drops entries that took less (0 when run by the test plan, so tests see every entry).
  * @param {boolean} [params.ribbon=true] - The dev "ribbon" overlay.
  * @param {boolean} [params.supervisor=true] - Script supervisor (better error reporting).
  * @param {boolean|object} [params.directoryListing=true] - Directory listing pages.
@@ -70,7 +72,7 @@ export const startDevServer = async ({
   ignore,
   port = 3456,
   hostname,
-  acceptAnyIp = true,
+  acceptAnyIp = false,
   https,
   // it's better to use http1 by default because it allows to get statusText in devtools
   // which gives valuable information when there is errors
@@ -88,6 +90,11 @@ export const startDevServer = async ({
   sourceFilesConfig = {},
   clientAutoreload = true,
   clientAutoreloadOnServerRestart = true,
+  // server-timing response headers: devtools show how the time to answer is
+  // spent (cook measures come from the kitchen, see urlInfo.timing). Entries
+  // under minDuration are dropped so a human reads the measures that matter;
+  // a test wants them all, hence 0 there.
+  serverTiming = { minDuration: EXECUTED_BY_TEST_PLAN ? 0 : 0.5 },
 
   // runtimeCompat is the runtimeCompat for the build
   // when specified, dev server use it to warn in case
@@ -227,7 +234,9 @@ export const startDevServer = async ({
     ...(EXECUTED_BY_TEST_PLAN
       ? []
       : [
-          jsenvPluginClientMonitoring({ rootDirectoryUrl: sourceDirectoryUrl }),
+          jsenvPluginClientMonitoring(),
+          // cmd+K on any served page to jump to another one.
+          jsenvPluginPageSwitcher(),
         ]),
     ...plugins,
     ...getCorePlugins({
@@ -324,6 +333,7 @@ export const startDevServer = async ({
     hostname,
     port,
     requestWaitingMs: 60_000,
+    serverTiming,
     plugins: finalServerPlugins,
     // will allow to open file, provide more context on each route
     canExposeSensitiveData: true,

package/src/kitchen/kitchen.js

@@ -645,14 +645,23 @@ ${ANSI.color(normalizedReturnValue, ANSI.YELLOW)}
     if (!urlInfo.url.startsWith("ignore:")) {
       try {
         await urlInfo.dependencies.startCollecting(async () => {
+          // Each phase timed into urlInfo.timing: the dev server turns it into
+          // a server-timing response header, so devtools show where the time
+          // to cook a file goes (fetch vs transform vs finalize).
+          const timePhase = async (name, phase) => {
+            const start = performance.now();
+            await phase();
+            urlInfo.timing[name] = performance.now() - start;
+          };
+
           // "fetchUrlContent" hook
-          await urlInfo.fetchContent();
+          await timePhase("fetch", () => urlInfo.fetchContent());
 
           // "transform" hook
-          await urlInfo.transformContent();
+          await timePhase("transform", () => urlInfo.transformContent());
 
           // "finalize" hook
-          await urlInfo.finalizeContent();
+          await timePhase("finalize", () => urlInfo.finalizeContent());
         });
       } catch (e) {
         urlInfo.error = e;

package/src/kitchen/url_graph/url_graph.js

@@ -427,6 +427,17 @@ const createUrlInfo = (url, context) => {
         if (referenceFromOther.gotInlined()) {
           const urlInfoReferencingThisOne = referenceFromOther.ownerUrlInfo;
           considerModified(urlInfoReferencingThisOne);
+          continue;
+        }
+        // A reference with a versioning effect writes this url's VERSION into
+        // its owner's cooked content (the ?v= param, read from package.json):
+        // this url modified means that content now embeds a stale version, so
+        // the owner is as modified as an owner of inlined content. Without
+        // this, the owner's cooked content survives the modification and a
+        // validity check that "heals" this url (see isValid re-reading files
+        // from disk) leaves the graph claiming the owner is fresh.
+        if (referenceFromOther.hasVersioningEffect) {
+          considerModified(referenceFromOther.ownerUrlInfo);
         }
       }
       for (const searchParamVariant of urlInfo.searchParamVariantSet) {

package/src/plugins/client_monitoring/client/client_monitor_page.html

@@ -282,8 +282,11 @@
           const v = version && version !== "unknown" ? ` ${version}` : "";
           return `${label}${v}`;
         };
+        // The ip is part of who a client is: it tells the main client
+        // (localhost — this machine) from a device on the network.
+        const ipLabel = client.local ? "localhost" : client.ip;
         return (
-          [part(client.runtime, RUNTIME_LABELS), part(client.os)]
+          [part(client.runtime, RUNTIME_LABELS), part(client.os), ipLabel]
             .filter(Boolean)
             .join(" · ") || clientId.slice(0, 8)
         );

package/src/plugins/client_monitoring/client/client_reporter.js

@@ -13,6 +13,17 @@
  * - buffered console logs
  */
 
+// The main client is the machine the dev server runs on, talking to itself
+// via localhost. Watching it makes no sense — its devtools are one keystroke
+// away, and the person reading the dashboard IS this client — so it only
+// reports presence (heartbeat + tab info, so the dashboard lists it and can
+// pilot it) and watches nothing: no console capture, no activity tracking, no
+// fetch/history patching. A client reaching the server over the network (a
+// phone on the LAN ip, acceptAnyIp: true) is the one being monitored, and
+// reports everything.
+const LOCAL_HOSTNAMES = ["localhost", "127.0.0.1", "[::1]"];
+const isLocalClient = LOCAL_HOSTNAMES.includes(window.location.hostname);
+
 const CLIENT_ID_STORAGE_KEY = "jsenv_client_id";
 const TAB_ID_STORAGE_KEY = "jsenv_tab_id";
 const REPORT_ENDPOINT = "/.internal/clients/report";
@@ -25,6 +36,12 @@ const HEARTBEAT_MS = 15000;
 // Continuous activities (mousemove, scroll) only need to refresh "what the tab
 // is doing" occasionally, not on every event.
 const CONTINUOUS_THROTTLE_MS = 2000;
+// A single log line is worth reading, not storing whole: one console.log of a
+// big object serializes to megabytes, and that string is then kept by the
+// buffer here, by the dev server's own per-client buffer, and by the
+// server-events history — three copies of something nobody will read past the
+// first screen. Cut at the source, once, where the size is known.
+const LOG_TEXT_MAX = 10_000;
 
 const randomId = () =>
   typeof window.crypto !== "undefined" && window.crypto.randomUUID
@@ -191,19 +208,47 @@ const setup = () => {
     }
   };
 
+  // A page can declare itself perf critical (window.__jsenv_perf_critical__()):
+  // measuring an animation means nothing if the thing measuring it steals a
+  // frame. Monitoring then holds everything back until the page has been
+  // genuinely idle — no interaction for a while — instead of flushing on its
+  // own schedule.
+  let perfCritical = false;
+  let lastInteractionMs = 0;
+  const PERF_CRITICAL_QUIET_MS = 2000;
+  const isQuiet = () =>
+    !perfCritical || Date.now() - lastInteractionMs > PERF_CRITICAL_QUIET_MS;
+  const onInteraction = () => {
+    lastInteractionMs = Date.now();
+  };
+  if (!isLocalClient) {
+    for (const eventName of ["pointerdown", "keydown", "wheel", "touchstart"]) {
+      window.addEventListener(eventName, onInteraction, {
+        capture: true,
+        passive: true,
+      });
+    }
+  }
+
   let flushScheduled = false;
   const scheduleFlush = () => {
     if (flushScheduled) {
       return;
     }
     flushScheduled = true;
-    setTimeout(() => {
+    const attempt = () => {
+      if (!isQuiet()) {
+        // Still being used: come back later rather than take the frame now.
+        setTimeout(attempt, PERF_CRITICAL_QUIET_MS);
+        return;
+      }
       flushScheduled = false;
       if (!pendingLogs.length && !pendingActivities.length) {
         return;
       }
       post();
-    }, FLUSH_INTERVAL_MS);
+    };
+    setTimeout(attempt, FLUSH_INTERVAL_MS);
   };
 
   const pushLog = (entry) => {
@@ -224,15 +269,35 @@ const setup = () => {
   let consoleProcessScheduled = false;
   // requestIdleCallback is missing on Safari/iOS (our main mobile target), so
   // fall back to setTimeout there; either way each run is time-boxed below.
+  // Named on window rather than exported: the page that needs it is a plain
+  // html file, and it must be able to ask before anything else has loaded.
+  window.__jsenv_perf_critical__ = () => {
+    perfCritical = true;
+  };
+
   const scheduleIdle =
     typeof requestIdleCallback === "function"
       ? (fn) => requestIdleCallback(fn, { timeout: 1000 })
       : (fn) => setTimeout(fn, 0);
+  const truncate = (text) =>
+    typeof text === "string" && text.length > LOG_TEXT_MAX
+      ? `${text.slice(0, LOG_TEXT_MAX)}… (${text.length - LOG_TEXT_MAX} more characters)`
+      : text;
   const formatOne = (captured) => {
+    const formatted = formatConsole(captured.args);
     pushLog({
       level: captured.level,
       ts: captured.ts,
-      ...formatConsole(captured.args),
+      ...formatted,
+      text: truncate(formatted.text),
+      // The styled runs carry the same text a second time (see formatConsole),
+      // so they are cut the same way.
+      segments: formatted.segments
+        ? formatted.segments.map((segment) => ({
+            ...segment,
+            text: truncate(segment.text),
+          }))
+        : undefined,
     });
   };
   const processConsoleQueue = (deadline) => {
@@ -281,122 +346,129 @@ const setup = () => {
     scheduleFlush();
   };
 
-  // Forward console.* while keeping the original behavior intact.
-  const LEVELS = ["log", "info", "warn", "error", "debug"];
-  for (const level of LEVELS) {
-    const original = console[level];
-    if (typeof original !== "function") {
-      continue;
+  // Everything that WATCHES the page — console, errors, activity, requests,
+  // navigations — is what the main client does without (see isLocalClient).
+  if (!isLocalClient) {
+    // Forward console.* while keeping the original behavior intact.
+    const LEVELS = ["log", "info", "warn", "error", "debug"];
+    for (const level of LEVELS) {
+      const original = console[level];
+      if (typeof original !== "function") {
+        continue;
+      }
+      console[level] = (...args) => {
+        original.apply(console, args);
+        captureConsole(level, args);
+      };
     }
-    console[level] = (...args) => {
-      original.apply(console, args);
-      captureConsole(level, args);
-    };
-  }
-  window.addEventListener("error", (event) => {
-    const location = event.filename
-      ? ` (${event.filename}:${event.lineno})`
-      : "";
-    pushLog({ level: "error", text: `${event.message}${location}` });
-  });
-  window.addEventListener("unhandledrejection", (event) => {
-    pushLog({
-      level: "error",
-      text: `Unhandled rejection: ${formatArg(event.reason)}`,
+    window.addEventListener("error", (event) => {
+      const location = event.filename
+        ? ` (${event.filename}:${event.lineno})`
+        : "";
+      pushLog({ level: "error", text: `${event.message}${location}` });
+    });
+    window.addEventListener("unhandledrejection", (event) => {
+      pushLog({
+        level: "error",
+        text: `Unhandled rejection: ${formatArg(event.reason)}`,
+      });
     });
-  });
 
-  // Qualified activity so the dashboard can say what the tab was last doing.
-  // The detail is kept short enough to read inline (e.g. "mousemove: 40/120").
-  window.addEventListener(
-    "click",
-    (event) => recordActivity("click", `${event.clientX}/${event.clientY}`),
-    { passive: true },
-  );
-  window.addEventListener(
-    "keydown",
-    (event) => recordActivity("keydown", event.key),
-    { passive: true },
-  );
-  let lastMove = 0;
-  let lastScroll = 0;
-  window.addEventListener(
-    "mousemove",
-    (event) => {
-      const t = Date.now();
-      if (t - lastMove < CONTINUOUS_THROTTLE_MS) {
-        return;
+    // Qualified activity so the dashboard can say what the tab was last doing.
+    // The detail is kept short enough to read inline (e.g. "mousemove: 40/120").
+    window.addEventListener(
+      "click",
+      (event) => recordActivity("click", `${event.clientX}/${event.clientY}`),
+      { passive: true },
+    );
+    window.addEventListener(
+      "keydown",
+      (event) => recordActivity("keydown", event.key),
+      { passive: true },
+    );
+    let lastMove = 0;
+    let lastScroll = 0;
+    window.addEventListener(
+      "mousemove",
+      (event) => {
+        const t = Date.now();
+        if (t - lastMove < CONTINUOUS_THROTTLE_MS) {
+          return;
+        }
+        lastMove = t;
+        recordActivity("mousemove", `${event.clientX}/${event.clientY}`);
+      },
+      { passive: true },
+    );
+    window.addEventListener(
+      "scroll",
+      () => {
+        const t = Date.now();
+        if (t - lastScroll < CONTINUOUS_THROTTLE_MS) {
+          return;
+        }
+        lastScroll = t;
+        recordActivity("scroll", `${window.scrollX}/${window.scrollY}`);
+      },
+      { passive: true },
+    );
+
+    // Report outgoing HTTP requests (skipping our own internal traffic).
+    const isInternal = (url) => String(url).includes("/.internal/");
+    window.fetch = (input, init) => {
+      const url =
+        typeof input === "string"
+          ? input
+          : input instanceof Request
+            ? input.url
+            : String(input);
+      if (!isInternal(url)) {
+        const method =
+          (init && init.method) ||
+          (input instanceof Request ? input.method : "GET");
+        recordActivity("request", `${method} ${url}`);
       }
-      lastMove = t;
-      recordActivity("mousemove", `${event.clientX}/${event.clientY}`);
-    },
-    { passive: true },
-  );
-  window.addEventListener(
-    "scroll",
-    () => {
-      const t = Date.now();
-      if (t - lastScroll < CONTINUOUS_THROTTLE_MS) {
+      return nativeFetch(input, init);
+    };
+    // SPA navigations (history API + back/forward).
+    const reportNavigation = () =>
+      recordActivity("navigation", window.location.href);
+    const patchHistory = (method) => {
+      const original = window.history[method];
+      if (typeof original !== "function") {
         return;
       }
-      lastScroll = t;
-      recordActivity("scroll", `${window.scrollX}/${window.scrollY}`);
-    },
-    { passive: true },
-  );
+      window.history[method] = (...args) => {
+        const result = original.apply(window.history, args);
+        reportNavigation();
+        return result;
+      };
+    };
+    patchHistory("pushState");
+    patchHistory("replaceState");
+    window.addEventListener("popstate", reportNavigation);
+
+    // Record the page load itself as an activity: after a reload the tab goes
+    // hidden (pagehide on the old page) then loads again here, and without this
+    // the dashboard would only ever show the "hidden" side of a reload. Sent
+    // with the first heartbeat below.
+    recordActivity("load", window.location.href);
+  }
+
   document.addEventListener("visibilitychange", () => {
-    // Spell out the direction so the activity reads meaningfully on its own,
-    // rather than a bare "visibility" whose value you have to interpret.
-    recordActivity(
-      document.visibilityState === "visible"
-        ? "document_becomes_visible"
-        : "document_becomes_hidden",
-    );
+    if (!isLocalClient) {
+      // Spell out the direction so the activity reads meaningfully on its own,
+      // rather than a bare "visibility" whose value you have to interpret.
+      recordActivity(
+        document.visibilityState === "visible"
+          ? "document_becomes_visible"
+          : "document_becomes_hidden",
+      );
+    }
     // push promptly so the dashboard's "active tab" tracks focus changes
     post();
   });
 
-  // Report outgoing HTTP requests (skipping our own internal traffic).
-  const isInternal = (url) => String(url).includes("/.internal/");
-  window.fetch = (input, init) => {
-    const url =
-      typeof input === "string"
-        ? input
-        : input instanceof Request
-          ? input.url
-          : String(input);
-    if (!isInternal(url)) {
-      const method =
-        (init && init.method) ||
-        (input instanceof Request ? input.method : "GET");
-      recordActivity("request", `${method} ${url}`);
-    }
-    return nativeFetch(input, init);
-  };
-  // SPA navigations (history API + back/forward).
-  const reportNavigation = () =>
-    recordActivity("navigation", window.location.href);
-  const patchHistory = (method) => {
-    const original = window.history[method];
-    if (typeof original !== "function") {
-      return;
-    }
-    window.history[method] = (...args) => {
-      const result = original.apply(window.history, args);
-      reportNavigation();
-      return result;
-    };
-  };
-  patchHistory("pushState");
-  patchHistory("replaceState");
-  window.addEventListener("popstate", reportNavigation);
-
-  // Record the page load itself as an activity: after a reload the tab goes
-  // hidden (pagehide on the old page) then loads again here, and without this the
-  // dashboard would only ever show the "hidden" side of a reload. Sent with the
-  // first heartbeat below.
-  recordActivity("load", window.location.href);
-
   // Heartbeat keeps the client "online", refreshes tab info, and lets the server
   // detect a resume.
   post();
@@ -438,6 +510,9 @@ const setup = () => {
     // full reload navigates away before this flushes and surfaces as "load" on
     // the next page; a hot update stays on the page, so this is what records it.
     reload: (event) => {
+      if (isLocalClient) {
+        return; // the main client records no activity
+      }
       const data = event.data || {};
       const reason =
         (typeof data.reason === "string" && data.reason) ||
@@ -486,7 +561,8 @@ const showClientToast = ({ client, reason }) => {
   const link = document.createElement("a");
   link.href = `/.internal/client?id=${encodeURIComponent(client.id)}`;
   link.target = "_blank";
-  link.textContent = "Monitor →";
+  link.rel = "noopener";
+  link.textContent = "Monitor ↗";
   link.style.cssText = "color:#93c5fd;text-decoration:none;font-weight:600";
   el.appendChild(link);
   const close = document.createElement("button");

package/src/plugins/client_monitoring/client/clients_page.html

@@ -249,12 +249,12 @@
       }
 
       const headHtml = `<tr>
-        <th>First seen</th><th>OS</th><th>Browser</th><th>Active tab</th>
+        <th>First seen</th><th>OS</th><th>Browser</th><th>IP</th><th>Active tab</th>
         <th>Last activity</th><th>Logs</th><th></th>
       </tr>`;
       document.getElementById("head").innerHTML = headHtml;
       document.getElementById("head2").innerHTML = headHtml;
-      const COLSPAN = 7;
+      const COLSPAN = 8;
 
       const ago = (ts) => {
         const s = Math.round((Date.now() - ts) / 1000);
@@ -394,11 +394,21 @@
           <a class="monitor" href="/.internal/client?id=${encodeURIComponent(d.id)}">Monitor →</a>
         </div>`;
       };
+      // The ip says how the client reaches the server, which is what tells the
+      // main client (this machine, via localhost) from a device on the network.
+      const ipCell = (d) => {
+        if (!d.ip) {
+          return '<span class="muted">—</span>';
+        }
+        const label = d.local ? "localhost" : d.ip;
+        return `<span title="${escapeHtml(d.ip)}">${escapeHtml(label)}</span>`;
+      };
       const rowHtml = (d) => {
         return `<tr>
           <td>${firstSeenCell(d)}</td>
           <td>${named(d.os)}</td>
           <td>${named(d.runtime)}</td>
+          <td>${ipCell(d)}</td>
           <td>${tabCell(d)}</td>
           <td>${activityCell(d)}</td>
           <td>${d.logCount}</td>
@@ -511,9 +521,7 @@
           return navigablePages;
         }
         try {
-          navigablePages = await (
-            await fetch("/.internal/clients/pages.json")
-          ).json();
+          navigablePages = await (await fetch("/.internal/pages.json")).json();
         } catch {
           navigablePages = [];
         }