@troyio/vite-file-router 0.4.0 → 0.4.1

package/devtools/app.js

@@ -1,143 +1,961 @@
-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 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 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 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"],
+];
+
+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",
+  openCalls: new Set(),
+};
+
+// ---------------------------------------------------------------------------
+// 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,
+      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))),
+      ),
+    ),
+  );
+}
+
+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,
+      ),
+      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,
+      ),
+    ),
+  );
+}
+
+// ---------------------------------------------------------------------------
+// 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),
+    ),
+    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.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,
+    ),
+  );
+}
+
+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."),
+  );
+}
+
+// ---------------------------------------------------------------------------
+// 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 "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();
+}
+
+function renderCall(call) {
+  const found = nodeForRouteId(call.routeId);
+  const routeFile =
+    call.type === "action" ? found?.node.files.action : found?.node.files.loader;
+  const details = el(
+    "details",
+    { class: "call", open: state.openCalls.has(call.id) || undefined },
+    el(
+      "summary",
+      { class: "call-summary" },
+      el("span", { class: `chip chip-${call.type === "action" ? "action" : call.type === "revalidate" ? "group" : "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)),
+      ),
+    ),
+    el(
+      "div",
+      { class: "call-body" },
+      el(
+        "dl",
+        { class: "facts" },
+        routeFile ? fact(call.type === "action" ? "Action" : "Loader", fileLink(routeFile)) : undefined,
+        call.url ? fact("Request", el("code", { class: "file-path" }, `${call.method ?? ""} ${call.url}`.trim())) : undefined,
+        call.location ? fact("Redirects to", el("code", { class: "file-path" }, call.location)) : undefined,
+        call.message ? fact("Error", el("span", {}, call.message)) : undefined,
+        call.type === "revalidate"
+          ? fact(
+              "Decision",
+              el(
+                "span",
+                {},
+                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"}.`,
+              ),
+            )
+          : undefined,
+        call.preview ? fact("Returned data", el("pre", { class: "call-preview" }, call.preview)) : 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,
+      ),
+    ),
+  );
+  details.addEventListener("toggle", () => {
+    if (details.open) state.openCalls.add(call.id);
+    else state.openCalls.delete(call.id);
+  });
+  return el("li", {}, details);
+}
+
+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) => !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));
+  }
+  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();
+}
+
+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();
+  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();
+  });
+  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();
+});
+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();