From 9f84c67cf93ecb382a7c21f95f1c7ffb6ea72ae2 Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Thu, 4 Dec 2025 17:22:12 +0800
Subject: [PATCH 1/4] chore: update dependencies to version 2.0.0-beta.15 and
 refactor RenderTree component for improved performance

---
 package.json                                  |   1 -
 packages/devtools/package.json                |   4 +-
 packages/kit/package.json                     |   2 +-
 packages/playgrounds/package.json             |   6 +-
 packages/plugin/package.json                  |   2 +-
 packages/ui/package.json                      |   4 +-
 .../ui/src/components/Tree/filterVnode.ts     |   4 +-
 .../ui/src/features/CodeBreack/HtmlParser.tsx |   9 +-
 .../src/features/CodeBreack/StateParser.tsx   |   9 +-
 .../src/features/RenderTree/HookDataStore.ts  | 290 +++++++++
 .../ui/src/features/RenderTree/RenderTree.tsx |  48 +-
 .../ui/src/features/RenderTree/TreeBuilder.ts | 245 ++++++++
 packages/ui/src/features/RenderTree/data.ts   | 101 ++--
 .../src/features/RenderTree/formatTreeData.ts | 558 +++++++++---------
 packages/ui/src/features/RenderTree/index.ts  |  45 ++
 .../src/features/RenderTree/transfromqseq.ts  | 142 +----
 packages/ui/src/features/RenderTree/types.ts  | 216 +++++++
 packages/ui/src/utils/shiki.ts                |  14 +
 pnpm-lock.yaml                                | 247 ++++----
 19 files changed, 1320 insertions(+), 627 deletions(-)
 create mode 100644 packages/ui/src/features/RenderTree/HookDataStore.ts
 create mode 100644 packages/ui/src/features/RenderTree/TreeBuilder.ts
 create mode 100644 packages/ui/src/features/RenderTree/index.ts
 create mode 100644 packages/ui/src/features/RenderTree/types.ts
 create mode 100644 packages/ui/src/utils/shiki.ts

diff --git a/package.json b/package.json
index ac498e6..58224c3 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
   "license": "MIT",
   "description": "Qwik devtools monorepo",
   "scripts": {
-    "dev": "pnpm --filter plugin build && MODE=dev pnpm --parallel dev",
     "playground": "MODE=dev DEBUG=qwik:devtools:* pnpm --filter playground dev",
     "build": "tsx scripts/build-devtools.ts",
     "change": "changeset",
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
index 30a05d9..673a48b 100644
--- a/packages/devtools/package.json
+++ b/packages/devtools/package.json
@@ -24,8 +24,8 @@
     "README.md"
   ],
   "peerDependencies": {
-    "@qwik.dev/core": "2.0.0-beta.11",
-    "@qwik.dev/router": "2.0.0-beta.11",
+    "@qwik.dev/core": "2.0.0-beta.15",
+    "@qwik.dev/router": "2.0.0-beta.15",
     "vite": "7.1.3",
     "@tailwindcss/postcss": "^4.1.14",
     "@tailwindcss/vite": "^4.1.14",
diff --git a/packages/kit/package.json b/packages/kit/package.json
index 4c9c6b7..57fece7 100644
--- a/packages/kit/package.json
+++ b/packages/kit/package.json
@@ -31,7 +31,7 @@
     "@typescript-eslint/parser": "7.16.1",
     "cpy-cli": "^5.0.0",
     "eslint": "8.57.0",
-    "eslint-plugin-qwik": "2.0.0-beta.11",
+    "eslint-plugin-qwik": "2.0.0-beta.15",
     "np": "^8.0.4",
     "prettier": "3.3.3",
     "typescript": "5.4.5",
diff --git a/packages/playgrounds/package.json b/packages/playgrounds/package.json
index fa4d337..06dad7a 100644
--- a/packages/playgrounds/package.json
+++ b/packages/playgrounds/package.json
@@ -29,14 +29,14 @@
   "devDependencies": {
     "@devtools/plugin": "workspace:*",
     "@devtools/ui": "workspace:*",
-    "@qwik.dev/core": "2.0.0-beta.11",
-    "@qwik.dev/router": "2.0.0-beta.11",
+    "@qwik.dev/core": "2.0.0-beta.15",
+    "@qwik.dev/router": "2.0.0-beta.15",
     "@types/eslint": "8.56.10",
     "@types/node": "20.14.11",
     "@typescript-eslint/eslint-plugin": "7.16.1",
     "@typescript-eslint/parser": "7.16.1",
     "eslint": "8.57.0",
-    "eslint-plugin-qwik": "2.0.0-beta.11",
+    "eslint-plugin-qwik": "2.0.0-beta.15",
     "prettier": "3.3.3",
     "typescript": "5.4.5",
     "vite": "7.1.3",
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
index 3de2118..21330bd 100644
--- a/packages/plugin/package.json
+++ b/packages/plugin/package.json
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@babel/types": "^7.26.7",
     "@devtools/kit": "workspace:*",
-    "@qwik.dev/core": "2.0.0-beta.11",
+    "@qwik.dev/core": "2.0.0-beta.15",
     "@types/eslint": "8.56.10",
     "@types/node": "20.14.11",
     "@typescript-eslint/eslint-plugin": "7.16.1",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 85c7a37..11c2349 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -34,7 +34,7 @@
   },
   "peerDependencies": {
     "@devtools/plugin": "workspace:*",
-    "@qwik.dev/core": "2.0.0-beta.11",
+    "@qwik.dev/core": "2.0.0-beta.15",
     "@tailwindcss/postcss": "^4.1.14",
     "@tailwindcss/vite": "^4.1.14",
     "tailwindcss": "^4.1.14"
@@ -53,7 +53,7 @@
     "cpy-cli": "^5.0.0",
     "dree": "^5.1.5",
     "eslint": "8.57.0",
-    "eslint-plugin-qwik": "2.0.0-alpha.9",
+    "eslint-plugin-qwik": "2.0.0-beta.15",
     "nodemon": "^3.1.9",
     "np": "^8.0.4",
     "postcss": "^8.4.39",
diff --git a/packages/ui/src/components/Tree/filterVnode.ts b/packages/ui/src/components/Tree/filterVnode.ts
index d81dae5..82f11db 100644
--- a/packages/ui/src/components/Tree/filterVnode.ts
+++ b/packages/ui/src/components/Tree/filterVnode.ts
@@ -6,12 +6,12 @@ import {
   _vnode_getFirstChild,
   _vnode_isMaterialized,
   _vnode_isVirtualVNode,
-  QRL,
 } from '@qwik.dev/core/internal';
 import { normalizeName } from './vnode';
 import { htmlContainer } from '../../utils/location';
 import { TreeNode } from './Tree';
 import { QRENDERFN, QTYPE } from '@devtools/kit';
+import { QRLInternal } from '../../features/RenderTree/types';
 
 let index = 0;
 
@@ -65,7 +65,7 @@ function buildTreeRecursive(
           // We skip the QTYPE prop as it's for internal use.
           if (key === QTYPE) return;
 
-          const value = container.getHostProp(currentVNode!, key) as QRL;
+          const value = container.getHostProp(currentVNode!, key) as QRLInternal;
           // Update the underlying VNode props array and the new object's props.
           currentVNode?.setProp(key, value);
           vnodeObject.props![key] = currentVNode?.getAttr(key);
diff --git a/packages/ui/src/features/CodeBreack/HtmlParser.tsx b/packages/ui/src/features/CodeBreack/HtmlParser.tsx
index 11462f0..2aa4788 100644
--- a/packages/ui/src/features/CodeBreack/HtmlParser.tsx
+++ b/packages/ui/src/features/CodeBreack/HtmlParser.tsx
@@ -6,7 +6,7 @@ import {
   useStyles$,
 } from '@qwik.dev/core';
 import { _getDomContainer, _vnode_toString } from '@qwik.dev/core/internal';
-import { createHighlighter } from 'shiki';
+import { getHighlighter } from '../../utils/shiki';
 
 export const HtmlParser = component$(() => {
   useStyles$(`
@@ -73,10 +73,7 @@ export const HtmlParser = component$(() => {
       return;
     }
     if (!shikiRef.value) {
-      shikiRef.value = await createHighlighter({
-        themes: ['nord'],
-        langs: ['html'],
-      });
+      shikiRef.value = await getHighlighter();
     }
     highlightedHtml.value = shikiRef.value.codeToHtml(htmlResult.value, {
       lang: 'html',
@@ -98,7 +95,7 @@ export const HtmlParser = component$(() => {
         <div class="min-h-0 flex-1 flex-col space-y-3 p-3">
           <textarea
             value={inputHtml.value}
-            onInput$={(e, t) =>
+            onInput$={(e: InputEvent, t: HTMLTextAreaElement) =>
               (inputHtml.value = (t as HTMLTextAreaElement).value)
             }
             placeholder="Paste HTML and click to parse/format."
diff --git a/packages/ui/src/features/CodeBreack/StateParser.tsx b/packages/ui/src/features/CodeBreack/StateParser.tsx
index e89e929..3ae1764 100644
--- a/packages/ui/src/features/CodeBreack/StateParser.tsx
+++ b/packages/ui/src/features/CodeBreack/StateParser.tsx
@@ -6,7 +6,7 @@ import {
   useStyles$,
 } from '@qwik.dev/core';
 import { _dumpState, _preprocessState } from '@qwik.dev/core/internal';
-import { createHighlighter } from 'shiki';
+import { getHighlighter } from '../../utils/shiki';
 
 export const StateParser = component$(() => {
   useStyles$(`
@@ -87,10 +87,7 @@ export const StateParser = component$(() => {
       return;
     }
     if (!shikiRef.value) {
-      shikiRef.value = await createHighlighter({
-        themes: ['nord'],
-        langs: ['json'],
-      });
+      shikiRef.value = await getHighlighter();
     }
     highlightedState.value = shikiRef.value.codeToHtml(stateResult.value, {
       lang: 'json',
@@ -112,7 +109,7 @@ export const StateParser = component$(() => {
         <div class="min-h-0 flex-1 flex-col space-y-3 p-3">
           <textarea
             value={inputState.value}
-            onInput$={(e, t) =>
+            onInput$={(e: InputEvent, t: HTMLTextAreaElement) =>
               (inputState.value = (t as HTMLTextAreaElement).value)
             }
             placeholder="Paste Qwik state and click to parse/format."
diff --git a/packages/ui/src/features/RenderTree/HookDataStore.ts b/packages/ui/src/features/RenderTree/HookDataStore.ts
new file mode 100644
index 0000000..fc7ee12
--- /dev/null
+++ b/packages/ui/src/features/RenderTree/HookDataStore.ts
@@ -0,0 +1,290 @@
+import type { TreeNode } from '../../components/Tree/Tree';
+import {
+  CAPTURE_REF_KEY,
+  CHUNK_KEY,
+  COMPUTED_QRL_KEY,
+  QRL_KEY,
+} from '@devtools/kit';
+import type { QRL } from '@qwik.dev/core';
+import {
+  HOOK_TYPES,
+  HIDDEN_HOOKS,
+  QRL_HOOKS,
+  type HookType,
+  type HookFilterItem,
+} from './types';
+import { TreeBuilder } from './TreeBuilder';
+
+/**
+ * Store for managing hook data collected from components.
+ * Replaces the previous module-level global state.
+ */
+export class HookDataStore {
+  private data: Map<HookType, Set<unknown>> = new Map();
+  private visibilityConfig: Map<HookType, boolean> = new Map();
+
+  constructor() {
+    this.initializeStore();
+  }
+
+  private initializeStore(): void {
+    for (const hookType of HOOK_TYPES) {
+      this.data.set(hookType, new Set());
+      this.visibilityConfig.set(hookType, !HIDDEN_HOOKS.includes(hookType));
+    }
+  }
+
+  /**
+   * Add data for a specific hook type
+   */
+  add(type: HookType, entry: unknown): void {
+    const set = this.data.get(type);
+    if (set) {
+      set.add(entry);
+    }
+  }
+
+  /**
+   * Get all entries for a specific hook type
+   */
+  get(type: HookType): unknown[] {
+    return [...(this.data.get(type) ?? [])];
+  }
+
+  /**
+   * Get all data as a plain object
+   */
+  getAll(): Record<HookType, unknown[]> {
+    const result = {} as Record<HookType, unknown[]>;
+    for (const [type, set] of this.data) {
+      result[type] = [...set];
+    }
+    return result;
+  }
+
+  /**
+   * Check if a hook type has any data
+   */
+  has(type: HookType): boolean {
+    return (this.data.get(type)?.size ?? 0) > 0;
+  }
+
+  /**
+   * Clear all stored data
+   */
+  clear(): void {
+    for (const set of this.data.values()) {
+      set.clear();
+    }
+  }
+
+  /**
+   * Set visibility for a hook type
+   */
+  setVisibility(type: HookType, visible: boolean): void {
+    this.visibilityConfig.set(type, visible);
+  }
+
+  /**
+   * Check if a hook type is visible
+   */
+  isVisible(type: HookType): boolean {
+    return this.visibilityConfig.get(type) ?? true;
+  }
+
+  /**
+   * Get filter list for UI
+   */
+  getFilterList(): HookFilterItem[] {
+    return HOOK_TYPES.filter(
+      (type) => this.has(type) && this.isVisible(type),
+    ).map((key) => ({
+      key,
+      display: this.isVisible(key),
+    }));
+  }
+
+  /**
+   * Build tree nodes from stored data
+   */
+  buildTree(): TreeNode[] {
+    const builder = new TreeBuilder();
+    const result: TreeNode[] = [];
+
+    for (const hookType of HOOK_TYPES) {
+      if (!this.has(hookType) || !this.isVisible(hookType)) {
+        continue;
+      }
+
+      const entries = this.get(hookType);
+      const nodes = this.transformEntriesToNodes(hookType, entries, builder);
+
+      if (nodes.length > 0) {
+        result.push(builder.createGroupNode(hookType, nodes));
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Transform entries to tree nodes based on hook type
+   */
+  private transformEntriesToNodes(
+    hookType: HookType,
+    entries: unknown[],
+    builder: TreeBuilder,
+  ): TreeNode[] {
+    return entries
+      .map((entry) => this.transformSingleEntry(hookType, entry, builder))
+      .flat()
+      .filter(Boolean) as TreeNode[];
+  }
+
+  private transformSingleEntry(
+    hookType: HookType,
+    entry: unknown,
+    builder: TreeBuilder,
+  ): TreeNode[] {
+    const typedEntry = entry as Record<string, unknown>;
+
+    switch (hookType) {
+      case 'props':
+      case 'listens':
+      case 'render':
+        return builder.objectToTree(typedEntry.data as Record<string, unknown>);
+
+      case 'useTask':
+      case 'useVisibleTask': {
+        const scopeVars = this.findScopeVariables(typedEntry);
+        return builder.objectToTree({
+          [`let ${typedEntry.variableName ?? hookType} =`]: scopeVars,
+        });
+      }
+
+      case 'customhook': {
+        const captureRef = (typedEntry.data as Record<string, unknown>)?.[
+          CAPTURE_REF_KEY
+        ];
+        return builder.objectToTree({
+          [`let ${typedEntry.variableName ?? 'customhook'} = Scope `]: captureRef,
+        });
+      }
+
+      default:
+        return builder.objectToTree({
+          [`let ${typedEntry.variableName ?? hookType} =`]: typedEntry.data,
+        });
+    }
+  }
+
+  /**
+   * Find scope variables for useTask/useVisibleTask
+   */
+  private findScopeVariables(entry: Record<string, unknown>): string {
+    const targets = (entry.data as Record<string, unknown>)?.[
+      CAPTURE_REF_KEY
+    ] as unknown[] | undefined;
+
+    if (!targets) return 'Scope []';
+
+    const variableNames: string[] = [];
+
+    for (const [, set] of this.data) {
+      for (const storedEntry of set) {
+        const entryData = storedEntry as Record<string, unknown>;
+        const data = entryData?.data ?? entryData;
+        if (!data) continue;
+
+        const match = targets.find((target) => target === data);
+        if (match && entryData.variableName) {
+          variableNames.push(entryData.variableName as string);
+        }
+      }
+    }
+
+    return `Scope [${variableNames.join(', ')}]`;
+  }
+
+  /**
+   * Find all QRL paths for code lookup
+   */
+  findAllQrlPaths(): string[] {
+    const paths: string[] = [];
+
+    for (const hookType of QRL_HOOKS) {
+      const entries = this.get(hookType);
+
+      for (const entry of entries) {
+        const typedEntry = entry as Record<string, unknown>;
+        const extracted = this.extractQrlPath(hookType, typedEntry);
+        if (extracted) {
+          if (Array.isArray(extracted)) {
+            paths.push(...extracted.filter(Boolean));
+          } else {
+            paths.push(extracted);
+          }
+        }
+      }
+    }
+
+    return paths.filter(Boolean);
+  }
+
+  private extractQrlPath(
+    hookType: HookType,
+    entry: Record<string, unknown>,
+  ): string | string[] | null {
+    if (hookType === 'listens') {
+      const data = (entry.data ?? entry) as Record<string, unknown>;
+      return Object.values(data)
+        .map((v) => (v as Record<string, unknown>)?.[CHUNK_KEY] as string)
+        .filter(Boolean);
+    }
+
+    if (hookType === 'render') {
+      const renderFn =
+        (entry.data as Record<string, unknown>)?.render ?? entry;
+      return this.getQrlPath(renderFn as QRL);
+    }
+
+    const data = (entry.data ?? entry) as Record<string, unknown>;
+    const qrlObj = data[QRL_KEY] ?? data[COMPUTED_QRL_KEY];
+    return this.getQrlPath(qrlObj as QRL);
+  }
+
+  private getQrlPath(qrl: QRL | null | undefined): string | null {
+    if (!qrl) return null;
+
+    const qrlAny = qrl as unknown as Record<string, unknown>;
+    if (qrlAny.dev) {
+      return (qrlAny.dev as Record<string, string>).filename;
+    }
+    return qrlAny[CHUNK_KEY] as string | null;
+  }
+}
+
+/**
+ * Get the chunk name from a QRL for component identification
+ */
+export function getQrlChunkName(qrl: QRL): string {
+  const splitPoint = '_component';
+  const qrlAny = qrl as unknown as Record<string, unknown>;
+  const chunk = qrlAny[CHUNK_KEY] as string | undefined;
+  return chunk?.split(splitPoint)?.[0] ?? '';
+}
+
+// Singleton instance for global access (can be replaced with context in the future)
+let storeInstance: HookDataStore | null = null;
+
+export function getHookDataStore(): HookDataStore {
+  if (!storeInstance) {
+    storeInstance = new HookDataStore();
+  }
+  return storeInstance;
+}
+
+export function resetHookDataStore(): void {
+  storeInstance = new HookDataStore();
+}
+
diff --git a/packages/ui/src/features/RenderTree/RenderTree.tsx b/packages/ui/src/features/RenderTree/RenderTree.tsx
index f443a3b..54efd38 100644
--- a/packages/ui/src/features/RenderTree/RenderTree.tsx
+++ b/packages/ui/src/features/RenderTree/RenderTree.tsx
@@ -15,15 +15,7 @@ import { ISDEVTOOL } from '../../components/Tree/type';
 import { removeNodeFromTree } from '../../components/Tree/vnode';
 import { isListen } from '../../utils/type';
 import debug from 'debug';
-import {
-  findAllQrl,
-  formatData,
-  buildTree,
-  clearAll,
-  getHookFilterList,
-  getQrlChunkName,
-} from './formatTreeData';
-import type { QSeqsList } from './formatTreeData';
+import { getHookStore, QrlUtils, type HookType } from './formatTreeData';
 import { unwrapStore } from '@qwik.dev/core/internal';
 import {
   getViteClientRpc,
@@ -32,7 +24,7 @@ import {
   QRENDERFN,
   QSEQ,
 } from '@devtools/kit';
-import { createHighlighter } from 'shiki';
+import { getHighlighter } from '../../utils/shiki';
 import { getQwikState, returnQrlData } from './data';
 import { HiChevronUpMini } from '@qwikest/icons/heroicons';
 
@@ -60,6 +52,7 @@ function getValueColorClass(node: TreeNode, valueText: string): string {
 }
 
 export const RenderTree = component$(() => {
+  const hookStore = useSignal(getHookStore());
   useStyles$(`
     pre.shiki {
       overflow: auto;
@@ -72,7 +65,7 @@ export const RenderTree = component$(() => {
   const data = useSignal<TreeNode[]>([]);
 
   const stateTree = useSignal<TreeNode[]>([]);
-  const hookFilters = useSignal<{ key: QSeqsList; display: boolean }[]>([]);
+  const hookFilters = useSignal<{ key: HookType; display: boolean }[]>([]);
   const hooksOpen = useSignal(true);
 
   const qwikContainer = useComputed$(() => {
@@ -89,10 +82,7 @@ export const RenderTree = component$(() => {
     if (!codes.value.length) {
       return [] as string[];
     }
-    const highlighter = await createHighlighter({
-      themes: ['nord'],
-      langs: ['tsx', 'js', 'ts', 'jsx'],
-    });
+    const highlighter = await getHighlighter();
     return codes.value.map((item) => {
       let lang = 'tsx';
       if (item.pathId.endsWith('.js')) lang = 'js';
@@ -120,27 +110,25 @@ export const RenderTree = component$(() => {
     let parsed: ParsedStructure[] = [];
 
     // reset previous collected hook data before new node aggregation
-    clearAll();
+    hookStore.value.clear();
 
     if (node.props?.[QRENDERFN]) {
-      formatData('render', { data: { render: node.props[QRENDERFN] } });
-      const qrl = getQrlChunkName(node.props[QRENDERFN]);
+      hookStore.value.add('render', { data: { render: node.props[QRENDERFN] } });
+      const qrl = QrlUtils.getChunkName(node.props[QRENDERFN]);
       parsed = getQwikState(qrl);
     }
-    1;
 
     if (Array.isArray(node.props?.[QSEQ]) && parsed.length > 0) {
       const normalizedData = [...parsed, ...returnQrlData(node.props?.[QSEQ])];
-      //@ts-ignore
       normalizedData.forEach((item) => {
-        formatData(item.hookType, item);
+        hookStore.value.add(item.hookType as HookType, item);
       });
     }
 
     if (node.props?.[QPROPS]) {
       const props = unwrapStore(node.props[QPROPS]);
       Object.entries(props).forEach(([key, value]) => {
-        formatData(isListen(key) ? 'listens' : 'props', {
+        hookStore.value.add(isListen(key) ? 'listens' : 'props', {
           data: { [key]: value },
         });
       });
@@ -148,11 +136,11 @@ export const RenderTree = component$(() => {
 
     codes.value = [];
 
-    const res = await rpc?.getModulesByPathIds(findAllQrl());
+    const res = await rpc?.getModulesByPathIds(hookStore.value.findAllQrlPaths());
     log('getModulesByPathIds return: %O', res);
     codes.value = res.filter((item) => item.modules);
-    stateTree.value = buildTree() as TreeNode[];
-    hookFilters.value = getHookFilterList();
+    stateTree.value = hookStore.value.buildTree() as TreeNode[];
+    hookFilters.value = hookStore.value.getFilterList();
   });
 
   const currentTab = useSignal<'state' | 'code'>('state');
@@ -207,7 +195,7 @@ export const RenderTree = component$(() => {
                           item.display = true;
                           return item;
                         });
-                        stateTree.value = buildTree().filter((item) =>
+                        stateTree.value = hookStore.value.buildTree().filter((item) =>
                           hookFilters.value.some(
                             (hook) => hook.key === item?.label && hook.display,
                           ),
@@ -223,7 +211,7 @@ export const RenderTree = component$(() => {
                           item.display = false;
                           return item;
                         });
-                        stateTree.value = buildTree().filter((item) =>
+                        stateTree.value = hookStore.value.buildTree().filter((item) =>
                           hookFilters.value.some(
                             (hook) => hook.key === item?.label && hook.display,
                           ),
@@ -260,10 +248,10 @@ export const RenderTree = component$(() => {
                         style={{ accentColor: 'var(--color-primary-active)' }}
                         type="checkbox"
                         checked={item.display}
-                        onChange$={(ev) => {
+                        onChange$={(ev: InputEvent) => {
                           const target = ev.target as HTMLInputElement;
                           hookFilters.value[idx].display = target.checked;
-                          stateTree.value = buildTree().filter((item) =>
+                          stateTree.value = hookStore.value.buildTree().filter((item) =>
                             hookFilters.value.some(
                               (hook) =>
                                 hook.key === item?.label && hook.display,
@@ -283,7 +271,7 @@ export const RenderTree = component$(() => {
                   animate
                   animationDuration={200}
                   isHover
-                  renderNode={$((node) => {
+                  renderNode={$((node: TreeNode) => {
                     const label = node.label || node.name || '';
                     const parts = label.split(':');
                     if (node.children && parts.length === 1) {
diff --git a/packages/ui/src/features/RenderTree/TreeBuilder.ts b/packages/ui/src/features/RenderTree/TreeBuilder.ts
new file mode 100644
index 0000000..f153519
--- /dev/null
+++ b/packages/ui/src/features/RenderTree/TreeBuilder.ts
@@ -0,0 +1,245 @@
+import type { TreeNode } from '../../components/Tree/Tree';
+import { isValue } from '../../utils/type';
+
+type ElementType =
+  | 'null'
+  | 'boolean'
+  | 'number'
+  | 'string'
+  | 'function'
+  | 'array'
+  | 'object';
+
+/**
+ * Builder class for creating TreeNode structures from objects.
+ * Handles all types of data transformation to tree format.
+ */
+export class TreeBuilder {
+  private idCounter = 0;
+
+  /**
+   * Generate a unique ID for a tree node
+   */
+  private generateId(): string {
+    return `node-${this.idCounter++}`;
+  }
+
+  /**
+   * Reset the ID counter (useful for testing)
+   */
+  resetIdCounter(): void {
+    this.idCounter = 0;
+  }
+
+  /**
+   * Create a group node (parent node with children)
+   */
+  createGroupNode(label: string, children: TreeNode[] = []): TreeNode {
+    return {
+      id: this.generateId(),
+      label,
+      props: {},
+      children,
+    };
+  }
+
+  /**
+   * Convert any object to TreeNode array
+   */
+  objectToTree(obj: unknown, parentPath = ''): TreeNode[] {
+    if (!obj || typeof obj !== 'object') {
+      return [];
+    }
+
+    if (Array.isArray(obj)) {
+      return this.arrayToTree(obj, parentPath);
+    }
+
+    return this.objectPropertiesToTree(obj as Record<string, unknown>, parentPath);
+  }
+
+  /**
+   * Convert array to TreeNode array
+   */
+  private arrayToTree(arr: unknown[], parentPath: string): TreeNode[] {
+    return arr
+      .map((item, index) => {
+        const path = parentPath ? `${parentPath}[${index}]` : `[${index}]`;
+        return this.createNode(item, `[${index}]`, path);
+      })
+      .filter((node): node is TreeNode => node !== null);
+  }
+
+  /**
+   * Convert object properties to TreeNode array
+   */
+  private objectPropertiesToTree(
+    obj: Record<string, unknown>,
+    parentPath: string,
+  ): TreeNode[] {
+    const result: TreeNode[] = [];
+
+    for (const [key, value] of Object.entries(obj)) {
+      const path = parentPath ? `${parentPath}.${key}` : key;
+      const node = this.createNode(value, key, path);
+      if (node) {
+        result.push(node);
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Create a single TreeNode from a value
+   */
+  private createNode(value: unknown, key: string, path: string): TreeNode | null {
+    // Handle null/undefined
+    if (value === null || value === undefined) {
+      return this.createPrimitiveNode(key, value, 'null');
+    }
+
+    // Handle primitives
+    const primitiveNode = this.tryCreatePrimitiveNode(key, value);
+    if (primitiveNode) {
+      return primitiveNode;
+    }
+
+    // Handle arrays
+    if (Array.isArray(value)) {
+      return this.createArrayNode(key, value, path);
+    }
+
+    // Handle objects
+    if (typeof value === 'object') {
+      return this.createObjectNode(key, value as Record<string, unknown>, path);
+    }
+
+    return null;
+  }
+
+  /**
+   * Try to create a primitive node (boolean, number, string, function)
+   */
+  private tryCreatePrimitiveNode(key: string, value: unknown): TreeNode | null {
+    switch (typeof value) {
+      case 'boolean':
+        return this.createPrimitiveNode(key, value, 'boolean');
+      case 'number':
+        return this.createPrimitiveNode(key, value, 'number');
+      case 'string':
+        return this.createPrimitiveNode(key, `"${value}"`, 'string');
+      case 'function':
+        return this.createFunctionNode(key, value as Function);
+      default:
+        return null;
+    }
+  }
+
+  /**
+   * Create a node for primitive values
+   */
+  private createPrimitiveNode(
+    key: string,
+    value: unknown,
+    elementType: ElementType,
+  ): TreeNode {
+    return {
+      id: this.generateId(),
+      label: `${key}: ${value}`,
+      props: {},
+      elementType,
+    };
+  }
+
+  /**
+   * Create a node for function values
+   */
+  private createFunctionNode(key: string, fn: Function): TreeNode {
+    const fnName = fn.name ? `ƒ ${fn.name}()` : 'ƒ()';
+    return {
+      id: this.generateId(),
+      label: `${key}: ${fnName}`,
+      props: {},
+      elementType: 'function',
+    };
+  }
+
+  /**
+   * Create a node for array values
+   */
+  private createArrayNode(key: string, arr: unknown[], path: string): TreeNode {
+    const children = arr
+      .map((item, index) => {
+        const childPath = `${path}[${index}]`;
+        return this.createNode(item, index.toString(), childPath);
+      })
+      .filter((node): node is TreeNode => node !== null);
+
+    return {
+      id: this.generateId(),
+      label: `${key}: Array[${arr.length}]`,
+      props: {},
+      elementType: 'array',
+      children,
+    };
+  }
+
+  /**
+   * Create a node for object values
+   */
+  private createObjectNode(
+    key: string,
+    obj: Record<string, unknown>,
+    path: string,
+  ): TreeNode {
+    const constructorName = obj.constructor?.name;
+    const isPlainObject = constructorName === 'Object';
+
+    if (!isPlainObject) {
+      return this.createClassInstanceNode(key, obj, constructorName);
+    }
+
+    const keys = Object.keys(obj);
+    const children = Object.entries(obj)
+      .map(([childKey, childValue]) => {
+        const childPath = `${path}.${childKey}`;
+        return this.createNode(childValue, childKey, childPath);
+      })
+      .filter((node): node is TreeNode => node !== null);
+
+    return {
+      id: this.generateId(),
+      label: `${key}: Object {${keys.length}}`,
+      props: {},
+      elementType: 'object',
+      children,
+    };
+  }
+
+  /**
+   * Create a node for class instances (non-plain objects)
+   */
+  private createClassInstanceNode(
+    key: string,
+    obj: Record<string, unknown>,
+    className: string,
+  ): TreeNode {
+    const node: TreeNode = {
+      id: this.generateId(),
+      label: `${key}: Class {${className}}`,
+      props: {},
+      elementType: 'object',
+    };
+
+    // Special handling for Signal-like objects with .value property
+    if (isValue(obj)) {
+      node.children = [
+        this.createNode(obj.value, 'value', 'value'),
+      ].filter((n): n is TreeNode => n !== null);
+    }
+
+    return node;
+  }
+}
+
diff --git a/packages/ui/src/features/RenderTree/data.ts b/packages/ui/src/features/RenderTree/data.ts
index 7e82f62..23d1785 100644
--- a/packages/ui/src/features/RenderTree/data.ts
+++ b/packages/ui/src/features/RenderTree/data.ts
@@ -1,10 +1,10 @@
 import {
-  CHUNK_KEY,
   COMPUTED_QRL_KEY,
   INNER_USE_HOOK,
-  ParsedStructure,
   QRL_KEY,
 } from '@devtools/kit';
+import type { ParsedStructure } from '@devtools/kit';
+import type { QRLInternal } from './types';
 
 // Extend Window interface to include QWIK_DEVTOOLS_GLOBAL_STATE
 declare global {
@@ -13,44 +13,77 @@ declare global {
   }
 }
 
-// Q:SEQ has all data that includs hook and state, so we can use it to ingore inner hook and custom hook
-export const findInnerHook = (allSeq: Record<any, any>[]) => {
-  return allSeq.filter(isInnerHook);
-};
+/**
+ * Sequence entry from Qwik's q:seq containing QRL references.
+ * Can have either $qrl$ (for tasks) or $computeQrl$ (for computed).
+ */
+interface QSeqEntry {
+  [QRL_KEY]?: QRLInternal;
+  [COMPUTED_QRL_KEY]?: QRLInternal;
+}
+
+/**
+ * Check if a sequence entry is a user-defined hook (not internal devtools hook)
+ */
+function isUserDefinedHook(seq: QSeqEntry): boolean {
+  const qrl = seq[QRL_KEY] ?? seq[COMPUTED_QRL_KEY];
+  const chunkPath = qrl?.$chunk$ ?? '';
+  return !chunkPath.includes(INNER_USE_HOOK);
+}
 
-const isInnerHook = (seq: Record<any, any>) => {
-  return !(seq[QRL_KEY] || seq[COMPUTED_QRL_KEY])?.[CHUNK_KEY].includes(
-    INNER_USE_HOOK,
+/**
+ * Filter sequence data to only include user-defined hooks
+ * (excludes internal devtools hooks like useCollectHooks)
+ */
+export function filterUserDefinedHooks(allSeq: QSeqEntry[]): QSeqEntry[] {
+  return allSeq.filter(isUserDefinedHook);
+}
+
+/**
+ * Get parsed structure from global devtools state by QRL chunk name
+ */
+export function getQwikState(qrlChunkName: string): ParsedStructure[] {
+  const globalState = window.QWIK_DEVTOOLS_GLOBAL_STATE ?? {};
+  const matchingKey = Object.keys(globalState).find((key) =>
+    key.endsWith(qrlChunkName),
   );
-};
 
-export const getQwikState = (qrl: string) => {
-  const stateKeyPath = Object.keys(
-    window.QWIK_DEVTOOLS_GLOBAL_STATE || {},
-  )?.find((key) => key.endsWith(qrl!));
+  if (!matchingKey) return [];
 
-  return stateKeyPath
-    ? (
-        window.QWIK_DEVTOOLS_GLOBAL_STATE?.[stateKeyPath] as ParsedStructure[]
-      )?.filter((item) => !!item.data) || []
-    : [];
-};
+  const entries = globalState[matchingKey] ?? [];
+  return entries.filter((item) => item.data !== undefined);
+}
 
-export const returnQrlData = (seqs: Record<any, any>) => {
+/**
+ * Determine hook type from QRL chunk path
+ */
+function getHookTypeFromChunk(
+  chunkPath: string,
+): 'useTask' | 'useVisibleTask' {
+  return chunkPath.includes('useTask') ? 'useTask' : 'useVisibleTask';
+}
+
+/**
+ * Transform QRL sequence data to normalized parsed structure format
+ */
+export function transformQrlSequenceData(seqs: QSeqEntry[]): ParsedStructure[] {
   return seqs
-    .filter(isInnerHook)
-    .filter((item: any) => item[QRL_KEY])
-    .map((item: any) => {
+    .filter(isUserDefinedHook)
+    .filter((item) => item[QRL_KEY])
+    .map((item) => {
+      const qrl = item[QRL_KEY]!;
+      const chunkPath = qrl.$chunk$ ?? '';
+      const hookType = getHookTypeFromChunk(chunkPath);
+
       return {
-        category: 'expressionStatement',
-        data: item[QRL_KEY],
-        hookType: item[QRL_KEY]?.[CHUNK_KEY]?.includes('useTask')
-          ? 'useTask'
-          : 'useVisibleTask',
-        returnType: 'undefined',
-        variableName: item[QRL_KEY]?.[CHUNK_KEY]?.includes('useTask')
-          ? 'useTask'
-          : 'useVisibleTask',
+        category: 'expressionStatement' as const,
+        data: qrl,
+        hookType,
+        variableName: hookType,
       };
     });
-};
+}
+
+// Legacy exports for backward compatibility
+export const findInnerHook = filterUserDefinedHooks;
+export const returnQrlData = transformQrlSequenceData;
diff --git a/packages/ui/src/features/RenderTree/formatTreeData.ts b/packages/ui/src/features/RenderTree/formatTreeData.ts
index ca1c164..3117801 100644
--- a/packages/ui/src/features/RenderTree/formatTreeData.ts
+++ b/packages/ui/src/features/RenderTree/formatTreeData.ts
@@ -1,304 +1,316 @@
-import { createTreeNodeObj, objectToTree } from './transfromqseq';
-import { TreeNode } from '../../components/Tree/Tree';
-import { QRL } from '@qwik.dev/core';
+import type { TreeNode } from '../../components/Tree/Tree';
+import type { ParsedStructure } from '@devtools/kit';
+import { CAPTURE_REF_KEY, COMPUTED_QRL_KEY, QRL_KEY } from '@devtools/kit';
+import debug from 'debug';
+import { TreeBuilder } from './TreeBuilder';
 import {
-  CAPTURE_REF_KEY,
-  CHUNK_KEY,
-  COMPUTED_QRL_KEY,
-  ParsedStructure,
-  QRL_KEY,
-} from '@devtools/kit';
-import { debug } from 'debug';
+  HOOK_TYPES,
+  HIDDEN_HOOKS,
+  QRL_HOOKS,
+  type HookType,
+  type HookFilterItem,
+  type QRLInternal,
+} from './types';
 
 const log = debug('qwik:devtools:renderTree');
 
-const schedule = (value: any) => {
-  return objectToTree(value);
-};
-
-export type QSeqsList = keyof typeof qSeqs;
-
-const qSeqs = {
-  props: {
-    set: new Set<Record<string, any>>(),
-    toTree: schedule,
-    display: true,
-  },
-  listens: {
-    set: new Set<Record<string, any>>(),
-    toTree: schedule,
-    display: true,
-  },
-  useStore: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  useSignal: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  useContext: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  useId: { set: new Set<ParsedStructure>(), toTree: schedule, display: true },
-  useStyles: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  useStylesScoped: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  useConstant: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  useTask: { set: new Set<ParsedStructure>(), toTree: schedule, display: true },
-  useVisibleTask: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  useComputed: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  useAsyncComputed: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  useErrorBoundary: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  useServerData: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  useSerializer: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  useResource: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: false,
-  },
-  useContextProvider: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  render: {
-    set: new Set<Record<string, any>>(),
-    toTree: schedule,
-    display: false,
-  },
-  useLocation: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  useNavigate: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  usePreventNavigate: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: false,
-  },
-  useContent: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  useDocumentHead: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-  customhook: {
-    set: new Set<ParsedStructure>(),
-    toTree: schedule,
-    display: true,
-  },
-};
-
-type DataType = keyof typeof qSeqs;
-
-export function formatData(
-  type: 'props' | 'listens' | 'render',
-  data: Record<string, any>,
-): void;
-export function formatData(
-  type: Exclude<DataType, 'props' | 'listens' | 'render'>,
-  data: ParsedStructure,
-): void;
-export function formatData(
-  type: DataType,
-  data: ParsedStructure | Record<string, any>,
-) {
-  qSeqs[type].set.add(data as any);
-}
+// ============================================================================
+// HookStore Class
+// ============================================================================
 
-export function getData() {
-  return Object.entries(qSeqs)
-    .map(([name, { set, toTree, display }]) => {
-      const arr = [...set]
-        .map((item) => {
-          if (name === 'props' || name === 'listens' || name === 'render') {
-            return toTree((item as any).data);
-          } else if (name === 'useTask' || name === 'useVisibleTask') {
-            return toTree({
-              [`let ${(item as any)?.variableName} =`]: findMatchVarfromScope(
-                item as ParsedStructure,
-              ),
-            });
-          } else if (name === 'customhook') {
-            return toTree({
-              [`let ${(item as any)?.variableName} = Scope `]: (item as any)
-                .data[CAPTURE_REF_KEY],
-            });
-          } else {
-            return toTree({
-              [`let ${(item as any)?.variableName} =`]: (item as any).data,
-            });
-          }
-        })
-        .flat();
-      if (display === false) return null;
-      return arr.length > 0 ? createTreeNodeObj(name, arr as TreeNode[]) : null;
-    })
-    .filter(Boolean);
+interface HookStoreEntry {
+  set: Set<unknown>;
+  visible: boolean;
 }
 
-export function findMatchVarfromScope(item: ParsedStructure) {
-  const targets = (item as any)?.data[CAPTURE_REF_KEY];
-  const variableName: string[] = [];
-  if (!targets) return [];
-
-  for (const { set } of Object.values(qSeqs) as Array<{ set: Set<any> }>) {
-    for (const entry of set as Set<any>) {
-      const data = (entry as any)?.data ?? entry;
-      if (!data) continue;
-      const varName = targets.find((target: any) => target === data);
-      varName && variableName.push(entry?.variableName);
+/**
+ * Manages hook data storage and tree building for the devtools.
+ */
+export class HookStore {
+  private store: Record<HookType, HookStoreEntry>;
+  private treeBuilder: TreeBuilder;
+
+  constructor() {
+    this.store = this.createStore();
+    this.treeBuilder = new TreeBuilder();
+  }
+
+  private createStore(): Record<HookType, HookStoreEntry> {
+    const store = {} as Record<HookType, HookStoreEntry>;
+    for (const hookType of HOOK_TYPES) {
+      store[hookType] = {
+        set: new Set(),
+        visible: !HIDDEN_HOOKS.includes(hookType),
+      };
     }
+    return store;
   }
 
-  return `Scope [${variableName.join(', ')}]`;
-}
+  // ==========================================================================
+  // Data Management
+  // ==========================================================================
 
-// Build tree nodes without mutating sets. Useful for UI re-filtering after data collected
-export function buildTree() {
-  return getData();
-}
+  /**
+   * Add data to the store for a specific hook type
+   */
+  add(type: HookType, data: ParsedStructure | { data: Record<string, unknown> }): void {
+    this.store[type].set.add(data);
+  }
 
-// Clear all stored hook data
-export function clearAll() {
-  for (const key of Object.keys(qSeqs) as Array<keyof typeof qSeqs>) {
-    qSeqs[key].set.clear();
+  /**
+   * Clear all stored hook data
+   */
+  clear(): void {
+    for (const entry of Object.values(this.store)) {
+      entry.set.clear();
+    }
+  }
+
+  /**
+   * Reset the entire store
+   */
+  reset(): void {
+    this.store = this.createStore();
+  }
+
+  /**
+   * Get entries for a specific hook type
+   */
+  getEntries(type: HookType): unknown[] {
+    return [...this.store[type].set];
   }
-}
 
-// Get filter list for UI
-export function getHookFilterList() {
-  return (Object.keys(qSeqs) as Array<keyof typeof qSeqs>)
-    .filter((usename) => qSeqs[usename].set.size > 0 && qSeqs[usename].display)
-    .map((key) => ({
+  /**
+   * Check if a hook type has entries
+   */
+  hasEntries(type: HookType): boolean {
+    return this.store[type].set.size > 0;
+  }
+
+  // ==========================================================================
+  // Visibility Management
+  // ==========================================================================
+
+  /**
+   * Set visibility for a hook type
+   */
+  setVisibility(type: HookType, visible: boolean): void {
+    this.store[type].visible = visible;
+  }
+
+  /**
+   * Check if a hook type is visible
+   */
+  isVisible(type: HookType): boolean {
+    return this.store[type].visible;
+  }
+
+  /**
+   * Get filter list for UI
+   */
+  getFilterList(): HookFilterItem[] {
+    return HOOK_TYPES.filter(
+      (type) => this.hasEntries(type) && this.isVisible(type),
+    ).map((key) => ({
       key,
-      display: qSeqs[key].display,
+      display: this.store[key].visible,
     }));
-}
+  }
 
-// Update multiple hook display flags at once
-export function updateHookDisplays(
-  map: Partial<Record<keyof typeof qSeqs, boolean>>,
-) {
-  for (const [k, v] of Object.entries(map)) {
-    if (typeof v === 'boolean') {
-      // @ts-ignore
-      qSeqs[k as keyof typeof qSeqs].display = v;
+  // ==========================================================================
+  // Tree Building
+  // ==========================================================================
+
+  /**
+   * Build tree nodes from all stored hook data
+   */
+  buildTree(): TreeNode[] {
+    const result: TreeNode[] = [];
+
+    for (const hookType of HOOK_TYPES) {
+      if (!this.hasEntries(hookType) || !this.isVisible(hookType)) continue;
+
+      const nodes = this.transformEntries(hookType);
+      if (nodes.length > 0) {
+        result.push(this.treeBuilder.createGroupNode(hookType, nodes));
+      }
     }
+
+    return result;
   }
-}
 
-function getRawDataObj() {
-  const result: Record<string, any[]> = {};
-  for (const [name, { set }] of Object.entries(qSeqs)) {
-    result[name] = [...set];
+  private transformEntries(hookType: HookType): TreeNode[] {
+    const entries = this.getEntries(hookType);
+    return entries.map((entry) => this.transformEntry(hookType, entry)).flat();
   }
-  return result;
-}
 
-export function findAllQrl() {
-  const list: Array<keyof typeof qSeqs> = [
-    'useTask',
-    'useVisibleTask',
-    'useComputed',
-    'useAsyncComputed',
-    'useServerData',
-    'useSerializer',
-    'render',
-    'listens',
-  ];
-
-  const rawData = getRawDataObj();
-
-  const result = list.map((item) => {
-    return rawData[item].map((entry) => {
-      if (item === 'listens') {
-        return Object.values(entry.data || entry).map(
-          (v: any) => v?.[CHUNK_KEY],
+  private transformEntry(hookType: HookType, entry: unknown): TreeNode[] {
+    const typedEntry = entry as Record<string, unknown>;
+
+    switch (hookType) {
+      case 'props':
+      case 'listens':
+      case 'render':
+        return this.treeBuilder.objectToTree(
+          typedEntry.data as Record<string, unknown>,
         );
-      } else if (item === 'render') {
-        return getQrlPath(entry.data.render || entry);
-      } else {
-        const qrlObj =
-          (entry.data || entry)[QRL_KEY] ||
-          (entry.data || entry)[COMPUTED_QRL_KEY];
-        return getQrlPath(qrlObj);
+
+      case 'useTask':
+      case 'useVisibleTask': {
+        const scopeVars = this.findScopeVariables(typedEntry);
+        return this.treeBuilder.objectToTree({
+          [`let ${typedEntry.variableName ?? hookType} =`]: scopeVars,
+        });
       }
-    });
-  });
-  log('findAllQrl function return: %O', result.flat(2).filter(Boolean));
-  return result.flat(2).filter(Boolean);
-}
 
-export function getQrlPath(qrl: QRL) {
-  // CHUNK_KEY is not available when dev property isn't null or undefined
-  if (qrl?.dev) {
-    // @ts-ignore
-    return qrl?.dev.filename;
+      case 'customhook': {
+        const captureRef = (typedEntry.data as Record<string, unknown>)?.[
+          CAPTURE_REF_KEY
+        ];
+        return this.treeBuilder.objectToTree({
+          [`let ${typedEntry.variableName ?? 'customhook'} = Scope `]: captureRef,
+        });
+      }
+
+      default:
+        return this.treeBuilder.objectToTree({
+          [`let ${typedEntry.variableName ?? hookType} =`]: typedEntry.data,
+        });
+    }
+  }
+
+  findScopeVariables(item: Record<string, unknown>): string {
+    const targets = (item.data as Record<string, unknown>)?.[
+      CAPTURE_REF_KEY
+    ] as unknown[] | undefined;
+
+    if (!targets) return 'Scope []';
+
+    const variableNames: string[] = [];
+
+    for (const entry of Object.values(this.store)) {
+      for (const storedEntry of entry.set) {
+        const entryData = storedEntry as Record<string, unknown>;
+        const data = entryData?.data ?? entryData;
+        if (!data) continue;
+
+        const match = targets.find((target) => target === data);
+        if (match && entryData.variableName) {
+          variableNames.push(entryData.variableName as string);
+        }
+      }
+    }
+
+    return `Scope [${variableNames.join(', ')}]`;
+  }
+
+  // ==========================================================================
+  // QRL Path Utilities
+  // ==========================================================================
+
+  /**
+   * Find all QRL paths for code lookup
+   */
+  findAllQrlPaths(): string[] {
+    const paths: string[] = [];
+
+    for (const hookType of QRL_HOOKS) {
+      const entries = this.getEntries(hookType);
+
+      for (const entry of entries) {
+        const extracted = this.extractQrlPath(
+          hookType,
+          entry as Record<string, unknown>,
+        );
+
+        if (extracted) {
+          if (Array.isArray(extracted)) {
+            paths.push(...extracted.filter(Boolean));
+          } else {
+            paths.push(extracted);
+          }
+        }
+      }
+    }
+
+    log('findAllQrlPaths return: %O', paths);
+    return paths.filter(Boolean);
+  }
+
+  private extractQrlPath(
+    hookType: HookType,
+    entry: Record<string, unknown>,
+  ): string | string[] | null {
+    if (hookType === 'listens') {
+      const data = (entry.data ?? entry) as Record<string, unknown>;
+      return Object.values(data)
+        .map((v) => (v as QRLInternal)?.$chunk$)
+        .filter((v): v is string => typeof v === 'string');
+    }
+
+    if (hookType === 'render') {
+      const renderFn = (entry.data as Record<string, unknown>)?.render ?? entry;
+      return QrlUtils.getPath(renderFn as QRLInternal);
+    }
+
+    const data = (entry.data ?? entry) as Record<string, unknown>;
+    const qrlObj = data[QRL_KEY] ?? data[COMPUTED_QRL_KEY];
+    return QrlUtils.getPath(qrlObj as QRLInternal);
   }
-  return (qrl as any)?.[CHUNK_KEY];
 }
 
-export function getQrlChunkName(qrl: QRL): string {
-  const splitPoint = '_component';
-  return (qrl as any)?.[CHUNK_KEY]?.split(splitPoint)?.[0];
+// ============================================================================
+// QRL Utilities (Static)
+// ============================================================================
+
+/**
+ * Static utilities for working with QRL objects
+ */
+export class QrlUtils {
+  /**
+   * Get the file path from a QRL object.
+   * In dev mode, uses dev.file; in production, uses $chunk$.
+   */
+  static getPath(qrl: QRLInternal | null | undefined): string | null {
+    if (!qrl) return null;
+    if (qrl.dev) return qrl.dev.file;
+    return qrl.$chunk$;
+  }
+
+  /**
+   * Get the chunk name from a QRL for component identification
+   */
+  static getChunkName(qrl: QRLInternal): string {
+    const splitPoint = '_component';
+    const chunk = qrl.$chunk$;
+    return chunk?.split(splitPoint)?.[0] ?? '';
+  }
+
+  /**
+   * Normalize raw qseq data with parsed structure metadata
+   */
+  static normalizeData(
+    qseq: Record<string, unknown>[],
+    parsed: ParsedStructure[],
+  ): ParsedStructure[] {
+    return qseq.map((item, index) => ({
+      data: item,
+      ...parsed[index],
+    }));
+  }
 }
 
-export function normalizeData(
-  qseq: Record<string, any>[],
-  parsed: ParsedStructure[],
-): ParsedStructure[] {
-  return qseq.map((item, index) => ({
-    data: item,
-    ...parsed[index],
-  }));
+// ============================================================================
+// Singleton Instance
+// ============================================================================
+
+/** Global hook store instance */
+const hookStore = new HookStore();
+
+/** Get the global hook store instance */
+export function getHookStore(): HookStore {
+  return hookStore;
 }
+
+// Re-export HookType for convenience
+export type { HookType };
diff --git a/packages/ui/src/features/RenderTree/index.ts b/packages/ui/src/features/RenderTree/index.ts
new file mode 100644
index 0000000..eea114d
--- /dev/null
+++ b/packages/ui/src/features/RenderTree/index.ts
@@ -0,0 +1,45 @@
+// Main component
+export { RenderTree } from './RenderTree';
+
+// Types
+export type {
+  HookType,
+  HookCategory,
+  HookConfig,
+  HookEntry,
+  HookFilterItem,
+  HookTreeResult,
+  QRLDev,
+  QRLInternalMethods,
+  QRLInternal,
+} from './types';
+export {
+  HOOK_TYPES,
+  HOOK_CATEGORIES,
+  HIDDEN_HOOKS,
+  QRL_HOOKS,
+  asQRLInternal,
+  isQRLInternal,
+} from './types';
+
+// Data store
+export {
+  HookDataStore,
+  getHookDataStore,
+  resetHookDataStore,
+  getQrlChunkName,
+} from './HookDataStore';
+
+// Tree builder
+export { TreeBuilder } from './TreeBuilder';
+
+// Data utilities
+export {
+  getQwikState,
+  filterUserDefinedHooks,
+  transformQrlSequenceData,
+} from './data';
+
+// Hook store (class-based API)
+export { HookStore, QrlUtils, getHookStore } from './formatTreeData';
+
diff --git a/packages/ui/src/features/RenderTree/transfromqseq.ts b/packages/ui/src/features/RenderTree/transfromqseq.ts
index 11fc28e..399aa1a 100644
--- a/packages/ui/src/features/RenderTree/transfromqseq.ts
+++ b/packages/ui/src/features/RenderTree/transfromqseq.ts
@@ -1,136 +1,34 @@
-import { TreeNode } from '../../components/Tree/Tree';
-import { isValue } from '../../utils/type';
+import type { TreeNode } from '../../components/Tree/Tree';
+import { TreeBuilder } from './TreeBuilder';
 
-let nodeIdCounter = 0;
+/**
+ * Shared TreeBuilder instance for backward compatibility
+ */
+const builder = new TreeBuilder();
 
 /**
  * Convert object to TreeNode array
- * Special handling for Qwik's q:seq and other special properties
+ * @deprecated Use TreeBuilder.objectToTree() directly instead
  */
-export const objectToTree = (obj: any, parentPath: string = ''): TreeNode[] => {
-  if (!obj || typeof obj !== 'object') {
-    return [];
-  }
-
-  const result: TreeNode[] = [];
-
-  // If it's an array
-  if (Array.isArray(obj)) {
-    return obj
-      .map((item, index) => {
-        const path = parentPath ? `${parentPath}[${index}]` : `[${index}]`;
-        return createTreeNode(item, `[${index}]`, path);
-      })
-      .filter(Boolean) as TreeNode[];
-  }
-
-  // If it's an object
-  Object.entries(obj).forEach(([key, value]) => {
-    const path = parentPath ? `${parentPath}.${key}` : key;
-    const node = createTreeNode(value, key, path);
-    if (node) {
-      result.push(node);
-    }
-  });
-
-  return result;
+export const objectToTree = (obj: unknown, parentPath = ''): TreeNode[] => {
+  return builder.objectToTree(obj, parentPath);
 };
 
 /**
- * Create a single TreeNode
+ * Create a group TreeNode with label and children
+ * @deprecated Use TreeBuilder.createGroupNode() directly instead
  */
-function createTreeNode(
-  value: any,
-  key: string,
-  path: string,
-): TreeNode | null {
-  const node: TreeNode = createTreeNodeObj(key);
-  // Handle null or undefined
-  if (value === null || value === undefined) {
-    node.label = `${key}: ${value}`;
-    node.elementType = 'null';
-    return node;
-  }
-
-  // Handle primitive types
-  if (typeof value === 'boolean') {
-    node.label = `${key}: ${value}`;
-    node.elementType = 'boolean';
-    return node;
-  }
-
-  if (typeof value === 'number') {
-    node.label = `${key}: ${value}`;
-    node.elementType = 'number';
-    return node;
-  }
-
-  if (typeof value === 'string') {
-    node.label = `${key}: "${value}"`;
-    node.elementType = 'string';
-    return node;
-  }
-
-  if (typeof value === 'function') {
-    node.label = `${key}: ƒ()`;
-    node.elementType = 'function';
-    // Try to get function name
-    if (value.name) {
-      node.label = `${key}: ƒ ${value.name}()`;
-    }
-    return node;
-  }
-
-  // Handle arrays
-  if (Array.isArray(value)) {
-    node.label = `${key}: Array[${value.length}]`;
-    node.elementType = 'array';
-    node.children = value
-      .map((item, index) => {
-        const childPath = `${path}[${index}]`;
-        return createTreeNode(item, index.toString(), childPath);
-      })
-      .filter(Boolean) as TreeNode[];
-    return node;
-  }
-
-  // Handle objects
-  if (typeof value === 'object') {
-    if (value.constructor.name !== 'Object') {
-      node.label = `${key}: Class {${value.constructor.name}}`;
-      node.elementType = 'object';
-      if (isValue(value)) {
-        node.children = [
-          createTreeNode(value.value, 'value', 'value'),
-        ] as TreeNode[];
-      }
-    } else {
-      const keys = Object.keys(value);
-      node.label = `${key}: Object {${keys.length}}`;
-      node.elementType = 'object';
-
-      // Recursively process child properties
-      node.children = Object.entries(value)
-        .map(([childKey, childValue]) => {
-          const childPath = `${path}.${childKey}`;
-          return createTreeNode(childValue, childKey, childPath);
-        })
-        .filter(Boolean) as TreeNode[];
-    }
-    return node;
-  }
-
-  return null;
-}
-
 export const createTreeNodeObj = (
   label: string,
   children: TreeNode[] = [],
 ): TreeNode => {
-  return {
-    id: `node-${nodeIdCounter++}`,
-    label,
-    props: {},
-    children,
-  };
+  return builder.createGroupNode(label, children);
+};
+
+/**
+ * Reset the internal ID counter
+ * Useful for testing to get deterministic IDs
+ */
+export const resetIdCounter = (): void => {
+  builder.resetIdCounter();
 };
diff --git a/packages/ui/src/features/RenderTree/types.ts b/packages/ui/src/features/RenderTree/types.ts
new file mode 100644
index 0000000..4c26c47
--- /dev/null
+++ b/packages/ui/src/features/RenderTree/types.ts
@@ -0,0 +1,216 @@
+import type { TreeNode } from '../../components/Tree/Tree';
+import type { ParsedStructure } from '@devtools/kit';
+import type { QRL } from '@qwik.dev/core';
+// ============================================================================
+// Hook Type Definitions
+// ============================================================================
+
+export const HOOK_CATEGORIES = {
+  VARIABLE_DECLARATION: 'variableDeclaration',
+  EXPRESSION_STATEMENT: 'expressionStatement',
+  SPECIAL: 'special',
+} as const;
+
+export type HookCategory = (typeof HOOK_CATEGORIES)[keyof typeof HOOK_CATEGORIES];
+
+/**
+ * All supported hook types in the devtools
+ */
+export const HOOK_TYPES = [
+  // Variable declaration hooks
+  'useStore',
+  'useSignal',
+  'useContext',
+  'useId',
+  'useStyles',
+  'useStylesScoped',
+  'useConstant',
+  'useComputed',
+  'useAsyncComputed',
+  'useErrorBoundary',
+  'useServerData',
+  'useSerializer',
+  'useLocation',
+  'useNavigate',
+  'useContent',
+  'useDocumentHead',
+  // Expression statement hooks
+  'useTask',
+  'useVisibleTask',
+  'useResource',
+  'useContextProvider',
+  'usePreventNavigate',
+  // Special types
+  'props',
+  'listens',
+  'render',
+  'customhook',
+] as const;
+
+export type HookType = (typeof HOOK_TYPES)[number];
+
+/**
+ * Hooks that should be hidden from the filter list by default
+ */
+export const HIDDEN_HOOKS: readonly HookType[] = [
+  'useResource',
+  'usePreventNavigate',
+  'render',
+] as const;
+
+/**
+ * Hooks that contain QRL references (used for code lookup)
+ */
+export const QRL_HOOKS: readonly HookType[] = [
+  'useTask',
+  'useVisibleTask',
+  'useComputed',
+  'useAsyncComputed',
+  'useServerData',
+  'useSerializer',
+  'render',
+  'listens',
+] as const;
+
+// ============================================================================
+// QRL Internal Types
+// ============================================================================
+
+/**
+ * QRLDev contains development metadata.
+ * Exists in @qwik.dev/core but not exported as a type.
+ *
+ * @internal Runtime type from Qwik
+ */
+export interface QRLDev {
+  file: string;
+  lo: number;
+  hi: number;
+}
+
+/**
+ * Internal QRL properties that exist at runtime.
+ * These are part of `QRLInternalMethods` in @qwik.dev/core but NOT exported.
+ *
+ * @see QRLInternalMethods in @qwik.dev/core/dist/core-internal.d.ts (line 2240)
+ * @internal Runtime type from Qwik
+ */
+export interface QRLInternalMethods {
+  readonly $chunk$: string | null;
+  readonly $symbol$: string;
+  readonly $hash$: string;
+  $capture$: string[] | null;
+  $captureRef$: unknown[] | null;
+}
+
+/**
+ * QRL with internal properties accessible.
+ * Combines public QRL type with internal runtime properties.
+ *
+ * Note: `QRLInternal<T>` exists in Qwik but is NOT exported.
+ * We define our own to access `$chunk$` and `$captureRef$`.
+ */
+export type QRLInternal<T = unknown> = QRL<T> & QRLInternalMethods;
+
+// ============================================================================
+// Data Structure Types
+// ============================================================================
+
+/**
+ * Configuration for a hook type in the store
+ */
+export interface HookConfig {
+  /** Whether this hook type is visible in the UI filter */
+  visible: boolean;
+  /** Category of the hook for special handling */
+  category: HookCategory;
+}
+
+/**
+ * Entry stored in the hook data store
+ */
+export interface HookEntry<T = unknown> {
+  type: HookType;
+  data: T;
+  variableName?: string;
+  category?: string;
+}
+
+/**
+ * Props/Listens/Render entry (simple key-value)
+ */
+export interface SimpleHookEntry {
+  data: Record<string, unknown>;
+}
+
+/**
+ * Parsed hook entry with full metadata
+ */
+export interface ParsedHookEntry extends ParsedStructure {
+  data: unknown;
+}
+
+// ============================================================================
+// Tree Building Types
+// ============================================================================
+
+/**
+ * Options for tree node generation
+ */
+export interface TreeNodeOptions {
+  resetIdCounter?: boolean;
+}
+
+/**
+ * Result of building hook tree data
+ */
+export interface HookTreeResult {
+  nodes: TreeNode[];
+  filters: HookFilterItem[];
+}
+
+/**
+ * Filter item for the UI
+ */
+export interface HookFilterItem {
+  key: HookType;
+  display: boolean;
+}
+
+// ============================================================================
+// Utility Types & Type Guards
+// ============================================================================
+
+export function isSimpleHookEntry(entry: unknown): entry is SimpleHookEntry {
+  return (
+    typeof entry === 'object' &&
+    entry !== null &&
+    'data' in entry &&
+    typeof (entry as SimpleHookEntry).data === 'object'
+  );
+}
+
+export function isParsedHookEntry(entry: unknown): entry is ParsedHookEntry {
+  return (
+    typeof entry === 'object' &&
+    entry !== null &&
+    'hookType' in entry &&
+    'variableName' in entry
+  );
+}
+
+/**
+ * Type guard to check if a QRL has internal properties accessible
+ */
+export function isQRLInternal(qrl: unknown): qrl is QRLInternal {
+  if (typeof qrl !== 'object' || qrl === null) return false;
+  return '$chunk$' in qrl || '$symbol$' in qrl;
+}
+
+/**
+ * Safely cast QRL to QRLInternal for accessing internal properties.
+ * Use this instead of `as unknown as Record<string, unknown>`.
+ */
+export function asQRLInternal<T>(qrl: QRL<T>): QRLInternal<T> {
+  return qrl as QRLInternal<T>;
+}
diff --git a/packages/ui/src/utils/shiki.ts b/packages/ui/src/utils/shiki.ts
new file mode 100644
index 0000000..d099189
--- /dev/null
+++ b/packages/ui/src/utils/shiki.ts
@@ -0,0 +1,14 @@
+import { createHighlighter, type Highlighter } from 'shiki';
+
+let highlighterPromise: Promise<Highlighter> | null = null;
+
+export const getHighlighter = () => {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: ['nord'],
+      langs: ['json', 'html', 'tsx', 'js', 'ts', 'jsx'],
+    });
+  }
+  return highlighterPromise;
+};
+
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index da9f4df..6bd88d7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,11 +39,11 @@ importers:
   packages/devtools:
     dependencies:
       '@qwik.dev/core':
-        specifier: 2.0.0-beta.11
-        version: 2.0.0-beta.11(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)
+        specifier: 2.0.0-beta.15
+        version: 2.0.0-beta.15(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)
       '@qwik.dev/router':
-        specifier: 2.0.0-beta.11
-        version: 2.0.0-beta.11(@qwik.dev/core@2.0.0-beta.11(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4))(acorn@8.14.0)(rollup@4.52.4)(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))
+        specifier: 2.0.0-beta.15
+        version: 2.0.0-beta.15(@qwik.dev/core@2.0.0-beta.15(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4))(rollup@4.52.4)(typescript@5.9.2)(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))
       '@qwikest/icons':
         specifier: ^0.0.13
         version: 0.0.13(@builder.io/qwik@1.11.0(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1)))
@@ -128,8 +128,8 @@ importers:
         specifier: 8.57.0
         version: 8.57.0
       eslint-plugin-qwik:
-        specifier: 2.0.0-beta.11
-        version: 2.0.0-beta.11(eslint@8.57.0)(typescript@5.4.5)
+        specifier: 2.0.0-beta.15
+        version: 2.0.0-beta.15(eslint@8.57.0)(typescript@5.4.5)
       np:
         specifier: ^8.0.4
         version: 8.0.4(typescript@5.4.5)
@@ -152,11 +152,11 @@ importers:
         specifier: workspace:*
         version: link:../ui
       '@qwik.dev/core':
-        specifier: 2.0.0-beta.11
-        version: 2.0.0-beta.11(prettier@3.3.3)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)
+        specifier: 2.0.0-beta.15
+        version: 2.0.0-beta.15(prettier@3.3.3)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)
       '@qwik.dev/router':
-        specifier: 2.0.0-beta.11
-        version: 2.0.0-beta.11(@qwik.dev/core@2.0.0-beta.11(prettier@3.3.3)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4))(acorn@8.14.0)(rollup@4.52.4)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))
+        specifier: 2.0.0-beta.15
+        version: 2.0.0-beta.15(@qwik.dev/core@2.0.0-beta.15(prettier@3.3.3)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4))(rollup@4.52.4)(typescript@5.4.5)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))
       '@types/eslint':
         specifier: 8.56.10
         version: 8.56.10
@@ -173,8 +173,8 @@ importers:
         specifier: 8.57.0
         version: 8.57.0
       eslint-plugin-qwik:
-        specifier: 2.0.0-beta.11
-        version: 2.0.0-beta.11(eslint@8.57.0)(typescript@5.4.5)
+        specifier: 2.0.0-beta.15
+        version: 2.0.0-beta.15(eslint@8.57.0)(typescript@5.4.5)
       prettier:
         specifier: 3.3.3
         version: 3.3.3
@@ -201,8 +201,8 @@ importers:
         specifier: workspace:*
         version: link:../kit
       '@qwik.dev/core':
-        specifier: 2.0.0-beta.11
-        version: 2.0.0-beta.11(prettier@3.3.3)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)
+        specifier: 2.0.0-beta.15
+        version: 2.0.0-beta.15(prettier@3.3.3)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)
       '@types/eslint':
         specifier: 8.56.10
         version: 8.56.10
@@ -255,8 +255,8 @@ importers:
         specifier: workspace:*
         version: link:../plugin
       '@qwik.dev/core':
-        specifier: 2.0.0-beta.11
-        version: 2.0.0-beta.11(prettier@3.3.3)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)
+        specifier: 2.0.0-beta.15
+        version: 2.0.0-beta.15(prettier@3.3.3)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)
       '@tailwindcss/postcss':
         specifier: ^4.1.14
         version: 4.1.14
@@ -307,8 +307,8 @@ importers:
         specifier: 8.57.0
         version: 8.57.0
       eslint-plugin-qwik:
-        specifier: 2.0.0-alpha.9
-        version: 2.0.0-alpha.9(eslint@8.57.0)(typescript@5.4.5)
+        specifier: 2.0.0-beta.15
+        version: 2.0.0-beta.15(eslint@8.57.0)(typescript@5.4.5)
       nodemon:
         specifier: ^3.1.9
         version: 3.1.9
@@ -1128,8 +1128,8 @@ packages:
   '@manypkg/get-packages@1.1.3':
     resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
 
-  '@mdx-js/mdx@3.1.0':
-    resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==}
+  '@mdx-js/mdx@3.1.1':
+    resolution: {integrity: sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==}
 
   '@napi-rs/wasm-runtime@0.2.9':
     resolution: {integrity: sha512-OKRBiajrrxB9ATokgEQoG87Z25c67pCpYcCwmXYX8PBftC9pBfN18gnm/fh1wurSLEKIAt+QRFLFCQISrb66Jg==}
@@ -1469,8 +1469,8 @@ packages:
     resolution: {integrity: sha512-ezIadUb1aFhwJLd++WVqVpi9rnlX8vnd4ju7saPhwLHJN1mJgOv0puePTGV+FbtSnWtwoHDT8lAm4kagDZmpCg==}
     engines: {node: '>=20.0.0'}
 
-  '@qwik.dev/core@2.0.0-beta.11':
-    resolution: {integrity: sha512-D2RT/LKln2/2QgkTpeDkXjpX7mCUGYFXHT0W04JlpNDBiJ1vj4jfcTZqcauFWnSS+TwOE6u22Mz4HbvxiFMyTQ==}
+  '@qwik.dev/core@2.0.0-beta.15':
+    resolution: {integrity: sha512-g7gS4niobIf9IypAIMfYGM8Hd+V2nCr5gD1JCyCduO5+UJvoXCXT0CDkFZ1oWVdHnl+S6YutaGK9/OPi5zHpiw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     hasBin: true
     peerDependencies:
@@ -1483,11 +1483,11 @@ packages:
       vitest:
         optional: true
 
-  '@qwik.dev/router@2.0.0-beta.11':
-    resolution: {integrity: sha512-YwvE1laJpaV4T65ncL1dZOJCNH0P5WyajQFfx3b5/idvQ/anXuS5CichyCCAv0SRFYUjKGHCnBuQIChzWYESXQ==}
+  '@qwik.dev/router@2.0.0-beta.15':
+    resolution: {integrity: sha512-8xLq4GlvcD9hW2loeO8SMfzEef1e+tUO/76YJN1xFZ1lBOjvlMt/kAj1DqdEDiZVhufPGmDwMrY5tvHQlh0AXw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     peerDependencies:
-      '@qwik.dev/core': ^2.0.0-beta.11
+      '@qwik.dev/core': ^2.0.0-beta.15
       vite: '>=5 <8'
 
   '@qwikest/icons@0.0.13':
@@ -1921,6 +1921,9 @@ packages:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
 
+  '@ts-morph/common@0.24.0':
+    resolution: {integrity: sha512-c1xMmNHWpNselmpIqursHeOHHBTIsJLbB+NuovbTTRCNiTLEr/U9dbJ8qy0jd/O2x5pc3seWuOUN5R2IoOTp8A==}
+
   '@tybys/wasm-util@0.10.0':
     resolution: {integrity: sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==}
 
@@ -2047,10 +2050,6 @@ packages:
     resolution: {integrity: sha512-nYpyv6ALte18gbMz323RM+vpFpTjfNdyakbf3nsLvF43uF9KeNC289SUEW3QLZ1xPtyINJ1dIsZOuWuSRIWygw==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/scope-manager@8.18.1':
-    resolution: {integrity: sha512-HxfHo2b090M5s2+/9Z3gkBhI6xBH8OJCFjH9MhQ+nnoZqxU3wNxkLT+VWXWSFWc3UF3Z+CfPAyqdCTdoXtDPCQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/scope-manager@8.41.0':
     resolution: {integrity: sha512-n6m05bXn/Cd6DZDGyrpXrELCPVaTnLdPToyhBoFkLIMznRUQUEQdSp96s/pcWSQdqOhrgR1mzJ+yItK7T+WPMQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2075,10 +2074,6 @@ packages:
     resolution: {integrity: sha512-AQn9XqCzUXd4bAVEsAXM/Izk11Wx2u4H3BAfQVhSfzfDOm/wAON9nP7J5rpkCxts7E5TELmN845xTUCQrD1xIQ==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/types@8.18.1':
-    resolution: {integrity: sha512-7uoAUsCj66qdNQNpH2G8MyTFlgerum8ubf21s3TSM3XmKXuIn+H2Sifh/ES2nPOPiYSRJWAk0fDkW0APBWcpfw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/types@8.41.0':
     resolution: {integrity: sha512-9EwxsWdVqh42afLbHP90n2VdHaWU/oWgbH2P0CfcNfdKL7CuKpwMQGjwev56vWu9cSKU7FWSu6r9zck6CVfnag==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2092,12 +2087,6 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/typescript-estree@8.18.1':
-    resolution: {integrity: sha512-z8U21WI5txzl2XYOW7i9hJhxoKKNG1kcU4RzyNvKrdZDmbjkmLBo8bgeiOJmA06kizLI76/CCBAAGlTlEeUfyg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <5.8.0'
-
   '@typescript-eslint/typescript-estree@8.41.0':
     resolution: {integrity: sha512-D43UwUYJmGhuwHfY7MtNKRZMmfd8+p/eNSfFe6tH5mbVDto+VQCayeAt35rOx3Cs6wxD16DQtIKw/YXxt5E0UQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2110,13 +2099,6 @@ packages:
     peerDependencies:
       eslint: ^8.56.0
 
-  '@typescript-eslint/utils@8.18.1':
-    resolution: {integrity: sha512-8vikiIj2ebrC4WRdcAdDcmnu9Q/MXXwg+STf40BVfT8exDqBCUPdypvzcUPxEqRGKg9ALagZ0UWcYCtn+4W2iQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.8.0'
-
   '@typescript-eslint/utils@8.41.0':
     resolution: {integrity: sha512-udbCVstxZ5jiPIXrdH+BZWnPatjlYwJuJkDA4Tbo3WyYLh8NvB+h/bKeSZHDOFKfphsZYJQqaFtLeXEqurQn1A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2128,10 +2110,6 @@ packages:
     resolution: {integrity: sha512-Qlzzx4sE4u3FsHTPQAAQFJFNOuqtuY0LFrZHwQ8IHK705XxBiWOFkfKRWu6niB7hwfgnwIpO4jTC75ozW1PHWg==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/visitor-keys@8.18.1':
-    resolution: {integrity: sha512-Vj0WLm5/ZsD013YeUKn+K0y8p1M0jPpxOkKdbD1wB0ns53a5piVY02zjf072TblEweAbcYiFiPoSMF3kp+VhhQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/visitor-keys@8.41.0':
     resolution: {integrity: sha512-+GeGMebMCy0elMNg67LRNoVnUFPIm37iu5CmHESVx56/9Jsfdpsvbv605DQ81Pi/x11IdKUsS5nzgTYbCQU9fg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2585,6 +2563,9 @@ packages:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
 
+  code-block-writer@13.0.3:
+    resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==}
+
   code-point-at@1.1.0:
     resolution: {integrity: sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==}
     engines: {node: '>=0.10.0'}
@@ -2972,12 +2953,8 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
-  eslint-plugin-qwik@2.0.0-alpha.9:
-    resolution: {integrity: sha512-kwbw8cYd+IVFl3o1XhguIMzK7LMnvaqVU8/zKcIgq6nlCVpdXMKGPXCq/XhKq2iN5I2BaRHmAgDLNKnTQevuwg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-
-  eslint-plugin-qwik@2.0.0-beta.11:
-    resolution: {integrity: sha512-RMt/ONhCpsWjW0ODcY5OXA2QWf+80tM//7Ug98q5NX8lrzxt+3+GHCMptBpY4/Whl/ZtkAzwnvWmrX2OM6deXw==}
+  eslint-plugin-qwik@2.0.0-beta.15:
+    resolution: {integrity: sha512-TdU/3zwK9HF2cW1d9DwzCtkn+TGF8ZScZ8rcmAWTjA7wp09AZAM/muQaUcWMRWt0Oh/dXFydTwJU8Jd7H3ukDg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -2990,10 +2967,6 @@ packages:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint-visitor-keys@4.2.0:
-    resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   eslint-visitor-keys@4.2.1:
     resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3453,9 +3426,9 @@ packages:
     engines: {node: '>=16.x'}
     hasBin: true
 
-  imagetools-core@8.0.0:
-    resolution: {integrity: sha512-5i4Cx5vrBpVdvT3gvkSGAzzkUCrg/5Jm54UwWbDUSTMp4AjDI4IxiC6dI4+X1PRJYi6eKqWuE+684NJY2iOn3w==}
-    engines: {node: '>=18.0.0'}
+  imagetools-core@9.1.0:
+    resolution: {integrity: sha512-xQjs+2vrxLnAjCq+omuNkd5UQTld9/bP8+YT0LyYTlKfuSQtgUBvqhUwGugzSAh6sCdN+LnROMuLswn5hZ9Fhg==}
+    engines: {node: '>=20.0.0'}
 
   import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
@@ -4283,6 +4256,11 @@ packages:
     resolution: {integrity: sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==}
     engines: {node: '>= 18'}
 
+  mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -4597,6 +4575,9 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -5374,6 +5355,9 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  ts-morph@23.0.0:
+    resolution: {integrity: sha512-FcvFx7a9E8TUe6T3ShihXJLiJOiqyafzFKUO4aqIHDUCIvADdGNShcbc2W5PMr3LerXRv7mafvFZ9lRENxJmug==}
+
   tsconfck@3.1.4:
     resolution: {integrity: sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==}
     engines: {node: ^18 || >=20}
@@ -5603,9 +5587,9 @@ packages:
     peerDependencies:
       vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
 
-  vite-imagetools@8.0.0:
-    resolution: {integrity: sha512-3bkkA0vQ57tMynsetY2j4QhCnZKrxFv0RScaZipzYgkjkkUBEmZL5UIVHOUHhVMfwCetAeM9e3DNwyPK1ff4xg==}
-    engines: {node: '>=18.0.0'}
+  vite-imagetools@9.0.2:
+    resolution: {integrity: sha512-FV5DXw4swU81t+g8JOLT+T7gKuBOXuVsZ0WGhi7y0R182+GfBYkcf6V9/T0Nweu/vn1X0DA2p5ePMnaGZlRl1A==}
+    engines: {node: '>=20.0.0'}
 
   vite-node@3.2.4:
     resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
@@ -5872,7 +5856,7 @@ snapshots:
       outdent: 0.5.0
       prettier: 2.8.8
       resolve-from: 5.0.0
-      semver: 7.6.3
+      semver: 7.7.2
 
   '@changesets/assemble-release-plan@6.0.5':
     dependencies:
@@ -5881,7 +5865,7 @@ snapshots:
       '@changesets/should-skip-package': 0.1.1
       '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
-      semver: 7.6.3
+      semver: 7.7.2
 
   '@changesets/changelog-git@0.2.0':
     dependencies:
@@ -5937,7 +5921,7 @@ snapshots:
       '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       picocolors: 1.1.1
-      semver: 7.6.3
+      semver: 7.7.2
 
   '@changesets/get-github-info@0.6.0':
     dependencies:
@@ -6447,12 +6431,13 @@ snapshots:
       globby: 11.1.0
       read-yaml-file: 1.1.0
 
-  '@mdx-js/mdx@3.1.0(acorn@8.14.0)':
+  '@mdx-js/mdx@3.1.1':
     dependencies:
       '@types/estree': 1.0.8
       '@types/estree-jsx': 1.0.5
       '@types/hast': 3.0.4
       '@types/mdx': 2.0.13
+      acorn: 8.14.0
       collapse-white-space: 2.1.0
       devlop: 1.1.0
       estree-util-is-identifier-name: 3.0.0
@@ -6474,7 +6459,6 @@ snapshots:
       unist-util-visit: 5.0.0
       vfile: 6.0.3
     transitivePeerDependencies:
-      - acorn
       - supports-color
 
   '@napi-rs/wasm-runtime@0.2.9':
@@ -6733,31 +6717,33 @@ snapshots:
     dependencies:
       quansync: 0.2.10
 
-  '@qwik.dev/core@2.0.0-beta.11(prettier@3.3.3)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)':
+  '@qwik.dev/core@2.0.0-beta.15(prettier@3.3.3)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)':
     dependencies:
       csstype: 3.1.3
       launch-editor: 2.11.1
       rollup: 4.52.4
+      ts-morph: 23.0.0
       vite: 7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1)
     optionalDependencies:
       prettier: 3.3.3
       vitest: 3.2.4(@types/debug@4.1.12)(@types/node@20.14.11)(@vitest/ui@3.2.4)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1)
 
-  '@qwik.dev/core@2.0.0-beta.11(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)':
+  '@qwik.dev/core@2.0.0-beta.15(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)':
     dependencies:
       csstype: 3.1.3
       launch-editor: 2.11.1
       rollup: 4.52.4
+      ts-morph: 23.0.0
       vite: 7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1)
     optionalDependencies:
       vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.10.5)(@vitest/ui@3.2.4)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1)
 
-  '@qwik.dev/router@2.0.0-beta.11(@qwik.dev/core@2.0.0-beta.11(prettier@3.3.3)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4))(acorn@8.14.0)(rollup@4.52.4)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))':
+  '@qwik.dev/router@2.0.0-beta.15(@qwik.dev/core@2.0.0-beta.15(prettier@3.3.3)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4))(rollup@4.52.4)(typescript@5.4.5)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))':
     dependencies:
       '@azure/functions': 3.5.1
-      '@mdx-js/mdx': 3.1.0(acorn@8.14.0)
+      '@mdx-js/mdx': 3.1.1
       '@netlify/edge-functions': 2.19.0
-      '@qwik.dev/core': 2.0.0-beta.11(prettier@3.3.3)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)
+      '@qwik.dev/core': 2.0.0-beta.15(prettier@3.3.3)(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)
       '@types/mdx': 2.0.13
       estree-util-value-to-estree: 3.4.0
       github-slugger: 2.0.0
@@ -6773,26 +6759,25 @@ snapshots:
       set-cookie-parser: 2.7.1
       source-map: 0.7.6
       svgo: 3.3.2
-      typescript: 5.9.2
       unified: 11.0.5
       unist-util-visit: 5.0.0
-      valibot: 1.0.0(typescript@5.9.2)
+      valibot: 1.0.0(typescript@5.4.5)
       vfile: 6.0.3
       vite: 7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1)
-      vite-imagetools: 8.0.0(rollup@4.52.4)
+      vite-imagetools: 9.0.2(rollup@4.52.4)
       yaml: 2.8.1
       zod: 3.25.48
     transitivePeerDependencies:
-      - acorn
       - rollup
       - supports-color
+      - typescript
 
-  '@qwik.dev/router@2.0.0-beta.11(@qwik.dev/core@2.0.0-beta.11(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4))(acorn@8.14.0)(rollup@4.52.4)(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))':
+  '@qwik.dev/router@2.0.0-beta.15(@qwik.dev/core@2.0.0-beta.15(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4))(rollup@4.52.4)(typescript@5.9.2)(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))':
     dependencies:
       '@azure/functions': 3.5.1
-      '@mdx-js/mdx': 3.1.0(acorn@8.14.0)
+      '@mdx-js/mdx': 3.1.1
       '@netlify/edge-functions': 2.19.0
-      '@qwik.dev/core': 2.0.0-beta.11(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)
+      '@qwik.dev/core': 2.0.0-beta.15(vite@7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1))(vitest@3.2.4)
       '@types/mdx': 2.0.13
       estree-util-value-to-estree: 3.4.0
       github-slugger: 2.0.0
@@ -6808,19 +6793,18 @@ snapshots:
       set-cookie-parser: 2.7.1
       source-map: 0.7.6
       svgo: 3.3.2
-      typescript: 5.9.2
       unified: 11.0.5
       unist-util-visit: 5.0.0
       valibot: 1.0.0(typescript@5.9.2)
       vfile: 6.0.3
       vite: 7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1)
-      vite-imagetools: 8.0.0(rollup@4.52.4)
+      vite-imagetools: 9.0.2(rollup@4.52.4)
       yaml: 2.8.1
       zod: 3.25.48
     transitivePeerDependencies:
-      - acorn
       - rollup
       - supports-color
+      - typescript
 
   '@qwikest/icons@0.0.13(@builder.io/qwik@1.11.0(vite@7.1.3(@types/node@20.14.11)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1)))':
     dependencies:
@@ -7143,6 +7127,13 @@ snapshots:
 
   '@trysound/sax@0.2.0': {}
 
+  '@ts-morph/common@0.24.0':
+    dependencies:
+      fast-glob: 3.3.2
+      minimatch: 9.0.5
+      mkdirp: 3.0.1
+      path-browserify: 1.0.1
+
   '@tybys/wasm-util@0.10.0':
     dependencies:
       tslib: 2.8.1
@@ -7291,11 +7282,6 @@ snapshots:
       '@typescript-eslint/types': 7.16.1
       '@typescript-eslint/visitor-keys': 7.16.1
 
-  '@typescript-eslint/scope-manager@8.18.1':
-    dependencies:
-      '@typescript-eslint/types': 8.18.1
-      '@typescript-eslint/visitor-keys': 8.18.1
-
   '@typescript-eslint/scope-manager@8.41.0':
     dependencies:
       '@typescript-eslint/types': 8.41.0
@@ -7319,8 +7305,6 @@ snapshots:
 
   '@typescript-eslint/types@7.16.1': {}
 
-  '@typescript-eslint/types@8.18.1': {}
-
   '@typescript-eslint/types@8.41.0': {}
 
   '@typescript-eslint/typescript-estree@7.16.1(typescript@5.4.5)':
@@ -7338,20 +7322,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.18.1(typescript@5.4.5)':
-    dependencies:
-      '@typescript-eslint/types': 8.18.1
-      '@typescript-eslint/visitor-keys': 8.18.1
-      debug: 4.4.3(supports-color@5.5.0)
-      fast-glob: 3.3.2
-      is-glob: 4.0.3
-      minimatch: 9.0.5
-      semver: 7.6.3
-      ts-api-utils: 1.4.3(typescript@5.4.5)
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/typescript-estree@8.41.0(typescript@5.4.5)':
     dependencies:
       '@typescript-eslint/project-service': 8.41.0(typescript@5.4.5)
@@ -7379,17 +7349,6 @@ snapshots:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@8.18.1(eslint@8.57.0)(typescript@5.4.5)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.0)
-      '@typescript-eslint/scope-manager': 8.18.1
-      '@typescript-eslint/types': 8.18.1
-      '@typescript-eslint/typescript-estree': 8.18.1(typescript@5.4.5)
-      eslint: 8.57.0
-      typescript: 5.4.5
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/utils@8.41.0(eslint@8.57.0)(typescript@5.4.5)':
     dependencies:
       '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.0)
@@ -7406,11 +7365,6 @@ snapshots:
       '@typescript-eslint/types': 7.16.1
       eslint-visitor-keys: 3.4.3
 
-  '@typescript-eslint/visitor-keys@8.18.1':
-    dependencies:
-      '@typescript-eslint/types': 8.18.1
-      eslint-visitor-keys: 4.2.0
-
   '@typescript-eslint/visitor-keys@8.41.0':
     dependencies:
       '@typescript-eslint/types': 8.41.0
@@ -7901,6 +7855,8 @@ snapshots:
 
   clone@1.0.4: {}
 
+  code-block-writer@13.0.3: {}
+
   code-point-at@1.1.0: {}
 
   collapse-white-space@2.1.0: {}
@@ -8415,16 +8371,7 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-plugin-qwik@2.0.0-alpha.9(eslint@8.57.0)(typescript@5.4.5):
-    dependencies:
-      '@typescript-eslint/utils': 8.18.1(eslint@8.57.0)(typescript@5.4.5)
-      jsx-ast-utils: 3.3.5
-    transitivePeerDependencies:
-      - eslint
-      - supports-color
-      - typescript
-
-  eslint-plugin-qwik@2.0.0-beta.11(eslint@8.57.0)(typescript@5.4.5):
+  eslint-plugin-qwik@2.0.0-beta.15(eslint@8.57.0)(typescript@5.4.5):
     dependencies:
       '@typescript-eslint/utils': 8.41.0(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
@@ -8440,8 +8387,6 @@ snapshots:
 
   eslint-visitor-keys@3.4.3: {}
 
-  eslint-visitor-keys@4.2.0: {}
-
   eslint-visitor-keys@4.2.1: {}
 
   eslint@8.57.0:
@@ -9024,7 +8969,7 @@ snapshots:
 
   image-size@2.0.2: {}
 
-  imagetools-core@8.0.0: {}
+  imagetools-core@9.1.0: {}
 
   import-fresh@3.3.0:
     dependencies:
@@ -10070,6 +10015,8 @@ snapshots:
     dependencies:
       minipass: 7.1.2
 
+  mkdirp@3.0.1: {}
+
   mri@1.2.0: {}
 
   mrmime@2.0.1: {}
@@ -10119,7 +10066,7 @@ snapshots:
     dependencies:
       hosted-git-info: 4.1.0
       is-core-module: 2.16.0
-      semver: 7.6.3
+      semver: 7.7.2
       validate-npm-package-license: 3.0.4
 
   normalize-path@3.0.0: {}
@@ -10436,7 +10383,7 @@ snapshots:
       got: 12.6.1
       registry-auth-token: 5.0.3
       registry-url: 6.0.1
-      semver: 7.6.3
+      semver: 7.7.2
 
   package-manager-detector@0.2.8: {}
 
@@ -10478,6 +10425,8 @@ snapshots:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
+  path-browserify@1.0.1: {}
+
   path-exists@4.0.0: {}
 
   path-exists@5.0.0: {}
@@ -10953,7 +10902,7 @@ snapshots:
 
   semver-diff@4.0.0:
     dependencies:
-      semver: 7.6.3
+      semver: 7.7.2
 
   semver@7.6.3: {}
 
@@ -11065,7 +11014,7 @@ snapshots:
 
   simple-update-notifier@2.0.0:
     dependencies:
-      semver: 7.6.3
+      semver: 7.7.2
 
   sirv@3.0.1:
     dependencies:
@@ -11321,6 +11270,11 @@ snapshots:
     dependencies:
       typescript: 5.4.5
 
+  ts-morph@23.0.0:
+    dependencies:
+      '@ts-morph/common': 0.24.0
+      code-block-writer: 13.0.3
+
   tsconfck@3.1.4(typescript@5.4.5):
     optionalDependencies:
       typescript: 5.4.5
@@ -11422,7 +11376,8 @@ snapshots:
 
   typescript@5.4.5: {}
 
-  typescript@5.9.2: {}
+  typescript@5.9.2:
+    optional: true
 
   unbox-primitive@1.1.0:
     dependencies:
@@ -11515,7 +11470,7 @@ snapshots:
       is-yarn-global: 0.4.1
       latest-version: 7.0.0
       pupa: 3.1.0
-      semver: 7.6.3
+      semver: 7.7.2
       semver-diff: 4.0.0
       xdg-basedir: 5.1.0
 
@@ -11535,6 +11490,10 @@ snapshots:
 
   vali-date@1.0.0: {}
 
+  valibot@1.0.0(typescript@5.4.5):
+    optionalDependencies:
+      typescript: 5.4.5
+
   valibot@1.0.0(typescript@5.9.2):
     optionalDependencies:
       typescript: 5.9.2
@@ -11588,10 +11547,10 @@ snapshots:
     dependencies:
       vite: 7.1.3(@types/node@22.10.5)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.19.2)(yaml@2.8.1)
 
-  vite-imagetools@8.0.0(rollup@4.52.4):
+  vite-imagetools@9.0.2(rollup@4.52.4):
     dependencies:
       '@rollup/pluginutils': 5.1.4(rollup@4.52.4)
-      imagetools-core: 8.0.0
+      imagetools-core: 9.1.0
       sharp: 0.34.3
     transitivePeerDependencies:
       - rollup

From f18df2c93a9950b67be0862fb27b57aa1400b174 Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Thu, 18 Dec 2025 17:05:08 +0800
Subject: [PATCH 2/4] refactor: enhance performance tracking and add new
 features to the Qwik DevTools

- Updated context management in `context.ts` for better type safety.
- Introduced new performance tracking interfaces and types in `globals.ts`.
- Added performance monitoring capabilities in the UI, including a new `Performance` component.
- Implemented data handling for performance metrics in `computePerfViewModel.ts` and `transformPerformanceData.ts`.
- Enhanced the `RenderTree` component to support performance data visualization.
- Updated the `package.json` for development server configuration.
- Removed deprecated `HookDataStore` and related utilities to streamline codebase.
---
 packages/kit/src/context.ts                   |  19 +-
 packages/kit/src/globals.ts                   |  72 ++++-
 packages/kit/src/index.ts                     |   3 +-
 packages/playgrounds/package.json             |   2 +-
 packages/plugin/src/index.ts                  | 115 +------
 packages/plugin/src/parse/helpers.ts          | 181 ++++++++---
 packages/plugin/src/parse/hookTracker.ts      | 243 ++++++++++++++
 packages/plugin/src/parse/initInjector.ts     | 136 ++++++++
 packages/plugin/src/parse/parse.ts            | 207 ++----------
 packages/plugin/src/parse/traverse.ts         | 271 +++++++++++-----
 packages/plugin/src/parse/types.ts            |  13 +
 packages/plugin/src/plugin/devtools.ts        |  78 +++++
 packages/plugin/src/plugin/index.ts           |  19 ++
 packages/plugin/src/plugin/statistics.ts      | 303 ++++++++++++++++++
 packages/plugin/src/utils/useCollectHooks.ts  |  22 --
 .../virtualmodules/perfLazyWrapperPreamble.ts |  51 +++
 .../plugin/src/virtualmodules/perfRuntime.ts  | 140 ++++++++
 .../src/virtualmodules/qwikComponentProxy.ts  |  53 +++
 .../src/virtualmodules/useCollectHooks.ts     |  44 +++
 .../src/virtualmodules/virtualModules.ts      |  91 ++++++
 packages/ui/src/devtools.tsx                  |  13 +-
 .../src/features/Performance/Performance.tsx  | 192 +++++++++++
 .../Performance/computePerfViewModel.test.ts  | 121 +++++++
 .../Performance/computePerfViewModel.ts       | 127 ++++++++
 .../transformPerformanceData.test.ts          | 110 +++++++
 .../Performance/transformPerformanceData.ts   |  51 +++
 .../src/features/RenderTree/HookDataStore.ts  | 290 -----------------
 .../ui/src/features/RenderTree/RenderTree.tsx |   7 +-
 packages/ui/src/features/RenderTree/data.ts   |  37 ++-
 packages/ui/src/features/RenderTree/index.ts  |  15 +-
 .../src/features/RenderTree/transfromqseq.ts  |  34 --
 packages/ui/src/types/state.ts                |   3 +-
 32 files changed, 2241 insertions(+), 822 deletions(-)
 create mode 100644 packages/plugin/src/parse/hookTracker.ts
 create mode 100644 packages/plugin/src/parse/initInjector.ts
 create mode 100644 packages/plugin/src/parse/types.ts
 create mode 100644 packages/plugin/src/plugin/devtools.ts
 create mode 100644 packages/plugin/src/plugin/index.ts
 create mode 100644 packages/plugin/src/plugin/statistics.ts
 delete mode 100644 packages/plugin/src/utils/useCollectHooks.ts
 create mode 100644 packages/plugin/src/virtualmodules/perfLazyWrapperPreamble.ts
 create mode 100644 packages/plugin/src/virtualmodules/perfRuntime.ts
 create mode 100644 packages/plugin/src/virtualmodules/qwikComponentProxy.ts
 create mode 100644 packages/plugin/src/virtualmodules/useCollectHooks.ts
 create mode 100644 packages/plugin/src/virtualmodules/virtualModules.ts
 create mode 100644 packages/ui/src/features/Performance/Performance.tsx
 create mode 100644 packages/ui/src/features/Performance/computePerfViewModel.test.ts
 create mode 100644 packages/ui/src/features/Performance/computePerfViewModel.ts
 create mode 100644 packages/ui/src/features/Performance/transformPerformanceData.test.ts
 create mode 100644 packages/ui/src/features/Performance/transformPerformanceData.ts
 delete mode 100644 packages/ui/src/features/RenderTree/HookDataStore.ts
 delete mode 100644 packages/ui/src/features/RenderTree/transfromqseq.ts

diff --git a/packages/kit/src/context.ts b/packages/kit/src/context.ts
index 0b6f6ee..b259079 100644
--- a/packages/kit/src/context.ts
+++ b/packages/kit/src/context.ts
@@ -9,34 +9,37 @@ import {
 } from './globals';
 import { ServerRpc, ClientRpc } from './types';
 
+type GlobalTarget = Record<string, unknown>;
+const t = target as unknown as GlobalTarget;
+
 export function getViteClientContext(): ViteClientContext {
-  return target[CLIENT_CTX];
+  return t[CLIENT_CTX] as ViteClientContext;
 }
 
 export function setViteClientContext(ctx: ViteClientContext) {
-  target[CLIENT_CTX] = ctx;
+  t[CLIENT_CTX] = ctx;
 }
 
 export function getViteServerContext() {
-  return target[SERVER_CTX];
+  return t[SERVER_CTX] as ViteServerContext;
 }
 
 export function setViteServerContext(ctx: ViteServerContext) {
-  target[SERVER_CTX] = ctx;
+  t[SERVER_CTX] = ctx;
 }
 
 export function getViteServerRpc() {
-  return target[SERVER_RPC];
+  return t[SERVER_RPC] as ServerRpc;
 }
 
 export function setViteServerRpc(rpc: ServerRpc) {
-  target[SERVER_RPC] = rpc;
+  t[SERVER_RPC] = rpc;
 }
 
 export function getViteClientRpc() {
-  return target[CLIENT_RPC];
+  return t[CLIENT_RPC] as ClientRpc;
 }
 
 export function setViteClientRpc(rpc: ClientRpc) {
-  target[CLIENT_RPC] = rpc;
+  t[CLIENT_RPC] = rpc;
 }
diff --git a/packages/kit/src/globals.ts b/packages/kit/src/globals.ts
index f6978d6..804b897 100644
--- a/packages/kit/src/globals.ts
+++ b/packages/kit/src/globals.ts
@@ -1,5 +1,5 @@
 import { ViteDevServer } from 'vite';
-import { ClientRpc, ServerRpc } from './types';
+import { ClientRpc, ParsedStructure, ServerRpc } from './types';
 
 interface EventEmitter {
   on: (name: string, handler: (data: any) => void) => void;
@@ -14,9 +14,71 @@ export const SERVER_CTX = '__qwik_server_ctx__';
 export const SERVER_RPC = '__qwik_server_rpc__';
 export const CLIENT_RPC = '__qwik_client_rpc__';
 
+// Devtools global state types
+export type QwikPerfPhaseRemembered = 'ssr' | 'csr';
+
+export interface QwikPerfErrorRemembered {
+  name: string;
+  message: string;
+}
+
+export interface QwikPerfEntryRemembered {
+  id: number;
+  component: string;
+  phase: QwikPerfPhaseRemembered;
+  duration: number;
+  start: number;
+  end: number;
+  error?: QwikPerfErrorRemembered;
+  /**
+   * Present for wrapped `_component_` render-function modules; helps de-dupe.
+   */
+  viteId?: string;
+  /**
+   * Present for wrapped `_component_` render-function modules.
+   */
+  renderCount?: number;
+}
+
+export interface QwikPerfStoreRemembered {
+  ssr: QwikPerfEntryRemembered[];
+  csr: QwikPerfEntryRemembered[];
+
+}
+
+export interface DevtoolsRenderStats {
+  /**
+   * In-memory performance store written by devtools instrumentation.
+   * (Populated at runtime; optional in types.)
+   */
+  perf?: QwikPerfStoreRemembered;
+}
+export interface ComponentDevtoolsState { 
+  hooks: ParsedStructure[];
+  stats: DevtoolsRenderStats;
+}
+
+
+declare global {
+  interface Window {
+    QWIK_DEVTOOLS_GLOBAL_STATE?: Record<string, ComponentDevtoolsState>;
+    /**
+     * Performance store (CSR + injected SSR snapshot).
+     * Written by `@devtools/plugin` instrumentation.
+     */
+    __QWIK_PERF__?: QwikPerfStoreRemembered;
+  }
+}
+
 declare global {
-  var __qwik_client_ctx__: ViteClientContext;
-  var __qwik_server_ctx__: ViteServerContext;
-  var __qwik_server_rpc__: ServerRpc;
-  var __qwik_client_rpc__: ClientRpc;
+  // SSR collector lives on `process` (preferred) or `globalThis` via dynamic properties.
+  // We type the `process` case here to avoid `any` in plugin code.
+  namespace NodeJS {
+    interface Process {
+      __QWIK_SSR_PERF__?: QwikPerfEntryRemembered[];
+      __QWIK_SSR_PERF_SET__?: Set<string>;
+      __QWIK_SSR_PERF_ID__?: number;
+      __QWIK_SSR_PERF_INDEX__?: Record<string, number>;
+    }
+  }
 }
diff --git a/packages/kit/src/index.ts b/packages/kit/src/index.ts
index 8446ef6..86505f7 100644
--- a/packages/kit/src/index.ts
+++ b/packages/kit/src/index.ts
@@ -2,4 +2,5 @@ export * from './client';
 export * from './server';
 export * from './context';
 export * from './types';
-export * from './constants';
\ No newline at end of file
+export * from './constants';
+export * from './globals';
\ No newline at end of file
diff --git a/packages/playgrounds/package.json b/packages/playgrounds/package.json
index 06dad7a..dcb6879 100644
--- a/packages/playgrounds/package.json
+++ b/packages/playgrounds/package.json
@@ -17,7 +17,7 @@
     "build.preview": "vite build --ssr src/entry.preview.tsx",
     "build.types": "tsc --incremental --noEmit",
     "deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
-    "dev": "MODE=dev  vite --mode ssr",
+    "dev": "MODE=dev  vite --mode ssr --port 5174",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "fmt": "prettier --write .",
     "fmt.check": "prettier --check .",
diff --git a/packages/plugin/src/index.ts b/packages/plugin/src/index.ts
index b29fd1b..fe29297 100644
--- a/packages/plugin/src/index.ts
+++ b/packages/plugin/src/index.ts
@@ -1,114 +1 @@
-import { ResolvedConfig, type Plugin } from 'vite';
-import { getServerFunctions } from './rpc';
-import { createServerRpc, setViteServerContext, VIRTUAL_QWIK_DEVTOOLS_KEY, INNER_USE_HOOK } from '@devtools/kit';
-import VueInspector from 'vite-plugin-inspect'
-import useCollectHooksSource from './utils/useCollectHooks'
-import { parseQwikCode } from './parse/parse';
-import { startPreloading } from './npm/index';
-import updateConf from './utils/updateConf';
-import {debug} from 'debug'
-
-const log = debug('qwik:devtools:plugin');
-export function qwikDevtools(): Plugin[] {
-  let _config: ResolvedConfig;
-  const qwikData = new Map<string, any>();
-  let preloadStarted = false;
-  const qwikDevtoolsPlugin: Plugin = {
-    name: 'vite-plugin-qwik-devtools',
-    apply: 'serve',
-    resolveId(id) {
-      // Normalize to a stable, absolute-like id so Qwik can generate runtime chunks
-      const clean = id.split('?')[0].split('#')[0];
-      if (
-        clean === VIRTUAL_QWIK_DEVTOOLS_KEY ||
-        clean === `/${VIRTUAL_QWIK_DEVTOOLS_KEY}` ||
-        clean === `\u0000${VIRTUAL_QWIK_DEVTOOLS_KEY}` ||
-        clean === `/@id/${VIRTUAL_QWIK_DEVTOOLS_KEY}`
-      ) {
-        return `/${VIRTUAL_QWIK_DEVTOOLS_KEY}`;
-      }
-    },
-    load(id) {
-      if (
-        id === `/${VIRTUAL_QWIK_DEVTOOLS_KEY}` ||
-        id === VIRTUAL_QWIK_DEVTOOLS_KEY ||
-        id === `\u0000${VIRTUAL_QWIK_DEVTOOLS_KEY}` ||
-        id === `/@id/${VIRTUAL_QWIK_DEVTOOLS_KEY}`
-      ) {
-        return {
-          code: useCollectHooksSource,
-          map: { mappings: '' },
-        };
-      }
-    },
-    configResolved(viteConfig) {
-      _config = viteConfig;
-      updateConf(_config);
-      // Start preloading as early as possible, right after config is resolved
-      if (!preloadStarted) {
-        preloadStarted = true;
-        startPreloading({ config: _config }).catch((err) => {
-          log('[Qwik DevTools] Failed to start preloading:', err);
-        });
-      }
-    }, 
-    transform: {
-      order: 'pre',
-      handler(code, id) {
-        const mode = process.env.MODE;
-        // Ensure virtual import is present at the very top once when a component$ is present
-        if (id.endsWith('.tsx') && code.includes('component$')) {
-          if (!code.includes(VIRTUAL_QWIK_DEVTOOLS_KEY)) {
-           
-            const importLine = `import { ${INNER_USE_HOOK} } from '${VIRTUAL_QWIK_DEVTOOLS_KEY}';\n`
-            code = importLine + code
-          }else {
-            log('importing virtual qwik devtools', VIRTUAL_QWIK_DEVTOOLS_KEY, code);
-          }
-          code = parseQwikCode(code, {path: id})
-        }
-        // Only transform the root component file
-        if (id.endsWith('root.tsx')) {
-          const importPath =
-            mode === 'dev' ? '@devtools/ui' : '@qwik.dev/devtools/ui';
-          // Check if QwikDevtools import already exists
-          if (!code.includes(importPath)) {
-            // Add import for QwikDevtools using the correct package name
-            code = `import { QwikDevtools } from '${importPath}';\n${code}`;
-          }
-
-          // Find the closing body tag and append QwikDevtools at the end of body
-          const match = code.match(/<body[^>]*>([\s\S]*?)<\/body>/);
-          if (match) {
-            const bodyContent = match[1];
-            const newBodyContent = `${bodyContent}\n        <QwikDevtools />`;
-            code = code.replace(bodyContent, newBodyContent);
-          }
-
-          return {
-            code,
-            map: null,
-          };
-        }
-
-       return {
-          code,
-          map: { mappings: '' },
-        };
-      },
-    },
-    configureServer(server) {
-      setViteServerContext(server as any);
-
-      const rpcFunctions = getServerFunctions({ server, config: _config, qwikData });
-
-      createServerRpc(rpcFunctions);
-      
-      // Preloading should have already started in configResolved
-    },
-  }
-  return [
-    qwikDevtoolsPlugin,
-    VueInspector(), // Add the VueInspector plugin instance
-  ];
-}
+export { qwikDevtools } from './plugin';
diff --git a/packages/plugin/src/parse/helpers.ts b/packages/plugin/src/parse/helpers.ts
index 1554919..1126829 100644
--- a/packages/plugin/src/parse/helpers.ts
+++ b/packages/plugin/src/parse/helpers.ts
@@ -1,95 +1,170 @@
-import { USE_HOOK_LIST, HookType } from '@devtools/kit'
+import { USE_HOOK_LIST, HookType } from '@devtools/kit';
 
-export const ALL_HOOK_NAMES = new Set<string>([
-  ...USE_HOOK_LIST
-])
+// ============================================================================
+// Constants
+// ============================================================================
 
-export function isAstNodeLike(value: unknown): value is { type: string } {
-  return Boolean(value) && typeof value === 'object' && 'type' in (value as Record<string, unknown>)
-}
+export const ALL_HOOK_NAMES = new Set<string>([...USE_HOOK_LIST]);
 
-export function normalizeHookName(raw: string): string {
-  return raw.endsWith('$') ? raw.slice(0, -1) : raw
+// ============================================================================
+// AST Node Utilities
+// ============================================================================
+
+/**
+ * Type guard to check if a value is an AST node with a type property
+ */
+export function isAstNodeLike(value: unknown): value is { type: string } {
+  return Boolean(value) && typeof value === 'object' && 'type' in (value as Record<string, unknown>);
 }
 
+/**
+ * Gets the start position of an AST node from its range or start property
+ */
 export function getNodeStart(node: unknown): number {
   if (node && typeof node === 'object') {
-    const maybeRange = (node as any).range
-    if (Array.isArray(maybeRange)) return maybeRange[0] ?? 0
-    const maybeStart = (node as any).start
-    if (typeof maybeStart === 'number') return maybeStart
+    const maybeRange = (node as any).range;
+    if (Array.isArray(maybeRange)) return maybeRange[0] ?? 0;
+    const maybeStart = (node as any).start;
+    if (typeof maybeStart === 'number') return maybeStart;
   }
-  return 0
+  return 0;
 }
 
+/**
+ * Extracts the name from an Identifier node
+ */
 export function getVariableIdentifierName(id: unknown): string | null {
-  if (!isAstNodeLike(id)) return null
-  return id.type === 'Identifier' ? (id as any).name as string : null
+  if (!isAstNodeLike(id)) return null;
+  return id.type === 'Identifier' ? (id as any).name as string : null;
 }
 
-export function isKnownHook(name: string): name is HookType {
-  return ALL_HOOK_NAMES.has(name)
+// ============================================================================
+// Hook Name Utilities
+// ============================================================================
+
+/**
+ * Normalizes a hook name by removing the trailing $ suffix
+ * @example normalizeHookName('useSignal$') => 'useSignal'
+ */
+export function normalizeHookName(raw: string): string {
+  return raw.endsWith('$') ? raw.slice(0, -1) : raw;
 }
 
+/**
+ * Normalizes a hook name by removing the trailing 'Qrl' suffix
+ * @example normalizeQrlHookName('useTaskQrl') => 'useTask'
+ */
 export function normalizeQrlHookName(hookName: string): string {
-  return hookName.endsWith('Qrl') ? hookName.slice(0, -3) : hookName
+  return hookName.endsWith('Qrl') ? hookName.slice(0, -3) : hookName;
+}
+
+/**
+ * Checks if a hook name is in the known hooks list
+ */
+export function isKnownHook(name: string): name is HookType {
+  return ALL_HOOK_NAMES.has(name);
+}
+
+/**
+ * Checks if a hook name follows the custom hook naming convention (use[A-Z_])
+ * and is not a built-in Qwik hook
+ */
+export function isCustomHook(hookName: string): boolean {
+  const isBuiltIn = USE_HOOK_LIST.some((item) => item.startsWith(hookName));
+  return !isBuiltIn && /^use[A-Z_]/.test(hookName);
 }
 
+// ============================================================================
+// Code Position Utilities
+// ============================================================================
+
+/**
+ * Finds the start position of the line containing the given index
+ */
 export function findLineStart(code: string, index: number): number {
-  let lineStart = index
   for (let i = index - 1; i >= 0; i--) {
-    const ch = code[i]
-    if (ch === '\n' || ch === '\r') { lineStart = i + 1; break }
-    if (i === 0) lineStart = 0
+    const ch = code[i];
+    if (ch === '\n' || ch === '\r') {
+      return i + 1;
+    }
   }
-  return lineStart
+  return 0;
 }
 
+/**
+ * Reads the indentation (spaces/tabs) starting from a given position
+ */
 export function readIndent(code: string, indexFrom: number): string {
-  let indent = ''
-  let i = indexFrom
+  let indent = '';
+  let i = indexFrom;
   while (i < code.length) {
-    const ch = code[i]
-    if (ch === ' ' || ch === '\t') { indent += ch; i++ } else { break }
+    const ch = code[i];
+    if (ch === ' ' || ch === '\t') {
+      indent += ch;
+      i++;
+    } else {
+      break;
+    }
   }
-  return indent
+  return indent;
+}
+
+/**
+ * Removes trailing semicolon and whitespace from a code segment
+ */
+export function trimStatementSemicolon(segment: string): string {
+  return segment.trim().replace(/;?\s*$/, '');
 }
 
+// ============================================================================
+// Collecthook Injection Utilities
+// ============================================================================
+
+export type CollecthookCategory = 'VariableDeclarator' | 'expressionStatement';
+
+/**
+ * Builds the collecthook() call code with proper indentation
+ */
 export function buildCollecthookPayload(
   indent: string,
   variableName: string,
   hookType: string,
-  category: 'VariableDeclarator' | 'expressionStatement',
+  category: CollecthookCategory,
   hookExpression: string | 'undefined',
 ): string {
-  const hookLine = hookExpression === 'undefined' ? 'undefined' : hookExpression
-  return (
-`${indent}collecthook({
+  const dataValue = hookExpression === 'undefined' ? 'undefined' : hookExpression;
+  return `${indent}collecthook({
 ${indent}  variableName: '${variableName}',
 ${indent}  hookType: '${hookType}',
 ${indent}  category: '${category}',
-${indent}  data: ${hookLine}
-${indent}});\n`
-  )
+${indent}  data: ${dataValue}
+${indent}});\n`;
 }
 
-export function hasCollecthookAfterByVariableId(code: string, fromIndex: number, variableId: string, maxLookahead = 600): boolean {
-  const lookahead = code.slice(fromIndex, fromIndex + maxLookahead)
-  const alreadyInserted = new RegExp(`collecthook\\s*\\(\\s*\\{[\\s\\S]{0,300}?data:\\s*${variableId}\\b`).test(lookahead)
-  return alreadyInserted
+/**
+ * Checks if a collecthook call already exists after the given position (by variable ID)
+ */
+export function hasCollecthookAfterByVariableId(
+  code: string,
+  fromIndex: number,
+  variableId: string,
+  maxLookahead = 600,
+): boolean {
+  const lookahead = code.slice(fromIndex, fromIndex + maxLookahead);
+  const pattern = new RegExp(`collecthook\\s*\\(\\s*\\{[\\s\\S]{0,300}?data:\\s*${variableId}\\b`);
+  return pattern.test(lookahead);
 }
 
-export function hasCollecthookAfterByVariableName(code: string, fromIndex: number, variableName: string, maxLookahead = 600): boolean {
-  const lookahead = code.slice(fromIndex, fromIndex + maxLookahead)
-  const alreadyInserted = new RegExp(`collecthook\\s*\\(\\s*\\{[\\s\\S]{0,200}?variableName:\\s*'${variableName}'`).test(lookahead)
-  return alreadyInserted
-}
-
-export function trimStatementSemicolon(segment: string): string {
-  return segment.trim().replace(/;?\s*$/, '')
+/**
+ * Checks if a collecthook call already exists after the given position (by variable name)
+ */
+export function hasCollecthookAfterByVariableName(
+  code: string,
+  fromIndex: number,
+  variableName: string,
+  maxLookahead = 600,
+): boolean {
+  const lookahead = code.slice(fromIndex, fromIndex + maxLookahead);
+  const pattern = new RegExp(`collecthook\\s*\\(\\s*\\{[\\s\\S]{0,200}?variableName:\\s*'${variableName}'`);
+  return pattern.test(lookahead);
 }
-
-
-export function isCustomHook(hookName: string): boolean {
-  return !(USE_HOOK_LIST.some(item => item.startsWith(hookName))) && /^use[A-Z_]/.test(hookName)
-}
\ No newline at end of file
diff --git a/packages/plugin/src/parse/hookTracker.ts b/packages/plugin/src/parse/hookTracker.ts
new file mode 100644
index 0000000..f6708b4
--- /dev/null
+++ b/packages/plugin/src/parse/hookTracker.ts
@@ -0,0 +1,243 @@
+/**
+ * Phase 2: Hook Tracker Injection
+ * Injects collecthook calls after each hook usage to track hook state
+ */
+
+import { parseProgram, traverseProgram } from './traverse';
+import {
+  isAstNodeLike,
+  normalizeHookName,
+  getVariableIdentifierName,
+  isKnownHook,
+  normalizeQrlHookName,
+  findLineStart,
+  readIndent,
+  buildCollecthookPayload,
+  hasCollecthookAfterByVariableId,
+  hasCollecthookAfterByVariableName,
+  trimStatementSemicolon,
+  isCustomHook,
+} from './helpers';
+import { INNER_USE_HOOK } from '@devtools/kit';
+import type { InjectionTask } from './types';
+
+// ============================================================================
+// Main Entry
+// ============================================================================
+
+/**
+ * Injects collecthook calls after each hook usage
+ */
+export function injectHookTrackers(code: string): string {
+  const program = parseProgram(code);
+  const tasks: InjectionTask[] = [];
+  let customHookIndex = 0;
+
+  traverseProgram(program, {
+    enter: (path) => {
+      const node: any = path.node;
+      if (!node) return;
+
+      // Handle variable declarations: const x = useSignal()
+      if (node.type === 'VariableDeclarator') {
+        const task = processVariableDeclarator(code, node, path);
+        if (task) tasks.push(task);
+      }
+
+      // Handle expression statements: useTask$(() => {})
+      if (node.type === 'ExpressionStatement') {
+        const result = processExpressionStatement(code, node, customHookIndex);
+        if (result) {
+          tasks.push(result.task);
+          customHookIndex = result.newIndex;
+        }
+      }
+    },
+  });
+
+  return applyTasks(code, tasks);
+}
+
+// ============================================================================
+// Variable Declarator Processing
+// ============================================================================
+
+/**
+ * Processes: const x = useSignal(), const data = useCustomHook()
+ */
+function processVariableDeclarator(
+  code: string,
+  node: any,
+  path: { parent: any },
+): InjectionTask | null {
+  const hookInfo = extractHookInfo(node);
+  if (!hookInfo) return null;
+
+  const { hookName, normalizedName, variableId } = hookInfo;
+  if (hookName === INNER_USE_HOOK) return null;
+
+  const range = getParentRange(path.parent);
+  if (!range) return null;
+
+  const { declEnd, indent } = getPositionInfo(code, range);
+
+  // Custom hook
+  if (isCustomHook(normalizedName)) {
+    if (hasCollecthookAfterByVariableId(code, declEnd, variableId)) return null;
+    const payload = buildCollecthookPayload(indent, variableId, 'customhook', 'VariableDeclarator', variableId);
+    return { kind: 'insert', pos: declEnd, text: '\n' + payload };
+  }
+
+  // Known hook
+  if (!isKnownHook(normalizedName)) return null;
+  if (hasCollecthookAfterByVariableId(code, declEnd, variableId)) return null;
+
+  const payload = buildCollecthookPayload(indent, variableId, normalizedName, 'VariableDeclarator', variableId);
+  return { kind: 'insert', pos: declEnd, text: '\n' + payload };
+}
+
+// ============================================================================
+// Expression Statement Processing
+// ============================================================================
+
+/**
+ * Processes: useTask$(() => {}), useCustomHook()
+ */
+function processExpressionStatement(
+  code: string,
+  node: any,
+  currentIndex: number,
+): { task: InjectionTask; newIndex: number } | null {
+  const hookInfo = extractExpressionHookInfo(node);
+  if (!hookInfo) return null;
+
+  const { hookName, normalizedName } = hookInfo;
+  if (hookName === INNER_USE_HOOK) return null;
+
+  const stmtRange = node.range as number[] | undefined;
+  if (!stmtRange) return null;
+
+  const [stmtStart, stmtEnd] = stmtRange;
+  const lineStart = findLineStart(code, stmtStart);
+  const indent = readIndent(code, lineStart);
+
+  // Known hook (expression form)
+  if (isKnownHook(normalizedName)) {
+    if (hasCollecthookAfterByVariableName(code, stmtEnd, normalizedName)) return null;
+    const payload = buildCollecthookPayload(indent, normalizedName, normalizedName, 'expressionStatement', 'undefined');
+    return {
+      task: { kind: 'insert', pos: stmtEnd, text: '\n' + payload },
+      newIndex: currentIndex,
+    };
+  }
+
+  // Custom hook (expression form) - convert to variable declaration
+  if (isCustomHook(normalizedName)) {
+    return convertToVariableDeclaration(code, stmtStart, stmtEnd, indent, currentIndex);
+  }
+
+  return null;
+}
+
+/**
+ * Converts a custom hook expression to a variable declaration with tracking
+ */
+function convertToVariableDeclaration(
+  code: string,
+  stmtStart: number,
+  stmtEnd: number,
+  indent: string,
+  currentIndex: number,
+): { task: InjectionTask; newIndex: number } {
+  const callSource = code.slice(stmtStart, stmtEnd);
+  const variableName = `_customhook_${currentIndex}`;
+  const declLine = `${indent}let ${variableName} = ${trimStatementSemicolon(callSource)};\n`;
+  const payload = buildCollecthookPayload(indent, variableName, 'customhook', 'VariableDeclarator', variableName);
+
+  return {
+    task: { kind: 'replace', start: stmtStart, end: stmtEnd, text: declLine + payload },
+    newIndex: currentIndex + 1,
+  };
+}
+
+// ============================================================================
+// Hook Info Extraction
+// ============================================================================
+
+interface HookInfo {
+  hookName: string;
+  normalizedName: string;
+  variableId: string;
+}
+
+function extractHookInfo(node: any): HookInfo | null {
+  const init = node.init;
+  if (!isAstNodeLike(init) || init.type !== 'CallExpression') return null;
+
+  const callee = (init as any).callee;
+  if (!isAstNodeLike(callee) || callee.type !== 'Identifier') return null;
+
+  const hookName = normalizeHookName((callee as any).name as string);
+  const normalizedName = normalizeQrlHookName(hookName);
+  const variableId = getVariableIdentifierName(node.id);
+
+  if (!variableId) return null;
+
+  return { hookName, normalizedName, variableId };
+}
+
+function extractExpressionHookInfo(node: any): { hookName: string; normalizedName: string } | null {
+  const expr = node.expression;
+  if (!isAstNodeLike(expr) || expr.type !== 'CallExpression') return null;
+
+  const callee = (expr as any).callee;
+  if (!isAstNodeLike(callee) || callee.type !== 'Identifier') return null;
+
+  const hookName = normalizeHookName((callee as any).name as string);
+  const normalizedName = normalizeQrlHookName(hookName);
+
+  return { hookName, normalizedName };
+}
+
+// ============================================================================
+// Position Helpers
+// ============================================================================
+
+function getParentRange(parent: any): [number, number] | null {
+  const range = parent?.range as number[] | undefined;
+  if (!range) return null;
+  return [range[0], range[1]];
+}
+
+function getPositionInfo(code: string, range: [number, number]): { declStart: number; declEnd: number; indent: string } {
+  const [declStart, declEnd] = range;
+  const lineStart = findLineStart(code, declStart);
+  const indent = readIndent(code, lineStart);
+  return { declStart, declEnd, indent };
+}
+
+// ============================================================================
+// Task Application
+// ============================================================================
+
+function applyTasks(code: string, tasks: InjectionTask[]): string {
+  if (tasks.length === 0) return code;
+
+  // Sort from last to first to keep positions stable
+  tasks.sort((a, b) => {
+    const aPos = a.kind === 'insert' ? a.pos : a.start;
+    const bPos = b.kind === 'insert' ? b.pos : b.start;
+    return bPos - aPos;
+  });
+
+  let result = code;
+  for (const task of tasks) {
+    if (task.kind === 'insert') {
+      result = result.slice(0, task.pos) + task.text + result.slice(task.pos);
+    } else {
+      result = result.slice(0, task.start) + task.text + result.slice(task.end);
+    }
+  }
+  return result;
+}
+
diff --git a/packages/plugin/src/parse/initInjector.ts b/packages/plugin/src/parse/initInjector.ts
new file mode 100644
index 0000000..b033c57
--- /dev/null
+++ b/packages/plugin/src/parse/initInjector.ts
@@ -0,0 +1,136 @@
+/**
+ * Phase 1: Initialization Hook Injection
+ * Injects collecthook setup and render stats at the beginning of each component body
+ */
+
+import { ComponentBodyRange } from './traverse';
+import { readIndent } from './helpers';
+import { INNER_USE_HOOK } from '@devtools/kit';
+import type { InjectOptions, InitTask } from './types';
+
+// ============================================================================
+// Main Entry
+// ============================================================================
+
+/**
+ * Injects collecthook initialization and render stats at the beginning of each component body
+ */
+export function injectInitHooks(
+  code: string,
+  bodies: ComponentBodyRange[],
+  options?: InjectOptions,
+): string {
+  const tasks: InitTask[] = [];
+
+  for (const body of bodies) {
+    const task = createInitTask(code, body, options);
+    if (task) {
+      tasks.push(task);
+    }
+  }
+
+  return applyTasks(code, tasks);
+}
+
+// ============================================================================
+// Task Creation
+// ============================================================================
+
+/**
+ * Creates an initialization task for a single component body
+ */
+function createInitTask(
+  code: string,
+  body: ComponentBodyRange,
+  options?: InjectOptions,
+): InitTask | null {
+  const { insertPos, exportName } = body;
+
+  // Skip if already has collecthook initialization
+  if (hasExistingCollecthook(code, insertPos)) {
+    return null;
+  }
+
+  // Calculate insertion position
+  const { insertIndex, prefixNewline } = calculateInsertPosition(code, insertPos);
+  const indent = readIndent(code, insertIndex);
+
+  // Build initialization code
+  const componentArg = buildComponentArg(options?.path, exportName);
+  const initLine = `${prefixNewline}${indent}const collecthook = ${INNER_USE_HOOK}(${componentArg})\n`;
+
+  return {
+    start: insertIndex,
+    end: insertIndex,
+    text: initLine,
+  };
+}
+
+// ============================================================================
+// Position Helpers
+// ============================================================================
+
+function hasExistingCollecthook(code: string, insertPos: number): boolean {
+  const lookahead = code.slice(insertPos, insertPos + 200);
+  return /const\s+collecthook\s*=\s*useCollectHooks\s*\(/.test(lookahead);
+}
+
+function calculateInsertPosition(code: string, insertPos: number): {
+  insertIndex: number;
+  prefixNewline: string;
+} {
+  if (code[insertPos] === '\r' && code[insertPos + 1] === '\n') {
+    return { insertIndex: insertPos + 2, prefixNewline: '' };
+  }
+  if (code[insertPos] === '\n') {
+    return { insertIndex: insertPos + 1, prefixNewline: '' };
+  }
+  return { insertIndex: insertPos, prefixNewline: '\n' };
+}
+
+// ============================================================================
+// Code Builders
+// ============================================================================
+
+/**
+ * Builds the component argument string for collecthook initialization
+ */
+function buildComponentArg(path: string | undefined, exportName: string | undefined): string {
+  const rawArg = String(path ?? '');
+  const baseArg = rawArg.split('?')[0].split('#')[0];
+  const suffix = buildComponentSuffix(baseArg, exportName);
+  return JSON.stringify(`${baseArg}${suffix}`);
+}
+
+function buildComponentSuffix(baseArg: string, exportName: string | undefined): string {
+  if (exportName && typeof exportName === 'string') {
+    return `_${exportName}`;
+  }
+
+  if (baseArg.endsWith('index.tsx')) {
+    const parts = baseArg.split('/');
+    const parent = parts.length >= 2 ? parts[parts.length - 2] : 'index';
+    return `_${parent.replace(/-/g, '_')}`;
+  }
+
+  const file = baseArg.split('/').pop() || '';
+  const name = file.replace(/\.[^.]+$/, '');
+  return name ? `_${name.replace(/-/g, '_')}` : '';
+}
+
+
+// ============================================================================
+// Task Application
+// ============================================================================
+
+function applyTasks(code: string, tasks: InitTask[]): string {
+  // Sort from last to first to keep positions stable
+  tasks.sort((a, b) => b.start - a.start);
+
+  let result = code;
+  for (const task of tasks) {
+    result = result.slice(0, task.start) + task.text + result.slice(task.end);
+  }
+  return result;
+}
+
diff --git a/packages/plugin/src/parse/parse.ts b/packages/plugin/src/parse/parse.ts
index 59cfa3b..1120e13 100644
--- a/packages/plugin/src/parse/parse.ts
+++ b/packages/plugin/src/parse/parse.ts
@@ -1,182 +1,33 @@
-import {  parseProgram, findAllComponentBodyRangesFromProgram, traverseProgram } from './traverse'
-import {
-  isAstNodeLike,
-  normalizeHookName,
-  getVariableIdentifierName,
-  isKnownHook,
-  normalizeQrlHookName,
-  findLineStart,
-  readIndent,
-  buildCollecthookPayload,
-  hasCollecthookAfterByVariableId,
-  hasCollecthookAfterByVariableName,
-  trimStatementSemicolon,
-  isCustomHook,
-} from './helpers'
-import { INNER_USE_HOOK } from '@devtools/kit'
-
-export interface InjectOptions { path?: string }
-export function parseQwikCode(code: string, options?: InjectOptions): string {
-
-  const program: any = parseProgram(code) as any
-
-  const allBodies = findAllComponentBodyRangesFromProgram(program)
-
-  let result = code
-  let index = 0
-
-  if (allBodies.length > 0) {
-    type Task = { start: number; end: number; text: string }
-    const tasks: Task[] = []
-    for (let idx = 0; idx < allBodies.length; idx++) {
-      const { insertPos, exportName } = allBodies[idx] as any
-      // skip if this body already has init
-      const lookahead = result.slice(insertPos, insertPos + 200)
-      if (/const\s+collecthook\s*=\s*useCollectHooks\s*\(/.test(lookahead)) continue
-
-      let i = insertPos
-      let insertIndex = insertPos
-      let prefixNewline = ''
-      if (result[i] === '\r' && result[i + 1] === '\n') { i += 2; insertIndex = i }
-      else if (result[i] === '\n') { i += 1; insertIndex = i }
-      else { prefixNewline = '\n' }
-
-      const indent = readIndent(result, i)
-      const rawArg = String(options?.path ?? '')
-      const baseArg = rawArg.split('?')[0].split('#')[0]
-      let suffix = ''
-      
-      if (exportName && typeof exportName === 'string') {
-        suffix = `_${exportName}`
-      }else {
-        if (baseArg.endsWith('index.tsx')) {
-          const parts = baseArg.split('/')
-          const parent = parts.length >= 2 ? parts[parts.length - 2] : 'index'
-          const safeParent = parent.replace(/-/g, '_')
-          suffix = `_${safeParent}`
-        } else {
-          const file = baseArg.split('/').pop() || ''
-          const name = file.replace(/\.[^.]+$/, '')
-          const safeName = name.replace(/-/g, '_')
-          suffix = name ? `_${safeName}` : ''
-        }
-      }
-      const arg = JSON.stringify(`${baseArg}${suffix}`)
-      const initLine = `${prefixNewline}${indent}const collecthook = ${INNER_USE_HOOK}(${arg})\n`
-      tasks.push({ start: insertIndex, end: insertIndex, text: initLine })
-    }
-    // apply from last to first to keep positions stable
-    tasks.sort((a, b) => b.start - a.start)
-    for (const t of tasks) {
-      result = result.slice(0, t.start) + t.text + result.slice(t.end)
-    }
+/**
+ * Qwik Code Parser
+ * Transforms Qwik component code by injecting devtools hooks
+ */
+
+import { parseProgram, findAllComponentBodyRangesFromProgram } from './traverse';
+import { injectInitHooks } from './initInjector';
+import { injectHookTrackers } from './hookTracker';
+
+export type { InjectOptions } from './types';
+
+/**
+ * Parses and transforms Qwik component code by injecting devtools hooks
+ *
+ * Phase 1: Inject initialization hooks (collecthook setup + render stats)
+ * Phase 2: Inject collecthook calls for individual hooks
+ */
+export function parseQwikCode(code: string, options?: { path?: string}): string {
+  const program = parseProgram(code);
+  const componentBodies = findAllComponentBodyRangesFromProgram(program);
+
+  if (componentBodies.length === 0) {
+    return code;
   }
 
-  if (allBodies.length > 0) {
-    const programForInjections: any = parseProgram(result) as any
-    type InsertTask = { kind: 'insert'; pos: number; text: string }
-    type ReplaceTask = { kind: 'replace'; start: number; end: number; text: string }
-    type InjectionTask = InsertTask | ReplaceTask
-    const tasks: InjectionTask[] = []
-    traverseProgram(programForInjections, {
-      enter: (path) => {
-        const node: any = path.node as any
-        if (!node) return
-
-        if (node.type === 'VariableDeclarator') {
-          const init = node.init
-          if (!isAstNodeLike(init) || init.type !== 'CallExpression') return
-          const callee = (init as any).callee
-          if (!isAstNodeLike(callee) || callee.type !== 'Identifier') return
-          const hookName = normalizeHookName(((callee as any).name) as string)
-          const isQrlName = normalizeQrlHookName(hookName)
-          const variableId = getVariableIdentifierName(node.id)
-          if (!variableId) return
+  // Phase 1: Initialize hooks at component body start
+  let result = injectInitHooks(code, componentBodies, options);
 
-          if (hookName === INNER_USE_HOOK) return
-
-          if (isCustomHook(isQrlName)) {
-            const parent: any = path.parent as any
-            const parentRange: number[] | undefined = parent && Array.isArray(parent.range) ? parent.range : undefined
-            if (!parentRange) return
-            const declStart = parentRange[0] as number
-            const declEnd = parentRange[1] as number
-
-            const lineStart = findLineStart(result, declStart)
-            const indent = readIndent(result, lineStart)
-            const payload = buildCollecthookPayload(indent, variableId, 'customhook', 'VariableDeclarator', variableId)
-            if (hasCollecthookAfterByVariableId(result, declEnd, variableId)) return
-            tasks.push({ kind: 'insert', pos: declEnd, text: '\n' + payload })
-            return
-          }
-          if (!isKnownHook(isQrlName)) return
-
-          const parent: any = path.parent as any
-          const parentRange: number[] | undefined = parent && Array.isArray(parent.range) ? parent.range : undefined
-          if (!parentRange) return
-          const declStart = parentRange[0] as number
-          const declEnd = parentRange[1] as number
-
-          const lineStart = findLineStart(result, declStart)
-          const indent = readIndent(result, lineStart)
-          const payload = buildCollecthookPayload(indent, variableId, isQrlName, 'VariableDeclarator', variableId)
-          if (hasCollecthookAfterByVariableId(result, declEnd, variableId)) return
-          tasks.push({ kind: 'insert', pos: declEnd, text: '\n' + payload })
-          return
-        }
-        if (node.type === 'ExpressionStatement') {
-          const expr = node.expression
-          if (!isAstNodeLike(expr) || expr.type !== 'CallExpression') return
-          const callee = (expr as any).callee
-          if (!isAstNodeLike(callee) || callee.type !== 'Identifier') return
-          const hookName = normalizeHookName(((callee as any).name) as string)
-          const isQrlName = normalizeQrlHookName(hookName)
-          const isListed = isKnownHook(isQrlName)
-          if (hookName === INNER_USE_HOOK) return
-          const stmtRange: number[] | undefined = Array.isArray((node as any).range) ? (node as any).range : undefined
-          if (!stmtRange) return
-          const stmtStart = stmtRange[0] as number
-          const stmtEnd = stmtRange[1] as number
-          const lineStart = findLineStart(result, stmtStart)
-          const indent = readIndent(result, lineStart)
-
-          if (isListed) {
-            const payload = buildCollecthookPayload(indent, isQrlName, isQrlName, 'expressionStatement', 'undefined')
-            if (hasCollecthookAfterByVariableName(result, stmtEnd, isQrlName)) return
-            tasks.push({ kind: 'insert', pos: stmtEnd, text: '\n' + payload })
-          } else if (isCustomHook(isQrlName)) {
-            const stmtRange: number[] | undefined = Array.isArray((node as any).range) ? (node as any).range : undefined
-            if (!stmtRange) return
-            const stmtStart = stmtRange[0] as number
-            const stmtEnd = stmtRange[1] as number
-            const callSource = result.slice(stmtStart, stmtEnd)
-            const lineStart2 = findLineStart(result, stmtStart)
-            const indent2 = readIndent(result, lineStart2)
-            const variableName = `_customhook_${index}`
-            const declLine = `${indent2}let ${variableName} = ${trimStatementSemicolon(callSource)};\n`
-            const payload = buildCollecthookPayload(indent2, variableName, 'customhook', 'VariableDeclarator', variableName)
-            index++
-            tasks.push({ kind: 'replace', start: stmtStart, end: stmtEnd, text: declLine + payload })
-          }
-        }
-      }
-    })
-
-    if (tasks.length > 0) {
-      tasks.sort((a, b) => {
-        const apos = a.kind === 'insert' ? a.pos : a.start
-        const bpos = b.kind === 'insert' ? b.pos : b.start
-        return bpos - apos
-      })
-      for (const t of tasks) {
-        if (t.kind === 'insert') {
-          result = result.slice(0, t.pos) + t.text + result.slice(t.pos)
-        } else {
-          result = result.slice(0, t.start) + t.text + result.slice(t.end)
-        }
-      }
-    }
-  }
+  // Phase 2: Track individual hook usages
+  result = injectHookTrackers(result);
 
-  return result
-}
\ No newline at end of file
+  return result;
+}
diff --git a/packages/plugin/src/parse/traverse.ts b/packages/plugin/src/parse/traverse.ts
index 618bcb0..45200d8 100644
--- a/packages/plugin/src/parse/traverse.ts
+++ b/packages/plugin/src/parse/traverse.ts
@@ -1,132 +1,225 @@
-import { parseSync } from 'oxc-parser'
-import { isAstNodeLike } from './helpers'
+import { parseSync } from 'oxc-parser';
+import { isAstNodeLike } from './helpers';
+
+// ============================================================================
+// Types
+// ============================================================================
 
 export interface NodePath<T = any> {
-  node: T
-  parent: any | null
-  key: string | number | null
-  index: number | null
-  state: any
-  stop: () => void
-  skip: () => void
+  node: T;
+  parent: any | null;
+  key: string | number | null;
+  index: number | null;
+  state: any;
+  stop: () => void;
+  skip: () => void;
 }
 
-type VisitFn = (path: NodePath) => void
-type VisitObj = { enter?: VisitFn; exit?: VisitFn }
+type VisitFn = (path: NodePath) => void;
+type VisitObj = { enter?: VisitFn; exit?: VisitFn };
+
 export type Visitor = {
-  enter?: VisitFn
-  exit?: VisitFn
-  [type: string]: VisitFn | VisitObj | undefined
-}
+  enter?: VisitFn;
+  exit?: VisitFn;
+  [type: string]: VisitFn | VisitObj | undefined;
+};
 
-function callVisitor(visitor: Visitor | undefined, type: string, hook: 'enter' | 'exit', path: NodePath) {
-  if (!visitor) return
-  const specific = visitor[type] as VisitFn | undefined
-  if (specific) specific(path)
-  const handler = visitor[path.node && (path.node as any).type] as VisitFn | VisitObj | undefined
-  if (!handler) return
-  if (typeof handler === 'function' && hook === 'enter') {
-    handler(path)
-    return
-  }
-  if (typeof handler === 'object') {
-    const fn = handler[hook]
-    if (fn) fn(path)
-  }
+export interface ComponentBodyRange {
+  insertPos: number;
+  bodyStart: number;
+  bodyEnd: number;
+  exportName?: string;
 }
 
+// ============================================================================
+// Parser
+// ============================================================================
+
+/**
+ * Parses TypeScript/JSX code into an AST using oxc-parser
+ */
 export function parseProgram(code: string): unknown {
   const parsed = parseSync('file.tsx', code, {
     lang: 'tsx',
     sourceType: 'module',
     astType: 'ts',
     range: true,
-  })
-  return parsed.program as unknown
+  });
+  return parsed.program as unknown;
+}
+
+// ============================================================================
+// Traverser
+// ============================================================================
+
+/**
+ * Calls the appropriate visitor function for enter/exit events
+ */
+function callVisitor(
+  visitor: Visitor | undefined,
+  type: string,
+  hook: 'enter' | 'exit',
+  path: NodePath,
+): void {
+  if (!visitor) return;
+
+  // Call generic enter/exit handler
+  const specific = visitor[type] as VisitFn | undefined;
+  if (specific) specific(path);
+
+  // Call type-specific handler
+  const handler = visitor[path.node && (path.node as any).type] as VisitFn | VisitObj | undefined;
+  if (!handler) return;
+
+  if (typeof handler === 'function' && hook === 'enter') {
+    handler(path);
+    return;
+  }
+
+  if (typeof handler === 'object') {
+    const fn = handler[hook];
+    if (fn) fn(path);
+  }
 }
 
+/**
+ * Traverses an AST program with a visitor pattern
+ */
 export function traverseProgram(program: unknown, visitor: Visitor, state?: any): void {
-  let shouldStopAll = false
-  function inner(node: unknown, parent: unknown, key: string | number | null, index: number | null) {
-    if (shouldStopAll) return
-    if (!isAstNodeLike(node)) return
-    let shouldSkipChildren = false
+  let shouldStopAll = false;
+
+  function traverse(
+    node: unknown,
+    parent: unknown,
+    key: string | number | null,
+    index: number | null,
+  ): void {
+    if (shouldStopAll) return;
+    if (!isAstNodeLike(node)) return;
+
+    let shouldSkipChildren = false;
+
     const path: NodePath = {
       node,
       parent: isAstNodeLike(parent) ? parent : null,
       key,
       index,
       state,
-      stop: () => { shouldStopAll = true },
-      skip: () => { shouldSkipChildren = true },
-    }
-    callVisitor(visitor, 'enter', 'enter', path)
+      stop: () => { shouldStopAll = true; },
+      skip: () => { shouldSkipChildren = true; },
+    };
+
+    // Enter phase
+    callVisitor(visitor, 'enter', 'enter', path);
+
+    // Traverse children
     if (!shouldSkipChildren) {
-      const record = node as Record<string, unknown>
+      const record = node as Record<string, unknown>;
       for (const k of Object.keys(record)) {
-        const value: unknown = (record as any)[k]
+        const value = record[k];
         if (Array.isArray(value)) {
-          for (let i = 0; i < value.length; i++) inner(value[i], node, k, i)
+          for (let i = 0; i < value.length; i++) {
+            traverse(value[i], node, k, i);
+          }
         } else {
-          inner(value, node, k, null)
+          traverse(value, node, k, null);
         }
       }
     }
-    callVisitor(visitor, 'exit', 'exit', path)
+
+    // Exit phase
+    callVisitor(visitor, 'exit', 'exit', path);
   }
-  inner(program, null, null, null)
+
+  traverse(program, null, null, null);
 }
 
+/**
+ * Parses code and traverses the resulting AST
+ */
 export function traverseQwik(code: string, visitor: Visitor, state?: any): void {
-  const program: unknown = parseProgram(code)
-  traverseProgram(program, visitor, state)
+  const program = parseProgram(code);
+  traverseProgram(program, visitor, state);
 }
 
-export interface ComponentBodyRange { insertPos: number; bodyStart: number; bodyEnd: number; exportName?: string }
+// ============================================================================
+// Component Body Detection
+// ============================================================================
 
+/**
+ * Finds all component$ function bodies in the AST and returns their positions
+ */
 export function findAllComponentBodyRangesFromProgram(program: unknown): ComponentBodyRange[] {
-  const ranges: ComponentBodyRange[] = []
+  const ranges: ComponentBodyRange[] = [];
+
   traverseProgram(program, {
     enter: (path) => {
-      const node: any = path.node as any
-      if (!node) return
-      // collect any component$ call expression
-      if (node.type === 'CallExpression') {
-        const callee = node.callee
-        if (callee && callee.type === 'Identifier' && callee.name === 'component$') {
-          const firstArg = node.arguments && node.arguments[0]
-          if (firstArg && (firstArg.type === 'ArrowFunctionExpression' || firstArg.type === 'FunctionExpression')) {
-            const body = firstArg.body
-            if (body && body.type === 'BlockStatement' && Array.isArray(body.range)) {
-              const start = (body.range[0] as number)
-              const end = (body.range[1] as number)
-              // detect export form to derive a name hint
-              let exportName: string | undefined
-              const parent: any = path.parent as any
-              if (parent && parent.type === 'ExportDefaultDeclaration') {
-                exportName = ''
-              } else if (parent && parent.type === 'VariableDeclarator') {
-                const id = (parent as any).id
-                if (id && id.type === 'Identifier' && typeof id.name === 'string') {
-                  exportName = id.name as string
-                }
-              }
-              ranges.push({ insertPos: start + 1, bodyStart: start, bodyEnd: end, exportName })
-            }
-          }
-        }
-      }
-    }
-  })
-  // de-duplicate and sort by position ascending
-  const seen = new Set<number>()
-  const unique = ranges.filter(r => {
-    if (seen.has(r.insertPos)) return false
-    seen.add(r.insertPos)
-    return true
-  })
-  unique.sort((a, b) => a.insertPos - b.insertPos)
-  return unique
+      const node: any = path.node;
+      if (!node || node.type !== 'CallExpression') return;
+
+      // Check if this is a component$ call
+      const callee = node.callee;
+      if (!callee || callee.type !== 'Identifier' || callee.name !== 'component$') return;
+
+      // Get the function argument
+      const firstArg = node.arguments?.[0];
+      const isFunction =
+        firstArg?.type === 'ArrowFunctionExpression' ||
+        firstArg?.type === 'FunctionExpression';
+      if (!isFunction) return;
+
+      // Get the function body block
+      const body = firstArg.body;
+      if (body?.type !== 'BlockStatement' || !Array.isArray(body.range)) return;
+
+      const start = body.range[0] as number;
+      const end = body.range[1] as number;
+
+      // Detect export name from parent context
+      const exportName = detectExportName(path.parent);
+
+      ranges.push({
+        insertPos: start + 1,
+        bodyStart: start,
+        bodyEnd: end,
+        exportName,
+      });
+    },
+  });
+
+  // De-duplicate and sort by position ascending
+  return deduplicateAndSort(ranges);
 }
 
+/**
+ * Detects the export name from the parent node context
+ */
+function detectExportName(parent: any): string | undefined {
+  if (!parent) return undefined;
+
+  if (parent.type === 'ExportDefaultDeclaration') {
+    return '';
+  }
+
+  if (parent.type === 'VariableDeclarator') {
+    const id = parent.id;
+    if (id?.type === 'Identifier' && typeof id.name === 'string') {
+      return id.name;
+    }
+  }
+
+  return undefined;
+}
 
+/**
+ * Removes duplicate ranges and sorts by insertPos ascending
+ */
+function deduplicateAndSort(ranges: ComponentBodyRange[]): ComponentBodyRange[] {
+  const seen = new Set<number>();
+  const unique = ranges.filter((r) => {
+    if (seen.has(r.insertPos)) return false;
+    seen.add(r.insertPos);
+    return true;
+  });
+  return unique.sort((a, b) => a.insertPos - b.insertPos);
+}
diff --git a/packages/plugin/src/parse/types.ts b/packages/plugin/src/parse/types.ts
new file mode 100644
index 0000000..b47832c
--- /dev/null
+++ b/packages/plugin/src/parse/types.ts
@@ -0,0 +1,13 @@
+/**
+ * Shared types for the parse module
+ */
+
+export interface InjectOptions {
+  path?: string;
+}
+
+export type InsertTask = { kind: 'insert'; pos: number; text: string };
+export type ReplaceTask = { kind: 'replace'; start: number; end: number; text: string };
+export type InjectionTask = InsertTask | ReplaceTask;
+export type InitTask = { start: number; end: number; text: string };
+
diff --git a/packages/plugin/src/plugin/devtools.ts b/packages/plugin/src/plugin/devtools.ts
new file mode 100644
index 0000000..011ea2c
--- /dev/null
+++ b/packages/plugin/src/plugin/devtools.ts
@@ -0,0 +1,78 @@
+import { ResolvedConfig, type Plugin } from 'vite';
+import { getServerFunctions } from '../rpc';
+import { createServerRpc, setViteServerContext } from '@devtools/kit';
+import { startPreloading } from '../npm/index';
+import updateConf from '../utils/updateConf';
+import { debug } from 'debug';
+import { findVirtualModule, transformComponentFile, transformRootFile } from '../virtualmodules/virtualModules';
+
+const log = debug('qwik:devtools:plugin');
+
+/**
+ * Core Qwik DevTools plugin
+ */
+export function devtoolsPlugin(): Plugin {
+  let resolvedConfig: ResolvedConfig;
+  const qwikData = new Map<string, any>();
+  let preloadStarted = false;
+
+  return {
+    name: 'vite-plugin-qwik-devtools',
+    apply: 'serve',
+
+    resolveId(id) {
+      const virtualModule = findVirtualModule(id);
+      if (virtualModule) {
+        return `/${virtualModule.key}`;
+      }
+    },
+
+    load(id) {
+      const virtualModule = findVirtualModule(id);
+      if (virtualModule) {
+        return {
+          code: virtualModule.source,
+          map: { mappings: '' },
+        };
+      }
+    },
+
+    configResolved(viteConfig) {
+      resolvedConfig = viteConfig;
+      updateConf(resolvedConfig);
+
+      if (!preloadStarted) {
+        preloadStarted = true;
+        startPreloading({ config: resolvedConfig }).catch((err) => {
+          log('[Qwik DevTools] Failed to start preloading:', err);
+        });
+      }
+    },
+
+    transform: {
+      order: 'pre',
+      handler(code, id) {
+        if (id.endsWith('.tsx') && code.includes('component$')) {
+          code = transformComponentFile(code, id);
+        }
+
+        if (id.endsWith('root.tsx')) {
+          return { code: transformRootFile(code), map: null };
+        }
+
+        return { code, map: { mappings: '' } };
+      },
+    },
+
+    configureServer(server) {
+      setViteServerContext(server as any);
+      const rpcFunctions = getServerFunctions({
+        server,
+        config: resolvedConfig,
+        qwikData,
+      });
+      createServerRpc(rpcFunctions);
+    },
+  };
+}
+
diff --git a/packages/plugin/src/plugin/index.ts b/packages/plugin/src/plugin/index.ts
new file mode 100644
index 0000000..bc54e85
--- /dev/null
+++ b/packages/plugin/src/plugin/index.ts
@@ -0,0 +1,19 @@
+import { type Plugin } from 'vite';
+import VueInspector from 'vite-plugin-inspect';
+import { devtoolsPlugin } from './devtools';
+import qwikComponentProxy from './statistics';
+
+// Re-export individual plugins
+export { devtoolsPlugin } from './devtools';
+
+/**
+ * Main entry: combines all devtools plugins
+ */
+export function qwikDevtools(): Plugin[] {
+  return [
+    devtoolsPlugin(),
+    VueInspector(),
+    ...qwikComponentProxy(),
+    // Add more plugins here as needed
+  ];
+}
diff --git a/packages/plugin/src/plugin/statistics.ts b/packages/plugin/src/plugin/statistics.ts
new file mode 100644
index 0000000..f75e6c3
--- /dev/null
+++ b/packages/plugin/src/plugin/statistics.ts
@@ -0,0 +1,303 @@
+import type { Plugin } from 'vite';
+import { debug } from 'debug';
+import perfLazyWrapperPreamble from '../virtualmodules/perfLazyWrapperPreamble';
+import { isVirtualId, normalizeId } from '../virtualmodules/virtualModules';
+
+/**
+ * Statistics plugin: collect Qwik render performance.
+ *
+ * Responsibilities (kept similar to `plugin/devtools.ts` structure):
+ * - Transform: rewrite `componentQrl` imports to a virtual module
+ * - Transform: wrap Qwik-generated lazy render modules (`_component_`) to record perf entries
+ * - Dev SSR: inject SSR perf snapshot into final HTML
+ *
+ * The virtual module source for `componentQrl` is registered in:
+ * - `packages/plugin/src/virtualmodules/qwikComponentProxy.ts`
+ * and is served by the core devtools plugin (`plugin/devtools.ts`) via `virtualmodules/virtualModules.ts`.
+ *
+ * Data sinks:
+ * - **CSR**: `window.__QWIK_PERF__ = { ssr: [], csr: [] }`
+ * - **SSR**: stored on `process` (preferred) or `globalThis` as `__QWIK_SSR_PERF__`
+ */
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const PERF_VIRTUAL_ID = 'virtual:qwik-component-proxy';
+const log = debug('qwik:devtools:perf');
+
+type AnyRecord = Record<string, any>;
+
+// ============================================================================
+// Shared env helpers
+// ============================================================================
+
+function getStoreForSSR(): AnyRecord {
+  // NOTE: Vite SSR module-runner may execute in an isolated context; `globalThis` may not be
+  // the same as the dev server's `globalThis`. Using `process` is usually cross-context.
+  return typeof process !== 'undefined' && process
+    ? (process as unknown as AnyRecord)
+    : (globalThis as AnyRecord);
+}
+
+function isFromNodeModules(cleanId: string): boolean {
+  return cleanId.includes('/node_modules/') || cleanId.includes('\\node_modules\\');
+}
+
+function isUiLibBuildOutput(cleanId: string): boolean {
+  // Avoid rewriting the already-built UI library (`.qwik.mjs` etc).
+  return cleanId.includes('/packages/ui/lib/') || cleanId.includes('\\packages\\ui\\lib\\');
+}
+
+function shouldTransformSource(id: string): boolean {
+  const cleanId = normalizeId(id);
+  // We intentionally do NOT skip all virtual modules: Qwik (and Vite) generate many `\0` ids,
+  // and SSR instrumentation needs to cover them. We only skip third-party deps / build outputs.
+  return !isFromNodeModules(cleanId) && !isUiLibBuildOutput(cleanId);
+}
+
+function isPerfVirtualModuleId(id: string): boolean {
+  return isVirtualId(id, PERF_VIRTUAL_ID);
+}
+
+// ============================================================================
+// Transform: rewrite componentQrl import
+// ============================================================================
+
+function rewriteComponentQrlImport(code: string, id: string): { code: string; changed: boolean } {
+  if (!code.includes('@qwik.dev/core') || !code.includes('componentQrl')) {
+    return { code, changed: false };
+  }
+
+  // Match: `import { ... componentQrl ... } from '@qwik.dev/core'`
+  const importRe = /import\s*\{([^}]*)\}\s*from\s*['"]@qwik\.dev\/core['"]/g;
+  let changed = false;
+  const next = code.replace(importRe, (match, imports) => {
+    const importList = String(imports)
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean);
+
+    const hasComponentQrl = importList.some(
+      (imp) => imp === 'componentQrl' || imp.startsWith('componentQrl ')
+    );
+    if (!hasComponentQrl) return match;
+
+    changed = true;
+    log('rewrite componentQrl import %O', {
+      id,
+      isVirtual: normalizeId(id).startsWith('\0'),
+    });
+
+    // Filter out `componentQrl` (including `componentQrl as alias`)
+    const filteredImports = importList.filter(
+      (imp) => imp !== 'componentQrl' && !imp.startsWith('componentQrl ')
+    );
+
+    if (filteredImports.length === 0) {
+      // Only `componentQrl` was imported: fully replace it
+      return `import { componentQrl } from '${PERF_VIRTUAL_ID}'`;
+    }
+
+    // Keep other imports and add the virtual `componentQrl`
+    return `import { ${filteredImports.join(
+      ', '
+    )} } from '@qwik.dev/core';\nimport { componentQrl } from '${PERF_VIRTUAL_ID}'`;
+  });
+
+  return { code: next, changed };
+}
+
+// ============================================================================
+// Transform: wrap Qwik lazy render modules (`_component_`)
+// ============================================================================
+
+function findQwikLazyComponentExports(code: string): string[] {
+  // Match: `export const XXX_component_HASH = ...`
+  const exportRe = /export\s+const\s+(\w+_component_\w+)\s*=/g;
+  const exports: string[] = [];
+  let match: RegExpExecArray | null;
+
+  while ((match = exportRe.exec(code)) !== null) {
+    exports.push(match[1]);
+  }
+
+  return exports;
+}
+
+function replaceExportWithOriginal(code: string, exportName: string): string {
+  return code.replace(
+    new RegExp(`export\\s+const\\s+${exportName}\\s*=`),
+    `const __original_${exportName}__ =`
+  );
+}
+
+function appendWrappedExport(code: string, exportName: string, id: string): string {
+  return (
+    code +
+    `
+export const ${exportName} = __qwik_wrap__(__original_${exportName}__, '${exportName}', '${id}');
+`
+  );
+}
+
+function wrapQwikLazyComponentExports(params: {
+  code: string;
+  id: string;
+  exports: string[];
+}): { code: string; changed: boolean } {
+  const { exports, id } = params;
+  if (exports.length === 0) return { code: params.code, changed: false };
+
+  log('wrap _component_ exports %O', { id, count: exports.length });
+
+  let modifiedCode = perfLazyWrapperPreamble + params.code;
+
+  // Replace each export by wrapping the original function
+  for (const exportName of exports) {
+    modifiedCode = replaceExportWithOriginal(modifiedCode, exportName);
+    modifiedCode = appendWrappedExport(modifiedCode, exportName, id);
+  }
+
+  return { code: modifiedCode, changed: true };
+}
+
+// ============================================================================
+// Dev SSR: inject SSR perf snapshot into HTML
+// ============================================================================
+
+function createSsrPerfInjectionScript(entries: unknown[]): string {
+  // Inject SSR perf data into the final HTML page so the UI can display it.
+  return `
+<script>
+  window.__QWIK_PERF__ = window.__QWIK_PERF__ || { ssr: [], csr: [] };
+  window.__QWIK_PERF__.ssr = ${JSON.stringify(entries)};
+  window.dispatchEvent(new CustomEvent('qwik:ssr-perf', { detail: ${JSON.stringify(entries)} }));
+</script>`;
+}
+
+type MiddlewareNext = (err?: unknown) => void;
+type MinimalMiddlewareReq = { headers: Record<string, string | string[] | undefined>; url?: string };
+type MinimalMiddlewareRes = {
+  write: (...args: any[]) => any;
+  end: (...args: any[]) => any;
+  setHeader: (name: string, value: any) => void;
+};
+
+function attachSsrPerfInjectorMiddleware(server: any) {
+  // In dev SSR, Qwik streams HTML; `transformIndexHtml` often runs before SSR rendering finishes,
+  // causing `__QWIK_SSR_PERF__` to still be empty at injection time.
+  // Instead, intercept the final HTML response and inject after SSR completes.
+  server.middlewares.use((req: MinimalMiddlewareReq, res: MinimalMiddlewareRes, next: MiddlewareNext) => {
+    const accept = req.headers.accept || '';
+    if (!accept.includes('text/html')) return next();
+
+    // The SSR collector uses "global accumulation + de-dupe".
+    // Do NOT clear it per-request, otherwise we may inject empty data if sampling hasn't occurred yet.
+    const store = getStoreForSSR() as unknown as Record<string, unknown>;
+
+    const originalWrite = res.write.bind(res);
+    const originalEnd = res.end.bind(res);
+
+    let body = '';
+
+    res.write = function (
+      chunk: unknown,
+      encodingOrCallback?: BufferEncoding | ((error?: Error | null) => void),
+      callback?: (error?: Error | null) => void
+    ): boolean {
+      if (chunk) {
+        body += typeof chunk === 'string' ? chunk : Buffer.from(chunk as any).toString();
+      }
+      // Don't flush immediately; inject on `end` (in dev it's OK to sacrifice streaming)
+      if (typeof encodingOrCallback === 'function') encodingOrCallback();
+      if (typeof callback === 'function') callback();
+      return true;
+    } as typeof res.write;
+
+    res.end = function (
+      chunk?: unknown,
+      encodingOrCallback?: BufferEncoding | ((error?: Error | null) => void),
+      callback?: (error?: Error | null) => void
+    ): typeof res {
+      if (chunk) {
+        body += typeof chunk === 'string' ? chunk : Buffer.from(chunk as any).toString();
+      }
+
+      if (body.includes('</head>')) {
+        const rawArr = store.__QWIK_SSR_PERF__;
+        const entries = Array.isArray(rawArr) ? rawArr : [];
+        log('inject ssr perf %O', { url: req.url, total: entries.length });
+        const script = createSsrPerfInjectionScript(entries);
+
+        // Place at the start of `<head>` so it runs earlier than other head scripts
+        body = body.replace(/<head(\s[^>]*)?>/i, (m) => `${m}${script}`);
+      }
+
+      try {
+        res.setHeader('Content-Length', Buffer.byteLength(body));
+      } catch {
+        // ignore
+      }
+
+      originalWrite(body);
+
+      if (typeof encodingOrCallback === 'function') encodingOrCallback();
+      if (typeof callback === 'function') callback();
+
+      return originalEnd();
+    } as typeof res.end;
+
+    next();
+  });
+}
+
+// ============================================================================
+// Plugin factory (similar entry-point style to devtools.ts)
+// ============================================================================
+
+export function statisticsPlugin(): Plugin {
+  return {
+    name: 'vite:qwik-component-proxy-transform',
+    enforce: 'post',
+
+    transform(code, id) {
+      // Avoid rewriting imports inside the perf virtual module itself (otherwise `originalComponentQrl`
+      // could become self-referential/undefined)
+      if (isPerfVirtualModuleId(id)) return null;
+
+      // By default, skip dependencies and build outputs (otherwise we'd transform node_modules / ui's `.qwik.mjs` as well)
+      if (!shouldTransformSource(id)) return null;
+
+      let modifiedCode = code;
+      let hasChanges = false;
+
+      // 1) Replace `componentQrl` import from `@qwik.dev/core` -> virtual module
+      const rewritten = rewriteComponentQrlImport(modifiedCode, id);
+      modifiedCode = rewritten.code;
+      hasChanges = hasChanges || rewritten.changed;
+
+      // 2) Handle Qwik-generated lazy render function modules (`_component_`)
+      const cleanId = normalizeId(id);
+      if (cleanId.includes('_component_')) {
+        const exports = findQwikLazyComponentExports(code);
+        const wrapped = wrapQwikLazyComponentExports({ code: modifiedCode, id, exports });
+        modifiedCode = wrapped.code;
+        hasChanges = hasChanges || wrapped.changed;
+      }
+
+      if (!hasChanges) return null;
+      return { code: modifiedCode, map: null };
+    },
+
+    configureServer(server) {
+      attachSsrPerfInjectorMiddleware(server);
+    },
+  };
+}
+
+// Backwards compatible default export (existing callers spread a Plugin[])
+export default function qwikComponentProxy(): Plugin[] {
+  return [statisticsPlugin()];
+}
diff --git a/packages/plugin/src/utils/useCollectHooks.ts b/packages/plugin/src/utils/useCollectHooks.ts
deleted file mode 100644
index 5dd1061..0000000
--- a/packages/plugin/src/utils/useCollectHooks.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-const useCollectHooks = `import { $, useSignal, useVisibleTask$ } from "@qwik.dev/core"
-export const useCollectHooks = (src) => {
-  const hooksList = useSignal(new Set())
-  useVisibleTask$(({ track }) => {
-    const newdata  = track(() => hooksList.value);
-    if(!window.QWIK_DEVTOOLS_GLOBAL_STATE) {
-      window.QWIK_DEVTOOLS_GLOBAL_STATE = {}
-      window.QWIK_DEVTOOLS_GLOBAL_STATE[src] = [...newdata]
-    }else {
-      window.QWIK_DEVTOOLS_GLOBAL_STATE[src] = [...newdata]
-    }
-  }, { strategy: 'document-ready'})
-  return $((args) => {
-    if(hooksList.value.has(args)) {
-      return
-    }
-    hooksList.value.add(args)
-  })
-}
-`
-
-export default useCollectHooks
\ No newline at end of file
diff --git a/packages/plugin/src/virtualmodules/perfLazyWrapperPreamble.ts b/packages/plugin/src/virtualmodules/perfLazyWrapperPreamble.ts
new file mode 100644
index 0000000..4134ee0
--- /dev/null
+++ b/packages/plugin/src/virtualmodules/perfLazyWrapperPreamble.ts
@@ -0,0 +1,51 @@
+import perfRuntime from './perfRuntime';
+
+/**
+ * Preamble injected into Qwik-generated lazy render function modules (`_component_...`).
+ *
+ * It defines `__qwik_wrap__` that wraps each exported render function and records perf entries.
+ */
+const perfLazyWrapperPreamble = `${perfRuntime}
+
+// [qwik-component-proxy] Render function wrapper
+const __qwik_wrap__ = (fn, name, viteId) => {
+  let renderCount = 0;
+  return function (...args) {
+    renderCount += 1;
+    const phase = __qwik_perf_is_server__() ? 'ssr' : 'csr';
+    const start = performance.now();
+
+    try {
+      const result = fn.apply(this, args);
+      const duration = performance.now() - start;
+      __qwik_perf_commit__({
+        component: name,
+        phase,
+        duration,
+        start,
+        end: start + duration,
+        viteId,
+        renderCount,
+      });
+      return result;
+    } catch (err) {
+      const duration = performance.now() - start;
+      __qwik_perf_commit__({
+        component: name,
+        phase,
+        duration,
+        start,
+        end: start + duration,
+        error: __qwik_perf_to_error__(err),
+        viteId,
+        renderCount,
+      });
+      throw err;
+    }
+  };
+};
+`;
+
+export default perfLazyWrapperPreamble;
+
+
diff --git a/packages/plugin/src/virtualmodules/perfRuntime.ts b/packages/plugin/src/virtualmodules/perfRuntime.ts
new file mode 100644
index 0000000..1d33067
--- /dev/null
+++ b/packages/plugin/src/virtualmodules/perfRuntime.ts
@@ -0,0 +1,140 @@
+/**
+ * Shared runtime snippet used by perf instrumentation code.
+ *
+ * This file exports a **string** (not executable TS) that gets concatenated into:
+ * - the virtual module `virtual:qwik-component-proxy`
+ * - injected wrappers for Qwik-generated `_component_` render-function modules
+ *
+ * It is intentionally framework-agnostic and relies only on `window`/`process`.
+ */
+const perfRuntime = `
+// [qwik-perf-runtime] shared helpers (injected)
+const __qwik_perf_is_server__ = () => typeof window === 'undefined';
+
+const __qwik_perf_init_csr__ = () => {
+  if (typeof window === 'undefined') return;
+  window.__QWIK_PERF__ = window.__QWIK_PERF__ || { ssr: [], csr: [] };
+  // Map: viteId -> index in perf.csr (used for upsert)
+  window.__QWIK_PERF__._csrByViteId = window.__QWIK_PERF__._csrByViteId || {};
+  // Map: component -> index in perf.ssr (used for componentQrl upsert on CSR)
+  window.__QWIK_PERF__._ssrByComponent = window.__QWIK_PERF__._ssrByComponent || {};
+};
+
+const __qwik_perf_get_ssr_store__ = () =>
+  typeof process !== 'undefined' && process ? process : globalThis;
+
+const __qwik_perf_to_error__ = (err) => ({
+  name: (err && err.name) || 'Error',
+  message: err && err.message ? String(err.message) : String(err),
+});
+
+const __qwik_perf_next_id__ = (perf) => {
+  perf._id = (perf._id || 0) + 1;
+  return perf._id;
+};
+
+const __qwik_perf_next_ssr_id__ = (store) => {
+  store.__QWIK_SSR_PERF_ID__ = (store.__QWIK_SSR_PERF_ID__ || 0) + 1;
+  return store.__QWIK_SSR_PERF_ID__;
+};
+
+const __qwik_perf_ssr_push__ = (store, entry) => {
+  const id = __qwik_perf_next_ssr_id__(store);
+  store.__QWIK_SSR_PERF__.push({ id, ...entry });
+  return store.__QWIK_SSR_PERF__.length - 1;
+};
+
+const __qwik_perf_commit_ssr__ = (store, entry) => {
+  store.__QWIK_SSR_PERF__ = store.__QWIK_SSR_PERF__ || [];
+
+  // Upsert by key (viteId preferred, otherwise component). Keep only the latest entry per key,
+  // but also attach an ever-increasing ssrCount so we can see how many times it rendered.
+  store.__QWIK_SSR_PERF_INDEX__ = store.__QWIK_SSR_PERF_INDEX__ || {};
+  store.__QWIK_SSR_PERF_COUNT__ = store.__QWIK_SSR_PERF_COUNT__ || {};
+
+  const key = (entry && (entry.viteId || entry.component)) || 'unknown';
+  const nextCount = (store.__QWIK_SSR_PERF_COUNT__[key] || 0) + 1;
+  store.__QWIK_SSR_PERF_COUNT__[key] = nextCount;
+
+  const next = { ...entry, ssrCount: nextCount };
+  const existingIdx = store.__QWIK_SSR_PERF_INDEX__[key];
+
+  if (typeof existingIdx === 'number') {
+    const prev = store.__QWIK_SSR_PERF__[existingIdx];
+    store.__QWIK_SSR_PERF__[existingIdx] = { id: prev?.id, ...next };
+  } else {
+    store.__QWIK_SSR_PERF_INDEX__[key] = __qwik_perf_ssr_push__(store, next);
+  }
+};
+
+const __qwik_perf_commit_csr__ = (entry) => {
+  __qwik_perf_init_csr__();
+  const perf = window.__QWIK_PERF__;
+  const next = { id: __qwik_perf_next_id__(perf), ...entry };
+
+  // If viteId exists we treat it as an "upsert" record (render-function modules).
+  if (entry && entry.viteId) {
+    const idx = perf._csrByViteId[entry.viteId];
+    if (typeof idx === 'number') perf.csr[idx] = next;
+    else {
+      perf._csrByViteId[entry.viteId] = perf.csr.length;
+      perf.csr.push(next);
+    }
+    return;
+  }
+
+  perf.csr.push(next);
+};
+
+// Force componentQrl entries to be treated as SSR records.
+// - On SSR: store into process/globalThis __QWIK_SSR_PERF__ (same as other SSR entries)
+// - On CSR: store into window.__QWIK_PERF__.ssr (so csr only contains render-function modules)
+const __qwik_perf_commit_componentqrl__ = (entry) => {
+  const next = { ...entry, phase: 'ssr'};
+  if (__qwik_perf_is_server__()) {
+    const store = __qwik_perf_get_ssr_store__();
+    __qwik_perf_commit_ssr__(store, next);
+    return;
+  }
+
+  __qwik_perf_init_csr__();
+  const perf = window.__QWIK_PERF__;
+  perf.ssr = perf.ssr || [];
+  // Build index lazily from any SSR-injected snapshot
+  if (!perf._ssrIndexBuilt) {
+    for (let i = 0; i < perf.ssr.length; i++) {
+      const e = perf.ssr[i];
+      if (e && e.component && typeof perf._ssrByComponent[e.component] !== 'number') {
+        perf._ssrByComponent[e.component] = i;
+      }
+    }
+    perf._ssrIndexBuilt = true;
+  }
+
+  const key = next && next.component;
+  const idx = key ? perf._ssrByComponent[key] : undefined;
+  if (typeof idx === 'number') {
+    const prev = perf.ssr[idx];
+    const prevCount = prev && typeof prev.ssrCount === 'number' ? prev.ssrCount : 0;
+    const ssrCount = prevCount + 1;
+    perf.ssr[idx] = { id: prev && prev.id, ...next, ssrCount };
+  } else {
+    const id = __qwik_perf_next_id__(perf);
+    if (key) perf._ssrByComponent[key] = perf.ssr.length;
+    perf.ssr.push({ id, ...next, ssrCount: 1 });
+  }
+};
+
+const __qwik_perf_commit__ = (entry) => {
+  if (__qwik_perf_is_server__()) {
+    const store = __qwik_perf_get_ssr_store__();
+    __qwik_perf_commit_ssr__(store, entry);
+  } else {
+    __qwik_perf_commit_csr__(entry);
+  }
+};
+`;
+
+export default perfRuntime;
+
+
diff --git a/packages/plugin/src/virtualmodules/qwikComponentProxy.ts b/packages/plugin/src/virtualmodules/qwikComponentProxy.ts
new file mode 100644
index 0000000..ed19b82
--- /dev/null
+++ b/packages/plugin/src/virtualmodules/qwikComponentProxy.ts
@@ -0,0 +1,53 @@
+/**
+ * Virtual module source for perf tracking of Qwik's `componentQrl`.
+ *
+ * This module is loaded via the devtools plugin virtual-module registry
+ * (`virtualmodules/virtualModules.ts`) and is imported from:
+ * - `virtual:qwik-component-proxy`
+ */
+import perfRuntime from './perfRuntime';
+
+const qwikComponentProxy = `${perfRuntime}
+import { componentQrl as originalComponentQrl } from '@qwik.dev/core';
+
+function componentQrl(qrl, options) {
+  const phase = __qwik_perf_is_server__() ? 'ssr' : 'csr';
+  const start = performance.now();
+  let viteId = null;
+  const component = qrl?.getSymbol?.() || qrl?.$symbol$ || 'unknown';
+  if(qrl.dev){
+    viteId = qrl.dev.file.replace(/[^/]*$/, qrl.dev.displayName);
+  }
+  try {
+    const result = originalComponentQrl(qrl, options);
+    const duration = performance.now() - start;
+    __qwik_perf_commit_componentqrl__({
+      component,
+      phase,
+      duration,
+      start,  
+      viteId,
+      end: start + duration,
+    });
+    return result;
+  } catch (err) {
+    const duration = performance.now() - start;
+    __qwik_perf_commit_componentqrl__({
+      component,
+      phase,
+      duration,
+      start,
+      viteId,
+      end: start + duration,
+      error: __qwik_perf_to_error__(err),
+    });
+    throw err;
+  }
+}
+
+export { componentQrl };
+`;
+
+export default qwikComponentProxy;
+
+
diff --git a/packages/plugin/src/virtualmodules/useCollectHooks.ts b/packages/plugin/src/virtualmodules/useCollectHooks.ts
new file mode 100644
index 0000000..a6ead6a
--- /dev/null
+++ b/packages/plugin/src/virtualmodules/useCollectHooks.ts
@@ -0,0 +1,44 @@
+/**
+ * Virtual module source for devtools tracking.
+ * Collects hooks and tracks render statistics.
+ */
+const useCollectHooks = `import { $, useSignal, useVisibleTask$ } from "@qwik.dev/core"
+
+function initComponentState() {
+  return {
+    hooks: [],
+    stats: {}
+  }
+}
+
+function getOrCreateState(src) {
+  if (!window.QWIK_DEVTOOLS_GLOBAL_STATE) {
+    window.QWIK_DEVTOOLS_GLOBAL_STATE = {}
+  }
+  if (!window.QWIK_DEVTOOLS_GLOBAL_STATE[src]) {
+    window.QWIK_DEVTOOLS_GLOBAL_STATE[src] = initComponentState()
+  }
+  return window.QWIK_DEVTOOLS_GLOBAL_STATE[src]
+}
+
+/**
+ * Hook to collect component hooks
+ */
+export const useCollectHooks = (src) => {
+  const hooksList = useSignal(new Set())
+  useVisibleTask$(({ track }) => {
+    const newHooks = track(() => hooksList.value)
+    const state = getOrCreateState(src)
+    state.hooks = [...newHooks]
+  }, { strategy: 'document-ready' })
+  
+  return $((args) => {
+    if (hooksList.value.has(args)) {
+      return
+    }
+    hooksList.value.add(args)
+  })
+}
+`
+
+export default useCollectHooks
diff --git a/packages/plugin/src/virtualmodules/virtualModules.ts b/packages/plugin/src/virtualmodules/virtualModules.ts
new file mode 100644
index 0000000..25587a2
--- /dev/null
+++ b/packages/plugin/src/virtualmodules/virtualModules.ts
@@ -0,0 +1,91 @@
+import { VIRTUAL_QWIK_DEVTOOLS_KEY, INNER_USE_HOOK } from '@devtools/kit';
+import useCollectHooksSource from './useCollectHooks';
+import qwikComponentProxySource from './qwikComponentProxy';
+import { parseQwikCode } from '../parse/parse';
+import { debug } from 'debug';
+
+const log = debug('qwik:devtools:plugin');
+
+// ============================================================================
+// Types & Configuration
+// ============================================================================
+
+export interface VirtualModuleConfig {
+  key: string;
+  source: string;
+  hookName: string;
+}
+
+export const VIRTUAL_MODULES: VirtualModuleConfig[] = [
+  {
+    key: VIRTUAL_QWIK_DEVTOOLS_KEY,
+    source: useCollectHooksSource,
+    hookName: INNER_USE_HOOK,
+  },
+  {
+    // Perf tracking: used by `plugin/statistics.ts` to rewrite `componentQrl` imports
+    key: 'virtual:qwik-component-proxy',
+    source: qwikComponentProxySource,
+    hookName: '',
+  }
+];
+
+// ============================================================================
+// Virtual Module Helpers
+// ============================================================================
+
+export function normalizeId(id: string): string {
+  return id.split('?')[0].split('#')[0];
+}
+
+export function getIdVariations(key: string): string[] {
+  return [key, `/${key}`, `\u0000${key}`, `/@id/${key}`];
+}
+
+export function isVirtualId(id: string, key: string): boolean {
+  return getIdVariations(key).includes(normalizeId(id));
+}
+
+export function findVirtualModule(id: string): VirtualModuleConfig | undefined {
+  return VIRTUAL_MODULES.find((module) => isVirtualId(id, module.key));
+}
+
+// ============================================================================
+// Code Transform Helpers
+// ============================================================================
+
+function injectImportIfMissing(code: string, key: string, hookName: string): string {
+  if (!code.includes(key)) {
+    return `import { ${hookName} } from '${key}';\n${code}`;
+  }
+  log('importing virtual qwik devtools', key, code);
+  return code;
+}
+
+export function transformComponentFile(code: string, id: string): string {
+  // Inject useCollectHooks import
+  code = injectImportIfMissing(code, VIRTUAL_QWIK_DEVTOOLS_KEY, INNER_USE_HOOK);
+  // Parse and transform the Qwik code
+  return parseQwikCode(code, { path: id });
+}
+
+export function transformRootFile(code: string): string {
+  const mode = process.env.MODE;
+  const importPath = mode === 'dev' ? '@devtools/ui' : '@qwik.dev/devtools/ui';
+
+  // Add QwikDevtools import if not present
+  if (!code.includes(importPath)) {
+    code = `import { QwikDevtools } from '${importPath}';\n${code}`;
+  }
+
+  // Inject QwikDevtools component before closing body tag
+  const bodyMatch = code.match(/<body[^>]*>([\s\S]*?)<\/body>/);
+  if (bodyMatch) {
+    const bodyContent = bodyMatch[1];
+    const newBodyContent = `${bodyContent}\n        <QwikDevtools />`;
+    code = code.replace(bodyContent, newBodyContent);
+  }
+
+  return code;
+}
+
diff --git a/packages/ui/src/devtools.tsx b/packages/ui/src/devtools.tsx
index 61be4a8..f887059 100644
--- a/packages/ui/src/devtools.tsx
+++ b/packages/ui/src/devtools.tsx
@@ -13,6 +13,7 @@ import {
   HiMegaphoneMini,
   HiCubeOutline,
   HiCodeBracketSolid,
+  HiClockOutline
 } from '@qwikest/icons/heroicons';
 import { BsDiagram3 } from '@qwikest/icons/bootstrap';
 import { LuFolderTree } from '@qwikest/icons/lucide';
@@ -40,6 +41,7 @@ import { Inspect } from './features/inspect/Inspect';
 import { QwikThemeToggle } from './components/ThemeToggle/QwikThemeToggle';
 import { ThemeScript as QwikThemeScript } from './components/ThemeToggle/theme-script';
 import { CodeBreack } from './features/CodeBreack/CodeBreack';
+import { Performance } from './features/Performance/Performance';
 import { debug } from 'debug';
 
 const log = debug('qwik:devtools:devtools');
@@ -182,9 +184,12 @@ export const QwikDevtools = component$(() => {
               <Tab state={state} id="inspect" title="inspect">
                 <HiMegaphoneMini class="h-5 w-5" />
               </Tab>
-              <Tab state={state} id="codeBreack" title="codeBreack">
+              <Tab state={state} id="codeBreack" title="CodeBreack">
                 <HiCodeBracketSolid class="h-5 w-5" />
               </Tab>
+              <Tab state={state} id="performance" title="Performance">
+                <HiClockOutline class="h-5 w-5" />
+              </Tab>
               <div class="mt-auto">
                 <QwikThemeToggle />
               </div>
@@ -255,6 +260,12 @@ export const QwikDevtools = component$(() => {
                   <CodeBreack q:slot="content" />
                 </TabContent>
               )}
+              {state.activeTab === 'performance' && (
+                <TabContent>
+                  <TabTitle title="performance" q:slot="title" />
+                  <Performance q:slot="content" />
+                </TabContent>
+              )}
             </div>
           </DevtoolsPanel>
         )}
diff --git a/packages/ui/src/features/Performance/Performance.tsx b/packages/ui/src/features/Performance/Performance.tsx
new file mode 100644
index 0000000..5590671
--- /dev/null
+++ b/packages/ui/src/features/Performance/Performance.tsx
@@ -0,0 +1,192 @@
+import { component$, useComputed$, useSignal, useTask$, $, isBrowser } from '@qwik.dev/core';
+import type { QwikPerfStoreRemembered } from '@devtools/kit';
+import { computeEventRows, computePerfViewModel } from './computePerfViewModel';
+
+function formatMs(ms: number): string {
+  if (!Number.isFinite(ms)) return '-';
+  if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`;
+  if (ms >= 10) return `${ms.toFixed(0)}ms`;
+  return `${ms.toFixed(2)}ms`;
+}
+
+export const Performance = component$(() => {
+  const perf = useSignal<QwikPerfStoreRemembered | null>(null);
+  const selectedComponent = useSignal<string | null>(null);
+
+  useTask$(() => {
+    if (!isBrowser) return;
+    perf.value = window.__QWIK_PERF__ || { ssr: [], csr: [] };
+  });
+
+  const vm = useComputed$(() => computePerfViewModel(perf.value));
+
+  const selectedVm = useComputed$(() => {
+    const name = selectedComponent.value;
+    if (!name) return null;
+    return vm.value.components.find((c) => c.componentName === name) || null;
+  });
+
+  const onSelect = $((name: string) => {
+    selectedComponent.value = name;
+  });
+
+  const clearSelect = $(() => {
+    selectedComponent.value = null;
+  });
+
+  return (
+    <div class="h-full w-full flex-1 overflow-hidden">
+      {!perf.value?.ssr?.length && !perf.value?.csr?.length ? (
+        <div class="border-border bg-card-item-bg flex h-full items-center justify-center rounded-xl border p-8">
+          <div class="text-muted-foreground text-center text-sm">
+            No performance data found.
+            <div class="mt-1 text-xs">
+              Ensure instrumentation is enabled and interact with the app, then reopen this tab.
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div class="flex h-full min-h-0 flex-col gap-4">
+          {/* Overview cards */}
+          <div class="grid grid-cols-1 gap-5 md:grid-cols-4">
+            <div class="border-border bg-card-item-bg hover:bg-card-item-hover-bg flex items-center gap-4 rounded-xl border p-5 transition-all duration-200">
+              <div class="flex-1">
+                <div class="text-muted-foreground text-xs font-medium">TOTAL RENDER TIME</div>
+                <div class="mt-1 text-3xl font-semibold">{formatMs(vm.value.overview.totalRenderTime)}</div>
+              </div>
+            </div>
+
+            <div class="border-border bg-card-item-bg hover:bg-card-item-hover-bg flex items-center gap-4 rounded-xl border p-5 transition-all duration-200">
+              <div class="flex-1">
+                <div class="text-muted-foreground text-xs font-medium">SLOWEST COMPONENT</div>
+                <div class="mt-1 text-lg font-semibold">
+                  {vm.value.overview.slowestComponent?.componentName || '-'}
+                </div>
+                <div class="text-muted-foreground mt-1 text-xs">
+                  {vm.value.overview.slowestComponent
+                    ? `${formatMs(vm.value.overview.slowestComponent.avgTime)} avg`
+                    : '-'}
+                </div>
+              </div>
+            </div>
+
+            <div class="border-border bg-card-item-bg hover:bg-card-item-hover-bg flex items-center gap-4 rounded-xl border p-5 transition-all duration-200">
+              <div class="flex-1">
+                <div class="text-muted-foreground text-xs font-medium">AVG TIME</div>
+                <div class="mt-1 text-3xl font-semibold">{formatMs(vm.value.overview.avgTime)}</div>
+              </div>
+            </div>
+
+            <div class="border-border bg-card-item-bg hover:bg-card-item-hover-bg flex items-center gap-4 rounded-xl border p-5 transition-all duration-200">
+              <div class="flex-1">
+                <div class="text-muted-foreground text-xs font-medium">TOTAL CALLS</div>
+                <div class="mt-1 text-3xl font-semibold">{vm.value.overview.totalCalls}</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Main split */}
+          <div class="border-border bg-background flex min-h-0 flex-1 overflow-hidden rounded-md border">
+            <div class="min-h-0 flex-1 overflow-y-auto p-4">
+              <div class="mb-3 flex items-center justify-between">
+                <div>
+                  <div class="text-lg font-semibold">Components</div>
+                  <div class="text-muted-foreground text-xs">
+                    CSR only • {vm.value.components.length} total
+                  </div>
+                </div>
+              </div>
+
+              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                {vm.value.components.map((c) => {
+                  const selected = selectedComponent.value === c.componentName;
+                  return (
+                    <button
+                      key={c.componentName}
+                      onClick$={() => onSelect(c.componentName)}
+                      class={[
+                        'border-border bg-card-item-bg hover:bg-card-item-hover-bg w-full rounded-xl border p-4 text-left transition-all duration-200 hover:-translate-y-0.5',
+                        selected ? 'ring-primary-active ring-2' : '',
+                      ].join(' ')}
+                    >
+                      <div class="flex items-start justify-between gap-4">
+                        <div class="min-w-0 flex-1">
+                          <div class="truncate text-base font-semibold">{c.componentName}</div>
+                          <div class="text-muted-foreground mt-1 text-xs">
+                            Avg: {formatMs(c.avgTime)}
+                          </div>
+                        </div>
+                        <div class="shrink-0 text-right">
+                          <div class="text-primary text-lg font-semibold">{formatMs(c.totalTime)}</div>
+                          <div class="text-muted-foreground text-xs">
+                            SSR: {typeof c.ssr?.ssrCount === 'number' ? c.ssr.ssrCount : '-'}
+                          </div>
+                        </div>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div class="border-border border-l" />
+
+            <div class="flex w-[420px] min-w-[320px] flex-col overflow-hidden">
+              {selectedVm.value ? (
+                <>
+                  <div class="border-border flex items-center justify-between border-b p-4">
+                    <div class="min-w-0">
+                      <div class="truncate text-base font-semibold">
+                        {selectedVm.value.componentName} Hook Details
+                      </div>
+                      <div class="text-muted-foreground mt-1 text-xs">
+                        Total: {formatMs(selectedVm.value.totalTime)} • {selectedVm.value.calls} calls
+                      </div>
+                    </div>
+                    <button
+                      aria-label="close"
+                      onClick$={clearSelect}
+                      class="text-muted-foreground hover:text-foreground rounded p-2 transition-colors"
+                    >
+                      ✕
+                    </button>
+                  </div>
+
+                  <div class="min-h-0 flex-1 overflow-y-auto p-4">
+                    <div class="border-border bg-card-item-bg rounded-lg border">
+                      <div class="border-border grid grid-cols-3 border-b px-3 py-2 text-xs font-medium">
+                        <div class="text-muted-foreground">HOOK NAME</div>
+                        <div class="text-muted-foreground text-right">TIME</div>
+                        <div class="text-muted-foreground text-right">CALLS</div>
+                      </div>
+                      <div class="divide-border divide-y">
+                        {computeEventRows(selectedVm.value.csrItems).map((row) => (
+                          <div key={row.eventName} class="grid grid-cols-3 px-3 py-2 text-sm">
+                            <div class="truncate">{row.eventName}</div>
+                            <div class="text-right">{formatMs(row.time)}</div>
+                            <div class="text-right">{row.calls}</div>
+                          </div>
+                        ))}
+                        {!selectedVm.value.csrItems.length && (
+                          <div class="text-muted-foreground px-3 py-4 text-center text-sm">
+                            No CSR records for this component.
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <div class="flex h-full items-center justify-center p-8">
+                  <div class="text-muted-foreground text-center text-sm">
+                    Select a component to view hook details.
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/packages/ui/src/features/Performance/computePerfViewModel.test.ts b/packages/ui/src/features/Performance/computePerfViewModel.test.ts
new file mode 100644
index 0000000..57f0b4a
--- /dev/null
+++ b/packages/ui/src/features/Performance/computePerfViewModel.test.ts
@@ -0,0 +1,121 @@
+import { describe, expect, it } from 'vitest';
+import { computeEventRows, computePerfViewModel } from './computePerfViewModel';
+import type { QwikPerfStoreRemembered } from '@devtools/kit';
+
+describe('computePerfViewModel', () => {
+  it('prefers ssr list when present and groups csr via _component_ prefix', () => {
+    const ssrButton = {
+      id: 1,
+      component: 'Button_component_hash',
+      phase: 'ssr' as const,
+      duration: 0,
+      start: 0,
+      end: 0,
+      ssrCount: 1,
+    };
+
+    const data: QwikPerfStoreRemembered = {
+      ssr: [ssrButton],
+      csr: [
+        {
+          id: 10,
+          component: 'Button_component_qwikContainer_useComputed_abc',
+          phase: 'csr',
+          duration: 4,
+          start: 0,
+          end: 4,
+          renderCount: 2,
+        },
+        {
+          id: 11,
+          component: 'Button_component_hash',
+          phase: 'csr',
+          duration: 6,
+          start: 0,
+          end: 6,
+          renderCount: 1,
+        },
+      ],
+    };
+
+    const vm = computePerfViewModel(data);
+    expect(vm.components.map((c) => c.componentName)).toEqual(['Button']);
+    expect(vm.components[0].calls).toBe(3);
+    expect(vm.components[0].totalTime).toBe(10);
+  });
+
+  it('falls back to csr-only grouping by componentName when ssr is empty', () => {
+    const data: QwikPerfStoreRemembered = {
+      ssr: [],
+      csr: [
+        {
+          id: 1,
+          component: 'A_component_x_useEffect_1',
+          phase: 'csr',
+          duration: 1,
+          start: 0,
+          end: 1,
+        },
+        {
+          id: 2,
+          component: 'A_component_x_onClick_2',
+          phase: 'csr',
+          duration: 2,
+          start: 0,
+          end: 2,
+          renderCount: 3,
+        },
+        {
+          id: 3,
+          component: 'B_component_y',
+          phase: 'csr',
+          duration: 5,
+          start: 0,
+          end: 5,
+        },
+      ],
+    };
+
+    const vm = computePerfViewModel(data);
+    expect(vm.components.map((c) => c.componentName).sort()).toEqual(['A', 'B']);
+    const a = vm.components.find((c) => c.componentName === 'A')!;
+    expect(a.totalTime).toBe(3);
+    expect(a.calls).toBe(4);
+  });
+});
+
+describe('computeEventRows', () => {
+  it('uses render when eventName is missing and uses renderCount as calls fallback', () => {
+    const rows = computeEventRows([
+      {
+        id: 1,
+        component: 'A_component_x',
+        componentName: 'A',
+        phase: 'csr',
+        duration: 2,
+        start: 0,
+        end: 2,
+        // no eventName -> render
+      } as any,
+      {
+        id: 2,
+        component: 'A_component_x_useEffect_1',
+        componentName: 'A',
+        eventName: 'useEffect',
+        phase: 'csr',
+        duration: 1,
+        start: 0,
+        end: 1,
+        renderCount: 3,
+      } as any,
+    ]);
+
+    const byName = new Map(rows.map((r) => [r.eventName, r]));
+    expect(byName.get('render')?.calls).toBe(1);
+    expect(byName.get('render')?.time).toBe(2);
+    expect(byName.get('useEffect')?.calls).toBe(3);
+    expect(byName.get('useEffect')?.time).toBe(1);
+  });
+});
+
+
diff --git a/packages/ui/src/features/Performance/computePerfViewModel.ts b/packages/ui/src/features/Performance/computePerfViewModel.ts
new file mode 100644
index 0000000..6e1ceff
--- /dev/null
+++ b/packages/ui/src/features/Performance/computePerfViewModel.ts
@@ -0,0 +1,127 @@
+import type { QwikPerfStoreRemembered } from '@devtools/kit';
+import { groupCsrBySsr, parseComponentAndEventName, type PerfGroupedCsrItem, type PerfSsrItem } from './transformPerformanceData';
+
+export type PerfPayload = QwikPerfStoreRemembered;
+
+export interface PerfOverviewVm {
+  totalRenderTime: number;
+  totalCalls: number;
+  avgTime: number;
+  slowestComponent?: {
+    componentName: string;
+    avgTime: number;
+    totalTime: number;
+    calls: number;
+  };
+}
+
+export interface PerfComponentVm {
+  componentName: string;
+  totalTime: number;
+  calls: number;
+  avgTime: number;
+  ssr?: PerfSsrItem;
+  csrItems: PerfGroupedCsrItem[];
+}
+
+export interface PerfEventVm {
+  eventName: string;
+  time: number;
+  calls: number;
+}
+
+export interface PerfViewModel {
+  overview: PerfOverviewVm;
+  components: PerfComponentVm[];
+}
+
+function getCallsFromCsr(item: PerfGroupedCsrItem): number {
+  return typeof item.renderCount === 'number' ? item.renderCount : 1;
+}
+
+export function computeEventRows(csrItems: PerfGroupedCsrItem[]): PerfEventVm[] {
+  const byEvent = new Map<string, { time: number; calls: number }>();
+  for (const item of csrItems) {
+    const eventName = item.eventName || 'render';
+    const prev = byEvent.get(eventName) || { time: 0, calls: 0 };
+    prev.time += item.duration || 0;
+    prev.calls += getCallsFromCsr(item);
+    byEvent.set(eventName, prev);
+  }
+  return [...byEvent.entries()]
+    .map(([eventName, v]) => ({ eventName, time: v.time, calls: v.calls }))
+    .sort((a, b) => b.time - a.time);
+}
+
+function computeComponentVmFromCsr(componentName: string, csrItems: PerfGroupedCsrItem[], ssr?: PerfSsrItem): PerfComponentVm {
+  let totalTime = 0;
+  let calls = 0;
+  for (const item of csrItems) {
+    totalTime += item.duration || 0;
+    calls += getCallsFromCsr(item);
+  }
+  const avgTime = calls > 0 ? totalTime / calls : 0;
+  return { componentName, totalTime, calls, avgTime, ssr, csrItems };
+}
+
+export function computePerfViewModel(perf: PerfPayload | undefined | null): PerfViewModel {
+  const safe: PerfPayload = perf || { ssr: [], csr: [] };
+
+  const components: PerfComponentVm[] = [];
+
+  if (safe.ssr?.length) {
+    const grouped = groupCsrBySsr(safe);
+    for (const ssrItem of safe.ssr as PerfSsrItem[]) {
+      const componentName = parseComponentAndEventName(ssrItem.component).componentName;
+      const csrItems = grouped.get(ssrItem as PerfSsrItem) || [];
+      components.push(computeComponentVmFromCsr(componentName, csrItems, ssrItem as PerfSsrItem));
+    }
+  } else if (safe.csr?.length) {
+    const byName = new Map<string, PerfGroupedCsrItem[]>();
+    for (const csrItem of safe.csr as any[]) {
+      const parsed = parseComponentAndEventName(csrItem.component);
+      const list = byName.get(parsed.componentName) || [];
+      list.push({ ...csrItem, ...parsed });
+      byName.set(parsed.componentName, list);
+    }
+    for (const [componentName, csrItems] of byName.entries()) {
+      components.push(computeComponentVmFromCsr(componentName, csrItems));
+    }
+  }
+
+  // Sort components by total time (desc) to make the list useful.
+  components.sort((a, b) => b.totalTime - a.totalTime);
+
+  let totalRenderTime = 0;
+  let totalCalls = 0;
+  for (const c of components) {
+    totalRenderTime += c.totalTime;
+    totalCalls += c.calls;
+  }
+  const avgTime = totalCalls > 0 ? totalRenderTime / totalCalls : 0;
+
+  const slowest = components
+    .filter((c) => c.calls > 0)
+    .reduce<PerfComponentVm | undefined>((acc, cur) => {
+      if (!acc) return cur;
+      return cur.avgTime > acc.avgTime ? cur : acc;
+    }, undefined);
+
+  const overview: PerfOverviewVm = {
+    totalRenderTime,
+    totalCalls,
+    avgTime,
+    slowestComponent: slowest
+      ? {
+          componentName: slowest.componentName,
+          avgTime: slowest.avgTime,
+          totalTime: slowest.totalTime,
+          calls: slowest.calls,
+        }
+      : undefined,
+  };
+
+  return { overview, components };
+}
+
+
diff --git a/packages/ui/src/features/Performance/transformPerformanceData.test.ts b/packages/ui/src/features/Performance/transformPerformanceData.test.ts
new file mode 100644
index 0000000..9a3e4f3
--- /dev/null
+++ b/packages/ui/src/features/Performance/transformPerformanceData.test.ts
@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest';
+import { groupCsrBySsr } from './transformPerformanceData';
+import type { QwikPerfStoreRemembered } from '@devtools/kit';
+
+describe('groupCsrBySsr', () => {
+  it('groups CSR by SSR via `_component_` prefix (hook/event style + component instance style)', () => {
+    const ssrButton = {
+      id: 4,
+      component: 'Button_component_4n7uUfcfzUA',
+      phase: 'ssr' as const,
+      duration: 0.1,
+      start: 1,
+      end: 1.1,
+      ssrCount: 2,
+    };
+
+    const ssrRoutes = {
+      id: 9,
+      component: 'routes_component_SvRQF1kT0DY',
+      phase: 'ssr' as const,
+      duration: 0.002,
+      start: 2,
+      end: 2.002,
+      ssrCount: 1,
+    };
+
+    const data: QwikPerfStoreRemembered = {
+      ssr: [ssrButton, ssrRoutes],
+      csr: [
+        {
+          id: 15,
+          component: 'Button_component_qwikContainer_useComputed_U4doJ1SoX6Y',
+          phase: 'csr',
+          duration: 0.1,
+          start: 10,
+          end: 10.1,
+          renderCount: 1,
+        },
+        {
+          id: 16,
+          component: 'Button_component_4n7uUfcfzUA',
+          phase: 'csr',
+          duration: 0.5,
+          start: 11,
+          end: 11.5,
+          renderCount: 2,
+        },
+        {
+          id: 11,
+          component: 'routes_component_Fragment_Button_onClick_XvXtXTjQY2A',
+          phase: 'csr',
+          duration: 0,
+          start: 20,
+          end: 20,
+          renderCount: 1,
+        },
+      ],
+    };
+
+    const result = groupCsrBySsr(data);
+
+    const buttonList = result.get(ssrButton);
+    const routesList = result.get(ssrRoutes);
+
+    expect(buttonList).toBeDefined();
+    expect(routesList).toBeDefined();
+
+    expect(buttonList!.map((x) => x.id)).toEqual([15, 16]);
+    expect(buttonList![0].componentName).toBe('Button');
+    expect(buttonList![0].eventName).toBe('useComputed');
+    expect(buttonList![1].componentName).toBe('Button');
+    expect(buttonList![1].eventName).toBeUndefined();
+
+    expect(routesList!.map((x) => x.id)).toEqual([11]);
+    expect(routesList![0].componentName).toBe('routes');
+    expect(routesList![0].eventName).toBe('onClick');
+  });
+
+  it('drops unmatched CSR but still initializes SSR keys with empty arrays', () => {
+    const ssrOnly = {
+      id: 1,
+      component: 'Only_component_hash',
+      phase: 'ssr' as const,
+      duration: 0.01,
+      start: 1,
+      end: 1.01,
+      ssrCount: 1,
+    };
+
+    const data: QwikPerfStoreRemembered = {
+      ssr: [ssrOnly],
+      csr: [
+        {
+          id: 999,
+          component: 'NoMatch_component_xxx',
+          phase: 'csr',
+          duration: 0,
+          start: 0,
+          end: 0,
+          renderCount: 1,
+        },
+      ],
+    };
+
+    const result = groupCsrBySsr(data);
+    expect(result.get(ssrOnly)).toEqual([]);
+  });
+});
+
+
diff --git a/packages/ui/src/features/Performance/transformPerformanceData.ts b/packages/ui/src/features/Performance/transformPerformanceData.ts
new file mode 100644
index 0000000..b61b87f
--- /dev/null
+++ b/packages/ui/src/features/Performance/transformPerformanceData.ts
@@ -0,0 +1,51 @@
+import type { QwikPerfEntryRemembered, QwikPerfStoreRemembered } from '@devtools/kit';
+
+export type PerfPayload = QwikPerfStoreRemembered;
+// Note: runtime instrumentation attaches `ssrCount` to SSR entries (see plugin perf runtime).
+export type PerfSsrItem = QwikPerfEntryRemembered & { phase: 'ssr'; ssrCount?: number };
+export type PerfCsrItem = QwikPerfEntryRemembered & { phase: 'csr' };
+
+export interface PerfParsedNames {
+  componentName: string;
+  eventName?: string;
+}
+
+export function parseComponentAndEventName(component: string): PerfParsedNames {
+  const componentName = (component?.split('_component_')[0] ?? component) || '';
+  const rest = component.includes('_component_') ? component.split('_component_')[1] ?? '' : '';
+  const parts = rest.split('_').filter(Boolean);
+  const eventName = parts.find((p) => /^use[A-Z_]/.test(p) || /^on[A-Z_]/.test(p));
+  return { componentName, eventName };
+}
+
+/**
+ * Groups CSR records by SSR component name (split by `_component_`).
+ * - key: the SSR item object reference (WeakMap key)
+ * - value: CSR list belonging to that SSR component
+ * - unmatched CSR items: dropped
+ */
+export type PerfGroupedCsrItem = PerfCsrItem & PerfParsedNames;
+
+export function groupCsrBySsr(data: PerfPayload): WeakMap<PerfSsrItem, PerfGroupedCsrItem[]> {
+  const ssrByName = new Map<string, PerfSsrItem>();
+  for (const ssrItem of data.ssr) {
+    // Trust runtime shape: SSR entries should have phase 'ssr'
+    ssrByName.set(parseComponentAndEventName(ssrItem.component).componentName, ssrItem as PerfSsrItem);
+  }
+
+  const result = new WeakMap<PerfSsrItem, PerfGroupedCsrItem[]>();
+  for (const ssrItem of data.ssr) {
+    result.set(ssrItem as PerfSsrItem, []);
+  }
+
+  for (const csrItem of data.csr) {
+    const parsed = parseComponentAndEventName(csrItem.component);
+    const ssrItem = ssrByName.get(parsed.componentName);
+    if (!ssrItem) continue;
+    result.get(ssrItem)!.push({ ...(csrItem as PerfCsrItem), ...parsed });
+  }
+
+  return result;
+}
+
+
diff --git a/packages/ui/src/features/RenderTree/HookDataStore.ts b/packages/ui/src/features/RenderTree/HookDataStore.ts
deleted file mode 100644
index fc7ee12..0000000
--- a/packages/ui/src/features/RenderTree/HookDataStore.ts
+++ /dev/null
@@ -1,290 +0,0 @@
-import type { TreeNode } from '../../components/Tree/Tree';
-import {
-  CAPTURE_REF_KEY,
-  CHUNK_KEY,
-  COMPUTED_QRL_KEY,
-  QRL_KEY,
-} from '@devtools/kit';
-import type { QRL } from '@qwik.dev/core';
-import {
-  HOOK_TYPES,
-  HIDDEN_HOOKS,
-  QRL_HOOKS,
-  type HookType,
-  type HookFilterItem,
-} from './types';
-import { TreeBuilder } from './TreeBuilder';
-
-/**
- * Store for managing hook data collected from components.
- * Replaces the previous module-level global state.
- */
-export class HookDataStore {
-  private data: Map<HookType, Set<unknown>> = new Map();
-  private visibilityConfig: Map<HookType, boolean> = new Map();
-
-  constructor() {
-    this.initializeStore();
-  }
-
-  private initializeStore(): void {
-    for (const hookType of HOOK_TYPES) {
-      this.data.set(hookType, new Set());
-      this.visibilityConfig.set(hookType, !HIDDEN_HOOKS.includes(hookType));
-    }
-  }
-
-  /**
-   * Add data for a specific hook type
-   */
-  add(type: HookType, entry: unknown): void {
-    const set = this.data.get(type);
-    if (set) {
-      set.add(entry);
-    }
-  }
-
-  /**
-   * Get all entries for a specific hook type
-   */
-  get(type: HookType): unknown[] {
-    return [...(this.data.get(type) ?? [])];
-  }
-
-  /**
-   * Get all data as a plain object
-   */
-  getAll(): Record<HookType, unknown[]> {
-    const result = {} as Record<HookType, unknown[]>;
-    for (const [type, set] of this.data) {
-      result[type] = [...set];
-    }
-    return result;
-  }
-
-  /**
-   * Check if a hook type has any data
-   */
-  has(type: HookType): boolean {
-    return (this.data.get(type)?.size ?? 0) > 0;
-  }
-
-  /**
-   * Clear all stored data
-   */
-  clear(): void {
-    for (const set of this.data.values()) {
-      set.clear();
-    }
-  }
-
-  /**
-   * Set visibility for a hook type
-   */
-  setVisibility(type: HookType, visible: boolean): void {
-    this.visibilityConfig.set(type, visible);
-  }
-
-  /**
-   * Check if a hook type is visible
-   */
-  isVisible(type: HookType): boolean {
-    return this.visibilityConfig.get(type) ?? true;
-  }
-
-  /**
-   * Get filter list for UI
-   */
-  getFilterList(): HookFilterItem[] {
-    return HOOK_TYPES.filter(
-      (type) => this.has(type) && this.isVisible(type),
-    ).map((key) => ({
-      key,
-      display: this.isVisible(key),
-    }));
-  }
-
-  /**
-   * Build tree nodes from stored data
-   */
-  buildTree(): TreeNode[] {
-    const builder = new TreeBuilder();
-    const result: TreeNode[] = [];
-
-    for (const hookType of HOOK_TYPES) {
-      if (!this.has(hookType) || !this.isVisible(hookType)) {
-        continue;
-      }
-
-      const entries = this.get(hookType);
-      const nodes = this.transformEntriesToNodes(hookType, entries, builder);
-
-      if (nodes.length > 0) {
-        result.push(builder.createGroupNode(hookType, nodes));
-      }
-    }
-
-    return result;
-  }
-
-  /**
-   * Transform entries to tree nodes based on hook type
-   */
-  private transformEntriesToNodes(
-    hookType: HookType,
-    entries: unknown[],
-    builder: TreeBuilder,
-  ): TreeNode[] {
-    return entries
-      .map((entry) => this.transformSingleEntry(hookType, entry, builder))
-      .flat()
-      .filter(Boolean) as TreeNode[];
-  }
-
-  private transformSingleEntry(
-    hookType: HookType,
-    entry: unknown,
-    builder: TreeBuilder,
-  ): TreeNode[] {
-    const typedEntry = entry as Record<string, unknown>;
-
-    switch (hookType) {
-      case 'props':
-      case 'listens':
-      case 'render':
-        return builder.objectToTree(typedEntry.data as Record<string, unknown>);
-
-      case 'useTask':
-      case 'useVisibleTask': {
-        const scopeVars = this.findScopeVariables(typedEntry);
-        return builder.objectToTree({
-          [`let ${typedEntry.variableName ?? hookType} =`]: scopeVars,
-        });
-      }
-
-      case 'customhook': {
-        const captureRef = (typedEntry.data as Record<string, unknown>)?.[
-          CAPTURE_REF_KEY
-        ];
-        return builder.objectToTree({
-          [`let ${typedEntry.variableName ?? 'customhook'} = Scope `]: captureRef,
-        });
-      }
-
-      default:
-        return builder.objectToTree({
-          [`let ${typedEntry.variableName ?? hookType} =`]: typedEntry.data,
-        });
-    }
-  }
-
-  /**
-   * Find scope variables for useTask/useVisibleTask
-   */
-  private findScopeVariables(entry: Record<string, unknown>): string {
-    const targets = (entry.data as Record<string, unknown>)?.[
-      CAPTURE_REF_KEY
-    ] as unknown[] | undefined;
-
-    if (!targets) return 'Scope []';
-
-    const variableNames: string[] = [];
-
-    for (const [, set] of this.data) {
-      for (const storedEntry of set) {
-        const entryData = storedEntry as Record<string, unknown>;
-        const data = entryData?.data ?? entryData;
-        if (!data) continue;
-
-        const match = targets.find((target) => target === data);
-        if (match && entryData.variableName) {
-          variableNames.push(entryData.variableName as string);
-        }
-      }
-    }
-
-    return `Scope [${variableNames.join(', ')}]`;
-  }
-
-  /**
-   * Find all QRL paths for code lookup
-   */
-  findAllQrlPaths(): string[] {
-    const paths: string[] = [];
-
-    for (const hookType of QRL_HOOKS) {
-      const entries = this.get(hookType);
-
-      for (const entry of entries) {
-        const typedEntry = entry as Record<string, unknown>;
-        const extracted = this.extractQrlPath(hookType, typedEntry);
-        if (extracted) {
-          if (Array.isArray(extracted)) {
-            paths.push(...extracted.filter(Boolean));
-          } else {
-            paths.push(extracted);
-          }
-        }
-      }
-    }
-
-    return paths.filter(Boolean);
-  }
-
-  private extractQrlPath(
-    hookType: HookType,
-    entry: Record<string, unknown>,
-  ): string | string[] | null {
-    if (hookType === 'listens') {
-      const data = (entry.data ?? entry) as Record<string, unknown>;
-      return Object.values(data)
-        .map((v) => (v as Record<string, unknown>)?.[CHUNK_KEY] as string)
-        .filter(Boolean);
-    }
-
-    if (hookType === 'render') {
-      const renderFn =
-        (entry.data as Record<string, unknown>)?.render ?? entry;
-      return this.getQrlPath(renderFn as QRL);
-    }
-
-    const data = (entry.data ?? entry) as Record<string, unknown>;
-    const qrlObj = data[QRL_KEY] ?? data[COMPUTED_QRL_KEY];
-    return this.getQrlPath(qrlObj as QRL);
-  }
-
-  private getQrlPath(qrl: QRL | null | undefined): string | null {
-    if (!qrl) return null;
-
-    const qrlAny = qrl as unknown as Record<string, unknown>;
-    if (qrlAny.dev) {
-      return (qrlAny.dev as Record<string, string>).filename;
-    }
-    return qrlAny[CHUNK_KEY] as string | null;
-  }
-}
-
-/**
- * Get the chunk name from a QRL for component identification
- */
-export function getQrlChunkName(qrl: QRL): string {
-  const splitPoint = '_component';
-  const qrlAny = qrl as unknown as Record<string, unknown>;
-  const chunk = qrlAny[CHUNK_KEY] as string | undefined;
-  return chunk?.split(splitPoint)?.[0] ?? '';
-}
-
-// Singleton instance for global access (can be replaced with context in the future)
-let storeInstance: HookDataStore | null = null;
-
-export function getHookDataStore(): HookDataStore {
-  if (!storeInstance) {
-    storeInstance = new HookDataStore();
-  }
-  return storeInstance;
-}
-
-export function resetHookDataStore(): void {
-  storeInstance = new HookDataStore();
-}
-
diff --git a/packages/ui/src/features/RenderTree/RenderTree.tsx b/packages/ui/src/features/RenderTree/RenderTree.tsx
index 54efd38..d441253 100644
--- a/packages/ui/src/features/RenderTree/RenderTree.tsx
+++ b/packages/ui/src/features/RenderTree/RenderTree.tsx
@@ -136,9 +136,12 @@ export const RenderTree = component$(() => {
 
     codes.value = [];
 
-    const res = await rpc?.getModulesByPathIds(hookStore.value.findAllQrlPaths());
+    const res =
+      (await rpc?.getModulesByPathIds(hookStore.value.findAllQrlPaths())) ?? [];
     log('getModulesByPathIds return: %O', res);
-    codes.value = res.filter((item) => item.modules);
+    codes.value = res.filter(
+      (item: { pathId: string; modules: unknown; error?: string }) => item.modules
+    );
     stateTree.value = hookStore.value.buildTree() as TreeNode[];
     hookFilters.value = hookStore.value.getFilterList();
   });
diff --git a/packages/ui/src/features/RenderTree/data.ts b/packages/ui/src/features/RenderTree/data.ts
index 23d1785..5c6e705 100644
--- a/packages/ui/src/features/RenderTree/data.ts
+++ b/packages/ui/src/features/RenderTree/data.ts
@@ -3,16 +3,9 @@ import {
   INNER_USE_HOOK,
   QRL_KEY,
 } from '@devtools/kit';
-import type { ParsedStructure } from '@devtools/kit';
+import type { ParsedStructure, ComponentDevtoolsState, DevtoolsRenderStats } from '@devtools/kit';
 import type { QRLInternal } from './types';
 
-// Extend Window interface to include QWIK_DEVTOOLS_GLOBAL_STATE
-declare global {
-  interface Window {
-    QWIK_DEVTOOLS_GLOBAL_STATE?: Record<string, ParsedStructure[]>;
-  }
-}
-
 /**
  * Sequence entry from Qwik's q:seq containing QRL references.
  * Can have either $qrl$ (for tasks) or $computeQrl$ (for computed).
@@ -50,10 +43,36 @@ export function getQwikState(qrlChunkName: string): ParsedStructure[] {
 
   if (!matchingKey) return [];
 
-  const entries = globalState[matchingKey] ?? [];
+  const componentState = globalState[matchingKey];
+  if (!componentState) return [];
+
+  // 新结构：{ hooks: ParsedStructure[], stats: DevtoolsRenderStats }
+  const entries = componentState.hooks ?? [];
   return entries.filter((item) => item.data !== undefined);
 }
 
+/**
+ * Get render stats from global devtools state by QRL chunk name
+ */
+export function getRenderStats(qrlChunkName: string): DevtoolsRenderStats | null {
+  const globalState = window.QWIK_DEVTOOLS_GLOBAL_STATE ?? {};
+  const matchingKey = Object.keys(globalState).find((key) =>
+    key.endsWith(qrlChunkName),
+  );
+
+  if (!matchingKey) return null;
+
+  const componentState = globalState[matchingKey];
+  return componentState?.stats ?? null;
+}
+
+/**
+ * Get all component states from global devtools state
+ */
+export function getAllComponentStates(): Record<string, ComponentDevtoolsState> {
+  return window.QWIK_DEVTOOLS_GLOBAL_STATE ?? {};
+}
+
 /**
  * Determine hook type from QRL chunk path
  */
diff --git a/packages/ui/src/features/RenderTree/index.ts b/packages/ui/src/features/RenderTree/index.ts
index eea114d..ef6b976 100644
--- a/packages/ui/src/features/RenderTree/index.ts
+++ b/packages/ui/src/features/RenderTree/index.ts
@@ -22,24 +22,11 @@ export {
   isQRLInternal,
 } from './types';
 
-// Data store
-export {
-  HookDataStore,
-  getHookDataStore,
-  resetHookDataStore,
-  getQrlChunkName,
-} from './HookDataStore';
-
 // Tree builder
 export { TreeBuilder } from './TreeBuilder';
 
 // Data utilities
-export {
-  getQwikState,
-  filterUserDefinedHooks,
-  transformQrlSequenceData,
-} from './data';
+export { getQwikState, getRenderStats, getAllComponentStates, filterUserDefinedHooks, transformQrlSequenceData } from './data';
 
 // Hook store (class-based API)
 export { HookStore, QrlUtils, getHookStore } from './formatTreeData';
-
diff --git a/packages/ui/src/features/RenderTree/transfromqseq.ts b/packages/ui/src/features/RenderTree/transfromqseq.ts
deleted file mode 100644
index 399aa1a..0000000
--- a/packages/ui/src/features/RenderTree/transfromqseq.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { TreeNode } from '../../components/Tree/Tree';
-import { TreeBuilder } from './TreeBuilder';
-
-/**
- * Shared TreeBuilder instance for backward compatibility
- */
-const builder = new TreeBuilder();
-
-/**
- * Convert object to TreeNode array
- * @deprecated Use TreeBuilder.objectToTree() directly instead
- */
-export const objectToTree = (obj: unknown, parentPath = ''): TreeNode[] => {
-  return builder.objectToTree(obj, parentPath);
-};
-
-/**
- * Create a group TreeNode with label and children
- * @deprecated Use TreeBuilder.createGroupNode() directly instead
- */
-export const createTreeNodeObj = (
-  label: string,
-  children: TreeNode[] = [],
-): TreeNode => {
-  return builder.createGroupNode(label, children);
-};
-
-/**
- * Reset the internal ID counter
- * Useful for testing to get deterministic IDs
- */
-export const resetIdCounter = (): void => {
-  builder.resetIdCounter();
-};
diff --git a/packages/ui/src/types/state.ts b/packages/ui/src/types/state.ts
index b472d61..81c8ce5 100644
--- a/packages/ui/src/types/state.ts
+++ b/packages/ui/src/types/state.ts
@@ -10,7 +10,8 @@ export type TabName =
   | 'components'
   | 'inspect'
   | 'renderTree'
-  | 'codeBreack';
+  | 'codeBreack'
+  | 'performance';
 
 export interface State {
   isOpen: Signal<boolean>;

From 830072d2e384faa680f3fca99f1787c7eb6a3c39 Mon Sep 17 00:00:00 2001
From: Jerry_Wu <409187100@qq.com>
Date: Thu, 18 Dec 2025 17:07:43 +0800
Subject: [PATCH 3/4] add changelog

---
 .changeset/mighty-windows-begin.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/mighty-windows-begin.md

diff --git a/.changeset/mighty-windows-begin.md b/.changeset/mighty-windows-begin.md
new file mode 100644
index 0000000..8ee096c
--- /dev/null
+++ b/.changeset/mighty-windows-begin.md
@@ -0,0 +1,5 @@
+---
+'@qwik.dev/devtools': patch
+---
+
+add performance tab

From b4c980800a962dbf628908070bf959b6f0eaf66c Mon Sep 17 00:00:00 2001
From: Giorgio Boa <35845425+gioboa@users.noreply.github.com>
Date: Thu, 18 Dec 2025 11:09:15 +0100
Subject: [PATCH 4/4] chore: fix up changeset

---
 .changeset/mighty-windows-begin.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/mighty-windows-begin.md b/.changeset/mighty-windows-begin.md
index 8ee096c..523bd12 100644
--- a/.changeset/mighty-windows-begin.md
+++ b/.changeset/mighty-windows-begin.md
@@ -2,4 +2,4 @@
 '@qwik.dev/devtools': patch
 ---
 
-add performance tab
+feat: add performance tab