@presto1314w/vite-devtools-browser 0.3.5 → 0.3.6

package/dist/browser-collector.js

@@ -10,8 +10,11 @@ export function initBrowserEventCollector() {
                 q.shift();
         };
     }
+    const getVueApp = () => document.querySelector("#app")?.__vue_app__ ||
+        document.querySelector("[data-v-app]")?.__vue_app__ ||
+        null;
     const inferFramework = () => {
-        if (window.__VUE__ || window.__VUE_DEVTOOLS_GLOBAL_HOOK__)
+        if (window.__VUE__ || window.__VUE_DEVTOOLS_GLOBAL_HOOK__ || getVueApp())
             return "vue";
         if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__ || window.React)
             return "react";
@@ -30,10 +33,8 @@ export function initBrowserEventCollector() {
     const inferVueRenderDetails = () => {
         const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
         const apps = hook?.apps;
-        if (!Array.isArray(apps) || apps.length === 0)
-            return null;
-        const app = apps[0];
-        const rootInstance = app?._instance || app?._container?._vnode?.component;
+        const app = getVueApp() || (Array.isArray(apps) ? apps[0] : null);
+        const rootInstance = app?._instance || app?._container?._vnode?.component || app?._component?.subTree?.component;
         if (!rootInstance)
             return null;
         const names = [];
@@ -120,7 +121,7 @@ export function initBrowserEventCollector() {
     };
     const attachPiniaSubscriptions = () => {
         const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
-        const app = Array.isArray(hook?.apps) ? hook.apps[0] : null;
+        const app = getVueApp() || (Array.isArray(hook?.apps) ? hook.apps[0] : null);
         const pinia = window.__PINIA__ || window.pinia || app?.config?.globalProperties?.$pinia;
         const registry = pinia?._s;
         if (!(registry instanceof Map) || registry.size === 0)

package/dist/browser-frameworks.d.ts

@@ -1,5 +1,15 @@
 import type { Page } from "playwright";
 import type { BrowserFramework, BrowserSessionState } from "./browser-session.js";
+export declare function detectFrameworkFromGlobals(globals: {
+    vueVersion?: string | null;
+    hasVueHook?: boolean;
+    hasVueAppMarker?: boolean;
+    hasReactGlobal?: boolean;
+    hasReactRootMarker?: boolean;
+    reactRendererVersion?: string | null;
+    svelteVersion?: string | null;
+    hasSvelteHook?: boolean;
+}): string;
 export declare function detectBrowserFramework(page: Page): Promise<{
     detected: string;
     framework: BrowserFramework;

package/dist/browser-frameworks.js

@@ -1,26 +1,51 @@
 import * as vueDevtools from "./vue/devtools.js";
 import * as reactDevtools from "./react/devtools.js";
+import { checkHookHealth, injectHook } from "./react/hook-manager.js";
 import * as svelteDevtools from "./svelte/devtools.js";
+export function detectFrameworkFromGlobals(globals) {
+    if (globals.vueVersion || globals.hasVueHook || globals.hasVueAppMarker) {
+        return `vue@${globals.vueVersion || "unknown"}`;
+    }
+    if (globals.reactRendererVersion || globals.hasReactGlobal || globals.hasReactRootMarker) {
+        return `react@${globals.reactRendererVersion || "unknown"}`;
+    }
+    if (globals.svelteVersion || globals.hasSvelteHook) {
+        return `svelte@${globals.svelteVersion || "unknown"}`;
+    }
+    return "unknown";
+}
 export async function detectBrowserFramework(page) {
+    await page.waitForFunction?.(() => Boolean(window.__VUE__ ||
+        window.__VUE_DEVTOOLS_GLOBAL_HOOK__ ||
+        window.React ||
+        window.__SVELTE__ ||
+        window.__svelte ||
+        document.querySelector("[data-v-app]") ||
+        document.querySelector("#app")?.__vue_app__ ||
+        document.querySelector("[data-reactroot]")), undefined, { timeout: 1_000 }).catch(() => { });
     const detected = await page.evaluate(() => {
-        if (window.__VUE__ || window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
-            const version = window.__VUE__?.version || "unknown";
-            return `vue@${version}`;
-        }
         const reactHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-        if (reactHook || window.React || document.querySelector("[data-reactroot]")) {
-            const renderers = reactHook?.renderers;
-            const firstRenderer = renderers ? renderers.values().next().value : null;
-            const version = firstRenderer?.version || window.React?.version || "unknown";
-            return `react@${version}`;
+        const firstRenderer = reactHook?.renderers?.values?.().next?.().value ?? null;
+        const globals = {
+            vueVersion: window.__VUE__?.version ?? null,
+            hasVueHook: Boolean(window.__VUE_DEVTOOLS_GLOBAL_HOOK__),
+            hasVueAppMarker: Boolean(document.querySelector("#app")?.__vue_app__ ||
+                document.querySelector("[data-v-app]")?.__vue_app__ ||
+                document.querySelector("[data-v-app]")),
+            hasReactGlobal: Boolean(window.React),
+            hasReactRootMarker: Boolean(document.querySelector("[data-reactroot]")),
+            reactRendererVersion: firstRenderer?.version ?? window.React?.version ?? null,
+            svelteVersion: window.__SVELTE__?.VERSION || window.__svelte?.version || null,
+            hasSvelteHook: Boolean(window.__SVELTE_DEVTOOLS_GLOBAL_HOOK__),
+        };
+        if (globals.vueVersion || globals.hasVueHook || globals.hasVueAppMarker) {
+            return `vue@${globals.vueVersion || "unknown"}`;
         }
-        if (window.__SVELTE__ ||
-            window.__svelte ||
-            window.__SVELTE_DEVTOOLS_GLOBAL_HOOK__) {
-            const version = window.__SVELTE__?.VERSION ||
-                window.__svelte?.version ||
-                "unknown";
-            return `svelte@${version}`;
+        if (globals.reactRendererVersion || globals.hasReactGlobal || globals.hasReactRootMarker) {
+            return `react@${globals.reactRendererVersion || "unknown"}`;
+        }
+        if (globals.svelteVersion || globals.hasSvelteHook) {
+            return `svelte@${globals.svelteVersion || "unknown"}`;
         }
         return "unknown";
     });
@@ -40,13 +65,13 @@ export async function inspectVueRouter(page) {
 }
 export async function inspectReactTree(state, page, id) {
     if (!id) {
-        state.lastReactSnapshot = await reactDevtools.snapshot(page);
+        state.lastReactSnapshot = await withReactInspectorRecovery(page, () => reactDevtools.snapshot(page));
         return reactDevtools.format(state.lastReactSnapshot);
     }
     const parsed = Number.parseInt(id, 10);
     if (!Number.isFinite(parsed))
         throw new Error("react component id must be a number");
-    const inspected = await reactDevtools.inspect(page, parsed);
+    const inspected = await withReactInspectorRecovery(page, () => reactDevtools.inspect(page, parsed));
     const lines = [];
     const componentPath = reactDevtools.path(state.lastReactSnapshot, parsed);
     if (componentPath)
@@ -61,6 +86,26 @@ export async function inspectReactTree(state, page, id) {
 export async function inspectSvelteTree(page, id) {
     return id ? svelteDevtools.getComponentDetails(page, id) : svelteDevtools.getComponentTree(page);
 }
+async function withReactInspectorRecovery(page, read) {
+    try {
+        return await read();
+    }
+    catch (error) {
+        if (!isRecoverableReactInspectorError(error))
+            throw error;
+        const health = await checkHookHealth(page);
+        if (!health.installed) {
+            await injectHook(page);
+        }
+        await page.waitForTimeout(60).catch(() => { });
+        return read();
+    }
+}
+function isRecoverableReactInspectorError(error) {
+    if (!(error instanceof Error))
+        return false;
+    return /hook not installed|no React renderer attached/i.test(error.message);
+}
 function toBrowserFramework(detected) {
     if (detected.startsWith("vue"))
         return "vue";

package/dist/browser-session.d.ts

@@ -45,3 +45,5 @@ export declare function isClosedTargetError(error: unknown): boolean;
  * process crashes on older drivers.
  */
 export declare function platformChromiumArgs(extra?: string[]): string[];
+export declare function resolveChromiumExecutablePath(env?: NodeJS.ProcessEnv): string | undefined;
+export declare function resolveBrowserHeadless(env?: NodeJS.ProcessEnv): boolean;

package/dist/browser-session.js

@@ -1,3 +1,4 @@
+import { existsSync } from "node:fs";
 import { chromium } from "playwright";
 import { getHookSource } from "./react/hook-manager.js";
 import { isWindows, isLinux } from "./paths.js";
@@ -94,9 +95,36 @@ export function platformChromiumArgs(extra = []) {
     }
     return args;
 }
+export function resolveChromiumExecutablePath(env = process.env) {
+    const explicit = env.VITE_BROWSER_EXECUTABLE_PATH || env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH;
+    if (explicit && existsSync(explicit))
+        return explicit;
+    const candidates = isWindows
+        ? [
+            `${env.PROGRAMFILES ?? "C:\\Program Files"}\\Google\\Chrome\\Application\\chrome.exe`,
+            `${env["PROGRAMFILES(X86)"] ?? "C:\\Program Files (x86)"}\\Google\\Chrome\\Application\\chrome.exe`,
+            `${env.LOCALAPPDATA ?? ""}\\Google\\Chrome\\Application\\chrome.exe`,
+        ]
+        : isLinux
+            ? [
+                "/usr/bin/google-chrome",
+                "/usr/bin/chromium",
+                "/usr/bin/chromium-browser",
+                "/snap/bin/chromium",
+            ]
+            : [
+                "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+                "/Applications/Chromium.app/Contents/MacOS/Chromium",
+            ];
+    return candidates.find((candidate) => Boolean(candidate) && existsSync(candidate));
+}
+export function resolveBrowserHeadless(env = process.env) {
+    return /^(1|true|yes)$/i.test(env.VITE_BROWSER_HEADLESS || "");
+}
 async function launchBrowserContext() {
     const browser = await chromium.launch({
-        headless: false,
+        headless: resolveBrowserHeadless(),
+        executablePath: resolveChromiumExecutablePath(),
         args: platformChromiumArgs(),
     });
     const context = await browser.newContext({ viewport: { width: 1280, height: 720 } });

package/dist/browser.d.ts

@@ -40,6 +40,12 @@ export declare function vueTree(id?: string): Promise<string>;
 export declare function vuePinia(store?: string): Promise<string>;
 export declare function vueRouter(): Promise<string>;
 export declare function reactTree(id?: string): Promise<string>;
+export declare function reactStoreList(): Promise<string>;
+export declare function reactStoreInspect(store: string): Promise<string>;
+export declare function reactHookHealth(): Promise<string>;
+export declare function reactHookInject(): Promise<string>;
+export declare function reactCommits(limit?: number): Promise<string>;
+export declare function reactCommitsClear(): Promise<string>;
 export declare function svelteTree(id?: string): Promise<string>;
 export declare function viteRestart(): Promise<string>;
 export declare function viteHMR(): Promise<string>;

package/dist/browser.js

@@ -5,6 +5,9 @@ import { detectBrowserFramework, inspectReactTree, inspectSvelteTree, inspectVue
 import { closeBrowserSession, createBrowserSessionState, ensureBrowserPage, getCurrentPage as getSessionPage, } from "./browser-session.js";
 import { collectModuleRows, formatHmrTrace, formatModuleGraphSnapshot, formatModuleGraphTrace, formatRuntimeStatus, readOverlayError, readRuntimeSnapshot, } from "./browser-vite.js";
 import * as networkLog from "./network.js";
+import { checkHookHealth, formatHookHealth, injectHook } from "./react/hook-manager.js";
+import { clearRenderHistory, formatRenderInfo, getRecentRenders, installRenderTracking } from "./react/profiler.js";
+import { formatStoreInspection, formatStoreList, inspectStore, listStores } from "./react/zustand.js";
 import { resolveViaSourceMap } from "./sourcemap.js";
 export { contextUsable, isClosedTargetError } from "./browser-session.js";
 export { formatHmrTrace, formatModuleGraphSnapshot, formatModuleGraphTrace, formatRuntimeStatus, normalizeLimit, } from "./browser-vite.js";
@@ -189,6 +192,36 @@ export async function vueRouter() {
 export async function reactTree(id) {
     return inspectReactTree(session, requireCurrentPage(), id);
 }
+export async function reactStoreList() {
+    return formatStoreList(await listStores(requireCurrentPage()));
+}
+export async function reactStoreInspect(store) {
+    const result = await inspectStore(requireCurrentPage(), store);
+    if (!result) {
+        throw new Error(`zustand store not found: ${store}`);
+    }
+    return formatStoreInspection(result);
+}
+export async function reactHookHealth() {
+    return formatHookHealth(await checkHookHealth(requireCurrentPage()));
+}
+export async function reactHookInject() {
+    const currentPage = requireCurrentPage();
+    const injected = await injectHook(currentPage);
+    const status = await checkHookHealth(currentPage);
+    const prefix = injected ? "React hook injected.\n\n" : "React hook already installed.\n\n";
+    return `${prefix}${formatHookHealth(status)}`;
+}
+export async function reactCommits(limit = 20) {
+    const currentPage = requireCurrentPage();
+    await installRenderTracking(currentPage);
+    return formatRenderInfo(await getRecentRenders(currentPage, limit));
+}
+export async function reactCommitsClear() {
+    const currentPage = requireCurrentPage();
+    await clearRenderHistory(currentPage);
+    return "cleared React commit history";
+}
 export async function svelteTree(id) {
     return inspectSvelteTree(requireCurrentPage(), id);
 }
@@ -210,6 +243,10 @@ export async function viteHMR() {
 }
 export async function viteRuntimeStatus() {
     const currentPage = requireCurrentPage();
+    if (session.framework === "unknown") {
+        const result = await detectBrowserFramework(currentPage);
+        session.framework = result.framework;
+    }
     const runtime = await readRuntimeSnapshot(currentPage);
     return formatRuntimeStatus(runtime, session.framework, session.hmrEvents);
 }
@@ -334,6 +371,8 @@ async function navigateAndRefreshContext(currentPage, navigate, refreshFramework
     clearRuntimeErrors();
     await injectEventCollector(currentPage);
     if (refreshFramework) {
+        await currentPage.waitForLoadState?.("networkidle", { timeout: 1_000 }).catch(() => { });
+        await currentPage.waitForTimeout?.(100).catch(() => { });
         await detectFramework();
     }
 }

package/dist/cli.js

@@ -97,6 +97,47 @@ export async function runCli(argv, io) {
         const res = await io.send("react-tree", { id });
         exit(io, res, res.ok && res.data ? String(res.data) : "");
     }
+    if (cmd === "react" && arg === "store") {
+        const sub = args[2];
+        if (sub === "list") {
+            const res = await io.send("react-store-list");
+            exit(io, res, res.ok && res.data ? String(res.data) : "");
+        }
+        if (sub === "inspect") {
+            const store = args[3];
+            if (!store) {
+                io.stderr("usage: vite-browser react store inspect <name>");
+                io.exit(1);
+            }
+            const res = await io.send("react-store-inspect", { store });
+            exit(io, res, res.ok && res.data ? String(res.data) : "");
+        }
+        io.stderr("usage: vite-browser react store <list|inspect> [name]");
+        io.exit(1);
+    }
+    if (cmd === "react" && arg === "hook") {
+        const sub = args[2];
+        if (sub === "health") {
+            const res = await io.send("react-hook-health");
+            exit(io, res, res.ok && res.data ? String(res.data) : "");
+        }
+        if (sub === "inject") {
+            const res = await io.send("react-hook-inject");
+            exit(io, res, res.ok && res.data ? String(res.data) : "");
+        }
+        io.stderr("usage: vite-browser react hook <health|inject>");
+        io.exit(1);
+    }
+    if (cmd === "react" && arg === "commits") {
+        const sub = args[2];
+        if (sub === "clear") {
+            const res = await io.send("react-commits-clear");
+            exit(io, res, res.ok && res.data ? String(res.data) : "cleared React commit history");
+        }
+        const limit = parseNumberFlag(args, "--limit", 20);
+        const res = await io.send("react-commits", { limit });
+        exit(io, res, res.ok && res.data ? String(res.data) : "");
+    }
     if (cmd === "svelte" && arg === "tree") {
         const id = args[2];
         const res = await io.send("svelte-tree", { id });
@@ -228,6 +269,12 @@ VUE COMMANDS
 
 REACT COMMANDS
   react tree [id]                     Show React component tree or inspect component
+  react store list                    List detected Zustand stores
+  react store inspect <name>          Show Zustand store state and actions
+  react hook health                   Show bundled React hook status
+  react hook inject                   Inject bundled React hook into current page
+  react commits [--limit <n>]         Show recent React commit records
+  react commits clear                 Clear recorded React commit history
 
 SVELTE COMMANDS
   svelte tree [id]                    Show Svelte component tree or inspect component

package/dist/daemon.js

@@ -71,6 +71,30 @@ export function createRunner(api = browser) {
             const data = await api.reactTree(cmd.id);
             return { ok: true, data };
         }
+        if (cmd.action === "react-store-list") {
+            const data = await api.reactStoreList();
+            return { ok: true, data };
+        }
+        if (cmd.action === "react-store-inspect") {
+            const data = await api.reactStoreInspect(cmd.store);
+            return { ok: true, data };
+        }
+        if (cmd.action === "react-hook-health") {
+            const data = await api.reactHookHealth();
+            return { ok: true, data };
+        }
+        if (cmd.action === "react-hook-inject") {
+            const data = await api.reactHookInject();
+            return { ok: true, data };
+        }
+        if (cmd.action === "react-commits") {
+            const data = await api.reactCommits(cmd.limit ?? 20);
+            return { ok: true, data };
+        }
+        if (cmd.action === "react-commits-clear") {
+            const data = await api.reactCommitsClear();
+            return { ok: true, data };
+        }
         // Svelte commands
         if (cmd.action === "svelte-tree") {
             const data = await api.svelteTree(cmd.id);

package/dist/paths.js

@@ -1,3 +1,4 @@
+import { accessSync, constants } from "node:fs";
 import { homedir, tmpdir } from "node:os";
 import { join } from "node:path";
 export const isWindows = process.platform === "win32";
@@ -19,11 +20,14 @@ const session = sanitizeSession(process.env.VITE_BROWSER_SESSION || "default");
 export function resolveSocketDir() {
     try {
         const home = homedir();
-        if (home)
+        if (home) {
+            accessSync(home, constants.W_OK);
             return join(home, ".vite-browser");
+        }
     }
     catch {
-        // homedir() can throw on misconfigured systems
+        // homedir() can throw, and sandboxed / CI environments may expose a
+        // home directory that is present but not writable.
     }
     // Fallback: use tmpdir scoped by uid to avoid collisions
     const uid = process.getuid?.() ?? process.pid;

package/dist/react/devtools.d.ts

@@ -12,6 +12,16 @@ export type ReactInspection = {
 };
 export declare function snapshot(page: Page): Promise<ReactNode[]>;
 export declare function inspect(page: Page, id: number): Promise<ReactInspection>;
+export declare function getPrimaryRendererInterface(hook: {
+    rendererInterfaces?: Map<unknown, unknown> | {
+        values?: () => IterableIterator<unknown>;
+    };
+} | null | undefined): unknown;
+export declare function findRendererInterfaceForElement(hook: {
+    rendererInterfaces?: Map<unknown, unknown> | {
+        values?: () => IterableIterator<unknown>;
+    };
+} | null | undefined, id: number): unknown;
 export declare function format(nodes: ReactNode[]): string;
 export declare function path(nodes: ReactNode[], id: number): string;
 export declare function typeName(type: number): string;

package/dist/react/devtools.js

@@ -4,6 +4,21 @@ export async function snapshot(page) {
 export async function inspect(page, id) {
     return page.evaluate(inPageInspect, id);
 }
+export function getPrimaryRendererInterface(hook) {
+    const values = hook?.rendererInterfaces?.values?.();
+    return values?.next().value ?? null;
+}
+export function findRendererInterfaceForElement(hook, id) {
+    const values = hook?.rendererInterfaces?.values?.();
+    if (!values)
+        return null;
+    for (const rendererInterface of values) {
+        if (rendererInterface?.hasElementWithId?.(id)) {
+            return rendererInterface;
+        }
+    }
+    return null;
+}
 export function format(nodes) {
     const children = new Map();
     for (const n of nodes) {
@@ -182,7 +197,7 @@ async function inPageSnapshot() {
     const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     if (!hook)
         throw new Error("React DevTools hook not installed");
-    const ri = hook.rendererInterfaces?.get?.(1);
+    const ri = getPrimaryRendererInterface(hook);
     if (!ri)
         throw new Error("no React renderer attached");
     const batches = await collect(ri);
@@ -207,7 +222,8 @@ async function inPageSnapshot() {
 }
 function inPageInspect(id) {
     const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-    const ri = hook?.rendererInterfaces?.get?.(1);
+    const ri = findRendererInterfaceForElement(hook, id) ??
+        getPrimaryRendererInterface(hook);
     if (!ri)
         throw new Error("no React renderer attached");
     if (!ri.hasElementWithId(id))

package/dist/react/hook-manager.d.ts

@@ -1,7 +1,7 @@
 /**
  * React DevTools Hook Management
  *
- * Provides health checks and auto-injection for the bundled React DevTools hook.
+ * Provides health checks and injection helpers for the bundled React DevTools hook.
  * This removes the dependency on external browser extensions for React inspection.
  */
 import type { Page } from "playwright";
@@ -20,7 +20,7 @@ export interface HookHealthStatus {
  */
 export declare function checkHookHealth(page: Page): Promise<HookHealthStatus>;
 /**
- * Inject the React DevTools hook into a page if not already present
+ * Inject the React DevTools hook into a page if not already present.
  */
 export declare function injectHook(page: Page): Promise<boolean>;
 /**

package/dist/react/hook-manager.js

@@ -1,7 +1,7 @@
 /**
  * React DevTools Hook Management
  *
- * Provides health checks and auto-injection for the bundled React DevTools hook.
+ * Provides health checks and injection helpers for the bundled React DevTools hook.
  * This removes the dependency on external browser extensions for React inspection.
  */
 import { readFileSync } from "node:fs";
@@ -26,7 +26,7 @@ export async function checkHookHealth(page) {
     return page.evaluate(inPageCheckHookHealth);
 }
 /**
- * Inject the React DevTools hook into a page if not already present
+ * Inject the React DevTools hook into a page if not already present.
  */
 export async function injectHook(page) {
     const alreadyInstalled = await page.evaluate(() => !!window.__REACT_DEVTOOLS_GLOBAL_HOOK__);

package/dist/react/hook.js

@@ -18,13 +18,14 @@
         return;
     if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__)
         return;
+    let nextRendererId = 1;
     const hook = {
         renderers: new Map(),
         rendererInterfaces: new Map(),
         supportsFiber: true,
         // Called by React when a renderer is injected
         inject(renderer) {
-            const id = Math.random();
+            const id = nextRendererId++;
             hook.renderers.set(id, renderer);
             // Create renderer interface for component inspection
             const rendererInterface = createRendererInterface(renderer);
@@ -33,11 +34,13 @@
         },
         // Called by React on fiber root commits
         onCommitFiberRoot(id, root, priorityLevel) {
-            // Hook for tracking renders - can be overridden by profiler
+            const rendererInterface = hook.rendererInterfaces.get(id);
+            rendererInterface?.trackFiberRoot(root);
         },
         // Called by React on fiber unmount
         onCommitFiberUnmount(id, fiber) {
-            // Hook for tracking unmounts
+            const rendererInterface = hook.rendererInterfaces.get(id);
+            rendererInterface?.handleCommitFiberUnmount(fiber);
         },
         // Sub-hooks for advanced features
         sub(event, handler) {
@@ -58,12 +61,25 @@
         const fiberRoots = new Set();
         const fiberToId = new Map();
         const idToFiber = new Map();
-        let nextId = 1;
+        const fiberParents = new Map();
+        let nextId = 2;
         return {
+            trackFiberRoot(root) {
+                if (root && root.current) {
+                    fiberRoots.add(root);
+                }
+            },
+            handleCommitFiberUnmount(fiber) {
+                pruneFiber(fiber);
+            },
             // Flush initial operations to populate component tree
             flushInitialOperations() {
+                fiberToId.clear();
+                idToFiber.clear();
+                fiberParents.clear();
+                nextId = 2;
                 for (const root of fiberRoots) {
-                    walkTree(root.current, null);
+                    walkTree(root.current, 1);
                 }
                 // Send operations via message event
                 const operations = buildOperations();
@@ -113,6 +129,7 @@
             const id = nextId++;
             fiberToId.set(fiber, id);
             idToFiber.set(id, fiber);
+            fiberParents.set(fiber, parentId);
             // Walk children
             let child = fiber.child;
             while (child) {
@@ -121,29 +138,25 @@
             }
         }
         function buildOperations() {
-            const ops = [2, 0]; // version, string table size
             const strings = [];
-            // Add root operation
-            ops.push(1, 1, 11, 0, 0, 0, 0); // ADD_ROOT
+            const nodeOps = [];
             // Add fiber nodes
             for (const [id, fiber] of idToFiber) {
-                if (id === 1)
-                    continue; // Skip root
                 const name = getDisplayName(fiber);
                 const nameIdx = addString(name);
                 const keyIdx = fiber.key ? addString(String(fiber.key)) : 0;
-                const parentId = fiberToId.get(fiber.return) || 0;
-                ops.push(1, id, 5, parentId, 0, nameIdx, keyIdx, 0); // ADD_NODE
+                const parentId = fiberParents.get(fiber) || 0;
+                nodeOps.push(1, id, 0, parentId, 0, nameIdx, keyIdx, 0); // ADD_NODE
             }
-            // Update string table size
-            ops[1] = strings.length;
-            // Insert string table after version
             const stringOps = [];
             for (const str of strings) {
                 const codePoints = Array.from(str).map(c => c.codePointAt(0));
                 stringOps.push(codePoints.length, ...codePoints);
             }
-            ops.splice(2, 0, ...stringOps);
+            const ops = [0, 0, stringOps.length, ...stringOps];
+            // Add root operation
+            ops.push(1, 1, 11, 0, 0, 0, 0); // ADD_ROOT
+            ops.push(...nodeOps);
             return ops;
             function addString(str) {
                 let idx = strings.indexOf(str);
@@ -215,6 +228,21 @@
             const { fileName, lineNumber, columnNumber } = fiber._debugSource;
             return [null, fileName, lineNumber, columnNumber];
         }
+        function pruneFiber(fiber) {
+            if (!fiber)
+                return;
+            const mappedId = fiberToId.get(fiber);
+            if (mappedId != null) {
+                fiberToId.delete(fiber);
+                idToFiber.delete(mappedId);
+                fiberParents.delete(fiber);
+            }
+            let child = fiber.child;
+            while (child) {
+                pruneFiber(child);
+                child = child.sibling;
+            }
+        }
     }
     // Install the hook
     Object.defineProperty(window, "__REACT_DEVTOOLS_GLOBAL_HOOK__", {

package/dist/react/profiler.d.ts

@@ -1,55 +1,38 @@
 /**
- * React render tracking and profiling
+ * React commit tracking groundwork.
  *
- * Tracks component renders, durations, and trigger reasons using React DevTools Profiler API.
+ * This module records real commit metadata that can be observed from the
+ * React DevTools hook without pretending to expose a full Profiler surface.
  */
 import type { Page } from "playwright";
+export interface RenderInteraction {
+    id: number;
+    name: string;
+    timestamp: number;
+}
 export interface RenderInfo {
-    componentId: number;
-    componentName: string;
+    rendererId: number;
+    rootName: string;
     phase: "mount" | "update" | "nested-update";
-    actualDuration: number;
-    baseDuration: number;
-    startTime: number;
+    actualDuration: number | null;
+    baseDuration: number | null;
+    startTime: number | null;
     commitTime: number;
-    interactions: Set<{
-        id: number;
-        name: string;
-        timestamp: number;
-    }>;
+    fiberCount: number;
+    interactions: RenderInteraction[];
 }
 export interface RenderTrigger {
-    componentId: number;
-    componentName: string;
+    rendererId: number;
+    rootName: string;
     reason: "props" | "state" | "hooks" | "parent" | "context" | "unknown";
     timestamp: number;
     details?: string;
 }
-/**
- * Install render tracking in the page
- */
 export declare function installRenderTracking(page: Page): Promise<void>;
-/**
- * Get recent render events
- */
 export declare function getRecentRenders(page: Page, limit?: number): Promise<RenderInfo[]>;
-/**
- * Get render triggers (why components re-rendered)
- */
 export declare function getRenderTriggers(page: Page, limit?: number): Promise<RenderTrigger[]>;
-/**
- * Clear render history
- */
 export declare function clearRenderHistory(page: Page): Promise<void>;
-/**
- * Format render info for CLI output
- */
+export declare function formatDuration(duration: number | null): string;
 export declare function formatRenderInfo(renders: RenderInfo[]): string;
-/**
- * Format render triggers for CLI output
- */
 export declare function formatRenderTriggers(triggers: RenderTrigger[]): string;
-/**
- * Analyze slow renders (> 16ms)
- */
 export declare function analyzeSlowRenders(renders: RenderInfo[]): string;

package/dist/react/profiler.js

@@ -1,56 +1,44 @@
 /**
- * React render tracking and profiling
+ * React commit tracking groundwork.
  *
- * Tracks component renders, durations, and trigger reasons using React DevTools Profiler API.
- */
-/**
- * Install render tracking in the page
+ * This module records real commit metadata that can be observed from the
+ * React DevTools hook without pretending to expose a full Profiler surface.
  */
 export async function installRenderTracking(page) {
     await page.evaluate(inPageInstallRenderTracking);
 }
-/**
- * Get recent render events
- */
 export async function getRecentRenders(page, limit = 50) {
     return page.evaluate(inPageGetRecentRenders, limit);
 }
-/**
- * Get render triggers (why components re-rendered)
- */
 export async function getRenderTriggers(page, limit = 50) {
     return page.evaluate(inPageGetRenderTriggers, limit);
 }
-/**
- * Clear render history
- */
 export async function clearRenderHistory(page) {
     await page.evaluate(inPageClearRenderHistory);
 }
-/**
- * Format render info for CLI output
- */
+export function formatDuration(duration) {
+    return duration == null ? "n/a" : `${duration.toFixed(2)}ms`;
+}
 export function formatRenderInfo(renders) {
     if (renders.length === 0)
         return "No renders recorded";
-    const lines = ["# React Renders\n"];
+    const lines = ["# React Commits\n"];
     for (const render of renders) {
         const phase = render.phase === "mount" ? "MOUNT" : render.phase === "update" ? "UPDATE" : "NESTED";
-        const duration = render.actualDuration.toFixed(2);
-        const slow = render.actualDuration > 16 ? " ⚠️ SLOW" : "";
-        lines.push(`[${phase}] ${render.componentName} (${duration}ms)${slow}`);
-        if (render.interactions.size > 0) {
-            const interactions = Array.from(render.interactions)
-                .map((i) => i.name)
-                .join(", ");
+        const duration = formatDuration(render.actualDuration);
+        const slow = render.actualDuration != null && render.actualDuration > 16 ? " ⚠️ SLOW" : "";
+        lines.push(`[${phase}] ${render.rootName} (${duration})${slow}`);
+        lines.push(`  Fibers: ${render.fiberCount}`);
+        if (render.baseDuration != null) {
+            lines.push(`  Base duration: ${render.baseDuration.toFixed(2)}ms`);
+        }
+        if (render.interactions.length > 0) {
+            const interactions = render.interactions.map((i) => i.name).join(", ");
             lines.push(`  Interactions: ${interactions}`);
         }
     }
     return lines.join("\n");
 }
-/**
- * Format render triggers for CLI output
- */
 export function formatRenderTriggers(triggers) {
     if (triggers.length === 0)
         return "No render triggers recorded";
@@ -58,40 +46,36 @@ export function formatRenderTriggers(triggers) {
     for (const trigger of triggers) {
         const reason = trigger.reason.toUpperCase();
         const details = trigger.details ? ` - ${trigger.details}` : "";
-        lines.push(`[${reason}] ${trigger.componentName}${details}`);
+        lines.push(`[${reason}] ${trigger.rootName}${details}`);
     }
     return lines.join("\n");
 }
-/**
- * Analyze slow renders (> 16ms)
- */
 export function analyzeSlowRenders(renders) {
-    const slowRenders = renders.filter((r) => r.actualDuration > 16);
+    const slowRenders = renders.filter((r) => r.actualDuration != null && r.actualDuration > 16);
     if (slowRenders.length === 0) {
-        return "No slow renders detected (all renders < 16ms)";
+        return "No slow renders detected with measurable duration (> 16ms)";
     }
     const lines = [
         "# Slow Renders Analysis\n",
         `Found ${slowRenders.length} slow render(s) (> 16ms)\n`,
     ];
-    // Group by component
-    const byComponent = new Map();
+    const byRoot = new Map();
     for (const render of slowRenders) {
-        const list = byComponent.get(render.componentName) || [];
+        const list = byRoot.get(render.rootName) || [];
         list.push(render);
-        byComponent.set(render.componentName, list);
+        byRoot.set(render.rootName, list);
     }
-    // Sort by total time
-    const sorted = Array.from(byComponent.entries()).sort(([, a], [, b]) => {
-        const totalA = a.reduce((sum, r) => sum + r.actualDuration, 0);
-        const totalB = b.reduce((sum, r) => sum + r.actualDuration, 0);
+    const sorted = Array.from(byRoot.entries()).sort(([, a], [, b]) => {
+        const totalA = a.reduce((sum, r) => sum + (r.actualDuration ?? 0), 0);
+        const totalB = b.reduce((sum, r) => sum + (r.actualDuration ?? 0), 0);
         return totalB - totalA;
     });
-    for (const [name, renders] of sorted) {
-        const count = renders.length;
-        const total = renders.reduce((sum, r) => sum + r.actualDuration, 0);
+    for (const [name, commits] of sorted) {
+        const durations = commits.map((r) => r.actualDuration ?? 0);
+        const total = durations.reduce((sum, value) => sum + value, 0);
+        const count = commits.length;
         const avg = total / count;
-        const max = Math.max(...renders.map((r) => r.actualDuration));
+        const max = Math.max(...durations);
         lines.push(`${name}:`);
         lines.push(`  Count: ${count}`);
         lines.push(`  Total: ${total.toFixed(2)}ms`);
@@ -101,58 +85,39 @@ export function analyzeSlowRenders(renders) {
     }
     return lines.join("\n");
 }
-// In-page functions
 function inPageInstallRenderTracking() {
     const win = window;
-    // Initialize storage
     win.__REACT_RENDER_HISTORY__ = win.__REACT_RENDER_HISTORY__ || [];
     win.__REACT_RENDER_TRIGGERS__ = win.__REACT_RENDER_TRIGGERS__ || [];
-    // Hook into React DevTools if available
     const hook = win.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     if (!hook) {
         console.warn("React DevTools hook not found, render tracking limited");
         return;
     }
-    // Listen for commit events
-    if (!win.__REACT_RENDER_TRACKING_INSTALLED__) {
-        win.__REACT_RENDER_TRACKING_INSTALLED__ = true;
-        // Track renders via Profiler API
-        const originalOnCommitFiberRoot = hook.onCommitFiberRoot;
-        hook.onCommitFiberRoot = function (id, root, priorityLevel) {
-            try {
-                // Record render info
-                const renderInfo = {
-                    componentId: id,
-                    componentName: root?.current?.type?.name || "Root",
-                    phase: root?.current?.mode === 0 ? "mount" : "update",
-                    actualDuration: 0,
-                    baseDuration: 0,
-                    startTime: Date.now(),
-                    commitTime: Date.now(),
-                    interactions: new Set(),
-                };
-                win.__REACT_RENDER_HISTORY__.push(renderInfo);
-                // Keep only last 100 renders
-                if (win.__REACT_RENDER_HISTORY__.length > 100) {
-                    win.__REACT_RENDER_HISTORY__.shift();
-                }
-            }
-            catch (e) {
-                // Ignore errors in tracking
-            }
-            if (originalOnCommitFiberRoot) {
-                return originalOnCommitFiberRoot.call(this, id, root, priorityLevel);
+    if (win.__REACT_RENDER_TRACKING_INSTALLED__)
+        return;
+    win.__REACT_RENDER_TRACKING_INSTALLED__ = true;
+    const originalOnCommitFiberRoot = hook.onCommitFiberRoot;
+    hook.onCommitFiberRoot = function (rendererId, root, priorityLevel) {
+        try {
+            const renderInfo = toRenderInfo(rendererId, root);
+            win.__REACT_RENDER_HISTORY__.push(renderInfo);
+            if (win.__REACT_RENDER_HISTORY__.length > 100) {
+                win.__REACT_RENDER_HISTORY__.shift();
             }
-        };
-    }
+        }
+        catch {
+            // Ignore tracking errors to avoid breaking the inspected app.
+        }
+        if (originalOnCommitFiberRoot) {
+            return originalOnCommitFiberRoot.call(this, rendererId, root, priorityLevel);
+        }
+    };
 }
 function inPageGetRecentRenders(limit) {
     const win = window;
     const history = win.__REACT_RENDER_HISTORY__ || [];
-    return history.slice(-limit).map((r) => ({
-        ...r,
-        interactions: Array.from(r.interactions || []),
-    }));
+    return history.slice(-limit);
 }
 function inPageGetRenderTriggers(limit) {
     const win = window;
@@ -164,3 +129,67 @@ function inPageClearRenderHistory() {
     win.__REACT_RENDER_HISTORY__ = [];
     win.__REACT_RENDER_TRIGGERS__ = [];
 }
+function toRenderInfo(rendererId, root) {
+    const current = root?.current ?? null;
+    const rootChild = current?.child ?? null;
+    return {
+        rendererId,
+        rootName: getFiberName(rootChild || current),
+        phase: inferPhase(current),
+        actualDuration: numberOrNull(current?.actualDuration),
+        baseDuration: numberOrNull(current?.treeBaseDuration ?? current?.baseDuration),
+        startTime: numberOrNull(current?.actualStartTime),
+        commitTime: Date.now(),
+        fiberCount: countFibers(current),
+        interactions: normalizeInteractions(root?.memoizedInteractions),
+    };
+}
+function inferPhase(current) {
+    if (!current?.alternate)
+        return "mount";
+    return current.flags && (current.flags & 1024) !== 0 ? "nested-update" : "update";
+}
+function getFiberName(fiber) {
+    if (!fiber)
+        return "Root";
+    if (typeof fiber.type === "string")
+        return fiber.type;
+    if (fiber.type?.displayName)
+        return fiber.type.displayName;
+    if (fiber.type?.name)
+        return fiber.type.name;
+    if (fiber.elementType?.displayName)
+        return fiber.elementType.displayName;
+    if (fiber.elementType?.name)
+        return fiber.elementType.name;
+    return "Anonymous";
+}
+function countFibers(fiber) {
+    let count = 0;
+    const stack = fiber ? [fiber] : [];
+    while (stack.length > 0) {
+        const current = stack.pop();
+        if (!current)
+            continue;
+        count++;
+        if (current.sibling)
+            stack.push(current.sibling);
+        if (current.child)
+            stack.push(current.child);
+    }
+    return count;
+}
+function numberOrNull(value) {
+    return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function normalizeInteractions(interactions) {
+    if (!(interactions instanceof Set))
+        return [];
+    return Array.from(interactions)
+        .map((interaction) => ({
+        id: typeof interaction?.id === "number" ? interaction.id : 0,
+        name: typeof interaction?.name === "string" ? interaction.name : "interaction",
+        timestamp: typeof interaction?.timestamp === "number" ? interaction.timestamp : 0,
+    }))
+        .filter((interaction) => interaction.name.length > 0);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@presto1314w/vite-devtools-browser",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Runtime diagnostics CLI for Vite apps with event-stream correlation, HMR diagnosis, framework inspection, and mapped errors",
   "license": "MIT",
   "keywords": [