@troyio/vite-file-router 0.4.1 → 0.5.0

package/devtools/app.js

@@ -2,6 +2,8 @@ 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);
@@ -9,6 +11,7 @@ const treeElement = $("#tree");
 const statsElement = $("#stats");
 const errorElement = $("#error");
 const conflictsElement = $("#conflicts");
+const warningsElement = $("#warnings");
 const filterElement = $("#filter");
 const toggleElement = $("#toggle");
 const refreshElement = $("#refresh");
@@ -30,6 +33,7 @@ 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;
@@ -42,6 +46,7 @@ const FILE_KINDS = [
   ["notFound", "Not found", "404"],
   ["loader", "Loader", "loader"],
   ["action", "Action", "action"],
+  ["middleware", "Middleware", "mw"],
 ];
 
 const state = {
@@ -61,7 +66,11 @@ const state = {
   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: "",
 };
 
 // ---------------------------------------------------------------------------
@@ -267,6 +276,8 @@ function renderNode(node, key, query) {
       "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),
       ),
@@ -372,6 +383,132 @@ function renderConflicts() {
   );
 }
 
+// ---------------------------------------------------------------------------
+// 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));
 }
@@ -401,6 +538,13 @@ function renderDetails() {
         { 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" },
@@ -439,7 +583,9 @@ function renderDetails() {
               ),
             )
           : undefined,
+        node.files.page ? fact("Open in app", openForm(node, params)) : undefined,
       ),
+      dataStats(node),
     ),
   );
 }
@@ -497,6 +643,7 @@ function renderMatch() {
         ? 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",
@@ -544,6 +691,7 @@ function renderMatch() {
       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,
@@ -551,6 +699,14 @@ function renderMatch() {
   );
 }
 
+/** 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);
@@ -670,6 +826,170 @@ function renderCurrent() {
   );
 }
 
+// ---------------------------------------------------------------------------
+// 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
 
@@ -719,6 +1039,8 @@ function outcomeChip(call) {
       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:
@@ -744,17 +1066,216 @@ function callText(call) {
     .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 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: `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)
@@ -776,50 +1297,83 @@ function renderCall(call) {
         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,
-      ),
-    ),
   );
+  // 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();
 }
@@ -828,6 +1382,25 @@ 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."
@@ -844,6 +1417,11 @@ function addActivity(calls) {
   }
   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) {
@@ -867,6 +1445,8 @@ function applyData(data) {
   if (!state.nodes.has(state.selected)) state.selected = "0";
   renderStats();
   renderConflicts();
+  state.slowSignature = "";
+  renderWarnings();
   updateCurrentKeys();
   renderTree();
   renderDetails();
@@ -906,6 +1486,9 @@ function connect() {
     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.
@@ -936,6 +1519,8 @@ 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", () => {