@troyio/vite-file-router 0.4.0 → 0.5.0

package/devtools/app.js

@@ -1,143 +1,1546 @@
-const treeElement = document.querySelector("#tree");
-const statusElement = document.querySelector("#status");
-const errorElement = document.querySelector("#error");
-const filterElement = document.querySelector("#filter");
-const toggleElement = document.querySelector("#toggle");
-const fileLabels = {
-  page: "Page",
-  layout: "Layout",
-  loading: "Loading",
-  notFound: "Not found",
-  error: "Error boundary",
-};
-
-let manifest;
-let manifestSnapshot;
-let expanded = false;
-let expansionTouched = false;
-let refreshing = false;
-
-function createElement(tag, className, text) {
-  const element = document.createElement(tag);
-  if (className) element.className = className;
-  if (text !== undefined) element.textContent = text;
-  return element;
-}
-
-function renderNode(node, query, depth = 0) {
-  const children = node.children
-    .map((child) => renderNode(child, query, depth + 1))
-    .filter(Boolean);
-  const fileEntries = Object.entries(node.files ?? {});
-  const searchText = [
-    node.fullPath,
-    ...node.params,
-    ...fileEntries.flatMap(([kind, file]) => [kind, file]),
-  ]
-    .join(" ")
-    .toLowerCase();
-  const matches = !query || searchText.includes(query);
-  if (!matches && children.length === 0) return null;
-
-  const item = createElement("li", "route-node");
-  const details = createElement("details", "route-details");
-  details.open = query
-    ? true
-    : expansionTouched
-      ? expanded
-      : depth < 2;
-  const summary = createElement("summary", "route-summary");
-  const routePath = node.routeGroup
-    ? `${node.fullPath} (route group)`
-    : node.fullPath;
-  summary.append(createElement("code", "route-path", routePath));
-
-  if (node.routeGroup) {
-    summary.append(createElement("span", "badge group-badge", "group"));
-  }
-  for (const param of node.params) {
-    const optional = node.optionalParams?.includes(param);
-    summary.append(
-      createElement(
-        "span",
-        `badge ${optional ? "optional-badge" : "param-badge"}`,
-        optional ? `${param}?` : param,
-      ),
-    );
-  }
-  details.append(summary);
-
-  if (fileEntries.length) {
-    const files = createElement("ul", "file-list");
-    for (const [kind, file] of fileEntries) {
-      const row = createElement("li", "file-row");
-      row.append(
-        createElement("span", "file-kind", fileLabels[kind] ?? kind),
-        createElement("code", "file-path", file),
-      );
-      files.append(row);
-    }
-    details.append(files);
-  }
-
-  if (children.length) {
-    const childList = createElement("ul", "route-list");
-    childList.append(...children);
-    details.append(childList);
-  }
-  item.append(details);
-  return item;
-}
-
-function render() {
-  if (!manifest) return;
-  const query = filterElement.value.trim().toLowerCase();
-  const root = renderNode(manifest, query);
-  treeElement.replaceChildren();
-
-  if (!root) {
-    treeElement.append(createElement("p", "empty", "No routes match this filter."));
-  } else {
-    const list = createElement("ul", "route-list root-list");
-    list.append(root);
-    treeElement.append(list);
-  }
-  toggleElement.textContent = expanded ? "Collapse all" : "Expand all";
-  toggleElement.disabled = Boolean(query);
-}
-
-async function refresh() {
-  if (refreshing) return;
-  refreshing = true;
-  try {
-    const response = await fetch("/__vite-file-router-data", {
-      cache: "no-store",
-    });
-    if (!response.ok) throw new Error(`Request failed (${response.status})`);
-    const nextManifest = await response.json();
-    const nextSnapshot = JSON.stringify(nextManifest);
-    const manifestChanged = nextSnapshot !== manifestSnapshot;
-    manifest = nextManifest;
-    manifestSnapshot = nextSnapshot;
-    errorElement.hidden = true;
-    statusElement.textContent = "Route data refreshes automatically.";
-    if (manifestChanged) render();
-  } catch (error) {
-    errorElement.textContent = `Unable to load routes: ${error.message}`;
-    errorElement.hidden = false;
-    statusElement.textContent = "Route data is unavailable.";
-  } finally {
-    refreshing = false;
-  }
-}
-
-filterElement.addEventListener("input", render);
-document.querySelector("#refresh").addEventListener("click", refresh);
-toggleElement.addEventListener("click", () => {
-  expansionTouched = true;
-  expanded = !expanded;
-  render();
-});
-
-refresh();
-window.setInterval(refresh, 2000);
+const DATA_URL = "/__vite-file-router-data";
+const EVENTS_URL = "/__vite-file-router-events";
+const MATCH_URL = "/__vite-file-router-match";
+const OPEN_URL = "/__open-in-editor";
+const NAVIGATE_URL = "/__vite-file-router-navigate";
+const RECENT_PARAMS_KEY = "vite-file-router:recent-params";
+const TESTER_STORAGE_KEY = "vite-file-router:tester-url";
+
+const $ = (selector) => document.querySelector(selector);
+const treeElement = $("#tree");
+const statsElement = $("#stats");
+const errorElement = $("#error");
+const conflictsElement = $("#conflicts");
+const warningsElement = $("#warnings");
+const filterElement = $("#filter");
+const toggleElement = $("#toggle");
+const refreshElement = $("#refresh");
+const liveElement = $("#live");
+const liveLabelElement = $("#live-label");
+const testerForm = $("#tester");
+const testerInput = $("#tester-input");
+const testerResult = $("#tester-result");
+const detailsElement = $("#details");
+const currentElement = $("#current");
+const currentSubtitle = $("#current-subtitle");
+const tabPicker = $("#tab-picker");
+const inspectTab = $("#tab-inspect");
+const timelineTab = $("#tab-timeline");
+const inspectView = $("#view-inspect");
+const timelineView = $("#view-timeline");
+const timelineCount = $("#timeline-count");
+const timelineElement = $("#timeline");
+const timelineFilter = $("#timeline-filter");
+const timelineTypes = $("#timeline-types");
+const timelineClear = $("#timeline-clear");
+const timelineRoutePill = $("#timeline-route");
+
+const MAX_TIMELINE = 200;
+const SLOW_CALL_MS = 500;
+
+const FILE_KINDS = [
+  ["page", "Page", "page"],
+  ["layout", "Layout", "layout"],
+  ["loading", "Loading", "loading"],
+  ["error", "Error boundary", "error"],
+  ["notFound", "Not found", "404"],
+  ["loader", "Loader", "loader"],
+  ["action", "Action", "action"],
+  ["middleware", "Middleware", "mw"],
+];
+
+const state = {
+  data: undefined,
+  snapshot: undefined,
+  nodes: new Map(),
+  collapsed: new Set(),
+  selected: "0",
+  match: undefined,
+  matchedKeys: new Set(),
+  // App tabs reported by the dev-only client in `virtual:routes`.
+  tabs: [],
+  followedTab: undefined,
+  currentKeys: new Set(),
+  // Loader, action, and revalidation calls, oldest first.
+  activity: [],
+  clearedThrough: 0,
+  unseen: 0,
+  timelineType: "all",
+  // Exact route ID the timeline is narrowed to, from a route's details.
+  timelineRoute: undefined,
+  openCalls: new Set(),
+  // Signature of the slow-loader warnings last rendered.
+  slowSignature: "",
+};
+
+// ---------------------------------------------------------------------------
+// Helpers
+
+function el(tag, attributes = {}, ...children) {
+  const element = document.createElement(tag);
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === undefined || value === false) continue;
+    if (name === "class") element.className = value;
+    else if (name.startsWith("on")) element.addEventListener(name.slice(2), value);
+    else element.setAttribute(name, value === true ? "" : value);
+  }
+  element.append(...children.flat().filter((child) => child !== undefined && child !== null));
+  return element;
+}
+
+function icon(name) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("aria-hidden", "true");
+  const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
+  use.setAttribute("href", `#icon-${name}`);
+  svg.append(use);
+  return svg;
+}
+
+let toastTimer;
+function toast(message) {
+  document.querySelector(".toast")?.remove();
+  const element = el("div", { class: "toast", role: "status" }, message);
+  document.body.append(element);
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => element.remove(), 2200);
+}
+
+function readStorage(key) {
+  try {
+    return localStorage.getItem(key) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+function writeStorage(key, value) {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    // Storage can be unavailable in sandboxed frames; the tester still works.
+  }
+}
+
+function firstFile(node) {
+  const file = Object.values(node.files)[0];
+  if (file) return file;
+  for (const child of node.children) {
+    const descendant = firstFile(child);
+    if (descendant) return descendant;
+  }
+  return undefined;
+}
+
+/**
+ * The manifest omits route-group names from URLs, so read the directory name
+ * from a file inside the group: it sits at the group's depth below the routes
+ * directory.
+ */
+function groupName(node) {
+  const file = firstFile(node);
+  const key = [...state.nodes].find(([, entry]) => entry.node === node)?.[0];
+  if (!file || !key || !state.data) return "(group)";
+  const depth = key.split(".").length - 1;
+  const base = state.data.directory.split("/").filter(Boolean).length;
+  return file.split("/")[base + depth - 1] ?? "(group)";
+}
+
+function segmentLabel(node, key) {
+  if (key === "0") return [el("span", { class: "slash" }, "/")];
+  if (node.routeGroup) return [el("span", { class: "group" }, groupName(node))];
+  const segment = node.segment;
+  const className = segment.endsWith("?")
+    ? "optional"
+    : segment.startsWith(":") || segment === "*"
+      ? "param"
+      : undefined;
+  return [el("span", { class: "slash" }, "/"), el("span", { class: className }, segment)];
+}
+
+function sameNode(node, segment) {
+  return (
+    node.fullPath === segment.fullPath &&
+    node.routeGroup === segment.routeGroup &&
+    JSON.stringify(node.files) === JSON.stringify(segment.files)
+  );
+}
+
+function examplePath(fullPath) {
+  return (
+    fullPath
+      .split("/")
+      .filter((segment) => !segment.endsWith("?"))
+      .map((segment) => (segment === "*" ? "any/path" : segment.startsWith(":") ? "1" : segment))
+      .join("/") || "/"
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Editor integration
+
+async function openInEditor(file, button) {
+  if (!state.data) return;
+  const absolute = `${state.data.projectRoot.replace(/[\\/]$/, "")}/${file}`;
+  try {
+    const response = await fetch(`${OPEN_URL}?file=${encodeURIComponent(absolute)}`);
+    if (!response.ok) throw new Error(`status ${response.status}`);
+    button?.classList.add("opened");
+    setTimeout(() => button?.classList.remove("opened"), 900);
+    toast(`Opened ${file.split("/").pop()} in your editor`);
+  } catch (error) {
+    toast(`Couldn't open the file: ${error.message}`);
+  }
+}
+
+function fileLink(file) {
+  const button = el(
+    "button",
+    {
+      class: "file-link",
+      type: "button",
+      title: `Open ${file} in your editor`,
+      onclick: () => openInEditor(file, button),
+    },
+    // `direction: rtl` keeps the filename visible when the path is truncated;
+    // the bidi isolate stops punctuation from being reordered.
+    el("span", {}, `⁨${file}⁩`),
+    icon("open"),
+  );
+  return button;
+}
+
+// ---------------------------------------------------------------------------
+// Tree
+
+function indexNodes(node, key = "0", parent) {
+  state.nodes.set(key, { node, parent });
+  node.children.forEach((child, index) => indexNodes(child, `${key}.${index}`, key));
+}
+
+function searchText(node) {
+  return [
+    node.fullPath,
+    node.routeGroup ? groupName(node) : "",
+    ...node.params,
+    ...Object.entries(node.files).flat(),
+  ]
+    .join(" ")
+    .toLowerCase();
+}
+
+function renderNode(node, key, query) {
+  const childItems = node.children
+    .map((child, index) => renderNode(child, `${key}.${index}`, query))
+    .filter(Boolean);
+  if (query && !searchText(node).includes(query) && childItems.length === 0) return null;
+
+  const hasChildren = node.children.length > 0;
+  const expanded = Boolean(query) || !state.collapsed.has(key);
+  const fileKinds = FILE_KINDS.filter(([kind]) => node.files[kind]);
+
+  const row = el(
+    "div",
+    {
+      class: `row${state.matchedKeys.has(key) ? " matched" : ""}${state.currentKeys.has(key) ? " current" : ""}`,
+      role: "treeitem",
+      tabindex: state.selected === key ? "0" : "-1",
+      "aria-selected": String(state.selected === key),
+      "aria-expanded": hasChildren ? String(expanded) : undefined,
+      "data-key": key,
+      onclick: () => select(key),
+      onkeydown: (event) => onRowKey(event, key, hasChildren, expanded),
+    },
+    hasChildren
+      ? el(
+          "button",
+          {
+            class: "twisty",
+            type: "button",
+            tabindex: "-1",
+            "aria-label": expanded ? "Collapse" : "Expand",
+            "aria-expanded": String(expanded),
+            onclick: (event) => {
+              event.stopPropagation();
+              toggle(key);
+            },
+          },
+          icon("chevron"),
+        )
+      : el("span", { class: "twisty-spacer" }),
+    el("span", { class: "segment" }, segmentLabel(node, key)),
+    key !== "0" && !node.routeGroup && node.fullPath !== `/${node.segment}`
+      ? el("span", { class: "full-path" }, node.fullPath)
+      : undefined,
+    el(
+      "span",
+      { class: "row-files" },
+      node.routeGroup ? el("span", { class: "chip chip-group" }, "group") : undefined,
+      warningChip(key),
+      rowOpenButton(node, key),
+      fileKinds.map(([kind, label, short]) =>
+        el("span", { class: `chip chip-${kind}`, title: `${label}: ${node.files[kind]}` }, short),
+      ),
+    ),
+  );
+
+  return el(
+    "li",
+    { role: "none" },
+    row,
+    hasChildren && expanded ? el("ul", { role: "group" }, childItems) : undefined,
+  );
+}
+
+function renderTree() {
+  const query = filterElement.value.trim().toLowerCase();
+  const root = state.data && renderNode(state.data.manifest, "0", query);
+  treeElement.replaceChildren(
+    root
+      ? el("ul", { role: "none" }, root)
+      : el("p", { class: "empty" }, state.data ? "No routes match this filter." : "Loading routes…"),
+  );
+
+  const allExpanded = state.collapsed.size === 0;
+  toggleElement.replaceChildren(icon(allExpanded ? "collapse" : "expand"));
+  toggleElement.setAttribute("aria-label", allExpanded ? "Collapse all" : "Expand all");
+  toggleElement.title = allExpanded ? "Collapse all" : "Expand all";
+  toggleElement.disabled = Boolean(query);
+}
+
+function toggle(key) {
+  if (state.collapsed.has(key)) state.collapsed.delete(key);
+  else state.collapsed.add(key);
+  renderTree();
+  focusRow(key);
+}
+
+function select(key) {
+  state.selected = key;
+  renderTree();
+  renderDetails();
+  focusRow(key);
+}
+
+function focusRow(key) {
+  treeElement.querySelector(`[data-key="${CSS.escape(key)}"]`)?.focus();
+}
+
+function onRowKey(event, key, hasChildren, expanded) {
+  const rows = [...treeElement.querySelectorAll(".row")];
+  const index = rows.findIndex((row) => row.dataset.key === key);
+  const move = (offset) => {
+    const target = rows[index + offset];
+    if (target) select(target.dataset.key);
+  };
+  if (event.key === "ArrowDown") move(1);
+  else if (event.key === "ArrowUp") move(-1);
+  else if (event.key === "ArrowRight" && hasChildren && !expanded) toggle(key);
+  else if (event.key === "ArrowLeft" && hasChildren && expanded) toggle(key);
+  else if (event.key === "ArrowLeft") {
+    const parent = state.nodes.get(key)?.parent;
+    if (parent) select(parent);
+  } else return;
+  event.preventDefault();
+}
+
+// ---------------------------------------------------------------------------
+// Summary, conflicts, and details
+
+function renderStats() {
+  const counts = { pages: 0, dynamic: 0, layouts: 0, loaders: 0 };
+  for (const { node } of state.nodes.values()) {
+    if (node.files.page) counts.pages++;
+    if (node.files.page && /[:*]/.test(node.fullPath)) counts.dynamic++;
+    if (node.files.layout) counts.layouts++;
+    if (node.files.loader) counts.loaders++;
+  }
+  statsElement.replaceChildren(
+    ...[
+      [counts.pages, counts.pages === 1 ? "page" : "pages"],
+      [counts.dynamic, "dynamic"],
+      [counts.layouts, counts.layouts === 1 ? "layout" : "layouts"],
+      [counts.loaders, counts.loaders === 1 ? "loader" : "loaders"],
+    ].map(([value, label]) => el("div", { class: "stat" }, el("dt", {}, label), el("dd", {}, String(value)))),
+  );
+}
+
+function renderConflicts() {
+  const conflicts = state.data?.conflicts ?? [];
+  conflictsElement.hidden = conflicts.length === 0;
+  if (!conflicts.length) return;
+  conflictsElement.replaceChildren(
+    el("h2", {}, conflicts.length === 1 ? "1 route conflict" : `${conflicts.length} route conflicts`),
+    el("p", {}, "These pages resolve to the same URL pattern. Rename or move one of them in each group."),
+    ...conflicts.map(({ routePath, files }) =>
+      el(
+        "div",
+        { class: "conflict" },
+        el("code", {}, routePath),
+        el("div", { class: "facts" }, files.map((file) => fileLink(file))),
+      ),
+    ),
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Missing-file warnings
+
+/**
+ * Loaders the timeline measured as slow. Loading files only cover lazy page
+ * code, so these suggest pending UI instead of another file.
+ */
+function slowLoaderWarnings() {
+  const slowest = new Map();
+  for (const call of state.activity) {
+    if (call.id <= state.clearedThrough) continue;
+    if (call.type !== "loader" || !(call.duration >= SLOW_CALL_MS)) continue;
+    if (!(slowest.get(call.routeId) >= call.duration)) slowest.set(call.routeId, call.duration);
+  }
+  return [...slowest].flatMap(([routeId, duration]) => {
+    const found = nodeForRouteId(routeId);
+    if (!found) return [];
+    return [
+      {
+        kind: "slow-loader",
+        severity: "info",
+        key: found.key,
+        fullPath: found.node.fullPath,
+        message: `This loader took up to ${formatDuration(duration)}. Loading files don't show while loaders run, so show pending UI with useNavigation() in a layout.`,
+        files: found.node.files.loader ? [found.node.files.loader] : [],
+      },
+    ];
+  });
+}
+
+function allWarnings() {
+  return [...(state.data?.warnings ?? []), ...slowLoaderWarnings()];
+}
+
+function warningsFor(key) {
+  return allWarnings().filter((warning) => warning.key === key);
+}
+
+function warningChip(key) {
+  const warnings = warningsFor(key);
+  if (!warnings.length) return undefined;
+  const severe = warnings.some((warning) => warning.severity === "warning");
+  return el(
+    "span",
+    {
+      class: `chip chip-warn${severe ? "" : " chip-hint"}`,
+      title: warnings.map((warning) => warning.message).join("\n"),
+    },
+    severe ? "warn" : "hint",
+  );
+}
+
+function renderWarning(warning, withRoute = true) {
+  return el(
+    "li",
+    { class: `warning warning-${warning.severity}` },
+    el(
+      "div",
+      { class: "warning-head" },
+      el("span", { class: `chip chip-warn${warning.severity === "warning" ? "" : " chip-hint"}` }, warning.severity === "warning" ? "warn" : "hint"),
+      withRoute
+        ? el(
+            "button",
+            { class: "link-button warning-route", type: "button", onclick: () => revealRoute(warning.key) },
+            warning.fullPath,
+          )
+        : undefined,
+    ),
+    el("p", {}, warning.message),
+    warning.files.length ? el("div", { class: "facts" }, warning.files.map((file) => fileLink(file))) : undefined,
+  );
+}
+
+function revealRoute(key) {
+  if (!state.nodes.has(key)) return;
+  for (let parent = state.nodes.get(key)?.parent; parent; parent = state.nodes.get(parent)?.parent) {
+    state.collapsed.delete(parent);
+  }
+  showView("inspect");
+  select(key);
+}
+
+function renderWarnings() {
+  const warnings = allWarnings();
+  warningsElement.hidden = warnings.length === 0;
+  if (!warnings.length) return;
+  const severe = warnings.filter((warning) => warning.severity === "warning").length;
+  const open = warningsElement.querySelector("details")?.open ?? false;
+  warningsElement.replaceChildren(
+    el(
+      "details",
+      { open: open || undefined },
+      el(
+        "summary",
+        {},
+        el("h2", {}, warnings.length === 1 ? "1 route warning" : `${warnings.length} route warnings`),
+        el(
+          "span",
+          { class: "muted" },
+          severe === warnings.length
+            ? "Missing files and exports"
+            : [
+                severe ? `${severe} warning${severe === 1 ? "" : "s"}` : "",
+                `${warnings.length - severe} hint${warnings.length - severe === 1 ? "" : "s"}`,
+              ]
+                .filter(Boolean)
+                .join(", "),
+        ),
+      ),
+      el("ul", { class: "warning-list" }, warnings.map((warning) => renderWarning(warning))),
+    ),
+  );
+}
+
+/** Re-renders warnings when the timeline finds a new slow loader. */
+function refreshSlowWarnings() {
+  const signature = slowLoaderWarnings()
+    .map((warning) => `${warning.key}:${warning.message}`)
+    .join("|");
+  if (signature === state.slowSignature) return;
+  state.slowSignature = signature;
+  renderWarnings();
+  renderTree();
+  renderDetails();
+}
+
+function fact(label, ...content) {
+  return el("div", {}, el("dt", {}, label), el("dd", {}, ...content));
+}
+
+function renderDetails() {
+  const entry = state.nodes.get(state.selected) ?? state.nodes.get("0");
+  if (!entry) {
+    detailsElement.replaceChildren(el("p", { class: "empty" }, "Select a route to see its files."));
+    return;
+  }
+  const { node } = entry;
+  const files = FILE_KINDS.filter(([kind]) => node.files[kind]);
+  const params = [];
+  for (let key = state.selected; key; key = state.nodes.get(key)?.parent) {
+    const current = state.nodes.get(key)?.node;
+    current?.params.forEach((param) =>
+      params.unshift({ param, optional: current.optionalParams?.includes(param) }),
+    );
+  }
+
+  detailsElement.replaceChildren(
+    el(
+      "div",
+      { class: "details-body" },
+      el(
+        "div",
+        { class: "details-path" },
+        node.routeGroup ? `${node.fullPath}  ·  ${groupName(node)}` : node.fullPath,
+      ),
+      warningsFor(state.selected).length
+        ? el(
+            "ul",
+            { class: "warning-list" },
+            warningsFor(state.selected).map((warning) => renderWarning(warning, false)),
+          )
+        : undefined,
+      el(
+        "dl",
+        { class: "facts" },
+        node.routeGroup
+          ? fact("Route group", el("span", { class: "muted" }, "Organizes files without adding a URL segment."))
+          : undefined,
+        params.length
+          ? fact(
+              "Params",
+              el(
+                "div",
+                { class: "params" },
+                params.map(({ param, optional }) =>
+                  el("span", { class: "param-pill" }, el("span", {}, optional ? `${param}?` : param)),
+                ),
+              ),
+            )
+          : undefined,
+        files.length
+          ? files.map(([kind, label]) => fact(label, fileLink(node.files[kind])))
+          : fact("Files", el("span", { class: "muted" }, "No route files in this directory.")),
+        node.files.page
+          ? fact(
+              "Try it",
+              el(
+                "button",
+                {
+                  class: "link-button",
+                  type: "button",
+                  onclick: () => {
+                    testerInput.value = examplePath(node.fullPath);
+                    runMatch();
+                  },
+                },
+                `Test ${examplePath(node.fullPath)}`,
+              ),
+            )
+          : undefined,
+        node.files.page ? fact("Open in app", openForm(node, params)) : undefined,
+      ),
+      dataStats(node),
+    ),
+  );
+}
+
+// ---------------------------------------------------------------------------
+// URL tester
+
+function keysForChain(chain) {
+  const keys = new Set();
+  if (!state.data || !chain.length) return keys;
+  let key = "0";
+  let node = state.data.manifest;
+  if (!sameNode(node, chain[0])) return keys;
+  keys.add(key);
+  for (const segment of chain.slice(1)) {
+    const index = node.children.findIndex((child) => sameNode(child, segment));
+    if (index === -1) break;
+    key = `${key}.${index}`;
+    node = node.children[index];
+    keys.add(key);
+  }
+  return keys;
+}
+
+function renderMatch() {
+  const result = state.match;
+  if (!result) {
+    testerResult.replaceChildren();
+    return;
+  }
+  if (result.failure) {
+    testerResult.replaceChildren(el("p", { class: "muted" }, result.failure));
+    return;
+  }
+  if (!result.matched) {
+    testerResult.replaceChildren(
+      el(
+        "div",
+        { class: "result-status" },
+        el("span", { class: "chip chip-error" }, "No match"),
+        el("span", { class: "result-pathname" }, result.pathname),
+      ),
+      el("p", { class: "muted" }, "No route handles this URL, and there's no not-found page above it."),
+    );
+    return;
+  }
+
+  const params = Object.entries(result.params);
+  const keys = [...keysForChain(result.chain)];
+  testerResult.replaceChildren(
+    el(
+      "div",
+      { class: "result-status" },
+      result.notFound
+        ? el("span", { class: "chip chip-notFound" }, "Not-found page")
+        : el("span", { class: "chip chip-loader" }, "Matched"),
+      el("span", { class: "result-pathname" }, result.pathname),
+      testedUrl() ? el("span", { class: "result-open" }, openButton(testedUrl())) : undefined,
+    ),
+    el(
+      "div",
+      { class: "crumbs", "aria-label": "Matched routes" },
+      result.chain.flatMap((segment, index) => {
+        const key = keys[index];
+        const label =
+          index === 0
+            ? "/"
+            : segment.routeGroup
+              ? groupName(state.nodes.get(key)?.node ?? segment)
+              : segment.segment;
+        return [
+          index > 0 ? el("span", { class: "crumb-sep", "aria-hidden": "true" }, "›") : undefined,
+          el(
+            "button",
+            { class: "crumb", type: "button", onclick: () => key && select(key) },
+            label,
+          ),
+        ];
+      }),
+    ),
+    el(
+      "dl",
+      { class: "facts" },
+      params.length
+        ? fact(
+            "Params",
+            el(
+              "div",
+              { class: "params" },
+              params.map(([name, value]) =>
+                el(
+                  "span",
+                  { class: "param-pill" },
+                  el("span", {}, name),
+                  value === undefined
+                    ? el("span", { class: "missing" }, "undefined")
+                    : el("span", {}, value),
+                ),
+              ),
+            ),
+          )
+        : undefined,
+      result.page ? fact("Page", fileLink(result.page)) : undefined,
+      result.notFound ? fact("Not-found page", fileLink(result.notFound)) : undefined,
+      result.layouts.length ? fact("Layouts, outermost first", result.layouts.map(fileLink)) : undefined,
+      result.middleware?.length ? fact("Middleware, outermost first", result.middleware.map(fileLink)) : undefined,
+      result.loaders.length ? fact("Loaders", result.loaders.map(fileLink)) : undefined,
+      result.loading ? fact("Loading fallback", fileLink(result.loading)) : undefined,
+      result.error ? fact("Error boundary", fileLink(result.error)) : undefined,
+    ),
+  );
+}
+
+/** The tester's URL as a same-origin path, or undefined. */
+function testedUrl() {
+  const url = testerInput.value.trim();
+  if (!url) return undefined;
+  const target = url.startsWith("/") ? url : /^[a-z]+:/i.test(url) ? undefined : `/${url}`;
+  return target && !target.startsWith("//") ? target : undefined;
+}
+
+async function runMatch() {
+  const url = testerInput.value.trim();
+  writeStorage(TESTER_STORAGE_KEY, url);
+  if (!url) {
+    state.match = undefined;
+    state.matchedKeys = new Set();
+    renderMatch();
+    renderTree();
+    return;
+  }
+  const target = url.startsWith("/") || /^[a-z]+:/i.test(url) ? url : `/${url}`;
+  try {
+    const response = await fetch(`${MATCH_URL}?url=${encodeURIComponent(target)}`, { cache: "no-store" });
+    if (!response.ok) throw new Error(`Request failed (${response.status})`);
+    state.match = await response.json();
+    state.matchedKeys = state.match.matched ? keysForChain(state.match.chain) : new Set();
+    for (const key of state.matchedKeys) {
+      for (let parent = state.nodes.get(key)?.parent; parent; parent = state.nodes.get(parent)?.parent) {
+        state.collapsed.delete(parent);
+      }
+    }
+  } catch (error) {
+    state.match = { failure: `Couldn't match the URL: ${error.message}` };
+    state.matchedKeys = new Set();
+  }
+  renderMatch();
+  renderTree();
+}
+
+// ---------------------------------------------------------------------------
+// Data and live updates
+
+// ---------------------------------------------------------------------------
+// Current page
+
+function followedTab() {
+  return state.tabs.find((tab) => tab.id === state.followedTab) ?? state.tabs[0];
+}
+
+function updateCurrentKeys() {
+  const tab = followedTab();
+  state.currentKeys =
+    tab?.match?.matched && state.data ? keysForChain(tab.match.chain) : new Set();
+}
+
+function renderCurrent() {
+  const tab = followedTab();
+  tabPicker.hidden = state.tabs.length < 2;
+  tabPicker.replaceChildren(
+    ...state.tabs.map((item, index) =>
+      el(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": String(item === tab),
+          title: item.url,
+          onclick: () => {
+            state.followedTab = item.id;
+            updateCurrentKeys();
+            renderCurrent();
+            renderTree();
+          },
+        },
+        item.title || `Tab ${index + 1}`,
+      ),
+    ),
+  );
+
+  if (!tab) {
+    currentSubtitle.textContent = "Follows the route your app is showing.";
+    currentElement.replaceChildren(
+      el("p", { class: "current-empty" }, "Open your app in a browser tab to follow its current route."),
+    );
+    return;
+  }
+
+  currentSubtitle.textContent =
+    state.tabs.length > 1
+      ? `${state.tabs.length} app tabs are open. Pick one to follow.`
+      : "Updates as your app navigates.";
+  const { match } = tab;
+  const params = match.matched ? Object.entries(match.params) : [];
+  currentElement.replaceChildren(
+    el(
+      "div",
+      { class: "current-url" },
+      el("span", { class: "current-dot", "aria-hidden": "true" }),
+      el("code", { title: tab.url }, tab.url),
+    ),
+    match.matched
+      ? el(
+          "dl",
+          { class: "facts" },
+          params.length
+            ? fact(
+                "Params",
+                el(
+                  "div",
+                  { class: "params" },
+                  params.map(([name, value]) =>
+                    el(
+                      "span",
+                      { class: "param-pill" },
+                      el("span", {}, name),
+                      value === undefined
+                        ? el("span", { class: "missing" }, "undefined")
+                        : el("span", {}, value),
+                    ),
+                  ),
+                ),
+              )
+            : undefined,
+          match.page ? fact("Page", fileLink(match.page)) : undefined,
+          match.notFound ? fact("Not-found page", fileLink(match.notFound)) : undefined,
+        )
+      : el("p", { class: "muted" }, "No route matches this URL."),
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Open in app
+
+/**
+ * Builds a URL for a route pattern with the same rules as `routePath()`:
+ * required params can't be empty, optional ones are dropped when empty (and
+ * then no later param may be given), and splats keep their slashes.
+ */
+function buildPath(fullPath, values) {
+  let omitted;
+  const segments = [];
+  for (const segment of fullPath.split("/").filter(Boolean)) {
+    if (segment === "*") {
+      const value = (values["*"] ?? "").trim();
+      if (value && omitted) throw new Error(`Fill in "${omitted}" before the rest of the path.`);
+      if (value) segments.push(value.replace(/^\/+/, "").split("/").map(encodeURIComponent).join("/"));
+      continue;
+    }
+    if (!segment.startsWith(":")) {
+      segments.push(segment);
+      continue;
+    }
+    const optional = segment.endsWith("?");
+    const name = segment.slice(1, optional ? -1 : undefined);
+    const value = (values[name] ?? "").trim();
+    if (!value) {
+      if (!optional) throw new Error(`Fill in "${name}".`);
+      omitted ??= name;
+      continue;
+    }
+    if (omitted) throw new Error(`Fill in "${omitted}" before "${name}".`);
+    segments.push(encodeURIComponent(value));
+  }
+  return `/${segments.join("/")}`;
+}
+
+function readRecentParams() {
+  try {
+    return JSON.parse(readStorage(RECENT_PARAMS_KEY) || "{}") ?? {};
+  } catch {
+    return {};
+  }
+}
+
+function rememberParams(fullPath, values) {
+  const recent = readRecentParams();
+  delete recent[fullPath];
+  recent[fullPath] = values;
+  const entries = Object.entries(recent).slice(-50);
+  writeStorage(RECENT_PARAMS_KEY, JSON.stringify(Object.fromEntries(entries)));
+}
+
+function openTarget() {
+  const tab = followedTab();
+  return tab ? `Open in ${tab.title || "app"}` : "Open in new tab";
+}
+
+async function openInApp(url) {
+  const tab = followedTab();
+  if (!tab) {
+    window.open(url, "_blank", "noopener");
+    toast(`Opened ${url} in a new tab`);
+    return;
+  }
+  try {
+    const response = await fetch(NAVIGATE_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ tabId: tab.id, url }),
+    });
+    if (!response.ok) throw new Error((await response.text()) || `status ${response.status}`);
+    toast(`Opened ${url} in ${tab.title || "your app"}`);
+  } catch (error) {
+    toast(`Couldn't open the page: ${error.message}`);
+  }
+}
+
+function openButton(url) {
+  return el(
+    "button",
+    { class: "button button-quiet", type: "button", onclick: () => openInApp(url) },
+    icon("go"),
+    openTarget(),
+  );
+}
+
+/** "Open in app" for a route: a button, or a form when it has params. */
+function openForm(node, params) {
+  if (!params.length) return openButton(node.fullPath);
+  const saved = readRecentParams()[node.fullPath] ?? {};
+  const message = el("p", { class: "form-error", role: "alert", hidden: true });
+  const inputs = params.map(({ param, optional }) =>
+    el(
+      "label",
+      { class: "param-field" },
+      el(
+        "span",
+        {},
+        param === "*" ? "rest of path" : param,
+        optional ? el("span", { class: "muted" }, " optional") : undefined,
+      ),
+      el("input", {
+        name: param,
+        type: "text",
+        value: saved[param] ?? "",
+        placeholder: param === "*" ? "a/b/c" : optional ? "" : "required",
+        autocomplete: "off",
+        spellcheck: "false",
+      }),
+    ),
+  );
+  const form = el(
+    "form",
+    {
+      class: "open-form",
+      id: "open-form",
+      onsubmit: (event) => {
+        event.preventDefault();
+        const values = Object.fromEntries(new FormData(form));
+        try {
+          const url = buildPath(node.fullPath, values);
+          message.hidden = true;
+          rememberParams(node.fullPath, values);
+          openInApp(url);
+        } catch (error) {
+          message.textContent = error.message;
+          message.hidden = false;
+        }
+      },
+    },
+    inputs,
+    message,
+    el("button", { class: "button button-quiet", type: "submit" }, icon("go"), openTarget()),
+  );
+  return form;
+}
+
+/** The tree row's open button: navigates directly, or shows the params form. */
+function rowOpenButton(node, key) {
+  if (!node.files.page) return undefined;
+  const dynamic = /(^|\/)(:|\*)/.test(node.fullPath);
+  return el(
+    "button",
+    {
+      class: "row-open",
+      type: "button",
+      tabindex: "-1",
+      title: dynamic ? "Fill in params to open this route" : `${openTarget()}: ${node.fullPath}`,
+      "aria-label": dynamic ? "Fill in params to open this route" : `${openTarget()}: ${node.fullPath}`,
+      onclick: (event) => {
+        event.stopPropagation();
+        if (!dynamic) {
+          openInApp(node.fullPath);
+          return;
+        }
+        showView("inspect");
+        select(key);
+        document.querySelector("#open-form input")?.focus();
+      },
+    },
+    icon("go"),
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Loader and action timeline
+
+function nodeForRouteId(routeId) {
+  const directory = routeId.replace(/^file-route:/, "");
+  for (const [key, { node }] of state.nodes) {
+    const file = node.files.loader ?? node.files.action ?? Object.values(node.files)[0];
+    if (file && file.slice(0, file.lastIndexOf("/")) === directory) return { key, node };
+  }
+  return undefined;
+}
+
+function routeLabel(routeId) {
+  const found = nodeForRouteId(routeId);
+  if (!found) return routeId.replace(/^file-route:/, "");
+  return found.node.routeGroup ? `${found.node.fullPath} (${groupName(found.node)})` : found.node.fullPath;
+}
+
+function shortUrl(url) {
+  if (!url) return "";
+  try {
+    const parsed = new URL(url);
+    return parsed.pathname + parsed.search;
+  } catch {
+    return url;
+  }
+}
+
+function formatTime(timestamp) {
+  const date = new Date(timestamp);
+  return `${date.toLocaleTimeString([], { hour12: false })}.${String(date.getMilliseconds()).padStart(3, "0")}`;
+}
+
+function formatDuration(duration) {
+  if (duration === undefined) return "";
+  return duration < 10 ? `${duration.toFixed(1)} ms` : `${Math.round(duration)} ms`;
+}
+
+function outcomeChip(call) {
+  if (call.type === "revalidate") {
+    return call.decision
+      ? el("span", { class: "chip chip-loader" }, "revalidate")
+      : el("span", { class: "chip chip-skipped" }, "skipped");
+  }
+  switch (call.outcome) {
+    case "redirect":
+      return el("span", { class: "chip chip-loading" }, `${call.status} redirect`);
+    case "error":
+      return el("span", { class: "chip chip-error" }, call.status ? `${call.status} thrown` : "error");
+    case "next":
+      return el("span", { class: "chip chip-loader" }, "next()");
+    case "response":
+      return el("span", { class: "chip chip-layout" }, `${call.status} response`);
+    default:
+      return el("span", { class: "chip chip-loader" }, "data");
+  }
+}
+
+function callText(call) {
+  return [
+    call.type,
+    routeLabel(call.routeId),
+    call.routeId,
+    call.url,
+    call.method,
+    call.outcome,
+    call.status,
+    call.location,
+    call.message,
+    call.type === "revalidate" ? (call.decision ? "revalidate" : "skipped") : "",
+  ]
+    .filter((value) => value !== undefined)
+    .join(" ")
+    .toLowerCase();
+}
+
+// ---------------------------------------------------------------------------
+// Call inspector
+
+const MAX_TREE_CHILDREN = 200;
+
+function jsonPreview(value) {
+  if (Array.isArray(value)) return `Array(${value.length})`;
+  if (value && typeof value === "object") {
+    const keys = Object.keys(value);
+    return `{${keys.slice(0, 4).join(", ")}${keys.length > 4 ? ", …" : ""}}`;
+  }
+  return undefined;
+}
+
+function jsonLeaf(value) {
+  const type = value === null ? "null" : typeof value;
+  const text = type === "string" ? JSON.stringify(value) : String(value);
+  return el("span", { class: `json-${type}` }, text);
+}
+
+/** Renders parsed JSON as nested, collapsible `<details>` elements. */
+function jsonTree(value, name, depth = 0) {
+  const label = name === undefined ? undefined : el("span", { class: "json-key" }, `${name}: `);
+  if (!value || typeof value !== "object") {
+    return el("div", { class: "json-row" }, label, jsonLeaf(value));
+  }
+  const entries = Array.isArray(value) ? value.map((item, index) => [index, item]) : Object.entries(value);
+  return el(
+    "details",
+    { class: "json-node", open: depth < 2 || undefined },
+    el("summary", {}, label, el("span", { class: "json-preview" }, jsonPreview(value))),
+    el(
+      "div",
+      { class: "json-children" },
+      entries.slice(0, MAX_TREE_CHILDREN).map(([key, item]) => jsonTree(item, key, depth + 1)),
+      entries.length > MAX_TREE_CHILDREN
+        ? el("div", { class: "muted" }, `… ${entries.length - MAX_TREE_CHILDREN} more`)
+        : undefined,
+    ),
+  );
+}
+
+function copyButton(text, label = "Copy") {
+  return el(
+    "button",
+    {
+      class: "link-button",
+      type: "button",
+      onclick: async () => {
+        try {
+          await navigator.clipboard.writeText(text);
+          toast("Copied to the clipboard");
+        } catch {
+          toast("Couldn't copy: the clipboard isn't available here");
+        }
+      },
+    },
+    label,
+  );
+}
+
+function renderData(call) {
+  if (call.data === undefined) {
+    return call.preview ? el("pre", { class: "call-preview" }, call.preview) : undefined;
+  }
+  let content;
+  if (call.dataTruncated) {
+    content = el("pre", { class: "call-preview" }, `${call.data}…`);
+  } else {
+    try {
+      const parsed = JSON.parse(call.data);
+      content =
+        parsed && typeof parsed === "object"
+          ? el("div", { class: "json" }, jsonTree(parsed))
+          : el("div", { class: "json" }, jsonLeaf(parsed));
+    } catch {
+      content = el("pre", { class: "call-preview" }, call.data);
+    }
+  }
+  return el(
+    "div",
+    { class: "call-data" },
+    content,
+    el(
+      "div",
+      { class: "call-data-actions" },
+      call.dataTruncated ? el("span", { class: "muted" }, "Truncated at 8 KB.") : undefined,
+      copyButton(call.data, "Copy JSON"),
+    ),
+  );
+}
+
+function pairTable(entries) {
+  return el(
+    "table",
+    { class: "pairs" },
+    el(
+      "tbody",
+      {},
+      entries.map(([name, value]) => el("tr", {}, el("th", { scope: "row" }, name), el("td", {}, value))),
+    ),
+  );
+}
+
+function paramPills(params) {
+  return el(
+    "div",
+    { class: "params" },
+    Object.entries(params).map(([name, value]) =>
+      el("span", { class: "param-pill" }, el("span", {}, name), el("span", {}, value)),
+    ),
+  );
+}
+
+function revalidateText(call) {
+  return [
+    call.decision
+      ? "shouldRevalidate returned true, so the loader runs."
+      : "shouldRevalidate returned false, so the loader was skipped.",
+    call.defaultShouldRevalidate === undefined
+      ? ""
+      : ` React Router's default was to ${call.defaultShouldRevalidate ? "revalidate" : "skip"}.`,
+  ].join("");
+}
+
+function renderCallBody(call, found) {
+  const routeFile = found?.node.files[call.type === "revalidate" ? "loader" : call.type];
+  const status =
+    call.status !== undefined && call.outcome !== "redirect" ? String(call.status) : undefined;
+  return el(
+    "div",
+    { class: "call-body" },
+    el(
+      "dl",
+      { class: "facts" },
+      found
+        ? fact(
+            "Route",
+            el("button", { class: "link-button", type: "button", onclick: () => revealRoute(found.key) }, routeLabel(call.routeId)),
+          )
+        : undefined,
+      routeFile
+        ? fact({ action: "Action", middleware: "Middleware" }[call.type] ?? "Loader", fileLink(routeFile))
+        : undefined,
+      call.type === "revalidate"
+        ? [
+            fact("Decision", el("span", {}, revalidateText(call))),
+            call.currentUrl ? fact("From", el("code", { class: "file-path" }, call.currentUrl)) : undefined,
+            call.url ? fact("To", el("code", { class: "file-path" }, call.url)) : undefined,
+            call.formMethod ? fact("Form method", el("code", {}, call.formMethod)) : undefined,
+            call.actionStatus !== undefined ? fact("Action status", el("code", {}, String(call.actionStatus))) : undefined,
+          ]
+        : call.url
+          ? fact("Request", el("code", { class: "file-path" }, `${call.method ?? ""} ${call.url}`.trim()))
+          : undefined,
+      call.params ? fact("Params", paramPills(call.params)) : undefined,
+      call.body?.kind === "form"
+        ? fact(
+            "Form data",
+            call.body.entries.length ? pairTable(call.body.entries) : el("span", { class: "muted" }, "No fields."),
+          )
+        : undefined,
+      call.body?.kind === "text"
+        ? fact(`Body${call.body.contentType ? ` (${call.body.contentType})` : ""}`, el("pre", { class: "call-preview" }, call.body.text))
+        : undefined,
+      status ? fact("Status", el("code", {}, status)) : undefined,
+      call.location ? fact("Redirects to", el("code", { class: "file-path" }, call.location)) : undefined,
+      call.errorName || call.message
+        ? fact(
+            "Error",
+            el(
+              "div",
+              { class: "call-error" },
+              el("strong", {}, call.errorName ? `${call.errorName}: ` : ""),
+              call.message ?? "",
+              call.stack ? el("pre", { class: "call-preview call-stack" }, call.stack) : undefined,
+            ),
+          )
+        : undefined,
+      call.type !== "revalidate" && (call.data !== undefined || call.preview)
+        ? fact(call.outcome === "error" ? "Thrown value" : "Returned data", renderData(call))
+        : undefined,
+      call.responseBody ? fact("Response body", el("pre", { class: "call-preview" }, call.responseBody)) : undefined,
+      call.headers?.length
+        ? fact(
+            "Headers",
+            el(
+              "details",
+              { class: "call-headers" },
+              el("summary", {}, `${call.headers.length} header${call.headers.length === 1 ? "" : "s"}`),
+              pairTable(call.headers),
+            ),
+          )
+        : undefined,
+      call.tabId && state.tabs.length > 1
+        ? fact("Tab", el("span", { class: "muted" }, state.tabs.find((tab) => tab.id === call.tabId)?.title || call.tabId))
+        : undefined,
+    ),
+  );
+}
+
+function renderCall(call) {
+  const found = nodeForRouteId(call.routeId);
+  const details = el(
+    "details",
+    { class: "call", open: state.openCalls.has(call.id) || undefined },
+    el(
+      "summary",
+      { class: "call-summary" },
+      el("span", { class: `chip chip-${{ action: "action", revalidate: "group", middleware: "middleware" }[call.type] ?? "page"}` }, call.type),
+      el("span", { class: "call-route", title: call.routeId }, routeLabel(call.routeId)),
+      call.type === "revalidate"
+        ? outcomeChip(call)
+        : el(
+            "span",
+            { class: "call-duration-outcome" },
+            outcomeChip(call),
+            " ",
+            el(
+              "span",
+              { class: `call-duration${call.duration >= SLOW_CALL_MS ? " slow" : ""}` },
+              formatDuration(call.duration),
+            ),
+          ),
+      el(
+        "span",
+        { class: "call-meta" },
+        el("span", {}, `${call.method && call.method !== "GET" ? `${call.method} ` : ""}${shortUrl(call.url)}`),
+        el("time", { datetime: new Date(call.startedAt).toISOString() }, formatTime(call.startedAt)),
+      ),
+    ),
+  );
+  // The body can be large, so it's only built when the call is opened.
+  const build = () => {
+    if (details.open && !details.querySelector(".call-body")) details.append(renderCallBody(call, found));
+  };
+  build();
+  details.addEventListener("toggle", () => {
+    if (details.open) state.openCalls.add(call.id);
+    else state.openCalls.delete(call.id);
+    build();
+  });
+  return el("li", {}, details);
+}
+
+// ---------------------------------------------------------------------------
+// Per-route call stats
+
+/** The route ID the generated routes give a directory with a loader or action. */
+function routeIdForNode(node) {
+  const file = node.files.loader ?? node.files.action ?? node.files.middleware;
+  return file ? `file-route:${file.slice(0, file.lastIndexOf("/"))}` : undefined;
+}
+
+function dataStats(node) {
+  const routeId = routeIdForNode(node);
+  if (!routeId) return undefined;
+  const calls = state.activity.filter(
+    (call) => call.id > state.clearedThrough && call.routeId === routeId && call.type !== "revalidate",
+  );
+  const summary = (type) => {
+    const list = calls.filter((call) => call.type === type);
+    if (!list.length) return undefined;
+    const durations = list.map((call) => call.duration ?? 0);
+    const average = durations.reduce((total, value) => total + value, 0) / durations.length;
+    const errors = list.filter((call) => call.outcome === "error").length;
+    const last = list.at(-1);
+    return el(
+      "div",
+      { class: "stat-row" },
+      el("span", { class: "stat-type" }, { loader: "Loader", action: "Action", middleware: "Middleware" }[type]),
+      el("span", {}, `${list.length} call${list.length === 1 ? "" : "s"}`),
+      el("span", {}, `avg ${formatDuration(average)}`),
+      el("span", { class: Math.max(...durations) >= SLOW_CALL_MS ? "slow" : undefined }, `max ${formatDuration(Math.max(...durations))}`),
+      errors ? el("span", { class: "error-text" }, `${errors} error${errors === 1 ? "" : "s"}`) : undefined,
+      el("span", { class: "muted" }, "last ", outcomeChip(last)),
+    );
+  };
+  return el(
+    "div",
+    { class: "data-stats" },
+    el("h3", {}, "Data calls"),
+    calls.length
+      ? [summary("middleware"), summary("loader"), summary("action")]
+      : el("p", { class: "muted" }, "No calls recorded yet. Visit this route in your app."),
+    calls.length
+      ? el(
+          "button",
+          {
+            class: "link-button",
+            type: "button",
+            onclick: () => {
+              state.timelineRoute = routeId;
+              showView("timeline");
+            },
+          },
+          "Show these calls in the timeline",
+        )
+      : undefined,
+  );
+}
+
+function visibleCalls() {
+  const query = timelineFilter.value.trim().toLowerCase();
+  return state.activity
+    .filter((call) => call.id > state.clearedThrough)
+    .filter((call) => state.timelineType === "all" || call.type === state.timelineType)
+    .filter((call) => !state.timelineRoute || call.routeId === state.timelineRoute)
+    .filter((call) => !query || callText(call).includes(query))
+    .reverse();
+}
+
+function renderTimeline() {
+  for (const button of timelineTypes.querySelectorAll("button")) {
+    button.setAttribute("aria-pressed", String(button.dataset.type === state.timelineType));
+  }
+  timelineRoutePill.hidden = !state.timelineRoute;
+  if (state.timelineRoute) {
+    timelineRoutePill.replaceChildren(
+      el("span", {}, "Route ", el("strong", {}, routeLabel(state.timelineRoute))),
+      el(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Show calls for every route",
+          title: "Show calls for every route",
+          onclick: () => {
+            state.timelineRoute = undefined;
+            renderTimeline();
+          },
+        },
+        "×",
+      ),
+    );
+  }
+  const hasCalls = state.activity.some((call) => call.id > state.clearedThrough);
+  timelineElement.dataset.empty = hasCalls
+    ? "No calls match this filter."
+    : "No loader or action calls yet. Navigate in your app to record some.";
+  timelineElement.replaceChildren(...visibleCalls().map(renderCall));
+  timelineCount.hidden = state.unseen === 0;
+  timelineCount.textContent = state.unseen > 99 ? "99+" : String(state.unseen);
+}
+
+function addActivity(calls) {
+  state.activity.push(...calls);
+  if (state.activity.length > MAX_TIMELINE) {
+    state.activity.splice(0, state.activity.length - MAX_TIMELINE);
+  }
+  if (timelineView.hidden) state.unseen += calls.length;
+  renderTimeline();
+  refreshSlowWarnings();
+  // Keep the selected route's call stats current.
+  const selected = state.nodes.get(state.selected)?.node;
+  const routeId = selected && routeIdForNode(selected);
+  if (routeId && calls.some((call) => call.routeId === routeId)) renderDetails();
+}
+
+function showView(name) {
+  const timeline = name === "timeline";
+  inspectView.hidden = timeline;
+  timelineView.hidden = !timeline;
+  inspectTab.setAttribute("aria-selected", String(!timeline));
+  timelineTab.setAttribute("aria-selected", String(timeline));
+  if (timeline) state.unseen = 0;
+  renderTimeline();
+}
+
+function applyData(data) {
+  const snapshot = JSON.stringify(data);
+  errorElement.hidden = true;
+  if (snapshot === state.snapshot) return;
+  state.data = data;
+  state.snapshot = snapshot;
+  state.nodes = new Map();
+  indexNodes(data.manifest);
+  if (!state.nodes.has(state.selected)) state.selected = "0";
+  renderStats();
+  renderConflicts();
+  state.slowSignature = "";
+  renderWarnings();
+  updateCurrentKeys();
+  renderTree();
+  renderDetails();
+  renderCurrent();
+  renderTimeline();
+  if (testerInput.value.trim()) runMatch();
+}
+
+async function refresh() {
+  refreshElement.classList.remove("spinning");
+  void refreshElement.offsetWidth;
+  refreshElement.classList.add("spinning");
+  try {
+    const response = await fetch(DATA_URL, { cache: "no-store" });
+    if (!response.ok) throw new Error(`Request failed (${response.status})`);
+    applyData(await response.json());
+  } catch (error) {
+    errorElement.textContent = `Unable to load routes: ${error.message}`;
+    errorElement.hidden = false;
+  }
+}
+
+function setLive(stateName, label) {
+  liveElement.dataset.state = stateName;
+  liveLabelElement.textContent = label;
+}
+
+function connect() {
+  if (!("EventSource" in window)) {
+    setLive("offline", "Manual refresh");
+    return;
+  }
+  const events = new EventSource(EVENTS_URL);
+  events.addEventListener("open", () => setLive("live", "Live"));
+  events.addEventListener("apps", (event) => {
+    state.tabs = JSON.parse(event.data);
+    updateCurrentKeys();
+    renderCurrent();
+    renderTree();
+    // "Open in" buttons name the followed tab.
+    if (!detailsElement.contains(document.activeElement)) renderDetails();
+    renderMatch();
+  });
+  events.addEventListener("activity-snapshot", (event) => {
+    // Sent on every (re)connect; keep only calls this panel hasn't seen.
+    const known = new Set(state.activity.map((call) => call.id));
+    const calls = JSON.parse(event.data).filter((call) => !known.has(call.id));
+    if (calls.length) addActivity(calls);
+  });
+  events.addEventListener("activity", (event) => addActivity([JSON.parse(event.data)]));
+  events.addEventListener("routes", (event) => {
+    setLive("live", "Live");
+    applyData(JSON.parse(event.data));
+  });
+  // EventSource reconnects on its own, including after a dev-server restart.
+  events.addEventListener("error", () => setLive("reconnecting", "Reconnecting"));
+}
+
+filterElement.addEventListener("input", renderTree);
+inspectTab.addEventListener("click", () => showView("inspect"));
+timelineTab.addEventListener("click", () => showView("timeline"));
+timelineFilter.addEventListener("input", renderTimeline);
+timelineTypes.addEventListener("click", (event) => {
+  const type = event.target.closest("button")?.dataset.type;
+  if (!type) return;
+  state.timelineType = type;
+  renderTimeline();
+});
+timelineClear.addEventListener("click", () => {
+  state.clearedThrough = state.activity.at(-1)?.id ?? state.clearedThrough;
+  state.openCalls.clear();
+  renderTimeline();
+  refreshSlowWarnings();
+  renderDetails();
+});
+refreshElement.addEventListener("click", refresh);
+toggleElement.addEventListener("click", () => {
+  if (state.collapsed.size === 0) {
+    for (const [key, { node }] of state.nodes) {
+      if (key !== "0" && node.children.length) state.collapsed.add(key);
+    }
+  } else {
+    state.collapsed.clear();
+  }
+  renderTree();
+});
+testerForm.addEventListener("submit", (event) => {
+  event.preventDefault();
+  runMatch();
+});
+
+testerInput.value = readStorage(TESTER_STORAGE_KEY);
+renderTree();
+renderCurrent();
+renderTimeline();
+refresh();
+connect();