agent-react-devtools 0.1.0 → 0.2.0-canary-20260210204855

package/dist/init-7IJ2VXT7.js

@@ -0,0 +1,202 @@
+#!/usr/bin/env node
+
+// src/init.ts
+import { readFileSync, writeFileSync, existsSync } from "fs";
+import { join, dirname } from "path";
+function detectFramework(cwd) {
+  const pkgPath = join(cwd, "package.json");
+  if (!existsSync(pkgPath)) return "unknown";
+  const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+  const allDeps = {
+    ...pkg.dependencies,
+    ...pkg.devDependencies
+  };
+  if (allDeps["@vitejs/plugin-react"]) return "vite";
+  if (allDeps["next"]) return "nextjs";
+  if (allDeps["react-scripts"]) return "cra";
+  if (allDeps["react-native"]) return "react-native";
+  return "unknown";
+}
+function findFile(cwd, ...candidates) {
+  for (const c of candidates) {
+    const p = join(cwd, c);
+    if (existsSync(p)) return p;
+  }
+  return null;
+}
+function prependImport(filePath, importLine, dryRun) {
+  const content = readFileSync(filePath, "utf-8");
+  if (content.includes(importLine) || content.includes("agent-react-devtools")) {
+    return null;
+  }
+  const newContent = importLine + "\n" + content;
+  if (!dryRun) {
+    writeFileSync(filePath, newContent, "utf-8");
+  }
+  return filePath;
+}
+function patchViteConfig(cwd, dryRun) {
+  const configPath = findFile(
+    cwd,
+    "vite.config.ts",
+    "vite.config.js",
+    "vite.config.mts",
+    "vite.config.mjs"
+  );
+  if (!configPath) {
+    console.error("  Could not find vite.config.{ts,js}");
+    return [];
+  }
+  const content = readFileSync(configPath, "utf-8");
+  if (content.includes("agent-react-devtools")) {
+    console.log("  Already configured");
+    return [];
+  }
+  const importLine = "import { reactDevtools } from 'agent-react-devtools/vite';";
+  let newContent;
+  const lastImportIdx = content.lastIndexOf("\nimport ");
+  if (lastImportIdx !== -1) {
+    const endOfLine = content.indexOf("\n", lastImportIdx + 1);
+    newContent = content.slice(0, endOfLine + 1) + importLine + "\n" + content.slice(endOfLine + 1);
+  } else {
+    newContent = importLine + "\n" + content;
+  }
+  const pluginsMatch = newContent.match(/plugins\s*:\s*\[/);
+  if (pluginsMatch && pluginsMatch.index != null) {
+    const insertPos = pluginsMatch.index + pluginsMatch[0].length;
+    newContent = newContent.slice(0, insertPos) + "\n    reactDevtools()," + newContent.slice(insertPos);
+  } else {
+    console.error("  Could not find plugins array in vite config");
+    return [];
+  }
+  if (!dryRun) {
+    writeFileSync(configPath, newContent, "utf-8");
+  }
+  return [configPath];
+}
+function patchNextJs(cwd, dryRun) {
+  const pagesEntry = findFile(
+    cwd,
+    "pages/_app.tsx",
+    "pages/_app.jsx",
+    "pages/_app.js",
+    "src/pages/_app.tsx",
+    "src/pages/_app.jsx",
+    "src/pages/_app.js"
+  );
+  if (pagesEntry) {
+    const result2 = prependImport(
+      pagesEntry,
+      "import 'agent-react-devtools/connect';",
+      dryRun
+    );
+    return result2 ? [result2] : [];
+  }
+  const layoutPath = findFile(
+    cwd,
+    "app/layout.tsx",
+    "app/layout.jsx",
+    "app/layout.js",
+    "src/app/layout.tsx",
+    "src/app/layout.jsx",
+    "src/app/layout.js"
+  );
+  if (!layoutPath) {
+    console.error("  Could not find app/layout.tsx or pages/_app.tsx");
+    return [];
+  }
+  const devtoolsPath = join(dirname(layoutPath), "devtools.ts");
+  const modified = [];
+  if (existsSync(devtoolsPath)) {
+    const existing = readFileSync(devtoolsPath, "utf-8");
+    if (!existing.includes("agent-react-devtools")) {
+      console.error(`  ${devtoolsPath} already exists with different content`);
+      return [];
+    }
+  } else {
+    const wrapper = "'use client';\nimport 'agent-react-devtools/connect';\n";
+    if (!dryRun) {
+      writeFileSync(devtoolsPath, wrapper, "utf-8");
+    }
+    modified.push(devtoolsPath);
+  }
+  const result = prependImport(layoutPath, "import './devtools';", dryRun);
+  if (result) {
+    modified.push(result);
+  }
+  return modified;
+}
+function patchCRA(cwd, dryRun) {
+  const entryPath = findFile(
+    cwd,
+    "src/index.tsx",
+    "src/index.jsx",
+    "src/index.js"
+  );
+  if (!entryPath) {
+    console.error("  Could not find src/index.tsx");
+    return [];
+  }
+  const result = prependImport(
+    entryPath,
+    "import 'agent-react-devtools/connect';",
+    dryRun
+  );
+  return result ? [result] : [];
+}
+async function runInit(cwd, dryRun) {
+  const framework = detectFramework(cwd);
+  console.log(`Detected framework: ${framework}`);
+  if (framework === "unknown") {
+    console.log("\nCould not detect framework. Manual setup required:");
+    console.log("  import 'agent-react-devtools/connect';");
+    console.log("  // Must be imported before React loads");
+    return;
+  }
+  if (framework === "react-native") {
+    console.log("\nReact Native detected \u2014 no code changes needed!");
+    console.log("React Native apps connect to DevTools automatically.\n");
+    console.log("Next steps:");
+    console.log("  1. Start the daemon: agent-react-devtools start");
+    console.log("  2. Start your app: npx react-native start");
+    console.log("\nFor physical devices:");
+    console.log("  adb reverse tcp:8097 tcp:8097");
+    console.log("\nFor Expo:");
+    console.log("  The connection works automatically with Expo dev client.");
+    console.log("\nCustom port:");
+    console.log("  Set REACT_DEVTOOLS_PORT=<port> environment variable");
+    return;
+  }
+  let modified = [];
+  if (dryRun) {
+    console.log("\n[dry-run] Would modify:");
+  }
+  switch (framework) {
+    case "vite":
+      modified = patchViteConfig(cwd, dryRun);
+      break;
+    case "nextjs":
+      modified = patchNextJs(cwd, dryRun);
+      break;
+    case "cra":
+      modified = patchCRA(cwd, dryRun);
+      break;
+  }
+  if (modified.length === 0) {
+    console.log("  No changes needed (already configured or could not find entry files)");
+    return;
+  }
+  for (const f of modified) {
+    console.log(`  ${dryRun ? "[dry-run] " : ""}Modified: ${f}`);
+  }
+  console.log("\nNext steps:");
+  console.log("  1. Install: npm install -D agent-react-devtools react-devtools-core");
+  console.log("  2. Start daemon: agent-react-devtools start");
+  console.log("  3. Start dev server and open your app");
+  console.log("  4. Inspect: agent-react-devtools get tree");
+}
+export {
+  detectFramework,
+  runInit
+};
+//# sourceMappingURL=init-7IJ2VXT7.js.map

package/dist/init-7IJ2VXT7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/init.ts"],"sourcesContent":["import { readFileSync, writeFileSync, existsSync } from 'node:fs';\nimport { join, dirname } from 'node:path';\n\ntype Framework = 'vite' | 'nextjs' | 'cra' | 'react-native' | 'unknown';\n\nexport function detectFramework(cwd: string): Framework {\n  const pkgPath = join(cwd, 'package.json');\n  if (!existsSync(pkgPath)) return 'unknown';\n\n  const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));\n  const allDeps = {\n    ...pkg.dependencies,\n    ...pkg.devDependencies,\n  };\n\n  if (allDeps['@vitejs/plugin-react']) return 'vite';\n  if (allDeps['next']) return 'nextjs';\n  if (allDeps['react-scripts']) return 'cra';\n  if (allDeps['react-native']) return 'react-native';\n  return 'unknown';\n}\n\nfunction findFile(cwd: string, ...candidates: string[]): string | null {\n  for (const c of candidates) {\n    const p = join(cwd, c);\n    if (existsSync(p)) return p;\n  }\n  return null;\n}\n\nfunction prependImport(filePath: string, importLine: string, dryRun: boolean): string | null {\n  const content = readFileSync(filePath, 'utf-8');\n  if (content.includes(importLine) || content.includes('agent-react-devtools')) {\n    return null; // already configured\n  }\n  const newContent = importLine + '\\n' + content;\n  if (!dryRun) {\n    writeFileSync(filePath, newContent, 'utf-8');\n  }\n  return filePath;\n}\n\nfunction patchViteConfig(cwd: string, dryRun: boolean): string[] {\n  const configPath = findFile(\n    cwd,\n    'vite.config.ts',\n    'vite.config.js',\n    'vite.config.mts',\n    'vite.config.mjs',\n  );\n  if (!configPath) {\n    console.error('  Could not find vite.config.{ts,js}');\n    return [];\n  }\n\n  const content = readFileSync(configPath, 'utf-8');\n  if (content.includes('agent-react-devtools')) {\n    console.log('  Already configured');\n    return [];\n  }\n\n  const importLine = \"import { reactDevtools } from 'agent-react-devtools/vite';\";\n  let newContent: string;\n\n  // Add import after the last existing import\n  const lastImportIdx = content.lastIndexOf('\\nimport ');\n  if (lastImportIdx !== -1) {\n    const endOfLine = content.indexOf('\\n', lastImportIdx + 1);\n    newContent =\n      content.slice(0, endOfLine + 1) +\n      importLine +\n      '\\n' +\n      content.slice(endOfLine + 1);\n  } else {\n    newContent = importLine + '\\n' + content;\n  }\n\n  // Add reactDevtools() to plugins array\n  const pluginsMatch = newContent.match(/plugins\\s*:\\s*\\[/);\n  if (pluginsMatch && pluginsMatch.index != null) {\n    const insertPos = pluginsMatch.index + pluginsMatch[0].length;\n    newContent =\n      newContent.slice(0, insertPos) +\n      '\\n    reactDevtools(),' +\n      newContent.slice(insertPos);\n  } else {\n    console.error('  Could not find plugins array in vite config');\n    return [];\n  }\n\n  if (!dryRun) {\n    writeFileSync(configPath, newContent, 'utf-8');\n  }\n\n  return [configPath];\n}\n\nfunction patchNextJs(cwd: string, dryRun: boolean): string[] {\n  // Try Pages Router first — _app is always client-side\n  const pagesEntry = findFile(\n    cwd,\n    'pages/_app.tsx',\n    'pages/_app.jsx',\n    'pages/_app.js',\n    'src/pages/_app.tsx',\n    'src/pages/_app.jsx',\n    'src/pages/_app.js',\n  );\n  if (pagesEntry) {\n    const result = prependImport(\n      pagesEntry,\n      \"import 'agent-react-devtools/connect';\",\n      dryRun,\n    );\n    return result ? [result] : [];\n  }\n\n  // App Router — layout is a Server Component, so we need a 'use client' wrapper\n  const layoutPath = findFile(\n    cwd,\n    'app/layout.tsx',\n    'app/layout.jsx',\n    'app/layout.js',\n    'src/app/layout.tsx',\n    'src/app/layout.jsx',\n    'src/app/layout.js',\n  );\n  if (!layoutPath) {\n    console.error('  Could not find app/layout.tsx or pages/_app.tsx');\n    return [];\n  }\n\n  const devtoolsPath = join(dirname(layoutPath), 'devtools.ts');\n  const modified: string[] = [];\n\n  // Create the 'use client' wrapper file\n  if (existsSync(devtoolsPath)) {\n    const existing = readFileSync(devtoolsPath, 'utf-8');\n    if (!existing.includes('agent-react-devtools')) {\n      console.error(`  ${devtoolsPath} already exists with different content`);\n      return [];\n    }\n  } else {\n    const wrapper = \"'use client';\\nimport 'agent-react-devtools/connect';\\n\";\n    if (!dryRun) {\n      writeFileSync(devtoolsPath, wrapper, 'utf-8');\n    }\n    modified.push(devtoolsPath);\n  }\n\n  // Prepend import of the wrapper to the layout\n  const result = prependImport(layoutPath, \"import './devtools';\", dryRun);\n  if (result) {\n    modified.push(result);\n  }\n\n  return modified;\n}\n\nfunction patchCRA(cwd: string, dryRun: boolean): string[] {\n  const entryPath = findFile(\n    cwd,\n    'src/index.tsx',\n    'src/index.jsx',\n    'src/index.js',\n  );\n  if (!entryPath) {\n    console.error('  Could not find src/index.tsx');\n    return [];\n  }\n\n  const result = prependImport(\n    entryPath,\n    \"import 'agent-react-devtools/connect';\",\n    dryRun,\n  );\n  return result ? [result] : [];\n}\n\nexport async function runInit(\n  cwd: string,\n  dryRun: boolean,\n): Promise<void> {\n  const framework = detectFramework(cwd);\n\n  console.log(`Detected framework: ${framework}`);\n\n  if (framework === 'unknown') {\n    console.log('\\nCould not detect framework. Manual setup required:');\n    console.log(\"  import 'agent-react-devtools/connect';\");\n    console.log('  // Must be imported before React loads');\n    return;\n  }\n\n  if (framework === 'react-native') {\n    console.log('\\nReact Native detected — no code changes needed!');\n    console.log('React Native apps connect to DevTools automatically.\\n');\n    console.log('Next steps:');\n    console.log('  1. Start the daemon: agent-react-devtools start');\n    console.log('  2. Start your app: npx react-native start');\n    console.log('\\nFor physical devices:');\n    console.log('  adb reverse tcp:8097 tcp:8097');\n    console.log('\\nFor Expo:');\n    console.log('  The connection works automatically with Expo dev client.');\n    console.log('\\nCustom port:');\n    console.log('  Set REACT_DEVTOOLS_PORT=<port> environment variable');\n    return;\n  }\n\n  let modified: string[] = [];\n\n  if (dryRun) {\n    console.log('\\n[dry-run] Would modify:');\n  }\n\n  switch (framework) {\n    case 'vite':\n      modified = patchViteConfig(cwd, dryRun);\n      break;\n    case 'nextjs':\n      modified = patchNextJs(cwd, dryRun);\n      break;\n    case 'cra':\n      modified = patchCRA(cwd, dryRun);\n      break;\n  }\n\n  if (modified.length === 0) {\n    console.log('  No changes needed (already configured or could not find entry files)');\n    return;\n  }\n\n  for (const f of modified) {\n    console.log(`  ${dryRun ? '[dry-run] ' : ''}Modified: ${f}`);\n  }\n\n  console.log('\\nNext steps:');\n  console.log('  1. Install: npm install -D agent-react-devtools react-devtools-core');\n  console.log('  2. Start daemon: agent-react-devtools start');\n  console.log('  3. Start dev server and open your app');\n  console.log('  4. Inspect: agent-react-devtools get tree');\n}\n"],"mappings":"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","names":["result"]}

package/dist/vite.d.ts

@@ -0,0 +1,11 @@
+import { Plugin } from 'vite';
+
+interface ReactDevtoolsOptions {
+    /** WebSocket port the daemon listens on. Default: 8097 */
+    port?: number;
+    /** WebSocket host. Default: 'localhost' */
+    host?: string;
+}
+declare function reactDevtools(options?: ReactDevtoolsOptions): Plugin;
+
+export { type ReactDevtoolsOptions, reactDevtools };

package/dist/vite.js

@@ -0,0 +1,40 @@
+// src/vite-plugin.ts
+function reactDevtools(options) {
+  const port = options?.port ?? 8097;
+  const host = options?.host ?? "localhost";
+  return {
+    name: "agent-react-devtools",
+    apply: "serve",
+    transformIndexHtml: {
+      order: "pre",
+      handler() {
+        const tags = [];
+        if (host !== "localhost") {
+          tags.push({
+            tag: "meta",
+            attrs: { name: "agent-react-devtools-host", content: host },
+            injectTo: "head-prepend"
+          });
+        }
+        if (port !== 8097) {
+          tags.push({
+            tag: "meta",
+            attrs: { name: "agent-react-devtools-port", content: String(port) },
+            injectTo: "head-prepend"
+          });
+        }
+        tags.push({
+          tag: "script",
+          attrs: { type: "module" },
+          children: `import 'agent-react-devtools/connect';`,
+          injectTo: "head-prepend"
+        });
+        return tags;
+      }
+    }
+  };
+}
+export {
+  reactDevtools
+};
+//# sourceMappingURL=vite.js.map

package/dist/vite.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vite-plugin.ts"],"sourcesContent":["import type { Plugin, HtmlTagDescriptor } from 'vite';\n\nexport interface ReactDevtoolsOptions {\n  /** WebSocket port the daemon listens on. Default: 8097 */\n  port?: number;\n  /** WebSocket host. Default: 'localhost' */\n  host?: string;\n}\n\nexport function reactDevtools(options?: ReactDevtoolsOptions): Plugin {\n  const port = options?.port ?? 8097;\n  const host = options?.host ?? 'localhost';\n\n  return {\n    name: 'agent-react-devtools',\n    apply: 'serve',\n    transformIndexHtml: {\n      order: 'pre',\n      handler() {\n        const tags: HtmlTagDescriptor[] = [];\n\n        if (host !== 'localhost') {\n          tags.push({\n            tag: 'meta',\n            attrs: { name: 'agent-react-devtools-host', content: host },\n            injectTo: 'head-prepend',\n          });\n        }\n\n        if (port !== 8097) {\n          tags.push({\n            tag: 'meta',\n            attrs: { name: 'agent-react-devtools-port', content: String(port) },\n            injectTo: 'head-prepend',\n          });\n        }\n\n        tags.push({\n          tag: 'script',\n          attrs: { type: 'module' },\n          children: `import 'agent-react-devtools/connect';`,\n          injectTo: 'head-prepend',\n        });\n\n        return tags;\n      },\n    },\n  };\n}\n"],"mappings":";AASO,SAAS,cAAc,SAAwC;AACpE,QAAM,OAAO,SAAS,QAAQ;AAC9B,QAAM,OAAO,SAAS,QAAQ;AAE9B,SAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,oBAAoB;AAAA,MAClB,OAAO;AAAA,MACP,UAAU;AACR,cAAM,OAA4B,CAAC;AAEnC,YAAI,SAAS,aAAa;AACxB,eAAK,KAAK;AAAA,YACR,KAAK;AAAA,YACL,OAAO,EAAE,MAAM,6BAA6B,SAAS,KAAK;AAAA,YAC1D,UAAU;AAAA,UACZ,CAAC;AAAA,QACH;AAEA,YAAI,SAAS,MAAM;AACjB,eAAK,KAAK;AAAA,YACR,KAAK;AAAA,YACL,OAAO,EAAE,MAAM,6BAA6B,SAAS,OAAO,IAAI,EAAE;AAAA,YAClE,UAAU;AAAA,UACZ,CAAC;AAAA,QACH;AAEA,aAAK,KAAK;AAAA,UACR,KAAK;AAAA,UACL,OAAO,EAAE,MAAM,SAAS;AAAA,UACxB,UAAU;AAAA,UACV,UAAU;AAAA,QACZ,CAAC;AAED,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/package.json

@@ -1,18 +1,35 @@
 {
   "name": "agent-react-devtools",
-  "version": "0.1.0",
+  "version": "0.2.0-canary-20260210204855",
   "description": "CLI tool for AI agents to inspect React component trees and profile performance",
   "type": "module",
   "bin": {
     "agent-react-devtools": "./dist/cli.js"
   },
+  "exports": {
+    ".": "./dist/cli.js",
+    "./connect": {
+      "types": "./dist/connect.d.ts",
+      "import": "./dist/connect.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "test": "vitest run",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit"
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "cp ../../README.md ."
   },
   "repository": {
     "type": "git",
@@ -23,13 +40,27 @@
   "devDependencies": {
     "@types/node": "^22.0.0",
     "@types/ws": "^8.5.0",
+    "react-devtools-core": "^6.1.0",
     "tsup": "^8.0.0",
     "typescript": "^5.5.0",
+    "vite": "^6.0.0",
     "vitest": "^2.0.0"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.12.0",
     "ws": "^8.18.0",
     "zod": "^3.24.0"
+  },
+  "peerDependencies": {
+    "react-devtools-core": ">=5.0.0",
+    "vite": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-devtools-core": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
   }
 }

package/src/__tests__/cli-parser.test.ts

@@ -1,76 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-// Inline the parseArgs function for testing (it's not exported from cli.ts)
-function parseArgs(argv: string[]): {
-  command: string[];
-  flags: Record<string, string | boolean>;
-} {
-  const command: string[] = [];
-  const flags: Record<string, string | boolean> = {};
-
-  for (let i = 0; i < argv.length; i++) {
-    const arg = argv[i];
-    if (arg.startsWith('--')) {
-      const key = arg.slice(2);
-      const eqIdx = key.indexOf('=');
-      if (eqIdx !== -1) {
-        flags[key.slice(0, eqIdx)] = key.slice(eqIdx + 1);
-      } else {
-        const next = argv[i + 1];
-        if (next && !next.startsWith('--')) {
-          flags[key] = next;
-          i++;
-        } else {
-          flags[key] = true;
-        }
-      }
-    } else {
-      command.push(arg);
-    }
-  }
-  return { command, flags };
-}
-
-describe('CLI argument parser', () => {
-  it('should parse simple commands', () => {
-    const { command, flags } = parseArgs(['start']);
-    expect(command).toEqual(['start']);
-    expect(flags).toEqual({});
-  });
-
-  it('should parse commands with subcommands', () => {
-    const { command } = parseArgs(['get', 'tree']);
-    expect(command).toEqual(['get', 'tree']);
-  });
-
-  it('should parse --flag=value', () => {
-    const { flags } = parseArgs(['start', '--port=8098']);
-    expect(flags['port']).toBe('8098');
-  });
-
-  it('should parse --flag value', () => {
-    const { flags } = parseArgs(['start', '--port', '8098']);
-    expect(flags['port']).toBe('8098');
-  });
-
-  it('should parse boolean flags', () => {
-    const { flags } = parseArgs(['find', 'User', '--exact']);
-    expect(flags['exact']).toBe(true);
-  });
-
-  it('should parse mixed args', () => {
-    const { command, flags } = parseArgs([
-      'profile',
-      'slow',
-      '--limit',
-      '5',
-    ]);
-    expect(command).toEqual(['profile', 'slow']);
-    expect(flags['limit']).toBe('5');
-  });
-
-  it('should parse component id as positional arg', () => {
-    const { command } = parseArgs(['get', 'component', '42']);
-    expect(command).toEqual(['get', 'component', '42']);
-  });
-});

package/src/__tests__/component-tree.test.ts

@@ -1,229 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { ComponentTree } from '../component-tree.js';
-
-/**
- * Operations encoding reference (protocol v2):
- * [rendererID, rootFiberID, stringTableSize, ...stringTable, ...ops]
- *
- * String table: for each string, [length, ...charCodes]. String ID 0 = null.
- *
- * TREE_OPERATION_ADD (1):
- *   1, id, elementType, parentId, ownerID, displayNameStringID, keyStringID
- *
- * Element types (from react-devtools-shared/src/frontend/types.js):
- *   CLASS=1, FUNCTION=5, FORWARD_REF=6, HOST=7, MEMO=8, PROFILER=10, ROOT=11, SUSPENSE=12
- */
-
-/** Build a string table and return [tableData, stringIdMap] */
-function buildStringTable(strings: string[]): [number[], Map<string, number>] {
-  const idMap = new Map<string, number>();
-  const data: number[] = [];
-  for (const s of strings) {
-    const id = idMap.size + 1; // 0 is reserved for null
-    if (!idMap.has(s)) {
-      idMap.set(s, id);
-      data.push(s.length, ...Array.from(s).map((c) => c.charCodeAt(0)));
-    }
-  }
-  return [data, idMap];
-}
-
-/** Build a complete operations array with string table */
-function buildOps(
-  rendererID: number,
-  rootID: number,
-  strings: string[],
-  opsFn: (strId: (s: string) => number) => number[],
-): number[] {
-  const [tableData, idMap] = buildStringTable(strings);
-  const strId = (s: string) => idMap.get(s) || 0;
-  const ops = opsFn(strId);
-  return [rendererID, rootID, tableData.length, ...tableData, ...ops];
-}
-
-function addOp(
-  id: number,
-  elementType: number,
-  parentId: number,
-  displayNameStrId: number,
-  keyStrId: number = 0,
-): number[] {
-  return [1, id, elementType, parentId, 0, displayNameStrId, keyStrId];
-}
-
-function removeOp(...ids: number[]): number[] {
-  return [2, ids.length, ...ids];
-}
-
-function reorderOp(id: number, children: number[]): number[] {
-  return [3, id, children.length, ...children];
-}
-
-describe('ComponentTree', () => {
-  let tree: ComponentTree;
-
-  beforeEach(() => {
-    tree = new ComponentTree();
-  });
-
-  it('should add nodes from operations', () => {
-    const ops = buildOps(1, 100, ['App', 'Header', 'Footer'], (s) => [
-      ...addOp(1, 5, 0, s('App')),     // Function component at root
-      ...addOp(2, 8, 1, s('Header')),   // Memo child
-      ...addOp(3, 5, 1, s('Footer')),   // Function child
-    ]);
-
-    tree.applyOperations(ops);
-
-    expect(tree.getComponentCount()).toBe(3);
-
-    const node1 = tree.getNode(1);
-    expect(node1).toBeDefined();
-    expect(node1!.displayName).toBe('App');
-    expect(node1!.type).toBe('function');
-    expect(node1!.children).toEqual([2, 3]);
-
-    const node2 = tree.getNode(2);
-    expect(node2!.displayName).toBe('Header');
-    expect(node2!.type).toBe('memo');
-    expect(node2!.parentId).toBe(1);
-  });
-
-  it('should handle keys', () => {
-    const ops = buildOps(1, 100, ['List', 'Item', 'item-1', 'item-2'], (s) => [
-      ...addOp(1, 5, 0, s('List')),
-      ...addOp(2, 5, 1, s('Item'), s('item-1')),
-      ...addOp(3, 5, 1, s('Item'), s('item-2')),
-    ]);
-
-    tree.applyOperations(ops);
-
-    expect(tree.getNode(2)!.key).toBe('item-1');
-    expect(tree.getNode(3)!.key).toBe('item-2');
-  });
-
-  it('should remove nodes', () => {
-    const addOps = buildOps(1, 100, ['App', 'Child'], (s) => [
-      ...addOp(1, 5, 0, s('App')),
-      ...addOp(2, 5, 1, s('Child')),
-    ]);
-    tree.applyOperations(addOps);
-    expect(tree.getComponentCount()).toBe(2);
-
-    // Remove ops still need a string table (can be empty)
-    const rmOps = [1, 100, 0, ...removeOp(2)];
-    tree.applyOperations(rmOps);
-    expect(tree.getComponentCount()).toBe(1);
-    expect(tree.getNode(1)!.children).toEqual([]);
-  });
-
-  it('should reorder children', () => {
-    const ops = buildOps(1, 100, ['App', 'A', 'B', 'C'], (s) => [
-      ...addOp(1, 5, 0, s('App')),
-      ...addOp(2, 5, 1, s('A')),
-      ...addOp(3, 5, 1, s('B')),
-      ...addOp(4, 5, 1, s('C')),
-    ]);
-    tree.applyOperations(ops);
-    expect(tree.getNode(1)!.children).toEqual([2, 3, 4]);
-
-    const reorderOps = [1, 100, 0, ...reorderOp(1, [4, 2, 3])];
-    tree.applyOperations(reorderOps);
-    expect(tree.getNode(1)!.children).toEqual([4, 2, 3]);
-  });
-
-  it('should find by name (partial match)', () => {
-    const ops = buildOps(1, 100, ['App', 'UserProfile', 'UserCard', 'Footer'], (s) => [
-      ...addOp(1, 5, 0, s('App')),
-      ...addOp(2, 5, 1, s('UserProfile')),
-      ...addOp(3, 5, 1, s('UserCard')),
-      ...addOp(4, 5, 1, s('Footer')),
-    ]);
-    tree.applyOperations(ops);
-
-    const results = tree.findByName('user');
-    expect(results).toHaveLength(2);
-    expect(results.map((r) => r.displayName).sort()).toEqual([
-      'UserCard',
-      'UserProfile',
-    ]);
-  });
-
-  it('should find by name (exact match)', () => {
-    const ops = buildOps(1, 100, ['App', 'UserProfile', 'UserCard'], (s) => [
-      ...addOp(1, 5, 0, s('App')),
-      ...addOp(2, 5, 1, s('UserProfile')),
-      ...addOp(3, 5, 1, s('UserCard')),
-    ]);
-    tree.applyOperations(ops);
-
-    const results = tree.findByName('UserProfile', true);
-    expect(results).toHaveLength(1);
-    expect(results[0].displayName).toBe('UserProfile');
-  });
-
-  it('should get count by type', () => {
-    const ops = buildOps(1, 100, ['App', 'MemoComp', 'FuncComp', 'div'], (s) => [
-      ...addOp(1, 5, 0, s('App')),       // function
-      ...addOp(2, 8, 1, s('MemoComp')),   // memo
-      ...addOp(3, 5, 1, s('FuncComp')),   // function
-      ...addOp(4, 7, 1, s('div')),        // host
-    ]);
-    tree.applyOperations(ops);
-
-    const counts = tree.getCountByType();
-    expect(counts['function']).toBe(2);
-    expect(counts['memo']).toBe(1);
-    expect(counts['host']).toBe(1);
-  });
-
-  it('should get tree with depth limit', () => {
-    const ops = buildOps(1, 100, ['App', 'Level1', 'Level2', 'Level3'], (s) => [
-      ...addOp(1, 5, 0, s('App')),
-      ...addOp(2, 5, 1, s('Level1')),
-      ...addOp(3, 5, 2, s('Level2')),
-      ...addOp(4, 5, 3, s('Level3')),
-    ]);
-    tree.applyOperations(ops);
-
-    const fullTree = tree.getTree();
-    expect(fullTree).toHaveLength(4);
-
-    const shallow = tree.getTree(1);
-    expect(shallow).toHaveLength(2);
-    expect(shallow.map((n) => n.displayName)).toEqual(['App', 'Level1']);
-  });
-
-  it('should handle empty operations', () => {
-    tree.applyOperations([]);
-    expect(tree.getComponentCount()).toBe(0);
-
-    tree.applyOperations([1]);
-    expect(tree.getComponentCount()).toBe(0);
-  });
-
-  it('should handle all element types', () => {
-    const ops = buildOps(
-      1, 100,
-      ['ClassComp', 'FuncComp', 'ForwardRefComp', 'HostComp', 'MemoComp', 'ProfilerComp', 'SuspenseComp'],
-      (s) => [
-        ...addOp(1, 1, 0, s('ClassComp')),       // class = 1
-        ...addOp(2, 5, 1, s('FuncComp')),         // function = 5
-        ...addOp(3, 6, 1, s('ForwardRefComp')),   // forwardRef = 6
-        ...addOp(4, 7, 1, s('HostComp')),         // host = 7
-        ...addOp(5, 8, 1, s('MemoComp')),         // memo = 8
-        ...addOp(6, 10, 1, s('ProfilerComp')),    // profiler = 10
-        ...addOp(7, 12, 1, s('SuspenseComp')),    // suspense = 12
-      ],
-    );
-    tree.applyOperations(ops);
-
-    expect(tree.getNode(1)!.type).toBe('class');
-    expect(tree.getNode(2)!.type).toBe('function');
-    expect(tree.getNode(3)!.type).toBe('forwardRef');
-    expect(tree.getNode(4)!.type).toBe('host');
-    expect(tree.getNode(5)!.type).toBe('memo');
-    expect(tree.getNode(6)!.type).toBe('profiler');
-    expect(tree.getNode(7)!.type).toBe('suspense');
-  });
-});