rerender-lens 0.4.0 → 0.7.0

package/panel/panel.js

@@ -1,190 +1,288 @@
 /* Built from extension/src/panel.ts by `npm run build`; do not edit by hand. */
 "use strict";
 (() => {
-  // extension/src/panel.ts
-  var PROTOCOL = 2;
-  var KIND_LABEL = {
-    "deep-equal": "equal by value",
-    function: "new function",
-    element: "equal element",
-    different: "changed",
-    added: "added",
-    removed: "removed"
-  };
-  var AVOIDABLE_KINDS = /* @__PURE__ */ new Set(["deep-equal", "function", "element"]);
-  var FN_PREFIX = "\u0192 ";
-  var MAX_REPORTS = 2e3;
-  var MAX_PER_NODE = 200;
-  var MAX_COMMITS = 500;
-  var MAX_PER_COMMIT = 500;
-  var THROTTLE_MIN_REPORTS = 200;
-  var BEST_FIX_INTERVAL = 500;
-  var LEFT_RENDER_INTERVAL = 250;
-  var SYNC_RETRY_MIN = 500;
-  var SYNC_RETRY_MAX = 5e3;
-  var SYNC_RETRIES = 20;
-  var NAVIGATION_SETTLE = 1200;
-  var ROW_H = 22;
-  var ITEM_H = 20;
-  var OVERSCAN = 8;
-  var FALLBACK_VIEWPORT = 800;
-  function el(tag, attrs, children) {
-    const node = document.createElement(tag);
-    if (attrs) {
-      for (const k of Object.keys(attrs)) {
-        const v = attrs[k];
-        if (k === "class") node.className = String(v);
-        else if (k === "text") node.textContent = String(v);
-        else if (k.startsWith("on")) {
-          if (typeof v === "function") node.addEventListener(k.slice(2), v);
-        } else if (v === true) node.setAttribute(k, "");
-        else if (v !== void 0 && v !== null && v !== false) node.setAttribute(k, String(v));
-      }
-    }
-    if (children) {
-      for (const c of [].concat(children)) if (c != null) node.append(c);
-    }
-    return node;
+  // src/diff.ts
+  var REACT_ELEMENT = /* @__PURE__ */ Symbol.for("react.element");
+  var REACT_TRANSITIONAL_ELEMENT = /* @__PURE__ */ Symbol.for("react.transitional.element");
+  function isReactElement(v) {
+    if (typeof v !== "object" || v === null) return false;
+    const t = v.$$typeof;
+    return t === REACT_ELEMENT || t === REACT_TRANSITIONAL_ELEMENT;
   }
-  function fmtTime(ms) {
-    const d = new Date(ms);
-    const p = (n, w) => String(n).padStart(w, "0");
-    return `${p(d.getHours(), 2)}:${p(d.getMinutes(), 2)}:${p(d.getSeconds(), 2)}.${p(d.getMilliseconds(), 3)}`;
-  }
-  var fmtMs = (n) => typeof n === "number" && Number.isFinite(n) ? `${n.toFixed(1)} ms` : "";
-  var plural = (n, word) => `${n} ${word}${n === 1 ? "" : "s"}`;
-  var componentList = (m) => [...m].map(([c, n]) => `<${c}>${n > 1 ? " \xD7" + n : ""}`).join(", ");
-  function changesOf(report) {
-    return [].concat(report.propChanges || [], report.stateChanges || [], report.hookChanges || []);
+  function isPlainObject(v) {
+    if (typeof v !== "object" || v === null) return false;
+    const proto = Object.getPrototypeOf(v);
+    return proto === Object.prototype || proto === null;
   }
-  function summarize(report) {
-    const counts = /* @__PURE__ */ new Map();
-    for (const c of changesOf(report)) counts.set(c.kind, (counts.get(c.kind) || 0) + 1);
-    if (counts.size === 0) return "no changes";
-    return [...counts].map(([k, n]) => `${n} ${KIND_LABEL[k] || k}`).join(", ");
+  function remember(seen, a, b) {
+    let set = seen.get(a);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      seen.set(a, set);
+    }
+    if (set.has(b)) return true;
+    set.add(b);
+    return false;
   }
-  var isRecord = (v) => typeof v === "object" && v !== null;
-  function normalizeReport(p) {
-    if (!isRecord(p) || typeof p.component !== "string") return null;
-    const arr = (x) => Array.isArray(x) ? x.filter((c) => isRecord(c) && typeof c.path === "string") : [];
-    const props = isRecord(p.props) ? p.props : {};
-    const parent = isRecord(p.parent) && typeof p.parent.name === "string" ? { name: p.parent.name, trigger: typeof p.parent.trigger === "string" ? p.parent.trigger : "parent" } : null;
-    const r = {
-      component: p.component,
-      instanceId: typeof p.instanceId === "number" ? p.instanceId : 0,
-      commitId: typeof p.commitId === "number" ? p.commitId : 0,
-      renderCount: typeof p.renderCount === "number" ? p.renderCount : 0,
-      trigger: typeof p.trigger === "string" ? p.trigger : "parent",
-      avoidable: !!p.avoidable,
-      props: { prev: isRecord(props.prev) ? props.prev : {}, next: isRecord(props.next) ? props.next : {} },
-      propChanges: arr(p.propChanges),
-      stateChanges: arr(p.stateChanges),
-      hookChanges: arr(p.hookChanges),
-      parent,
-      owner: typeof p.owner === "string" ? p.owner : null,
-      path: Array.isArray(p.path) ? p.path.filter((x) => typeof x === "string") : [],
-      reasons: Array.isArray(p.reasons) ? p.reasons.filter((x) => typeof x === "string") : [],
-      time: typeof p.time === "number" ? p.time : 0,
-      receivedAt: typeof p.receivedAt === "number" ? p.receivedAt : 0
+  var scope = null;
+  var DEFAULT_DIFF_BUDGET = 5e4;
+  function beginDiffScope(budget = 2e5) {
+    const previous = scope;
+    scope = { cache: /* @__PURE__ */ new WeakMap(), remaining: budget, exhausted: false };
+    return () => {
+      scope = previous;
     };
-    if (typeof p.selfDuration === "number") r.selfDuration = p.selfDuration;
-    if (typeof p.treeDuration === "number") r.treeDuration = p.treeDuration;
-    if (typeof p.memoized === "boolean") r.memoized = p.memoized;
-    if (typeof p.commitPriority === "string") r.commitPriority = p.commitPriority;
-    if (Array.isArray(p.hookState)) r.hookState = p.hookState.filter((h) => isRecord(h) && typeof h.path === "string");
-    if (Array.isArray(p.contexts)) r.contexts = p.contexts.filter((c) => isRecord(c) && typeof c.name === "string");
-    if (isRecord(p.state)) r.state = p.state;
-    if (Array.isArray(p.updaters)) r.updaters = p.updaters.filter((u) => typeof u === "string");
-    if (p.commitCause === "effect-after-commit" || p.commitCause === "suspense-resolved") r.commitCause = p.commitCause;
-    if (typeof p.afterCommit === "number") r.afterCommit = p.afterCommit;
-    if (typeof p.key === "string") r.key = p.key;
-    if (isRecord(p.source) && typeof p.source.fileName === "string") r.source = p.source;
-    return r;
   }
-  function valueNode(v, depth = 0) {
-    if (v === null || v === void 0) return el("span", { class: "v nil", text: String(v) });
-    const t = typeof v;
-    if (typeof v === "string") {
-      if (v.startsWith(FN_PREFIX)) return el("span", { class: "v fn", text: v });
-      if (/^<[^>]+>$/.test(v)) return el("span", { class: "v", text: v });
-      return el("span", { class: "v str", text: JSON.stringify(v) });
+  function deepEqual(a, b, seen = /* @__PURE__ */ new Map()) {
+    if (Object.is(a, b)) return true;
+    if (typeof a !== typeof b) return false;
+    if (typeof a !== "object" || a === null || b === null) return false;
+    if (!scope) {
+      const end = beginDiffScope(DEFAULT_DIFF_BUDGET);
+      try {
+        return deepEqual(a, b, seen);
+      } finally {
+        end();
+      }
+    }
+    const sc = scope;
+    const objA = a;
+    const objB = b;
+    const hit = sc.cache.get(objA)?.get(objB);
+    if (hit !== void 0) return hit;
+    if (--sc.remaining < 0) {
+      sc.exhausted = true;
+      return false;
     }
-    if (t === "number" || t === "bigint") return el("span", { class: "v num", text: String(v) });
-    if (t === "boolean") return el("span", { class: "v bool", text: String(v) });
-    if (Array.isArray(v)) {
-      const short = v.length <= 4 && v.every((x) => typeof x !== "object" || x === null);
-      if (short) {
-        const s = el("span", { class: "v" }, "[");
-        v.forEach((x, i) => {
-          if (i) s.append(", ");
-          s.append(valueNode(x, depth + 1));
-        });
-        s.append("]");
-        return s;
+    const result = deepEqualObjects(objA, objB, seen);
+    let m = sc.cache.get(objA);
+    if (!m) {
+      m = /* @__PURE__ */ new WeakMap();
+      sc.cache.set(objA, m);
+    }
+    m.set(objB, result);
+    return result;
+  }
+  function deepEqualObjects(a, b, seen) {
+    const objA = a;
+    const objB = b;
+    if (remember(seen, objA, objB)) return true;
+    if (a instanceof Date) return b instanceof Date && a.getTime() === b.getTime();
+    if (a instanceof RegExp) return b instanceof RegExp && a.source === b.source && a.flags === b.flags;
+    if (Array.isArray(a)) {
+      if (!Array.isArray(b) || a.length !== b.length) return false;
+      for (let i = 0; i < a.length; i++) if (!deepEqual(a[i], b[i], seen)) return false;
+      return true;
+    }
+    if (Array.isArray(b)) return false;
+    if (ArrayBuffer.isView(a)) {
+      if (!ArrayBuffer.isView(b) || a.constructor !== b.constructor) return false;
+      const ta = a;
+      const tb = b;
+      if (ta.length !== tb.length) return false;
+      for (let i = 0; i < ta.length; i++) if (ta[i] !== tb[i]) return false;
+      return true;
+    }
+    if (a instanceof Map) {
+      if (!(b instanceof Map) || a.size !== b.size) return false;
+      for (const [k, v] of a) {
+        if (!b.has(k) || !deepEqual(v, b.get(k), seen)) return false;
       }
-      return objectDetails(`Array(${v.length})`, v);
+      return true;
     }
-    const o = v;
-    if (o.$type === "element") {
-      const props = isRecord(o.props) ? o.props : {};
-      const label2 = `<${String(o.name)}${o.key !== void 0 ? ` key=${JSON.stringify(o.key)}` : ""}>`;
-      return Object.keys(props).length ? objectDetails(label2, props) : el("span", { class: "v", text: label2 });
+    if (a instanceof Set) {
+      if (!(b instanceof Set) || a.size !== b.size) return false;
+      if (a.size > 50) {
+        for (const v of a) if (!b.has(v)) return false;
+        return true;
+      }
+      outer: for (const v of a) {
+        if (b.has(v)) continue;
+        for (const w of b) if (deepEqual(v, w, seen)) continue outer;
+        return false;
+      }
+      return true;
     }
-    if (o.$type === "Date") return el("span", { class: "v", text: `Date(${String(o.value)})` });
-    if (o.$type === "RegExp") return el("span", { class: "v", text: String(o.value) });
-    if (o.$type === "Map" && Array.isArray(o.entries)) return objectDetails(`Map(${o.entries.length})`, o.entries);
-    if (o.$type === "Set" && Array.isArray(o.values)) return objectDetails(`Set(${o.values.length})`, o.values);
-    const keys = Object.keys(o).filter((k) => k !== "$type");
-    const label = `${o.$type ? String(o.$type) + " " : ""}{${keys.slice(0, 3).join(", ")}${keys.length > 3 ? ", ..." : ""}}`;
-    return objectDetails(label, o);
+    if (isReactElement(a)) {
+      if (!isReactElement(b)) return false;
+      return a.type === b.type && a.key === b.key && deepEqual(a.props, b.props, seen);
+    }
+    if (isPlainObject(a) && isPlainObject(b)) {
+      const ka = Object.keys(a);
+      const kb = Object.keys(b);
+      if (ka.length !== kb.length) return false;
+      const rb = b;
+      for (const k of ka) {
+        if (!Object.prototype.hasOwnProperty.call(b, k)) return false;
+        if (!deepEqual(a[k], rb[k], seen)) return false;
+      }
+      return true;
+    }
+    return false;
   }
-  function objectDetails(label, obj) {
-    const d = el("details", { class: "obj" }, [el("summary", { text: label })]);
-    d.addEventListener(
-      "toggle",
-      () => {
-        if (d.open && !d.querySelector("pre")) d.append(el("pre", { text: JSON.stringify(obj, null, 2) }));
-      },
-      { once: true }
-    );
-    return d;
+  var AVOIDABLE_KINDS = /* @__PURE__ */ new Set(["deep-equal", "function", "element"]);
+  function joinPath(base, key) {
+    if (typeof key === "number") return `${base}[${key}]`;
+    if (base === "") return key;
+    return /^[A-Za-z_$][\w$]*$/.test(key) ? `${base}.${key}` : `${base}[${JSON.stringify(key)}]`;
   }
-  function firstDifferentPath(a, b, base = "") {
-    if (a === b) return null;
-    if (!isRecord(a) || !isRecord(b)) return base || "(value)";
-    if (Array.isArray(a) !== Array.isArray(b)) return base || "(value)";
+  function firstDifferentPath(a, b, path = "", depth = 0) {
+    if (depth > 8) return path || "(value)";
     if (Array.isArray(a) && Array.isArray(b)) {
-      if (a.length !== b.length) return base ? `${base}.length` : "length";
+      if (a.length !== b.length) return path ? `${path}.length` : "length";
       for (let i = 0; i < a.length; i++) {
-        const p = firstDifferentPath(a[i], b[i], `${base}[${i}]`);
-        if (p) return p;
+        if (!deepEqual(a[i], b[i])) return firstDifferentPath(a[i], b[i], joinPath(path, i), depth + 1);
       }
       return null;
     }
-    const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
-    for (const k of keys) {
-      const p = firstDifferentPath(a[k], b[k], base ? `${base}.${k}` : k);
-      if (p) return p;
+    if (isPlainObject(a) && isPlainObject(b)) {
+      const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+      for (const k of keys) {
+        if (!deepEqual(a[k], b[k])) return firstDifferentPath(a[k], b[k], joinPath(path, k), depth + 1);
+      }
+      return null;
     }
-    return null;
+    return deepEqual(a, b) ? null : path || "(value)";
   }
-  function diffLeaves(a, b, limit = 20, base = "", out = []) {
-    if (out.length >= limit || a === b) return out;
-    if (!isRecord(a) || !isRecord(b) || Array.isArray(a) !== Array.isArray(b)) {
-      out.push({ path: base || "(value)", prev: a, next: b });
-      return out;
-    }
+  function diffLeaves(a, b, limit = 20, path = "", out = []) {
+    if (out.length >= limit || Object.is(a, b)) return out;
     if (Array.isArray(a) && Array.isArray(b)) {
       const n = Math.max(a.length, b.length);
-      for (let i = 0; i < n && out.length < limit; i++) diffLeaves(a[i], b[i], limit, `${base}[${i}]`, out);
+      for (let i = 0; i < n && out.length < limit; i++) diffLeaves(a[i], b[i], limit, joinPath(path, i), out);
       return out;
     }
-    for (const k of /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])) {
-      if (out.length >= limit) break;
-      diffLeaves(a[k], b[k], limit, base ? `${base}.${k}` : k, out);
+    if (isPlainObject(a) && isPlainObject(b)) {
+      for (const k of /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])) {
+        if (out.length >= limit) break;
+        diffLeaves(a[k], b[k], limit, joinPath(path, k), out);
+      }
+      return out;
     }
+    if (!deepEqual(a, b)) out.push({ path: path || "(value)", prev: a, next: b });
     return out;
   }
+
+  // src/causes.ts
+  var isAncestorReport = (anc, r) => anc.path.length < r.path.length && r.path[anc.path.length] === anc.component && anc.path.every((p, i) => r.path[i] === p);
+  var bump = (m, key, n = 1) => void m.set(key, (m.get(key) || 0) + n);
+  function indexByComponent(reports) {
+    const index = /* @__PURE__ */ new Map();
+    for (const r of reports) {
+      const list = index.get(r.component);
+      if (list) list.push(r);
+      else index.set(r.component, [r]);
+    }
+    return index;
+  }
+  function rootCauseOf(r, commitReports, index = indexByComponent(commitReports)) {
+    let cur = r;
+    const seen = /* @__PURE__ */ new Set([r]);
+    while (cur.trigger === "parent" && cur.parent) {
+      const parent = cur.parent;
+      const candidates = index.get(parent.name);
+      const p = candidates && candidates.find((x) => isAncestorReport(x, cur));
+      if (!p || seen.has(p)) return { name: parent.name, trigger: parent.trigger, report: null };
+      seen.add(p);
+      cur = p;
+    }
+    return cur === r ? null : { name: cur.component, trigger: cur.trigger, report: cur };
+  }
+  function rootCausesOf(reports) {
+    const roots = /* @__PURE__ */ new Map();
+    const rootByReport = /* @__PURE__ */ new Map();
+    const index = indexByComponent(reports);
+    let avoidable = 0;
+    let wasted = 0;
+    for (const r of reports) {
+      if (!r.avoidable) continue;
+      avoidable++;
+      if (typeof r.selfDuration === "number") wasted += r.selfDuration;
+      const root = rootCauseOf(r, reports, index);
+      const name = root ? root.name : r.parent && r.parent.name || "(unknown)";
+      const trigger = root ? root.trigger : r.parent && r.parent.trigger || "parent";
+      rootByReport.set(r, name);
+      let agg = roots.get(name);
+      if (!agg) {
+        agg = { name, trigger, count: 0, components: /* @__PURE__ */ new Map() };
+        roots.set(name, agg);
+      }
+      agg.count++;
+      bump(agg.components, r.component);
+    }
+    return { roots: [...roots.values()].sort((a, b) => b.count - a.count), rootByReport, avoidable, wasted };
+  }
+  function analyzeCommit(reports) {
+    const first = reports[0];
+    return {
+      id: first && typeof first.commitId === "number" ? first.commitId : 0,
+      total: reports.length,
+      ...rootCausesOf(reports),
+      contexts: contextAttribution(reports),
+      reports
+    };
+  }
+  function contextAttribution(reports) {
+    const byCtx = /* @__PURE__ */ new Map();
+    for (const r of reports) {
+      for (const c of r.hookChanges || []) {
+        if (c.hook !== "useContext" && !/^useContext/.test(c.path)) continue;
+        const m = /useContext\((.*)\)/.exec(c.path);
+        const name = m && m[1] ? m[1] : c.path;
+        let agg = byCtx.get(name);
+        if (!agg) {
+          agg = { name, consumers: 0, avoidable: 0, components: /* @__PURE__ */ new Map(), commits: /* @__PURE__ */ new Set(), providers: /* @__PURE__ */ new Map(), changedKeys: /* @__PURE__ */ new Set(), totalKeys: 0 };
+          byCtx.set(name, agg);
+        }
+        agg.consumers++;
+        if (AVOIDABLE_KINDS.has(c.kind)) agg.avoidable++;
+        bump(agg.components, r.component);
+        agg.commits.add(typeof r.commitId === "number" ? r.commitId : 0);
+        if (c.provider && c.provider.component) bump(agg.providers, c.provider.component);
+        if (c.changedKeys) for (const k of c.changedKeys) agg.changedKeys.add(k);
+        if (typeof c.totalKeys === "number") agg.totalKeys = Math.max(agg.totalKeys, c.totalKeys);
+      }
+    }
+    return [...byCtx.values()].sort((a, b) => b.consumers - a.consumers);
+  }
+  function cascadeTree(reports) {
+    const root = { name: "", children: /* @__PURE__ */ new Map(), report: null };
+    for (const r of reports) {
+      let node = root;
+      for (const seg of r.path.concat([r.component])) {
+        let next = node.children.get(seg);
+        if (!next) {
+          next = { name: seg, children: /* @__PURE__ */ new Map(), report: null };
+          node.children.set(seg, next);
+        }
+        node = next;
+      }
+      if (!node.report || r.avoidable) node.report = r;
+      node.count = (node.count || 0) + 1;
+      if (r.avoidable) node.avoidable = (node.avoidable || 0) + 1;
+    }
+    return root;
+  }
+  function rootCauseSummary(name, commits, analyze) {
+    const analyzeFn = analyze || ((_, reports) => analyzeCommit(reports));
+    const out = { name, trigger: "parent", commits: [], total: 0, components: /* @__PURE__ */ new Map(), affected: [] };
+    for (const [key, reports] of commits) {
+      const analysis = analyzeFn(key, reports);
+      const root = analysis.roots.find((x) => x.name === name);
+      if (!root) continue;
+      out.trigger = root.trigger;
+      out.commits.push({ key, analysis, count: root.count, components: root.components });
+      out.total += root.count;
+      for (const [c, n] of root.components) bump(out.components, c, n);
+      for (const r of reports) if (r.avoidable && analysis.rootByReport.get(r) === name) out.affected.push(r);
+    }
+    out.commits.reverse();
+    return out;
+  }
+
+  // src/fixes.ts
+  var MAX_FIX_REPORTS = 50;
+  var rootOf = (path) => path.split(/[.[]/)[0] || path;
+  var identifier = (name) => /^[A-Za-z_$][\w$]*$/.test(name) ? name : "value";
   function shortValue(v, max = 60) {
     let s;
     try {
@@ -195,12 +293,11 @@
     if (s === void 0) s = String(v);
     return s.length > max ? s.slice(0, max - 3) + "..." : s;
   }
-  var identifier = (name) => /^[A-Za-z_$][\w$]*$/.test(name) ? name : "value";
   function fixesFor(r) {
     const out = [];
     const ownerName = r.owner || r.parent && r.parent.name || null;
-    const changes = changesOf(r);
-    const avoidableProps = (r.propChanges || []).filter((c) => AVOIDABLE_KINDS.has(c.kind));
+    const propChanges = r.propChanges || [];
+    const changes = [...propChanges, ...r.stateChanges || [], ...r.hookChanges || []];
     if (r.avoidable && (changes.length === 0 || r.memoized === false)) {
       const identical = changes.length === 0;
       out.push({
@@ -219,9 +316,10 @@ export const ${r.component} = memo(function ${r.component}(props) {
 // class components: extend PureComponent instead`
       });
     }
-    for (const c of avoidableProps) {
+    for (const c of propChanges) {
+      if (!AVOIDABLE_KINDS.has(c.kind)) continue;
       const owner = ownerName || "?";
-      const root = c.path.split(/[.[]/)[0] || c.path;
+      const root = rootOf(c.path);
       const id = identifier(root);
       if (root === "children" && (c.kind === "element" || c.kind === "deep-equal")) {
         out.push({
@@ -243,9 +341,7 @@ const children = useMemo(() => (
 // static children: hoist them to module scope
 const STATIC = <em>hi</em>;`
         });
-        continue;
-      }
-      if (c.kind === "function") {
+      } else if (c.kind === "function") {
         out.push({
           kind: "useCallback",
           owner,
@@ -295,7 +391,7 @@ const ${id.toUpperCase()} = ${shortValue(c.next, 80)};`
         });
       }
     }
-    for (const c of [].concat(r.stateChanges || [], r.hookChanges || [])) {
+    for (const c of [...r.stateChanges || [], ...r.hookChanges || []]) {
       const isContext = c.hook === "useContext" || /^useContext/.test(c.path);
       const ctxName = isContext ? (/useContext\((.*)\)/.exec(c.path) || [])[1] || "Context" : "";
       const providerOwner = isContext && c.provider && c.provider.component ? c.provider.component : null;
@@ -319,17 +415,16 @@ const ${c.changedKeys[0]} = useContextSelector(${ctxName}, (v) => v.${c.changedK
       }
       if (!AVOIDABLE_KINDS.has(c.kind)) continue;
       if (isContext) {
-        const name = ctxName;
         out.push({
           kind: "contextValue",
-          owner: providerOwner || `${name}.Provider`,
+          owner: providerOwner || `${ctxName}.Provider`,
           target: r.component,
-          prop: name,
-          label: `memoize the ${name} provider value${providerOwner ? ` in <${providerOwner}>` : ""}`,
-          detail: `<${r.component}> re-rendered because ${name} produced a new value that is deep-equal to the previous one${providerOwner ? ` (Provider rendered by <${providerOwner}>)` : ""}.`,
-          snippet: `// ${providerOwner || `where <${name}.Provider> is rendered`}
+          prop: ctxName,
+          label: `memoize the ${ctxName} provider value${providerOwner ? ` in <${providerOwner}>` : ""}`,
+          detail: `<${r.component}> re-rendered because ${ctxName} produced a new value that is deep-equal to the previous one${providerOwner ? ` (Provider rendered by <${providerOwner}>)` : ""}.`,
+          snippet: `// ${providerOwner || `where <${ctxName}.Provider> is rendered`}
 const value = useMemo(() => ({ /* ... */ }), [/* deps */]);
-<${name}.Provider value={value}>`
+<${ctxName}.Provider value={value}>`
         });
       } else if (c.hook === "useSyncExternalStore") {
         const chain = c.custom || [];
@@ -348,163 +443,67 @@ import { shallowEqual } from 'react-redux';
 const slice = useSelector(selectSlice, shallowEqual);
 // or memoize: const selectSlice = createSelector([selectA, selectB], (a, b) => ({ a, b }));` : zustand ? `// ${r.component}
 import { useShallow } from 'zustand/react/shallow';
-const { a, b } = useStore(useShallow((s) => ({ a: s.a, b: s.b })));
-// or select a primitive: const a = useStore((s) => s.a);` : `// ${r.component}
-// getSnapshot must return the same reference while the data is unchanged
-const snapshot = useSyncExternalStore(subscribe, store.getSnapshot /* cached */);`
-        });
-      } else {
-        out.push({
-          kind: "bailout",
-          owner: r.component,
-          target: r.component,
-          prop: c.path,
-          label: `bail out before setting ${c.path} in <${r.component}>`,
-          detail: `${c.path} was set to a value deep-equal to the current one (new reference).`,
-          snippet: `// ${r.component}
-setState((prev) => (deepEqual(prev, next) ? prev : next));`
-        });
-      }
-    }
-    return out;
-  }
-  var fixKey = (f) => `${f.kind}|${f.owner}|${f.prop || f.target}`;
-  function rankFixes(reports) {
-    const byKey = /* @__PURE__ */ new Map();
-    for (const r of reports) {
-      if (!r.avoidable) continue;
-      for (const f of fixesFor(r)) {
-        const k = fixKey(f);
-        let agg = byKey.get(k);
-        if (!agg) {
-          agg = { ...f, key: k, count: 0, components: /* @__PURE__ */ new Map(), reports: [] };
-          byKey.set(k, agg);
-        }
-        agg.count++;
-        agg.components.set(r.component, (agg.components.get(r.component) || 0) + 1);
-        if (agg.reports.length < 50) agg.reports.push(r);
-      }
-    }
-    return [...byKey.values()].sort((a, b) => b.count - a.count || a.label.localeCompare(b.label));
-  }
-  var isAncestorReport = (anc, r) => anc.path.length < r.path.length && r.path[anc.path.length] === anc.component && anc.path.every((p, i) => r.path[i] === p);
-  function indexByComponent(reports) {
-    const index = /* @__PURE__ */ new Map();
-    for (const r of reports) {
-      const list = index.get(r.component);
-      if (list) list.push(r);
-      else index.set(r.component, [r]);
-    }
-    return index;
-  }
-  function rootCauseOf(r, commitReports, index = indexByComponent(commitReports)) {
-    let cur = r;
-    const seen = /* @__PURE__ */ new Set([r]);
-    while (cur.trigger === "parent" && cur.parent) {
-      const parent = cur.parent;
-      const candidates = index.get(parent.name);
-      const p = candidates && candidates.find((x) => isAncestorReport(x, cur));
-      if (!p || seen.has(p)) return { name: parent.name, trigger: parent.trigger, report: null };
-      seen.add(p);
-      cur = p;
-    }
-    return cur === r ? null : { name: cur.component, trigger: cur.trigger, report: cur };
-  }
-  function analyzeCommit(reports) {
-    const roots = /* @__PURE__ */ new Map();
-    const rootByReport = /* @__PURE__ */ new Map();
-    const index = indexByComponent(reports);
-    let avoidable = 0;
-    let wasted = 0;
-    for (const r of reports) {
-      if (!r.avoidable) continue;
-      avoidable++;
-      if (typeof r.selfDuration === "number") wasted += r.selfDuration;
-      const root = rootCauseOf(r, reports, index);
-      const name = root ? root.name : r.parent && r.parent.name || "(unknown)";
-      const trigger = root ? root.trigger : r.parent && r.parent.trigger || "parent";
-      rootByReport.set(r, name);
-      let agg = roots.get(name);
-      if (!agg) {
-        agg = { name, trigger, count: 0, components: /* @__PURE__ */ new Map() };
-        roots.set(name, agg);
-      }
-      agg.count++;
-      agg.components.set(r.component, (agg.components.get(r.component) || 0) + 1);
-    }
-    const first = reports[0];
-    return {
-      id: first ? first.commitId : 0,
-      receivedAt: first ? first.receivedAt : 0,
-      total: reports.length,
-      avoidable,
-      wasted,
-      roots: [...roots.values()].sort((a, b) => b.count - a.count),
-      rootByReport,
-      contexts: contextAttribution(reports),
-      fixes: rankFixes(reports),
-      reports
-    };
-  }
-  function contextAttribution(reports) {
-    const byCtx = /* @__PURE__ */ new Map();
-    for (const r of reports) {
-      for (const c of r.hookChanges || []) {
-        if (c.hook !== "useContext" && !/^useContext/.test(c.path)) continue;
-        const m = /useContext\((.*)\)/.exec(c.path);
-        const name = m && m[1] ? m[1] : c.path;
-        let agg = byCtx.get(name);
-        if (!agg) {
-          agg = { name, consumers: 0, avoidable: 0, components: /* @__PURE__ */ new Map(), commits: /* @__PURE__ */ new Set(), providers: /* @__PURE__ */ new Map(), changedKeys: /* @__PURE__ */ new Set(), totalKeys: 0 };
-          byCtx.set(name, agg);
-        }
-        agg.consumers++;
-        if (AVOIDABLE_KINDS.has(c.kind)) agg.avoidable++;
-        agg.components.set(r.component, (agg.components.get(r.component) || 0) + 1);
-        agg.commits.add(r.commitId);
-        if (c.provider && c.provider.component) agg.providers.set(c.provider.component, (agg.providers.get(c.provider.component) || 0) + 1);
-        if (c.changedKeys) for (const k of c.changedKeys) agg.changedKeys.add(k);
-        if (typeof c.totalKeys === "number") agg.totalKeys = Math.max(agg.totalKeys, c.totalKeys);
+const { a, b } = useStore(useShallow((s) => ({ a: s.a, b: s.b })));
+// or select a primitive: const a = useStore((s) => s.a);` : `// ${r.component}
+// getSnapshot must return the same reference while the data is unchanged
+const snapshot = useSyncExternalStore(subscribe, store.getSnapshot /* cached */);`
+        });
+      } else {
+        out.push({
+          kind: "bailout",
+          owner: r.component,
+          target: r.component,
+          prop: c.path,
+          label: `bail out before setting ${c.path} in <${r.component}>`,
+          detail: `${c.path} was set to a value deep-equal to the current one (new reference).`,
+          snippet: `// ${r.component}
+setState((prev) => (deepEqual(prev, next) ? prev : next));`
+        });
       }
     }
-    return [...byCtx.values()].sort((a, b) => b.consumers - a.consumers);
+    return out;
   }
-  function cascadeTree(reports) {
-    const root = { name: "", children: /* @__PURE__ */ new Map(), report: null };
+  var fixKey = (f) => `${f.kind}|${f.owner}|${f.prop || f.target}`;
+  function rankFixes(reports) {
+    const byKey = /* @__PURE__ */ new Map();
     for (const r of reports) {
-      let node = root;
-      for (const seg of r.path.concat([r.component])) {
-        let next = node.children.get(seg);
-        if (!next) {
-          next = { name: seg, children: /* @__PURE__ */ new Map(), report: null };
-          node.children.set(seg, next);
+      if (!r.avoidable) continue;
+      for (const f of fixesFor(r)) {
+        const key = fixKey(f);
+        let agg = byKey.get(key);
+        if (!agg) {
+          agg = { ...f, key, count: 0, components: {}, reports: [] };
+          byKey.set(key, agg);
         }
-        node = next;
+        agg.count++;
+        agg.components[r.component] = (agg.components[r.component] || 0) + 1;
+        if (agg.reports.length < MAX_FIX_REPORTS) agg.reports.push(r);
       }
-      if (!node.report || r.avoidable) node.report = r;
-      node.count = (node.count || 0) + 1;
-      if (r.avoidable) node.avoidable = (node.avoidable || 0) + 1;
     }
-    return root;
+    return [...byKey.values()].sort((a, b) => b.count - a.count || a.label.localeCompare(b.label));
   }
-  function rootCauseSummary(name, commits, analyze = (_, reports) => analyzeCommit(reports)) {
-    const out = { name, trigger: "parent", commits: [], total: 0, components: /* @__PURE__ */ new Map(), fixes: [] };
-    const affected = [];
-    for (const [key, reports] of commits) {
-      const analysis = analyze(key, reports);
-      const root = analysis.roots.find((x) => x.name === name);
-      if (!root) continue;
-      out.trigger = root.trigger;
-      out.commits.push({ key, analysis, count: root.count, components: root.components });
-      out.total += root.count;
-      for (const [c, n] of root.components) out.components.set(c, (out.components.get(c) || 0) + n);
-      for (const r of reports) if (r.avoidable && analysis.rootByReport.get(r) === name) affected.push(r);
+
+  // src/report.ts
+  var KIND_LABEL = {
+    "deep-equal": "equal by value",
+    function: "new function",
+    element: "equal element",
+    different: "changed",
+    added: "added",
+    removed: "removed"
+  };
+  function summarize(report) {
+    const counts = /* @__PURE__ */ new Map();
+    for (const c of [...report.propChanges || [], ...report.stateChanges || [], ...report.hookChanges || []]) {
+      counts.set(c.kind, (counts.get(c.kind) ?? 0) + 1);
     }
-    out.commits.reverse();
-    out.fixes = rankFixes(affected);
-    return out;
+    const parts = [...counts].map(([kind, n]) => `${n} ${KIND_LABEL[kind] || kind}`);
+    if (parts.length === 0) parts.push("no changes");
+    return parts.join(", ");
   }
-  function summarizeSession(session, reports) {
+
+  // src/sessions.ts
+  function summarizeReports(reports, meta = {}) {
     var _a;
     const byComponent = {};
     let avoidable = 0;
@@ -522,10 +521,10 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       }
     }
     return {
-      id: session.id,
-      name: session.name,
-      startedAt: session.startedAt,
-      endedAt: session.endedAt,
+      id: meta.id ?? `s${Date.now().toString(36)}`,
+      name: meta.name ?? "session",
+      startedAt: meta.startedAt ?? (reports[0]?.time ?? 0),
+      endedAt: meta.endedAt ?? (reports[reports.length - 1]?.time ?? null),
       total: reports.length,
       avoidable,
       wasted,
@@ -533,7 +532,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       fixes: rankFixes(reports).map((f) => ({ key: f.key, label: f.label, count: f.count }))
     };
   }
-  function compareSessions(before, after) {
+  function compareSummaries(before, after) {
     const names = /* @__PURE__ */ new Set([...Object.keys(before.byComponent), ...Object.keys(after.byComponent)]);
     const rows = [];
     for (const component of names) {
@@ -552,8 +551,159 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       avoidable: { before: before.avoidable, after: after.avoidable, delta: after.avoidable - before.avoidable },
       wasted: { before: before.wasted, after: after.wasted, delta: after.wasted - before.wasted },
       resolvedFixes: before.fixes.filter((f) => !afterKeys.has(f.key)),
-      newFixes: after.fixes.filter((f) => !beforeKeys.has(f.key))
+      newFixes: after.fixes.filter((f) => !beforeKeys.has(f.key)),
+      regressions: rows.filter((r) => r.delta > 0)
+    };
+  }
+  var summarizeSession = (session, reports) => summarizeReports(reports, session);
+  var compareSessions = compareSummaries;
+
+  // extension/src/panel.ts
+  var PROTOCOL = 2;
+  var FN_PREFIX = "\u0192 ";
+  var MAX_REPORTS = 2e3;
+  var MAX_PER_NODE = 200;
+  var MAX_COMMITS = 500;
+  var MAX_PER_COMMIT = 500;
+  var THROTTLE_MIN_REPORTS = 200;
+  var BEST_FIX_INTERVAL = 500;
+  var LEFT_RENDER_INTERVAL = 250;
+  var SYNC_RETRY_MIN = 500;
+  var SYNC_RETRY_MAX = 5e3;
+  var SYNC_RETRIES = 20;
+  var NAVIGATION_SETTLE = 1200;
+  var INFO_REFRESH_MS = 3e3;
+  var ROW_H = 22;
+  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) {
+      for (const k of Object.keys(attrs)) {
+        const v = attrs[k];
+        if (k === "class") node.className = String(v);
+        else if (k === "text") node.textContent = String(v);
+        else if (k.startsWith("on")) {
+          if (typeof v === "function") node.addEventListener(k.slice(2), v);
+        } else if (v === true) node.setAttribute(k, "");
+        else if (v !== void 0 && v !== null && v !== false) node.setAttribute(k, String(v));
+      }
+    }
+    if (children) {
+      for (const c of [].concat(children)) if (c != null) node.append(c);
+    }
+    return node;
+  }
+  function fmtTime(ms) {
+    const d = new Date(ms);
+    const p = (n, w) => String(n).padStart(w, "0");
+    return `${p(d.getHours(), 2)}:${p(d.getMinutes(), 2)}:${p(d.getSeconds(), 2)}.${p(d.getMilliseconds(), 3)}`;
+  }
+  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 || []);
+  }
+  var isRecord = (v) => typeof v === "object" && v !== null;
+  function normalizeReport(p) {
+    if (!isRecord(p) || typeof p.component !== "string") return null;
+    const arr = (x) => Array.isArray(x) ? x.filter((c) => isRecord(c) && typeof c.path === "string") : [];
+    const props = isRecord(p.props) ? p.props : {};
+    const parent = isRecord(p.parent) && typeof p.parent.name === "string" ? { name: p.parent.name, trigger: typeof p.parent.trigger === "string" ? p.parent.trigger : "parent" } : null;
+    const r = {
+      component: p.component,
+      instanceId: typeof p.instanceId === "number" ? p.instanceId : 0,
+      commitId: typeof p.commitId === "number" ? p.commitId : 0,
+      renderCount: typeof p.renderCount === "number" ? p.renderCount : 0,
+      trigger: typeof p.trigger === "string" ? p.trigger : "parent",
+      avoidable: !!p.avoidable,
+      props: { prev: isRecord(props.prev) ? props.prev : {}, next: isRecord(props.next) ? props.next : {} },
+      propChanges: arr(p.propChanges),
+      stateChanges: arr(p.stateChanges),
+      hookChanges: arr(p.hookChanges),
+      parent,
+      owner: typeof p.owner === "string" ? p.owner : null,
+      path: Array.isArray(p.path) ? p.path.filter((x) => typeof x === "string") : [],
+      reasons: Array.isArray(p.reasons) ? p.reasons.filter((x) => typeof x === "string") : [],
+      time: typeof p.time === "number" ? p.time : 0,
+      receivedAt: typeof p.receivedAt === "number" ? p.receivedAt : 0
     };
+    if (typeof p.selfDuration === "number") r.selfDuration = p.selfDuration;
+    if (typeof p.treeDuration === "number") r.treeDuration = p.treeDuration;
+    if (typeof p.memoized === "boolean") r.memoized = p.memoized;
+    if (p.compiled === true) r.compiled = true;
+    if (typeof p.commitPriority === "string") r.commitPriority = p.commitPriority;
+    if (Array.isArray(p.hookState)) r.hookState = p.hookState.filter((h) => isRecord(h) && typeof h.path === "string");
+    if (Array.isArray(p.contexts)) r.contexts = p.contexts.filter((c) => isRecord(c) && typeof c.name === "string");
+    if (isRecord(p.state)) r.state = p.state;
+    if (Array.isArray(p.updaters)) r.updaters = p.updaters.filter((u) => typeof u === "string");
+    if (p.commitCause === "effect-after-commit" || p.commitCause === "suspense-resolved") r.commitCause = p.commitCause;
+    if (typeof p.afterCommit === "number") r.afterCommit = p.afterCommit;
+    if (typeof p.key === "string") r.key = p.key;
+    if (isRecord(p.source) && typeof p.source.fileName === "string") r.source = p.source;
+    return r;
+  }
+  function valueNode(v, depth = 0) {
+    if (v === null || v === void 0) return el("span", { class: "v nil", text: String(v) });
+    const t = typeof v;
+    if (typeof v === "string") {
+      if (v.startsWith(FN_PREFIX)) return el("span", { class: "v fn", text: v });
+      if (/^<[^>]+>$/.test(v)) return el("span", { class: "v", text: v });
+      return el("span", { class: "v str", text: JSON.stringify(v) });
+    }
+    if (t === "number" || t === "bigint") return el("span", { class: "v num", text: String(v) });
+    if (t === "boolean") return el("span", { class: "v bool", text: String(v) });
+    if (Array.isArray(v)) {
+      const short = v.length <= 4 && v.every((x) => typeof x !== "object" || x === null);
+      if (short) {
+        const s = el("span", { class: "v" }, "[");
+        v.forEach((x, i) => {
+          if (i) s.append(", ");
+          s.append(valueNode(x, depth + 1));
+        });
+        s.append("]");
+        return s;
+      }
+      return objectDetails(`Array(${v.length})`, v);
+    }
+    const o = v;
+    if (o.$type === "element") {
+      const props = isRecord(o.props) ? o.props : {};
+      const label2 = `<${String(o.name)}${o.key !== void 0 ? ` key=${JSON.stringify(o.key)}` : ""}>`;
+      return Object.keys(props).length ? objectDetails(label2, props) : el("span", { class: "v", text: label2 });
+    }
+    if (o.$type === "Date") return el("span", { class: "v", text: `Date(${String(o.value)})` });
+    if (o.$type === "RegExp") return el("span", { class: "v", text: String(o.value) });
+    if (o.$type === "Map" && Array.isArray(o.entries)) return objectDetails(`Map(${o.entries.length})`, o.entries);
+    if (o.$type === "Set" && Array.isArray(o.values)) return objectDetails(`Set(${o.values.length})`, o.values);
+    const keys = Object.keys(o).filter((k) => k !== "$type");
+    const label = `${o.$type ? String(o.$type) + " " : ""}{${keys.slice(0, 3).join(", ")}${keys.length > 3 ? ", ..." : ""}}`;
+    return objectDetails(label, o);
+  }
+  function objectDetails(label, obj) {
+    const d = el("details", { class: "obj" }, [el("summary", { text: label })]);
+    d.addEventListener(
+      "toggle",
+      () => {
+        if (d.open && !d.querySelector("pre")) d.append(el("pre", { text: JSON.stringify(obj, null, 2) }));
+      },
+      { once: true }
+    );
+    return d;
+  }
+  function analyzeCommit2(reports) {
+    const first = reports[0];
+    return { ...analyzeCommit(reports), receivedAt: first ? first.receivedAt : 0, fixes: rankFixes(reports) };
+  }
+  function rootCauseSummary2(name, commits, analyze = (_, reports) => analyzeCommit2(reports)) {
+    const s = rootCauseSummary(name, commits, analyze);
+    return { ...s, fixes: rankFixes(s.affected) };
   }
   var PRIORITY_LABEL = { immediate: "discrete input", "user-blocking": "continuous input", normal: "transition / async", low: "low", idle: "idle" };
   function sourceContext(text, line, around = 3) {
@@ -710,7 +860,8 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     if (r.parent) by.append(el("div", { text: `Triggered by <${r.parent.name}> (${r.parent.trigger})` }));
     else by.append(el("div", { text: "Update started in this component" }));
     if (r.owner) by.append(el("div", { class: "meta", text: `Created by <${r.owner}>` }));
-    if (r.memoized === false) by.append(el("div", { class: "meta", text: "Not memoized (re-renders whenever its parent does)" }));
+    if (r.compiled) by.append(el("div", { class: "meta", text: "Compiled by React Compiler (output memoized per input; identical inputs make the render cheap)" }));
+    else if (r.memoized === false) by.append(el("div", { class: "meta", text: "Not memoized (re-renders whenever its parent does)" }));
     else if (r.memoized === true) by.append(el("div", { class: "meta", text: "Memoized (React.memo / PureComponent)" }));
     if (r.updaters && r.updaters.length) by.append(el("div", { text: `Update scheduled by ${r.updaters.map((u) => `<${u}>`).join(", ")}` }));
     if (r.commitCause === "effect-after-commit") by.append(el("div", { class: "cause effect", text: `Effect loop: state set right after commit #${r.afterCommit ?? "?"}` }));
@@ -852,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,
@@ -877,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 = [];
@@ -937,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)))),
@@ -958,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"],
@@ -1025,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;
@@ -1144,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);
@@ -1196,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);
@@ -1250,7 +1431,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     function analysisFor(key, reports) {
       const cached = commitAnalyses.get(key);
       if (cached && cached.len === reports.length) return cached.analysis;
-      const analysis = analyzeCommit(reports);
+      const analysis = analyzeCommit2(reports);
       commitAnalyses.set(key, { len: reports.length, analysis });
       return analysis;
     }
@@ -1351,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) {
@@ -1397,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() {
@@ -1443,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;
     }
@@ -1471,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();
@@ -1480,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) => {
@@ -1495,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) {
@@ -1551,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) {
@@ -1607,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;
@@ -1715,6 +2144,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       state.tab = "commit";
       renderLeft();
       renderDetails();
+      renderStrip();
     }
     function showRoot(name) {
       state.selectedRoot = name;
@@ -1981,7 +2411,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     }
     function renderRootDetails() {
       const name = state.selectedRoot;
-      const s = rootCauseSummary(name, state.commits, analysisFor);
+      const s = rootCauseSummary2(name, state.commits, analysisFor);
       details.append(
         el("div", { class: "details-header" }, [
           el("span", { class: "title" }, ["Root cause ", el("span", { class: "name", text: `<${name}>` })]),
@@ -2291,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.`);
@@ -2310,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);
     }
@@ -2434,6 +2875,33 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       const max = el("input", { type: "number", min: "0", value: String(current.maxReportsPerComponent || 0) });
       max.addEventListener("change", () => void applyOptions({ maxReportsPerComponent: Math.max(0, Number(max.value) || 0) }));
       sec.append(el("label", { class: "opt col" }, ["Stop printing a component after N reports (0 = never)", max]));
+      const help = el("div", { class: "section" }, [el("h3", { text: "Help" })]);
+      help.append(
+        el("div", { class: "meta", text: "Opens a GitHub issue prefilled with versions, options and counts. No report contents are included; attach an Export if it helps." }),
+        el("a", { class: "report-link", href: issueUrl(), target: "_blank", rel: "noreferrer", text: "Report a problem \u2197" })
+      );
+      body.append(help);
+    }
+    function issueUrl() {
+      const lib = state.library;
+      const ext = typeof chrome !== "undefined" && chrome.runtime && typeof chrome.runtime.getManifest === "function" ? chrome.runtime.getManifest().version : "n/a";
+      const react = lib?.react?.map((r) => `${r.version || "?"}${r.bundleType === 0 ? " (prod)" : ""}`).join(", ") || "not detected";
+      const transportLabel = state.tabLabel || (state.relay ? "content script" : state.polling ? "polling" : "none");
+      const lines = [
+        "### What happened",
+        "",
+        "(what you did, what you expected, what the panel showed)",
+        "",
+        "### Environment",
+        `- extension ${ext}, panel protocol ${PROTOCOL}, transport: ${transportLabel}`,
+        `- library ${lib?.library || "not detected"} (protocol ${lib?.protocol ?? "?"}), React ${react}${lib?.production ? ", production build" : ""}`,
+        `- options: ${JSON.stringify(lib?.options || {})}`,
+        `- overhead: ${lib?.overhead ? `${lib.overhead.totalMs.toFixed(1)} ms over ${lib.commits ?? 0} commits, worst ${lib.overhead.maxCommitMs.toFixed(1)} ms` : "n/a"}; reports skipped by the cap: ${lib?.truncated ?? 0}`,
+        `- buffered: ${state.reports.length} reports, ${totals.avoidable} avoidable; top fix: ${bestFix ? bestFix.label : "none"}`,
+        `- browser: ${typeof navigator !== "undefined" ? navigator.userAgent : "n/a"}`
+      ];
+      const params2 = new URLSearchParams({ title: "Panel: ", body: lines.join("\n"), labels: "bug" });
+      return `https://github.com/NexaLeaf/rerender-lens/issues/new?${params2.toString()}`;
     }
     function handle(message) {
       if (!isRecord(message)) return;
@@ -2460,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;
@@ -2590,12 +3065,28 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         const info = await io.bridge("info");
         if (info) {
           emit({ type: "hello", version: info.protocol, payload: info });
+          startInfoRefresh();
           return true;
         }
       } catch {
       }
       return false;
     }
+    let infoTimer = null;
+    function startInfoRefresh() {
+      if (infoTimer) return;
+      infoTimer = setInterval(() => {
+        if (disposed) return stopInfoRefresh();
+        io.bridge("info").then((info) => {
+          if (info) emit({ type: "hello", version: info.protocol, payload: info });
+          else stopInfoRefresh();
+        }).catch(() => stopInfoRefresh());
+      }, INFO_REFRESH_MS);
+    }
+    function stopInfoRefresh() {
+      if (infoTimer) clearInterval(infoTimer);
+      infoTimer = null;
+    }
     let syncGen = 0;
     let syncTimer = null;
     let disposed = false;
@@ -2603,6 +3094,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       syncGen++;
       if (syncTimer) clearTimeout(syncTimer);
       syncTimer = null;
+      stopInfoRefresh();
     }
     function syncWithRetry(onReady, initialDelay = 0) {
       cancelSync();
@@ -3060,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;
@@ -3067,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",
@@ -3136,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;
@@ -3155,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() {
@@ -3177,17 +3689,23 @@ 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" });
           };
         };
         open();
-        void attach();
       },
       replay: () => void bridge("replay"),
       clear: () => void bridge("clear"),
@@ -3272,7 +3790,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     createBroadcastTransport,
     createRelayClientTransport,
     sourceContext,
-    analysis: { firstDifferentPath, diffLeaves, fixesFor, rankFixes, rootCauseOf, analyzeCommit, contextAttribution, cascadeTree, rootCauseSummary, summarizeSession, compareSessions }
+    analysis: { firstDifferentPath, diffLeaves, fixesFor, rankFixes, rootCauseOf, analyzeCommit: analyzeCommit2, contextAttribution, cascadeTree, rootCauseSummary: rootCauseSummary2, summarizeSession, compareSessions }
   };
   window.RerenderLensPanel = api;
   var hasChrome = typeof chrome !== "undefined" && !!chrome && !!chrome.runtime && !!chrome.runtime.id;