From 60287ff252c50d59eb70b03da24f00433c509d86 Mon Sep 17 00:00:00 2001
From: Pavel Ivanov <pafelka@gmail.com>
Date: Sun, 2 Feb 2025 03:46:59 +0200
Subject: [PATCH] improve component tree

---
 packages/scan/src/core/instrumentation.ts     |   1 +
 packages/scan/src/new-outlines/index.ts       |   4 +-
 .../src/web/components/inspector/index.tsx    |   2 +
 .../components/inspector/overlay/index.tsx    |   1 +
 .../src/web/components/inspector/states.ts    | 121 ++-
 .../src/web/components/inspector/utils.ts     |  59 +-
 .../widget/components-tree/breadcrumb.tsx     |   2 +-
 .../widget/components-tree/index.tsx          | 776 ++++++++++--------
 .../widget/components-tree/state.ts           |  11 +-
 .../src/web/components/widget/fps-meter.tsx   |   2 +-
 .../scan/src/web/components/widget/header.tsx |  38 +-
 .../web/components/widget/resize-handle.tsx   |  20 +-
 .../web/components/widget/toolbar/arrows.tsx  | 328 --------
 packages/scan/src/web/utils/helpers.ts        |  81 +-
 packages/scan/src/web/utils/pin.ts            |  57 +-
 15 files changed, 630 insertions(+), 873 deletions(-)
 delete mode 100644 packages/scan/src/web/components/widget/toolbar/arrows.tsx

diff --git a/packages/scan/src/core/instrumentation.ts b/packages/scan/src/core/instrumentation.ts
index fe302ec2..8399d166 100644
--- a/packages/scan/src/core/instrumentation.ts
+++ b/packages/scan/src/core/instrumentation.ts
@@ -521,6 +521,7 @@ export const createInstrumentation = (
                 ),
               );
             }
+
             const { selfTime } = getTimings(fiber);
 
             const fps = getFPS();
diff --git a/packages/scan/src/new-outlines/index.ts b/packages/scan/src/new-outlines/index.ts
index 966e4e9e..6715f117 100644
--- a/packages/scan/src/new-outlines/index.ts
+++ b/packages/scan/src/new-outlines/index.ts
@@ -472,9 +472,7 @@ export const initReactScanInstrumentation = () => {
       }
 
       if (Store.inspectState.value.kind === 'focused') {
-        if (isCompositeFiber(fiber)) {
-          inspectorUpdateSignal.value = Date.now();
-        }
+        inspectorUpdateSignal.value = Date.now();
       }
 
       ReactScanInternals.options.value.onRender?.(fiber, renders);
diff --git a/packages/scan/src/web/components/inspector/index.tsx b/packages/scan/src/web/components/inspector/index.tsx
index 9de99a06..909b64b4 100644
--- a/packages/scan/src/web/components/inspector/index.tsx
+++ b/packages/scan/src/web/components/inspector/index.tsx
@@ -111,6 +111,7 @@ export const Inspector = constant(() => {
 
       const { parentCompositeFiber } = getCompositeFiberFromElement(
         state.focusedDomElement,
+        state.fiber
       );
 
 
@@ -135,6 +136,7 @@ export const Inspector = constant(() => {
 
       const { parentCompositeFiber } = getCompositeFiberFromElement(
         inspectState.focusedDomElement,
+        inspectState.fiber
       );
 
       if (!parentCompositeFiber) {
diff --git a/packages/scan/src/web/components/inspector/overlay/index.tsx b/packages/scan/src/web/components/inspector/overlay/index.tsx
index 9bb164b7..eab7b06d 100644
--- a/packages/scan/src/web/components/inspector/overlay/index.tsx
+++ b/packages/scan/src/web/components/inspector/overlay/index.tsx
@@ -11,6 +11,7 @@ import {
 import { signalIsSettingsOpen } from '~web/state';
 import { cn, throttle } from '~web/utils/helpers';
 import { lerp } from '~web/utils/lerp';
+import { getFiberPath } from '~web/utils/pin';
 import { timelineState } from '../states';
 
 type DrawKind = 'locked' | 'inspecting';
diff --git a/packages/scan/src/web/components/inspector/states.ts b/packages/scan/src/web/components/inspector/states.ts
index 1ad42945..ffb2fb91 100644
--- a/packages/scan/src/web/components/inspector/states.ts
+++ b/packages/scan/src/web/components/inspector/states.ts
@@ -23,33 +23,39 @@ export interface TimelineUpdate {
 }
 
 export interface TimelineState {
-  updates: TimelineUpdate[];
-  currentIndex: number;
-  playbackSpeed: 1 | 2 | 4;
+  updates: Array<TimelineUpdate>;
+  currentFiber: Fiber | null;
   totalUpdates: number;
-  isVisible: boolean;
   windowOffset: number;
+  currentIndex: number;
   isViewingHistory: boolean;
   latestFiber: Fiber | null;
+  isVisible: boolean;
+  playbackSpeed: 1 | 2 | 4;
 }
 
 export const TIMELINE_MAX_UPDATES = 1000;
 
-const timelineStateDefault: TimelineState = {
+export const timelineStateDefault: TimelineState = {
   updates: [],
-  currentIndex: 0,
-  playbackSpeed: 1,
+  currentFiber: null,
   totalUpdates: 0,
-  isVisible: false,
   windowOffset: 0,
+  currentIndex: 0,
   isViewingHistory: false,
   latestFiber: null,
+  isVisible: false,
+  playbackSpeed: 1,
 };
 
 export const timelineState = signal<TimelineState>(timelineStateDefault);
 
 export const inspectorUpdateSignal = signal<number>(0);
 
+// Add batching storage
+let pendingUpdates: Array<{ update: TimelineUpdate; fiber: Fiber | null }> = [];
+let batchTimeout: ReturnType<typeof setTimeout> | null = null;
+
 export const timelineActions = {
   showTimeline: () => {
     timelineState.value = {
@@ -82,49 +88,76 @@ export const timelineActions = {
   },
 
   addUpdate: (update: TimelineUpdate, latestFiber: Fiber | null) => {
-    const { updates, totalUpdates, currentIndex, isViewingHistory } =
-      timelineState.value;
-
-    const newUpdates = [...updates];
-    const newTotalUpdates = totalUpdates + 1;
-
-    if (newUpdates.length >= TIMELINE_MAX_UPDATES) {
-      newUpdates.shift();
-    }
-
-    newUpdates.push(update);
-
-    const newWindowOffset = Math.max(0, newTotalUpdates - TIMELINE_MAX_UPDATES);
+    // Collect the update
+    pendingUpdates.push({ update, fiber: latestFiber });
+
+    if (!batchTimeout) {
+      // If no batch is scheduled, schedule one
+      batchTimeout = setTimeout(() => {
+        // Process all collected updates
+        const batchedUpdates = pendingUpdates;
+        pendingUpdates = [];
+        batchTimeout = null;
+
+        // Apply all updates in the batch
+        const { updates, totalUpdates, currentIndex, isViewingHistory } =
+          timelineState.value;
+        const newUpdates = [...updates];
+        let newTotalUpdates = totalUpdates;
+
+        // Process each update in the batch
+        for (const { update } of batchedUpdates) {
+          if (newUpdates.length >= TIMELINE_MAX_UPDATES) {
+            newUpdates.shift();
+          }
+          newUpdates.push(update);
+          newTotalUpdates++;
+        }
 
-    let newCurrentIndex: number;
-    if (isViewingHistory) {
-      if (currentIndex === totalUpdates - 1) {
-        newCurrentIndex = newUpdates.length - 1;
-      } else if (currentIndex === 0) {
-        newCurrentIndex = 0;
-      } else {
-        if (newWindowOffset === 0) {
-          newCurrentIndex = currentIndex;
+        const newWindowOffset = Math.max(
+          0,
+          newTotalUpdates - TIMELINE_MAX_UPDATES,
+        );
+
+        let newCurrentIndex: number;
+        if (isViewingHistory) {
+          if (currentIndex === totalUpdates - 1) {
+            newCurrentIndex = newUpdates.length - 1;
+          } else if (currentIndex === 0) {
+            newCurrentIndex = 0;
+          } else {
+            if (newWindowOffset === 0) {
+              newCurrentIndex = currentIndex;
+            } else {
+              newCurrentIndex = currentIndex - 1;
+            }
+          }
         } else {
-          newCurrentIndex = currentIndex - 1;
+          newCurrentIndex = newUpdates.length - 1;
         }
-      }
-    } else {
-      newCurrentIndex = newUpdates.length - 1;
-    }
 
-    timelineState.value = {
-      ...timelineState.value,
-      latestFiber,
-      updates: newUpdates,
-      totalUpdates: newTotalUpdates,
-      windowOffset: newWindowOffset,
-      currentIndex: newCurrentIndex,
-      isViewingHistory,
-    };
+        // Get the latest fiber from the last update in batch
+        const lastUpdate = batchedUpdates[batchedUpdates.length - 1];
+
+        timelineState.value = {
+          ...timelineState.value,
+          latestFiber: lastUpdate.fiber,
+          updates: newUpdates,
+          totalUpdates: newTotalUpdates,
+          windowOffset: newWindowOffset,
+          currentIndex: newCurrentIndex,
+          isViewingHistory,
+        };
+      }, 100);
+    }
   },
 
   reset: () => {
+    if (batchTimeout) {
+      clearTimeout(batchTimeout);
+      batchTimeout = null;
+    }
+    pendingUpdates = [];
     timelineState.value = timelineStateDefault;
   },
 };
diff --git a/packages/scan/src/web/components/inspector/utils.ts b/packages/scan/src/web/components/inspector/utils.ts
index d68f5f2e..5faf9475 100644
--- a/packages/scan/src/web/components/inspector/utils.ts
+++ b/packages/scan/src/web/components/inspector/utils.ts
@@ -130,21 +130,22 @@ export const getNearestFiberFromElement = (
   }
 };
 
-export const getParentCompositeFiber = (fiber: Fiber) => {
-  let curr: Fiber | null = fiber;
-  let prevHost = null;
+export const getParentCompositeFiber = (
+  fiber: Fiber,
+): readonly [Fiber, Fiber | null] | null => {
+  let current: Fiber | null = fiber;
+  let prevHost: Fiber | null = null;
 
-  while (curr) {
-    if (isCompositeFiber(curr)) {
-      return [curr, prevHost] as const;
-    }
-    if (isHostFiber(curr)) {
-      prevHost = curr;
-    }
-    curr = curr.return;
+  while (current) {
+    if (isCompositeFiber(current)) return [current, prevHost] as const;
+    if (isHostFiber(current) && !prevHost) prevHost = current;
+    current = current.return;
   }
+
+  return null;
 };
 
+
 const isFiberInTree = (fiber: Fiber, root: Fiber): boolean => {
   {
     // const root= fiberRootCache.get(fiber) || (fiber.alternate && fiberRootCache.get(fiber.alternate) )
@@ -221,28 +222,28 @@ export const getCompositeComponentFromElement = (element: Element) => {
   };
 };
 
-export const getCompositeFiberFromElement = (element: Element) => {
-  const associatedFiber = getNearestFiberFromElement(element);
+export const getCompositeFiberFromElement = (
+  element: Element,
+  knownFiber?: Fiber,
+) => {
+  if (!element.isConnected) return {};
 
-  if (!associatedFiber) return {};
-  const currentAssociatedFiber = isCurrentTree(associatedFiber)
-    ? associatedFiber
-    : (associatedFiber.alternate ?? associatedFiber);
-  const stateNode = getFirstStateNode(currentAssociatedFiber);
-  if (!stateNode) return {};
+  let fiber = knownFiber ?? getNearestFiberFromElement(element);
+  if (!fiber) return {};
 
-  const anotherRes = getParentCompositeFiber(currentAssociatedFiber);
-  if (!anotherRes) {
-    return {};
-  }
-  let [parentCompositeFiber] = anotherRes;
-  parentCompositeFiber =
-    (isCurrentTree(parentCompositeFiber)
-      ? parentCompositeFiber
-      : parentCompositeFiber.alternate) ?? parentCompositeFiber;
+  // Get the current associated fiber
+  fiber = isCurrentTree(fiber) ? fiber : (fiber.alternate ?? fiber);
+
+  if (!getFirstStateNode(fiber)) return {};
+
+  // Fetch the parent composite fiber efficiently
+  const parentCompositeFiber = getParentCompositeFiber(fiber)?.[0];
+  if (!parentCompositeFiber) return {};
 
   return {
-    parentCompositeFiber,
+    parentCompositeFiber: isCurrentTree(parentCompositeFiber)
+      ? parentCompositeFiber
+      : (parentCompositeFiber.alternate ?? parentCompositeFiber),
   };
 };
 
diff --git a/packages/scan/src/web/components/widget/components-tree/breadcrumb.tsx b/packages/scan/src/web/components/widget/components-tree/breadcrumb.tsx
index 74267904..fe54acda 100644
--- a/packages/scan/src/web/components/widget/components-tree/breadcrumb.tsx
+++ b/packages/scan/src/web/components/widget/components-tree/breadcrumb.tsx
@@ -111,7 +111,7 @@ export const Breadcrumb = ({ selectedElement }: { selectedElement: HTMLElement |
               <button
                 type="button"
                 title={item.name}
-                style={{ maxWidth: '120px' }} // CSS hack to force truncation
+                style={{ maxWidth: '160px' }} // CSS hack to force truncation
                 className="truncate"
                 onClick={() => {
                   handleElementClick(item.element as HTMLElement);
diff --git a/packages/scan/src/web/components/widget/components-tree/index.tsx b/packages/scan/src/web/components/widget/components-tree/index.tsx
index bf6ea12e..fa0fefd4 100644
--- a/packages/scan/src/web/components/widget/components-tree/index.tsx
+++ b/packages/scan/src/web/components/widget/components-tree/index.tsx
@@ -24,12 +24,11 @@ import {
   getExtendedDisplayName,
   saveLocalStorage,
 } from '~web/utils/helpers';
+import { getFiberPath } from '~web/utils/pin';
 import { getCompositeComponentFromElement } from '../../inspector/utils';
 import { Breadcrumb } from './breadcrumb';
 import {
   type FlattenedNode,
-  SEARCH_PREFIX_LENGTH,
-  type SearchIndex,
   type TreeNode,
   searchState,
   signalSkipTreeUpdate,
@@ -41,9 +40,9 @@ const flattenTree = (
   parentPath: string | null = null,
 ): FlattenedNode[] => {
   return nodes.reduce<FlattenedNode[]>((acc, node, index) => {
-    const nodePath = parentPath
-      ? `${parentPath}-${index}-${node.label}`
-      : `${index}-${node.label}`;
+    const nodePath = node.element
+      ? getFiberPath(node.fiber)
+      : `${parentPath}-${index}`;
 
     const flatNode: FlattenedNode = {
       ...node,
@@ -68,37 +67,170 @@ const getMaxDepth = (nodes: FlattenedNode[]): number => {
 
 const calculateIndentSize = (containerWidth: number, maxDepth: number) => {
   const MIN_INDENT = 0;
-  const MAX_INDENT = 16;
+  const MAX_INDENT = 24;
+  const MIN_TOTAL_INDENT = 24; // Minimum total indentation we want to preserve
 
-  const availableSpace = containerWidth - MIN_CONTAINER_WIDTH;
+  if (maxDepth <= 0) return MAX_INDENT;
 
-  if (maxDepth > 0) {
-    const baseIndent = Math.min(MAX_INDENT, availableSpace / (maxDepth + 1));
+  const availableSpace = Math.max(0, containerWidth - MIN_CONTAINER_WIDTH);
 
-    const scaleFactor = Math.max(0.4, 1 - maxDepth * 0.1);
-    return Math.max(MIN_INDENT, baseIndent * scaleFactor);
-  }
+  // If we have very little space, use minimal indentation
+  if (availableSpace < MIN_TOTAL_INDENT) return MIN_INDENT;
+
+  // Otherwise, calculate based on available space
+  const targetTotalIndent = Math.min(availableSpace * 0.3, maxDepth * MAX_INDENT);
+  const baseIndent = targetTotalIndent / maxDepth;
 
-  return MAX_INDENT;
+  return Math.max(MIN_INDENT, Math.min(MAX_INDENT, baseIndent));
 };
 
 interface TreeNodeItemProps {
   node: FlattenedNode;
   onElementClick?: (element: HTMLElement) => void;
-  expandedNodes: Set<string>;
+  collapsedNodes: Set<string>;
   onToggle: (nodeId: string) => void;
   searchValue: typeof searchState.value;
 }
 
+// Available wrapper types
+const VALID_TYPES = ['memo', 'forwardRef', 'lazy', 'suspense'];
+
+const parseTypeSearch = (query: string) => {
+  const typeMatch = query.match(/\[(.*?)\]/);
+  if (!typeMatch) return null;
+
+  const typeSearches: string[] = [];
+  const parts = typeMatch[1].split(',');
+  for (const part of parts) {
+    const trimmed = part.trim().toLowerCase();
+    if (trimmed) typeSearches.push(trimmed);
+  }
+
+  return typeSearches;
+};
+
+const isValidTypeSearch = (typeSearches: string[]) => {
+  if (typeSearches.length === 0) return false;
+
+  for (const search of typeSearches) {
+    let isValid = false;
+    for (const validType of VALID_TYPES) {
+      if (validType.toLowerCase().includes(search)) {
+        isValid = true;
+        break;
+      }
+    }
+    if (!isValid) return false;
+  }
+  return true;
+};
+
+const matchesTypeSearch = (typeSearches: string[], wrapperTypes: Array<{ type: string }>) => {
+  if (typeSearches.length === 0) return true;
+  if (!wrapperTypes.length) return false;
+
+  for (const search of typeSearches) {
+    let foundMatch = false;
+    for (const wrapper of wrapperTypes) {
+      if (wrapper.type.toLowerCase().includes(search)) {
+        foundMatch = true;
+        break;
+      }
+    }
+    if (!foundMatch) return false;
+  }
+  return true;
+};
+
+const useNodeHighlighting = (node: FlattenedNode, searchValue: typeof searchState.value) => {
+  return useMemo(() => {
+    const { query, matches } = searchValue;
+    const isMatch = matches.some((match) => match.nodeId === node.nodeId);
+    const typeSearches = parseTypeSearch(query) || [];
+    const searchQuery = query ? query.replace(/\[.*?\]/, '').trim() : '';
+
+    if (!query || !isMatch) {
+      return {
+        highlightedText: <span className="truncate">{node.label}</span>,
+        typeHighlight: false
+      };
+    }
+
+    let matchesType = true;
+    if (typeSearches.length > 0) {
+      if (!node.fiber) {
+        matchesType = false;
+      } else {
+        const { wrapperTypes } = getExtendedDisplayName(node.fiber);
+        matchesType = matchesTypeSearch(typeSearches, wrapperTypes);
+      }
+    }
+
+    let textContent = <span className="truncate">{node.label}</span>;
+    if (searchQuery) {
+      try {
+        if (searchQuery.startsWith('/') && searchQuery.endsWith('/')) {
+          const pattern = searchQuery.slice(1, -1);
+          const regex = new RegExp(`(${pattern})`, 'i');
+          const parts = node.label.split(regex);
+
+          textContent = (
+            <span className="tree-node-search-highlight">
+              {parts.map((part, index) =>
+                regex.test(part) ? (
+                  <span
+                    key={`${node.nodeId}-${part}`}
+                    className={cn('regex', {
+                      start: regex.test(part) && index === 0,
+                      middle: regex.test(part) && index % 2 === 1,
+                      end: regex.test(part) && index === parts.length - 1,
+                      '!ml-0': index === 1,
+                    })}
+                  >
+                    {part}
+                  </span>
+                ) : (
+                  part
+                ),
+              )}
+            </span>
+          );
+        } else {
+          const lowerLabel = node.label.toLowerCase();
+          const lowerQuery = searchQuery.toLowerCase();
+          const index = lowerLabel.indexOf(lowerQuery);
+
+          if (index >= 0) {
+            textContent = (
+              <span className="tree-node-search-highlight">
+                {node.label.slice(0, index)}
+                <span className="single">
+                  {node.label.slice(index, index + searchQuery.length)}
+                </span>
+                {node.label.slice(index + searchQuery.length)}
+              </span>
+            );
+          }
+        }
+      } catch {}
+    }
+
+    return {
+      highlightedText: textContent,
+      typeHighlight: matchesType && typeSearches.length > 0
+    };
+  }, [node.label, node.nodeId, node.fiber, searchValue]);
+};
+
 const TreeNodeItem = ({
   node,
   onElementClick,
-  expandedNodes,
+  collapsedNodes,
   onToggle,
   searchValue,
 }: TreeNodeItemProps) => {
   const hasChildren = node.children && node.children.length > 0;
-  const isExpanded = expandedNodes.has(node.nodeId);
+  const isCollapsed = collapsedNodes.has(node.nodeId);
 
   const handleClick = useCallback(() => {
     if (node.element) {
@@ -112,85 +244,13 @@ const TreeNodeItem = ({
     }
   }, [hasChildren, node.nodeId, onToggle]);
 
-  const highlightedText = useMemo(() => {
-    const { query, matches } = searchValue;
-    const isMatch = matches.some((match) => match.nodeId === node.nodeId);
-
-    if (!query || !isMatch) {
-      return <span className="truncate">{node.label}</span>;
-    }
-
-    try {
-      if (query.startsWith('/') && query.endsWith('/')) {
-        const pattern = query.slice(1, -1);
-        const regex = new RegExp(`(${pattern})`, 'i');
-        const parts = node.label.split(regex);
-
-        return (
-          <span className="tree-node-search-highlight">
-            {parts.map((part, index) =>
-              regex.test(part) ? (
-                <span
-                  key={`${node.nodeId}-${part}`}
-                  className={cn('regex', {
-                    start: regex.test(part) && index === 0,
-                    middle: regex.test(part) && index % 2 === 1,
-                    end: regex.test(part) && index === parts.length - 1,
-                    '!ml-0': index === 1,
-                  })}
-                >
-                  {part}
-                </span>
-              ) : (
-                part
-              ),
-            )}
-          </span>
-        );
-      }
-
-      const lowerLabel = node.label.toLowerCase();
-      const lowerQuery = query.toLowerCase();
-      const index = lowerLabel.indexOf(lowerQuery);
-
-      if (index >= 0) {
-        return (
-          <span className="tree-node-search-highlight">
-            {node.label.slice(0, index)}
-            <span className="single">
-              {node.label.slice(index, index + query.length)}
-            </span>
-            {node.label.slice(index + query.length)}
-          </span>
-        );
-      }
-    } catch {}
-
-    return <span className="truncate">{node.label}</span>;
-  }, [node.label, node.nodeId, searchValue]);
+  const { highlightedText, typeHighlight } = useNodeHighlighting(node, searchValue);
 
   const componentTypes = useMemo(() => {
     if (!node.fiber) return null;
     const { wrapperTypes } = getExtendedDisplayName(node.fiber);
-
-    const typeSearches: string[] = [];
-    const { query } = searchValue;
-    const typeMatch = query.match(/\[(.*?)\]/);
-    if (typeMatch) {
-      typeSearches.push(
-        ...typeMatch[1].split(',').map((t) => t.trim().toLowerCase()),
-      );
-    }
-
     const firstWrapperType = wrapperTypes[0];
 
-    const isMatched =
-      typeSearches.length > 0 &&
-      typeSearches.every((search) =>
-        wrapperTypes.some((wrapperType) =>
-          wrapperType.type.toLowerCase().startsWith(search),
-        ),
-      );
     return (
       <span
         className={cn(
@@ -200,27 +260,31 @@ const TreeNodeItem = ({
         )}
       >
         {firstWrapperType && (
-          <span
-            key={firstWrapperType.type}
-            title={firstWrapperType.title}
-            className={cn(
-              'rounded py-[1px] px-1',
-              'bg-neutral-700 text-neutral-300',
-              'truncate',
-              {
-                'bg-[#8e61e3] text-white': firstWrapperType.type === 'memo',
-                'bg-yellow-300 text-black': isMatched,
-              },
+          <>
+            <span
+              key={firstWrapperType.type}
+              title={firstWrapperType?.title}
+              className={cn(
+                'rounded py-[1px] px-1',
+                'bg-neutral-700 text-neutral-300',
+                'truncate',
+                {
+                  'bg-[#8e61e3] text-white': firstWrapperType.type === 'memo',
+                  'bg-yellow-300 text-black': typeHighlight,
+                },
+              )}
+            >
+              {firstWrapperType.type}
+            </span>
+            {firstWrapperType.compiler && (
+              <span className="text-yellow-300 ml-1">✨</span>
             )}
-          >
-            {firstWrapperType.type}
-            {firstWrapperType.compiler && '✦'}
-          </span>
+          </>
         )}
         {wrapperTypes.length > 1 && `×${wrapperTypes.length - 1}`}
       </span>
     );
-  }, [node.fiber, searchValue]);
+  }, [node.fiber, typeHighlight]);
 
   return (
     <button
@@ -246,7 +310,7 @@ const TreeNodeItem = ({
             name="icon-chevron-right"
             size={12}
             className={cn('w-4 h-4', 'transition-transform', {
-              'rotate-90': isExpanded,
+              'rotate-90': !isCollapsed,
             })}
           />
         )}
@@ -263,21 +327,43 @@ export const ComponentsTree = () => {
   const refMainContainer = useRef<HTMLDivElement>(null);
   const refSearchInputContainer = useRef<HTMLDivElement>(null);
   const refSearchInput = useRef<HTMLInputElement>(null);
-  const refFlattenedNodes = useRef<FlattenedNode[]>([]);
   const refSelectedElement = useRef<HTMLElement | null>(null);
   const refMaxTreeDepth = useRef(0);
+  const refIsHovering = useRef(false);
+  const refIsResizing = useRef(false);
 
-  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
-  const [visibleNodes, setVisibleNodes] = useState<FlattenedNode[]>([]);
+  const [flattenedNodes, setFlattenedNodes] = useState<FlattenedNode[]>([]);
+  const [collapsedNodes, setCollapsedNodes] = useState<Set<string>>(new Set());
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
-  const refIsHovering = useRef(false);
+  const [searchValue, setSearchValue] = useState(searchState.value);
 
-  const refSearchIndex = useRef<SearchIndex>({
-    prefixMap: new Map(),
-    nodeMap: new Map(),
-    labelMap: new Map(),
-    PREFIX_LENGTH: SEARCH_PREFIX_LENGTH,
-  });
+  const visibleNodes = useMemo(() => {
+    const visible: FlattenedNode[] = [];
+    const nodes = flattenedNodes;
+    const nodeMap = new Map(nodes.map((node) => [node.nodeId, node]));
+
+    for (const node of nodes) {
+      let isVisible = true;
+
+      let currentNode = node;
+      while (currentNode.parentId) {
+        const parent = nodeMap.get(currentNode.parentId);
+        if (!parent) break;
+
+        if (collapsedNodes.has(parent.nodeId)) {
+          isVisible = false;
+          break;
+        }
+        currentNode = parent;
+      }
+
+      if (isVisible) {
+        visible.push(node);
+      }
+    }
+
+    return visible;
+  }, [collapsedNodes, flattenedNodes]);
 
   const ITEM_HEIGHT = 28;
 
@@ -288,32 +374,6 @@ export const ComponentsTree = () => {
     overscan: 5,
   });
 
-  const [searchValue, setSearchValue] = useState(searchState.value);
-
-  const buildSearchIndex = useCallback((nodes: FlattenedNode[]) => {
-    const prefixMap = new Map<string, Set<string>>();
-    const nodeMap = new Map<string, FlattenedNode>();
-    const labelMap = new Map<string, string>();
-
-    for (const node of nodes) {
-      nodeMap.set(node.nodeId, node);
-      const lowerLabel = node.label.toLowerCase();
-      labelMap.set(node.nodeId, lowerLabel);
-
-      const prefix = lowerLabel.slice(0, SEARCH_PREFIX_LENGTH);
-      const nodeIds = prefixMap.get(prefix) || new Set();
-      nodeIds.add(node.nodeId);
-      prefixMap.set(prefix, nodeIds);
-    }
-
-    refSearchIndex.current = {
-      prefixMap,
-      nodeMap,
-      labelMap,
-      PREFIX_LENGTH: SEARCH_PREFIX_LENGTH,
-    };
-  }, []);
-
   const handleElementClick = useCallback(
     (element: HTMLElement) => {
       refIsHovering.current = true;
@@ -361,7 +421,7 @@ export const ComponentsTree = () => {
   );
 
   const handleToggle = useCallback((nodeId: string) => {
-    setExpandedNodes((prev) => {
+    setCollapsedNodes((prev) => {
       const next = new Set(prev);
       if (next.has(nodeId)) {
         next.delete(nodeId);
@@ -372,66 +432,70 @@ export const ComponentsTree = () => {
     });
   }, []);
 
-  const handleOnChangeSearch = useCallback((query: string) => {
-    refSearchInputContainer.current?.classList.remove('!border-red-500');
-    const { prefixMap, nodeMap, labelMap, PREFIX_LENGTH } =
-      refSearchIndex.current;
-    const matches: FlattenedNode[] = [];
+  const handleOnChangeSearch = useCallback(
+    (query: string) => {
+      refSearchInputContainer.current?.classList.remove('!border-red-500');
+      const matches: FlattenedNode[] = [];
 
-    if (!query) {
-      searchState.value = { query, matches, currentMatchIndex: -1 };
-      return;
-    }
+      if (!query) {
+        searchState.value = { query, matches, currentMatchIndex: -1 };
+        return;
+      }
+
+      if (query.includes('[') && !query.includes(']')) {
+        if (query.length > query.indexOf('[') + 1) {
+          refSearchInputContainer.current?.classList.add('!border-red-500');
+          return;
+        }
+      }
 
-    const isRegex = /^\/.*\/$/.test(query);
-    const isTypeSearch = /\[(.*?)\]/.test(query);
+      const typeSearches = parseTypeSearch(query) || [];
+      if (query.includes('[')) {
+        if (!isValidTypeSearch(typeSearches)) {
+          refSearchInputContainer.current?.classList.add('!border-red-500');
+          return;
+        }
+      }
 
-    if (isRegex) {
-      try {
-        const pattern = query.slice(1, -1);
-        const regex = new RegExp(pattern, 'i');
+      const searchQuery = query.replace(/\[.*?\]/, '').trim();
+      const isRegex = /^\/.*\/$/.test(searchQuery);
+      let matchesLabel = (_label: string) => false;
 
-        for (const [id, label] of labelMap) {
-          if (regex.test(label)) {
-            const node = nodeMap.get(id);
-            if (node) matches.push(node);
-          }
+      if (searchQuery.startsWith('/') && !isRegex) {
+        if (searchQuery.length > 1) {
+          refSearchInputContainer.current?.classList.add('!border-red-500');
+          return;
         }
-      } catch {
-        refSearchInputContainer.current?.classList.add('!border-red-500');
       }
-    } else if (isTypeSearch) {
-      const typeMatch = query.match(/\[(.*?)\]/);
-      if (!typeMatch) return;
-
-      const typeSearches = typeMatch[1]
-        .split(',')
-        .map((t) => t.trim().toLowerCase());
-      const regularSearch = query
-        .replace(/\[.*?\]/, '')
-        .trim()
-        .toLowerCase();
-
-      for (const [id, node] of nodeMap) {
-        let matchesSearch = true;
 
-        if (typeSearches.length > 0 && node.fiber) {
-          const { wrapperTypes } = getExtendedDisplayName(node.fiber);
-          const nodeWrapperTypes = wrapperTypes.map((w) =>
-            w.type.toLowerCase(),
-          );
+      if (isRegex) {
+        try {
+          const pattern = searchQuery.slice(1, -1);
+          const regex = new RegExp(pattern, 'i');
+          matchesLabel = (label: string) => regex.test(label);
+        } catch {
+          refSearchInputContainer.current?.classList.add('!border-red-500');
+          return;
+        }
+      } else if (searchQuery) {
+        const lowerQuery = searchQuery.toLowerCase();
+        matchesLabel = (label: string) =>
+          label.toLowerCase().includes(lowerQuery);
+      }
 
-          matchesSearch = typeSearches.every((search) =>
-            nodeWrapperTypes.some((type) => type.startsWith(search)),
-          );
-        } else if (typeSearches.length > 0) {
-          matchesSearch = false;
+      for (const node of flattenedNodes) {
+        let matchesSearch = true;
+
+        if (searchQuery) {
+          matchesSearch = matchesLabel(node.label);
         }
 
-        if (matchesSearch && regularSearch) {
-          const label = labelMap.get(id);
-          if (!label?.includes(regularSearch)) {
+        if (matchesSearch && typeSearches.length > 0) {
+          if (!node.fiber) {
             matchesSearch = false;
+          } else {
+            const { wrapperTypes } = getExtendedDisplayName(node.fiber);
+            matchesSearch = matchesTypeSearch(typeSearches, wrapperTypes);
           }
         }
 
@@ -439,34 +503,64 @@ export const ComponentsTree = () => {
           matches.push(node);
         }
       }
-    } else {
-      const lowerQuery = query.toLowerCase();
-      const searchPrefix = lowerQuery.slice(0, PREFIX_LENGTH);
-
-      const matchingIds = prefixMap.get(searchPrefix);
-      if (matchingIds) {
-        for (const id of matchingIds) {
-          const node = nodeMap.get(id);
-          const lowerLabel = labelMap.get(id);
-          if (node && lowerLabel?.includes(lowerQuery)) {
-            matches.push(node);
+
+      searchState.value = {
+        query,
+        matches,
+        currentMatchIndex: matches.length > 0 ? 0 : -1,
+      };
+
+      if (matches.length > 0) {
+        const firstMatch = matches[0];
+        const nodeIndex = visibleNodes.findIndex(
+          (node) => node.nodeId === firstMatch.nodeId,
+        );
+        if (nodeIndex !== -1) {
+          const itemTop = nodeIndex * ITEM_HEIGHT;
+          const container = refContainer.current;
+          if (container) {
+            const containerHeight = container.clientHeight;
+            container.scrollTo({
+              top: Math.max(0, itemTop - containerHeight / 2),
+              behavior: 'instant',
+            });
           }
         }
       }
-    }
+    },
+    [flattenedNodes, visibleNodes],
+  );
 
-    searchState.value = {
-      query,
-      matches,
-      currentMatchIndex: matches.length > 0 ? 0 : -1,
-    };
+  const handleInputChange = useCallback(
+    (e: Event) => {
+      const target = e.currentTarget as HTMLInputElement;
+      if (!target) return;
+      handleOnChangeSearch(target.value);
+    },
+    [handleOnChangeSearch],
+  );
 
-    if (matches.length > 0) {
-      const firstMatch = matches[0];
+  const navigateSearch = useCallback(
+    (direction: 'next' | 'prev') => {
+      const { matches, currentMatchIndex } = searchState.value;
+      if (matches.length === 0) return;
+
+      const newIndex =
+        direction === 'next'
+          ? (currentMatchIndex + 1) % matches.length
+          : (currentMatchIndex - 1 + matches.length) % matches.length;
+
+      searchState.value = {
+        ...searchState.value,
+        currentMatchIndex: newIndex,
+      };
+
+      const currentMatch = matches[newIndex];
       const nodeIndex = visibleNodes.findIndex(
-        (node) => node.nodeId === firstMatch.nodeId,
+        (node) => node.nodeId === currentMatch.nodeId,
       );
       if (nodeIndex !== -1) {
+        setSelectedIndex(nodeIndex);
         const itemTop = nodeIndex * ITEM_HEIGHT;
         const container = refContainer.current;
         if (container) {
@@ -477,46 +571,9 @@ export const ComponentsTree = () => {
           });
         }
       }
-    }
-  }, [visibleNodes.findIndex]);
-
-  const handleInputChange = useCallback((e: Event) => {
-    const target = e.currentTarget as HTMLInputElement;
-    if (!target) return;
-    handleOnChangeSearch(target.value);
-  }, [handleOnChangeSearch]);
-
-  const navigateSearch = useCallback((direction: 'next' | 'prev') => {
-    const { matches, currentMatchIndex } = searchState.value;
-    if (matches.length === 0) return;
-
-    const newIndex =
-      direction === 'next'
-        ? (currentMatchIndex + 1) % matches.length
-        : (currentMatchIndex - 1 + matches.length) % matches.length;
-
-    searchState.value = {
-      ...searchState.value,
-      currentMatchIndex: newIndex,
-    };
-
-    const currentMatch = matches[newIndex];
-    const nodeIndex = visibleNodes.findIndex(
-      (node) => node.nodeId === currentMatch.nodeId,
-    );
-    if (nodeIndex !== -1) {
-      setSelectedIndex(nodeIndex);
-      const itemTop = nodeIndex * ITEM_HEIGHT;
-      const container = refContainer.current;
-      if (container) {
-        const containerHeight = container.clientHeight;
-        container.scrollTo({
-          top: Math.max(0, itemTop - containerHeight / 2),
-          behavior: 'instant',
-        });
-      }
-    }
-  }, [visibleNodes]);
+    },
+    [visibleNodes],
+  );
 
   const updateContainerWidths = useCallback((width: number) => {
     if (refMainContainer.current) {
@@ -540,6 +597,8 @@ export const ComponentsTree = () => {
     if (!refContainer.current) return;
     refContainer.current.style.setProperty('pointer-events', 'none');
 
+    refIsResizing.current = true;
+
     const startX = e.clientX;
     const startWidth = refContainer.current.offsetWidth;
     const parentWidth = signalWidget.value.dimensions.width;
@@ -569,6 +628,8 @@ export const ComponentsTree = () => {
       };
 
       saveLocalStorage(LOCALSTORAGE_KEY, signalWidget.value);
+
+      refIsResizing.current = false;
     };
 
     document.addEventListener('mousemove', handleMouseMove);
@@ -640,21 +701,11 @@ export const ComponentsTree = () => {
 
       if (tree.length > 0) {
         const flattened = flattenTree(tree);
-        refFlattenedNodes.current = flattened;
-        buildSearchIndex(flattened);
-
         const newMaxDepth = getMaxDepth(flattened);
         refMaxTreeDepth.current = newMaxDepth;
 
-        setExpandedNodes((prev) => {
-          const next = new Set(prev);
-          for (const node of flattened) {
-            next.add(node.nodeId);
-          }
-          return next;
-        });
-
         updateContainerWidths(signalWidget.value.componentsTree.width);
+        setFlattenedNodes(flattened);
       }
     };
 
@@ -675,6 +726,8 @@ export const ComponentsTree = () => {
     const unsubscribeUpdates = inspectorUpdateSignal.subscribe(() => {
       if (Store.inspectState.value.kind === 'focused') {
         cancelAnimationFrame(rafId);
+        if (refIsResizing.current) return;
+
         rafId = requestAnimationFrame(() => {
           signalSkipTreeUpdate.value = false;
           updateTree();
@@ -694,7 +747,6 @@ export const ComponentsTree = () => {
     };
   }, []);
 
-
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (!refIsHovering.current) return;
@@ -754,48 +806,25 @@ export const ComponentsTree = () => {
   }, [selectedIndex, visibleNodes, handleElementClick, handleToggle]);
 
   useEffect(() => {
-    const getVisibleNodes = () => {
-      const visible: FlattenedNode[] = [];
-
-      for (const node of refFlattenedNodes.current) {
-        if (!node.parentId) {
-          visible.push(node);
-          continue;
-        }
-
-        let currentParentId: string | null = node.parentId;
-        let isVisible = true;
-
-        while (currentParentId !== null) {
-          if (!expandedNodes.has(currentParentId)) {
-            isVisible = false;
-            break;
-          }
-          const parentNode = refFlattenedNodes.current.find(
-            (n) => n.nodeId === currentParentId,
-          );
-          if (!parentNode) break;
-          currentParentId = parentNode.parentId;
-        }
-
-        if (isVisible) {
-          visible.push(node);
-        }
-      }
-
-      return visible;
-    };
-
-    setVisibleNodes(getVisibleNodes());
-  }, [expandedNodes]);
+    return searchState.subscribe(setSearchValue);
+  }, []);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: no deps
   useEffect(() => {
-    return searchState.subscribe(setSearchValue);
+    const unsubscribe = signalWidget.subscribe((state) => {
+      updateContainerWidths(state.componentsTree.width);
+    });
+    return () => {
+      unsubscribe();
+    };
   }, []);
 
   return (
     <>
-      <div onMouseDown={handleResize} className="relative resize-v-line">
+      <div
+        onMouseDown={handleResize}
+        className="relative resize-v-line"
+      >
         <span>
           <Icon name="icon-ellipsis" size={18} />
         </span>
@@ -809,22 +838,23 @@ export const ComponentsTree = () => {
               ref={refSearchInputContainer}
               title={`Search components by:
 
-• Component name (e.g. "Button")
-  - Matches any part of the name
-  - Case insensitive
-
-• Regular expression (e.g. "/^Button/")
-  - Wrap in forward slashes
-  - Case insensitive
-
-• Wrapper type (e.g. "[memo,forward]")
-  - Available types:
-    • memo - Memoized component
-    • forwardRef - Forwards refs to DOM or components
-    • lazy - Code-split component
-    • suspense - Loading boundary
-  - Can use partial types (e.g. "for" matches "forwardRef")
-  - Multiple types with comma
+• Name (e.g., "Button") — Case insensitive, matches any part
+
+• Regular Expression (e.g., "/^Button/") — Use forward slashes
+
+• Wrapper Type (e.g., "[memo,forwardRef]"):
+   - Available types: memo, forwardRef, lazy, suspense
+   - Matches any part of type name (e.g., "mo" matches "memo")
+   - Use commas for multiple types
+
+• Combined Search:
+   - Mix name/regex with type: "button [for]"
+   - Will match components satisfying both conditions
+
+• Navigation:
+   - Enter → Next match
+   - Shift + Enter → Previous match
+   - Cmd/Ctrl + Enter → Select and focus match (keeps search active)
 `}
               className={cn(
                 'relative',
@@ -852,67 +882,97 @@ export const ComponentsTree = () => {
                     e.stopPropagation();
                     e.currentTarget.focus();
                   }}
+                  onMouseDown={(e) => {
+                    e.stopPropagation();
+                  }}
                   onKeyDown={(e) => {
                     if (e.key === 'Escape') {
                       e.currentTarget.blur();
                     }
+                    if (searchState.value.matches.length) {
+                      if (e.key === 'Enter' && e.shiftKey) {
+                        navigateSearch('prev');
+                      } else if (e.key === 'Enter') {
+                        if (e.metaKey || e.ctrlKey) {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleElementClick(
+                            searchState.value.matches[
+                              searchState.value.currentMatchIndex
+                            ].element as HTMLElement,
+                          );
+
+                          e.currentTarget.focus();
+                        } else {
+                          navigateSearch('next');
+                        }
+                      }
+                    }
                   }}
                   onChange={handleInputChange}
                   className="absolute inset-y-0 inset-x-1"
                   placeholder="Component name, /regex/, or [type]"
                 />
               </div>
-              {searchState.value.query && (
-                <>
-                  <span className="flex items-center gap-x-0.5 text-xs text-neutral-500">
-                    {searchState.value.currentMatchIndex + 1}
-                    {'|'}
-                    {searchState.value.matches.length}
-                  </span>
-                  {!!searchState.value.matches.length && (
+              {
+                searchState.value.query
+                  ? (
                     <>
+                      <span className="flex items-center gap-x-0.5 text-xs text-neutral-500">
+                        {searchState.value.currentMatchIndex + 1}
+                        {'|'}
+                        {searchState.value.matches.length}
+                      </span>
+                      {!!searchState.value.matches.length && (
+                        <>
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              navigateSearch('prev');
+                            }}
+                            className="button rounded w-4 h-4 flex items-center justify-center text-neutral-400 hover:text-neutral-300"
+                          >
+                            <Icon
+                              name="icon-chevron-right"
+                              className="-rotate-90"
+                              size={12}
+                            />
+                          </button>
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              navigateSearch('next');
+                            }}
+                            className="button rounded w-4 h-4 flex items-center justify-center text-neutral-400 hover:text-neutral-300"
+                          >
+                            <Icon
+                              name="icon-chevron-right"
+                              className="rotate-90"
+                              size={12}
+                            />
+                          </button>
+                        </>
+                      )}
                       <button
                         type="button"
                         onClick={(e) => {
                           e.stopPropagation();
-                          navigateSearch('prev');
+                          handleOnChangeSearch('');
                         }}
                         className="button rounded w-4 h-4 flex items-center justify-center text-neutral-400 hover:text-neutral-300"
                       >
-                        <Icon
-                          name="icon-chevron-right"
-                          className="-rotate-90"
-                          size={12}
-                        />
-                      </button>
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          navigateSearch('next');
-                        }}
-                        className="button rounded w-4 h-4 flex items-center justify-center text-neutral-400 hover:text-neutral-300"
-                      >
-                        <Icon
-                          name="icon-chevron-right"
-                          className="rotate-90"
-                          size={12}
-                        />
+                        <Icon name="icon-close" size={12} />
                       </button>
                     </>
-                  )}
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleOnChangeSearch('');
-                    }}
-                    className="button rounded w-4 h-4 flex items-center justify-center text-neutral-400 hover:text-neutral-300"
-                  >
-                    <Icon name="icon-close" size={12} />
-                  </button>
-                </>
-              )}
+                  )
+                  : !!flattenedNodes.length && (
+                    <span className="text-xs text-neutral-500">
+                      {flattenedNodes.length}
+                    </span>
+                  )
+              }
             </div>
           </div>
         </div>
@@ -963,7 +1023,7 @@ export const ComponentsTree = () => {
                       <TreeNodeItem
                         node={node}
                         onElementClick={handleElementClick}
-                        expandedNodes={expandedNodes}
+                        collapsedNodes={collapsedNodes}
                         onToggle={handleToggle}
                         searchValue={searchValue}
                       />
diff --git a/packages/scan/src/web/components/widget/components-tree/state.ts b/packages/scan/src/web/components/widget/components-tree/state.ts
index d952abce..9a4b4d18 100644
--- a/packages/scan/src/web/components/widget/components-tree/state.ts
+++ b/packages/scan/src/web/components/widget/components-tree/state.ts
@@ -16,15 +16,6 @@ export interface FlattenedNode extends TreeNode {
   fiber: Fiber;
 }
 
-export const SEARCH_PREFIX_LENGTH = 3;
-
-export interface SearchIndex {
-  prefixMap: Map<string, Set<string>>;
-  nodeMap: Map<string, FlattenedNode>;
-  labelMap: Map<string, string>;
-  PREFIX_LENGTH: number;
-}
-
 export const searchState = signal<{
   query: string;
   matches: FlattenedNode[];
@@ -42,4 +33,4 @@ export interface TreeItem {
   fiber: Fiber;
 }
 
-export const signalSkipTreeUpdate = signal<boolean>(false);
+export const signalSkipTreeUpdate = signal(false);
diff --git a/packages/scan/src/web/components/widget/fps-meter.tsx b/packages/scan/src/web/components/widget/fps-meter.tsx
index eaaf6985..e94532e1 100644
--- a/packages/scan/src/web/components/widget/fps-meter.tsx
+++ b/packages/scan/src/web/components/widget/fps-meter.tsx
@@ -34,7 +34,7 @@ export const FpsMeter = () => {
     >
       <span
         ref={refFps}
-        data-text="60"
+        data-text="120"
         className="transition-color ease-in-out with-data-text"
       />
       <span className="tracking-wide font-mono text-xxs mt-[1px]">
diff --git a/packages/scan/src/web/components/widget/header.tsx b/packages/scan/src/web/components/widget/header.tsx
index 95985134..8f7d1081 100644
--- a/packages/scan/src/web/components/widget/header.tsx
+++ b/packages/scan/src/web/components/widget/header.tsx
@@ -164,25 +164,31 @@ const HeaderInspect = () => {
         className="flex items-center gap-x-1"
       >
         {name ?? 'Unknown'}
-        <span className="flex items-center gap-x-1 text-[10px] text-purple-400">
+        <span
+          title={firstWrapperType?.title}
+          className="flex items-center gap-x-1 text-[10px] text-purple-400"
+        >
           {
             !!firstWrapperType && (
-              <span
-                key={firstWrapperType.type}
-                title={firstWrapperType.title}
-                className={cn(
-                  'rounded py-[1px] px-1',
-                  'truncate',
-                  {
-                    'bg-purple-800 text-neutral-400': firstWrapperType.compiler,
-                    'bg-neutral-700 text-neutral-300': !firstWrapperType.compiler,
-                    'bg-[#5f3f9a] text-white': firstWrapperType.type === 'memo',
-                  }
+              <>
+                <span
+                  key={firstWrapperType.type}
+                  className={cn(
+                    'rounded py-[1px] px-1',
+                    'truncate',
+                    {
+                      'bg-purple-800 text-neutral-400': firstWrapperType.compiler,
+                      'bg-neutral-700 text-neutral-300': !firstWrapperType.compiler,
+                      'bg-[#5f3f9a] text-white': firstWrapperType.type === 'memo',
+                    }
+                  )}
+                >
+                  {firstWrapperType.type}
+                </span>
+                {firstWrapperType.compiler && (
+                  <span className="text-yellow-300">✨</span>
                 )}
-              >
-                {firstWrapperType.type}
-                {firstWrapperType.compiler && '✦'}
-              </span>
+              </>
             )
           }
         </span>
diff --git a/packages/scan/src/web/components/widget/resize-handle.tsx b/packages/scan/src/web/components/widget/resize-handle.tsx
index 1abecf82..5b572376 100644
--- a/packages/scan/src/web/components/widget/resize-handle.tsx
+++ b/packages/scan/src/web/components/widget/resize-handle.tsx
@@ -284,12 +284,26 @@ export const ResizeHandle = ({ position }: ResizeHandleProps) => {
       position: newPosition,
     };
 
+    // Adjust components tree width when widget is resized
+    const maxTreeWidth = Math.floor(newWidth - (MIN_SIZE.width / 2));
+    const currentTreeWidth = signalWidget.value.componentsTree.width;
+    const defaultWidth = Math.floor(newWidth * 0.3); // Use 30% of window width as default
+
+    const newTreeWidth = isCurrentFullWidth
+      ? MIN_CONTAINER_WIDTH
+      : (position === 'left' || position === 'right') && !isCurrentFullWidth
+        ? Math.min(maxTreeWidth, Math.max(MIN_CONTAINER_WIDTH, defaultWidth))
+        : Math.min(maxTreeWidth, Math.max(MIN_CONTAINER_WIDTH, currentTreeWidth));
+
     requestAnimationFrame(() => {
       signalWidget.value = {
         corner: newCorner,
         dimensions: newDimensions,
         lastDimensions: dimensions,
-        componentsTree: signalWidget.value.componentsTree,
+        componentsTree: {
+          ...signalWidget.value.componentsTree,
+          width: newTreeWidth,
+        },
       };
 
       containerStyle.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
@@ -302,6 +316,10 @@ export const ResizeHandle = ({ position }: ResizeHandleProps) => {
       corner: newCorner,
       dimensions: newDimensions,
       lastDimensions: dimensions,
+      componentsTree: {
+        ...signalWidget.value.componentsTree,
+        width: newTreeWidth,
+      },
     });
   }, []);
 
diff --git a/packages/scan/src/web/components/widget/toolbar/arrows.tsx b/packages/scan/src/web/components/widget/toolbar/arrows.tsx
deleted file mode 100644
index df2302a5..00000000
--- a/packages/scan/src/web/components/widget/toolbar/arrows.tsx
+++ /dev/null
@@ -1,328 +0,0 @@
-import { getFiberId } from 'bippy';
-import type { Fiber } from 'bippy';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { Store } from '~core/index';
-import { Icon } from '~web/components/icon';
-import {
-  type InspectableElement,
-  getCompositeComponentFromElement,
-  getInspectableElements,
-} from '~web/components/inspector/utils';
-import { useDelayedValue } from '~web/hooks/use-mount-delay';
-import { cn } from '~web/utils/helpers';
-import { constant } from '~web/utils/preact/constant';
-import { getBatchedRectMap } from '../../../../new-outlines';
-
-interface FocusedState {
-  kind: 'focused';
-  focusedDomElement: Element;
-  fiber: Fiber;
-}
-
-type InspectingState = {
-  kind: 'inspecting';
-  hoveredDomElement: Element | null;
-};
-
-type InspectOffState = {
-  kind: 'inspect-off';
-};
-
-type UninitializedState = {
-  kind: 'uninitialized';
-};
-
-type States =
-  | FocusedState
-  | InspectingState
-  | InspectOffState
-  | UninitializedState;
-
-export function isFocusedState(state: States): state is FocusedState {
-  return state.kind === 'focused';
-}
-
-export const Arrows = constant(() => {
-  const refButtonPrevious = useRef<HTMLButtonElement | null>(null);
-  const refButtonNext = useRef<HTMLButtonElement>(null);
-  const refAllElements = useRef<Array<InspectableElement>>([]);
-  const refCurrentFiberId = useRef<number | null>(null);
-
-  const [shouldRender, setShouldRender] = useState(false);
-  const isMounted = useDelayedValue(shouldRender, 0, 1000);
-
-  const findNextElement = useCallback(
-    async (currentElement: Element, direction: 'next' | 'previous') => {
-      const currentIndex = refAllElements.current.findIndex(
-        (item) => item.element === currentElement,
-      );
-      if (currentIndex === -1) {
-        return null;
-      }
-
-      const startIndex = currentIndex + (direction === 'next' ? 1 : -1);
-
-      const elements = refAllElements.current;
-      const totalElements = elements.length;
-
-      const BATCH_SIZE = 500;
-
-      // this looks very convoluted, but we need to efficiently find the next
-      // selectable fiber, and because there may be hundreds of components that are not
-      // in viewport, or have 0 width/height in the neighboring indexes we need to search in large
-      // batches to avoid latency when the user clicks the next button
-
-      if (direction === 'next') {
-        for (
-          let batchStart = startIndex;
-          batchStart < totalElements;
-          batchStart += BATCH_SIZE
-        ) {
-          const batchEnd = Math.min(batchStart + BATCH_SIZE, totalElements);
-          const batchElements = elements
-            .slice(batchStart, batchEnd)
-            .map((item) => item.element);
-
-          if (batchElements.length === 0) continue;
-
-          const allEntries: IntersectionObserverEntry[] = [];
-          for await (const entries of getBatchedRectMap(batchElements)) {
-            allEntries.push(...entries);
-          }
-
-          const entryMap = new Map(
-            allEntries.map((entry) => [entry.target, entry]),
-          );
-
-          for (let i = 0; i < batchElements.length; i++) {
-            const element = batchElements[i];
-            if (!element) continue;
-
-            const { parentCompositeFiber } =
-              getCompositeComponentFromElement(element);
-            if (!parentCompositeFiber) continue;
-
-            const nextFiberId = getFiberId(parentCompositeFiber);
-            if (nextFiberId === refCurrentFiberId.current) continue;
-
-            const entry = entryMap.get(element);
-            if (
-              !entry ||
-              !entry.isIntersecting ||
-              entry.intersectionRect.width <= 0 ||
-              entry.intersectionRect.height <= 0
-            )
-              continue;
-
-            const rect = element.getBoundingClientRect();
-            const isVisible =
-              rect.top < window.innerHeight &&
-              rect.bottom > 0 &&
-              rect.left < window.innerWidth &&
-              rect.right > 0;
-
-            if (!isVisible) continue;
-
-            refCurrentFiberId.current = nextFiberId;
-            return element;
-          }
-        }
-      } else {
-        // For previous direction, process from current index to start
-        for (let batchEnd = startIndex; batchEnd >= 0; batchEnd -= BATCH_SIZE) {
-          const batchStart = Math.max(batchEnd - BATCH_SIZE + 1, 0);
-          const batchElements = elements
-            .slice(batchStart, batchEnd + 1)
-            .map((item) => item.element)
-            .reverse();
-
-          if (batchElements.length === 0) continue;
-
-          const allEntries: IntersectionObserverEntry[] = [];
-          for await (const entries of getBatchedRectMap(batchElements)) {
-            allEntries.push(...entries);
-          }
-
-          const entryMap = new Map(
-            allEntries.map((entry) => [entry.target, entry]),
-          );
-
-          for (let i = 0; i < batchElements.length; i++) {
-            const element = batchElements[i];
-            if (!element) continue;
-
-            const { parentCompositeFiber } =
-              getCompositeComponentFromElement(element);
-            if (!parentCompositeFiber) continue;
-
-            const nextFiberId = getFiberId(parentCompositeFiber);
-            if (nextFiberId === refCurrentFiberId.current) continue;
-
-            const entry = entryMap.get(element);
-            if (
-              !entry ||
-              !entry.isIntersecting ||
-              entry.intersectionRect.width <= 0 ||
-              entry.intersectionRect.height <= 0
-            )
-              continue;
-
-            const rect = element.getBoundingClientRect();
-            const isVisible =
-              rect.top < window.innerHeight &&
-              rect.bottom > 0 &&
-              rect.left < window.innerWidth &&
-              rect.right > 0;
-
-            if (!isVisible) continue;
-
-            refCurrentFiberId.current = nextFiberId;
-            return element;
-          }
-        }
-      }
-
-      return null;
-    },
-    [],
-  );
-
-  const handleClick = async (direction: 'previous' | 'next') => {
-    const state = Store.inspectState.value;
-    if (state.kind !== 'focused') return;
-
-    const nextElement = await findNextElement(state.focusedDomElement, direction);
-    if (!nextElement) return;
-
-    const { parentCompositeFiber } = getCompositeComponentFromElement(nextElement);
-    if (!parentCompositeFiber) return;
-
-    Store.inspectState.value = {
-      kind: 'focused',
-      focusedDomElement: nextElement,
-      fiber: parentCompositeFiber,
-    };
-  };
-
-  useEffect(() => {
-    const unsubscribe = Store.inspectState.subscribe(async (state) => {
-      if (
-        state.kind === 'focused' &&
-        refButtonPrevious.current &&
-        refButtonNext.current
-      ) {
-        refAllElements.current = getInspectableElements();
-
-        const fiber = state.fiber;
-        if (fiber) {
-          const currentFiberId = getFiberId(fiber);
-          refCurrentFiberId.current = currentFiberId;
-        }
-
-        const hasPrevious = !!(await findNextElement(
-          state.focusedDomElement,
-          'previous',
-        ));
-        if (!refButtonPrevious.current || !refButtonNext.current) {
-          // handle the ref unmounting before the awaited code (us)
-          return;
-        }
-        refButtonPrevious.current.disabled = !hasPrevious;
-        refButtonPrevious.current.classList.toggle('opacity-50', !hasPrevious);
-        refButtonPrevious.current.classList.toggle(
-          'cursor-not-allowed',
-          !hasPrevious,
-        );
-
-        const hasNext = !!(await findNextElement(
-          state.focusedDomElement,
-          'next',
-        ));
-        refButtonNext.current.disabled = !hasNext;
-        refButtonNext.current.classList.toggle('opacity-50', !hasNext);
-        refButtonNext.current.classList.toggle('cursor-not-allowed', !hasNext);
-
-        setShouldRender(true);
-      }
-
-      if (
-        state.kind === 'inspecting' &&
-        refButtonPrevious.current &&
-        refButtonNext.current
-      ) {
-        refButtonPrevious.current.disabled = true;
-        refButtonPrevious.current.classList.toggle('opacity-50', true);
-        refButtonPrevious.current.classList.toggle('cursor-not-allowed', true);
-        refButtonNext.current.disabled = true;
-        refButtonNext.current.classList.toggle('opacity-50', true);
-        refButtonNext.current.classList.toggle('cursor-not-allowed', true);
-        setShouldRender(true);
-      }
-
-      if (state.kind === 'inspect-off') {
-        refAllElements.current = [];
-        refCurrentFiberId.current = null;
-        setShouldRender(false);
-      }
-
-      if (state.kind === 'uninitialized') {
-
-        Store.inspectState.value = {
-          kind: 'inspect-off',
-        };
-      }
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [findNextElement]);
-
-  return (
-    <div
-      className={cn(
-        'flex items-stretch justify-between h-full',
-        'ml-auto',
-        'text-[#999]',
-        'overflow-hidden',
-        'transition-opacity duration-300',
-        {
-          'opacity-0 w-0': !isMounted,
-        },
-      )}
-    >
-      <button
-        type="button"
-        ref={refButtonPrevious}
-        title="Previous element"
-        onClick={() => handleClick('previous')}
-        className={cn(
-          'button h-full',
-          'flex items-center justify-center',
-          'px-3',
-          'opacity-50',
-          'transition-all duration-300',
-          'cursor-not-allowed',
-        )}
-      >
-        <Icon name="icon-previous" />
-      </button>
-      <button
-        type="button"
-        ref={refButtonNext}
-        title="Next element"
-        onClick={() => handleClick('next')}
-        className={cn(
-          'button h-full',
-          'flex items-center justify-center',
-          'px-3',
-          'opacity-50',
-          'transition-all duration-300',
-          'cursor-not-allowed',
-        )}
-      >
-        <Icon name="icon-next" />
-      </button>
-    </div>
-  );
-});
diff --git a/packages/scan/src/web/utils/helpers.ts b/packages/scan/src/web/utils/helpers.ts
index 51289407..d3f05f6a 100644
--- a/packages/scan/src/web/utils/helpers.ts
+++ b/packages/scan/src/web/utils/helpers.ts
@@ -5,6 +5,7 @@ import {
   SimpleMemoComponentTag,
   SuspenseComponentTag,
   getDisplayName,
+  hasMemoCache,
 } from 'bippy';
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -111,68 +112,33 @@ export const getExtendedDisplayName = (fiber: Fiber): ExtendedDisplayName => {
     };
   }
 
-  const { tag, type } = fiber;
-
+  const { tag, type, elementType } = fiber;
   let name = getDisplayName(type);
   const wrappers: Array<string> = [];
-
-  // Check for wrapped components like Foo(Bar(Component))
-  // Match the outermost wrapper first, then work inwards
-  while (name && /^(\w+)\((.*)\)$/.test(name)) {
-    const wrapper = name.match(/^(\w+)\(/)?.[1];
-    if (wrapper) {
-      wrappers.unshift(wrapper); // Add to start of array to maintain order
-      name = name.slice(wrapper.length + 1, -1); // Remove wrapper and parentheses
-    }
-  }
-
   const wrapperTypes: Array<WrapperBadge> = [];
 
-  // Process wrappers in order they appear in the displayName
-  for (const wrapper of wrappers) {
-    if (wrapper.toLowerCase().includes('memo')) {
-      wrapperTypes.push({
-        type: 'memo',
-        title: 'Memoized component that skips re-renders if props are the same',
-        compiler: false,
-      });
-    } else if (wrapper.toLowerCase().includes('forwardref')) {
-      wrapperTypes.push({
-        type: 'forwardRef',
-        title:
-          'Component that can forward refs to DOM elements or other components',
-      });
-    }
-  }
-
-  // Check for React compiler auto-memoization
-  if (
-    typeof type === 'function' &&
-    type !== null &&
-    '_automaticMemoized' in type
-  ) {
-    wrapperTypes.push({
-      type: 'memo',
-      title: 'This component has been auto-memoized by the React Compiler',
-      compiler: true,
-    });
-  }
-
-  // Add wrappers based on fiber tags
   if (
-    (tag === SimpleMemoComponentTag || tag === MemoComponentTag) &&
-    !wrapperTypes.some((w) => w.type === 'memo' && !w.compiler)
+    hasMemoCache(fiber) ||
+    tag === SimpleMemoComponentTag ||
+    tag === MemoComponentTag ||
+    (type as { $$typeof?: symbol })?.$$typeof === Symbol.for('react.memo') ||
+    (elementType as { $$typeof?: symbol })?.$$typeof ===
+      Symbol.for('react.memo')
   ) {
+    const compiler = hasMemoCache(fiber);
     wrapperTypes.push({
       type: 'memo',
-      title: 'Memoized component that skips re-renders if props are the same',
-      compiler: false,
+      title: compiler
+        ? 'This component has been auto-memoized by the React Compiler.'
+        : 'Memoized component that skips re-renders if props are the same',
+      compiler,
     });
   }
 
   if (
-    tag === ForwardRefTag &&
-    !wrapperTypes.some((w) => w.type === 'forwardRef')
+    tag === ForwardRefTag ||
+    (type as { $$typeof?: symbol })?.$$typeof ===
+      Symbol.for('react.forward_ref')
   ) {
     wrapperTypes.push({
       type: 'forwardRef',
@@ -202,6 +168,21 @@ export const getExtendedDisplayName = (fiber: Fiber): ExtendedDisplayName => {
     });
   }
 
+  if (typeof name === 'string') {
+    const wrapperRegex = /^(\w+)\((.*)\)$/;
+    let currentName = name;
+    while (wrapperRegex.test(currentName)) {
+      const match = currentName.match(wrapperRegex);
+      if (match?.[1] && match?.[2]) {
+        wrappers.unshift(match[1]);
+        currentName = match[2];
+      } else {
+        break;
+      }
+    }
+    name = currentName;
+  }
+
   return {
     name: name || 'Unknown',
     wrappers,
diff --git a/packages/scan/src/web/utils/pin.ts b/packages/scan/src/web/utils/pin.ts
index 1169a86a..53754442 100644
--- a/packages/scan/src/web/utils/pin.ts
+++ b/packages/scan/src/web/utils/pin.ts
@@ -14,6 +14,29 @@ export interface FiberMetadata {
 
 const metadata = readLocalStorage<FiberMetadata>('react-scann-pinned');
 
+export const getFiberPath = (fiber: Fiber): string => {
+  const pathSegments: string[] = [];
+  let currentFiber: Fiber | null = fiber;
+
+  while (currentFiber) {
+    const elementType = currentFiber.elementType;
+    const name =
+      typeof elementType === 'function'
+        ? elementType.displayName || elementType.name
+        : typeof elementType === 'string'
+          ? elementType
+          : 'Unknown';
+
+    const index =
+      currentFiber.index !== undefined ? `[${currentFiber.index}]` : '';
+    pathSegments.unshift(`${name}${index}`);
+
+    currentFiber = currentFiber.return ?? null;
+  }
+
+  return pathSegments.join('::');
+};
+
 export const getFiberMetadata = (fiber: Fiber): FiberMetadata | null => {
   if (!fiber || !fiber.elementType) return null;
 
@@ -35,19 +58,7 @@ export const getFiberMetadata = (fiber: Fiber): FiberMetadata | null => {
     parentFiber = parentFiber.return;
   }
 
-  const pathSegments: string[] = [];
-  let currentFiber: Fiber | null = fiber;
-
-  while (currentFiber) {
-    if (currentFiber.elementType?.name) {
-      const index =
-        currentFiber.index !== undefined ? `[${currentFiber.index}]` : '';
-      pathSegments.unshift(`${currentFiber.elementType.name}${index}`);
-    }
-    currentFiber = currentFiber.return ?? null;
-  }
-
-  const path = pathSegments.join('::');
+  const path = getFiberPath(fiber);
 
   const propKeys = fiber.pendingProps
     ? Object.keys(fiber.pendingProps).filter((key) => key !== 'children')
@@ -56,24 +67,6 @@ export const getFiberMetadata = (fiber: Fiber): FiberMetadata | null => {
   return { componentName, parent, position, sibling, path, propKeys };
 };
 
-const reconstructPath = (fiber: Fiber): string => {
-  const pathSegments: string[] = [];
-  let currentFiber = fiber;
-
-  while (currentFiber) {
-    if (currentFiber.elementType?.name) {
-      const index =
-        currentFiber.index !== undefined ? `[${currentFiber.index}]` : '';
-      pathSegments.unshift(`${currentFiber.elementType.name}${index}`);
-    }
-    const nextFiber = currentFiber.return;
-    if (!nextFiber) break;
-    currentFiber = nextFiber;
-  }
-
-  return pathSegments.join('::');
-};
-
 const checkFiberMatch = (fiber: Fiber | undefined): boolean => {
   if (!fiber || !fiber.elementType || !metadata?.componentName) return false;
 
@@ -93,7 +86,7 @@ const checkFiberMatch = (fiber: Fiber | undefined): boolean => {
   if (parent !== metadata.parent) return false;
   if (fiber.index !== metadata.position) return false;
 
-  const fiberPath = reconstructPath(fiber);
+  const fiberPath = getFiberPath(fiber);
   return fiberPath === metadata.path;
 };