@treelocator/runtime 0.3.0 → 0.3.2

package/.turbo/turbo-build.log

@@ -0,0 +1,32 @@
+
+> @treelocator/runtime@0.3.2 build /Users/wende/projects/treelocatorjs/packages/runtime
+> concurrently pnpm:build:*
+
+[wrapImage] 
+[wrapImage] > @treelocator/runtime@0.3.2 build:wrapImage /Users/wende/projects/treelocatorjs/packages/runtime
+[wrapImage] > node ./scripts/wrapImage.js
+[wrapImage] 
+[ts] 
+[ts] > @treelocator/runtime@0.3.2 build:ts /Users/wende/projects/treelocatorjs/packages/runtime
+[ts] > tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist
+[ts] 
+[tailwind] 
+[tailwind] > @treelocator/runtime@0.3.2 build:tailwind /Users/wende/projects/treelocatorjs/packages/runtime
+[tailwind] > tailwindcss -i ./src/main.css -o ./dist/output.css
+[tailwind] 
+[babel] 
+[babel] > @treelocator/runtime@0.3.2 build:babel /Users/wende/projects/treelocatorjs/packages/runtime
+[babel] > babel src --out-dir dist --extensions .js,.jsx,.ts,.tsx
+[babel] 
+[wrapImage] Tree icon file generated
+[wrapImage] pnpm run build:wrapImage exited with code 0
+[babel] [baseline-browser-mapping] The data in this module is over two months old.  To ensure accurate Baseline data, please update: `npm i baseline-browser-mapping@latest -D`
+[tailwind] [baseline-browser-mapping] The data in this module is over two months old.  To ensure accurate Baseline data, please update: `npm i baseline-browser-mapping@latest -D`
+[tailwind] 
+[tailwind] Rebuilding...
+[tailwind] 
+[tailwind] Done in 179ms.
+[tailwind] pnpm run build:tailwind exited with code 0
+[babel] Successfully compiled 82 files with Babel (538ms).
+[babel] pnpm run build:babel exited with code 0
+[ts] pnpm run build:ts exited with code 0

package/.turbo/turbo-dev.log

@@ -0,0 +1,32 @@
+
+> @treelocator/runtime@0.1.8 dev /Users/wende/projects/locatorjs/packages/runtime
+> concurrently pnpm:dev:*
+
+[babel] 
+[babel] > @treelocator/runtime@0.1.8 dev:babel /Users/wende/projects/locatorjs/packages/runtime
+[babel] > babel src --watch --out-dir dist --extensions .js,.jsx,.ts,.tsx
+[babel] 
+[wrapImage] 
+[wrapImage] > @treelocator/runtime@0.1.8 dev:wrapImage /Users/wende/projects/locatorjs/packages/runtime
+[wrapImage] > WATCH=true node ./scripts/wrapImage.js
+[wrapImage] 
+[ts] 
+[ts] > @treelocator/runtime@0.1.8 dev:ts /Users/wende/projects/locatorjs/packages/runtime
+[ts] > tsc --watch --declaration --emitDeclarationOnly --noEmit false --outDir dist --preserveWatchOutput
+[ts] 
+[wrapCSS] 
+[wrapCSS] > @treelocator/runtime@0.1.8 dev:wrapCSS /Users/wende/projects/locatorjs/packages/runtime
+[wrapCSS] > WATCH=true node ./scripts/wrapCSS.js
+[wrapCSS] 
+[tailwind] 
+[tailwind] > @treelocator/runtime@0.1.8 dev:tailwind /Users/wende/projects/locatorjs/packages/runtime
+[tailwind] > tailwindcss -i ./src/main.css -o ./dist/output.css --watch
+[tailwind] 
+[tailwind]  ELIFECYCLE  Command failed.
+[ts]  ELIFECYCLE  Command failed.
+[wrapImage]  ELIFECYCLE  Command failed.
+[wrapCSS]  ELIFECYCLE  Command failed.
+[babel]  ELIFECYCLE  Command failed.
+[babel] pnpm run dev:babel exited with code SIGINT
+[wrapCSS] pnpm run dev:wrapCSS exited with code SIGINT
+[wrapImage] pnpm run dev:wrapImage exited with code SIGINT

package/.turbo/turbo-test.log

@@ -0,0 +1,14 @@
+
+> @treelocator/runtime@0.3.2 test /Users/wende/projects/treelocatorjs/packages/runtime
+> vitest run
+
+
+ RUN  v2.1.9 /Users/wende/projects/treelocatorjs/packages/runtime
+
+ ✓ src/functions/transformPath.test.ts (3 tests) 2ms
+ ✓ src/functions/getUsableFileName.test.tsx (4 tests) 2ms
+ ✓ src/functions/evalTemplate.test.ts (1 test) 3ms
+ ✓ src/functions/cropPath.test.ts (2 tests) 2ms
+ ✓ src/functions/mergeRects.test.ts (1 test) 1ms
+ ✓ src/functions/formatAncestryChain.test.ts (14 tests) 3ms
+ ELIFECYCLE  Test failed. See above for more details.

package/.turbo/turbo-ts.log

@@ -0,0 +1,4 @@
+
+> @locator/runtime@0.5.1 ts /Users/wende/projects/locatorjs/packages/runtime
+> tsc --noEmit
+

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Krzysztof Wende
+Copyright (c) 2023 Michael Musil (original LocatorJS)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/adapters/react/getAllParentsElementsAndRootComponent.d.ts

@@ -5,4 +5,4 @@ export declare function getAllParentsElementsAndRootComponent(fiber: Fiber): {
     component: Fiber;
     componentBox: SimpleDOMRect;
     parentElements: ElementInfo[];
-};
+} | null;

package/dist/adapters/react/getAllParentsElementsAndRootComponent.js

@@ -5,8 +5,9 @@ import { isStyledElement } from "./isStyled";
 export function getAllParentsElementsAndRootComponent(fiber) {
   const parentElements = [];
   const deepestElement = fiber.stateNode;
-  if (!deepestElement || !(deepestElement instanceof HTMLElement)) {
-    throw new Error("This functions works only for Fibres with HTMLElement stateNode");
+  if (!deepestElement || !(deepestElement instanceof Element)) {
+    console.warn("[TreeLocator] Skipping fiber with non-Element stateNode:", fiber.type, fiber.stateNode);
+    return null;
   }
   let componentBox = deepestElement.getBoundingClientRect();
 
@@ -15,7 +16,7 @@ export function getAllParentsElementsAndRootComponent(fiber) {
   while (currentFiber._debugOwner || currentFiber.return) {
     currentFiber = currentFiber._debugOwner || currentFiber.return;
     const currentElement = currentFiber.stateNode;
-    if (!currentElement || !(currentElement instanceof HTMLElement)) {
+    if (!currentElement || !(currentElement instanceof Element)) {
       return {
         component: currentFiber,
         parentElements,
@@ -30,5 +31,6 @@ export function getAllParentsElementsAndRootComponent(fiber) {
       link: null
     });
   }
-  throw new Error("Could not find root component");
+  console.warn("[TreeLocator] Could not find root component for fiber:", fiber.type);
+  return null;
 }

package/dist/adapters/react/getAllWrappingParents.js

@@ -4,7 +4,7 @@ export function getAllWrappingParents(fiber) {
   let currentFiber = fiber;
   while (currentFiber.return) {
     currentFiber = currentFiber.return;
-    if (currentFiber.stateNode && currentFiber.stateNode instanceof HTMLElement) {
+    if (currentFiber.stateNode && currentFiber.stateNode instanceof Element) {
       return parents;
     }
 

package/dist/adapters/react/reactAdapter.js

@@ -13,11 +13,15 @@ export function getElementInfo(found) {
   const labels = [];
   const fiber = findFiberByHtmlElement(found, false);
   if (fiber) {
+    const result = getAllParentsElementsAndRootComponent(fiber);
+    if (!result) {
+      return null;
+    }
     const {
       component,
       componentBox,
       parentElements
-    } = getAllParentsElementsAndRootComponent(fiber);
+    } = result;
     const allPotentialComponentFibers = getAllWrappingParents(component);
 
     // This handles a common case when the component root is basically the comopnent itself, so I want to go to usage of the component

package/dist/functions/formatAncestryChain.js

@@ -105,6 +105,22 @@ export function collectAncestry(node) {
   }
   return items;
 }
+function getInnermostNamedComponent(item) {
+  if (!item) return undefined;
+  if (item.ownerComponents && item.ownerComponents.length > 0) {
+    // Find the innermost non-Anonymous component
+    for (let i = item.ownerComponents.length - 1; i >= 0; i--) {
+      if (item.ownerComponents[i].name !== "Anonymous") {
+        return item.ownerComponents[i].name;
+      }
+    }
+  }
+  // Fall back to componentName if it's not Anonymous
+  if (item.componentName && item.componentName !== "Anonymous") {
+    return item.componentName;
+  }
+  return undefined;
+}
 export function formatAncestryChain(items) {
   if (items.length === 0) {
     return "";
@@ -118,11 +134,12 @@ export function formatAncestryChain(items) {
     const prefix = index === 0 ? "" : "└─ ";
 
     // Get the previous item's component to detect component boundaries
+    // Ignore "Anonymous" when resolving component names — these are framework internals
     const prevItem = index > 0 ? reversed[index - 1] : null;
-    const prevComponentName = prevItem?.componentName || prevItem?.ownerComponents?.[prevItem.ownerComponents.length - 1]?.name;
+    const prevComponentName = getInnermostNamedComponent(prevItem);
 
-    // Get current item's innermost component
-    const currentComponentName = item.ownerComponents?.[item.ownerComponents.length - 1]?.name || item.componentName;
+    // Get current item's innermost named component
+    const currentComponentName = getInnermostNamedComponent(item);
 
     // Determine the display name for the element
     // Use component name ONLY when crossing a component boundary (root element of a component)
@@ -132,14 +149,17 @@ export function formatAncestryChain(items) {
     const isComponentBoundary = currentComponentName && currentComponentName !== prevComponentName;
     if (isComponentBoundary) {
       if (item.ownerComponents && item.ownerComponents.length > 0) {
-        // Use innermost component as display name, show outer ones in "in X > Y"
-        const innermost = item.ownerComponents[item.ownerComponents.length - 1];
+        // Use innermost named component as display name, show outer ones in "in X > Y"
+        // Filter out "Anonymous" components — these are framework-internal wrappers
+        // (e.g. Next.js App Router) that add noise without useful context
+        const named = item.ownerComponents.filter(c => c.name !== "Anonymous");
+        const innermost = named[named.length - 1];
         if (innermost) {
           displayName = innermost.name;
           // Outer components (excluding innermost)
-          outerComponents = item.ownerComponents.slice(0, -1).map(c => c.name);
+          outerComponents = named.slice(0, -1).map(c => c.name);
         }
-      } else if (item.componentName) {
+      } else if (item.componentName && item.componentName !== "Anonymous") {
         displayName = item.componentName;
       }
     }

package/dist/functions/formatAncestryChain.test.js

@@ -125,4 +125,118 @@ describe("formatAncestryChain", () => {
     // Single component becomes the display name, no "in X" needed
     expect(result).toBe("Button at src/Button.tsx:10");
   });
+  describe("Anonymous component filtering", () => {
+    it("filters Anonymous from outer components in 'in X > Y' display", () => {
+      const items = [{
+        elementName: "div",
+        nthChild: 2,
+        componentName: "Anonymous",
+        filePath: "app/page.tsx",
+        line: 82,
+        ownerComponents: [{
+          name: "Anonymous"
+        }, {
+          name: "Home",
+          filePath: "app/page.tsx",
+          line: 82
+        }]
+      }, {
+        elementName: "div",
+        componentName: "App",
+        filePath: "src/App.tsx",
+        line: 1
+      }];
+      const result = formatAncestryChain(items);
+      // "Anonymous" should be filtered out — just "Home" as display name, no "in Anonymous"
+      expect(result).toBe(`App at src/App.tsx:1
+    └─ Home:nth-child(2) at app/page.tsx:82`);
+    });
+    it("filters Anonymous from component boundary detection", () => {
+      // When prev item's innermost component is Anonymous, it shouldn't count
+      // as a different component from the current item
+      const items = [{
+        elementName: "p",
+        componentName: "Home",
+        filePath: "app/page.tsx",
+        line: 100
+      }, {
+        elementName: "div",
+        componentName: "Anonymous",
+        filePath: "app/page.tsx",
+        line: 82,
+        ownerComponents: [{
+          name: "Anonymous"
+        }, {
+          name: "Home",
+          filePath: "app/page.tsx",
+          line: 82
+        }]
+      }];
+      const result = formatAncestryChain(items);
+      // Both items resolve to "Home" — no boundary crossing, so element name for child
+      expect(result).toBe(`Home at app/page.tsx:82
+    └─ p at app/page.tsx:100`);
+    });
+    it("handles all-Anonymous owner chain gracefully", () => {
+      const items = [{
+        elementName: "div",
+        componentName: "Anonymous",
+        filePath: "app/layout.tsx",
+        line: 10,
+        ownerComponents: [{
+          name: "Anonymous"
+        }, {
+          name: "Anonymous"
+        }]
+      }];
+      const result = formatAncestryChain(items);
+      // All components are Anonymous — falls back to element name
+      expect(result).toBe("div at app/layout.tsx:10");
+    });
+    it("skips Anonymous-only componentName without ownerComponents", () => {
+      const items = [{
+        elementName: "main",
+        componentName: "Anonymous",
+        filePath: "app/page.tsx",
+        line: 50
+      }, {
+        elementName: "div",
+        componentName: "App",
+        filePath: "src/App.tsx",
+        line: 1
+      }];
+      const result = formatAncestryChain(items);
+      // "Anonymous" componentName should not be used as display name
+      expect(result).toBe(`App at src/App.tsx:1
+    └─ main at app/page.tsx:50`);
+    });
+    it("preserves named components when mixed with Anonymous", () => {
+      const items = [{
+        elementName: "div",
+        componentName: "Sidebar",
+        filePath: "src/Sidebar.tsx",
+        line: 20,
+        ownerComponents: [{
+          name: "Sidebar",
+          filePath: "src/Sidebar.tsx",
+          line: 20
+        }, {
+          name: "Anonymous"
+        }, {
+          name: "GlassPanel",
+          filePath: "src/GlassPanel.tsx",
+          line: 5
+        }]
+      }, {
+        elementName: "div",
+        componentName: "App",
+        filePath: "src/App.tsx",
+        line: 1
+      }];
+      const result = formatAncestryChain(items);
+      // Anonymous in the middle is filtered, Sidebar (outer) and GlassPanel (inner) remain
+      expect(result).toBe(`App at src/App.tsx:1
+    └─ GlassPanel in Sidebar at src/Sidebar.tsx:20`);
+    });
+  });
 });

package/dist/functions/getUsableName.js

@@ -32,16 +32,38 @@ export function getUsableName(fiber) {
   if (fiber.elementType.name) {
     return fiber.elementType.name;
   }
-  // Not sure about this
   if (fiber.elementType.displayName) {
     return fiber.elementType.displayName;
   }
-  // Used in rect.memo
+  // Used in React.memo
   if (fiber.elementType.type?.name) {
     return fiber.elementType.type.name;
   }
+  if (fiber.elementType.type?.displayName) {
+    return fiber.elementType.type.displayName;
+  }
+  // React.forwardRef wraps the render function in .render
+  if (fiber.elementType.render?.name) {
+    return fiber.elementType.render.name;
+  }
+  if (fiber.elementType.render?.displayName) {
+    return fiber.elementType.render.displayName;
+  }
+  // React lazy components store resolved module in _payload._result
   if (fiber.elementType._payload?._result?.name) {
     return fiber.elementType._payload._result.name;
   }
+  if (fiber.elementType._payload?._result?.displayName) {
+    return fiber.elementType._payload._result.displayName;
+  }
+  // fiber.type can differ from elementType in some React internals
+  if (fiber.type && typeof fiber.type !== "string" && fiber.type !== fiber.elementType) {
+    if (fiber.type.name) {
+      return fiber.type.name;
+    }
+    if (fiber.type.displayName) {
+      return fiber.type.displayName;
+    }
+  }
   return "Anonymous";
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treelocator/runtime",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "TreeLocatorJS runtime for component ancestry tracking. Alt+click any element to copy its component tree to clipboard. Exposes window.__treelocator__ API for browser automation (Playwright, Puppeteer, Selenium, Cypress).",
   "keywords": [
     "locator",
@@ -73,5 +73,5 @@
     "directory": "packages/runtime"
   },
   "license": "MIT",
-  "gitHead": "afc8a534284e818665bb4d03b7fa940ec5ad5880"
+  "gitHead": "511af51703d71e9a5c4d4990c66140b283f05afe"
 }

package/src/adapters/react/getAllParentsElementsAndRootComponent.ts

@@ -10,13 +10,12 @@ export function getAllParentsElementsAndRootComponent(fiber: Fiber): {
   component: Fiber;
   componentBox: SimpleDOMRect;
   parentElements: ElementInfo[];
-} {
+} | null {
   const parentElements: ElementInfo[] = [];
   const deepestElement = fiber.stateNode;
-  if (!deepestElement || !(deepestElement instanceof HTMLElement)) {
-    throw new Error(
-      "This functions works only for Fibres with HTMLElement stateNode"
-    );
+  if (!deepestElement || !(deepestElement instanceof Element)) {
+    console.warn("[TreeLocator] Skipping fiber with non-Element stateNode:", fiber.type, fiber.stateNode);
+    return null;
   }
   let componentBox: SimpleDOMRect = deepestElement.getBoundingClientRect();
 
@@ -26,7 +25,7 @@ export function getAllParentsElementsAndRootComponent(fiber: Fiber): {
   while (currentFiber._debugOwner || currentFiber.return) {
     currentFiber = currentFiber._debugOwner || currentFiber.return!;
     const currentElement = currentFiber.stateNode;
-    if (!currentElement || !(currentElement instanceof HTMLElement)) {
+    if (!currentElement || !(currentElement instanceof Element)) {
       return {
         component: currentFiber,
         parentElements,
@@ -48,5 +47,6 @@ export function getAllParentsElementsAndRootComponent(fiber: Fiber): {
       link: null,
     });
   }
-  throw new Error("Could not find root component");
+  console.warn("[TreeLocator] Could not find root component for fiber:", fiber.type);
+  return null;
 }

package/src/adapters/react/getAllWrappingParents.ts

@@ -9,7 +9,7 @@ export function getAllWrappingParents(fiber: Fiber): Fiber[] {
     currentFiber = currentFiber.return;
     if (
       currentFiber.stateNode &&
-      currentFiber.stateNode instanceof HTMLElement
+      currentFiber.stateNode instanceof Element
     ) {
       return parents;
     }

package/src/adapters/react/reactAdapter.ts

@@ -25,8 +25,11 @@ export function getElementInfo(found: HTMLElement): FullElementInfo | null {
 
   const fiber = findFiberByHtmlElement(found, false);
   if (fiber) {
-    const { component, componentBox, parentElements } =
-      getAllParentsElementsAndRootComponent(fiber);
+    const result = getAllParentsElementsAndRootComponent(fiber);
+    if (!result) {
+      return null;
+    }
+    const { component, componentBox, parentElements } = result;
 
     const allPotentialComponentFibers = getAllWrappingParents(component);
 

package/src/functions/formatAncestryChain.test.ts

@@ -143,4 +143,127 @@ describe("formatAncestryChain", () => {
     // Single component becomes the display name, no "in X" needed
     expect(result).toBe("Button at src/Button.tsx:10");
   });
+
+  describe("Anonymous component filtering", () => {
+    it("filters Anonymous from outer components in 'in X > Y' display", () => {
+      const items: AncestryItem[] = [
+        {
+          elementName: "div",
+          nthChild: 2,
+          componentName: "Anonymous",
+          filePath: "app/page.tsx",
+          line: 82,
+          ownerComponents: [
+            { name: "Anonymous" },
+            { name: "Home", filePath: "app/page.tsx", line: 82 },
+          ],
+        },
+        { elementName: "div", componentName: "App", filePath: "src/App.tsx", line: 1 },
+      ];
+
+      const result = formatAncestryChain(items);
+      // "Anonymous" should be filtered out — just "Home" as display name, no "in Anonymous"
+      expect(result).toBe(
+        `App at src/App.tsx:1
+    └─ Home:nth-child(2) at app/page.tsx:82`
+      );
+    });
+
+    it("filters Anonymous from component boundary detection", () => {
+      // When prev item's innermost component is Anonymous, it shouldn't count
+      // as a different component from the current item
+      const items: AncestryItem[] = [
+        {
+          elementName: "p",
+          componentName: "Home",
+          filePath: "app/page.tsx",
+          line: 100,
+        },
+        {
+          elementName: "div",
+          componentName: "Anonymous",
+          filePath: "app/page.tsx",
+          line: 82,
+          ownerComponents: [
+            { name: "Anonymous" },
+            { name: "Home", filePath: "app/page.tsx", line: 82 },
+          ],
+        },
+      ];
+
+      const result = formatAncestryChain(items);
+      // Both items resolve to "Home" — no boundary crossing, so element name for child
+      expect(result).toBe(
+        `Home at app/page.tsx:82
+    └─ p at app/page.tsx:100`
+      );
+    });
+
+    it("handles all-Anonymous owner chain gracefully", () => {
+      const items: AncestryItem[] = [
+        {
+          elementName: "div",
+          componentName: "Anonymous",
+          filePath: "app/layout.tsx",
+          line: 10,
+          ownerComponents: [
+            { name: "Anonymous" },
+            { name: "Anonymous" },
+          ],
+        },
+      ];
+
+      const result = formatAncestryChain(items);
+      // All components are Anonymous — falls back to element name
+      expect(result).toBe("div at app/layout.tsx:10");
+    });
+
+    it("skips Anonymous-only componentName without ownerComponents", () => {
+      const items: AncestryItem[] = [
+        {
+          elementName: "main",
+          componentName: "Anonymous",
+          filePath: "app/page.tsx",
+          line: 50,
+        },
+        {
+          elementName: "div",
+          componentName: "App",
+          filePath: "src/App.tsx",
+          line: 1,
+        },
+      ];
+
+      const result = formatAncestryChain(items);
+      // "Anonymous" componentName should not be used as display name
+      expect(result).toBe(
+        `App at src/App.tsx:1
+    └─ main at app/page.tsx:50`
+      );
+    });
+
+    it("preserves named components when mixed with Anonymous", () => {
+      const items: AncestryItem[] = [
+        {
+          elementName: "div",
+          componentName: "Sidebar",
+          filePath: "src/Sidebar.tsx",
+          line: 20,
+          ownerComponents: [
+            { name: "Sidebar", filePath: "src/Sidebar.tsx", line: 20 },
+            { name: "Anonymous" },
+            { name: "GlassPanel", filePath: "src/GlassPanel.tsx", line: 5 },
+          ],
+        },
+        { elementName: "div", componentName: "App", filePath: "src/App.tsx", line: 1 },
+      ];
+
+      const result = formatAncestryChain(items);
+      // Anonymous in the middle is filtered, Sidebar (outer) and GlassPanel (inner) remain
+      expect(result).toBe(
+        `App at src/App.tsx:1
+    └─ GlassPanel in Sidebar at src/Sidebar.tsx:20`
+      );
+    });
+  });
 });

package/src/functions/formatAncestryChain.ts

@@ -147,6 +147,23 @@ export function collectAncestry(node: TreeNode): AncestryItem[] {
   return items;
 }
 
+function getInnermostNamedComponent(item: AncestryItem | null | undefined): string | undefined {
+  if (!item) return undefined;
+  if (item.ownerComponents && item.ownerComponents.length > 0) {
+    // Find the innermost non-Anonymous component
+    for (let i = item.ownerComponents.length - 1; i >= 0; i--) {
+      if (item.ownerComponents[i]!.name !== "Anonymous") {
+        return item.ownerComponents[i]!.name;
+      }
+    }
+  }
+  // Fall back to componentName if it's not Anonymous
+  if (item.componentName && item.componentName !== "Anonymous") {
+    return item.componentName;
+  }
+  return undefined;
+}
+
 export function formatAncestryChain(items: AncestryItem[]): string {
   if (items.length === 0) {
     return "";
@@ -162,11 +179,12 @@ export function formatAncestryChain(items: AncestryItem[]): string {
     const prefix = index === 0 ? "" : "└─ ";
 
     // Get the previous item's component to detect component boundaries
+    // Ignore "Anonymous" when resolving component names — these are framework internals
     const prevItem = index > 0 ? reversed[index - 1] : null;
-    const prevComponentName = prevItem?.componentName || prevItem?.ownerComponents?.[prevItem.ownerComponents.length - 1]?.name;
+    const prevComponentName = getInnermostNamedComponent(prevItem);
 
-    // Get current item's innermost component
-    const currentComponentName = item.ownerComponents?.[item.ownerComponents.length - 1]?.name || item.componentName;
+    // Get current item's innermost named component
+    const currentComponentName = getInnermostNamedComponent(item);
 
     // Determine the display name for the element
     // Use component name ONLY when crossing a component boundary (root element of a component)
@@ -177,14 +195,17 @@ export function formatAncestryChain(items: AncestryItem[]): string {
 
     if (isComponentBoundary) {
       if (item.ownerComponents && item.ownerComponents.length > 0) {
-        // Use innermost component as display name, show outer ones in "in X > Y"
-        const innermost = item.ownerComponents[item.ownerComponents.length - 1];
+        // Use innermost named component as display name, show outer ones in "in X > Y"
+        // Filter out "Anonymous" components — these are framework-internal wrappers
+        // (e.g. Next.js App Router) that add noise without useful context
+        const named = item.ownerComponents.filter((c) => c.name !== "Anonymous");
+        const innermost = named[named.length - 1];
         if (innermost) {
           displayName = innermost.name;
           // Outer components (excluding innermost)
-          outerComponents = item.ownerComponents.slice(0, -1).map((c) => c.name);
+          outerComponents = named.slice(0, -1).map((c) => c.name);
         }
-      } else if (item.componentName) {
+      } else if (item.componentName && item.componentName !== "Anonymous") {
         displayName = item.componentName;
       }
     }

package/src/functions/getUsableName.ts

@@ -36,17 +36,39 @@ export function getUsableName(fiber: Fiber | null | undefined): string {
   if (fiber.elementType.name) {
     return fiber.elementType.name;
   }
-  // Not sure about this
   if (fiber.elementType.displayName) {
     return fiber.elementType.displayName;
   }
-  // Used in rect.memo
+  // Used in React.memo
   if (fiber.elementType.type?.name) {
     return fiber.elementType.type.name;
   }
+  if (fiber.elementType.type?.displayName) {
+    return fiber.elementType.type.displayName;
+  }
+  // React.forwardRef wraps the render function in .render
+  if (fiber.elementType.render?.name) {
+    return fiber.elementType.render.name;
+  }
+  if (fiber.elementType.render?.displayName) {
+    return fiber.elementType.render.displayName;
+  }
+  // React lazy components store resolved module in _payload._result
   if (fiber.elementType._payload?._result?.name) {
     return fiber.elementType._payload._result.name;
   }
+  if (fiber.elementType._payload?._result?.displayName) {
+    return fiber.elementType._payload._result.displayName;
+  }
+  // fiber.type can differ from elementType in some React internals
+  if (fiber.type && typeof fiber.type !== "string" && fiber.type !== fiber.elementType) {
+    if (fiber.type.name) {
+      return fiber.type.name;
+    }
+    if (fiber.type.displayName) {
+      return fiber.type.displayName;
+    }
+  }
 
   return "Anonymous";
 }