rerender-lens 0.3.0 → 0.5.0

package/panel/panel.js

@@ -1,188 +1,288 @@
 /* Built from extension/src/panel.ts by `npm run build`; do not edit by hand. */
 "use strict";
 (() => {
-  // extension/src/panel.ts
-  var OPTIONAL_COLUMNS = [
-    { key: "places", label: "Places" },
-    { key: "lastSeen", label: "Last seen" }
-  ];
-  var VIRTUAL_THRESHOLD = 200;
-  var GRID_ROW_H = 26;
-  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 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 {
@@ -193,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({
@@ -217,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({
@@ -241,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,
@@ -293,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;
@@ -317,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 || [];
@@ -372,127 +469,41 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     for (const r of reports) {
       if (!r.avoidable) continue;
       for (const f of fixesFor(r)) {
-        const k = fixKey(f);
-        let agg = byKey.get(k);
+        const key = fixKey(f);
+        let agg = byKey.get(key);
         if (!agg) {
-          agg = { ...f, key: k, count: 0, components: /* @__PURE__ */ new Map(), reports: [] };
-          byKey.set(k, agg);
+          agg = { ...f, key, count: 0, components: {}, reports: [] };
+          byKey.set(key, agg);
         }
         agg.count++;
-        agg.components.set(r.component, (agg.components.get(r.component) || 0) + 1);
-        if (agg.reports.length < 50) agg.reports.push(r);
+        agg.components[r.component] = (agg.components[r.component] || 0) + 1;
+        if (agg.reports.length < MAX_FIX_REPORTS) 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 rootCauseOf(r, commitReports) {
-    let cur = r;
-    const seen = /* @__PURE__ */ new Set([r]);
-    while (cur.trigger === "parent" && cur.parent) {
-      const parent = cur.parent;
-      const p = commitReports.find((x) => x.component === parent.name && 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();
-    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);
-      const name = root ? root.name : r.parent && r.parent.name || "(unknown)";
-      const trigger = root ? root.trigger : r.parent && r.parent.trigger || "parent";
-      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),
-      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);
-      }
-    }
-    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) {
-    const out = { name, trigger: "parent", commits: [], total: 0, components: /* @__PURE__ */ new Map(), fixes: [] };
-    const affected = [];
-    for (const [key, reports] of commits) {
-      const analysis = analyzeCommit(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) continue;
-        const rc = rootCauseOf(r, reports);
-        if ((rc ? rc.name : r.parent && r.parent.name) === 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;
@@ -510,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,
@@ -521,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) {
@@ -540,69 +551,157 @@ 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;
+  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 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;
   }
-  var PRIORITY_LABEL = { immediate: "discrete input", "user-blocking": "continuous input", normal: "transition / async", low: "low", idle: "idle" };
-  var b64url = (bytes) => {
-    let s = "";
-    for (const b of bytes) s += String.fromCharCode(b);
-    return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
-  };
-  var unb64url = (s) => Uint8Array.from(atob(s.replace(/-/g, "+").replace(/_/g, "/")), (c) => c.charCodeAt(0));
-  async function transformBytes(bytes, transform) {
-    const source = new ReadableStream({
-      start(controller) {
-        controller.enqueue(bytes);
-        controller.close();
-      }
-    });
-    const reader = source.pipeThrough(transform).getReader();
-    const chunks = [];
-    let total = 0;
-    for (; ; ) {
-      const { value, done } = await reader.read();
-      if (done) break;
-      chunks.push(value);
-      total += value.length;
-    }
-    const out = new Uint8Array(total);
-    let offset = 0;
-    for (const c of chunks) {
-      out.set(c, offset);
-      offset += c.length;
-    }
-    return out;
-  }
-  async function encodeShare(report) {
-    const json = JSON.stringify(report);
-    const bytes = new TextEncoder().encode(json);
-    if (typeof CompressionStream === "function") {
-      try {
-        return "d." + b64url(await transformBytes(bytes, new CompressionStream("deflate-raw")));
-      } catch {
-      }
+  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) });
     }
-    return "j." + b64url(bytes);
-  }
-  async function decodeShare(value) {
-    const [kind, data] = value.split(".", 2);
-    if (!data) return null;
-    let bytes = unb64url(data);
-    if (kind === "d") {
-      if (typeof DecompressionStream !== "function") return null;
-      try {
-        bytes = await transformBytes(bytes, new DecompressionStream("deflate-raw"));
-      } catch {
-        return null;
+    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);
     }
-    try {
-      return normalizeReport(JSON.parse(new TextDecoder().decode(bytes)));
-    } catch {
-      return null;
+    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) {
     const lines = text.split("\n");
     const from = Math.max(1, line - around);
@@ -725,10 +824,6 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         const copy = actions.copy;
         bar.append(el("button", { onclick: () => copy(reportToMarkdown(r)) }, "\u2398 Copy as Markdown"));
       }
-      if (actions.share) {
-        const share = actions.share;
-        bar.append(el("button", { title: "Copy a link that opens this report in the panel", onclick: () => share(r) }, "\u{1F517} Copy link"));
-      }
       if (bar.children.length) head.append(bar);
       const loc = r.source;
       if (loc && loc.lineNumber && actions.readSource) {
@@ -761,7 +856,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 ?? "?"}` }));
@@ -922,16 +1018,13 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       flashOn: false,
       settingsOpen: false,
       origin: null,
-      legacyCommit: 0,
       tabLabel: transport.tabLabel ?? null,
       compact: false,
       sessions: [],
       recording: null,
       selectedSession: null,
       compareWith: null,
-      byInstance: false,
-      columns: [],
-      notes: {}
+      byInstance: false
     };
     let persistTimer = null;
     let queue = [];
@@ -1091,6 +1184,33 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     const measure = () => setCompact(root.clientWidth > 0 && root.clientWidth < 720);
     if (typeof ResizeObserver === "function") new ResizeObserver(measure).observe(root);
     else window.addEventListener("resize", measure);
+    const totals = { avoidable: 0, wasted: 0, perComponent: /* @__PURE__ */ new Map() };
+    let bestFix;
+    let bestFixAt = 0;
+    let bestFixGen = -1;
+    let bestFixTimer = null;
+    const throttled = () => state.reports.length >= THROTTLE_MIN_REPORTS;
+    function refreshBestFix() {
+      if (!totals.avoidable) {
+        bestFix = void 0;
+        bestFixGen = dataGen;
+        return;
+      }
+      if (bestFixGen === dataGen) return;
+      const now = Date.now();
+      if (throttled() && now - bestFixAt < BEST_FIX_INTERVAL) {
+        if (!bestFixTimer) {
+          bestFixTimer = setTimeout(() => {
+            bestFixTimer = null;
+            renderSummary();
+          }, BEST_FIX_INTERVAL - (now - bestFixAt));
+        }
+        return;
+      }
+      bestFixAt = now;
+      bestFixGen = dataGen;
+      bestFix = rankFixes(state.reports)[0];
+    }
     function renderSummary() {
       summary.textContent = "";
       const total = state.reports.length;
@@ -1099,17 +1219,11 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         return;
       }
       summary.hidden = false;
-      let avoidable = 0;
-      let wasted = 0;
-      const perComponent = /* @__PURE__ */ new Map();
-      for (const r of state.reports) {
-        if (!r.avoidable) continue;
-        avoidable++;
-        if (typeof r.selfDuration === "number") wasted += r.selfDuration;
-        if (!isMuted(r.component)) perComponent.set(r.component, (perComponent.get(r.component) || 0) + 1);
-      }
-      const top = [...perComponent].sort((a, b) => b[1] - a[1])[0];
-      const fix = avoidable ? rankFixes(state.reports.filter((r) => !isMuted(r.component)))[0] : void 0;
+      const { avoidable, wasted } = totals;
+      let top;
+      for (const entry of totals.perComponent) if (!top || entry[1] > top[1]) top = entry;
+      refreshBestFix();
+      const fix = bestFix;
       const stat = (value, label, cls = "") => el("span", { class: "stat " + cls }, [el("b", { text: value }), el("span", { class: "label", text: label })]);
       summary.append(stat(String(total), plural(total, "render").replace(/^\d+ /, "")), stat(String(avoidable), "avoidable", avoidable ? "bad" : "good"));
       if (wasted) summary.append(stat(fmtMs(wasted), "wasted", "bad"));
@@ -1177,8 +1291,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
           collapsed: [...state.collapsed],
           treeWidth: state.treeWidth,
           flashOn: state.flashOn,
-          byInstance: state.byInstance,
-          columns: state.columns
+          byInstance: state.byInstance
         };
         transport.storage.set("panel", saved);
       }, 150);
@@ -1230,7 +1343,6 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         instancesBtn.classList.toggle("active", state.byInstance);
         rebuildTree();
       }
-      if (Array.isArray(saved.columns)) state.columns = saved.columns.filter((c) => OPTIONAL_COLUMNS.some((o) => o.key === c));
       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);
@@ -1266,7 +1378,6 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       for (const r of state.reports) {
         const node = nodeOfReport(r);
         node.reports.push(r);
-        if (node.reports.length > MAX_PER_NODE) node.reports.shift();
         node.total++;
         if (r.avoidable) {
           node.avoidable++;
@@ -1274,49 +1385,93 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         }
         node.lastReport = r;
       }
+      for (const node of state.nodesByKey.values()) trimNode(node);
       renderLeft();
       renderDetails();
     }
-    function commitKeyFor(report) {
-      if (report.commitId > 0) return report.commitId;
-      return -state.legacyCommit;
+    function trimNode(node) {
+      const excess = node.reports.length - MAX_PER_NODE;
+      if (excess > 0) node.reports.splice(0, excess);
+    }
+    const commitAnalyses = /* @__PURE__ */ new Map();
+    function analysisFor(key, reports) {
+      const cached = commitAnalyses.get(key);
+      if (cached && cached.len === reports.length) return cached.analysis;
+      const analysis = analyzeCommit2(reports);
+      commitAnalyses.set(key, { len: reports.length, analysis });
+      return analysis;
+    }
+    const commitMember = /* @__PURE__ */ new WeakSet();
+    function forgetCommit(key) {
+      state.commits.delete(key);
+      commitAnalyses.delete(key);
     }
     function ingest(report) {
       if (!report.receivedAt) report.receivedAt = Date.now();
       state.reports.push(report);
-      if (state.reports.length > MAX_REPORTS) state.reports.shift();
       const node = nodeOfReport(report);
       node.reports.push(report);
-      if (node.reports.length > MAX_PER_NODE) node.reports.shift();
       node.total++;
       if (report.avoidable) {
         node.avoidable++;
-        if (typeof report.selfDuration === "number") node.wasted += report.selfDuration;
+        totals.avoidable++;
+        totals.perComponent.set(report.component, (totals.perComponent.get(report.component) || 0) + 1);
+        if (typeof report.selfDuration === "number") {
+          node.wasted += report.selfDuration;
+          totals.wasted += report.selfDuration;
+        }
       }
       node.lastReport = report;
       node.flash = true;
       node.flashAt = Date.now();
-      const ck = commitKeyFor(report);
+      const ck = report.commitId;
       let list = state.commits.get(ck);
       if (!list) {
         list = [];
         state.commits.set(ck, list);
         state.commitOrder.push(ck);
-        if (state.commitOrder.length > MAX_COMMITS) state.commits.delete(state.commitOrder.shift());
+        if (state.commitOrder.length > MAX_COMMITS) forgetCommit(state.commitOrder.shift());
+      }
+      if (list.length < MAX_PER_COMMIT) {
+        list.push(report);
+        commitMember.add(report);
       }
-      list.push(report);
       return node;
     }
+    function evict() {
+      const excess = state.reports.length - MAX_REPORTS;
+      if (excess <= 0) return;
+      for (const r of state.reports.splice(0, excess)) {
+        if (r.avoidable) {
+          totals.avoidable--;
+          const n = (totals.perComponent.get(r.component) || 0) - 1;
+          if (n > 0) totals.perComponent.set(r.component, n);
+          else totals.perComponent.delete(r.component);
+          if (typeof r.selfDuration === "number") totals.wasted -= r.selfDuration;
+        }
+        if (!commitMember.has(r)) continue;
+        const list = state.commits.get(r.commitId);
+        if (!list || list[0] !== r) continue;
+        list.shift();
+        if (!list.length) {
+          forgetCommit(r.commitId);
+          const i = state.commitOrder.indexOf(r.commitId);
+          if (i >= 0) state.commitOrder.splice(i, 1);
+        }
+      }
+      if (totals.wasted < 0) totals.wasted = 0;
+    }
     function flush() {
       flushScheduled = false;
       if (!queue.length) return;
       const batch = queue;
       queue = [];
-      state.legacyCommit++;
       let touchedSelected = false;
       let avoidableCount = 0;
+      const touched = /* @__PURE__ */ new Set();
       for (const r of batch) {
         const node = ingest(r);
+        touched.add(node);
         if (state.recording && state.recording.reports.length < MAX_REPORTS) state.recording.reports.push(r);
         if (r.avoidable) avoidableCount++;
         if (state.selectedKey === node.key) {
@@ -1324,11 +1479,45 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
           if (state.tab === "latest") state.selectedReport = r;
         }
       }
-      renderLeft();
+      for (const node of touched) trimNode(node);
+      evict();
+      dataGen++;
       renderStream(batch);
       renderSummary();
-      if (touchedSelected || state.view === "commits" || state.view === "fixes" || state.tab === "root" || state.recording && state.tab === "session") renderDetails();
-      if (state.polling && avoidableCount) transport.badge?.(state.reports.filter((r) => r.avoidable).length);
+      const heavy = state.view === "commits" || state.view === "fixes" || state.tab === "root" || !!(state.recording && state.tab === "session");
+      if (state.view === "tree") {
+        renderTree();
+        if (touchedSelected && !heavy) renderDetails();
+      }
+      scheduleHeavy(heavy || touchedSelected && state.view !== "tree");
+      if (state.polling && avoidableCount) transport.badge?.(totals.avoidable);
+    }
+    let heavyAt = 0;
+    let heavyTimer = null;
+    let heavyDetailsPending = false;
+    function renderHeavy(details2) {
+      heavyAt = Date.now();
+      if (state.view !== "tree") renderLeft();
+      if (details2) renderDetails();
+    }
+    function scheduleHeavy(details2) {
+      const wait = throttled() ? LEFT_RENDER_INTERVAL - (Date.now() - heavyAt) : 0;
+      if (wait <= 0) {
+        if (heavyTimer) clearTimeout(heavyTimer);
+        heavyTimer = null;
+        heavyDetailsPending = false;
+        renderHeavy(details2);
+        return;
+      }
+      heavyDetailsPending = heavyDetailsPending || details2;
+      if (!heavyTimer) {
+        heavyTimer = setTimeout(() => {
+          heavyTimer = null;
+          const d = heavyDetailsPending;
+          heavyDetailsPending = false;
+          renderHeavy(d);
+        }, wait);
+      }
     }
     function enqueue(report) {
       queue.push(report);
@@ -1343,6 +1532,13 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       state.reports = [];
       state.commits.clear();
       state.commitOrder = [];
+      commitAnalyses.clear();
+      totals.avoidable = 0;
+      totals.wasted = 0;
+      totals.perComponent.clear();
+      bestFix = void 0;
+      bestFixAt = 0;
+      dataGen++;
       state.selectedKey = null;
       state.selectedReport = null;
       state.selectedCommit = null;
@@ -1355,18 +1551,28 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       renderStream();
       renderSummary();
     }
-    const valueQuery = () => state.filter.trim().startsWith("~") ? state.filter.trim().slice(1).toLowerCase() : null;
-    function matchesFilter(name) {
-      if (!state.filter || valueQuery() !== null) return true;
+    let filterCache = { filter: "", value: null, regex: null, text: "" };
+    function parsedFilter() {
+      if (filterCache.filter === state.filter) return filterCache;
       const f = state.filter.trim();
-      const m = /^\/(.+)\/([a-z]*)$/.exec(f);
+      const value = f.startsWith("~") ? f.slice(1).toLowerCase() : null;
+      let regex = null;
+      const m = value === null ? /^\/(.+)\/([a-z]*)$/.exec(f) : null;
       if (m && m[1] !== void 0) {
         try {
-          return new RegExp(m[1], m[2]).test(name);
+          regex = new RegExp(m[1], (m[2] || "").replace(/[gy]/g, ""));
         } catch {
         }
       }
-      return name.toLowerCase().includes(f.toLowerCase());
+      filterCache = { filter: state.filter, value, regex, text: f.toLowerCase() };
+      return filterCache;
+    }
+    const valueQuery = () => parsedFilter().value;
+    function matchesFilter(name) {
+      const f = parsedFilter();
+      if (!f.filter || f.value !== null) return true;
+      if (f.regex) return f.regex.test(name);
+      return name.toLowerCase().includes(f.text);
     }
     const valueCache = /* @__PURE__ */ new WeakMap();
     function matchesValues(r) {
@@ -1390,10 +1596,19 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       for (const c of node.children.values()) if (visible(c)) return true;
       return false;
     }
-    const isMuted = (component) => !!state.notes[component]?.muted;
     const passes = (r) => (!state.avoidableOnly || r.avoidable) && matchesFilter(r.component) && matchesValues(r);
-    const ranked = () => state.reports.filter((r) => passes(r) && !isMuted(r.component));
-    const filteredReports = () => state.reports.filter(passes);
+    let dataGen = 0;
+    let filtered = { key: "", reports: [], fixes: null };
+    function filteredReports() {
+      const key = `${dataGen}|${state.avoidableOnly}|${state.filter}`;
+      if (filtered.key !== key) filtered = { key, reports: state.reports.filter(passes), fixes: null };
+      return filtered.reports;
+    }
+    function filteredFixes() {
+      const reports = filteredReports();
+      if (!filtered.fixes) filtered.fixes = rankFixes(reports);
+      return filtered.fixes;
+    }
     function setView(view) {
       state.view = view;
       for (const [id, b] of viewButtons) b.classList.toggle("active", id === view);
@@ -1472,7 +1687,6 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       row.classList.toggle("selected", state.selectedKey === node.key);
       row.setAttribute("aria-selected", state.selectedKey === node.key ? "true" : "false");
       row.setAttribute("aria-level", String(depth + 1));
-      row.classList.toggle("muted", isMuted(node.lastReport ? node.lastReport.component : node.name));
       const indent = row.querySelector(".indent");
       if (indent.childElementCount !== depth) {
         indent.textContent = "";
@@ -1574,7 +1788,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       for (const r of filteredReports()) {
         let o = byName.get(r.component);
         if (!o) {
-          o = { component: r.component, total: 0, avoidable: 0, wasted: 0, paths: /* @__PURE__ */ new Set(), places: 0, lastSeen: 0, reports: [], fix: "", muted: isMuted(r.component) };
+          o = { component: r.component, total: 0, avoidable: 0, wasted: 0, paths: /* @__PURE__ */ new Set(), reports: [], fix: "" };
           byName.set(r.component, o);
         }
         o.total++;
@@ -1583,12 +1797,10 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
           if (typeof r.selfDuration === "number") o.wasted += r.selfDuration;
         }
         o.paths.add(keyOf(r.path));
-        o.lastSeen = Math.max(o.lastSeen, r.receivedAt);
         o.reports.push(r);
       }
       const rows = [...byName.values()];
       for (const o of rows) {
-        o.places = o.paths.size;
         const fixes = o.avoidable ? rankFixes(o.reports) : [];
         o.fix = fixes.length ? fixes[0].label : "";
       }
@@ -1601,62 +1813,25 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       });
       return rows;
     }
-    function columnsMenu() {
-      const menu = el("details", { class: "columns-menu" }, [el("summary", { title: "Choose columns", text: "\u2699 Columns" })]);
-      const box = el("div", { class: "menu" });
-      for (const col of OPTIONAL_COLUMNS) {
-        const input = el("input", { type: "checkbox" });
-        input.checked = state.columns.includes(col.key);
-        input.addEventListener("change", () => {
-          state.columns = OPTIONAL_COLUMNS.map((c) => c.key).filter((k) => k === col.key ? input.checked : state.columns.includes(k));
-          renderOffenders();
-          persist();
-        });
-        box.append(el("label", { class: "opt" }, [input, col.label]));
-      }
-      menu.append(box);
-      return menu;
-    }
-    const offenderCell = (o, key) => {
-      switch (key) {
-        case "places":
-          return el("td", { class: "num", text: String(o.places) });
-        case "lastSeen":
-          return el("td", { class: "num mono", text: o.lastSeen ? fmtTime(o.lastSeen) : "" });
-        default:
-          return el("td");
-      }
-    };
-    function offenderRow(o, tag) {
-      const cells = [
-        el("td", { class: "c" }, [el("span", { class: "name", text: o.component }), o.muted ? el("span", { class: "badge", text: "muted" }) : null, o.paths.size > 1 && !state.columns.includes("places") ? el("span", { class: "meta", text: ` \xD7${o.paths.size} places` }) : null]),
-        el("td", { class: "num" }, o.avoidable ? el("span", { class: "badge avoid", text: String(o.avoidable) }) : "0"),
-        el("td", { class: "num", text: String(o.total) }),
-        el("td", { class: "num", text: o.wasted ? fmtMs(o.wasted) : "" }),
-        ...state.columns.map((k) => offenderCell(o, k)),
-        el("td", { class: "fix", text: o.fix })
-      ];
-      const attrs = {
-        class: (o.avoidable ? "has-avoid" : "") + (o.muted ? " muted" : ""),
-        role: tag === "div" ? "listitem" : null,
-        onclick: () => {
-          const last = o.reports[o.reports.length - 1];
-          state.tab = "fix";
-          select(nodeOfReport(last), last);
-        }
-      };
-      if (tag === "tr") return el("tr", attrs, cells);
-      const row = el("div", { ...attrs, class: "vrow " + attrs.class });
-      for (const c of cells) {
-        const span = el("span", { class: c.className });
-        span.append(...c.childNodes);
-        row.append(span);
-      }
-      return row;
-    }
-    const offendersList = virtualList(table, GRID_ROW_H, (o) => offenderRow(o, "div"), { attach: false, headerHeight: () => table.querySelector(".vhead")?.offsetHeight || 0 });
-    function offendersHeader() {
-      return [sortableHeader("Component", "component"), sortableHeader("Avoidable", "avoidable", true), sortableHeader("Total", "total", true), sortableHeader("Wasted", "wasted", true), ...state.columns.map((k) => sortableHeader(OPTIONAL_COLUMNS.find((c) => c.key === k).label, k, true)), el("th", { text: "Top fix" })];
+    function offenderRow(o) {
+      return el(
+        "tr",
+        {
+          class: o.avoidable ? "has-avoid" : "",
+          onclick: () => {
+            const last = o.reports[o.reports.length - 1];
+            state.tab = "fix";
+            select(nodeOfReport(last), last);
+          }
+        },
+        [
+          el("td", { class: "c" }, [el("span", { class: "name", text: o.component }), o.paths.size > 1 ? el("span", { class: "meta", text: ` \xD7${o.paths.size} places` }) : null]),
+          el("td", { class: "num" }, o.avoidable ? el("span", { class: "badge avoid", text: String(o.avoidable) }) : "0"),
+          el("td", { class: "num", text: String(o.total) }),
+          el("td", { class: "num", text: o.wasted ? fmtMs(o.wasted) : "" }),
+          el("td", { class: "fix", text: o.fix })
+        ]
+      );
     }
     function renderOffenders() {
       table.textContent = "";
@@ -1665,28 +1840,12 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         table.append(el("div", { class: "empty", text: "No re-renders reported yet." }));
         return;
       }
-      const gridCols = `minmax(140px, 2fr) 70px 60px 80px ${state.columns.map(() => "90px").join(" ")} minmax(120px, 2fr)`;
-      if (rows.length > VIRTUAL_THRESHOLD) {
-        const head = el("div", { class: "vhead", style: `grid-template-columns:${gridCols}` });
-        for (const th of offendersHeader()) {
-          const cell = el("span", { class: th.className, onclick: null });
-          cell.append(...th.childNodes);
-          cell.addEventListener("click", () => th.click());
-          head.append(cell);
-        }
-        head.append(columnsMenu());
-        table.append(head, offendersList.inner);
-        offendersList.inner.style.setProperty("--grid-cols", gridCols);
-        offendersList.setItems(rows);
-        return;
-      }
       const t = el("table", { class: "grid" });
-      const headRow = el("tr", null, offendersHeader());
-      t.append(el("thead", null, headRow));
+      t.append(el("thead", null, el("tr", null, [sortableHeader("Component", "component"), sortableHeader("Avoidable", "avoidable", true), sortableHeader("Total", "total", true), sortableHeader("Wasted", "wasted", true), el("th", { text: "Top fix" })])));
       const body = el("tbody");
-      for (const o of rows) body.append(offenderRow(o, "tr"));
+      for (const o of rows) body.append(offenderRow(o));
       t.append(body);
-      table.append(el("div", { class: "table-tools" }, columnsMenu()), t);
+      table.append(t);
     }
     function commitSummaries() {
       const out = [];
@@ -1694,7 +1853,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         const key = state.commitOrder[i];
         const reports = state.commits.get(key);
         if (!reports || !reports.some(passes)) continue;
-        out.push({ key, analysis: analyzeCommit(reports) });
+        out.push({ key, analysis: analysisFor(key, reports) });
       }
       return out;
     }
@@ -1721,7 +1880,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         const root2 = analysis.roots[0];
         list.append(
           el("li", { class: (state.selectedCommit === key && state.tab === "commit" ? "selected " : "") + (analysis.avoidable ? "has-avoid" : ""), onclick: () => showCommit(key) }, [
-            el("span", { class: "id", text: key > 0 ? `#${key}` : "\u2014" }),
+            el("span", { class: "id", text: `#${key}` }),
             el("span", { class: "t", text: fmtTime(analysis.receivedAt) }),
             el("span", { class: "n", text: plural(analysis.total, "render") }),
             analysis.avoidable ? el("span", { class: "badge avoid", text: `${analysis.avoidable} avoidable` }) : el("span", { class: "badge", text: "ok" }),
@@ -1736,13 +1895,13 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       }
       table.append(list);
     }
-    function fixItem(f, tag) {
+    function fixItem(f) {
+      const selected = state.selectedFix === f.key && state.tab === "fixlist";
       return el(
-        tag,
+        "li",
         {
-          class: (tag === "div" ? "vrow fix-row " : "") + (state.selectedFix === f.key && state.tab === "fixlist" ? "selected" : ""),
-          role: tag === "div" ? "listitem" : null,
-          "aria-selected": state.selectedFix === f.key && state.tab === "fixlist" ? "true" : null,
+          class: selected ? "selected" : "",
+          "aria-selected": selected ? "true" : null,
           onclick: () => {
             state.selectedFix = f.key;
             state.tab = "fixlist";
@@ -1757,27 +1916,19 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         ]
       );
     }
-    const fixesList = virtualList(table, GRID_ROW_H, (f) => fixItem(f, "div"), { attach: false, headerHeight: () => table.querySelector(".section-title")?.offsetHeight || 0 });
     function renderFixes() {
       table.textContent = "";
-      const reports = ranked();
-      const fixes = rankFixes(reports);
+      const reports = filteredReports();
+      const fixes = filteredFixes();
       const contexts = contextAttribution(reports);
-      const mutedCount = Object.values(state.notes).filter((n) => n.muted).length;
       if (!fixes.length && !contexts.length) {
-        table.append(el("div", { class: "empty", text: mutedCount ? `No avoidable re-renders outside the ${plural(mutedCount, "muted component")}.` : "No avoidable re-renders, nothing to fix." }));
+        table.append(el("div", { class: "empty", text: "No avoidable re-renders, nothing to fix." }));
         return;
       }
       if (fixes.length) {
-        const title = el("div", { class: "section-title", text: `Ranked by avoidable re-renders removed${mutedCount ? ` (${plural(mutedCount, "muted component")} hidden)` : ""}` });
-        if (fixes.length > VIRTUAL_THRESHOLD) {
-          table.append(title, fixesList.inner);
-          fixesList.setItems(fixes);
-        } else {
-          const list = el("ol", { class: "fixes", role: "list" });
-          for (const f of fixes) list.append(fixItem(f, "li"));
-          table.append(title, list);
-        }
+        const list = el("ol", { class: "fixes", role: "list" });
+        for (const f of fixes) list.append(fixItem(f));
+        table.append(el("div", { class: "section-title", text: "Ranked by avoidable re-renders removed" }), list);
       }
       if (contexts.length) {
         const list = el("ul", { class: "contexts" });
@@ -1816,9 +1967,6 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       openSource: transport.openResource ? (src) => transport.openResource(src.fileName, src.lineNumber, src.columnNumber) : null,
       highlight: transport.highlight ? (id) => transport.highlight(id) : null,
       copy: copyText,
-      share: transport.panelUrl ? (r) => {
-        void encodeShare(r).then((code) => copyText(`${transport.panelUrl}?report=${code}`));
-      } : null,
       readSource: transport.readSource ? (url) => transport.readSource(url) : null
     });
     const tabButton = (id, label, onclick) => el("button", { class: state.tab === id ? "active" : "", onclick }, label);
@@ -1827,15 +1975,9 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         details.append(el("div", { class: "empty", text: "Select a component to see why it re-rendered." }));
         return;
       }
-      const componentName = node.lastReport ? node.lastReport.component : node.name;
-      const note = state.notes[componentName] || {};
-      const noteBtn = el("button", { class: "ib small" + (note.note ? " active" : ""), title: note.note ? note.note : "Add a note for this component", "aria-label": "Note", onclick: () => toggleNoteEditor() }, [el("span", { class: "glyph", text: "\u270E" })]);
-      const muteBtn = el("button", { class: "ib small" + (note.muted ? " active" : ""), title: note.muted ? "Muted: hidden from Fixes and the summary. Click to unmute." : "Mute: hide this component from Fixes and the summary", "aria-label": note.muted ? "Unmute" : "Mute", onclick: () => setNote(componentName, { muted: !note.muted }) }, [el("span", { class: "glyph", text: note.muted ? "\u{1F515}" : "\u{1F514}" })]);
       const header = el("div", { class: "details-header" }, [
         el("span", { class: "title" }, [el("span", { class: "bracket", text: "<" }), el("span", { class: "name", text: node.name }), el("span", { class: "bracket", text: ">" })]),
         el("span", { class: "meta", text: `${plural(node.total, "re-render")}, ${node.avoidable} avoidable${node.wasted ? ", " + fmtMs(node.wasted) + " wasted" : ""}` }),
-        noteBtn,
-        muteBtn,
         el("span", { class: "tabs" }, [
           tabButton("latest", "Report", () => {
             state.tab = "latest";
@@ -1858,21 +2000,6 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       details.append(header);
       const body = el("div", { class: "details-body" });
       details.append(body);
-      if (note.note || noteEditorOpen === componentName) {
-        const input = el("input", { type: "text", class: "note-input", placeholder: 'Note for this component (e.g. "known, ticket #123")', value: note.note || "" });
-        input.addEventListener("change", () => {
-          setNote(componentName, { note: input.value.trim() || void 0 });
-          noteEditorOpen = null;
-        });
-        input.addEventListener("keydown", (e) => {
-          if (e.key === "Escape") {
-            noteEditorOpen = null;
-            renderDetails();
-          }
-        });
-        body.append(el("div", { class: "note-box" + (note.muted ? " muted" : "") }, [el("span", { class: "glyph", text: "\u270E" }), input, note.muted ? el("span", { class: "badge", text: "muted" }) : null]));
-        if (noteEditorOpen === componentName) setTimeout(() => input.focus(), 0);
-      }
       if (state.tab === "history") {
         const list = el("ul", { class: "history" });
         for (const r2 of [...node.reports].reverse()) {
@@ -1927,10 +2054,10 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         details.append(el("div", { class: "empty", text: "This commit is no longer buffered." }));
         return;
       }
-      const a = analyzeCommit(reports);
+      const a = analysisFor(key, reports);
       details.append(
         el("div", { class: "details-header" }, [
-          el("span", { class: "title", text: key > 0 ? `Commit #${key}` : "Commit" }),
+          el("span", { class: "title", text: `Commit #${key}` }),
           el("span", { class: "meta", text: `${plural(a.total, "render")}, ${a.avoidable} avoidable${a.wasted ? ", " + fmtMs(a.wasted) + " wasted" : ""} \xB7 ${fmtTime(a.receivedAt)}` })
         ])
       );
@@ -1988,7 +2115,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       return list;
     }
     function renderFixDetails() {
-      const fix = rankFixes(filteredReports()).find((f) => f.key === state.selectedFix);
+      const fix = filteredFixes().find((f) => f.key === state.selectedFix);
       if (!fix) {
         details.append(el("div", { class: "empty", text: "Select a fix." }));
         return;
@@ -2001,7 +2128,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     }
     function renderRootDetails() {
       const name = state.selectedRoot;
-      const s = rootCauseSummary(name, state.commits);
+      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}>` })]),
@@ -2016,7 +2143,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       for (const c of s.commits) {
         list.append(
           el("li", { onclick: () => showCommit(c.key) }, [
-            el("span", { class: "id", text: c.key > 0 ? `#${c.key}` : "\u2014" }),
+            el("span", { class: "id", text: `#${c.key}` }),
             el("span", { class: "t", text: fmtTime(c.analysis.receivedAt) }),
             el("span", { class: "badge avoid", text: `${c.count} avoidable` }),
             el("span", { class: "root", text: componentList(c.components) })
@@ -2029,37 +2156,6 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         body.append(fixView(s.fixes, { copy: copyText }));
       }
     }
-    let noteEditorOpen = null;
-    function toggleNoteEditor() {
-      const node = state.selectedKey ? state.nodesByKey.get(state.selectedKey) : null;
-      const name = node ? node.lastReport ? node.lastReport.component : node.name : null;
-      noteEditorOpen = noteEditorOpen === name ? null : name;
-      renderDetails();
-    }
-    function setNote(component, patch) {
-      const next = { ...state.notes[component] || {}, ...patch };
-      if (!next.note && !next.muted) delete state.notes[component];
-      else state.notes[component] = next;
-      if (transport.storage) transport.storage.set("notes", state.notes);
-      renderSummary();
-      renderLeft();
-      renderDetails();
-    }
-    function restoreNotes(raw) {
-      if (!isRecord(raw)) return;
-      const notes = {};
-      for (const [k, v] of Object.entries(raw)) {
-        if (!isRecord(v)) continue;
-        const n = {};
-        if (typeof v.note === "string" && v.note) n.note = v.note;
-        if (v.muted === true) n.muted = true;
-        if (n.note || n.muted) notes[k] = n;
-      }
-      state.notes = notes;
-      renderSummary();
-      renderLeft();
-      renderDetails();
-    }
     const sessionSummary = (s) => summarizeSession(s, s.reports);
     function persistSessions() {
       if (!transport.storage) return;
@@ -2278,10 +2374,6 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       };
       const text = JSON.stringify(data, null, 2);
       const name = `rerender-lens-${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-")}.json`;
-      if (transport.download) {
-        transport.download(name, text);
-        return;
-      }
       try {
         const blob = new Blob([text], { type: "application/json" });
         const url = URL.createObjectURL(blob);
@@ -2333,6 +2425,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         cls = "connected";
         title = state.relay ? "live via content script" : "polling the page";
         if (lib.overhead) title += ` \xB7 library overhead ${lib.overhead.totalMs.toFixed(1)} ms over ${plural(lib.commits ?? 0, "commit")}, worst ${lib.overhead.maxCommitMs.toFixed(1)} ms`;
+        if (lib.truncated) title += ` \xB7 ${plural(lib.truncated, "report")} skipped by the per-commit cap`;
       } else if (state.relay || state.polling) {
         text = "no library in page";
         cls = "partial";
@@ -2347,15 +2440,12 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       tabChip.textContent = state.tabLabel || "";
       banner.textContent = "";
       const warnings = [];
-      if (lib && typeof lib.protocol === "number" && lib.protocol !== PROTOCOL) {
-        warnings.push(
-          lib.protocol < PROTOCOL ? `The page runs rerender-lens ${lib.library || ""} (protocol ${lib.protocol}); this panel expects protocol ${PROTOCOL}. Update the rerender-lens package for commit grouping, source links and settings.` : `The page runs a newer rerender-lens (protocol ${lib.protocol}) than this panel (${PROTOCOL}). Update the extension.`
-        );
-      }
+      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.`);
       if (lib && lib.production) warnings.push("Production React build detected: component names may be minified and hooks are unlabeled. Use a development build.");
       if (lib && lib.injected && lib.source === "page")
         warnings.push(`The page runs its own rerender-lens ${lib.library || ""}; the copy injected by the extension stepped aside. Turn injection off for this origin in Settings to avoid loading the library twice.`);
       if (lib && lib.enabled === false) warnings.push("rerender-lens is present but disabled in this page.");
+      if (lib && lib.truncated) warnings.push(`${plural(lib.truncated, "report")} skipped: a commit re-rendered more tracked components than the per-commit cap (200) or took over its time budget. Narrow "include" in Settings, or fix the top offenders first.`);
       banner.hidden = warnings.length === 0;
       for (const w of warnings) banner.append(el("div", { text: w }));
     }
@@ -2460,10 +2550,6 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         sec.append(el("div", { class: "meta", text: "Connect to a page running rerender-lens to change its options." }));
         return;
       }
-      if (lib.protocol < PROTOCOL) {
-        sec.append(el("div", { class: "meta", text: "The page library is too old to be configured from here." }));
-        return;
-      }
       const current = Object.assign({}, lib.options || {});
       const applyOptions = async (patch) => {
         Object.assign(current, patch);
@@ -2495,6 +2581,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;
@@ -2522,7 +2635,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
           renderStatus();
           break;
         case "hello":
-          setLibrary(isRecord(message.payload) ? Object.assign({ protocol: message.version || 1 }, message.payload) : { protocol: message.version || 1 });
+          if (isRecord(message.payload)) setLibrary(message.payload);
           break;
         case "clear":
         case "navigated":
@@ -2538,6 +2651,9 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
           if (r) enqueue(r);
           break;
         }
+        case "batch":
+          if (Array.isArray(message.items)) for (const item of message.items) handle(item);
+          break;
       }
     }
     const panelApi = {
@@ -2552,8 +2668,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       setView,
       openSettings: () => toggleSettings(true),
       startRecording,
-      stopRecording,
-      setNote
+      stopRecording
     };
     if (options.theme === "dark") document.documentElement.classList.add("theme-dark");
     state.origin = transport.origin || null;
@@ -2568,12 +2683,60 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       });
       Promise.resolve(transport.storage.get("sessions")).then(restoreSessions, () => {
       });
-      Promise.resolve(transport.storage.get("notes")).then(restoreNotes, () => {
-      });
     }
     transport.subscribe(handle);
     return panelApi;
   }
+  var systemTheme = () => typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  var fetchSource = (url) => fetch(url).then((res) => res.ok ? res.text() : null).catch(() => null);
+  function localStorageAdapter(prefix) {
+    const mem = (key) => `${prefix}:${key}`;
+    return {
+      get: (key) => {
+        try {
+          const raw = localStorage.getItem(mem(key));
+          return raw ? JSON.parse(raw) : void 0;
+        } catch {
+          return void 0;
+        }
+      },
+      set: (key, value) => {
+        try {
+          localStorage.setItem(mem(key), JSON.stringify(value));
+        } catch {
+        }
+      }
+    };
+  }
+  function commandBridge(send, timeoutMs) {
+    const pending = /* @__PURE__ */ new Map();
+    const bridge = (cmd, arg) => new Promise((resolve, reject) => {
+      const id = Math.random().toString(36).slice(2);
+      const fail = () => {
+        clearTimeout(timer);
+        pending.delete(id);
+        resolve(null);
+      };
+      const timer = setTimeout(fail, timeoutMs);
+      pending.set(id, { resolve: (v) => v instanceof Error ? reject(v) : resolve(v), timer });
+      try {
+        void Promise.resolve(send({ __rerenderLensCmd: true, id, cmd, arg })).catch(fail);
+      } catch {
+        fail();
+      }
+    });
+    const reply = (m) => {
+      if (m.__rerenderLensReply !== true || typeof m.id !== "string") return false;
+      const p = pending.get(m.id);
+      if (p) {
+        pending.delete(m.id);
+        clearTimeout(p.timer);
+        p.resolve(typeof m.error === "string" ? new Error(m.error) : m.result);
+      }
+      return true;
+    };
+    return { bridge, reply };
+  }
   function createRelayTransport(io) {
     let listener = null;
     let relayConnected = false;
@@ -2600,18 +2763,72 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       try {
         const info = await io.bridge("info");
         if (info) {
-          emit({ type: "hello", version: info.protocol || 1, payload: 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;
+    function cancelSync() {
+      syncGen++;
+      if (syncTimer) clearTimeout(syncTimer);
+      syncTimer = null;
+      stopInfoRefresh();
+    }
+    function syncWithRetry(onReady, initialDelay = 0) {
+      cancelSync();
+      const gen = syncGen;
+      let delay = SYNC_RETRY_MIN;
+      let tries = 0;
+      const attempt = async () => {
+        syncTimer = null;
+        if (gen !== syncGen || disposed) return;
+        const ok = await syncWithPage();
+        if (gen !== syncGen || disposed) return;
+        if (ok) {
+          onReady();
+          return;
+        }
+        if (++tries >= SYNC_RETRIES) return;
+        syncTimer = setTimeout(() => void attempt(), delay);
+        delay = Math.min(delay * 2, SYNC_RETRY_MAX);
+      };
+      if (initialDelay > 0) syncTimer = setTimeout(() => void attempt(), initialDelay);
+      else void attempt();
+    }
+    let droppedSeen = false;
+    function resetSince() {
+      since = 0;
+      droppedSeen = false;
+    }
     async function pollOnce() {
       try {
         const res = await io.bridge("pull", since);
         if (!res) return;
-        if (res.dropped) emit({ type: "clear" });
+        if (res.dropped && !droppedSeen) {
+          droppedSeen = true;
+          emit({ type: "clear" });
+        }
         for (const p of res.reports) emit({ type: "report", payload: p });
         since = res.seq;
       } catch {
@@ -2627,19 +2844,23 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         emit({ type: "polling", on: false });
       }
     }
-    async function attachToPage() {
-      if (!await syncWithPage()) return;
-      if (relayConnected) io.bridge("replay").catch(() => {
-      });
-      else {
-        const res = await io.bridge("pull", 0).catch(() => null);
-        if (res) {
-          for (const p of res.reports) emit({ type: "report", payload: p });
-          since = res.seq;
-        } else io.bridge("replay").catch(() => {
+    function attachToPage(initialDelay = 0) {
+      syncWithRetry(() => {
+        if (relayConnected) io.bridge("replay").catch(() => {
         });
-        setPolling(true);
-      }
+        else {
+          const gen = syncGen;
+          void io.bridge("pull", 0).catch(() => null).then((res) => {
+            if (gen !== syncGen || disposed) return;
+            if (res) {
+              for (const p of res.reports) emit({ type: "report", payload: p });
+              since = res.seq;
+            } else io.bridge("replay").catch(() => {
+            });
+            setPolling(true);
+          });
+        }
+      }, initialDelay);
     }
     function connect() {
       if (panelPort) {
@@ -2660,16 +2881,20 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
           setPolling(false);
         } else if (m.type === "disconnected") {
           relayConnected = false;
-          void syncWithPage().then((ok) => ok && setPolling(true));
+          syncWithRetry(() => setPolling(true));
         }
         emit(m);
       });
       port.onDisconnect.addListener(() => {
         if (panelPort !== port) return;
         panelPort = null;
-        setTimeout(connect, 1e3);
+        reconnectTimer = setTimeout(() => {
+          reconnectTimer = null;
+          if (!disposed) connect();
+        }, 1e3);
       });
     }
+    let reconnectTimer = null;
     const transport = {
       origin,
       tabLabel: io.tabLabel ?? null,
@@ -2677,36 +2902,44 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         listener = fn;
         connect();
         io.onNavigated(() => {
-          since = 0;
+          if (disposed) return;
+          resetSince();
+          setPolling(false);
+          cancelSync();
           fn({ type: "navigated" });
           void resolveOrigin().then(() => {
-            setTimeout(() => void attachToPage(), 1200);
+            if (!disposed) attachToPage(NAVIGATION_SETTLE);
           });
         });
         io.onTabChange?.((label) => {
+          if (disposed) return;
           transport.tabLabel = label;
           const next = io.tabId();
           if (next === currentTab) {
             fn({ type: "tab-label", payload: label });
             return;
           }
-          since = 0;
+          resetSince();
           relayConnected = false;
           setPolling(false);
+          cancelSync();
           currentTab = next;
           void resolveOrigin().then(() => {
+            if (disposed) return;
             fn({ type: "tab", payload: label });
             connect();
-            void attachToPage();
+            attachToPage();
           });
         });
-        void resolveOrigin().then(() => attachToPage());
+        void resolveOrigin().then(() => {
+          if (!disposed) attachToPage();
+        });
       },
       replay() {
         if (relayConnected) io.bridge("replay").catch(() => {
         });
         else {
-          since = 0;
+          resetSince();
           emit({ type: "clear" });
           void syncWithPage().then(() => pollOnce());
         }
@@ -2714,7 +2947,22 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       clear() {
         io.bridge("clear").catch(() => {
         });
-        since = 0;
+        resetSince();
+      },
+      dispose() {
+        disposed = true;
+        cancelSync();
+        setPolling(false);
+        if (reconnectTimer) clearTimeout(reconnectTimer);
+        reconnectTimer = null;
+        if (panelPort) {
+          try {
+            panelPort.disconnect();
+          } catch {
+          }
+          panelPort = null;
+        }
+        listener = null;
       },
       configure: (options) => io.bridge("configure", options).then((r) => r ?? void 0),
       highlight: (id) => io.bridge("highlight", id).catch(() => {
@@ -2737,7 +2985,6 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     if (io.openResource) transport.openResource = io.openResource;
     if (io.undock) transport.undock = io.undock;
     if (io.readSource) transport.readSource = io.readSource;
-    transport.panelUrl = chrome.runtime.getURL("panel.html");
     return transport;
   }
   function devtoolsIO() {
@@ -2749,7 +2996,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       })
     );
     const expressions = {
-      info: () => "b.info?b.info():{count:b.size,protocol:b.version}",
+      info: () => "b.info()",
       pull: (since) => `b.pull?b.pull(${Number(since) || 0}):null`,
       replay: () => "b.replay()",
       clear: () => "b.clear()",
@@ -2786,7 +3033,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     try {
       switch (cmd) {
         case "info":
-          return b.info ? b.info() : { count: b.size, protocol: b.version };
+          return b.info();
         case "pull":
           return b.pull ? b.pull(arg) : null;
         case "replay":
@@ -2893,19 +3140,17 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       },
       openResource: (url) => void chrome.tabs.create({ url }),
       undock: (mode) => tabId === null ? Promise.reject(new Error("no tab")) : openOutside(mode, tabId),
-      // Dev servers serve the module source; host permission for the origin is required (and present when the panel works at all).
-      readSource: (url) => fetch(url).then((res) => res.ok ? res.text() : null).catch(() => null)
+      // Host permission for the origin is required to fetch the module source (and present when the panel works at all).
+      readSource: fetchSource
     };
     return io;
   }
   function bootExtension() {
-    const prefersDark = typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches;
-    const theme = chrome.devtools.panels.themeName === "dark" || prefersDark ? "dark" : "light";
+    const theme = chrome.devtools.panels.themeName === "dark" ? "dark" : systemTheme();
     createPanel(document.getElementById("root"), createRelayTransport(devtoolsIO()), { theme });
   }
   function bootStandalone(opts = {}) {
-    const prefersDark = typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches;
-    return createPanel(document.getElementById("root"), createRelayTransport(standaloneIO(opts)), { theme: prefersDark ? "dark" : "light" });
+    return createPanel(document.getElementById("root"), createRelayTransport(standaloneIO(opts)), { theme: systemTheme() });
   }
   function sampleReports() {
     const fn = (name) => FN_PREFIX + name;
@@ -3036,7 +3281,6 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
   function createBroadcastTransport(name) {
     let listener = null;
     let channel = null;
-    const pending = /* @__PURE__ */ new Map();
     const emit = (m) => {
       if (listener) listener(m);
     };
@@ -3045,36 +3289,15 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       channel = new BroadcastChannel(name);
       channel.onmessage = (event) => {
         const data = event.data;
-        if (!data) return;
-        if (data.__rerenderLensReply === true && typeof data.id === "string") {
-          const p = pending.get(data.id);
-          if (!p) return;
-          pending.delete(data.id);
-          clearTimeout(p.timer);
-          p.resolve(typeof data.error === "string" ? new Error(data.error) : data.result);
-          return;
-        }
+        if (!data || reply(data)) return;
         if (data.__rerenderLens === true && typeof data.type === "string") emit({ type: data.type, version: typeof data.version === "number" ? data.version : void 0, payload: data.payload });
       };
       return channel;
     };
-    const bridge = (cmd, arg) => new Promise((resolve, reject) => {
-      const id = Math.random().toString(36).slice(2);
-      const timer = setTimeout(() => {
-        pending.delete(id);
-        resolve(null);
-      }, 1500);
-      pending.set(id, {
-        resolve: (v) => v instanceof Error ? reject(v) : resolve(v),
-        timer
-      });
-      open().postMessage({ __rerenderLensCmd: true, id, cmd, arg });
-    });
-    const mem = (key) => `rerender-lens:${name}:${key}`;
+    const { bridge, reply } = commandBridge((message) => open().postMessage(message), 1500);
     const transport = {
       origin: location.origin,
       tabLabel: `channel "${name}"`,
-      panelUrl: location.origin + location.pathname,
       subscribe(fn) {
         listener = fn;
         open();
@@ -3084,7 +3307,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
             fn({ type: "disconnected" });
             return;
           }
-          fn({ type: "hello", version: info.protocol || 1, payload: info });
+          fn({ type: "hello", version: info.protocol, payload: info });
           const res = await bridge("pull", 0);
           if (res) for (const p of res.reports) fn({ type: "report", payload: p });
         });
@@ -3096,23 +3319,8 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       }),
       flashAvoidable: (on) => bridge("flash", !!on).catch(() => {
       }),
-      storage: {
-        get: (key) => {
-          try {
-            const raw = localStorage.getItem(mem(key));
-            return raw ? JSON.parse(raw) : void 0;
-          } catch {
-            return void 0;
-          }
-        },
-        set: (key, value) => {
-          try {
-            localStorage.setItem(mem(key), JSON.stringify(value));
-          } catch {
-          }
-        }
-      },
-      readSource: (url) => fetch(url).then((res) => res.ok ? res.text() : null).catch(() => null),
+      storage: localStorageAdapter(`rerender-lens:${name}`),
+      readSource: fetchSource,
       copy: (text) => navigator.clipboard.writeText(text).catch(() => {
       })
     };
@@ -3123,24 +3331,11 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     let listener = null;
     let stream = null;
     let appsOnline = null;
-    const pending = /* @__PURE__ */ new Map();
     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 bridge = (cmd, arg) => new Promise((resolve, reject) => {
-      const id = Math.random().toString(36).slice(2);
-      const timer = setTimeout(() => {
-        pending.delete(id);
-        resolve(null);
-      }, 2e3);
-      pending.set(id, { resolve: (v) => v instanceof Error ? reject(v) : resolve(v), timer });
-      post({ __rerenderLensCmd: true, id, cmd, arg }).catch(() => {
-        clearTimeout(timer);
-        pending.delete(id);
-        resolve(null);
-      });
-    });
+    const { bridge, reply } = commandBridge(post, 2e3);
     const handleData = (data) => {
       let parsed;
       try {
@@ -3149,18 +3344,12 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         return;
       }
       for (const m of Array.isArray(parsed) ? parsed : [parsed]) {
-        if (!isRecord(m)) continue;
-        if (m.__rerenderLensReply === true && typeof m.id === "string") {
-          const p = pending.get(m.id);
-          if (!p) continue;
-          pending.delete(m.id);
-          clearTimeout(p.timer);
-          p.resolve(typeof m.error === "string" ? new Error(m.error) : m.result);
-        } else if (m.__rerenderLens === true && m.type === "relay") {
+        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 wasOnline = appsOnline;
           appsOnline = apps;
-          if (apps > 0 && wasOnline !== null && wasOnline === 0) void attach();
+          if (apps > 0 && (wasOnline === null || wasOnline === 0)) 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 });
       }
@@ -3172,15 +3361,13 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
         return;
       }
       emit({ type: "connected" });
-      emit({ type: "hello", version: info.protocol || 1, payload: info });
+      emit({ type: "hello", version: info.protocol, payload: info });
       const res = await bridge("pull", 0);
       if (res) for (const p of res.reports) emit({ type: "report", payload: p });
     }
-    const mem = (key) => `rerender-lens:relay:${base}:${key}`;
     const transport = {
       origin: base,
       tabLabel: `relay ${base.replace(/^https?:\/\//, "")}`,
-      panelUrl: location.origin + location.pathname,
       subscribe(fn) {
         listener = fn;
         const open = () => {
@@ -3191,7 +3378,6 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
           };
         };
         open();
-        void attach();
       },
       replay: () => void bridge("replay"),
       clear: () => void bridge("clear"),
@@ -3200,47 +3386,18 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       }),
       flashAvoidable: (on) => bridge("flash", !!on).catch(() => {
       }),
-      storage: {
-        get: (key) => {
-          try {
-            const raw = localStorage.getItem(mem(key));
-            return raw ? JSON.parse(raw) : void 0;
-          } catch {
-            return void 0;
-          }
-        },
-        set: (key, value) => {
-          try {
-            localStorage.setItem(mem(key), JSON.stringify(value));
-          } catch {
-          }
-        }
-      },
-      readSource: (url) => fetch(url).then((res) => res.ok ? res.text() : null).catch(() => null),
+      storage: localStorageAdapter(`rerender-lens:relay:${base}`),
+      readSource: fetchSource,
       copy: (text) => navigator.clipboard.writeText(text).catch(() => {
       })
     };
     return transport;
   }
   function bootRelay(relayUrl) {
-    const prefersDark = typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches;
-    return createPanel(document.getElementById("root"), createRelayClientTransport(relayUrl), { theme: prefersDark ? "dark" : "light" });
+    return createPanel(document.getElementById("root"), createRelayClientTransport(relayUrl), { theme: systemTheme() });
   }
   function bootBroadcast(name) {
-    const prefersDark = typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches;
-    return createPanel(document.getElementById("root"), createBroadcastTransport(name), { theme: prefersDark ? "dark" : "light" });
-  }
-  async function bootShared(code) {
-    const report = await decodeShare(code);
-    const transport = { subscribe() {
-    }, panelUrl: location.origin + location.pathname };
-    const panel = createPanel(document.getElementById("root"), transport, { theme: typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" });
-    if (!report) {
-      panel.handle({ type: "hello", version: PROTOCOL, payload: { protocol: PROTOCOL, library: "shared link", react: [], enabled: false } });
-      return;
-    }
-    panel.importData([report]);
-    panel.select(report.component);
+    return createPanel(document.getElementById("root"), createBroadcastTransport(name), { theme: systemTheme() });
   }
   function bootDemo() {
     const params2 = new URLSearchParams(location.search);
@@ -3253,7 +3410,7 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       origin: "http://localhost:5199",
       subscribe(fn) {
         fn({ type: "connected" });
-        fn({ type: "hello", version: PROTOCOL, payload: { count: 0, library: "demo", protocol: PROTOCOL, react: [{ version: "19.2.0", bundleType: 1 }], production: false, enabled: true, options: { trackAllMemoized: true, silent: true }, source: "page", injected: false } });
+        fn({ type: "hello", version: PROTOCOL, payload: { library: "demo", protocol: PROTOCOL, react: [{ version: "19.2.0", bundleType: 1 }], production: false, enabled: true, options: { trackAllMemoized: true, silent: true }, source: "page", injected: false } });
         if (flood > 0) {
           const t0 = performance.now();
           for (const r of floodReports(flood)) fn({ type: "report", payload: r });
@@ -3283,11 +3440,9 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
       originStatus: () => Promise.resolve({ origin: "http://localhost:5199", builtIn: true, permitted: true, enabled: true, inject: false, deferHook: false }),
       setOrigin: () => Promise.resolve(),
       storage: { get: (k) => Promise.resolve(mem[k]), set: (k, v) => Promise.resolve(mem[k] = v) },
-      panelUrl: location.origin + location.pathname,
       readSource: () => Promise.resolve("import { memo } from 'react';\n\nexport const ProductList = memo(function ProductList(props) {\n  const [selected, setSelected] = useState(null);\n  return (\n    <ul>\n      {props.products.map((p) => (\n        <ProductRow key={p.id} product={p} style={{ color: 'red' }} onSelect={(id) => props.onSelect(id)} />\n      ))}\n    </ul>\n  );\n});\n")
     };
-    const dark = /theme=dark/.test(location.search) || typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches;
-    createPanel(document.getElementById("root"), transport, { theme: dark ? "dark" : "light" });
+    createPanel(document.getElementById("root"), transport, { theme: /theme=dark/.test(location.search) ? "dark" : systemTheme() });
   }
   var api = {
     PROTOCOL,
@@ -3306,18 +3461,15 @@ setState((prev) => (deepEqual(prev, next) ? prev : next));`
     createRelayTransport,
     createBroadcastTransport,
     createRelayClientTransport,
-    encodeShare,
-    decodeShare,
     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;
   var hasDevtools = hasChrome && !!chrome.devtools && !!chrome.devtools.inspectedWindow;
   var params = typeof location !== "undefined" ? new URLSearchParams(location.search) : new URLSearchParams();
   var pathname = typeof location !== "undefined" ? String(location.pathname) : "";
-  if (params.has("report")) void bootShared(params.get("report") || "");
-  else if (params.has("relay") && typeof EventSource === "function") bootRelay(params.get("relay") || location.origin);
+  if (params.has("relay") && typeof EventSource === "function") bootRelay(params.get("relay") || location.origin);
   else if (params.has("channel") && typeof BroadcastChannel === "function") bootBroadcast(params.get("channel") || "rerender-lens");
   else if (hasDevtools && /panel\.html/.test(pathname) && !params.has("tabId")) bootExtension();
   else if (hasChrome && (/sidepanel\.html/.test(pathname) || params.has("tabId"))) bootStandalone({ tabId: params.has("tabId") ? Number(params.get("tabId")) : null });