@flotrace/runtime-core 2.2.4 → 2.3.0

package/dist/index.js

@@ -31,13 +31,22 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   DEFAULT_CONFIG: () => DEFAULT_CONFIG,
+  FLOTRACE_SOURCE: () => FLOTRACE_SOURCE,
   FloTraceWebSocketClient: () => FloTraceWebSocketClient,
+  JSX_RUNTIME_ACTIVE_KEY: () => JSX_RUNTIME_ACTIVE_KEY,
   buildAncestorChain: () => buildAncestorChain,
+  clearCallSiteRenders: () => clearCallSiteRenders,
   clearFetchOriginTags: () => clearFetchOriginTags,
+  computeCallSiteId: () => computeCallSiteId,
+  computeCallSiteMetricsPayload: () => computeCallSiteMetricsPayload,
+  describeFiberType: () => describeFiberType,
+  detectInlineLiterals: () => detectInlineLiterals,
   detectServerComponent: () => detectServerComponent,
   detectWebFramework: () => detectWebFramework,
   disposeWebSocketClient: () => disposeWebSocketClient,
   findFetchOrigin: () => findFetchOrigin,
+  getCallSiteRenderRate: () => getCallSiteRenderRate,
+  getCallSiteRenders: () => getCallSiteRenders,
   getChangedKeys: () => getChangedKeys,
   getComponentNameFromFiber: () => getComponentNameFromFiber,
   getCurrentRenderingFiber: () => getCurrentRenderingFiber,
@@ -60,9 +69,15 @@ __export(index_exports, {
   installTanStackQueryTracker: () => installTanStackQueryTracker,
   installTimelineTracker: () => installTimelineTracker,
   installZustandTracker: () => installZustandTracker,
+  isJsxRuntimeActive: () => isJsxRuntimeActive,
   isReduxStore: () => isReduxStore,
   isTanStackQueryClient: () => isTanStackQueryClient,
+  logTreeSnapshot: () => logTreeSnapshot,
+  logTreeSummary: () => logTreeSummary,
+  markJsxRuntimeActive: () => markJsxRuntimeActive,
   maybeEmitNextjsContext: () => maybeEmitNextjsContext,
+  normalizeJsxSourcePath: () => normalizeJsxSourcePath,
+  recordCallSiteRender: () => recordCallSiteRender,
   recordTimelineEvent: () => recordTimelineEvent,
   requestFullSnapshot: () => requestFullSnapshot,
   requestTreeSnapshot: () => requestTreeSnapshot,
@@ -70,6 +85,8 @@ __export(index_exports, {
   resolveValueTrace: () => resolveValueTrace,
   serializeProps: () => serializeProps,
   serializeValue: () => serializeValue,
+  setDuplicateKeyEmitter: () => setDuplicateKeyEmitter,
+  setFiberDebug: () => setFiberDebug,
   tagFetchData: () => tagFetchData,
   uninstallFiberTreeWalker: () => uninstallFiberTreeWalker,
   uninstallReduxTracker: () => uninstallReduxTracker,
@@ -103,6 +120,130 @@ var DEFAULT_CONFIG = {
   getAppUrl: void 0
 };
 
+// src/jsxRuntimeUtils.ts
+var FLOTRACE_SOURCE = /* @__PURE__ */ Symbol.for("flotrace.source");
+var JSX_RUNTIME_ACTIVE_KEY = /* @__PURE__ */ Symbol.for("flotrace.jsx-runtime-active");
+function normalizeJsxSourcePath(fileName) {
+  let p = fileName;
+  if (p.startsWith("file://")) p = p.slice("file://".length);
+  if (p.startsWith("webpack-internal:///./")) p = p.slice("webpack-internal:///./".length);
+  if (p.startsWith("[project]/")) p = p.slice("[project]/".length);
+  if (p.startsWith("./")) p = p.slice(2);
+  if (/^\/[a-zA-Z]:[\\/]/.test(p)) p = p.slice(1);
+  if (/^[a-zA-Z]:[\\/]/.test(p)) p = p[0].toLowerCase() + p.slice(1);
+  return p;
+}
+function computeCallSiteId(source) {
+  const normPath = normalizeJsxSourcePath(source.fileName);
+  const key = `${normPath}:${source.lineNumber}:${source.columnNumber}`;
+  let hash = 2166136261;
+  for (let i = 0; i < key.length; i++) {
+    hash ^= key.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(16).padStart(8, "0");
+}
+function readJsxSourceFromFiber(fiber) {
+  const props = fiber.memoizedProps;
+  if (!props) return void 0;
+  const raw = props[FLOTRACE_SOURCE];
+  if (!raw || typeof raw !== "object") return void 0;
+  const obj = raw;
+  if (typeof obj.fileName !== "string" || typeof obj.lineNumber !== "number" || typeof obj.columnNumber !== "number" || typeof obj.callSiteId !== "string") {
+    return void 0;
+  }
+  return raw;
+}
+var callSiteRenders = /* @__PURE__ */ new Map();
+var RING_BUFFER_MAX = 60;
+function recordCallSiteRender(callSiteId, now2 = performance.now()) {
+  const arr = callSiteRenders.get(callSiteId);
+  if (arr === void 0) {
+    callSiteRenders.set(callSiteId, [now2]);
+    return;
+  }
+  arr.push(now2);
+  if (arr.length > RING_BUFFER_MAX) arr.shift();
+}
+function getCallSiteRenders(callSiteId) {
+  return callSiteRenders.get(callSiteId) ?? [];
+}
+function getCallSiteRenderRate(callSiteId, windowMs = 5e3, now2 = performance.now()) {
+  const arr = callSiteRenders.get(callSiteId);
+  if (!arr || arr.length === 0) return 0;
+  const cutoff = now2 - windowMs;
+  let count = 0;
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if (arr[i] >= cutoff) count++;
+    else break;
+  }
+  return count / windowMs * 1e3;
+}
+function clearCallSiteRenders() {
+  callSiteRenders.clear();
+}
+function computeCallSiteMetricsPayload(windowMs = 5e3, now2 = performance.now()) {
+  let out = null;
+  const cutoff = now2 - windowMs;
+  for (const [callSiteId, arr] of callSiteRenders) {
+    if (arr.length === 0) continue;
+    let count = 0;
+    for (let i = arr.length - 1; i >= 0; i--) {
+      if (arr[i] >= cutoff) count++;
+      else break;
+    }
+    if (count > 0) {
+      (out ?? (out = {}))[callSiteId] = count / windowMs * 1e3;
+    }
+  }
+  return out;
+}
+var duplicateKeyEmitter = null;
+function setDuplicateKeyEmitter(emitter) {
+  duplicateKeyEmitter = emitter;
+}
+function markJsxRuntimeActive() {
+  globalThis[JSX_RUNTIME_ACTIVE_KEY] = true;
+}
+function isJsxRuntimeActive() {
+  return globalThis[JSX_RUNTIME_ACTIVE_KEY] === true;
+}
+var KNOWN_REACT_PROPS = /* @__PURE__ */ new Set(["key", "ref", "children", "className"]);
+var REACT_ELEMENT_TYPEOF_LEGACY = /* @__PURE__ */ Symbol.for("react.element");
+var REACT_ELEMENT_TYPEOF_R19 = /* @__PURE__ */ Symbol.for("react.transitional.element");
+function isReactElement(v) {
+  const typeOf = v.$$typeof;
+  return typeOf === REACT_ELEMENT_TYPEOF_LEGACY || typeOf === REACT_ELEMENT_TYPEOF_R19;
+}
+function detectInlineLiterals(props) {
+  let out;
+  for (const k in props) {
+    if (KNOWN_REACT_PROPS.has(k)) continue;
+    const v = props[k];
+    if (typeof v === "function") {
+      if (!v.name) {
+        (out ?? (out = {}))[k] = "fn";
+      }
+    } else if (Array.isArray(v)) {
+      if (v.length > 0) {
+        (out ?? (out = {}))[k] = "arr";
+      }
+    } else if (v !== null && typeof v === "object" && // Skip elements processed by our own runtime (marker present).
+    !(FLOTRACE_SOURCE in v) && // Skip React elements processed by ANY runtime — `$$typeof` is set on
+    // every element regardless of which jsx-runtime created it, so this
+    // catches mixed-runtime codebases. Without this guard, an inline
+    // `<Outer child={<Inner/>} />` would false-positive on `child` when
+    // Inner went through a different jsxImportSource.
+    !isReactElement(v)) {
+      const proto = Object.getPrototypeOf(v);
+      if (proto === Object.prototype || proto === null) {
+        (out ?? (out = {}))[k] = "obj";
+      }
+    }
+  }
+  return out;
+}
+
 // src/serializer.ts
 var MAX_DEPTH = 5;
 var MAX_STRING_LENGTH = 500;
@@ -211,11 +352,7 @@ function serializeValue(value, depth = 0, seen = /* @__PURE__ */ new WeakSet())
     for (let i = 0; i < Math.min(keys.length, MAX_OBJECT_KEYS); i++) {
       const key = keys[i];
       try {
-        result[key] = serializeValue(
-          value[key],
-          depth + 1,
-          seen
-        );
+        result[key] = serializeValue(value[key], depth + 1, seen);
       } catch {
         result[key] = { __type: "truncated", originalType: "error" };
       }
@@ -316,7 +453,12 @@ var _FloTraceWebSocketClient = class _FloTraceWebSocketClient {
           frameworkName: this.config.frameworkName,
           frameworkVersion: this.config.frameworkVersion,
           reactNativeVersion: this.config.reactNativeVersion,
-          runtimeVersion: this.config.runtimeVersion
+          runtimeVersion: this.config.runtimeVersion,
+          // P5: JSX runtime adoption signal — read at WS-open time so
+          // multiple fibers have already rendered by the moment we report.
+          // `isJsxRuntimeActive` reads `globalThis[Symbol.for('flotrace.jsx-runtime-active')]`,
+          // which the dev jsx-runtime sets on first jsxDEV call.
+          jsxRuntimeActive: isJsxRuntimeActive()
         });
         this.flush();
       };
@@ -642,26 +784,31 @@ function classifyFromDebugLabel(state, index, effects, effectIdx, debugLabel) {
   const ms = state.memoizedState;
   const normalizedLabel = debugLabel.toLowerCase().replace(/\s/g, "");
   const labelMap = {
-    "usestate": "useState",
-    "usereducer": "useReducer",
-    "useref": "useRef",
-    "usememo": "useMemo",
-    "usecallback": "useCallback",
-    "useeffect": "useEffect",
-    "uselayouteffect": "useLayoutEffect",
-    "useinsertioneffect": "useInsertionEffect",
-    "usecontext": "useContext",
-    "useimperativehandle": "useImperativeHandle",
-    "usedebugvalue": "useDebugValue",
-    "usetransition": "useTransition",
-    "usedeferredvalue": "useDeferredValue",
-    "useid": "useId",
-    "usesyncexternalstore": "useSyncExternalStore",
-    "useoptimistic": "useOptimistic",
-    "useformstatus": "useFormStatus"
+    usestate: "useState",
+    usereducer: "useReducer",
+    useref: "useRef",
+    usememo: "useMemo",
+    usecallback: "useCallback",
+    useeffect: "useEffect",
+    uselayouteffect: "useLayoutEffect",
+    useinsertioneffect: "useInsertionEffect",
+    usecontext: "useContext",
+    useimperativehandle: "useImperativeHandle",
+    usedebugvalue: "useDebugValue",
+    usetransition: "useTransition",
+    usedeferredvalue: "useDeferredValue",
+    useid: "useId",
+    usesyncexternalstore: "useSyncExternalStore",
+    useoptimistic: "useOptimistic",
+    useformstatus: "useFormStatus"
   };
   const hookType = labelMap[normalizedLabel] ?? "unknown";
-  const base = { index, type: hookType, value: serializeValue(ms, 0, /* @__PURE__ */ new WeakSet()), debugLabel };
+  const base = {
+    index,
+    type: hookType,
+    value: serializeValue(ms, 0, /* @__PURE__ */ new WeakSet()),
+    debugLabel
+  };
   if (hookType === "useEffect" || hookType === "useLayoutEffect" || hookType === "useInsertionEffect") {
     if (effectIdx < effects.length) {
       const effect = effects[effectIdx];
@@ -1128,7 +1275,13 @@ var ClassComponent = 1;
 var ForwardRef = 11;
 var MemoComponent = 14;
 var SimpleMemoComponent = 15;
-var USER_TAGS = /* @__PURE__ */ new Set([FunctionComponent, ClassComponent, ForwardRef, MemoComponent, SimpleMemoComponent]);
+var USER_TAGS = /* @__PURE__ */ new Set([
+  FunctionComponent,
+  ClassComponent,
+  ForwardRef,
+  MemoComponent,
+  SimpleMemoComponent
+]);
 function isMemoizedFiber(fiber) {
   return fiber.tag === MemoComponent || fiber.tag === SimpleMemoComponent;
 }
@@ -1212,13 +1365,15 @@ function buildCascadeTree(rootFiber, triggers) {
       triggerByName.set(t.componentName, t);
     }
   }
-  const stack = [{
-    fiber: rootFiber,
-    depth: 0,
-    parentRerendered: false,
-    parentNode: null,
-    isRoot: true
-  }];
+  const stack = [
+    {
+      fiber: rootFiber,
+      depth: 0,
+      parentRerendered: false,
+      parentNode: null,
+      isRoot: true
+    }
+  ];
   while (stack.length > 0) {
     const entry = stack.pop();
     const { fiber, depth, parentRerendered, parentNode, isRoot } = entry;
@@ -1229,7 +1384,13 @@ function buildCascadeTree(rootFiber, triggers) {
     if (isNewMount && !didRender) {
       let child2 = fiber.child;
       while (child2) {
-        stack.push({ fiber: child2, depth: depth + 1, parentRerendered: false, parentNode, isRoot: false });
+        stack.push({
+          fiber: child2,
+          depth: depth + 1,
+          parentRerendered: false,
+          parentNode,
+          isRoot: false
+        });
         child2 = child2.sibling;
       }
       continue;
@@ -1237,7 +1398,13 @@ function buildCascadeTree(rootFiber, triggers) {
     if (!USER_TAGS.has(fiber.tag)) {
       let child2 = fiber.child;
       while (child2) {
-        stack.push({ fiber: child2, depth: depth + 1, parentRerendered: didRender || parentRerendered, parentNode, isRoot: false });
+        stack.push({
+          fiber: child2,
+          depth: depth + 1,
+          parentRerendered: didRender || parentRerendered,
+          parentNode,
+          isRoot: false
+        });
         child2 = child2.sibling;
       }
       continue;
@@ -1246,7 +1413,13 @@ function buildCascadeTree(rootFiber, triggers) {
     if (reason === null) {
       let child2 = fiber.child;
       while (child2) {
-        stack.push({ fiber: child2, depth: depth + 1, parentRerendered: false, parentNode, isRoot: false });
+        stack.push({
+          fiber: child2,
+          depth: depth + 1,
+          parentRerendered: false,
+          parentNode,
+          isRoot: false
+        });
         child2 = child2.sibling;
       }
       continue;
@@ -1272,7 +1445,11 @@ function buildCascadeTree(rootFiber, triggers) {
       triggerId,
       children: [],
       depth,
-      isMemoized: isMemoizedFiber(fiber)
+      isMemoized: isMemoizedFiber(fiber),
+      // P6: JSX-runtime attribution — read from fiber.memoizedProps directly.
+      // Same source the walker uses, so cascade nodes align with LiveTreeNode
+      // attribution for the same user component.
+      jsxSource: readJsxSourceFromFiber(fiber)
     };
     totalComponents++;
     if (reason === "parent-cascade") {
@@ -1305,7 +1482,10 @@ function analyzeCascade(root, triggers) {
   try {
     const finishedLanes = getFinishedLanes(root);
     const lane = classifyLanes(finishedLanes);
-    const { rootCauses, totalComponents, avoidableCount, avoidableDuration } = buildCascadeTree(root.current, triggers);
+    const { rootCauses, totalComponents, avoidableCount, avoidableDuration } = buildCascadeTree(
+      root.current,
+      triggers
+    );
     if (totalComponents === 0) return null;
     const totalDuration = rootCauses.reduce((sum, n) => sum + n.subtreeDuration, 0);
     const triggerIds = triggers.map((t) => t.triggerId);
@@ -1387,7 +1567,8 @@ function shouldFlagRename(value) {
   if (value === null || value === void 0) return false;
   if (typeof value !== "object") return false;
   if (Array.isArray(value) && value.length === 0) return false;
-  if (!Array.isArray(value) && Object.keys(value).length === 0) return false;
+  if (!Array.isArray(value) && Object.keys(value).length === 0)
+    return false;
   return true;
 }
 function computePropIntersectionRatio(nodeProps, childrenProps) {
@@ -1596,13 +1777,24 @@ function runAnalysis(tree, fiberRefMap2) {
             propKey: p.propKey,
             role,
             hookCount: hookCounts.get(p.nodeId) ?? 0,
-            hasContextHook: contextFlags.get(p.nodeId) ?? false
+            hasContextHook: contextFlags.get(p.nodeId) ?? false,
+            // P6: propagate JSX-runtime attribution from the tree node so the
+            // drill-chain detail can render `(file:line)` per step + click-
+            // to-IDE on each component along the chain. Undefined when the
+            // user hasn't opted into the JSX runtime.
+            jsxSource: n?.jsxSource
           };
         });
         const passthroughCount = chainNodes.filter((n) => n.role === "passthrough").length;
         const sourceNode = nodeMap.get(sourceId);
         const renames = path.flatMap(
-          (p, idx) => p.isRename ? [{ atNodeId: p.nodeId, fromKey: idx > 0 ? path[idx - 1].propKey : sourcePropName, toKey: p.propKey }] : []
+          (p, idx) => p.isRename ? [
+            {
+              atNodeId: p.nodeId,
+              fromKey: idx > 0 ? path[idx - 1].propKey : sourcePropName,
+              toKey: p.propKey
+            }
+          ] : []
         );
         chains.push({
           chainId: makeChainId(sourceId, fp, consumerNodeId),
@@ -1697,10 +1889,7 @@ var SERVER_COMPONENT_PATTERNS = [
   /[\\/]app[\\/].+[\\/]error\.[jt]sx?$/
   // Next.js error UI
 ];
-var SERVER_REFERENCE_PATTERNS = [
-  /_ServerReference$/,
-  /^RSC_/
-];
+var SERVER_REFERENCE_PATTERNS = [/_ServerReference$/, /^RSC_/];
 var detectionEmitted = false;
 function maybeEmitNextjsContext(client2) {
   if (detectionEmitted) return;
@@ -1794,7 +1983,9 @@ function scanActionStateChanges(fiberRefMap2, client2) {
     for (const [nodeId, fiber] of fiberRefMap2) {
       const entries = extractActionEntries(fiber);
       if (!entries) continue;
-      const snapshot = JSON.stringify(entries.map((e) => ({ i: e.hookIndex, p: e.isPending, s: e.state })));
+      const snapshot = JSON.stringify(
+        entries.map((e) => ({ i: e.hookIndex, p: e.isPending, s: e.state }))
+      );
       if (prevActionStateMap.get(nodeId) === snapshot) continue;
       prevActionStateMap.set(nodeId, snapshot);
       const componentName = nodeId.split("/").pop()?.replace(/-\d+$/, "") ?? "Unknown";
@@ -1904,7 +2095,8 @@ function tagFetchData(obj, requestId, depth = 0) {
     const limit = Math.min(obj.length, FETCH_ORIGIN_TAG_ARRAY_LIMIT);
     for (let i = 0; i < limit; i++) tagFetchData(obj[i], requestId, depth + 1);
   } else {
-    for (const val of Object.values(obj)) tagFetchData(val, requestId, depth + 1);
+    for (const val of Object.values(obj))
+      tagFetchData(val, requestId, depth + 1);
   }
 }
 function hasActiveTags() {
@@ -1940,6 +2132,344 @@ function scanForOrigin(obj, depth, ignoreTTL) {
   return void 0;
 }
 
+// src/fiberDebugLogger.ts
+var MAX_FIBER_RECORDS = 500;
+var MAX_TREE_RECORDS = 50;
+var MAX_TOP_NAMES_PER_SNAPSHOT = 10;
+var MAX_CONTEXTS_PER_FIBER = 8;
+var totalFiberEvents = 0;
+var recordingStartedAt = null;
+var fiberRecords = /* @__PURE__ */ new Map();
+var treeRecords = [];
+function isRecording() {
+  return Boolean(globalThis.__FT_DEBUG);
+}
+function setFiberDebug(enabled) {
+  globalThis.__FT_DEBUG = enabled;
+  if (enabled) {
+    console.info(
+      "%c[FT debug]%c recording started \u2014 call %c__ft.dump()%c to view, %c__ft.clear()%c to reset, %c__ft.download()%c to export",
+      "background:#1e293b;color:#7dd3fc;padding:1px 6px;border-radius:3px;font-weight:600;",
+      "color:#94a3b8;",
+      "color:#a78bfa;font-weight:600;",
+      "color:#94a3b8;",
+      "color:#a78bfa;font-weight:600;",
+      "color:#94a3b8;",
+      "color:#a78bfa;font-weight:600;",
+      "color:#94a3b8;"
+    );
+  }
+}
+function isFiberFunctionType(t) {
+  return typeof t === "function";
+}
+function isFiberObjectType(t) {
+  return typeof t === "object" && t !== null;
+}
+function isClassComponentType(t) {
+  if (typeof t !== "function") return false;
+  const proto = t.prototype;
+  return typeof proto?.isReactComponent !== "undefined";
+}
+function describeFiberType(fiber) {
+  const type = fiber.type;
+  if (typeof type === "string") {
+    return {
+      kind: "host",
+      name: type,
+      displayName: void 0,
+      resolved: type,
+      looksMinified: false
+    };
+  }
+  if (isFiberFunctionType(type)) {
+    const isClass = isClassComponentType(type);
+    const resolved = type.displayName ?? type.name ?? "Anonymous";
+    return {
+      kind: isClass ? "class" : "function",
+      name: type.name,
+      displayName: type.displayName,
+      resolved,
+      looksMinified: looksMinified(resolved)
+    };
+  }
+  if (isFiberObjectType(type)) {
+    if (type.render) {
+      const resolved2 = type.render.displayName ?? type.render.name ?? "ForwardRef";
+      return {
+        kind: "forwardRef",
+        name: type.render.name,
+        displayName: type.render.displayName,
+        resolved: resolved2,
+        looksMinified: looksMinified(resolved2)
+      };
+    }
+    if (type.type) {
+      const resolved2 = type.type.displayName ?? type.type.name ?? "Memo";
+      return {
+        kind: "memo",
+        name: type.type.name,
+        displayName: type.type.displayName,
+        resolved: resolved2,
+        looksMinified: looksMinified(resolved2)
+      };
+    }
+    const resolved = type.displayName ?? type.name ?? "Unknown";
+    return {
+      kind: "unknown",
+      name: type.name,
+      displayName: type.displayName,
+      resolved,
+      looksMinified: looksMinified(resolved)
+    };
+  }
+  return {
+    kind: "unknown",
+    name: void 0,
+    displayName: void 0,
+    resolved: "Unknown",
+    looksMinified: false
+  };
+}
+function looksMinified(name) {
+  return /^[a-z_$][a-z0-9_$]?$/i.test(name);
+}
+function logFiberType(fiber, context) {
+  if (!isRecording()) return;
+  const info = describeFiberType(fiber);
+  const key = info.resolved;
+  const now2 = Date.now();
+  if (recordingStartedAt === null) recordingStartedAt = now2;
+  totalFiberEvents += 1;
+  const existing = fiberRecords.get(key);
+  if (existing) {
+    existing.count += 1;
+    existing.lastSeen = now2;
+    if (context && existing.contexts.size < MAX_CONTEXTS_PER_FIBER) {
+      existing.contexts.add(context);
+    }
+    if (existing.exampleKey === void 0 && typeof fiber.key === "string") {
+      existing.exampleKey = fiber.key;
+    }
+    return;
+  }
+  if (fiberRecords.size >= MAX_FIBER_RECORDS) {
+    evictOldestFiber();
+  }
+  fiberRecords.set(key, {
+    name: info.resolved,
+    rawName: info.name,
+    rawDisplayName: info.displayName,
+    kind: info.kind,
+    fiberTag: fiber.tag,
+    looksMinified: info.looksMinified,
+    count: 1,
+    contexts: new Set(context ? [context] : []),
+    firstSeen: now2,
+    lastSeen: now2,
+    source: fiber._debugSource ?? void 0,
+    exampleKey: typeof fiber.key === "string" ? fiber.key : void 0
+  });
+}
+function evictOldestFiber() {
+  let oldestKey;
+  let oldestTime = Infinity;
+  for (const [key, rec] of fiberRecords) {
+    if (rec.lastSeen < oldestTime) {
+      oldestTime = rec.lastSeen;
+      oldestKey = key;
+    }
+  }
+  if (oldestKey) fiberRecords.delete(oldestKey);
+}
+function walkStats(node, depth, acc) {
+  acc.total += 1;
+  if (depth > acc.maxDepth) acc.maxDepth = depth;
+  if (looksMinified(node.name)) acc.minifiedLike += 1;
+  acc.byName.set(node.name, (acc.byName.get(node.name) ?? 0) + 1);
+  for (const child of node.children) walkStats(child, depth + 1, acc);
+}
+function logTreeSnapshot(tree, context) {
+  if (!isRecording() || !tree) return;
+  const stats = { total: 0, minifiedLike: 0, byName: /* @__PURE__ */ new Map(), maxDepth: 0 };
+  walkStats(tree, 0, stats);
+  const topNames = [...stats.byName.entries()].sort((a, b) => b[1] - a[1]).slice(0, MAX_TOP_NAMES_PER_SNAPSHOT).map(([n, c]) => `${n}:${c}`).join(",");
+  treeRecords.push({
+    ts: Date.now(),
+    ctx: context ?? "",
+    rootName: tree.name,
+    totalNodes: stats.total,
+    maxDepth: stats.maxDepth,
+    minifiedLike: stats.minifiedLike,
+    topNames
+  });
+  if (treeRecords.length > MAX_TREE_RECORDS) treeRecords.shift();
+}
+var logTreeSummary = logTreeSnapshot;
+function installConsoleApi() {
+  if (globalThis.__ft) return;
+  const api = {
+    dump() {
+      const fiberRows = serializeFiberRecords();
+      const snapRows = serializeTreeRecords();
+      const minifiedCount = fiberRows.filter((r) => r.looksMinified).length;
+      const elapsedSec = recordingStartedAt === null ? 0 : (Date.now() - recordingStartedAt) / 1e3;
+      const summary = [
+        {
+          metric: "uniqueComponents",
+          value: fiberRecords.size
+        },
+        {
+          metric: "totalFiberEvents",
+          value: totalFiberEvents
+        },
+        {
+          metric: "minifiedLike",
+          value: `${minifiedCount} / ${fiberRecords.size}`
+        },
+        {
+          metric: "snapshots",
+          value: treeRecords.length
+        },
+        {
+          metric: "recordingSec",
+          value: elapsedSec.toFixed(1)
+        }
+      ];
+      console.groupCollapsed(
+        `%c[FT debug] dump%c \u2014 ${fiberRecords.size} components, ${totalFiberEvents} events, ${treeRecords.length} snapshots`,
+        "background:#1e293b;color:#7dd3fc;padding:1px 6px;border-radius:3px;font-weight:600;",
+        "color:#94a3b8;"
+      );
+      console.log("Summary:");
+      console.table(summary, ["metric", "value"]);
+      console.log("Fibers \u2014 every observed component (sorted by call count):");
+      console.table(fiberRows, [
+        "name",
+        "rawName",
+        "rawDisplayName",
+        "kind",
+        "fiberTag",
+        "count",
+        "looksMinified",
+        "exampleKey",
+        "contexts",
+        "file",
+        "line",
+        "firstSeenAt",
+        "lastSeenAt",
+        "lastAgoSec"
+      ]);
+      console.log("Tree snapshots \u2014 newest last:");
+      console.table(snapRows, [
+        "ts",
+        "ctx",
+        "rootName",
+        "totalNodes",
+        "maxDepth",
+        "minifiedLike",
+        "topNames"
+      ]);
+      console.groupEnd();
+    },
+    fibers() {
+      console.table(serializeFiberRecords(), [
+        "name",
+        "rawName",
+        "rawDisplayName",
+        "kind",
+        "fiberTag",
+        "count",
+        "looksMinified",
+        "exampleKey",
+        "contexts",
+        "file",
+        "line",
+        "firstSeenAt",
+        "lastSeenAt",
+        "lastAgoSec"
+      ]);
+    },
+    snapshots() {
+      console.table(serializeTreeRecords());
+    },
+    tail(n = 20) {
+      console.table(treeRecords.slice(-n));
+    },
+    clear() {
+      fiberRecords.clear();
+      treeRecords.length = 0;
+      console.info("[FT debug] cleared");
+    },
+    size() {
+      return { fibers: fiberRecords.size, snapshots: treeRecords.length };
+    },
+    export() {
+      return { fibers: serializeFiberRecords(), snapshots: treeRecords.slice() };
+    },
+    download(filename) {
+      const data = api.export();
+      const json = JSON.stringify(data, null, 2);
+      const docRef = globalThis.document;
+      const URLRef = globalThis.URL;
+      if (!docRef || !URLRef || typeof URLRef.createObjectURL !== "function") {
+        console.warn(
+          "[FT debug] download() requires a browser environment \u2014 printing JSON instead"
+        );
+        console.log(json);
+        return;
+      }
+      const blob = new Blob([json], { type: "application/json" });
+      const url = URLRef.createObjectURL(blob);
+      const a = docRef.createElement("a");
+      a.href = url;
+      a.download = filename ?? `flotrace-debug-${Date.now()}.json`;
+      a.click();
+      URLRef.revokeObjectURL(url);
+    }
+  };
+  globalThis.__ft = api;
+}
+installConsoleApi();
+function formatTime(ms) {
+  const d = new Date(ms);
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  const ss = String(d.getSeconds()).padStart(2, "0");
+  const mss = String(d.getMilliseconds()).padStart(3, "0");
+  return `${hh}:${mm}:${ss}.${mss}`;
+}
+function serializeFiberRecords() {
+  const now2 = Date.now();
+  return [...fiberRecords.values()].sort((a, b) => b.count - a.count).map((r) => ({
+    name: r.name,
+    rawName: r.rawName ?? "",
+    rawDisplayName: r.rawDisplayName ?? "",
+    kind: r.kind,
+    fiberTag: r.fiberTag ?? "",
+    count: r.count,
+    looksMinified: r.looksMinified,
+    exampleKey: r.exampleKey ?? "",
+    contexts: [...r.contexts].join(","),
+    file: r.source?.fileName ?? "",
+    line: r.source?.lineNumber ?? "",
+    firstSeenAt: formatTime(r.firstSeen),
+    lastSeenAt: formatTime(r.lastSeen),
+    lastAgoSec: ((now2 - r.lastSeen) / 1e3).toFixed(1)
+  }));
+}
+function serializeTreeRecords() {
+  return treeRecords.map((t) => ({
+    ts: formatTime(t.ts),
+    ctx: t.ctx,
+    rootName: t.rootName,
+    totalNodes: t.totalNodes,
+    maxDepth: t.maxDepth,
+    minifiedLike: t.minifiedLike,
+    topNames: t.topNames
+  }));
+}
+
 // src/fiberTreeWalker.ts
 var FIBER_TAGS = {
   FunctionComponent: 0,
@@ -2082,6 +2612,7 @@ function debugLog(...args) {
 }
 var fiberRefMap = /* @__PURE__ */ new Map();
 function getComponentName2(fiber) {
+  logFiberType(fiber, "getName");
   const type = fiber.type;
   if (!type) return "Unknown";
   if (typeof type === "function") {
@@ -2207,6 +2738,8 @@ var FRAMEWORK_PATH_PATTERNS = [
   /formik/
 ];
 function resolveEffectiveSourcePath(fiber) {
+  const jsxSrc = readJsxSourceFromFiber(fiber);
+  if (jsxSrc) return jsxSrc.fileName;
   if (fiber._debugSource?.fileName) return fiber._debugSource.fileName;
   const ownerHit = walkAncestors(
     fiber._debugOwner ?? null,
@@ -2222,6 +2755,14 @@ function resolveEffectiveSourcePath(fiber) {
   }
   return null;
 }
+function resolveSourceConfidence(fiber, isFramework, isLibrary, precomputedJsxSource) {
+  if (isFramework || isLibrary) return "package";
+  const jsxSrc = precomputedJsxSource ?? readJsxSourceFromFiber(fiber);
+  if (jsxSrc) return "exact";
+  if (fiber._debugSource?.fileName) return "exact";
+  if (resolveEffectiveSourcePath(fiber)) return "inferred";
+  return "unknown";
+}
 var STOP_WALK = /* @__PURE__ */ Symbol("stop-walk");
 function walkAncestors(start, maxHops, next, visit) {
   let cur = start;
@@ -2388,13 +2929,7 @@ function walkFiber(fiber, parentId, sharedNameCountMap, depth = 0, inSuspenseFal
           { reason: renderReason },
           current.actualDuration
         );
-        const children = walkFiber(
-          current.child,
-          nodeId,
-          void 0,
-          depth + 1,
-          inSuspenseFallback
-        );
+        const children = walkFiber(current.child, nodeId, void 0, depth + 1, inSuspenseFallback);
         const truncatedChildren = children.length > MAX_CHILDREN_PER_NODE ? children.slice(0, MAX_CHILDREN_PER_NODE) : children;
         const framework = isFrameworkComponent(current, name) || void 0;
         const queryHashes = detectQueryObserverHashes(current);
@@ -2402,6 +2937,13 @@ function walkFiber(fiber, parentId, sharedNameCountMap, depth = 0, inSuspenseFal
         const compilerStatus = detectCompilerStatus(current);
         const isServerComponent = detectServerComponent(current) || void 0;
         const libraryName = framework ? void 0 : detectLibraryName(current, name);
+        const jsxSource = readJsxSourceFromFiber(current);
+        const sourceConfidence = resolveSourceConfidence(
+          current,
+          framework === true,
+          libraryName !== void 0,
+          jsxSource
+        );
         const node = {
           id: nodeId,
           name,
@@ -2410,8 +2952,8 @@ function walkFiber(fiber, parentId, sharedNameCountMap, depth = 0, inSuspenseFal
           renderPhase,
           renderReason,
           renderDuration: current.actualDuration,
-          filePath: current._debugSource?.fileName,
-          lineNumber: current._debugSource?.lineNumber,
+          filePath: jsxSource?.fileName ?? current._debugSource?.fileName,
+          lineNumber: jsxSource?.lineNumber ?? current._debugSource?.lineNumber,
           isFramework: framework,
           reactKey: resolveEffectiveReactKey(current),
           queryHashes,
@@ -2422,7 +2964,9 @@ function walkFiber(fiber, parentId, sharedNameCountMap, depth = 0, inSuspenseFal
           compilerStatus,
           isServerComponent,
           isLibrary: libraryName !== void 0 ? true : void 0,
-          libraryName
+          libraryName,
+          jsxSource,
+          sourceConfidence
         };
         if (!walkerOptions.pruneSubtree?.(node)) {
           nodes.push(node);
@@ -2496,11 +3040,7 @@ function buildTreeFromFiberRoot(root) {
   }
   fiberRefMap.clear();
   const topLevelNodes = walkFiber(rootFiber.child, "");
-  debugLog(
-    "[FloTrace] walkFiber found",
-    topLevelNodes.length,
-    "top-level nodes"
-  );
+  debugLog("[FloTrace] walkFiber found", topLevelNodes.length, "top-level nodes");
   if (topLevelNodes.length === 1) {
     return topLevelNodes[0];
   }
@@ -2567,9 +3107,7 @@ function findFiberRootFromDOM() {
         }
       }
     }
-    console.warn(
-      "[FloTrace] Could not find React fiber root from any DOM element"
-    );
+    console.warn("[FloTrace] Could not find React fiber root from any DOM element");
     return null;
   } catch (error) {
     console.error("[FloTrace] Error finding fiber root from DOM:", error);
@@ -2631,9 +3169,7 @@ function executeSnapshot(root) {
     adaptSnapshotInterval(nodeCount);
     const client2 = getWebSocketClient();
     if (!client2.connected) {
-      console.warn(
-        "[FloTrace] WebSocket not connected, cannot send tree snapshot"
-      );
+      console.warn("[FloTrace] WebSocket not connected, cannot send tree snapshot");
       return;
     }
     const currentFlatTree = flattenTree2(tree);
@@ -2649,6 +3185,7 @@ function executeSnapshot(root) {
         "nextInterval:",
         snapshotIntervalMs + "ms"
       );
+      logTreeSnapshot(tree, `send seq=${snapshotCounter}`);
       client2.sendImmediate({
         type: "runtime:treeSnapshot",
         tree,
@@ -2669,6 +3206,7 @@ function executeSnapshot(root) {
           "updated:",
           diff.updated.length
         );
+        logTreeSummary(tree, `diff seq=${diffSeq}`);
         client2.sendImmediate({
           type: "runtime:treeDiff",
           seq: diffSeq,
@@ -2809,9 +3347,7 @@ function installFiberTreeWalker(options = {}) {
     return () => uninstallFiberTreeWalker();
   }
   if (typeof window === "undefined") {
-    console.warn(
-      "[FloTrace] Not in browser environment, cannot install fiber tree walker"
-    );
+    console.warn("[FloTrace] Not in browser environment, cannot install fiber tree walker");
     return () => {
     };
   }
@@ -2838,10 +3374,7 @@ function installFiberTreeWalker(options = {}) {
         try {
           originalOnCommitFiberRoot(rendererID, root, priority);
         } catch (error) {
-          console.error(
-            "[FloTrace] Error in original onCommitFiberRoot:",
-            error
-          );
+          console.error("[FloTrace] Error in original onCommitFiberRoot:", error);
         }
       }
       if (hookedRendererID === null) {
@@ -2867,9 +3400,7 @@ function installFiberTreeWalker(options = {}) {
       scheduleSnapshot(root);
     };
     activeStrategy = "devtools";
-    console.log(
-      "[FloTrace] Fiber tree walker installed (DevTools hook strategy)"
-    );
+    console.log("[FloTrace] Fiber tree walker installed (DevTools hook strategy)");
     setTimeout(() => {
       try {
         const root = findFiberRootFromDOM();
@@ -2882,9 +3413,7 @@ function installFiberTreeWalker(options = {}) {
     }, 100);
   } else {
     activeStrategy = "dom";
-    console.log(
-      "[FloTrace] Fiber tree walker installed (DOM fallback strategy)"
-    );
+    console.log("[FloTrace] Fiber tree walker installed (DOM fallback strategy)");
     setTimeout(() => {
       try {
         const root = findFiberRootFromDOM();
@@ -3162,12 +3691,18 @@ function installZustandTracker(stores, client2) {
         try {
           scheduleStoreUpdate(storeName, prevState, newState, client2);
         } catch (error) {
-          console.error(`[FloTrace] Error in Zustand subscribe callback for "${storeName}":`, error);
+          console.error(
+            `[FloTrace] Error in Zustand subscribe callback for "${storeName}":`,
+            error
+          );
         }
       });
       activeUnsubscribers.push(unsubscribe);
     } catch (error) {
-      console.error(`[FloTrace] Failed to install tracker for Zustand store "${storeName}":`, error);
+      console.error(
+        `[FloTrace] Failed to install tracker for Zustand store "${storeName}":`,
+        error
+      );
     }
   }
 }
@@ -3210,10 +3745,13 @@ function scheduleStoreUpdate(storeName, prevState, newState, client2) {
   if (changedKeys.length === 0) return;
   const existing = debounceTimers.get(storeName);
   if (existing) clearTimeout(existing);
-  debounceTimers.set(storeName, setTimeout(() => {
-    debounceTimers.delete(storeName);
-    sendStoreUpdate(storeName, newState, changedKeys, client2);
-  }, DEBOUNCE_MS));
+  debounceTimers.set(
+    storeName,
+    setTimeout(() => {
+      debounceTimers.delete(storeName);
+      sendStoreUpdate(storeName, newState, changedKeys, client2);
+    }, DEBOUNCE_MS)
+  );
 }
 function sendStoreUpdate(storeName, state, changedKeys, client2) {
   try {
@@ -3786,7 +4324,14 @@ function findMatchingPathInObject(target, targetFp, container, currentPath, dept
       const child = container[i];
       const directMatch = valuesMatch(target, targetFp, child, cache);
       if (directMatch) return { path: [...currentPath, String(i)], confidence: directMatch };
-      const nested = findMatchingPathInObject(target, targetFp, child, [...currentPath, String(i)], depth + 1, cache);
+      const nested = findMatchingPathInObject(
+        target,
+        targetFp,
+        child,
+        [...currentPath, String(i)],
+        depth + 1,
+        cache
+      );
       if (nested) return nested;
     }
   } else {
@@ -3794,7 +4339,14 @@ function findMatchingPathInObject(target, targetFp, container, currentPath, dept
       const child = container[key];
       const directMatch = valuesMatch(target, targetFp, child, cache);
       if (directMatch) return { path: [...currentPath, key], confidence: directMatch };
-      const nested = findMatchingPathInObject(target, targetFp, child, [...currentPath, key], depth + 1, cache);
+      const nested = findMatchingPathInObject(
+        target,
+        targetFp,
+        child,
+        [...currentPath, key],
+        depth + 1,
+        cache
+      );
       if (nested) return nested;
     }
   }
@@ -3899,7 +4451,12 @@ function resolveValueTrace(input) {
       nodeId: input.nodeId,
       componentName: rootComponentName,
       propPath: input.propPath,
-      confidence: "exact"
+      confidence: "exact",
+      // P6: `fiber.memoizedProps[FLOTRACE_SOURCE]` is the JSX call site where
+      // this fiber was created — i.e., the `<Consumer .../>` JSX in the
+      // PARENT's source file. That's exactly the "drilled from `Parent.tsx:42`"
+      // attribution the user wants on the leaf prop step.
+      callSiteOfParentJsx: readJsxSourceFromFiber(fiber)
     });
   } else if (input.hookPath) {
     steps.push({
@@ -3939,7 +4496,12 @@ function resolveValueTrace(input) {
                 nodeId: ancestorNodeId,
                 componentName: ancestorName,
                 propPath: trailingSubPath.length > 0 ? [...matchPath, ...trailingSubPath] : matchPath,
-                confidence: matchConfidence
+                confidence: matchConfidence,
+                // P6: attribute the parent JSX call site that drilled this
+                // prop. When the user opted into the JSX runtime AND this
+                // ancestor's fiber went through jsxDEV, the consumer sees
+                // "drilled from `Parent.tsx:42:8`" with a click-to-IDE link.
+                callSiteOfParentJsx: readJsxSourceFromFiber(current)
               });
             }
           } else {
@@ -3988,7 +4550,11 @@ function resolveValueTrace(input) {
   const contextMatch = findContextMatch(fiber, rootValue, rootFp, fiberToNodeId, fpCache);
   if (contextMatch) {
     steps.push(contextMatch.step);
-    const providerStoreMatch = findStoreMatch(contextMatch.providerValue, cachedFp(contextMatch.providerValue, fpCache), fpCache);
+    const providerStoreMatch = findStoreMatch(
+      contextMatch.providerValue,
+      cachedFp(contextMatch.providerValue, fpCache),
+      fpCache
+    );
     if (providerStoreMatch) {
       steps.push({
         kind: "store",
@@ -4182,13 +4748,22 @@ function detectWebFramework() {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_CONFIG,
+  FLOTRACE_SOURCE,
   FloTraceWebSocketClient,
+  JSX_RUNTIME_ACTIVE_KEY,
   buildAncestorChain,
+  clearCallSiteRenders,
   clearFetchOriginTags,
+  computeCallSiteId,
+  computeCallSiteMetricsPayload,
+  describeFiberType,
+  detectInlineLiterals,
   detectServerComponent,
   detectWebFramework,
   disposeWebSocketClient,
   findFetchOrigin,
+  getCallSiteRenderRate,
+  getCallSiteRenders,
   getChangedKeys,
   getComponentNameFromFiber,
   getCurrentRenderingFiber,
@@ -4211,9 +4786,15 @@ function detectWebFramework() {
   installTanStackQueryTracker,
   installTimelineTracker,
   installZustandTracker,
+  isJsxRuntimeActive,
   isReduxStore,
   isTanStackQueryClient,
+  logTreeSnapshot,
+  logTreeSummary,
+  markJsxRuntimeActive,
   maybeEmitNextjsContext,
+  normalizeJsxSourcePath,
+  recordCallSiteRender,
   recordTimelineEvent,
   requestFullSnapshot,
   requestTreeSnapshot,
@@ -4221,6 +4802,8 @@ function detectWebFramework() {
   resolveValueTrace,
   serializeProps,
   serializeValue,
+  setDuplicateKeyEmitter,
+  setFiberDebug,
   tagFetchData,
   uninstallFiberTreeWalker,
   uninstallReduxTracker,