rerender-lens 0.5.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rerender-lens",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Find avoidable React re-renders and what caused them. Reads the fiber tree like React DevTools, so nothing is patched: works with Fast Refresh, memo, forwardRef and classes. Structured reports, test assertions, and a DevTools bridge.",
   "keywords": [
     "react",
@@ -149,7 +149,8 @@
     "test:jest": "node scripts/jest-check.mjs",
     "test:react18": "npm install --prefix .react18 --no-save --no-package-lock --no-audit --no-fund react@18 react-dom@18 && vitest run --config test/react-compat.config.ts",
     "store:media": "node scripts/store-media.mjs",
-    "test:react17": "npm install --prefix .react17 --no-save --no-package-lock --no-audit --no-fund react@17 react-dom@17 && REACT_COMPAT_DIR=.react17/node_modules vitest run --config test/react-compat.config.ts"
+    "test:react17": "npm install --prefix .react17 --no-save --no-package-lock --no-audit --no-fund react@17 react-dom@17 && REACT_COMPAT_DIR=.react17/node_modules vitest run --config test/react-compat.config.ts",
+    "e2e:perf": "playwright test -c e2e/perf.config.ts"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/panel/panel.css

@@ -105,6 +105,11 @@ button.ib.active .glyph { color: var(--accent); }
 .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
 .status.connected .dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
 .status.partial .dot { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
+.app-picker {
+  height: 22px; max-width: 200px; padding: 0 4px; font-size: 11px; color: var(--text-dim);
+  background: var(--bg-inset); border: 1px solid var(--border); border-radius: 10px;
+}
+.app-picker:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 .tab-chip {
   max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   padding: 2px 8px; border-radius: 10px; background: var(--bg-inset); color: var(--text-dim); font-size: 11px;
@@ -123,6 +128,43 @@ button.ib.active .glyph { color: var(--accent); }
 .summary button.stat { height: 22px; padding: 0 6px; margin: 0 -6px; }
 .summary button.stat:hover { background: var(--hover); }
 
+/* ---------- commit timeline strip ---------- */
+.timeline { flex: none; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
+.timeline-header {
+  display: flex; align-items: center; gap: 6px; padding: 1px 12px; height: 17px;
+  color: var(--text-dim); cursor: pointer; user-select: none; font-size: 10px;
+}
+.timeline-header:hover { color: var(--text); }
+.timeline-header .chevron { width: 9px; flex: none; }
+.timeline-header .count { margin-left: auto; font-variant-numeric: tabular-nums; }
+.timeline-header .chip {
+  height: 15px; padding: 0 7px; font-size: 10px; border-radius: 8px;
+  border: 1px solid var(--accent); background: var(--accent-bg); color: var(--accent);
+}
+.timeline-header .chip:hover { background: var(--accent); color: var(--bg); }
+.timeline-body { padding: 0 12px 2px; }
+.timeline.collapsed .timeline-body { display: none; }
+.timeline .bars {
+  display: flex; align-items: flex-end; gap: 1px; height: 26px; padding: 0 2px;
+  background: var(--bg-inset); border-radius: 3px; overflow: hidden; cursor: crosshair;
+}
+.timeline .bar {
+  flex: 1 1 0; min-width: 2px; height: 100%; padding: 0; margin: 0; display: block;
+  position: relative; align-self: flex-end; border: 0; border-radius: 1px 1px 0 0;
+  background: var(--ok); opacity: 0.65; cursor: pointer;
+}
+.timeline .bar:hover { background: var(--ok); opacity: 1; }
+.timeline .bar .avoid { position: absolute; left: 0; right: 0; bottom: 0; background: var(--danger); }
+.timeline .bar.in-window, .timeline .bar.brushing { opacity: 1; }
+.timeline .bar.selected { opacity: 1; outline: 1px solid var(--accent); outline-offset: -1px; }
+.timeline .bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
+.timeline-axis {
+  display: flex; justify-content: space-between; height: 10px; line-height: 10px;
+  pointer-events: none; font-size: 9px; color: var(--text-faint); font-variant-numeric: tabular-nums;
+}
+.compact .timeline-header, .compact .timeline-body { padding-left: 8px; padding-right: 8px; }
+.compact .timeline .bars { height: 22px; }
+
 /* ---------- banner, toast ---------- */
 .banner { padding: 6px 12px; background: var(--warn-bg); color: var(--text); border-bottom: 1px solid var(--border); font-size: 11px; flex: none; }
 .banner div { padding-left: 16px; position: relative; }
@@ -175,6 +217,12 @@ button.ib.active .glyph { color: var(--accent); }
 @keyframes flash { from { box-shadow: inset 3px 0 0 var(--warn); background: var(--warn-bg); } to { box-shadow: none; background: transparent; } }
 .empty { padding: 28px 18px; color: var(--text-dim); text-align: center; line-height: 1.6; }
 .empty code { font-family: var(--mono); font-size: 11px; background: var(--bg-inset); padding: 1px 5px; border-radius: 4px; }
+.empty .empty-head { color: var(--text); font-weight: 600; margin-bottom: 6px; }
+.empty .empty-tracking { color: var(--text); background: var(--bg-inset); border-radius: 6px; padding: 6px 10px; margin: 0 auto 8px; display: inline-block; max-width: 46em; }
+.empty-actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
+.empty-actions button { border: 1px solid var(--border); }
+.empty-actions button.primary { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
+.empty-actions input.empty-match { border: 1px solid var(--border); border-radius: 4px; padding: 0 6px; height: 24px; background: var(--bg-inset); width: 12em; }
 
 /* ---------- details ---------- */
 .details { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }

package/panel/panel.js

@@ -577,6 +577,8 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
   var ITEM_H = 20;
   var OVERSCAN = 8;
   var FALLBACK_VIEWPORT = 800;
+  var MAX_STRIP_BARS = 200;
+  var MIN_BAR_PCT = 8;
   function el(tag, attrs, children) {
     const node = document.createElement(tag);
     if (attrs) {
@@ -602,6 +604,8 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
   }
   var fmtMs = (n) => typeof n === "number" && Number.isFinite(n) ? `${n.toFixed(1)} ms` : "";
   var plural = (n, word) => `${n} ${word}${n === 1 ? "" : "s"}`;
+  var fmtSpan = (ms) => ms < 1e3 ? `${Math.round(ms)}ms` : ms < 6e4 ? `${(ms / 1e3).toFixed(1)}s` : `${(ms / 6e4).toFixed(1)}m`;
+  var spokenAgo = (ms) => ms < 1e3 ? "just now" : ms < 6e4 ? `${Math.round(ms / 1e3)} seconds ago` : `${Math.round(ms / 6e4)} minutes ago`;
   var componentList = (m) => (m instanceof Map ? [...m] : Object.entries(m)).map(([c, n]) => `<${c}>${n > 1 ? " \xD7" + n : ""}`).join(", ");
   function changesOf(report) {
     return [].concat(report.propChanges || [], report.stateChanges || [], report.hookChanges || []);
@@ -999,6 +1003,8 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       reports: [],
       commits: /* @__PURE__ */ new Map(),
       commitOrder: [],
+      apps: [],
+      appId: null,
       selectedKey: null,
       selectedReport: null,
       selectedCommit: null,
@@ -1024,7 +1030,9 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       recording: null,
       selectedSession: null,
       compareWith: null,
-      byInstance: false
+      byInstance: false,
+      timeWindow: null,
+      stripCollapsed: false
     };
     let persistTimer = null;
     let queue = [];
@@ -1084,6 +1092,8 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     const settingsBtn = iconButton("\u2699", "Settings", "Settings", () => toggleSettings());
     const status = el("span", { class: "status", title: "" }, [el("span", { class: "dot" }), el("span", { class: "status-text", text: "no page" })]);
     const tabChip = el("span", { class: "tab-chip", hidden: true, title: "The tab this panel follows" });
+    const appPicker = el("select", { class: "app-picker", hidden: true, title: "Which connected app this panel watches", "aria-label": "App" });
+    appPicker.addEventListener("change", () => transport.selectApp?.(appPicker.value));
     const undock = transport.undock ? [
       el("span", { class: "sep" }),
       iconButton("\u2AFF", "Side panel", "Show this panel next to the page (Chrome side panel)", () => void transport.undock("sidepanel").catch((e) => toast(String(e.message || e)))),
@@ -1105,11 +1115,31 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       ...undock,
       el("span", { class: "spacer" }),
       tabChip,
+      appPicker,
       status,
       settingsBtn
     ]);
     const summary = el("div", { class: "summary" });
     const banner = el("div", { class: "banner", hidden: true });
+    const stripChevron = el("span", { class: "chevron", text: "\u25BE" });
+    const stripCount = el("span", { class: "count", text: "0 commits" });
+    const stripChip = el("button", {
+      class: "chip",
+      hidden: true,
+      title: "Clear the time window (Esc)",
+      onclick: (e) => {
+        e.stopPropagation();
+        clearWindow();
+      }
+    });
+    const stripBars = el("div", { class: "bars" });
+    const stripFrom = el("span", { class: "from", text: "" });
+    const stripTo = el("span", { class: "to", text: "now" });
+    const stripHeader = el("div", { class: "timeline-header", onclick: () => toggleStrip() }, [stripChevron, el("span", { class: "title", text: "Timeline" }), stripChip, stripCount]);
+    const timeline = el("div", { class: "timeline", hidden: true, role: "group", "aria-label": "Commit timeline" }, [
+      stripHeader,
+      el("div", { class: "timeline-body" }, [stripBars, el("div", { class: "timeline-axis" }, [stripFrom, stripTo])])
+    ]);
     const viewsBar = el("div", { class: "views" });
     const VIEWS = [
       ["tree", "Tree"],
@@ -1172,7 +1202,9 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     details.setAttribute("aria-label", "Details");
     settings.setAttribute("role", "dialog");
     settings.setAttribute("aria-label", "Settings");
-    root.append(toolbar, summary, banner, main, stream, toastEl);
+    stripBars.setAttribute("role", "group");
+    stripBars.setAttribute("aria-label", "Commits over time; arrow keys move between commits, Enter selects, drag to filter every view to a time window");
+    root.append(toolbar, summary, banner, timeline, main, stream, toastEl);
     root.addEventListener("keydown", onGlobalKey);
     function setCompact(on) {
       if (state.compact === on) return;
@@ -1291,7 +1323,8 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
           collapsed: [...state.collapsed],
           treeWidth: state.treeWidth,
           flashOn: state.flashOn,
-          byInstance: state.byInstance
+          byInstance: state.byInstance,
+          stripCollapsed: state.stripCollapsed
         };
         transport.storage.set("panel", saved);
       }, 150);
@@ -1343,6 +1376,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         instancesBtn.classList.toggle("active", state.byInstance);
         rebuildTree();
       }
+      if (typeof saved.stripCollapsed === "boolean" && saved.stripCollapsed !== state.stripCollapsed) toggleStrip(saved.stripCollapsed);
       if (saved.tab === "history" || saved.tab === "fix") state.tab = saved.tab;
       if (saved.view && viewButtons.has(saved.view)) state.view = saved.view;
       for (const n of state.nodesByKey.values()) n.expanded = !state.collapsed.has(n.key);
@@ -1498,6 +1532,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     function renderHeavy(details2) {
       heavyAt = Date.now();
       if (state.view !== "tree") renderLeft();
+      renderStrip();
       if (details2) renderDetails();
     }
     function scheduleHeavy(details2) {
@@ -1544,12 +1579,14 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       state.selectedCommit = null;
       state.selectedFix = null;
       state.selectedRoot = null;
+      state.timeWindow = null;
       if (state.tab === "commit" || state.tab === "fixlist" || state.tab === "root") state.tab = "latest";
       queue = [];
       renderLeft();
       renderDetails();
       renderStream();
       renderSummary();
+      renderStrip();
     }
     let filterCache = { filter: "", value: null, regex: null, text: "" };
     function parsedFilter() {
@@ -1590,17 +1627,45 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       }
       return text.includes(q);
     }
+    const inWindow = (r) => {
+      const w = state.timeWindow;
+      return !w || r.receivedAt >= w.from && r.receivedAt <= w.to;
+    };
+    const windowKey = () => {
+      const w = state.timeWindow;
+      return w ? `${w.from}-${w.to}` : "";
+    };
+    const NO_COUNTS = { total: 0, avoidable: 0 };
+    let windowNodes = null;
+    function nodeCounts(node) {
+      if (!state.timeWindow) return node;
+      const key = `${dataGen}|${windowKey()}|${state.byInstance}`;
+      if (!windowNodes || windowNodes.key !== key) {
+        const map = /* @__PURE__ */ new Map();
+        for (const r of state.reports) {
+          if (!inWindow(r)) continue;
+          const k = nodeOfReport(r).key;
+          let c = map.get(k);
+          if (!c) map.set(k, c = { total: 0, avoidable: 0 });
+          c.total++;
+          if (r.avoidable) c.avoidable++;
+        }
+        windowNodes = { key, map };
+      }
+      return windowNodes.map.get(node.key) || NO_COUNTS;
+    }
     function visible(node) {
-      const own = (!state.avoidableOnly || node.avoidable > 0) && matchesFilter(node.name) && node.total > 0 && (valueQuery() === null || node.reports.some(matchesValues));
+      const c = nodeCounts(node);
+      const own = (!state.avoidableOnly || c.avoidable > 0) && matchesFilter(node.name) && c.total > 0 && (valueQuery() === null || node.reports.some(matchesValues));
       if (own) return true;
-      for (const c of node.children.values()) if (visible(c)) return true;
+      for (const child of node.children.values()) if (visible(child)) return true;
       return false;
     }
-    const passes = (r) => (!state.avoidableOnly || r.avoidable) && matchesFilter(r.component) && matchesValues(r);
+    const passes = (r) => inWindow(r) && (!state.avoidableOnly || r.avoidable) && matchesFilter(r.component) && matchesValues(r);
     let dataGen = 0;
     let filtered = { key: "", reports: [], fixes: null };
     function filteredReports() {
-      const key = `${dataGen}|${state.avoidableOnly}|${state.filter}`;
+      const key = `${dataGen}|${state.avoidableOnly}|${state.filter}|${windowKey()}`;
       if (filtered.key !== key) filtered = { key, reports: state.reports.filter(passes), fixes: null };
       return filtered.reports;
     }
@@ -1618,6 +1683,154 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       renderDetails();
       persist();
     }
+    let bars = [];
+    const barEls = /* @__PURE__ */ new Map();
+    const barNodes = () => [...stripBars.children];
+    function renderStrip() {
+      const order = state.commitOrder;
+      const next = [];
+      let max = 1;
+      for (let i = Math.max(0, order.length - MAX_STRIP_BARS); i < order.length; i++) {
+        const key = order[i];
+        const reports = state.commits.get(key);
+        if (!reports || !reports.length) continue;
+        let avoidable = 0;
+        let from = Infinity;
+        let to = 0;
+        for (const r of reports) {
+          if (r.avoidable) avoidable++;
+          if (r.receivedAt < from) from = r.receivedAt;
+          if (r.receivedAt > to) to = r.receivedAt;
+        }
+        next.push({ key, total: reports.length, avoidable, from, to });
+        if (reports.length > max) max = reports.length;
+      }
+      bars = next;
+      if (!bars.length) {
+        timeline.hidden = true;
+        stripBars.textContent = "";
+        barEls.clear();
+        return;
+      }
+      timeline.hidden = false;
+      const now = bars[bars.length - 1].to;
+      const win = state.timeWindow;
+      const live = /* @__PURE__ */ new Set();
+      const frag = document.createDocumentFragment();
+      for (let i = 0; i < bars.length; i++) {
+        const b = bars[i];
+        live.add(b.key);
+        let node = barEls.get(b.key);
+        if (!node) {
+          node = el("button", { class: "bar", type: "button", "data-commit": String(b.key) }, [el("span", { class: "avoid" })]);
+          barEls.set(b.key, node);
+        }
+        node.setAttribute("data-index", String(i));
+        node.style.height = `${Math.max(MIN_BAR_PCT, Math.round(100 * Math.sqrt(b.total / max)))}%`;
+        node.firstElementChild.style.height = `${Math.round(100 * b.avoidable / b.total)}%`;
+        node.classList.toggle("has-avoid", b.avoidable > 0);
+        node.classList.toggle("selected", state.selectedCommit === b.key && state.tab === "commit");
+        node.classList.toggle("in-window", !!win && b.to >= win.from && b.from <= win.to);
+        node.setAttribute("aria-label", `commit ${b.key}, ${plural(b.total, "render")}, ${b.avoidable} avoidable, ${spokenAgo(Math.max(0, now - b.to))}`);
+        node.title = `#${b.key} \xB7 ${plural(b.total, "render")} \xB7 ${b.avoidable} avoidable`;
+        frag.append(node);
+      }
+      stripBars.textContent = "";
+      stripBars.append(frag);
+      for (const key of [...barEls.keys()]) if (!live.has(key)) barEls.delete(key);
+      const span = now - bars[0].from;
+      stripFrom.textContent = span > 0 ? `-${fmtSpan(span)}` : "0ms";
+      stripTo.textContent = "now";
+      stripCount.textContent = plural(bars.length, "commit") + (order.length > bars.length ? ` of ${order.length}` : "");
+      if (win) {
+        let n = 0;
+        for (const r of state.reports) if (inWindow(r)) n++;
+        stripChip.textContent = `${fmtSpan(win.to - win.from)} window, ${plural(n, "report")} \xB7 Clear`;
+        stripChip.hidden = false;
+      } else stripChip.hidden = true;
+    }
+    function toggleStrip(value) {
+      state.stripCollapsed = value === void 0 ? !state.stripCollapsed : value;
+      timeline.classList.toggle("collapsed", state.stripCollapsed);
+      stripChevron.textContent = state.stripCollapsed ? "\u25B8" : "\u25BE";
+      if (value === void 0) persist();
+    }
+    function setWindow(from, to) {
+      state.timeWindow = from <= to ? { from, to } : { from: to, to: from };
+      afterWindowChange();
+    }
+    function clearWindow() {
+      if (!state.timeWindow) return;
+      state.timeWindow = null;
+      afterWindowChange();
+    }
+    function afterWindowChange() {
+      renderLeft();
+      renderStream();
+      renderDetails();
+      renderStrip();
+    }
+    const barAt = (target) => {
+      const node = target && typeof target.closest === "function" ? target.closest(".bar") : null;
+      const i = node ? Number(node.getAttribute("data-index")) : -1;
+      return Number.isInteger(i) && i >= 0 && i < bars.length ? i : -1;
+    };
+    let brush = null;
+    let swallowClick = false;
+    const paintBrush = () => {
+      const lo = brush ? Math.min(brush.a, brush.b) : -1;
+      const hi = brush ? Math.max(brush.a, brush.b) : -2;
+      const nodes = barNodes();
+      for (let i = 0; i < nodes.length; i++) nodes[i].classList.toggle("brushing", i >= lo && i <= hi);
+    };
+    stripBars.addEventListener("mousedown", (e) => {
+      swallowClick = false;
+      const i = barAt(e.target);
+      if (i < 0) return;
+      brush = { a: i, b: i };
+    });
+    stripBars.addEventListener("mousemove", (e) => {
+      if (!brush) return;
+      const i = barAt(e.target);
+      if (i < 0 || i === brush.b) return;
+      brush.b = i;
+      paintBrush();
+    });
+    window.addEventListener("mouseup", (e) => {
+      if (!brush) return;
+      const i = barAt(e.target);
+      if (i >= 0) brush.b = i;
+      const { a, b } = brush;
+      brush = null;
+      paintBrush();
+      if (a === b) return;
+      swallowClick = true;
+      setWindow(bars[Math.min(a, b)].from, bars[Math.max(a, b)].to);
+    });
+    stripBars.addEventListener("click", (e) => {
+      if (swallowClick) {
+        swallowClick = false;
+        return;
+      }
+      const i = barAt(e.target);
+      if (i >= 0) selectCommitBar(bars[i].key);
+    });
+    stripBars.addEventListener("keydown", (e) => {
+      swallowClick = false;
+      const key = e.key;
+      if (key !== "ArrowLeft" && key !== "ArrowRight" && key !== "Home" && key !== "End") return;
+      const nodes = barNodes();
+      const i = nodes.indexOf(document.activeElement);
+      if (i < 0) return;
+      e.preventDefault();
+      const to = key === "ArrowLeft" ? Math.max(0, i - 1) : key === "ArrowRight" ? Math.min(nodes.length - 1, i + 1) : key === "Home" ? 0 : nodes.length - 1;
+      nodes[to].focus();
+    });
+    function selectCommitBar(key) {
+      showCommit(key);
+      if (state.view !== "commits") setView("commits");
+      renderStrip();
+    }
     function renderLeft() {
       if (state.view === "tree") renderTree();
       else if (state.view === "offenders") renderOffenders();
@@ -1627,10 +1840,73 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     }
     const rowEls = /* @__PURE__ */ new Map();
     const treeList = virtualList(tree, ROW_H, ({ node, depth }) => rowFor(node, depth));
-    const emptyEl = el("div", { class: "empty" }, [
-      el("div", { text: "No re-renders reported yet." }),
-      el("div", null, ["Call ", el("code", { text: "init({ notifier: createDevtoolsNotifier() })" }), " in the page, or enable injection in Settings, then interact with it."])
-    ]);
+    const emptyEl = el("div", { class: "empty" });
+    function trackingSentence(t) {
+      const what = t.mode === "all" ? "Tracking every component" : t.mode === "memoized" ? "Tracking every React.memo and PureComponent" : "Tracking only components marked with track()";
+      const parts = [what];
+      if (t.include.length) parts.push(`${t.mode === "marked" ? "and" : "plus"} names matching ${t.include.join(", ")}`);
+      if (t.exclude.length) parts.push(`except ${t.exclude.join(", ")}`);
+      const rendered = `${t.renderedCount}${t.overflow ? "+" : ""} component${t.renderedCount === 1 ? "" : "s"} rendered`;
+      return `${parts.join(", ")}; ${rendered}, ${t.trackedCount} of them tracked.`;
+    }
+    function renderEmpty() {
+      emptyEl.textContent = "";
+      emptyEl.append(el("div", { class: "empty-head", text: "No re-renders reported yet." }));
+      const t = state.library?.tracking;
+      if (!t) {
+        emptyEl.append(
+          el("div", null, ["Call ", el("code", { text: "init({ notifier: createDevtoolsNotifier() })" }), " in the page, or enable injection in Settings, then interact with it."])
+        );
+        return;
+      }
+      emptyEl.append(el("div", { class: "empty-tracking", text: trackingSentence(t) }));
+      if (t.mode === "all") {
+        emptyEl.append(el("div", { text: "Every component is tracked, so this is waiting for a re-render: interact with the page. The first render of a component is never reported." }));
+        return;
+      }
+      const untracked = t.renderedCount - t.trackedCount;
+      emptyEl.append(
+        el("div", {
+          text: untracked > 0 ? `${untracked} component${untracked === 1 ? "" : "s"} rendered without being tracked. Widen what is tracked, or interact with the page if the tracked ones simply have not re-rendered yet.` : "Interact with the page: the first render of a component is never reported, only re-renders."
+        })
+      );
+      if (!transport.configure) return;
+      const trackAll = el("button", { class: "primary", onclick: () => void applyTracking({ trackAllComponents: true }) }, "Track every component");
+      const match = el("input", { class: "empty-match", type: "text", placeholder: "Name or /regex/", "aria-label": "Track components matching" });
+      const addMatch = () => {
+        const value = match.value.trim();
+        if (!value) return;
+        const include = (state.library?.tracking?.include || []).slice();
+        if (!include.includes(value)) include.push(value);
+        match.value = "";
+        void applyTracking({ include });
+      };
+      match.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") addMatch();
+      });
+      emptyEl.append(
+        el("div", { class: "empty-actions" }, [trackAll, match, el("button", { onclick: addMatch }, "Track components matching\u2026")])
+      );
+    }
+    async function applyTracking(patch) {
+      if (!transport.configure) return;
+      try {
+        const applied = await transport.configure(patch);
+        if (state.library) {
+          if (applied) state.library.options = applied;
+          const t = state.library.tracking;
+          if (t) {
+            if (patch.trackAllComponents) t.mode = "all";
+            if (patch.include) t.include = patch.include;
+          }
+          transport.storage?.set("settings", Object.assign({}, state.library.options));
+        }
+        toast("Applied");
+        renderTree();
+      } catch (e) {
+        toast(`Failed: ${e.message}`);
+      }
+    }
     function renderTree() {
       const flat = [];
       const walk = (node, depth) => {
@@ -1642,6 +1918,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       };
       walk(state.tree, 0);
       if (flat.length === 0) {
+        renderEmpty();
         if (!emptyEl.parentNode) tree.append(emptyEl);
       } else emptyEl.remove();
       if (rowEls.size > flat.length * 2 + 64) {
@@ -1698,8 +1975,9 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       chevron.textContent = node.expanded ? "\u25BE" : "\u25B8";
       const badges = row.querySelector(".badges");
       badges.textContent = "";
-      if (node.avoidable) badges.append(el("span", { class: "badge avoid", title: "avoidable re-renders", text: String(node.avoidable) }));
-      if (node.total) badges.append(el("span", { class: "badge", title: "re-renders", text: String(node.total) }));
+      const counts = nodeCounts(node);
+      if (counts.avoidable) badges.append(el("span", { class: "badge avoid", title: "avoidable re-renders", text: String(counts.avoidable) }));
+      if (counts.total) badges.append(el("span", { class: "badge", title: "re-renders", text: String(counts.total) }));
       if (node.flash) {
         node.flash = false;
         if (Date.now() - (node.flashAt || 0) < 1e3) {
@@ -1754,7 +2032,11 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
           toggleSettings(false);
           return;
         }
-        if (inField) target.blur();
+        if (inField) {
+          target.blur();
+          return;
+        }
+        clearWindow();
         return;
       }
       if (inField || e.ctrlKey || e.metaKey || e.altKey) return;
@@ -1862,6 +2144,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       state.tab = "commit";
       renderLeft();
       renderDetails();
+      renderStrip();
     }
     function showRoot(name) {
       state.selectedRoot = name;
@@ -2438,6 +2721,16 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       status.querySelector(".status-text").textContent = text;
       tabChip.hidden = !state.tabLabel;
       tabChip.textContent = state.tabLabel || "";
+      appPicker.hidden = state.apps.length < 2;
+      if (!appPicker.hidden) {
+        const want = state.apps.map((a) => `${a.id}:${a.label}`).join("|");
+        if (appPicker.dataset.apps !== want) {
+          appPicker.dataset.apps = want;
+          appPicker.textContent = "";
+          for (const a of state.apps) appPicker.append(el("option", { value: a.id, text: a.label || a.id }));
+        }
+        if (state.appId) appPicker.value = state.appId;
+      }
       banner.textContent = "";
       const warnings = [];
       if (lib && typeof lib.protocol === "number" && lib.protocol > PROTOCOL) warnings.push(`The page runs a newer rerender-lens (protocol ${lib.protocol}) than this panel (${PROTOCOL}). Update the extension.`);
@@ -2457,6 +2750,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     function setLibrary(info) {
       state.library = info;
       renderStatus();
+      if (emptyEl.parentNode) renderEmpty();
       if (state.settingsOpen) void renderSettings();
       if (state.flashOn) transport.flashAvoidable?.(true);
     }
@@ -2634,6 +2928,13 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
           state.library = null;
           renderStatus();
           break;
+        case "apps": {
+          const p = isRecord(message.payload) ? message.payload : {};
+          state.apps = Array.isArray(p.list) ? p.list : [];
+          state.appId = typeof p.selected === "string" ? p.selected : null;
+          renderStatus();
+          break;
+        }
         case "hello":
           if (isRecord(message.payload)) setLibrary(message.payload);
           break;
@@ -3251,6 +3552,8 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
   function floodReports(n) {
     const out = [];
     const components = Math.max(10, Math.floor(n / 10));
+    const spread = 9e4;
+    const t0 = Date.now() - spread;
     for (let i = 0; i < n; i++) {
       const id = i % components;
       const depth = 1 + id % 6;
@@ -3258,6 +3561,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       for (let d = 1; d < depth; d++) path.push(`Section${(id * 7 + d) % 40}`);
       const avoidable = id % 3 !== 0;
       out.push({
+        receivedAt: t0 + Math.round(i / Math.max(1, n - 1) * spread),
         component: `Item${id}`,
         path,
         trigger: avoidable ? "parent" : "props",
@@ -3327,14 +3631,22 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     return transport;
   }
   function createRelayClientTransport(relayUrl, ES = EventSource) {
-    const base = relayUrl.replace(/\/$/, "");
+    const [rawBase, relayQuery = ""] = relayUrl.split("?");
+    const base = (rawBase ?? "").replace(/\/$/, "");
+    const relayToken = new URLSearchParams(relayQuery).get("token");
+    const auth = relayToken ? `token=${encodeURIComponent(relayToken)}` : "";
     let listener = null;
     let stream = null;
     let appsOnline = null;
+    let roster = [];
+    let selected = null;
     const emit = (m) => {
       if (listener) listener(m);
     };
-    const post = (message) => fetch(`${base}/message`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(message) }).then(() => void 0);
+    const post = (message) => {
+      const body = selected && isRecord(message) && message.__rerenderLensCmd === true ? { ...message, app: selected } : message;
+      return fetch(`${base}/message${auth ? `?${auth}` : ""}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }).then(() => void 0);
+    };
     const { bridge, reply } = commandBridge(post, 2e3);
     const handleData = (data) => {
       let parsed;
@@ -3346,12 +3658,21 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       for (const m of Array.isArray(parsed) ? parsed : [parsed]) {
         if (!isRecord(m) || reply(m)) continue;
         if (m.__rerenderLens === true && m.type === "relay") {
-          const apps = isRecord(m.payload) && typeof m.payload.apps === "number" ? m.payload.apps : 0;
+          const p = isRecord(m.payload) ? m.payload : {};
+          const apps = typeof p.apps === "number" ? p.apps : 0;
+          roster = Array.isArray(p.list) ? p.list : [];
           const wasOnline = appsOnline;
+          const wasSelected = selected;
           appsOnline = apps;
-          if (apps > 0 && (wasOnline === null || wasOnline === 0)) void attach();
+          if (!roster.length) selected = null;
+          else if (!selected || !roster.some((a) => a.id === selected)) selected = roster[0].id;
+          emit({ type: "apps", payload: { list: roster, selected } });
+          if (apps > 0 && (wasOnline === null || wasOnline === 0 || selected !== wasSelected)) void attach();
           else if (apps === 0) emit({ type: "disconnected" });
-        } else if (m.__rerenderLens === true && typeof m.type === "string") emit({ type: m.type, version: typeof m.version === "number" ? m.version : void 0, payload: m.payload });
+        } else if (m.__rerenderLens === true && typeof m.type === "string") {
+          if (typeof m.app === "string" && selected && m.app !== selected) continue;
+          emit({ type: m.type, version: typeof m.version === "number" ? m.version : void 0, payload: m.payload });
+        }
       }
     };
     async function attach() {
@@ -3368,10 +3689,17 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     const transport = {
       origin: base,
       tabLabel: `relay ${base.replace(/^https?:\/\//, "")}`,
+      selectApp(id) {
+        if (id === selected || !roster.some((a) => a.id === id)) return;
+        selected = id;
+        emit({ type: "apps", payload: { list: roster, selected } });
+        emit({ type: "navigated" });
+        void attach();
+      },
       subscribe(fn) {
         listener = fn;
         const open = () => {
-          stream = new ES(`${base}/events?role=panel`);
+          stream = new ES(`${base}/events?role=panel${auth ? `&${auth}` : ""}`);
           stream.onmessage = (e) => handleData(e.data);
           stream.onerror = () => {
             emit({ type: "disconnected" });