rerender-lens 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,7 +1,15 @@
 # Changelog
 
-## Unreleased
+## 0.4.0
 
+Highlights: the panel for any app with `npx rerender-lens panel`, Vitest and Playwright
+integrations, bounded work per commit (large apps no longer freeze), a lighter panel, and the
+injectable library split into three readable scripts. Details, newest first:
+
+- **Scale test.** `examples/vite-react/scale.html?rows=N` renders N memoized cells sharing a
+  2,000-item context and a 4 MB typed-array prop; its readout shows the library's overhead and
+  the reports skipped by the cap. The e2e suite runs it with 3,000 rows. The panel shows the
+  skipped count in the status tooltip and as a banner.
 - **`npx rerender-lens panel`.** A dependency-free relay (`rerender-lens/relay`) that serves the
   panel and forwards messages between apps and panels over server-sent events and POST, so the
   panel works for any app on any origin without the extension or Vite: Next.js, Webpack, a remote
@@ -18,6 +26,38 @@
   `clearReports`, `expectWithinBudget`.
 - A second copy of the library (another bundle on the same page) no longer wraps the hook
   again, which doubled every report.
+- **Bounded work per commit** (large apps froze the page). Deep equality is memoized across the
+  components of one commit and gives up on values too large to walk (reported as `different`);
+  large Sets compare by identity. Serialization caps every array/object/Map/Set at 100 entries
+  (`…+N more`), every report at 20k nodes, treats typed arrays, `ArrayBuffer`, DOM nodes and
+  promises as leaves, and defaults to depth 4. A commit reports at most 200 tracked components
+  and stops after 25 ms; the rest is counted in `info().truncated` with a one-time warning.
+  Source locations are cached per element, the instance registry prunes on growth only, and
+  highlight/flash measure all nodes before drawing (at most 100 boxes).
+- Reports are posted on `window` only once something says it listens (the extension's content
+  script, or `replay()`), so a page that runs the library without an open panel pays no
+  structured clone per report and wakes none of its own `message` listeners. `hello` and
+  `clear` still post; the BroadcastChannel and relay paths are unchanged.
+- The injected library (extension) now runs with `includeState: false`; Settings can turn the
+  hook/context/state snapshots on per origin. Effect-loop detection no longer flags commits
+  caused by discrete input (typing, dragging). The toolbar badge repaints at most every 100 ms.
+- **The panel keeps up.** Summary totals are incremental; the Offenders/Commits/Fixes lists and
+  the "best fix" stat update at most every 250 / 500 ms once 200 reports are buffered (the
+  tree and the stream stay live); commit analysis is memoized per commit and root causes are
+  found by index; each commit keeps at most 500 reports; buffer eviction is one splice per
+  frame. The content script sends one batched port message per task instead of one per
+  report. The DevTools panel retries the connect handshake with backoff (up to ~90 s) when a
+  page loads the library late, and the polling fallback clears the panel once per reset
+  instead of on every poll when the page overruns its buffer.
+- The injectable library ships as three vendor scripts (`rerender-lens.core.js`,
+  `rerender-lens.engine.js`, `rerender-lens.js`) built by `scripts/build-vendor.mjs`; the
+  Playwright helper still gets one concatenated bundle.
+- Removed: per-component notes and mute, share links (`panel.html?report=…`), the Offenders
+  column chooser (*Places*, *Last seen*), and the windowed Offenders/Fixes variant above 200 rows.
+  Offenders and Fixes always render plain rows; the tree and the stream stay virtualized. The
+  panel also drops its protocol-1 fallbacks: protocol 2 is the only one it speaks.
+- Fix: after a navigation the panel's polling fallback stops until the new page answers `info`,
+  instead of evaluating into pages without the library every 500 ms.
 
 ## 0.3.0
 

package/README.md

@@ -52,8 +52,9 @@ Then pick one of two modes:
 
 - **Inject the library** (no app code): tick *Inject the library* in the toolbar popup or in the
   panel's Settings and reload. The extension loads rerender-lens into the page before React,
-  tracking every `React.memo` / `PureComponent` by default. Change what is tracked from
-  Settings; the choice is saved per origin.
+  tracking every `React.memo` / `PureComponent` by default, without the hook/context/state
+  snapshots (*Include state* in Settings turns them on; they are the costliest part on big
+  apps). Change what is tracked from Settings; the choice is saved per origin.
 - **The page runs the library**: install the package and pass the DevTools notifier (see below).
   This is the way to go when you also want console output or want to commit the setup.
 
@@ -339,8 +340,12 @@ init({ trackAllMemoized: true, silent: true, notifier: createDevtoolsNotifier()
 ```
 
 Each report is serialized (functions become `ƒ name`, elements `<Type>`, cycles cut) and posted
-on `window` as `{ __rerenderLens: true, version: 2, type: 'report', payload }`. The last 300
-reports are buffered. The bridge at `window.__RERENDER_LENS_DEVTOOLS__` exposes:
+on `window` as `{ __rerenderLens: true, version: 2, type: 'report', payload }`. Reports go on
+`window` only after a listener announced itself (`{ __rerenderLensReady: true }`, which the
+extension's content script posts) or after `replay()`, so a page nobody inspects pays no
+structured clone per report. Values are bounded: 100 entries per array/object/Map/Set, depth 4
+by default (`maxDepth`), 20k nodes per report. The last 300 reports are buffered. The bridge
+at `window.__RERENDER_LENS_DEVTOOLS__` exposes:
 
 | Method | |
 | --- | --- |
@@ -392,7 +397,7 @@ deepEqual(a, b), diffRecords(prev, next), classify(prev, next)
 | `trackAllComponents` | `false` | track everything (noisy) |
 | `include` / `exclude` | | display-name matchers |
 | `trackHooks` | `true` | diff hook state and contexts |
-| `includeState` | `true` | put every hook, context and class state value on each report |
+| `includeState` | `true` (`false` when injected by the extension) | put every hook, context and class state value on each report; the costliest option on large trees |
 | `resolveHookNames` | `false` | label hooks with the custom hooks that own them (`useCart › useState#0`); re-runs each component type once |
 | `logAll` | `false` | print non-avoidable reports too |
 | `silent` | `false` | never print; notifier still runs |
@@ -423,6 +428,10 @@ deepEqual(a, b), diffRecords(prev, next), classify(prev, next)
 
 ## Example app
 
+`examples/vite-react/scale.html?rows=3000` is the scale test: thousands of memoized cells that all
+re-render avoidably, sharing one large context value and a typed-array prop. Its readout shows
+the library's own cost per commit and how many reports the per-commit cap skipped.
+
 `examples/vite-react` has three deliberate bugs. From the repo root:
 
 ```sh

package/dist/{devtools-DmhWiWcN.d.cts → devtools-BkCct3cJ.d.cts}

@@ -115,6 +115,8 @@ interface HelloPayload {
         totalMs: number;
         maxCommitMs: number;
     };
+    /** Reports skipped because a commit exceeded the per-commit cap or time budget. */
+    truncated: number;
 }
 /** Command sent by a panel over the BroadcastChannel; answered with a `ChannelReply` of the same id. */
 interface ChannelCommand {
@@ -230,8 +232,14 @@ declare global {
         __RERENDER_LENS_DEVTOOLS__?: DevtoolsBridge;
     }
 }
-/** Convert a report into a structured-clone-safe value (functions, elements, cycles removed). */
-declare function serialize(value: unknown, maxDepth?: number, seen?: WeakSet<object>, depth?: number): unknown;
+/**
+ * Convert a report into a structured-clone-safe value (functions, elements, cycles removed).
+ * Depth, breadth and total size are bounded so a giant prop (a 100k-row list, an image buffer,
+ * a scene graph) costs a bounded amount of time and memory per report.
+ */
+declare function serialize(value: unknown, maxDepth?: number, seen?: WeakSet<object>, depth?: number, budget?: {
+    nodes: number;
+}): unknown;
 /** The current options in a JSON-safe form (function matchers and custom consoles are dropped). */
 declare function serializeOptions(o: Options): SerializableOptions;
 declare function deserializeOptions(o: SerializableOptions): Options;

package/dist/{devtools-BHGUUo-p.d.ts → devtools-CZebzpF6.d.ts}

@@ -115,6 +115,8 @@ interface HelloPayload {
         totalMs: number;
         maxCommitMs: number;
     };
+    /** Reports skipped because a commit exceeded the per-commit cap or time budget. */
+    truncated: number;
 }
 /** Command sent by a panel over the BroadcastChannel; answered with a `ChannelReply` of the same id. */
 interface ChannelCommand {
@@ -230,8 +232,14 @@ declare global {
         __RERENDER_LENS_DEVTOOLS__?: DevtoolsBridge;
     }
 }
-/** Convert a report into a structured-clone-safe value (functions, elements, cycles removed). */
-declare function serialize(value: unknown, maxDepth?: number, seen?: WeakSet<object>, depth?: number): unknown;
+/**
+ * Convert a report into a structured-clone-safe value (functions, elements, cycles removed).
+ * Depth, breadth and total size are bounded so a giant prop (a 100k-row list, an image buffer,
+ * a scene graph) costs a bounded amount of time and memory per report.
+ */
+declare function serialize(value: unknown, maxDepth?: number, seen?: WeakSet<object>, depth?: number, budget?: {
+    nodes: number;
+}): unknown;
 /** The current options in a JSON-safe form (function matchers and custom consoles are dropped). */
 declare function serializeOptions(o: Options): SerializableOptions;
 declare function deserializeOptions(o: SerializableOptions): Options;

package/dist/index.cjs

@@ -28,10 +28,49 @@ function remember(seen, a, b) {
   set.add(b);
   return false;
 }
+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;
+  };
+}
+function diffBudgetExhausted() {
+  return scope?.exhausted === true;
+}
 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;
+  }
+  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;
@@ -60,6 +99,10 @@ function deepEqual(a, b, seen = /* @__PURE__ */ new Map()) {
   }
   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;
@@ -75,9 +118,10 @@ function deepEqual(a, b, seen = /* @__PURE__ */ new Map()) {
     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], b[k], seen)) return false;
+      if (!deepEqual(a[k], rb[k], seen)) return false;
     }
     return true;
   }
@@ -119,7 +163,7 @@ function diffRecords(prev, next, basePath = "") {
     if (Object.is(a, b)) continue;
     const kind = classify(a, b);
     if (kind === "different") {
-      changes.push({ path: firstDifferentPath(a, b, path), kind, prev: a, next: b });
+      changes.push({ path: diffBudgetExhausted() ? path : firstDifferentPath(a, b, path), kind, prev: a, next: b });
     } else {
       changes.push({ path, kind, prev: a, next: b });
     }
@@ -330,7 +374,7 @@ function getState() {
   const g = globalThis;
   let s = g[KEY];
   if (!s) {
-    s = { options: {}, enabled: false, printed: /* @__PURE__ */ new Map(), detach: null, nextInstanceId: 1, nextCommitId: 1, warnedOnce: /* @__PURE__ */ new Set(), scheduled: 0, commits: 0, overheadMs: 0, maxCommitMs: 0 };
+    s = { options: {}, enabled: false, printed: /* @__PURE__ */ new Map(), detach: null, nextInstanceId: 1, nextCommitId: 1, warnedOnce: /* @__PURE__ */ new Set(), scheduled: 0, commits: 0, overheadMs: 0, maxCommitMs: 0, truncated: 0 };
     g[KEY] = s;
   }
   return s;
@@ -360,7 +404,7 @@ function dispatch(report, override) {
     try {
       options.notifier(report);
     } catch (err) {
-      (options.console ?? console).warn("[rerender-lens] notifier threw", err);
+      warnOnce("notifier", `notifier threw: ${String(err)}`);
     }
   }
 }
@@ -703,11 +747,14 @@ var counts = /* @__PURE__ */ new WeakMap();
 var ids = /* @__PURE__ */ new WeakMap();
 var fibersById = /* @__PURE__ */ new Map();
 var hasWeakRef = typeof WeakRef === "function";
+var pruneAt = 5e3;
 function remember2(id, fiber) {
   if (!hasWeakRef) return;
+  if (fibersById.get(id)?.deref() === fiber) return;
   fibersById.set(id, new WeakRef(fiber));
-  if (fibersById.size > 5e3) {
+  if (fibersById.size > pruneAt) {
     for (const [k, ref] of fibersById) if (!ref.deref()) fibersById.delete(k);
+    pruneAt = Math.max(5e3, fibersById.size * 2);
   }
 }
 function instanceIdOf(fiber) {
@@ -762,7 +809,7 @@ function nearestComponent(fiber) {
 }
 var INTERNAL_FRAME = /react-dom|react_jsx|jsx-(dev-)?runtime|\/react\/|node_modules\/react|react-stack-bottom-frame|react_stack_bottom_frame|scheduler/;
 function parseStackLocation(stack) {
-  for (const line of stack.split("\n")) {
+  for (const line of stack.split("\n", 24)) {
     const m = /(?:at\s+(?:.*?\s+)?\(?|@)?((?:https?|file|webpack|vite|blob):[^\s()]+?):(\d+):(\d+)\)?\s*$/.exec(line.trim());
     if (!m || !m[1] || INTERNAL_FRAME.test(m[1])) continue;
     return { fileName: m[1], lineNumber: Number(m[2]), columnNumber: Number(m[3]) };
@@ -778,9 +825,16 @@ function sourceOf(fiber) {
     return out;
   }
   const st = fiber._debugStack;
-  const text = typeof st === "string" ? st : st && typeof st.stack === "string" ? st.stack : null;
-  return text ? parseStackLocation(text) : void 0;
+  if (st && typeof st === "object") {
+    if (sourceCache.has(st)) return sourceCache.get(st);
+    const text = typeof st.stack === "string" ? st.stack : null;
+    const out = text ? parseStackLocation(text) : void 0;
+    sourceCache.set(st, out);
+    return out;
+  }
+  return typeof st === "string" ? parseStackLocation(st) : void 0;
 }
+var sourceCache = /* @__PURE__ */ new WeakMap();
 function bumpCount(fiber) {
   const prev = counts.get(fiber) ?? (fiber.alternate ? counts.get(fiber.alternate) : void 0) ?? 0;
   const n = prev + 1;
@@ -968,6 +1022,8 @@ function updatersOf(root) {
 }
 var lastCommit = null;
 var EFFECT_LOOP_WINDOW_MS = 50;
+var MAX_REPORTS_PER_COMMIT = 200;
+var COMMIT_TIME_BUDGET_MS = 25;
 function onCommit(root, commitPriority) {
   const s = getState();
   if (!s.enabled) return;
@@ -998,7 +1054,8 @@ function onCommit(root, commitPriority) {
   const updaters = updatersOf(root);
   let commitCause;
   let afterCommit;
-  if (lastCommit && at - lastCommit.at < EFFECT_LOOP_WINDOW_MS && updaters.some((u) => lastCommit.rendered.has(u))) {
+  const inputDriven = commitPriority === "immediate" || commitPriority === "user-blocking";
+  if (!inputDriven && lastCommit && at - lastCommit.at < EFFECT_LOOP_WINDOW_MS && updaters.some((u) => lastCommit.rendered.has(u))) {
     commitCause = "effect-after-commit";
     afterCommit = lastCommit.id;
   } else if (suspenseResolved) commitCause = "suspense-resolved";
@@ -1010,47 +1067,59 @@ function onCommit(root, commitPriority) {
   lastCommit = { id: commitId, at, rendered: renderedNames };
   const dispatcherRef = o.resolveHookNames ? getDispatcherRef() : null;
   const parentCache = /* @__PURE__ */ new Map();
-  for (const fiber of rendered) {
-    const alt = fiber.alternate;
-    const a = analyze(fiber, alt, trackHooks);
-    const durations = durationsOf(fiber);
-    let hookState = o.includeState !== false && trackHooks ? snapshotHooks(fiber) : void 0;
-    if (dispatcherRef && fiber.tag !== ClassComponent && (a.hookChanges.length || hookState && hookState.length)) {
-      const names = resolveHookNames(fiber, dispatcherRef);
-      if (names.size) {
-        for (const c of a.hookChanges) if (c.hook !== "useContext" && names.has(c.index)) c.custom = names.get(c.index);
-        if (hookState) hookState = hookState.map((h) => names.has(h.index) ? { ...h, custom: names.get(h.index) } : h);
+  const endDiffScope = beginDiffScope();
+  const deadline = at + COMMIT_TIME_BUDGET_MS;
+  try {
+    for (let i = 0; i < rendered.length; i++) {
+      if (i >= MAX_REPORTS_PER_COMMIT || (i & 15) === 15 && nowMs() > deadline) {
+        s.truncated += rendered.length - i;
+        warnOnce("truncated", `a commit rendered ${rendered.length} tracked components; only ${i} were reported (see info().truncated). Narrow \`include\` or turn off includeState.`);
+        break;
       }
+      const fiber = rendered[i];
+      const alt = fiber.alternate;
+      const a = analyze(fiber, alt, trackHooks);
+      const durations = durationsOf(fiber);
+      let hookState = o.includeState !== false && trackHooks ? snapshotHooks(fiber) : void 0;
+      if (dispatcherRef && fiber.tag !== ClassComponent && (a.hookChanges.length || hookState && hookState.length)) {
+        const names = resolveHookNames(fiber, dispatcherRef);
+        if (names.size) {
+          for (const c of a.hookChanges) if (c.hook !== "useContext" && names.has(c.index)) c.custom = names.get(c.index);
+          if (hookState) hookState = hookState.map((h) => names.has(h.index) ? { ...h, custom: names.get(h.index) } : h);
+        }
+      }
+      const report = buildReport({
+        component: fiberName(fiber),
+        instanceId: instanceId(fiber),
+        renderCount: bumpCount(fiber),
+        prevProps: alt.memoizedProps ?? {},
+        nextProps: fiber.memoizedProps ?? {},
+        propChanges: a.propChanges,
+        stateChanges: a.stateChanges,
+        hookChanges: a.hookChanges,
+        ...o.includeState !== false ? {
+          hookState,
+          contexts: trackHooks ? snapshotContexts(fiber) : void 0,
+          state: fiber.tag === ClassComponent && fiber.memoizedState && typeof fiber.memoizedState === "object" ? fiber.memoizedState : void 0
+        } : {},
+        updaters,
+        commitCause,
+        afterCommit,
+        key: fiber.key === null || fiber.key === void 0 ? null : String(fiber.key),
+        parent: a.trigger === "parent" ? nearestRenderedAncestor(fiber, parentCache, trackHooks) : null,
+        owner: ownerName(fiber),
+        path: componentPath(fiber),
+        memoized: isMemoizedFiber(fiber),
+        selfDuration: durations ? durations.self : void 0,
+        treeDuration: durations ? durations.tree : void 0,
+        commitId,
+        commitPriority,
+        source: sourceOf(fiber)
+      });
+      dispatch(report);
     }
-    const report = buildReport({
-      component: fiberName(fiber),
-      instanceId: instanceId(fiber),
-      renderCount: bumpCount(fiber),
-      prevProps: alt.memoizedProps ?? {},
-      nextProps: fiber.memoizedProps ?? {},
-      propChanges: a.propChanges,
-      stateChanges: a.stateChanges,
-      hookChanges: a.hookChanges,
-      ...o.includeState !== false ? {
-        hookState,
-        contexts: trackHooks ? snapshotContexts(fiber) : void 0,
-        state: fiber.tag === ClassComponent && fiber.memoizedState && typeof fiber.memoizedState === "object" ? fiber.memoizedState : void 0
-      } : {},
-      updaters,
-      commitCause,
-      afterCommit,
-      key: fiber.key === null || fiber.key === void 0 ? null : String(fiber.key),
-      parent: a.trigger === "parent" ? nearestRenderedAncestor(fiber, parentCache, trackHooks) : null,
-      owner: ownerName(fiber),
-      path: componentPath(fiber),
-      memoized: isMemoizedFiber(fiber),
-      selfDuration: durations ? durations.self : void 0,
-      treeDuration: durations ? durations.tree : void 0,
-      commitId,
-      commitPriority,
-      source: sourceOf(fiber)
-    });
-    dispatch(report);
+  } finally {
+    endDiffScope();
   }
 }
 
@@ -1444,13 +1513,24 @@ function highlight(target) {
   for (const s of l.sticky) s.remove();
   l.sticky = [];
   if (!target) return;
-  for (const node of target.nodes) {
-    const rect = node.getBoundingClientRect();
-    if (rect.width === 0 && rect.height === 0) continue;
+  const frag = document.createDocumentFragment();
+  for (const rect of measure(target.nodes)) {
     const b = box(rect, "#1a73e8", "rgba(26, 115, 232, 0.12)", target.label);
-    l.root.appendChild(b);
+    frag.appendChild(b);
     l.sticky.push(b);
   }
+  l.root.appendChild(frag);
+}
+var MAX_BOXES = 100;
+function measure(nodes) {
+  const rects = [];
+  for (const node of nodes) {
+    if (rects.length >= MAX_BOXES) break;
+    const rect = node.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) continue;
+    rects.push(rect);
+  }
+  return rects;
 }
 function clearHighlight() {
   highlight(null);
@@ -1458,27 +1538,34 @@ function clearHighlight() {
 function flash(target, duration = 500) {
   const l = ensureLayer();
   if (!l) return;
-  for (const node of target.nodes) {
-    const rect = node.getBoundingClientRect();
-    if (rect.width === 0 && rect.height === 0) continue;
+  const frag = document.createDocumentFragment();
+  const boxes = [];
+  for (const rect of measure(target.nodes)) {
     const b = box(rect, "#d93025", "rgba(217, 48, 37, 0.15)");
     b.style.transition = `opacity ${duration}ms ease-out`;
-    l.root.appendChild(b);
-    requestAnimationFrame(() => {
-      b.style.opacity = "0";
-    });
-    setTimeout(() => b.remove(), duration + 50);
+    frag.appendChild(b);
+    boxes.push(b);
   }
+  if (!boxes.length) return;
+  l.root.appendChild(frag);
+  requestAnimationFrame(() => {
+    for (const b of boxes) b.style.opacity = "0";
+  });
+  setTimeout(() => {
+    for (const b of boxes) b.remove();
+  }, duration + 50);
 }
 
 // src/version.ts
-var VERSION = "0.3.0" ;
+var VERSION = "0.4.0" ;
 
 // src/devtools.ts
 var DEVTOOLS_MARKER = "__rerenderLens";
 var PROTOCOL_VERSION = 2;
 var DEFAULT_CHANNEL = "rerender-lens";
-function serialize(value, maxDepth = 6, seen = /* @__PURE__ */ new WeakSet(), depth = 0) {
+var SERIALIZE_MAX_ENTRIES = 100;
+var SERIALIZE_MAX_NODES = 2e4;
+function serialize(value, maxDepth = 4, seen = /* @__PURE__ */ new WeakSet(), depth = 0, budget = { nodes: SERIALIZE_MAX_NODES }) {
   if (value === null || value === void 0) return value;
   const t = typeof value;
   if (t === "string" || t === "boolean") return value;
@@ -1489,24 +1576,56 @@ function serialize(value, maxDepth = 6, seen = /* @__PURE__ */ new WeakSet(), de
   const obj = value;
   if (seen.has(obj)) return "[Circular]";
   if (depth >= maxDepth) return "[\u2026]";
+  if (--budget.nodes < 0) return "[\u2026]";
+  const next = (v) => serialize(v, maxDepth, seen, depth + 1, budget);
   seen.add(obj);
   try {
     if (isReactElement(obj)) {
       const out2 = { $type: "element", name: getDisplayName(obj.type) };
       if (obj.key !== null && obj.key !== void 0) out2.key = String(obj.key);
-      out2.props = serialize(obj.props, maxDepth, seen, depth + 1);
+      out2.props = next(obj.props);
       return out2;
     }
     if (obj instanceof Date) return { $type: "Date", value: obj.toISOString() };
     if (obj instanceof RegExp) return { $type: "RegExp", value: String(obj) };
+    if (ArrayBuffer.isView(obj) || obj instanceof ArrayBuffer) {
+      const bin = obj;
+      return { $type: bin.constructor?.name || "ArrayBuffer", length: typeof bin.length === "number" ? bin.length : bin.byteLength };
+    }
+    if (obj instanceof Promise) return "[Promise]";
+    if (typeof Node !== "undefined" && obj instanceof Node) return typeof Element !== "undefined" && obj instanceof Element ? `<${obj.tagName.toLowerCase()}>` : `[${obj.nodeName}]`;
+    if (obj === globalThis) return "[Window]";
     if (obj instanceof Map) {
-      return { $type: "Map", entries: [...obj].map(([k, v]) => [serialize(k, maxDepth, seen, depth + 1), serialize(v, maxDepth, seen, depth + 1)]) };
+      const entries = [];
+      for (const [k, v] of obj) {
+        if (entries.length >= SERIALIZE_MAX_ENTRIES) {
+          entries.push(["\u2026", `+${obj.size - SERIALIZE_MAX_ENTRIES} more`]);
+          break;
+        }
+        entries.push([next(k), next(v)]);
+      }
+      return { $type: "Map", entries };
+    }
+    if (obj instanceof Set) {
+      const values = [];
+      for (const v of obj) {
+        if (values.length >= SERIALIZE_MAX_ENTRIES) {
+          values.push(`\u2026+${obj.size - SERIALIZE_MAX_ENTRIES} more`);
+          break;
+        }
+        values.push(next(v));
+      }
+      return { $type: "Set", values };
+    }
+    if (Array.isArray(obj)) {
+      const out2 = obj.slice(0, SERIALIZE_MAX_ENTRIES).map(next);
+      if (obj.length > SERIALIZE_MAX_ENTRIES) out2.push(`\u2026+${obj.length - SERIALIZE_MAX_ENTRIES} more`);
+      return out2;
     }
-    if (obj instanceof Set) return { $type: "Set", values: [...obj].map((v) => serialize(v, maxDepth, seen, depth + 1)) };
-    if (Array.isArray(obj)) return obj.map((v) => serialize(v, maxDepth, seen, depth + 1));
-    if (typeof Element !== "undefined" && obj instanceof Element) return `<${obj.tagName.toLowerCase()}>`;
     const out = {};
-    for (const k of Object.keys(obj)) out[k] = serialize(obj[k], maxDepth, seen, depth + 1);
+    const keys = Object.keys(obj);
+    for (const k of keys.slice(0, SERIALIZE_MAX_ENTRIES)) out[k] = next(obj[k]);
+    if (keys.length > SERIALIZE_MAX_ENTRIES) out["\u2026"] = `+${keys.length - SERIALIZE_MAX_ENTRIES} more`;
     const proto = Object.getPrototypeOf(obj);
     if (proto && proto !== Object.prototype && proto.constructor?.name) out.$type = proto.constructor.name;
     return out;
@@ -1546,13 +1665,20 @@ function deserializeOptions(o) {
 }
 function createDevtoolsNotifier(options = {}) {
   const bufferSize = options.bufferSize ?? 300;
-  const maxDepth = options.maxDepth ?? 6;
+  const maxDepth = options.maxDepth ?? 4;
   const target = options.target ?? (typeof window !== "undefined" ? window : void 0);
   const buffer = [];
   let seq = 0;
   let flashOn = options.flashAvoidable ?? false;
+  let live = !target || typeof target.addEventListener !== "function";
+  if (!live) {
+    target.addEventListener("message", (event) => {
+      const data = event.data;
+      if ((event.source === target || !event.source) && data && data.__rerenderLensReady === true) live = true;
+    });
+  }
   const post = (type, payload) => {
-    if (!target) return;
+    if (!target || type === "report" && !live) return;
     const msg = { [DEVTOOLS_MARKER]: true, version: PROTOCOL_VERSION, type, payload };
     target.postMessage(msg, "*");
   };
@@ -1569,10 +1695,12 @@ function createDevtoolsNotifier(options = {}) {
     injected: typeof window !== "undefined" && typeof window.__RERENDER_LENS_INJECTED__ === "string",
     scheduled: getState().scheduled,
     commits: getState().commits,
-    overhead: { totalMs: getState().overheadMs, maxCommitMs: getState().maxCommitMs }
+    overhead: { totalMs: getState().overheadMs, maxCommitMs: getState().maxCommitMs },
+    truncated: getState().truncated
   });
   const bridge = {
     replay: () => {
+      live = true;
       post("hello", info());
       for (const e of buffer) post("report", e.payload);
     },