@troyio/vite-file-router 0.4.1 → 0.6.0

package/devtools/app.js

@@ -2,6 +2,9 @@ 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 CODE_URL = "/__vite-file-router-code";
+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 +12,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");
@@ -21,15 +25,16 @@ 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 pageNav = $("#page-nav");
 const timelineCount = $("#timeline-count");
+const warningCount = $("#warning-count");
+const codeModulesElement = $("#code-modules");
+const codeViewElement = $("#code-view");
 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 +47,8 @@ const FILE_KINDS = [
   ["notFound", "Not found", "404"],
   ["loader", "Loader", "loader"],
   ["action", "Action", "action"],
+  ["middleware", "Middleware", "mw"],
+  ["hydrateFallback", "Hydrate fallback", "hydrate"],
 ];
 
 const state = {
@@ -61,7 +68,13 @@ 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(),
+  // Generated modules for the Generated code page, fetched when it opens.
+  code: { modules: undefined, selected: "virtual:routes", variant: "dev", stale: false, failure: undefined },
+  // Signature of the slow-loader warnings last rendered.
+  slowSignature: "",
 };
 
 // ---------------------------------------------------------------------------
@@ -267,6 +280,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 +387,136 @@ 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. Add a hydrate-fallback file for the first page load, and show pending UI with useNavigation() in a layout for later navigations.`,
+        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();
+  const severeCount = warnings.filter((warning) => warning.severity === "warning").length;
+  warningCount.hidden = severeCount === 0;
+  warningCount.textContent = String(severeCount);
+  warningCount.title = `${severeCount} route warning${severeCount === 1 ? "" : "s"}`;
+  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 +546,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 +591,9 @@ function renderDetails() {
               ),
             )
           : undefined,
+        node.files.page ? fact("Open in app", openForm(node, params)) : undefined,
       ),
+      dataStats(node),
     ),
   );
 }
@@ -497,6 +651,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,13 +699,23 @@ 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.hydrateFallback ? fact("Hydrate fallback (first load)", fileLink(result.hydrateFallback)) : 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);
@@ -670,6 +835,365 @@ 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"),
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Pages
+
+const PAGES = ["routes", "timeline", "code"];
+
+function currentPage() {
+  const name = window.location.hash.slice(1);
+  return PAGES.includes(name) ? name : "routes";
+}
+
+/** Shows a page. `inspect` is the Routes page's older name. */
+function showView(name) {
+  const page = name === "inspect" ? "routes" : name;
+  if (window.location.hash !== `#${page}`) {
+    history.replaceState(null, "", `#${page}`);
+  }
+  applyPage();
+}
+
+function applyPage() {
+  const page = currentPage();
+  for (const name of PAGES) $(`#page-${name}`).hidden = name !== page;
+  for (const link of pageNav.querySelectorAll("a")) {
+    if (link.dataset.page === page) link.setAttribute("aria-current", "page");
+    else link.removeAttribute("aria-current");
+  }
+  if (page === "timeline") state.unseen = 0;
+  renderTimeline();
+  if (page === "code" && (!state.code.modules || state.code.stale)) loadCode();
+}
+
+// ---------------------------------------------------------------------------
+// Generated code
+
+const CODE_MODULES = [
+  ["virtual:routes", "Route objects passed to React Router, with lazy imports and preloading."],
+  ["virtual:route-manifest", "The route tree as data: paths, params, and files."],
+  ["virtual:route-helpers", "routePath(), useRouteParams(), and useRouteData()."],
+  ["route-types", "Types for route patterns, params, and loader data."],
+];
+
+const KEYWORDS = new Set(
+  "import export from const let var function return async await if else for of in new typeof type interface declare module extends default throw try catch null undefined true false class keyof infer as".split(
+    " ",
+  ),
+);
+const TOKEN_PATTERN =
+  /(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|("(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*'|`(?:[^`\\]|\\.)*`)|\b([A-Za-z_$][\w$]*)\b|\b(\d+(?:\.\d+)?)\b/g;
+
+/** A small highlighter for the generated JavaScript and TypeScript. */
+function highlight(code) {
+  const pieces = [];
+  let last = 0;
+  for (const match of code.matchAll(TOKEN_PATTERN)) {
+    const [text, comment, string, word, number] = match;
+    const kind = comment
+      ? "comment"
+      : string
+        ? "string"
+        : number
+          ? "number"
+          : word && KEYWORDS.has(word)
+            ? "keyword"
+            : undefined;
+    if (!kind) continue;
+    if (match.index > last) pieces.push([undefined, code.slice(last, match.index)]);
+    pieces.push([kind, text]);
+    last = match.index + text.length;
+  }
+  if (last < code.length) pieces.push([undefined, code.slice(last)]);
+
+  // Split the pieces into lines, so each line can carry its number.
+  const lines = [[]];
+  for (const [kind, text] of pieces) {
+    text.split("\n").forEach((part, index) => {
+      if (index > 0) lines.push([]);
+      if (part) lines.at(-1).push(kind ? el("span", { class: `tok-${kind}` }, part) : document.createTextNode(part));
+    });
+  }
+  if (lines.length > 1 && lines.at(-1).length === 0) lines.pop();
+  return lines.map((parts) => el("span", { class: "code-line" }, parts.length ? parts : "​"));
+}
+
+function formatBytes(bytes) {
+  return bytes < 1024 ? `${bytes} B` : `${(bytes / 1024).toFixed(1)} KB`;
+}
+
+function selectedModule() {
+  const { modules, selected, variant } = state.code;
+  return modules?.find(
+    (module) => module.id === selected && (module.variant === undefined || module.variant === variant),
+  );
+}
+
+function renderCode() {
+  const { modules, selected, variant, failure } = state.code;
+  codeModulesElement.replaceChildren(
+    ...CODE_MODULES.map(([id, description]) =>
+      el(
+        "button",
+        {
+          class: "code-module",
+          type: "button",
+          role: "tab",
+          "aria-selected": String(id === selected),
+          onclick: () => {
+            state.code.selected = id;
+            renderCode();
+          },
+        },
+        el("span", { class: "code-module-name" }, id === "route-types" ? "Route types (.d.ts)" : id),
+        el("span", { class: "code-module-description" }, description),
+      ),
+    ),
+  );
+
+  if (failure) {
+    codeViewElement.replaceChildren(el("p", { class: "empty" }, failure));
+    return;
+  }
+  if (!modules) {
+    codeViewElement.replaceChildren(el("p", { class: "empty" }, "Loading generated code…"));
+    return;
+  }
+  const module = selectedModule();
+  const code = module?.code ?? "";
+  const notes = [];
+  if (module?.id === "virtual:routes") {
+    notes.push(
+      variant === "dev"
+        ? "As the dev server serves it, with the DevTools client and call reporting."
+        : "As vite build generates it, without any DevTools code.",
+    );
+  }
+  if (module?.id === "route-types") {
+    notes.push(
+      module.written
+        ? `Written to ${module.file}.`
+        : `Not written: the dts option is false, or the project has no tsconfig.json or jsconfig.json. With dts set, it goes to ${module.file}.`,
+    );
+  }
+
+  codeViewElement.replaceChildren(
+    el(
+      "div",
+      { class: "code-toolbar" },
+      module?.id === "virtual:routes"
+        ? el(
+            "div",
+            { class: "segmented code-variant", role: "group", "aria-label": "Variant" },
+            ["dev", "build"].map((name) =>
+              el(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": String(name === variant),
+                  onclick: () => {
+                    state.code.variant = name;
+                    renderCode();
+                  },
+                },
+                name === "dev" ? "Dev server" : "Build",
+              ),
+            ),
+          )
+        : undefined,
+      el(
+        "span",
+        { class: "code-size muted" },
+        module?.code === undefined
+          ? ""
+          : `${code.split("\n").length - (code.endsWith("\n") ? 1 : 0)} lines · ${formatBytes(new TextEncoder().encode(code).length)}`,
+      ),
+      module?.code !== undefined ? copyButton(code, "Copy") : undefined,
+    ),
+    notes.length ? el("p", { class: "code-note muted" }, notes.join(" ")) : undefined,
+    module?.error
+      ? el("p", { class: "code-error" }, module.error)
+      : el("pre", { class: "code", tabindex: "0" }, el("code", {}, highlight(code))),
+  );
+}
+
+async function loadCode() {
+  state.code.stale = false;
+  try {
+    const response = await fetch(CODE_URL, { cache: "no-store" });
+    if (!response.ok) throw new Error(`Request failed (${response.status})`);
+    state.code.modules = (await response.json()).modules;
+    state.code.failure = undefined;
+  } catch (error) {
+    state.code.failure = `Couldn't load the generated code: ${error.message}`;
+  }
+  renderCode();
+}
+
 // ---------------------------------------------------------------------------
 // Loader and action timeline
 
@@ -719,6 +1243,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 +1270,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 +1501,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 +1586,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."
@@ -842,19 +1619,15 @@ function addActivity(calls) {
   if (state.activity.length > MAX_TIMELINE) {
     state.activity.splice(0, state.activity.length - MAX_TIMELINE);
   }
-  if (timelineView.hidden) state.unseen += calls.length;
+  if (currentPage() !== "timeline") 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);
@@ -867,12 +1640,17 @@ function applyData(data) {
   if (!state.nodes.has(state.selected)) state.selected = "0";
   renderStats();
   renderConflicts();
+  state.slowSignature = "";
+  renderWarnings();
   updateCurrentKeys();
   renderTree();
   renderDetails();
   renderCurrent();
   renderTimeline();
   if (testerInput.value.trim()) runMatch();
+  // Generated code follows the route files; refetch it now if it's showing.
+  state.code.stale = true;
+  if (currentPage() === "code" && state.code.modules) loadCode();
 }
 
 async function refresh() {
@@ -906,6 +1684,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.
@@ -923,8 +1704,7 @@ function connect() {
 }
 
 filterElement.addEventListener("input", renderTree);
-inspectTab.addEventListener("click", () => showView("inspect"));
-timelineTab.addEventListener("click", () => showView("timeline"));
+window.addEventListener("hashchange", applyPage);
 timelineFilter.addEventListener("input", renderTimeline);
 timelineTypes.addEventListener("click", (event) => {
   const type = event.target.closest("button")?.dataset.type;
@@ -936,6 +1716,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", () => {
@@ -956,6 +1738,6 @@ testerForm.addEventListener("submit", (event) => {
 testerInput.value = readStorage(TESTER_STORAGE_KEY);
 renderTree();
 renderCurrent();
-renderTimeline();
+applyPage();
 refresh();
 connect();