@react-grab/cli 0.1.0-beta.5 → 0.1.0-beta.6

package/dist/cli.js

@@ -3,13 +3,12 @@ import { Command } from 'commander';
 import e from 'assert';
 import pc from 'picocolors';
 import prompts3 from 'prompts';
-import { execSync, spawn } from 'child_process';
-import { rmSync, mkdirSync, writeFileSync, readFileSync, existsSync, accessSync, constants, readdirSync } from 'fs';
+import { existsSync, readFileSync, writeFileSync, accessSync, constants, readdirSync } from 'fs';
 import { join, dirname, basename } from 'path';
-import { detect } from '@antfu/ni';
+import { execSync } from 'child_process';
 import ora from 'ora';
+import { detect } from '@antfu/ni';
 import { createRequire } from 'module';
-import { fileURLToPath } from 'url';
 import { chromium } from 'playwright-core';
 import { findInstalledBrowsers, BROWSER_DISPLAY_NAMES, dumpCookies, COOKIE_PREVIEW_LIMIT, DEFAULT_SERVER_PORT, isServerRunning, getServerInfo, spawnServer, serve, toPlaywrightCookies, applyStealthScripts, deleteServerInfo, DEFAULT_NAVIGATION_TIMEOUT_MS, findPageByTargetId, isLinux, installLinuxDeps, getDefaultBrowser, SUPPORTED_BROWSERS, isServerHealthy, stopServer, getSnapshotScript } from '@react-grab/browser';
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
@@ -1050,670 +1049,224 @@ function h(e3, t2, n2) {
   n2.set(t2, e3);
   for (let r2 of e3.commands) r2.name() !== `complete` && h(r2, t2 ? `${t2} ${r2.name()}` : r2.name(), n2);
 }
-var detectPackageManager = async (projectRoot) => {
-  const detected = await detect({ cwd: projectRoot });
-  if (detected && ["npm", "yarn", "pnpm", "bun"].includes(detected)) {
-    return detected;
-  }
-  return "npm";
+
+// src/utils/templates.ts
+var AGENTS = [
+  "claude-code",
+  "cursor",
+  "opencode",
+  "codex",
+  "gemini",
+  "amp",
+  "ami",
+  "visual-edit"
+];
+var AGENT_NAMES = {
+  "claude-code": "Claude Code",
+  cursor: "Cursor",
+  opencode: "OpenCode",
+  codex: "Codex",
+  gemini: "Gemini",
+  amp: "Amp",
+  ami: "Ami",
+  "visual-edit": "Visual Edit"
 };
-var detectFramework = (projectRoot) => {
-  const packageJsonPath = join(projectRoot, "package.json");
-  if (!existsSync(packageJsonPath)) {
-    return "unknown";
-  }
-  try {
-    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-    const allDependencies = {
-      ...packageJson.dependencies,
-      ...packageJson.devDependencies
-    };
-    if (allDependencies["next"]) {
-      return "next";
-    }
-    if (allDependencies["vite"]) {
-      return "vite";
-    }
-    if (allDependencies["webpack"]) {
-      return "webpack";
+AGENTS.filter((agent) => agent !== "ami").map(
+  (agent) => `@react-grab/${agent}`
+);
+var NEXT_APP_ROUTER_SCRIPT = `{process.env.NODE_ENV === "development" && (
+          <Script
+            src="//unpkg.com/react-grab/dist/index.global.js"
+            crossOrigin="anonymous"
+            strategy="beforeInteractive"
+          />
+        )}`;
+var NEXT_APP_ROUTER_SCRIPT_WITH_AGENT = (agent) => {
+  if (agent === "none") return NEXT_APP_ROUTER_SCRIPT;
+  return `{process.env.NODE_ENV === "development" && (
+          <Script
+            src="//unpkg.com/react-grab/dist/index.global.js"
+            crossOrigin="anonymous"
+            strategy="beforeInteractive"
+          />
+        )}
+        {process.env.NODE_ENV === "development" && (
+          <Script
+            src="//unpkg.com/@react-grab/${agent}/dist/client.global.js"
+            strategy="lazyOnload"
+          />
+        )}`;
+};
+var NEXT_PAGES_ROUTER_SCRIPT = `{process.env.NODE_ENV === "development" && (
+          <Script
+            src="//unpkg.com/react-grab/dist/index.global.js"
+            crossOrigin="anonymous"
+            strategy="beforeInteractive"
+          />
+        )}`;
+var NEXT_PAGES_ROUTER_SCRIPT_WITH_AGENT = (agent) => {
+  if (agent === "none") return NEXT_PAGES_ROUTER_SCRIPT;
+  return `{process.env.NODE_ENV === "development" && (
+          <Script
+            src="//unpkg.com/react-grab/dist/index.global.js"
+            crossOrigin="anonymous"
+            strategy="beforeInteractive"
+          />
+        )}
+        {process.env.NODE_ENV === "development" && (
+          <Script
+            src="//unpkg.com/@react-grab/${agent}/dist/client.global.js"
+            strategy="lazyOnload"
+          />
+        )}`;
+};
+var VITE_SCRIPT = `<script type="module">
+      if (import.meta.env.DEV) {
+        import("react-grab");
+      }
+    </script>`;
+var VITE_SCRIPT_WITH_AGENT = (agent) => {
+  if (agent === "none") return VITE_SCRIPT;
+  return `<script type="module">
+      if (import.meta.env.DEV) {
+        import("react-grab");
+        import("@react-grab/${agent}/client");
+      }
+    </script>`;
+};
+var WEBPACK_IMPORT = `if (process.env.NODE_ENV === "development") {
+  import("react-grab");
+}`;
+var WEBPACK_IMPORT_WITH_AGENT = (agent) => {
+  if (agent === "none") return WEBPACK_IMPORT;
+  return `if (process.env.NODE_ENV === "development") {
+  import("react-grab");
+  import("@react-grab/${agent}/client");
+}`;
+};
+var SCRIPT_IMPORT = 'import Script from "next/script";';
+var MCP_CLIENTS = [
+  "cursor",
+  "claude-code",
+  "vscode",
+  "opencode",
+  "codex",
+  "gemini-cli",
+  // "cline",
+  // "roo-cline",
+  "windsurf",
+  "zed",
+  // "warp",
+  "droid"
+  // "claude",
+];
+var MCP_CLIENT_NAMES = {
+  "cursor": "Cursor",
+  "claude-code": "Claude Code",
+  "vscode": "VSCode",
+  "opencode": "OpenCode",
+  "codex": "Codex",
+  "gemini-cli": "Gemini CLI",
+  // "cline": "Cline",
+  // "roo-cline": "Roo Cline",
+  "windsurf": "Windsurf",
+  "zed": "Zed",
+  // "warp": "Warp",
+  "droid": "Droid"
+  // "claude": "Claude Desktop",
+};
+var SKILL_AGENTS = [
+  { id: "opencode", name: "OpenCode", folder: ".opencode" },
+  { id: "claude-code", name: "Claude Code", folder: ".claude" },
+  { id: "codex", name: "Codex", folder: ".codex" },
+  { id: "cursor", name: "Cursor", folder: ".cursor" },
+  { id: "vscode", name: "VSCode", folder: ".github" }
+];
+
+// src/utils/transform.ts
+var hasReactGrabCode = (content) => {
+  const fuzzyPatterns = [
+    /["'`][^"'`]*react-grab/,
+    /react-grab[^"'`]*["'`]/,
+    /<[^>]*react-grab/i,
+    /import[^;]*react-grab/i,
+    /require[^)]*react-grab/i,
+    /from\s+[^;]*react-grab/i,
+    /src[^>]*react-grab/i,
+    /href[^>]*react-grab/i
+  ];
+  return fuzzyPatterns.some((pattern) => pattern.test(content));
+};
+var findLayoutFile = (projectRoot) => {
+  const possiblePaths = [
+    join(projectRoot, "app", "layout.tsx"),
+    join(projectRoot, "app", "layout.jsx"),
+    join(projectRoot, "src", "app", "layout.tsx"),
+    join(projectRoot, "src", "app", "layout.jsx")
+  ];
+  for (const filePath of possiblePaths) {
+    if (existsSync(filePath)) {
+      return filePath;
     }
-    return "unknown";
-  } catch {
-    return "unknown";
   }
+  return null;
 };
-var detectNextRouterType = (projectRoot) => {
-  const hasAppDir = existsSync(join(projectRoot, "app"));
-  const hasSrcAppDir = existsSync(join(projectRoot, "src", "app"));
-  const hasPagesDir = existsSync(join(projectRoot, "pages"));
-  const hasSrcPagesDir = existsSync(join(projectRoot, "src", "pages"));
-  if (hasAppDir || hasSrcAppDir) {
-    return "app";
-  }
-  if (hasPagesDir || hasSrcPagesDir) {
-    return "pages";
+var findInstrumentationFile = (projectRoot) => {
+  const possiblePaths = [
+    join(projectRoot, "instrumentation-client.ts"),
+    join(projectRoot, "instrumentation-client.js"),
+    join(projectRoot, "src", "instrumentation-client.ts"),
+    join(projectRoot, "src", "instrumentation-client.js")
+  ];
+  for (const filePath of possiblePaths) {
+    if (existsSync(filePath)) {
+      return filePath;
+    }
   }
-  return "unknown";
+  return null;
 };
-var detectMonorepo = (projectRoot) => {
-  if (existsSync(join(projectRoot, "pnpm-workspace.yaml"))) {
-    return true;
-  }
-  if (existsSync(join(projectRoot, "lerna.json"))) {
-    return true;
+var hasReactGrabInInstrumentation = (projectRoot) => {
+  const instrumentationPath = findInstrumentationFile(projectRoot);
+  if (!instrumentationPath) return false;
+  const content = readFileSync(instrumentationPath, "utf-8");
+  return hasReactGrabCode(content);
+};
+var findDocumentFile = (projectRoot) => {
+  const possiblePaths = [
+    join(projectRoot, "pages", "_document.tsx"),
+    join(projectRoot, "pages", "_document.jsx"),
+    join(projectRoot, "src", "pages", "_document.tsx"),
+    join(projectRoot, "src", "pages", "_document.jsx")
+  ];
+  for (const filePath of possiblePaths) {
+    if (existsSync(filePath)) {
+      return filePath;
+    }
   }
-  const packageJsonPath = join(projectRoot, "package.json");
-  if (existsSync(packageJsonPath)) {
-    try {
-      const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-      if (packageJson.workspaces) {
-        return true;
-      }
-    } catch {
-      return false;
+  return null;
+};
+var findIndexHtml = (projectRoot) => {
+  const possiblePaths = [
+    join(projectRoot, "index.html"),
+    join(projectRoot, "public", "index.html")
+  ];
+  for (const filePath of possiblePaths) {
+    if (existsSync(filePath)) {
+      return filePath;
     }
   }
-  return false;
+  return null;
 };
-var getWorkspacePatterns = (projectRoot) => {
-  const patterns = [];
-  const pnpmWorkspacePath = join(projectRoot, "pnpm-workspace.yaml");
-  if (existsSync(pnpmWorkspacePath)) {
-    const content = readFileSync(pnpmWorkspacePath, "utf-8");
-    const lines = content.split("\n");
-    let inPackages = false;
-    for (const line of lines) {
-      if (line.match(/^packages:\s*$/)) {
-        inPackages = true;
-        continue;
-      }
-      if (inPackages) {
-        if (line.match(/^[a-zA-Z]/) || line.trim() === "") {
-          if (line.match(/^[a-zA-Z]/)) inPackages = false;
-          continue;
-        }
-        const match = line.match(/^\s*-\s*['"]?([^'"#\n]+?)['"]?\s*$/);
-        if (match) {
-          patterns.push(match[1].trim());
-        }
-      }
-    }
-  }
-  const lernaJsonPath = join(projectRoot, "lerna.json");
-  if (existsSync(lernaJsonPath)) {
-    try {
-      const lernaJson = JSON.parse(readFileSync(lernaJsonPath, "utf-8"));
-      if (Array.isArray(lernaJson.packages)) {
-        patterns.push(...lernaJson.packages);
-      }
-    } catch {
-    }
-  }
-  const packageJsonPath = join(projectRoot, "package.json");
-  if (existsSync(packageJsonPath)) {
-    try {
-      const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-      if (Array.isArray(packageJson.workspaces)) {
-        patterns.push(...packageJson.workspaces);
-      } else if (packageJson.workspaces?.packages) {
-        patterns.push(...packageJson.workspaces.packages);
-      }
-    } catch {
-    }
-  }
-  return [...new Set(patterns)];
-};
-var expandWorkspacePattern = (projectRoot, pattern) => {
-  const results = [];
-  const cleanPattern = pattern.replace(/\/\*$/, "");
-  const basePath = join(projectRoot, cleanPattern);
-  if (!existsSync(basePath)) return results;
-  try {
-    const entries = readdirSync(basePath, { withFileTypes: true });
-    for (const entry of entries) {
-      if (entry.isDirectory()) {
-        const packageJsonPath = join(basePath, entry.name, "package.json");
-        if (existsSync(packageJsonPath)) {
-          results.push(join(basePath, entry.name));
-        }
-      }
-    }
-  } catch {
-    return results;
-  }
-  return results;
-};
-var hasReactDependency = (projectPath) => {
-  const packageJsonPath = join(projectPath, "package.json");
-  if (!existsSync(packageJsonPath)) return false;
-  try {
-    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-    const allDeps = {
-      ...packageJson.dependencies,
-      ...packageJson.devDependencies
-    };
-    return Boolean(allDeps["react"] || allDeps["react-dom"]);
-  } catch {
-    return false;
-  }
-};
-var findWorkspaceProjects = (projectRoot) => {
-  const patterns = getWorkspacePatterns(projectRoot);
-  const projects = [];
-  for (const pattern of patterns) {
-    const projectPaths = expandWorkspacePattern(projectRoot, pattern);
-    for (const projectPath of projectPaths) {
-      const framework = detectFramework(projectPath);
-      const hasReact = hasReactDependency(projectPath);
-      if (hasReact || framework !== "unknown") {
-        const packageJsonPath = join(projectPath, "package.json");
-        let name = basename(projectPath);
-        try {
-          const packageJson = JSON.parse(
-            readFileSync(packageJsonPath, "utf-8")
-          );
-          name = packageJson.name || name;
-        } catch {
-        }
-        projects.push({
-          name,
-          path: projectPath,
-          framework,
-          hasReact
-        });
-      }
-    }
-  }
-  return projects;
-};
-var hasReactGrabInFile = (filePath) => {
-  if (!existsSync(filePath)) return false;
-  try {
-    const content = readFileSync(filePath, "utf-8");
-    const fuzzyPatterns = [
-      /["'`][^"'`]*react-grab/,
-      /react-grab[^"'`]*["'`]/,
-      /<[^>]*react-grab/i,
-      /import[^;]*react-grab/i,
-      /require[^)]*react-grab/i,
-      /from\s+[^;]*react-grab/i,
-      /src[^>]*react-grab/i
-    ];
-    return fuzzyPatterns.some((pattern) => pattern.test(content));
-  } catch {
-    return false;
-  }
-};
-var detectReactGrab = (projectRoot) => {
-  const packageJsonPath = join(projectRoot, "package.json");
-  if (existsSync(packageJsonPath)) {
-    try {
-      const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-      const allDependencies = {
-        ...packageJson.dependencies,
-        ...packageJson.devDependencies
-      };
-      if (allDependencies["react-grab"]) {
-        return true;
-      }
-    } catch {
-    }
-  }
-  const filesToCheck = [
-    join(projectRoot, "app", "layout.tsx"),
-    join(projectRoot, "app", "layout.jsx"),
-    join(projectRoot, "src", "app", "layout.tsx"),
-    join(projectRoot, "src", "app", "layout.jsx"),
-    join(projectRoot, "pages", "_document.tsx"),
-    join(projectRoot, "pages", "_document.jsx"),
-    join(projectRoot, "instrumentation-client.ts"),
-    join(projectRoot, "instrumentation-client.js"),
-    join(projectRoot, "src", "instrumentation-client.ts"),
-    join(projectRoot, "src", "instrumentation-client.js"),
-    join(projectRoot, "index.html"),
-    join(projectRoot, "public", "index.html"),
-    join(projectRoot, "src", "index.tsx"),
-    join(projectRoot, "src", "index.ts"),
-    join(projectRoot, "src", "main.tsx"),
-    join(projectRoot, "src", "main.ts")
-  ];
-  return filesToCheck.some(hasReactGrabInFile);
-};
-var AGENT_PACKAGES = [
-  "@react-grab/claude-code",
-  "@react-grab/cursor",
-  "@react-grab/opencode",
-  "@react-grab/codex",
-  "@react-grab/gemini",
-  "@react-grab/amp",
-  "@react-grab/ami",
-  "@react-grab/visual-edit"
-];
-var detectUnsupportedFramework = (projectRoot) => {
-  const packageJsonPath = join(projectRoot, "package.json");
-  if (!existsSync(packageJsonPath)) {
-    return null;
-  }
-  try {
-    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-    const allDependencies = {
-      ...packageJson.dependencies,
-      ...packageJson.devDependencies
-    };
-    if (allDependencies["@remix-run/react"] || allDependencies["remix"]) {
-      return "remix";
-    }
-    if (allDependencies["astro"]) {
-      return "astro";
-    }
-    if (allDependencies["@sveltejs/kit"]) {
-      return "sveltekit";
-    }
-    if (allDependencies["gatsby"]) {
-      return "gatsby";
-    }
-    return null;
-  } catch {
-    return null;
-  }
-};
-var detectInstalledAgents = (projectRoot) => {
-  const packageJsonPath = join(projectRoot, "package.json");
-  if (!existsSync(packageJsonPath)) {
-    return [];
-  }
-  try {
-    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-    const allDependencies = {
-      ...packageJson.dependencies,
-      ...packageJson.devDependencies
-    };
-    return AGENT_PACKAGES.filter(
-      (agent) => Boolean(allDependencies[agent])
-    ).map((agent) => agent.replace("@react-grab/", ""));
-  } catch {
-    return [];
-  }
-};
-var detectProject = async (projectRoot = process.cwd()) => {
-  const framework = detectFramework(projectRoot);
-  const packageManager = await detectPackageManager(projectRoot);
-  return {
-    packageManager,
-    framework,
-    nextRouterType: framework === "next" ? detectNextRouterType(projectRoot) : "unknown",
-    isMonorepo: detectMonorepo(projectRoot),
-    projectRoot,
-    hasReactGrab: detectReactGrab(projectRoot),
-    installedAgents: detectInstalledAgents(projectRoot),
-    unsupportedFramework: detectUnsupportedFramework(projectRoot)
-  };
-};
-
-// src/utils/diff.ts
-var RED = "\x1B[31m";
-var GREEN = "\x1B[32m";
-var GRAY = "\x1B[90m";
-var RESET = "\x1B[0m";
-var BOLD = "\x1B[1m";
-var generateDiff = (originalContent, newContent) => {
-  const originalLines = originalContent.split("\n");
-  const newLines = newContent.split("\n");
-  const diff = [];
-  Math.max(originalLines.length, newLines.length);
-  let originalIndex = 0;
-  let newIndex = 0;
-  while (originalIndex < originalLines.length || newIndex < newLines.length) {
-    const originalLine = originalLines[originalIndex];
-    const newLine = newLines[newIndex];
-    if (originalLine === newLine) {
-      diff.push({
-        type: "unchanged",
-        content: originalLine,
-        lineNumber: newIndex + 1
-      });
-      originalIndex++;
-      newIndex++;
-    } else if (originalLine === void 0) {
-      diff.push({ type: "added", content: newLine, lineNumber: newIndex + 1 });
-      newIndex++;
-    } else if (newLine === void 0) {
-      diff.push({ type: "removed", content: originalLine });
-      originalIndex++;
-    } else {
-      const originalInNew = newLines.indexOf(originalLine, newIndex);
-      const newInOriginal = originalLines.indexOf(newLine, originalIndex);
-      if (originalInNew !== -1 && (newInOriginal === -1 || originalInNew - newIndex < newInOriginal - originalIndex)) {
-        while (newIndex < originalInNew) {
-          diff.push({
-            type: "added",
-            content: newLines[newIndex],
-            lineNumber: newIndex + 1
-          });
-          newIndex++;
-        }
-      } else if (newInOriginal !== -1) {
-        while (originalIndex < newInOriginal) {
-          diff.push({ type: "removed", content: originalLines[originalIndex] });
-          originalIndex++;
-        }
-      } else {
-        diff.push({ type: "removed", content: originalLine });
-        diff.push({
-          type: "added",
-          content: newLine,
-          lineNumber: newIndex + 1
-        });
-        originalIndex++;
-        newIndex++;
-      }
-    }
-  }
-  return diff;
-};
-var formatDiff = (diff, contextLines = 3) => {
-  const lines = [];
-  let lastPrintedIndex = -1;
-  let hasChanges = false;
-  const changedIndices = diff.map((line, index) => line.type !== "unchanged" ? index : -1).filter((index) => index !== -1);
-  if (changedIndices.length === 0) {
-    return `${GRAY}No changes${RESET}`;
-  }
-  for (const changedIndex of changedIndices) {
-    const startContext = Math.max(0, changedIndex - contextLines);
-    const endContext = Math.min(diff.length - 1, changedIndex + contextLines);
-    if (startContext > lastPrintedIndex + 1 && lastPrintedIndex !== -1) {
-      lines.push(`${GRAY}  ...${RESET}`);
-    }
-    for (let lineIndex = Math.max(startContext, lastPrintedIndex + 1); lineIndex <= endContext; lineIndex++) {
-      const diffLine = diff[lineIndex];
-      if (diffLine.type === "added") {
-        lines.push(`${GREEN}+ ${diffLine.content}${RESET}`);
-        hasChanges = true;
-      } else if (diffLine.type === "removed") {
-        lines.push(`${RED}- ${diffLine.content}${RESET}`);
-        hasChanges = true;
-      } else {
-        lines.push(`${GRAY}  ${diffLine.content}${RESET}`);
-      }
-      lastPrintedIndex = lineIndex;
-    }
-  }
-  return hasChanges ? lines.join("\n") : `${GRAY}No changes${RESET}`;
-};
-var printDiff = (filePath, originalContent, newContent) => {
-  console.log(`
-${BOLD}File: ${filePath}${RESET}`);
-  console.log("\u2500".repeat(60));
-  const diff = generateDiff(originalContent, newContent);
-  console.log(formatDiff(diff));
-  console.log("\u2500".repeat(60));
-};
-var highlighter = {
-  error: pc.red,
-  warn: pc.yellow,
-  info: pc.cyan,
-  success: pc.green,
-  dim: pc.dim
-};
-
-// src/utils/logger.ts
-var logger = {
-  error(...args) {
-    console.log(highlighter.error(args.join(" ")));
-  },
-  warn(...args) {
-    console.log(highlighter.warn(args.join(" ")));
-  },
-  info(...args) {
-    console.log(highlighter.info(args.join(" ")));
-  },
-  success(...args) {
-    console.log(highlighter.success(args.join(" ")));
-  },
-  dim(...args) {
-    console.log(highlighter.dim(args.join(" ")));
-  },
-  log(...args) {
-    console.log(args.join(" "));
-  },
-  break() {
-    console.log("");
-  }
-};
-
-// src/utils/handle-error.ts
-var handleError = (error48) => {
-  logger.break();
-  logger.error(
-    "Something went wrong. Please check the error below for more details."
-  );
-  logger.error("If the problem persists, please open an issue on GitHub.");
-  logger.error("");
-  if (error48 instanceof Error) {
-    logger.error(error48.message);
-  }
-  logger.break();
-  process.exit(1);
-};
-var INSTALL_COMMANDS = {
-  npm: "npm install",
-  yarn: "yarn add",
-  pnpm: "pnpm add",
-  bun: "bun add"
-};
-var UNINSTALL_COMMANDS = {
-  npm: "npm uninstall",
-  yarn: "yarn remove",
-  pnpm: "pnpm remove",
-  bun: "bun remove"
-};
-var installPackages = (packages, packageManager, projectRoot, isDev = true) => {
-  if (packages.length === 0) {
-    return;
-  }
-  const command = INSTALL_COMMANDS[packageManager];
-  const devFlag = isDev ? " -D" : "";
-  const fullCommand = `${command}${devFlag} ${packages.join(" ")}`;
-  console.log(`Running: ${fullCommand}
-`);
-  execSync(fullCommand, {
-    cwd: projectRoot,
-    stdio: "inherit"
-  });
-};
-var getPackagesToInstall = (agent, includeReactGrab = true) => {
-  const packages = [];
-  if (includeReactGrab) {
-    packages.push("react-grab");
-  }
-  if (agent !== "none") {
-    packages.push(`@react-grab/${agent}`);
-  }
-  return packages;
-};
-var uninstallPackages = (packages, packageManager, projectRoot) => {
-  if (packages.length === 0) {
-    return;
-  }
-  const command = UNINSTALL_COMMANDS[packageManager];
-  const fullCommand = `${command} ${packages.join(" ")}`;
-  console.log(`Running: ${fullCommand}
-`);
-  execSync(fullCommand, {
-    cwd: projectRoot,
-    stdio: "inherit"
-  });
-};
-var getPackagesToUninstall = (agent) => {
-  return [`@react-grab/${agent}`];
-};
-var spinner = (text, options2) => ora({ text, isSilent: options2?.silent });
-
-// src/utils/templates.ts
-var AGENTS = [
-  "claude-code",
-  "cursor",
-  "opencode",
-  "codex",
-  "gemini",
-  "amp",
-  "ami",
-  "visual-edit"
-];
-var AGENT_NAMES = {
-  "claude-code": "Claude Code",
-  cursor: "Cursor",
-  opencode: "OpenCode",
-  codex: "Codex",
-  gemini: "Gemini",
-  amp: "Amp",
-  ami: "Ami",
-  "visual-edit": "Visual Edit"
-};
-AGENTS.filter((agent) => agent !== "ami").map(
-  (agent) => `@react-grab/${agent}`
-);
-var NEXT_APP_ROUTER_SCRIPT = `{process.env.NODE_ENV === "development" && (
-          <Script
-            src="//unpkg.com/react-grab/dist/index.global.js"
-            crossOrigin="anonymous"
-            strategy="beforeInteractive"
-          />
-        )}`;
-var NEXT_APP_ROUTER_SCRIPT_WITH_AGENT = (agent) => {
-  if (agent === "none") return NEXT_APP_ROUTER_SCRIPT;
-  return `{process.env.NODE_ENV === "development" && (
-          <Script
-            src="//unpkg.com/react-grab/dist/index.global.js"
-            crossOrigin="anonymous"
-            strategy="beforeInteractive"
-          />
-        )}
-        {process.env.NODE_ENV === "development" && (
-          <Script
-            src="//unpkg.com/@react-grab/${agent}/dist/client.global.js"
-            strategy="lazyOnload"
-          />
-        )}`;
-};
-var NEXT_PAGES_ROUTER_SCRIPT = `{process.env.NODE_ENV === "development" && (
-          <Script
-            src="//unpkg.com/react-grab/dist/index.global.js"
-            crossOrigin="anonymous"
-            strategy="beforeInteractive"
-          />
-        )}`;
-var NEXT_PAGES_ROUTER_SCRIPT_WITH_AGENT = (agent) => {
-  if (agent === "none") return NEXT_PAGES_ROUTER_SCRIPT;
-  return `{process.env.NODE_ENV === "development" && (
-          <Script
-            src="//unpkg.com/react-grab/dist/index.global.js"
-            crossOrigin="anonymous"
-            strategy="beforeInteractive"
-          />
-        )}
-        {process.env.NODE_ENV === "development" && (
-          <Script
-            src="//unpkg.com/@react-grab/${agent}/dist/client.global.js"
-            strategy="lazyOnload"
-          />
-        )}`;
-};
-var VITE_SCRIPT = `<script type="module">
-      if (import.meta.env.DEV) {
-        import("react-grab");
-      }
-    </script>`;
-var VITE_SCRIPT_WITH_AGENT = (agent) => {
-  if (agent === "none") return VITE_SCRIPT;
-  return `<script type="module">
-      if (import.meta.env.DEV) {
-        import("react-grab");
-        import("@react-grab/${agent}/client");
-      }
-    </script>`;
-};
-var WEBPACK_IMPORT = `if (process.env.NODE_ENV === "development") {
-  import("react-grab");
-}`;
-var WEBPACK_IMPORT_WITH_AGENT = (agent) => {
-  if (agent === "none") return WEBPACK_IMPORT;
-  return `if (process.env.NODE_ENV === "development") {
-  import("react-grab");
-  import("@react-grab/${agent}/client");
-}`;
-};
-var SCRIPT_IMPORT = 'import Script from "next/script";';
-var MCP_CLIENTS = [
-  "cursor",
-  "claude-code",
-  "vscode",
-  "opencode",
-  "codex",
-  "gemini-cli",
-  // "cline",
-  // "roo-cline",
-  "windsurf",
-  "zed",
-  // "warp",
-  "droid"
-  // "claude",
-];
-var MCP_CLIENT_NAMES = {
-  "cursor": "Cursor",
-  "claude-code": "Claude Code",
-  "vscode": "VSCode",
-  "opencode": "OpenCode",
-  "codex": "Codex",
-  "gemini-cli": "Gemini CLI",
-  // "cline": "Cline",
-  // "roo-cline": "Roo Cline",
-  "windsurf": "Windsurf",
-  "zed": "Zed",
-  // "warp": "Warp",
-  "droid": "Droid"
-  // "claude": "Claude Desktop",
-};
-
-// src/utils/skill-files.ts
-var REPO = "aidenybai/react-grab";
-var BRANCH = "main";
-var BASE_URL = `https://raw.githubusercontent.com/${REPO}/${BRANCH}`;
-var fetchSkillFile = async () => {
-  const skillUrl = `${BASE_URL}/skills/react-grab-browser/SKILL.md`;
-  const response = await fetch(skillUrl);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch SKILL.md: ${response.status}`);
-  }
-  return response.text();
-};
-var AGENT_TARGETS = {
-  claude: ".claude/skills/react-grab-browser",
-  codex: ".codex/skills/react-grab-browser",
-  amp: ".agents/skills/react-grab-browser",
-  vscode: ".vscode/skills/react-grab-browser"
-};
-var SUPPORTED_TARGETS = Object.keys(AGENT_TARGETS);
-var hasReactGrabCode = (content) => {
-  const fuzzyPatterns = [
-    /["'`][^"'`]*react-grab/,
-    /react-grab[^"'`]*["'`]/,
-    /<[^>]*react-grab/i,
-    /import[^;]*react-grab/i,
-    /require[^)]*react-grab/i,
-    /from\s+[^;]*react-grab/i,
-    /src[^>]*react-grab/i,
-    /href[^>]*react-grab/i
-  ];
-  return fuzzyPatterns.some((pattern) => pattern.test(content));
-};
-var findLayoutFile = (projectRoot) => {
+var findEntryFile = (projectRoot) => {
   const possiblePaths = [
-    join(projectRoot, "app", "layout.tsx"),
-    join(projectRoot, "app", "layout.jsx"),
-    join(projectRoot, "src", "app", "layout.tsx"),
-    join(projectRoot, "src", "app", "layout.jsx")
+    join(projectRoot, "src", "index.tsx"),
+    join(projectRoot, "src", "index.jsx"),
+    join(projectRoot, "src", "index.ts"),
+    join(projectRoot, "src", "index.js"),
+    join(projectRoot, "src", "main.tsx"),
+    join(projectRoot, "src", "main.jsx"),
+    join(projectRoot, "src", "main.ts"),
+    join(projectRoot, "src", "main.js")
   ];
   for (const filePath of possiblePaths) {
     if (existsSync(filePath)) {
@@ -1722,585 +1275,904 @@ var findLayoutFile = (projectRoot) => {
   }
   return null;
 };
-var findInstrumentationFile = (projectRoot) => {
-  const possiblePaths = [
-    join(projectRoot, "instrumentation-client.ts"),
-    join(projectRoot, "instrumentation-client.js"),
-    join(projectRoot, "src", "instrumentation-client.ts"),
-    join(projectRoot, "src", "instrumentation-client.js")
-  ];
-  for (const filePath of possiblePaths) {
-    if (existsSync(filePath)) {
-      return filePath;
-    }
+var addAgentToExistingNextApp = (originalContent, agent, filePath) => {
+  if (agent === "none") {
+    return {
+      success: true,
+      filePath,
+      message: "React Grab is already configured",
+      noChanges: true
+    };
   }
-  return null;
+  const agentPackage = `@react-grab/${agent}`;
+  if (originalContent.includes(agentPackage)) {
+    return {
+      success: true,
+      filePath,
+      message: `Agent ${agent} is already configured`,
+      noChanges: true
+    };
+  }
+  const agentScript = `{process.env.NODE_ENV === "development" && (
+          <Script
+            src="//unpkg.com/${agentPackage}/dist/client.global.js"
+            strategy="lazyOnload"
+          />
+        )}`;
+  const reactGrabBlockMatch = originalContent.match(
+    /\{process\.env\.NODE_ENV\s*===\s*["']development["']\s*&&\s*\(\s*<Script[^>]*react-grab[^>]*\/>\s*\)\}/is
+  );
+  if (reactGrabBlockMatch) {
+    const newContent = originalContent.replace(
+      reactGrabBlockMatch[0],
+      `${reactGrabBlockMatch[0]}
+        ${agentScript}`
+    );
+    return {
+      success: true,
+      filePath,
+      message: `Add ${agent} agent`,
+      originalContent,
+      newContent
+    };
+  }
+  const bareScriptMatch = originalContent.match(
+    /<Script[^>]*react-grab[^>]*\/>/i
+  );
+  if (bareScriptMatch) {
+    const newContent = originalContent.replace(
+      bareScriptMatch[0],
+      `${bareScriptMatch[0]}
+        <Script src="//unpkg.com/${agentPackage}/dist/client.global.js" strategy="lazyOnload" />`
+    );
+    return {
+      success: true,
+      filePath,
+      message: `Add ${agent} agent`,
+      originalContent,
+      newContent
+    };
+  }
+  return {
+    success: false,
+    filePath,
+    message: "Could not find React Grab script to add agent after"
+  };
 };
-var hasReactGrabInInstrumentation = (projectRoot) => {
-  const instrumentationPath = findInstrumentationFile(projectRoot);
-  if (!instrumentationPath) return false;
-  const content = readFileSync(instrumentationPath, "utf-8");
-  return hasReactGrabCode(content);
+var addAgentToExistingVite = (originalContent, agent, filePath) => {
+  if (agent === "none") {
+    return {
+      success: true,
+      filePath,
+      message: "React Grab is already configured",
+      noChanges: true
+    };
+  }
+  const agentPackage = `@react-grab/${agent}`;
+  if (originalContent.includes(agentPackage)) {
+    return {
+      success: true,
+      filePath,
+      message: `Agent ${agent} is already configured`,
+      noChanges: true
+    };
+  }
+  const agentImport = `import("${agentPackage}/client");`;
+  const reactGrabImportMatch = originalContent.match(
+    /import\s*\(\s*["']react-grab["']\s*\);?/
+  );
+  if (reactGrabImportMatch) {
+    const matchedText = reactGrabImportMatch[0];
+    const hasSemicolon = matchedText.endsWith(";");
+    const newContent = originalContent.replace(
+      matchedText,
+      `${hasSemicolon ? matchedText.slice(0, -1) : matchedText};
+        ${agentImport}`
+    );
+    return {
+      success: true,
+      filePath,
+      message: `Add ${agent} agent`,
+      originalContent,
+      newContent
+    };
+  }
+  return {
+    success: false,
+    filePath,
+    message: "Could not find React Grab import to add agent after"
+  };
 };
-var findDocumentFile = (projectRoot) => {
-  const possiblePaths = [
-    join(projectRoot, "pages", "_document.tsx"),
-    join(projectRoot, "pages", "_document.jsx"),
-    join(projectRoot, "src", "pages", "_document.tsx"),
-    join(projectRoot, "src", "pages", "_document.jsx")
-  ];
-  for (const filePath of possiblePaths) {
-    if (existsSync(filePath)) {
-      return filePath;
-    }
+var addAgentToExistingWebpack = (originalContent, agent, filePath) => {
+  if (agent === "none") {
+    return {
+      success: true,
+      filePath,
+      message: "React Grab is already configured",
+      noChanges: true
+    };
   }
-  return null;
+  const agentPackage = `@react-grab/${agent}`;
+  if (originalContent.includes(agentPackage)) {
+    return {
+      success: true,
+      filePath,
+      message: `Agent ${agent} is already configured`,
+      noChanges: true
+    };
+  }
+  const agentImport = `import("${agentPackage}/client");`;
+  const reactGrabImportMatch = originalContent.match(
+    /import\s*\(\s*["']react-grab["']\s*\);?/
+  );
+  if (reactGrabImportMatch) {
+    const matchedText = reactGrabImportMatch[0];
+    const hasSemicolon = matchedText.endsWith(";");
+    const newContent = originalContent.replace(
+      matchedText,
+      `${hasSemicolon ? matchedText.slice(0, -1) : matchedText};
+  ${agentImport}`
+    );
+    return {
+      success: true,
+      filePath,
+      message: `Add ${agent} agent`,
+      originalContent,
+      newContent
+    };
+  }
+  return {
+    success: false,
+    filePath,
+    message: "Could not find React Grab import to add agent after"
+  };
 };
-var findIndexHtml = (projectRoot) => {
-  const possiblePaths = [
-    join(projectRoot, "index.html"),
-    join(projectRoot, "public", "index.html")
-  ];
-  for (const filePath of possiblePaths) {
-    if (existsSync(filePath)) {
-      return filePath;
+var transformNextAppRouter = (projectRoot, agent, reactGrabAlreadyConfigured) => {
+  const layoutPath = findLayoutFile(projectRoot);
+  if (!layoutPath) {
+    return {
+      success: false,
+      filePath: "",
+      message: "Could not find app/layout.tsx or app/layout.jsx"
+    };
+  }
+  const originalContent = readFileSync(layoutPath, "utf-8");
+  let newContent = originalContent;
+  const hasReactGrabInFile2 = hasReactGrabCode(originalContent);
+  const hasReactGrabInInstrumentationFile = hasReactGrabInInstrumentation(projectRoot);
+  if (hasReactGrabInFile2 && reactGrabAlreadyConfigured) {
+    return addAgentToExistingNextApp(originalContent, agent, layoutPath);
+  }
+  if (hasReactGrabInFile2 || hasReactGrabInInstrumentationFile) {
+    return {
+      success: true,
+      filePath: layoutPath,
+      message: "React Grab is already installed" + (hasReactGrabInInstrumentationFile ? " in instrumentation-client" : " in this file"),
+      noChanges: true
+    };
+  }
+  if (!newContent.includes('import Script from "next/script"')) {
+    const importMatch = newContent.match(/^import .+ from ['"].+['"];?\s*$/m);
+    if (importMatch) {
+      newContent = newContent.replace(
+        importMatch[0],
+        `${importMatch[0]}
+${SCRIPT_IMPORT}`
+      );
+    } else {
+      newContent = `${SCRIPT_IMPORT}
+
+${newContent}`;
     }
   }
-  return null;
-};
-var findEntryFile = (projectRoot) => {
-  const possiblePaths = [
-    join(projectRoot, "src", "index.tsx"),
-    join(projectRoot, "src", "index.jsx"),
-    join(projectRoot, "src", "index.ts"),
-    join(projectRoot, "src", "index.js"),
-    join(projectRoot, "src", "main.tsx"),
-    join(projectRoot, "src", "main.jsx"),
-    join(projectRoot, "src", "main.ts"),
-    join(projectRoot, "src", "main.js")
-  ];
-  for (const filePath of possiblePaths) {
-    if (existsSync(filePath)) {
-      return filePath;
+  const scriptBlock = NEXT_APP_ROUTER_SCRIPT_WITH_AGENT(agent);
+  const headMatch = newContent.match(/<head[^>]*>/);
+  if (headMatch) {
+    newContent = newContent.replace(
+      headMatch[0],
+      `${headMatch[0]}
+        ${scriptBlock}`
+    );
+  } else {
+    const htmlMatch = newContent.match(/<html[^>]*>/);
+    if (htmlMatch) {
+      newContent = newContent.replace(
+        htmlMatch[0],
+        `${htmlMatch[0]}
+      <head>
+        ${scriptBlock}
+      </head>`
+      );
     }
   }
-  return null;
+  return {
+    success: true,
+    filePath: layoutPath,
+    message: "Add React Grab" + (agent !== "none" ? ` with ${agent} agent` : ""),
+    originalContent,
+    newContent
+  };
 };
-var addAgentToExistingNextApp = (originalContent, agent, filePath) => {
-  if (agent === "none") {
+var transformNextPagesRouter = (projectRoot, agent, reactGrabAlreadyConfigured) => {
+  const documentPath = findDocumentFile(projectRoot);
+  if (!documentPath) {
     return {
-      success: true,
-      filePath,
-      message: "React Grab is already configured",
-      noChanges: true
+      success: false,
+      filePath: "",
+      message: 'Could not find pages/_document.tsx or pages/_document.jsx.\n\nTo set up React Grab with Pages Router, create pages/_document.tsx with:\n\n  import { Html, Head, Main, NextScript } from "next/document";\n  import Script from "next/script";\n\n  export default function Document() {\n    return (\n      <Html>\n        <Head>\n          {process.env.NODE_ENV === "development" && (\n            <Script src="//unpkg.com/react-grab/dist/index.global.js" strategy="beforeInteractive" />\n          )}\n        </Head>\n        <body>\n          <Main />\n          <NextScript />\n        </body>\n      </Html>\n    );\n  }'
     };
   }
-  const agentPackage = `@react-grab/${agent}`;
-  if (originalContent.includes(agentPackage)) {
+  const originalContent = readFileSync(documentPath, "utf-8");
+  let newContent = originalContent;
+  const hasReactGrabInFile2 = hasReactGrabCode(originalContent);
+  const hasReactGrabInInstrumentationFile = hasReactGrabInInstrumentation(projectRoot);
+  if (hasReactGrabInFile2 && reactGrabAlreadyConfigured) {
+    return addAgentToExistingNextApp(originalContent, agent, documentPath);
+  }
+  if (hasReactGrabInFile2 || hasReactGrabInInstrumentationFile) {
     return {
       success: true,
-      filePath,
-      message: `Agent ${agent} is already configured`,
+      filePath: documentPath,
+      message: "React Grab is already installed" + (hasReactGrabInInstrumentationFile ? " in instrumentation-client" : " in this file"),
       noChanges: true
     };
   }
-  const agentScript = `{process.env.NODE_ENV === "development" && (
-          <Script
-            src="//unpkg.com/${agentPackage}/dist/client.global.js"
-            strategy="lazyOnload"
-          />
-        )}`;
-  const reactGrabBlockMatch = originalContent.match(
-    /\{process\.env\.NODE_ENV\s*===\s*["']development["']\s*&&\s*\(\s*<Script[^>]*react-grab[^>]*\/>\s*\)\}/is
-  );
-  if (reactGrabBlockMatch) {
-    const newContent = originalContent.replace(
-      reactGrabBlockMatch[0],
-      `${reactGrabBlockMatch[0]}
-        ${agentScript}`
+  if (!newContent.includes('import Script from "next/script"')) {
+    const importMatch = newContent.match(/^import .+ from ['"].+['"];?\s*$/m);
+    if (importMatch) {
+      newContent = newContent.replace(
+        importMatch[0],
+        `${importMatch[0]}
+${SCRIPT_IMPORT}`
+      );
+    }
+  }
+  const scriptBlock = NEXT_PAGES_ROUTER_SCRIPT_WITH_AGENT(agent);
+  const headMatch = newContent.match(/<Head[^>]*>/);
+  if (headMatch) {
+    newContent = newContent.replace(
+      headMatch[0],
+      `${headMatch[0]}
+        ${scriptBlock}`
     );
+  }
+  return {
+    success: true,
+    filePath: documentPath,
+    message: "Add React Grab" + (agent !== "none" ? ` with ${agent} agent` : ""),
+    originalContent,
+    newContent
+  };
+};
+var transformVite = (projectRoot, agent, reactGrabAlreadyConfigured) => {
+  const indexPath = findIndexHtml(projectRoot);
+  if (!indexPath) {
     return {
-      success: true,
-      filePath,
-      message: `Add ${agent} agent`,
-      originalContent,
-      newContent
+      success: false,
+      filePath: "",
+      message: "Could not find index.html"
     };
   }
-  const bareScriptMatch = originalContent.match(
-    /<Script[^>]*react-grab[^>]*\/>/i
-  );
-  if (bareScriptMatch) {
-    const newContent = originalContent.replace(
-      bareScriptMatch[0],
-      `${bareScriptMatch[0]}
-        <Script src="//unpkg.com/${agentPackage}/dist/client.global.js" strategy="lazyOnload" />`
-    );
+  const originalContent = readFileSync(indexPath, "utf-8");
+  let newContent = originalContent;
+  const hasReactGrabInFile2 = hasReactGrabCode(originalContent);
+  if (hasReactGrabInFile2 && reactGrabAlreadyConfigured) {
+    return addAgentToExistingVite(originalContent, agent, indexPath);
+  }
+  if (hasReactGrabInFile2) {
     return {
       success: true,
-      filePath,
-      message: `Add ${agent} agent`,
-      originalContent,
-      newContent
+      filePath: indexPath,
+      message: "React Grab is already installed in this file",
+      noChanges: true
     };
   }
+  const scriptBlock = VITE_SCRIPT_WITH_AGENT(agent);
+  const headMatch = newContent.match(/<head[^>]*>/i);
+  if (headMatch) {
+    newContent = newContent.replace(
+      headMatch[0],
+      `${headMatch[0]}
+    ${scriptBlock}`
+    );
+  }
   return {
-    success: false,
-    filePath,
-    message: "Could not find React Grab script to add agent after"
+    success: true,
+    filePath: indexPath,
+    message: "Add React Grab" + (agent !== "none" ? ` with ${agent} agent` : ""),
+    originalContent,
+    newContent
   };
 };
-var addAgentToExistingVite = (originalContent, agent, filePath) => {
-  if (agent === "none") {
+var transformWebpack = (projectRoot, agent, reactGrabAlreadyConfigured) => {
+  const entryPath = findEntryFile(projectRoot);
+  if (!entryPath) {
+    return {
+      success: false,
+      filePath: "",
+      message: "Could not find entry file (src/index.tsx, src/main.tsx, etc.)"
+    };
+  }
+  const originalContent = readFileSync(entryPath, "utf-8");
+  const hasReactGrabInFile2 = hasReactGrabCode(originalContent);
+  if (hasReactGrabInFile2 && reactGrabAlreadyConfigured) {
+    return addAgentToExistingWebpack(originalContent, agent, entryPath);
+  }
+  if (hasReactGrabInFile2) {
     return {
       success: true,
-      filePath,
-      message: "React Grab is already configured",
+      filePath: entryPath,
+      message: "React Grab is already installed in this file",
       noChanges: true
     };
   }
-  const agentPackage = `@react-grab/${agent}`;
-  if (originalContent.includes(agentPackage)) {
+  const importBlock = WEBPACK_IMPORT_WITH_AGENT(agent);
+  const newContent = `${importBlock}
+
+${originalContent}`;
+  return {
+    success: true,
+    filePath: entryPath,
+    message: "Add React Grab" + (agent !== "none" ? ` with ${agent} agent` : ""),
+    originalContent,
+    newContent
+  };
+};
+var previewTransform = (projectRoot, framework, nextRouterType, agent, reactGrabAlreadyConfigured = false) => {
+  switch (framework) {
+    case "next":
+      if (nextRouterType === "app") {
+        return transformNextAppRouter(
+          projectRoot,
+          agent,
+          reactGrabAlreadyConfigured
+        );
+      }
+      return transformNextPagesRouter(
+        projectRoot,
+        agent,
+        reactGrabAlreadyConfigured
+      );
+    case "vite":
+      return transformVite(projectRoot, agent, reactGrabAlreadyConfigured);
+    case "webpack":
+      return transformWebpack(projectRoot, agent, reactGrabAlreadyConfigured);
+    default:
+      return {
+        success: false,
+        filePath: "",
+        message: `Unknown framework: ${framework}. Please add React Grab manually.`
+      };
+  }
+};
+var canWriteToFile = (filePath) => {
+  try {
+    accessSync(filePath, constants.W_OK);
+    return true;
+  } catch {
+    return false;
+  }
+};
+var applyTransform = (result) => {
+  if (result.success && result.newContent && result.filePath) {
+    if (!canWriteToFile(result.filePath)) {
+      return {
+        success: false,
+        error: `Cannot write to ${result.filePath}. Check file permissions.`
+      };
+    }
+    try {
+      writeFileSync(result.filePath, result.newContent);
+      return { success: true };
+    } catch (error48) {
+      return {
+        success: false,
+        error: `Failed to write to ${result.filePath}: ${error48 instanceof Error ? error48.message : "Unknown error"}`
+      };
+    }
+  }
+  return { success: true };
+};
+var getPackageExecutor = (packageManager) => {
+  switch (packageManager) {
+    case "bun":
+      return "bunx";
+    case "pnpm":
+      return "pnpm dlx";
+    case "yarn":
+      return "npx";
+    case "npm":
+    default:
+      return "npx";
+  }
+};
+var AGENT_PACKAGES = {
+  "claude-code": "@react-grab/claude-code@latest",
+  cursor: "@react-grab/cursor@latest",
+  opencode: "@react-grab/opencode@latest",
+  codex: "@react-grab/codex@latest",
+  gemini: "@react-grab/gemini@latest",
+  amp: "@react-grab/amp@latest"
+};
+var getAgentPrefix = (agent, packageManager) => {
+  const agentPackage = AGENT_PACKAGES[agent];
+  if (!agentPackage) return null;
+  const executor = getPackageExecutor(packageManager);
+  return `${executor} ${agentPackage} &&`;
+};
+var getAllAgentPrefixVariants = (agent) => {
+  const agentPackage = AGENT_PACKAGES[agent];
+  if (!agentPackage) return [];
+  return [
+    `npx ${agentPackage} &&`,
+    `bunx ${agentPackage} &&`,
+    `pnpm dlx ${agentPackage} &&`,
+    `yarn dlx ${agentPackage} &&`
+  ];
+};
+var previewPackageJsonTransform = (projectRoot, agent, installedAgents, packageManager = "npm") => {
+  if (agent === "none" || agent === "visual-edit") {
     return {
       success: true,
-      filePath,
-      message: `Agent ${agent} is already configured`,
+      filePath: "",
+      message: agent === "visual-edit" ? "Visual Edit does not require package.json modification" : "No agent selected, skipping package.json modification",
       noChanges: true
     };
   }
-  const agentImport = `import("${agentPackage}/client");`;
-  const reactGrabImportMatch = originalContent.match(
-    /import\s*\(\s*["']react-grab["']\s*\);?/
-  );
-  if (reactGrabImportMatch) {
-    const matchedText = reactGrabImportMatch[0];
-    const hasSemicolon = matchedText.endsWith(";");
-    const newContent = originalContent.replace(
-      matchedText,
-      `${hasSemicolon ? matchedText.slice(0, -1) : matchedText};
-        ${agentImport}`
-    );
+  const packageJsonPath = join(projectRoot, "package.json");
+  if (!existsSync(packageJsonPath)) {
     return {
-      success: true,
-      filePath,
-      message: `Add ${agent} agent`,
-      originalContent,
-      newContent
+      success: false,
+      filePath: "",
+      message: "Could not find package.json"
     };
   }
-  return {
-    success: false,
-    filePath,
-    message: "Could not find React Grab import to add agent after"
-  };
-};
-var addAgentToExistingWebpack = (originalContent, agent, filePath) => {
-  if (agent === "none") {
+  const originalContent = readFileSync(packageJsonPath, "utf-8");
+  const agentPrefix = getAgentPrefix(agent, packageManager);
+  if (!agentPrefix) {
     return {
-      success: true,
-      filePath,
-      message: "React Grab is already configured",
-      noChanges: true
+      success: false,
+      filePath: packageJsonPath,
+      message: `Unknown agent: ${agent}`
     };
   }
-  const agentPackage = `@react-grab/${agent}`;
-  if (originalContent.includes(agentPackage)) {
+  const allPrefixVariants = getAllAgentPrefixVariants(agent);
+  const hasExistingPrefix = allPrefixVariants.some(
+    (prefix) => originalContent.includes(prefix)
+  );
+  if (hasExistingPrefix) {
     return {
       success: true,
-      filePath,
-      message: `Agent ${agent} is already configured`,
+      filePath: packageJsonPath,
+      message: `Agent ${agent} dev script is already configured`,
       noChanges: true
     };
   }
-  const agentImport = `import("${agentPackage}/client");`;
-  const reactGrabImportMatch = originalContent.match(
-    /import\s*\(\s*["']react-grab["']\s*\);?/
-  );
-  if (reactGrabImportMatch) {
-    const matchedText = reactGrabImportMatch[0];
-    const hasSemicolon = matchedText.endsWith(";");
-    const newContent = originalContent.replace(
-      matchedText,
-      `${hasSemicolon ? matchedText.slice(0, -1) : matchedText};
-  ${agentImport}`
-    );
+  try {
+    const packageJson = JSON.parse(originalContent);
+    let targetScriptKey = "dev";
+    if (!packageJson.scripts?.dev) {
+      const devScriptKeys = Object.keys(packageJson.scripts || {}).filter(
+        (key) => key.startsWith("dev")
+      );
+      if (devScriptKeys.length > 0) {
+        targetScriptKey = devScriptKeys[0];
+      } else {
+        return {
+          success: true,
+          filePath: packageJsonPath,
+          message: "No dev script found in package.json",
+          noChanges: true,
+          warning: `Could not inject agent into package.json (no dev script found).
+Run this command manually before starting your dev server:
+  ${agentPrefix} <your dev command>`
+        };
+      }
+    }
+    const currentDevScript = packageJson.scripts[targetScriptKey];
+    for (const installedAgent of installedAgents) {
+      const installedPrefixVariants = getAllAgentPrefixVariants(installedAgent);
+      const hasInstalledAgentPrefix = installedPrefixVariants.some(
+        (prefix) => currentDevScript.includes(prefix)
+      );
+      if (hasInstalledAgentPrefix) {
+        return {
+          success: true,
+          filePath: packageJsonPath,
+          message: `Agent ${installedAgent} is already in ${targetScriptKey} script`,
+          noChanges: true
+        };
+      }
+    }
+    packageJson.scripts[targetScriptKey] = `${agentPrefix} ${currentDevScript}`;
+    const newContent = JSON.stringify(packageJson, null, 2) + "\n";
     return {
       success: true,
-      filePath,
-      message: `Add ${agent} agent`,
+      filePath: packageJsonPath,
+      message: `Add ${agent} server to ${targetScriptKey} script`,
       originalContent,
       newContent
     };
-  }
-  return {
-    success: false,
-    filePath,
-    message: "Could not find React Grab import to add agent after"
-  };
-};
-var transformNextAppRouter = (projectRoot, agent, reactGrabAlreadyConfigured) => {
-  const layoutPath = findLayoutFile(projectRoot);
-  if (!layoutPath) {
+  } catch {
     return {
       success: false,
-      filePath: "",
-      message: "Could not find app/layout.tsx or app/layout.jsx"
+      filePath: packageJsonPath,
+      message: "Failed to parse package.json"
     };
   }
-  const originalContent = readFileSync(layoutPath, "utf-8");
-  let newContent = originalContent;
-  const hasReactGrabInFile2 = hasReactGrabCode(originalContent);
-  const hasReactGrabInInstrumentationFile = hasReactGrabInInstrumentation(projectRoot);
-  if (hasReactGrabInFile2 && reactGrabAlreadyConfigured) {
-    return addAgentToExistingNextApp(originalContent, agent, layoutPath);
+};
+var applyPackageJsonTransform = (result) => {
+  if (result.success && result.newContent && result.filePath) {
+    if (!canWriteToFile(result.filePath)) {
+      return {
+        success: false,
+        error: `Cannot write to ${result.filePath}. Check file permissions.`
+      };
+    }
+    try {
+      writeFileSync(result.filePath, result.newContent);
+      return { success: true };
+    } catch (error48) {
+      return {
+        success: false,
+        error: `Failed to write to ${result.filePath}: ${error48 instanceof Error ? error48.message : "Unknown error"}`
+      };
+    }
   }
-  if (hasReactGrabInFile2 || hasReactGrabInInstrumentationFile) {
+  return { success: true };
+};
+var formatOptionsForNextjs = (options2) => {
+  const parts = [];
+  if (options2.activationKey) {
+    parts.push(`activationKey: ${JSON.stringify(options2.activationKey)}`);
+  }
+  if (options2.activationMode) {
+    parts.push(`activationMode: "${options2.activationMode}"`);
+  }
+  if (options2.keyHoldDuration !== void 0) {
+    parts.push(`keyHoldDuration: ${options2.keyHoldDuration}`);
+  }
+  if (options2.allowActivationInsideInput !== void 0) {
+    parts.push(
+      `allowActivationInsideInput: ${options2.allowActivationInsideInput}`
+    );
+  }
+  if (options2.maxContextLines !== void 0) {
+    parts.push(`maxContextLines: ${options2.maxContextLines}`);
+  }
+  return `{ ${parts.join(", ")} }`;
+};
+var formatOptionsAsJson = (options2) => {
+  const cleanOptions = {};
+  if (options2.activationKey) {
+    cleanOptions.activationKey = options2.activationKey;
+  }
+  if (options2.activationMode) {
+    cleanOptions.activationMode = options2.activationMode;
+  }
+  if (options2.keyHoldDuration !== void 0) {
+    cleanOptions.keyHoldDuration = options2.keyHoldDuration;
+  }
+  if (options2.allowActivationInsideInput !== void 0) {
+    cleanOptions.allowActivationInsideInput = options2.allowActivationInsideInput;
+  }
+  if (options2.maxContextLines !== void 0) {
+    cleanOptions.maxContextLines = options2.maxContextLines;
+  }
+  return JSON.stringify(cleanOptions);
+};
+var findReactGrabFile = (projectRoot, framework, nextRouterType) => {
+  switch (framework) {
+    case "next":
+      if (nextRouterType === "app") {
+        return findLayoutFile(projectRoot);
+      }
+      return findDocumentFile(projectRoot);
+    case "vite":
+      return findIndexHtml(projectRoot);
+    case "webpack":
+      return findEntryFile(projectRoot);
+    default:
+      return null;
+  }
+};
+var addOptionsToNextScript = (originalContent, options2, filePath) => {
+  const reactGrabScriptMatch = originalContent.match(
+    /(<Script[^>]*react-grab[^>]*)(\/?>)/is
+  );
+  if (!reactGrabScriptMatch) {
     return {
-      success: true,
-      filePath: layoutPath,
-      message: "React Grab is already installed" + (hasReactGrabInInstrumentationFile ? " in instrumentation-client" : " in this file"),
-      noChanges: true
+      success: false,
+      filePath,
+      message: "Could not find React Grab Script tag"
     };
   }
-  if (!newContent.includes('import Script from "next/script"')) {
-    const importMatch = newContent.match(/^import .+ from ['"].+['"];?\s*$/m);
-    if (importMatch) {
-      newContent = newContent.replace(
-        importMatch[0],
-        `${importMatch[0]}
-${SCRIPT_IMPORT}`
-      );
-    } else {
-      newContent = `${SCRIPT_IMPORT}
-
-${newContent}`;
-    }
-  }
-  const scriptBlock = NEXT_APP_ROUTER_SCRIPT_WITH_AGENT(agent);
-  const headMatch = newContent.match(/<head[^>]*>/);
-  if (headMatch) {
-    newContent = newContent.replace(
-      headMatch[0],
-      `${headMatch[0]}
-        ${scriptBlock}`
+  const scriptTag = reactGrabScriptMatch[0];
+  const scriptOpening = reactGrabScriptMatch[1];
+  const scriptClosing = reactGrabScriptMatch[2];
+  const existingDataOptionsMatch = scriptTag.match(
+    /data-options=\{JSON\.stringify\([^)]+\)\}/
+  );
+  const dataOptionsAttr = `data-options={JSON.stringify(
+              ${formatOptionsForNextjs(options2)}
+            )}`;
+  let newScriptTag;
+  if (existingDataOptionsMatch) {
+    newScriptTag = scriptTag.replace(
+      existingDataOptionsMatch[0],
+      dataOptionsAttr
     );
   } else {
-    const htmlMatch = newContent.match(/<html[^>]*>/);
-    if (htmlMatch) {
-      newContent = newContent.replace(
-        htmlMatch[0],
-        `${htmlMatch[0]}
-      <head>
-        ${scriptBlock}
-      </head>`
-      );
-    }
+    newScriptTag = `${scriptOpening}
+            ${dataOptionsAttr}
+          ${scriptClosing}`;
   }
+  const newContent = originalContent.replace(scriptTag, newScriptTag);
   return {
     success: true,
-    filePath: layoutPath,
-    message: "Add React Grab" + (agent !== "none" ? ` with ${agent} agent` : ""),
+    filePath,
+    message: "Update React Grab options",
     originalContent,
     newContent
   };
 };
-var transformNextPagesRouter = (projectRoot, agent, reactGrabAlreadyConfigured) => {
-  const documentPath = findDocumentFile(projectRoot);
-  if (!documentPath) {
+var addOptionsToViteScript = (originalContent, options2, filePath) => {
+  const reactGrabImportMatch = originalContent.match(
+    /import\s*\(\s*["']react-grab["']\s*\)/
+  );
+  if (!reactGrabImportMatch) {
     return {
       success: false,
-      filePath: "",
-      message: 'Could not find pages/_document.tsx or pages/_document.jsx.\n\nTo set up React Grab with Pages Router, create pages/_document.tsx with:\n\n  import { Html, Head, Main, NextScript } from "next/document";\n  import Script from "next/script";\n\n  export default function Document() {\n    return (\n      <Html>\n        <Head>\n          {process.env.NODE_ENV === "development" && (\n            <Script src="//unpkg.com/react-grab/dist/index.global.js" strategy="beforeInteractive" />\n          )}\n        </Head>\n        <body>\n          <Main />\n          <NextScript />\n        </body>\n      </Html>\n    );\n  }'
-    };
-  }
-  const originalContent = readFileSync(documentPath, "utf-8");
-  let newContent = originalContent;
-  const hasReactGrabInFile2 = hasReactGrabCode(originalContent);
-  const hasReactGrabInInstrumentationFile = hasReactGrabInInstrumentation(projectRoot);
-  if (hasReactGrabInFile2 && reactGrabAlreadyConfigured) {
-    return addAgentToExistingNextApp(originalContent, agent, documentPath);
-  }
-  if (hasReactGrabInFile2 || hasReactGrabInInstrumentationFile) {
-    return {
-      success: true,
-      filePath: documentPath,
-      message: "React Grab is already installed" + (hasReactGrabInInstrumentationFile ? " in instrumentation-client" : " in this file"),
-      noChanges: true
+      filePath,
+      message: "Could not find React Grab import"
     };
   }
-  if (!newContent.includes('import Script from "next/script"')) {
-    const importMatch = newContent.match(/^import .+ from ['"].+['"];?\s*$/m);
-    if (importMatch) {
-      newContent = newContent.replace(
-        importMatch[0],
-        `${importMatch[0]}
-${SCRIPT_IMPORT}`
-      );
-    }
-  }
-  const scriptBlock = NEXT_PAGES_ROUTER_SCRIPT_WITH_AGENT(agent);
-  const headMatch = newContent.match(/<Head[^>]*>/);
-  if (headMatch) {
-    newContent = newContent.replace(
-      headMatch[0],
-      `${headMatch[0]}
-        ${scriptBlock}`
-    );
-  }
+  const optionsJson = formatOptionsAsJson(options2);
+  const newImport = `import("react-grab").then((m) => m.init(${optionsJson}))`;
+  const newContent = originalContent.replace(
+    reactGrabImportMatch[0],
+    newImport
+  );
   return {
     success: true,
-    filePath: documentPath,
-    message: "Add React Grab" + (agent !== "none" ? ` with ${agent} agent` : ""),
+    filePath,
+    message: "Update React Grab options",
     originalContent,
     newContent
   };
 };
-var transformVite = (projectRoot, agent, reactGrabAlreadyConfigured) => {
-  const indexPath = findIndexHtml(projectRoot);
-  if (!indexPath) {
+var addOptionsToWebpackImport = (originalContent, options2, filePath) => {
+  const reactGrabImportMatch = originalContent.match(
+    /import\s*\(\s*["']react-grab["']\s*\)/
+  );
+  if (!reactGrabImportMatch) {
     return {
       success: false,
-      filePath: "",
-      message: "Could not find index.html"
-    };
-  }
-  const originalContent = readFileSync(indexPath, "utf-8");
-  let newContent = originalContent;
-  const hasReactGrabInFile2 = hasReactGrabCode(originalContent);
-  if (hasReactGrabInFile2 && reactGrabAlreadyConfigured) {
-    return addAgentToExistingVite(originalContent, agent, indexPath);
-  }
-  if (hasReactGrabInFile2) {
-    return {
-      success: true,
-      filePath: indexPath,
-      message: "React Grab is already installed in this file",
-      noChanges: true
+      filePath,
+      message: "Could not find React Grab import"
     };
   }
-  const scriptBlock = VITE_SCRIPT_WITH_AGENT(agent);
-  const headMatch = newContent.match(/<head[^>]*>/i);
-  if (headMatch) {
-    newContent = newContent.replace(
-      headMatch[0],
-      `${headMatch[0]}
-    ${scriptBlock}`
-    );
-  }
+  const optionsJson = formatOptionsAsJson(options2);
+  const newImport = `import("react-grab").then((m) => m.init(${optionsJson}))`;
+  const newContent = originalContent.replace(
+    reactGrabImportMatch[0],
+    newImport
+  );
   return {
     success: true,
-    filePath: indexPath,
-    message: "Add React Grab" + (agent !== "none" ? ` with ${agent} agent` : ""),
+    filePath,
+    message: "Update React Grab options",
     originalContent,
     newContent
   };
 };
-var transformWebpack = (projectRoot, agent, reactGrabAlreadyConfigured) => {
-  const entryPath = findEntryFile(projectRoot);
-  if (!entryPath) {
+var previewOptionsTransform = (projectRoot, framework, nextRouterType, options2) => {
+  const filePath = findReactGrabFile(projectRoot, framework, nextRouterType);
+  if (!filePath) {
     return {
       success: false,
       filePath: "",
-      message: "Could not find entry file (src/index.tsx, src/main.tsx, etc.)"
+      message: "Could not find file containing React Grab configuration"
     };
   }
-  const originalContent = readFileSync(entryPath, "utf-8");
-  const hasReactGrabInFile2 = hasReactGrabCode(originalContent);
-  if (hasReactGrabInFile2 && reactGrabAlreadyConfigured) {
-    return addAgentToExistingWebpack(originalContent, agent, entryPath);
-  }
-  if (hasReactGrabInFile2) {
+  const originalContent = readFileSync(filePath, "utf-8");
+  if (!hasReactGrabCode(originalContent)) {
     return {
-      success: true,
-      filePath: entryPath,
-      message: "React Grab is already installed in this file",
-      noChanges: true
+      success: false,
+      filePath,
+      message: "Could not find React Grab code in the file"
     };
   }
-  const importBlock = WEBPACK_IMPORT_WITH_AGENT(agent);
-  const newContent = `${importBlock}
-
-${originalContent}`;
-  return {
-    success: true,
-    filePath: entryPath,
-    message: "Add React Grab" + (agent !== "none" ? ` with ${agent} agent` : ""),
-    originalContent,
-    newContent
-  };
-};
-var previewTransform = (projectRoot, framework, nextRouterType, agent, reactGrabAlreadyConfigured = false) => {
   switch (framework) {
     case "next":
-      if (nextRouterType === "app") {
-        return transformNextAppRouter(
-          projectRoot,
-          agent,
-          reactGrabAlreadyConfigured
-        );
-      }
-      return transformNextPagesRouter(
-        projectRoot,
-        agent,
-        reactGrabAlreadyConfigured
-      );
+      return addOptionsToNextScript(originalContent, options2, filePath);
     case "vite":
-      return transformVite(projectRoot, agent, reactGrabAlreadyConfigured);
+      return addOptionsToViteScript(originalContent, options2, filePath);
     case "webpack":
-      return transformWebpack(projectRoot, agent, reactGrabAlreadyConfigured);
+      return addOptionsToWebpackImport(originalContent, options2, filePath);
     default:
       return {
         success: false,
-        filePath: "",
-        message: `Unknown framework: ${framework}. Please add React Grab manually.`
+        filePath,
+        message: `Unknown framework: ${framework}`
       };
   }
 };
-var canWriteToFile = (filePath) => {
-  try {
-    accessSync(filePath, constants.W_OK);
-    return true;
-  } catch {
-    return false;
+var applyOptionsTransform = (result) => {
+  return applyTransform(result);
+};
+var removeAgentFromNextApp = (originalContent, agent, filePath) => {
+  const agentPackage = `@react-grab/${agent}`;
+  if (!originalContent.includes(agentPackage)) {
+    return {
+      success: true,
+      filePath,
+      message: `Agent ${agent} is not configured in this file`,
+      noChanges: true
+    };
+  }
+  const agentScriptPattern = new RegExp(
+    `\\s*\\{process\\.env\\.NODE_ENV === "development" && \\(\\s*<Script[^>]*${agentPackage.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}[^>]*\\/>\\s*\\)\\}`,
+    "gs"
+  );
+  const simpleScriptPattern = new RegExp(
+    `\\s*<Script[^>]*${agentPackage.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}[^>]*\\/>`,
+    "gi"
+  );
+  let newContent = originalContent.replace(agentScriptPattern, "");
+  if (newContent === originalContent) {
+    newContent = originalContent.replace(simpleScriptPattern, "");
+  }
+  if (newContent === originalContent) {
+    return {
+      success: false,
+      filePath,
+      message: `Could not find agent ${agent} script to remove`
+    };
   }
+  return {
+    success: true,
+    filePath,
+    message: `Remove ${agent} agent`,
+    originalContent,
+    newContent
+  };
 };
-var applyTransform = (result) => {
-  if (result.success && result.newContent && result.filePath) {
-    if (!canWriteToFile(result.filePath)) {
-      return {
-        success: false,
-        error: `Cannot write to ${result.filePath}. Check file permissions.`
-      };
-    }
-    try {
-      writeFileSync(result.filePath, result.newContent);
-      return { success: true };
-    } catch (error48) {
-      return {
-        success: false,
-        error: `Failed to write to ${result.filePath}: ${error48 instanceof Error ? error48.message : "Unknown error"}`
-      };
-    }
+var removeAgentFromVite = (originalContent, agent, filePath) => {
+  const agentPackage = `@react-grab/${agent}`;
+  if (!originalContent.includes(agentPackage)) {
+    return {
+      success: true,
+      filePath,
+      message: `Agent ${agent} is not configured in this file`,
+      noChanges: true
+    };
+  }
+  const agentImportPattern = new RegExp(
+    `\\s*import\\s*\\(\\s*["']${agentPackage.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}/client["']\\s*\\);?`,
+    "g"
+  );
+  const newContent = originalContent.replace(agentImportPattern, "");
+  if (newContent === originalContent) {
+    return {
+      success: false,
+      filePath,
+      message: `Could not find agent ${agent} import to remove`
+    };
   }
-  return { success: true };
+  return {
+    success: true,
+    filePath,
+    message: `Remove ${agent} agent`,
+    originalContent,
+    newContent
+  };
 };
-var getPackageExecutor = (packageManager) => {
-  switch (packageManager) {
-    case "bun":
-      return "bunx";
-    case "pnpm":
-      return "pnpm dlx";
-    case "yarn":
-      return "npx";
-    case "npm":
-    default:
-      return "npx";
+var removeAgentFromWebpack = (originalContent, agent, filePath) => {
+  const agentPackage = `@react-grab/${agent}`;
+  if (!originalContent.includes(agentPackage)) {
+    return {
+      success: true,
+      filePath,
+      message: `Agent ${agent} is not configured in this file`,
+      noChanges: true
+    };
   }
+  const agentImportPattern = new RegExp(
+    `\\s*import\\s*\\(\\s*["']${agentPackage.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}/client["']\\s*\\);?`,
+    "g"
+  );
+  const newContent = originalContent.replace(agentImportPattern, "");
+  if (newContent === originalContent) {
+    return {
+      success: false,
+      filePath,
+      message: `Could not find agent ${agent} import to remove`
+    };
+  }
+  return {
+    success: true,
+    filePath,
+    message: `Remove ${agent} agent`,
+    originalContent,
+    newContent
+  };
 };
-var AGENT_PACKAGES2 = {
-  "claude-code": "@react-grab/claude-code@latest",
-  cursor: "@react-grab/cursor@latest",
-  opencode: "@react-grab/opencode@latest",
-  codex: "@react-grab/codex@latest",
-  gemini: "@react-grab/gemini@latest",
-  amp: "@react-grab/amp@latest"
-};
-var getAgentPrefix = (agent, packageManager) => {
-  const agentPackage = AGENT_PACKAGES2[agent];
-  if (!agentPackage) return null;
-  const executor = getPackageExecutor(packageManager);
-  return `${executor} ${agentPackage} &&`;
-};
-var getAllAgentPrefixVariants = (agent) => {
-  const agentPackage = AGENT_PACKAGES2[agent];
-  if (!agentPackage) return [];
-  return [
-    `npx ${agentPackage} &&`,
-    `bunx ${agentPackage} &&`,
-    `pnpm dlx ${agentPackage} &&`,
-    `yarn dlx ${agentPackage} &&`
-  ];
-};
-var previewPackageJsonTransform = (projectRoot, agent, installedAgents, packageManager = "npm") => {
-  if (agent === "none" || agent === "visual-edit") {
+var previewAgentRemoval = (projectRoot, framework, nextRouterType, agent) => {
+  const filePath = findReactGrabFile(projectRoot, framework, nextRouterType);
+  if (!filePath) {
     return {
       success: true,
       filePath: "",
-      message: agent === "visual-edit" ? "Visual Edit does not require package.json modification" : "No agent selected, skipping package.json modification",
+      message: "Could not find file containing React Grab configuration",
       noChanges: true
     };
   }
+  const originalContent = readFileSync(filePath, "utf-8");
+  switch (framework) {
+    case "next":
+      return removeAgentFromNextApp(originalContent, agent, filePath);
+    case "vite":
+      return removeAgentFromVite(originalContent, agent, filePath);
+    case "webpack":
+      return removeAgentFromWebpack(originalContent, agent, filePath);
+    default:
+      return {
+        success: false,
+        filePath,
+        message: `Unknown framework: ${framework}`
+      };
+  }
+};
+var previewPackageJsonAgentRemoval = (projectRoot, agent) => {
   const packageJsonPath = join(projectRoot, "package.json");
   if (!existsSync(packageJsonPath)) {
     return {
-      success: false,
+      success: true,
       filePath: "",
-      message: "Could not find package.json"
+      message: "Could not find package.json",
+      noChanges: true
     };
   }
   const originalContent = readFileSync(packageJsonPath, "utf-8");
-  const agentPrefix = getAgentPrefix(agent, packageManager);
-  if (!agentPrefix) {
+  const allPrefixVariants = getAllAgentPrefixVariants(agent);
+  if (allPrefixVariants.length === 0) {
     return {
-      success: false,
+      success: true,
       filePath: packageJsonPath,
-      message: `Unknown agent: ${agent}`
+      message: `Unknown agent: ${agent}`,
+      noChanges: true
     };
   }
-  const allPrefixVariants = getAllAgentPrefixVariants(agent);
-  const hasExistingPrefix = allPrefixVariants.some(
+  const hasAnyPrefix = allPrefixVariants.some(
     (prefix) => originalContent.includes(prefix)
   );
-  if (hasExistingPrefix) {
+  if (!hasAnyPrefix) {
     return {
       success: true,
       filePath: packageJsonPath,
-      message: `Agent ${agent} dev script is already configured`,
+      message: `Agent ${agent} dev script is not configured`,
       noChanges: true
     };
   }
   try {
     const packageJson = JSON.parse(originalContent);
-    let targetScriptKey = "dev";
-    if (!packageJson.scripts?.dev) {
-      const devScriptKeys = Object.keys(packageJson.scripts || {}).filter(
-        (key) => key.startsWith("dev")
-      );
-      if (devScriptKeys.length > 0) {
-        targetScriptKey = devScriptKeys[0];
-      } else {
-        return {
-          success: true,
-          filePath: packageJsonPath,
-          message: "No dev script found in package.json",
-          noChanges: true,
-          warning: `Could not inject agent into package.json (no dev script found).
-Run this command manually before starting your dev server:
-  ${agentPrefix} <your dev command>`
-        };
-      }
-    }
-    const currentDevScript = packageJson.scripts[targetScriptKey];
-    for (const installedAgent of installedAgents) {
-      const installedPrefixVariants = getAllAgentPrefixVariants(installedAgent);
-      const hasInstalledAgentPrefix = installedPrefixVariants.some(
-        (prefix) => currentDevScript.includes(prefix)
-      );
-      if (hasInstalledAgentPrefix) {
-        return {
-          success: true,
-          filePath: packageJsonPath,
-          message: `Agent ${installedAgent} is already in ${targetScriptKey} script`,
-          noChanges: true
-        };
+    for (const scriptKey of Object.keys(packageJson.scripts || {})) {
+      let scriptValue = packageJson.scripts[scriptKey];
+      if (typeof scriptValue === "string") {
+        for (const prefix of allPrefixVariants) {
+          if (scriptValue.includes(prefix)) {
+            scriptValue = scriptValue.replace(prefix + " ", "").replace(prefix, "");
+          }
+        }
+        packageJson.scripts[scriptKey] = scriptValue;
       }
     }
-    packageJson.scripts[targetScriptKey] = `${agentPrefix} ${currentDevScript}`;
     const newContent = JSON.stringify(packageJson, null, 2) + "\n";
     return {
       success: true,
       filePath: packageJsonPath,
-      message: `Add ${agent} server to ${targetScriptKey} script`,
+      message: `Remove ${agent} server from dev script`,
       originalContent,
       newContent
     };
@@ -2312,393 +2184,596 @@ Run this command manually before starting your dev server:
     };
   }
 };
-var applyPackageJsonTransform = (result) => {
-  if (result.success && result.newContent && result.filePath) {
-    if (!canWriteToFile(result.filePath)) {
-      return {
-        success: false,
-        error: `Cannot write to ${result.filePath}. Check file permissions.`
-      };
-    }
-    try {
-      writeFileSync(result.filePath, result.newContent);
-      return { success: true };
-    } catch (error48) {
-      return {
-        success: false,
-        error: `Failed to write to ${result.filePath}: ${error48 instanceof Error ? error48.message : "Unknown error"}`
-      };
-    }
+var highlighter = {
+  error: pc.red,
+  warn: pc.yellow,
+  info: pc.cyan,
+  success: pc.green,
+  dim: pc.dim
+};
+
+// src/utils/logger.ts
+var logger = {
+  error(...args) {
+    console.log(highlighter.error(args.join(" ")));
+  },
+  warn(...args) {
+    console.log(highlighter.warn(args.join(" ")));
+  },
+  info(...args) {
+    console.log(highlighter.info(args.join(" ")));
+  },
+  success(...args) {
+    console.log(highlighter.success(args.join(" ")));
+  },
+  dim(...args) {
+    console.log(highlighter.dim(args.join(" ")));
+  },
+  log(...args) {
+    console.log(args.join(" "));
+  },
+  break() {
+    console.log("");
+  }
+};
+
+// src/utils/handle-error.ts
+var handleError = (error48) => {
+  logger.break();
+  logger.error(
+    "Something went wrong. Please check the error below for more details."
+  );
+  logger.error("If the problem persists, please open an issue on GitHub.");
+  logger.error("");
+  if (error48 instanceof Error) {
+    logger.error(error48.message);
+  }
+  logger.break();
+  process.exit(1);
+};
+var INSTALL_COMMANDS = {
+  npm: "npm install",
+  yarn: "yarn add",
+  pnpm: "pnpm add",
+  bun: "bun add"
+};
+var UNINSTALL_COMMANDS = {
+  npm: "npm uninstall",
+  yarn: "yarn remove",
+  pnpm: "pnpm remove",
+  bun: "bun remove"
+};
+var installPackages = (packages, packageManager, projectRoot, isDev = true) => {
+  if (packages.length === 0) {
+    return;
+  }
+  const command = INSTALL_COMMANDS[packageManager];
+  const devFlag = isDev ? " -D" : "";
+  const fullCommand = `${command}${devFlag} ${packages.join(" ")}`;
+  console.log(`Running: ${fullCommand}
+`);
+  execSync(fullCommand, {
+    cwd: projectRoot,
+    stdio: "inherit"
+  });
+};
+var getPackagesToInstall = (agent, includeReactGrab = true) => {
+  const packages = [];
+  if (includeReactGrab) {
+    packages.push("react-grab");
   }
-  return { success: true };
+  if (agent !== "none") {
+    packages.push(`@react-grab/${agent}`);
+  }
+  return packages;
 };
-var formatOptionsForNextjs = (options2) => {
-  const parts = [];
-  if (options2.activationKey) {
-    parts.push(`activationKey: ${JSON.stringify(options2.activationKey)}`);
+var uninstallPackages = (packages, packageManager, projectRoot) => {
+  if (packages.length === 0) {
+    return;
   }
-  if (options2.activationMode) {
-    parts.push(`activationMode: "${options2.activationMode}"`);
+  const command = UNINSTALL_COMMANDS[packageManager];
+  const fullCommand = `${command} ${packages.join(" ")}`;
+  console.log(`Running: ${fullCommand}
+`);
+  execSync(fullCommand, {
+    cwd: projectRoot,
+    stdio: "inherit"
+  });
+};
+var getPackagesToUninstall = (agent) => {
+  return [`@react-grab/${agent}`];
+};
+var spinner = (text, options2) => ora({ text, isSilent: options2?.silent });
+var detectSkillAgents = (cwd) => {
+  return SKILL_AGENTS.filter((agent) => existsSync(join(cwd, agent.folder)));
+};
+var findSkillAgent = (id) => {
+  return SKILL_AGENTS.find((agent) => agent.id === id);
+};
+var formatInstalledAgentNames = (agents) => agents.map((agent) => AGENT_NAMES[agent] ?? agent).join(", ");
+var applyTransformWithFeedback = (result, message) => {
+  const writeSpinner = spinner(message ?? `Applying changes to ${result.filePath}.`).start();
+  const writeResult = applyTransform(result);
+  if (!writeResult.success) {
+    writeSpinner.fail();
+    logger.break();
+    logger.error(writeResult.error || "Failed to write file.");
+    logger.break();
+    process.exit(1);
   }
-  if (options2.keyHoldDuration !== void 0) {
-    parts.push(`keyHoldDuration: ${options2.keyHoldDuration}`);
+  writeSpinner.succeed();
+};
+var applyPackageJsonWithFeedback = (result, message) => {
+  const writeSpinner = spinner(message ?? `Applying changes to ${result.filePath}.`).start();
+  const writeResult = applyPackageJsonTransform(result);
+  if (!writeResult.success) {
+    writeSpinner.fail();
+    logger.break();
+    logger.error(writeResult.error || "Failed to write file.");
+    logger.break();
+    process.exit(1);
   }
-  if (options2.allowActivationInsideInput !== void 0) {
-    parts.push(
-      `allowActivationInsideInput: ${options2.allowActivationInsideInput}`
-    );
+  writeSpinner.succeed();
+};
+var installPackagesWithFeedback = (packages, packageManager, projectRoot) => {
+  if (packages.length === 0) return;
+  const installSpinner = spinner(`Installing ${packages.join(", ")}.`).start();
+  try {
+    installPackages(packages, packageManager, projectRoot);
+    installSpinner.succeed();
+  } catch (error48) {
+    installSpinner.fail();
+    handleError(error48);
   }
-  if (options2.maxContextLines !== void 0) {
-    parts.push(`maxContextLines: ${options2.maxContextLines}`);
+};
+var uninstallPackagesWithFeedback = (packages, packageManager, projectRoot) => {
+  if (packages.length === 0) return;
+  const uninstallSpinner = spinner(`Removing ${packages.join(", ")}.`).start();
+  try {
+    uninstallPackages(packages, packageManager, projectRoot);
+    uninstallSpinner.succeed();
+  } catch (error48) {
+    uninstallSpinner.fail();
+    handleError(error48);
   }
-  return `{ ${parts.join(", ")} }`;
 };
-var formatOptionsAsJson = (options2) => {
-  const cleanOptions = {};
-  if (options2.activationKey) {
-    cleanOptions.activationKey = options2.activationKey;
+var detectPackageManager = async (projectRoot) => {
+  const detected = await detect({ cwd: projectRoot });
+  if (detected && ["npm", "yarn", "pnpm", "bun"].includes(detected)) {
+    return detected;
   }
-  if (options2.activationMode) {
-    cleanOptions.activationMode = options2.activationMode;
+  return "npm";
+};
+var detectFramework = (projectRoot) => {
+  const packageJsonPath = join(projectRoot, "package.json");
+  if (!existsSync(packageJsonPath)) {
+    return "unknown";
   }
-  if (options2.keyHoldDuration !== void 0) {
-    cleanOptions.keyHoldDuration = options2.keyHoldDuration;
+  try {
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+    const allDependencies = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies
+    };
+    if (allDependencies["next"]) {
+      return "next";
+    }
+    if (allDependencies["vite"]) {
+      return "vite";
+    }
+    if (allDependencies["webpack"]) {
+      return "webpack";
+    }
+    return "unknown";
+  } catch {
+    return "unknown";
   }
-  if (options2.allowActivationInsideInput !== void 0) {
-    cleanOptions.allowActivationInsideInput = options2.allowActivationInsideInput;
+};
+var detectNextRouterType = (projectRoot) => {
+  const hasAppDir = existsSync(join(projectRoot, "app"));
+  const hasSrcAppDir = existsSync(join(projectRoot, "src", "app"));
+  const hasPagesDir = existsSync(join(projectRoot, "pages"));
+  const hasSrcPagesDir = existsSync(join(projectRoot, "src", "pages"));
+  if (hasAppDir || hasSrcAppDir) {
+    return "app";
   }
-  if (options2.maxContextLines !== void 0) {
-    cleanOptions.maxContextLines = options2.maxContextLines;
+  if (hasPagesDir || hasSrcPagesDir) {
+    return "pages";
   }
-  return JSON.stringify(cleanOptions);
+  return "unknown";
 };
-var findReactGrabFile = (projectRoot, framework, nextRouterType) => {
-  switch (framework) {
-    case "next":
-      if (nextRouterType === "app") {
-        return findLayoutFile(projectRoot);
+var detectMonorepo = (projectRoot) => {
+  if (existsSync(join(projectRoot, "pnpm-workspace.yaml"))) {
+    return true;
+  }
+  if (existsSync(join(projectRoot, "lerna.json"))) {
+    return true;
+  }
+  const packageJsonPath = join(projectRoot, "package.json");
+  if (existsSync(packageJsonPath)) {
+    try {
+      const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+      if (packageJson.workspaces) {
+        return true;
       }
-      return findDocumentFile(projectRoot);
-    case "vite":
-      return findIndexHtml(projectRoot);
-    case "webpack":
-      return findEntryFile(projectRoot);
-    default:
-      return null;
+    } catch {
+      return false;
+    }
   }
+  return false;
 };
-var addOptionsToNextScript = (originalContent, options2, filePath) => {
-  const reactGrabScriptMatch = originalContent.match(
-    /(<Script[^>]*react-grab[^>]*)(\/?>)/is
-  );
-  if (!reactGrabScriptMatch) {
-    return {
-      success: false,
-      filePath,
-      message: "Could not find React Grab Script tag"
-    };
+var getWorkspacePatterns = (projectRoot) => {
+  const patterns = [];
+  const pnpmWorkspacePath = join(projectRoot, "pnpm-workspace.yaml");
+  if (existsSync(pnpmWorkspacePath)) {
+    const content = readFileSync(pnpmWorkspacePath, "utf-8");
+    const lines = content.split("\n");
+    let inPackages = false;
+    for (const line of lines) {
+      if (line.match(/^packages:\s*$/)) {
+        inPackages = true;
+        continue;
+      }
+      if (inPackages) {
+        if (line.match(/^[a-zA-Z]/) || line.trim() === "") {
+          if (line.match(/^[a-zA-Z]/)) inPackages = false;
+          continue;
+        }
+        const match = line.match(/^\s*-\s*['"]?([^'"#\n]+?)['"]?\s*$/);
+        if (match) {
+          patterns.push(match[1].trim());
+        }
+      }
+    }
   }
-  const scriptTag = reactGrabScriptMatch[0];
-  const scriptOpening = reactGrabScriptMatch[1];
-  const scriptClosing = reactGrabScriptMatch[2];
-  const existingDataOptionsMatch = scriptTag.match(
-    /data-options=\{JSON\.stringify\([^)]+\)\}/
-  );
-  const dataOptionsAttr = `data-options={JSON.stringify(
-              ${formatOptionsForNextjs(options2)}
-            )}`;
-  let newScriptTag;
-  if (existingDataOptionsMatch) {
-    newScriptTag = scriptTag.replace(
-      existingDataOptionsMatch[0],
-      dataOptionsAttr
-    );
-  } else {
-    newScriptTag = `${scriptOpening}
-            ${dataOptionsAttr}
-          ${scriptClosing}`;
+  const lernaJsonPath = join(projectRoot, "lerna.json");
+  if (existsSync(lernaJsonPath)) {
+    try {
+      const lernaJson = JSON.parse(readFileSync(lernaJsonPath, "utf-8"));
+      if (Array.isArray(lernaJson.packages)) {
+        patterns.push(...lernaJson.packages);
+      }
+    } catch {
+    }
   }
-  const newContent = originalContent.replace(scriptTag, newScriptTag);
-  return {
-    success: true,
-    filePath,
-    message: "Update React Grab options",
-    originalContent,
-    newContent
-  };
-};
-var addOptionsToViteScript = (originalContent, options2, filePath) => {
-  const reactGrabImportMatch = originalContent.match(
-    /import\s*\(\s*["']react-grab["']\s*\)/
-  );
-  if (!reactGrabImportMatch) {
-    return {
-      success: false,
-      filePath,
-      message: "Could not find React Grab import"
-    };
+  const packageJsonPath = join(projectRoot, "package.json");
+  if (existsSync(packageJsonPath)) {
+    try {
+      const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+      if (Array.isArray(packageJson.workspaces)) {
+        patterns.push(...packageJson.workspaces);
+      } else if (packageJson.workspaces?.packages) {
+        patterns.push(...packageJson.workspaces.packages);
+      }
+    } catch {
+    }
   }
-  const optionsJson = formatOptionsAsJson(options2);
-  const newImport = `import("react-grab").then((m) => m.init(${optionsJson}))`;
-  const newContent = originalContent.replace(
-    reactGrabImportMatch[0],
-    newImport
-  );
-  return {
-    success: true,
-    filePath,
-    message: "Update React Grab options",
-    originalContent,
-    newContent
-  };
+  return [...new Set(patterns)];
 };
-var addOptionsToWebpackImport = (originalContent, options2, filePath) => {
-  const reactGrabImportMatch = originalContent.match(
-    /import\s*\(\s*["']react-grab["']\s*\)/
-  );
-  if (!reactGrabImportMatch) {
-    return {
-      success: false,
-      filePath,
-      message: "Could not find React Grab import"
-    };
+var expandWorkspacePattern = (projectRoot, pattern) => {
+  const results = [];
+  const cleanPattern = pattern.replace(/\/\*$/, "");
+  const basePath = join(projectRoot, cleanPattern);
+  if (!existsSync(basePath)) return results;
+  try {
+    const entries = readdirSync(basePath, { withFileTypes: true });
+    for (const entry of entries) {
+      if (entry.isDirectory()) {
+        const packageJsonPath = join(basePath, entry.name, "package.json");
+        if (existsSync(packageJsonPath)) {
+          results.push(join(basePath, entry.name));
+        }
+      }
+    }
+  } catch {
+    return results;
   }
-  const optionsJson = formatOptionsAsJson(options2);
-  const newImport = `import("react-grab").then((m) => m.init(${optionsJson}))`;
-  const newContent = originalContent.replace(
-    reactGrabImportMatch[0],
-    newImport
-  );
-  return {
-    success: true,
-    filePath,
-    message: "Update React Grab options",
-    originalContent,
-    newContent
-  };
+  return results;
 };
-var previewOptionsTransform = (projectRoot, framework, nextRouterType, options2) => {
-  const filePath = findReactGrabFile(projectRoot, framework, nextRouterType);
-  if (!filePath) {
-    return {
-      success: false,
-      filePath: "",
-      message: "Could not find file containing React Grab configuration"
-    };
-  }
-  const originalContent = readFileSync(filePath, "utf-8");
-  if (!hasReactGrabCode(originalContent)) {
-    return {
-      success: false,
-      filePath,
-      message: "Could not find React Grab code in the file"
+var hasReactDependency = (projectPath) => {
+  const packageJsonPath = join(projectPath, "package.json");
+  if (!existsSync(packageJsonPath)) return false;
+  try {
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+    const allDeps = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies
     };
+    return Boolean(allDeps["react"] || allDeps["react-dom"]);
+  } catch {
+    return false;
   }
-  switch (framework) {
-    case "next":
-      return addOptionsToNextScript(originalContent, options2, filePath);
-    case "vite":
-      return addOptionsToViteScript(originalContent, options2, filePath);
-    case "webpack":
-      return addOptionsToWebpackImport(originalContent, options2, filePath);
-    default:
-      return {
-        success: false,
-        filePath,
-        message: `Unknown framework: ${framework}`
-      };
-  }
-};
-var applyOptionsTransform = (result) => {
-  return applyTransform(result);
 };
-var removeAgentFromNextApp = (originalContent, agent, filePath) => {
-  const agentPackage = `@react-grab/${agent}`;
-  if (!originalContent.includes(agentPackage)) {
-    return {
-      success: true,
-      filePath,
-      message: `Agent ${agent} is not configured in this file`,
-      noChanges: true
-    };
+var findWorkspaceProjects = (projectRoot) => {
+  const patterns = getWorkspacePatterns(projectRoot);
+  const projects = [];
+  for (const pattern of patterns) {
+    const projectPaths = expandWorkspacePattern(projectRoot, pattern);
+    for (const projectPath of projectPaths) {
+      const framework = detectFramework(projectPath);
+      const hasReact = hasReactDependency(projectPath);
+      if (hasReact || framework !== "unknown") {
+        const packageJsonPath = join(projectPath, "package.json");
+        let name = basename(projectPath);
+        try {
+          const packageJson = JSON.parse(
+            readFileSync(packageJsonPath, "utf-8")
+          );
+          name = packageJson.name || name;
+        } catch {
+        }
+        projects.push({
+          name,
+          path: projectPath,
+          framework,
+          hasReact
+        });
+      }
+    }
   }
-  const agentScriptPattern = new RegExp(
-    `\\s*\\{process\\.env\\.NODE_ENV === "development" && \\(\\s*<Script[^>]*${agentPackage.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}[^>]*\\/>\\s*\\)\\}`,
-    "gs"
-  );
-  const simpleScriptPattern = new RegExp(
-    `\\s*<Script[^>]*${agentPackage.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}[^>]*\\/>`,
-    "gi"
-  );
-  let newContent = originalContent.replace(agentScriptPattern, "");
-  if (newContent === originalContent) {
-    newContent = originalContent.replace(simpleScriptPattern, "");
+  return projects;
+};
+var hasReactGrabInFile = (filePath) => {
+  if (!existsSync(filePath)) return false;
+  try {
+    const content = readFileSync(filePath, "utf-8");
+    const fuzzyPatterns = [
+      /["'`][^"'`]*react-grab/,
+      /react-grab[^"'`]*["'`]/,
+      /<[^>]*react-grab/i,
+      /import[^;]*react-grab/i,
+      /require[^)]*react-grab/i,
+      /from\s+[^;]*react-grab/i,
+      /src[^>]*react-grab/i
+    ];
+    return fuzzyPatterns.some((pattern) => pattern.test(content));
+  } catch {
+    return false;
   }
-  if (newContent === originalContent) {
-    return {
-      success: false,
-      filePath,
-      message: `Could not find agent ${agent} script to remove`
-    };
+};
+var detectReactGrab = (projectRoot) => {
+  const packageJsonPath = join(projectRoot, "package.json");
+  if (existsSync(packageJsonPath)) {
+    try {
+      const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+      const allDependencies = {
+        ...packageJson.dependencies,
+        ...packageJson.devDependencies
+      };
+      if (allDependencies["react-grab"]) {
+        return true;
+      }
+    } catch {
+    }
   }
-  return {
-    success: true,
-    filePath,
-    message: `Remove ${agent} agent`,
-    originalContent,
-    newContent
-  };
+  const filesToCheck = [
+    join(projectRoot, "app", "layout.tsx"),
+    join(projectRoot, "app", "layout.jsx"),
+    join(projectRoot, "src", "app", "layout.tsx"),
+    join(projectRoot, "src", "app", "layout.jsx"),
+    join(projectRoot, "pages", "_document.tsx"),
+    join(projectRoot, "pages", "_document.jsx"),
+    join(projectRoot, "instrumentation-client.ts"),
+    join(projectRoot, "instrumentation-client.js"),
+    join(projectRoot, "src", "instrumentation-client.ts"),
+    join(projectRoot, "src", "instrumentation-client.js"),
+    join(projectRoot, "index.html"),
+    join(projectRoot, "public", "index.html"),
+    join(projectRoot, "src", "index.tsx"),
+    join(projectRoot, "src", "index.ts"),
+    join(projectRoot, "src", "main.tsx"),
+    join(projectRoot, "src", "main.ts")
+  ];
+  return filesToCheck.some(hasReactGrabInFile);
 };
-var removeAgentFromVite = (originalContent, agent, filePath) => {
-  const agentPackage = `@react-grab/${agent}`;
-  if (!originalContent.includes(agentPackage)) {
-    return {
-      success: true,
-      filePath,
-      message: `Agent ${agent} is not configured in this file`,
-      noChanges: true
-    };
+var AGENT_PACKAGES2 = [
+  "@react-grab/claude-code",
+  "@react-grab/cursor",
+  "@react-grab/opencode",
+  "@react-grab/codex",
+  "@react-grab/gemini",
+  "@react-grab/amp",
+  "@react-grab/ami",
+  "@react-grab/visual-edit"
+];
+var detectUnsupportedFramework = (projectRoot) => {
+  const packageJsonPath = join(projectRoot, "package.json");
+  if (!existsSync(packageJsonPath)) {
+    return null;
   }
-  const agentImportPattern = new RegExp(
-    `\\s*import\\s*\\(\\s*["']${agentPackage.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}/client["']\\s*\\);?`,
-    "g"
-  );
-  const newContent = originalContent.replace(agentImportPattern, "");
-  if (newContent === originalContent) {
-    return {
-      success: false,
-      filePath,
-      message: `Could not find agent ${agent} import to remove`
+  try {
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+    const allDependencies = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies
     };
+    if (allDependencies["@remix-run/react"] || allDependencies["remix"]) {
+      return "remix";
+    }
+    if (allDependencies["astro"]) {
+      return "astro";
+    }
+    if (allDependencies["@sveltejs/kit"]) {
+      return "sveltekit";
+    }
+    if (allDependencies["gatsby"]) {
+      return "gatsby";
+    }
+    return null;
+  } catch {
+    return null;
   }
-  return {
-    success: true,
-    filePath,
-    message: `Remove ${agent} agent`,
-    originalContent,
-    newContent
-  };
 };
-var removeAgentFromWebpack = (originalContent, agent, filePath) => {
-  const agentPackage = `@react-grab/${agent}`;
-  if (!originalContent.includes(agentPackage)) {
-    return {
-      success: true,
-      filePath,
-      message: `Agent ${agent} is not configured in this file`,
-      noChanges: true
-    };
+var detectInstalledAgents = (projectRoot) => {
+  const packageJsonPath = join(projectRoot, "package.json");
+  if (!existsSync(packageJsonPath)) {
+    return [];
   }
-  const agentImportPattern = new RegExp(
-    `\\s*import\\s*\\(\\s*["']${agentPackage.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}/client["']\\s*\\);?`,
-    "g"
-  );
-  const newContent = originalContent.replace(agentImportPattern, "");
-  if (newContent === originalContent) {
-    return {
-      success: false,
-      filePath,
-      message: `Could not find agent ${agent} import to remove`
+  try {
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+    const allDependencies = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies
     };
+    return AGENT_PACKAGES2.filter(
+      (agent) => Boolean(allDependencies[agent])
+    ).map((agent) => agent.replace("@react-grab/", ""));
+  } catch {
+    return [];
   }
+};
+var detectProject = async (projectRoot = process.cwd()) => {
+  const framework = detectFramework(projectRoot);
+  const packageManager = await detectPackageManager(projectRoot);
   return {
-    success: true,
-    filePath,
-    message: `Remove ${agent} agent`,
-    originalContent,
-    newContent
+    packageManager,
+    framework,
+    nextRouterType: framework === "next" ? detectNextRouterType(projectRoot) : "unknown",
+    isMonorepo: detectMonorepo(projectRoot),
+    projectRoot,
+    hasReactGrab: detectReactGrab(projectRoot),
+    installedAgents: detectInstalledAgents(projectRoot),
+    unsupportedFramework: detectUnsupportedFramework(projectRoot)
   };
 };
-var previewAgentRemoval = (projectRoot, framework, nextRouterType, agent) => {
-  const filePath = findReactGrabFile(projectRoot, framework, nextRouterType);
-  if (!filePath) {
-    return {
-      success: true,
-      filePath: "",
-      message: "Could not find file containing React Grab configuration",
-      noChanges: true
-    };
-  }
-  const originalContent = readFileSync(filePath, "utf-8");
-  switch (framework) {
-    case "next":
-      return removeAgentFromNextApp(originalContent, agent, filePath);
-    case "vite":
-      return removeAgentFromVite(originalContent, agent, filePath);
-    case "webpack":
-      return removeAgentFromWebpack(originalContent, agent, filePath);
-    default:
-      return {
-        success: false,
-        filePath,
-        message: `Unknown framework: ${framework}`
-      };
+
+// src/utils/diff.ts
+var RED = "\x1B[31m";
+var GREEN = "\x1B[32m";
+var GRAY = "\x1B[90m";
+var RESET = "\x1B[0m";
+var BOLD = "\x1B[1m";
+var generateDiff = (originalContent, newContent) => {
+  const originalLines = originalContent.split("\n");
+  const newLines = newContent.split("\n");
+  const diff = [];
+  Math.max(originalLines.length, newLines.length);
+  let originalIndex = 0;
+  let newIndex = 0;
+  while (originalIndex < originalLines.length || newIndex < newLines.length) {
+    const originalLine = originalLines[originalIndex];
+    const newLine = newLines[newIndex];
+    if (originalLine === newLine) {
+      diff.push({
+        type: "unchanged",
+        content: originalLine,
+        lineNumber: newIndex + 1
+      });
+      originalIndex++;
+      newIndex++;
+    } else if (originalLine === void 0) {
+      diff.push({ type: "added", content: newLine, lineNumber: newIndex + 1 });
+      newIndex++;
+    } else if (newLine === void 0) {
+      diff.push({ type: "removed", content: originalLine });
+      originalIndex++;
+    } else {
+      const originalInNew = newLines.indexOf(originalLine, newIndex);
+      const newInOriginal = originalLines.indexOf(newLine, originalIndex);
+      if (originalInNew !== -1 && (newInOriginal === -1 || originalInNew - newIndex < newInOriginal - originalIndex)) {
+        while (newIndex < originalInNew) {
+          diff.push({
+            type: "added",
+            content: newLines[newIndex],
+            lineNumber: newIndex + 1
+          });
+          newIndex++;
+        }
+      } else if (newInOriginal !== -1) {
+        while (originalIndex < newInOriginal) {
+          diff.push({ type: "removed", content: originalLines[originalIndex] });
+          originalIndex++;
+        }
+      } else {
+        diff.push({ type: "removed", content: originalLine });
+        diff.push({
+          type: "added",
+          content: newLine,
+          lineNumber: newIndex + 1
+        });
+        originalIndex++;
+        newIndex++;
+      }
+    }
   }
+  return diff;
 };
-var previewPackageJsonAgentRemoval = (projectRoot, agent) => {
-  const packageJsonPath = join(projectRoot, "package.json");
-  if (!existsSync(packageJsonPath)) {
-    return {
-      success: true,
-      filePath: "",
-      message: "Could not find package.json",
-      noChanges: true
-    };
+var formatDiff = (diff, contextLines = 3) => {
+  const lines = [];
+  let lastPrintedIndex = -1;
+  let hasChanges = false;
+  const changedIndices = diff.map((line, index) => line.type !== "unchanged" ? index : -1).filter((index) => index !== -1);
+  if (changedIndices.length === 0) {
+    return `${GRAY}No changes${RESET}`;
   }
-  const originalContent = readFileSync(packageJsonPath, "utf-8");
-  const allPrefixVariants = getAllAgentPrefixVariants(agent);
-  if (allPrefixVariants.length === 0) {
-    return {
-      success: true,
-      filePath: packageJsonPath,
-      message: `Unknown agent: ${agent}`,
-      noChanges: true
-    };
+  for (const changedIndex of changedIndices) {
+    const startContext = Math.max(0, changedIndex - contextLines);
+    const endContext = Math.min(diff.length - 1, changedIndex + contextLines);
+    if (startContext > lastPrintedIndex + 1 && lastPrintedIndex !== -1) {
+      lines.push(`${GRAY}  ...${RESET}`);
+    }
+    for (let lineIndex = Math.max(startContext, lastPrintedIndex + 1); lineIndex <= endContext; lineIndex++) {
+      const diffLine = diff[lineIndex];
+      if (diffLine.type === "added") {
+        lines.push(`${GREEN}+ ${diffLine.content}${RESET}`);
+        hasChanges = true;
+      } else if (diffLine.type === "removed") {
+        lines.push(`${RED}- ${diffLine.content}${RESET}`);
+        hasChanges = true;
+      } else {
+        lines.push(`${GRAY}  ${diffLine.content}${RESET}`);
+      }
+      lastPrintedIndex = lineIndex;
+    }
   }
-  const hasAnyPrefix = allPrefixVariants.some(
-    (prefix) => originalContent.includes(prefix)
-  );
-  if (!hasAnyPrefix) {
-    return {
-      success: true,
-      filePath: packageJsonPath,
-      message: `Agent ${agent} dev script is not configured`,
-      noChanges: true
-    };
+  return hasChanges ? lines.join("\n") : `${GRAY}No changes${RESET}`;
+};
+var printDiff = (filePath, originalContent, newContent) => {
+  console.log(`
+${BOLD}File: ${filePath}${RESET}`);
+  console.log("\u2500".repeat(60));
+  const diff = generateDiff(originalContent, newContent);
+  console.log(formatDiff(diff));
+  console.log("\u2500".repeat(60));
+};
+var VERSION = "0.1.0-beta.5";
+var configureMcp = (mcpClient, cwd, customPkg) => {
+  const mcpCommand = customPkg ? `npx -y ${customPkg} browser mcp` : `npx -y @react-grab/cli browser mcp`;
+  const mcpSpinner = spinner(`Installing MCP server for ${MCP_CLIENT_NAMES[mcpClient]}`).start();
+  try {
+    execSync(
+      `npx -y install-mcp '${mcpCommand}' --client ${mcpClient} --yes`,
+      { stdio: "ignore", cwd }
+    );
+    mcpSpinner.succeed(`MCP server installed for ${MCP_CLIENT_NAMES[mcpClient]}`);
+    logger.break();
+    process.exit(0);
+  } catch {
+    mcpSpinner.fail(`Failed to configure MCP for ${MCP_CLIENT_NAMES[mcpClient]}`);
+    logger.dim(`Try manually: npx -y install-mcp '${mcpCommand}' --client ${mcpClient}`);
+    logger.break();
+    process.exit(1);
   }
+};
+var installSkill = (agent, cwd) => {
+  logger.break();
+  const skillSpinner = spinner(`Installing skill for ${agent.name}`).start();
   try {
-    const packageJson = JSON.parse(originalContent);
-    for (const scriptKey of Object.keys(packageJson.scripts || {})) {
-      let scriptValue = packageJson.scripts[scriptKey];
-      if (typeof scriptValue === "string") {
-        for (const prefix of allPrefixVariants) {
-          if (scriptValue.includes(prefix)) {
-            scriptValue = scriptValue.replace(prefix + " ", "").replace(prefix, "");
-          }
-        }
-        packageJson.scripts[scriptKey] = scriptValue;
-      }
-    }
-    const newContent = JSON.stringify(packageJson, null, 2) + "\n";
-    return {
-      success: true,
-      filePath: packageJsonPath,
-      message: `Remove ${agent} server from dev script`,
-      originalContent,
-      newContent
-    };
+    execSync(`npx -y add-skill aidenybai/react-grab -y --agent ${agent.id}`, {
+      stdio: "ignore",
+      cwd
+    });
+    skillSpinner.succeed(`Skill installed for ${agent.name}`);
+    logger.break();
+    process.exit(0);
   } catch {
-    return {
-      success: false,
-      filePath: packageJsonPath,
-      message: "Failed to parse package.json"
-    };
+    skillSpinner.fail(`Failed to install skill for ${agent.name}`);
+    logger.warn(`Try manually: npx -y add-skill aidenybai/react-grab --agent ${agent.id}`);
+    logger.break();
+    process.exit(1);
   }
 };
-
-// src/commands/add.ts
-var VERSION = "0.1.0-beta.4";
-var add = new Command().name("add").alias("install").description("add an agent integration or MCP server").argument(
+var add = new Command().name("add").alias("install").description("add browser automation for your AI agent").argument(
   "[agent]",
   `agent to add (${AGENTS.join(", ")}, mcp, skill)`
 ).option("-y, --yes", "skip confirmation prompts", false).option(
@@ -2750,79 +2825,59 @@ var add = new Command().name("add").alias("install").description("add an agent i
       }
       if (!mcpClient) {
         logger.break();
-        logger.error("Please specify an MCP client with --client");
-        logger.error(`Available clients: ${MCP_CLIENTS.join(", ")}`);
-        logger.break();
-        process.exit(1);
-      }
-      const customPkg = opts2.pkg;
-      const mcpCommand = customPkg ? `npx -y ${customPkg} browser mcp` : `npx -y @react-grab/cli browser mcp`;
-      const mcpSpinner = spinner(`Configuring MCP for ${MCP_CLIENT_NAMES[mcpClient]}`).start();
-      try {
-        execSync(
-          `npx -y install-mcp '${mcpCommand}' --client ${mcpClient} --yes`,
-          { stdio: "ignore", cwd }
-        );
-        mcpSpinner.succeed(`MCP configured for ${MCP_CLIENT_NAMES[mcpClient]}`);
-        logger.break();
-        process.exit(0);
-      } catch {
-        mcpSpinner.fail(`Failed to configure MCP for ${MCP_CLIENT_NAMES[mcpClient]}`);
-        logger.dim(`Try manually: npx -y install-mcp '${mcpCommand}' --client ${mcpClient}`);
+        logger.error("Please specify an MCP client with --client");
+        logger.error(`Available clients: ${MCP_CLIENTS.join(", ")}`);
         logger.break();
         process.exit(1);
       }
+      configureMcp(mcpClient, cwd, opts2.pkg);
     }
     if (agentArg === "skill") {
-      let skillTarget = opts2.client;
-      if (skillTarget && !AGENT_TARGETS[skillTarget]) {
+      const clientArg = opts2.client;
+      let selectedAgent = clientArg ? findSkillAgent(clientArg) : void 0;
+      const detectedAgents = detectSkillAgents(cwd);
+      if (clientArg && !selectedAgent) {
         logger.break();
-        logger.error(`Invalid skill target: ${skillTarget}`);
-        logger.error(`Available targets: ${SUPPORTED_TARGETS.join(", ")}`);
+        logger.error(`Invalid skill agent: ${clientArg}`);
+        logger.error(`Available agents: ${SKILL_AGENTS.map((a2) => a2.id).join(", ")}`);
         logger.break();
         process.exit(1);
       }
-      if (!skillTarget && !isNonInteractive) {
+      if (!selectedAgent && !isNonInteractive) {
+        if (detectedAgents.length === 0) {
+          logger.break();
+          logger.warn("No supported agent folders detected.");
+          logger.log("Supported agents: " + SKILL_AGENTS.map((a2) => a2.id).join(", "));
+          logger.break();
+          process.exit(0);
+        }
         logger.break();
-        const { target } = await prompts3({
+        const { agent } = await prompts3({
           type: "select",
-          name: "target",
+          name: "agent",
           message: `Which ${highlighter.info("agent")} would you like to install the skill for?`,
-          choices: SUPPORTED_TARGETS.map((innerTarget) => ({
-            title: innerTarget,
-            value: innerTarget
-          }))
+          choices: [
+            ...detectedAgents.map((innerAgent) => ({
+              title: innerAgent.name,
+              value: innerAgent
+            })),
+            { title: "Skip", value: null }
+          ]
         });
-        if (!target) {
+        if (!agent) {
           logger.break();
-          process.exit(1);
+          process.exit(0);
         }
-        skillTarget = target;
+        selectedAgent = agent;
       }
-      if (!skillTarget) {
+      if (!selectedAgent) {
         logger.break();
-        logger.error("Please specify a target with --client");
-        logger.error(`Available targets: ${SUPPORTED_TARGETS.join(", ")}`);
-        logger.break();
-        process.exit(1);
-      }
-      logger.break();
-      const installSpinner = spinner("Fetching skill file").start();
-      try {
-        const skill = await fetchSkillFile();
-        const skillDir = join(cwd, AGENT_TARGETS[skillTarget]);
-        rmSync(skillDir, { recursive: true, force: true });
-        mkdirSync(skillDir, { recursive: true });
-        writeFileSync(join(skillDir, "SKILL.md"), skill);
-        installSpinner.succeed(`Skill installed to ${AGENT_TARGETS[skillTarget]}/`);
-      } catch (error48) {
-        installSpinner.fail("Failed to install skill");
-        logger.error(error48 instanceof Error ? error48.message : "Unknown error");
+        logger.error("Please specify an agent with --client");
+        logger.error(`Available agents: ${SKILL_AGENTS.map((a2) => a2.id).join(", ")}`);
         logger.break();
         process.exit(1);
       }
-      logger.break();
-      process.exit(0);
+      installSkill(selectedAgent, cwd);
     }
     if (!agentArg && !isNonInteractive) {
       logger.break();
@@ -2832,18 +2887,18 @@ var add = new Command().name("add").alias("install").description("add an agent i
         message: "What would you like to add?",
         choices: [
           {
-            title: "MCP Server",
-            description: "Give your agent access to your browser",
-            value: "mcp"
+            title: "Skill (recommended)",
+            description: "Instructions for your agent to use the browser",
+            value: "skill"
           },
           {
-            title: "Skill",
-            description: "Install browser automation skill for AI agents",
-            value: "skill"
+            title: "MCP Server",
+            description: "A server that provides browser tools to your agent",
+            value: "mcp"
           },
           {
             title: "Agent Integration",
-            description: "Run agents through the React Grab interface",
+            description: "Add Claude Code, Cursor, etc. to the React Grab UI",
             value: "agent"
           }
         ]
@@ -2866,55 +2921,34 @@ var add = new Command().name("add").alias("install").description("add an agent i
           logger.break();
           process.exit(1);
         }
-        const mcpClient = client;
-        const customPkg = opts2.pkg;
-        const mcpCommand = customPkg ? `npx -y ${customPkg} browser mcp` : `npx -y @react-grab/cli browser mcp`;
-        const mcpSpinner = spinner(`Configuring MCP for ${MCP_CLIENT_NAMES[mcpClient]}`).start();
-        try {
-          execSync(
-            `npx -y install-mcp '${mcpCommand}' --client ${mcpClient} --yes`,
-            { stdio: "ignore", cwd }
-          );
-          mcpSpinner.succeed(`MCP configured for ${MCP_CLIENT_NAMES[mcpClient]}`);
+        configureMcp(client, cwd, opts2.pkg);
+      }
+      if (addType === "skill") {
+        const detectedAgents = detectSkillAgents(cwd);
+        if (detectedAgents.length === 0) {
           logger.break();
-          process.exit(0);
-        } catch {
-          mcpSpinner.fail(`Failed to configure MCP for ${MCP_CLIENT_NAMES[mcpClient]}`);
-          logger.dim(`Try manually: npx install-mcp '${mcpCommand}' --client ${mcpClient}`);
+          logger.warn("No supported agent folders detected.");
+          logger.log("Supported agents: " + SKILL_AGENTS.map((a2) => a2.id).join(", "));
           logger.break();
-          process.exit(1);
+          process.exit(0);
         }
-      }
-      if (addType === "skill") {
-        const { target } = await prompts3({
+        const { selectedAgent } = await prompts3({
           type: "select",
-          name: "target",
+          name: "selectedAgent",
           message: `Which ${highlighter.info("agent")} would you like to install the skill for?`,
-          choices: SUPPORTED_TARGETS.map((innerTarget) => ({
-            title: innerTarget,
-            value: innerTarget
-          }))
+          choices: [
+            ...detectedAgents.map((innerAgent) => ({
+              title: innerAgent.name,
+              value: innerAgent
+            })),
+            { title: "Skip", value: null }
+          ]
         });
-        if (!target) {
+        if (!selectedAgent) {
           logger.break();
-          process.exit(1);
-        }
-        const installSpinner = spinner("Fetching skill file").start();
-        try {
-          const skill = await fetchSkillFile();
-          const skillDir = join(cwd, AGENT_TARGETS[target]);
-          rmSync(skillDir, { recursive: true, force: true });
-          mkdirSync(skillDir, { recursive: true });
-          writeFileSync(join(skillDir, "SKILL.md"), skill);
-          installSpinner.succeed(`Skill installed to ${AGENT_TARGETS[target]}/`);
-        } catch (error48) {
-          installSpinner.fail("Failed to install skill");
-          logger.error(error48 instanceof Error ? error48.message : "Unknown error");
-          logger.break();
-          process.exit(1);
+          process.exit(0);
         }
-        logger.break();
-        process.exit(0);
+        installSkill(selectedAgent, cwd);
       }
     }
     const preflightSpinner = spinner("Preflight checks.").start();
@@ -3232,9 +3266,11 @@ var MAX_SUGGESTIONS_COUNT = 30;
 var MAX_KEY_HOLD_DURATION_MS = 2e3;
 var MAX_CONTEXT_LINES = 50;
 var COMPONENT_STACK_MAX_DEPTH = 10;
+var DEFAULT_COMPONENT_TREE_MAX_DEPTH = 50;
+var MAX_PROPS_DISPLAY_LENGTH = 100;
+var LOAD_STATES = /* @__PURE__ */ new Set(["load", "domcontentloaded", "networkidle"]);
 
 // src/utils/browser-automation.ts
-var LOAD_STATES = /* @__PURE__ */ new Set(["load", "domcontentloaded", "networkidle"]);
 var ensureHealthyServer = async (options2 = {}) => {
   const cliPath = process.argv[1];
   const serverRunning = await isServerRunning();
@@ -3309,13 +3345,7 @@ var getReactContextForActiveElement = async (page) => {
 var createOutputJson = (getPage, pageName) => {
   return async (ok, result, error48) => {
     const page = getPage();
-    let reactContext;
-    if (page && ok) {
-      const context = await getReactContextForActiveElement(page);
-      if (context) {
-        reactContext = context;
-      }
-    }
+    const reactContext = page && ok ? await getReactContextForActiveElement(page) ?? void 0 : void 0;
     return {
       ok,
       url: page?.url() ?? "",
@@ -3356,7 +3386,7 @@ var createRefHelper = (getActivePage2) => {
       const g2 = globalThis;
       const refs = g2.__REACT_GRAB_REFS__;
       if (!refs) {
-        throw new Error("No refs found. Call snapshot() first.");
+        throw new Error("No refs found. Call getSnapshot() first.");
       }
       const element2 = refs[id];
       if (!element2) {
@@ -3413,38 +3443,33 @@ var createRefHelper = (getActivePage2) => {
     }
   };
   return (refId) => {
+    const customMethods = {
+      then: () => (resolve, reject) => getElement(refId).then(resolve, reject),
+      source: () => () => getSource(refId),
+      props: () => () => getProps(refId),
+      state: () => () => getState(refId),
+      screenshot: () => async (options2) => {
+        const element = await getElement(refId);
+        try {
+          return await element.screenshot({ scale: "css", ...options2 });
+        } finally {
+          await element.dispose();
+        }
+      }
+    };
     return new Proxy(
       {},
       {
         get(_, prop) {
-          if (prop === "then") {
-            return (resolve, reject) => getElement(refId).then(resolve, reject);
-          }
-          if (prop === "source") {
-            return () => getSource(refId);
-          }
-          if (prop === "props") {
-            return () => getProps(refId);
-          }
-          if (prop === "state") {
-            return () => getState(refId);
-          }
-          if (prop === "screenshot") {
-            return async (options2) => {
-              const el = await getElement(refId);
-              try {
-                return await el.screenshot({ scale: "css", ...options2 });
-              } finally {
-                await el.dispose();
-              }
-            };
+          if (prop in customMethods) {
+            return customMethods[prop]();
           }
           return async (...args) => {
-            const el = await getElement(refId);
+            const element = await getElement(refId);
             try {
-              return await el[prop](...args);
+              return await element[prop](...args);
             } finally {
-              await el.dispose();
+              await element.dispose();
             }
           };
         }
@@ -3496,9 +3521,9 @@ var createComponentHelper = (getActivePage2) => {
     return handles;
   };
 };
-var createFillHelper = (ref, getActivePage2) => {
+var createFillHelper = (getRef, getActivePage2) => {
   return async (refId, text) => {
-    const element = await ref(refId);
+    const element = await getRef(refId);
     await element.click();
     const currentPage2 = getActivePage2();
     const isMac2 = process.platform === "darwin";
@@ -3644,7 +3669,7 @@ var createWaitForHelper = (getActivePage2) => {
       await currentPage2.waitForLoadState(selectorOrState, { timeout });
       return;
     }
-    if (selectorOrState.startsWith("e") && /^e\d+$/.test(selectorOrState)) {
+    if (/^e\d+$/.test(selectorOrState)) {
       await currentPage2.waitForSelector(`[aria-ref="${selectorOrState}"]`, { timeout });
       return;
     }
@@ -17447,56 +17472,93 @@ var startMcpServer = async () => {
   server.registerTool(
     "browser_snapshot",
     {
-      description: `Get ARIA accessibility tree with element refs (e1, e2...) and React component info.
+      description: `Get ARIA accessibility tree with element refs and React component info.
+
+OUTPUT FORMAT:
+- button "Submit" [ref=e1] [component=Button] [source=form.tsx:42]
+- ComponentName [ref=e2] [source=file.tsx:10]: text content
 
-OUTPUT INCLUDES:
-- ARIA roles and accessible names
-- Element refs (e1, e2...) for interaction
-- [component=ComponentName] for React components
-- [source=file.tsx:line] for source location
+REACT INFO IS ALREADY INCLUDED (no extra calls needed):
+- [component=X] \u2014 React component name (replaces "generic" when available)
+- [source=file.tsx:line] \u2014 Source file location
+Just parse these from the snapshot string.
 
-SCREENSHOT STRATEGY - ALWAYS prefer element screenshots over full page:
+FOR MORE REACT DETAILS on a specific element:
+Use browser_execute: return await getRef('e1').source()
+Returns: { filePath, lineNumber, componentName }
+
+SCREENSHOT STRATEGY - prefer element screenshots:
 1. First: Get refs with snapshot (this tool)
-2. Then: Screenshot specific element via browser_execute: return await ref('e1').screenshot()
+2. Then: Screenshot specific element via browser_execute: return await getRef('e1').screenshot()
 
-USE ELEMENT SCREENSHOTS (ref('eX').screenshot()) FOR:
-- Visual bugs: "wrong color", "broken", "misaligned", "styling issue", "CSS bug"
-- Appearance checks: "how does X look", "show me the button", "what does Y display"
-- UI verification: "is it visible", "check the layout", "verify the design"
-- Any visual concern about a SPECIFIC component
+USE ELEMENT SCREENSHOTS (getRef('eX').screenshot()) FOR:
+- Visual bugs: "wrong color", "broken", "misaligned", "styling issue"
+- Appearance checks: "how does X look", "show me the button"
+- UI verification: "is it visible", "check the layout"
 
 USE VIEWPORT screenshot=true ONLY FOR:
 - "screenshot the page", "what's on screen"
-- No specific element mentioned AND need visual context
-
-PERFORMANCE:
-- interactableOnly:true = much smaller output (recommended)
-- maxDepth = limit tree depth
+- No specific element mentioned
 
-After getting refs, use browser_execute with: ref('e1').click()`,
+After getting refs, use browser_execute with: getRef('e1').click()`,
       inputSchema: {
         page: external_exports.string().optional().default("default").describe("Named page context"),
         maxDepth: external_exports.number().optional().describe("Limit tree depth"),
-        interactableOnly: external_exports.boolean().optional().describe("Only clickable/input elements (recommended)"),
         screenshot: external_exports.boolean().optional().default(false).describe(
-          "Viewport screenshot. For element screenshots (PREFERRED), use browser_execute: ref('eX').screenshot()"
-        )
+          "Viewport screenshot. For element screenshots (PREFERRED), use browser_execute: getRef('eX').screenshot()"
+        ),
+        reactTree: external_exports.boolean().optional().default(false).describe("(Experimental) React tree view. Note: Regular snapshot already includes [component=X] and [source=X] - prefer that."),
+        includeProps: external_exports.boolean().optional().default(false).describe("Include props when reactTree=true")
       }
     },
     async ({
       page: pageName,
       maxDepth,
-      interactableOnly,
-      screenshot
+      screenshot,
+      reactTree,
+      includeProps
     }) => {
       let browser2 = null;
       try {
         const connection = await connectToBrowserPage(pageName);
         browser2 = connection.browser;
         const activePage = connection.page;
-        const getActivePage2 = () => activePage;
-        const snapshot = createSnapshotHelper(getActivePage2);
-        const snapshotResult = await snapshot({ maxDepth, interactableOnly });
+        let textResult;
+        if (reactTree) {
+          const componentTree = await activePage.evaluate(
+            async (opts2) => {
+              const g2 = globalThis;
+              if (g2.__REACT_GRAB_SNAPSHOT__) {
+                await g2.__REACT_GRAB_SNAPSHOT__();
+              }
+              if (!g2.__REACT_GRAB_GET_COMPONENT_TREE__) {
+                return [];
+              }
+              return g2.__REACT_GRAB_GET_COMPONENT_TREE__(opts2);
+            },
+            { maxDepth: maxDepth ?? DEFAULT_COMPONENT_TREE_MAX_DEPTH, includeProps: includeProps ?? false }
+          );
+          const renderTree = (nodes) => {
+            const lines = [];
+            for (const node of nodes) {
+              const indent = "  ".repeat(node.depth);
+              let line = `${indent}- ${node.name}`;
+              if (node.ref) line += ` [ref=${node.ref}]`;
+              if (node.source) line += ` [source=${node.source}]`;
+              if (node.props && Object.keys(node.props).length > 0) {
+                const propsStr = JSON.stringify(node.props);
+                if (propsStr.length < MAX_PROPS_DISPLAY_LENGTH) {
+                  line += ` [props=${propsStr}]`;
+                }
+              }
+              lines.push(line);
+            }
+            return lines.join("\n");
+          };
+          textResult = renderTree(componentTree) || "No React components found. Make sure react-grab is installed and the page uses React.";
+        } else {
+          textResult = await createSnapshotHelper(() => activePage)({ maxDepth });
+        }
         if (screenshot) {
           const screenshotBuffer = await activePage.screenshot({
             fullPage: false,
@@ -17504,7 +17566,7 @@ After getting refs, use browser_execute with: ref('e1').click()`,
           });
           return {
             content: [
-              { type: "text", text: snapshotResult },
+              { type: "text", text: textResult },
               {
                 type: "image",
                 data: screenshotBuffer.toString("base64"),
@@ -17514,7 +17576,7 @@ After getting refs, use browser_execute with: ref('e1').click()`,
           };
         }
         return {
-          content: [{ type: "text", text: snapshotResult }]
+          content: [{ type: "text", text: textResult }]
         };
       } catch (error48) {
         return createMcpErrorResponse(error48);
@@ -17528,40 +17590,38 @@ After getting refs, use browser_execute with: ref('e1').click()`,
     {
       description: `Execute Playwright code with helpers for element interaction.
 
-IMPORTANT: Always call snapshot() first to get element refs from the a11y tree (e1, e2...), then use ref('e1') to interact.
+IMPORTANT: Always call getSnapshot() first to get element refs (e1, e2...), then use getRef('e1') to interact.
 
 AVAILABLE HELPERS:
-- page: Playwright Page object (https://playwright.dev/docs/api/class-page)
-- snapshot(opts?): Get ARIA tree with React component info. opts: {maxDepth, interactableOnly}
-- ref(id): Get element by ref ID, chainable with all ElementHandle methods
-- ref(id).source(): Get React component source {filePath, lineNumber, componentName}
-- ref(id).props(): Get React component props (serialized)
-- ref(id).state(): Get React component state/hooks (serialized)
-- component(name, opts?): Find elements by React component name. opts: {nth: number}
-- fill(id, text): Clear and fill input (works with rich text editors)
+- page: Playwright Page object
+- getSnapshot(opts?): Get ARIA tree with React info. opts: {maxDepth}
+- getRef(id): Get element by ref ID, chainable with ElementHandle methods
+- getRef(id).source(): Get React source {filePath, lineNumber, componentName}
+- getRef(id).props(): Get React component props
+- getRef(id).state(): Get React component state/hooks
+- fill(id, text): Clear and fill input
 - drag({from, to, dataTransfer?}): Drag with custom MIME types
 - dispatch({target, event, dataTransfer?, detail?}): Dispatch custom events
 - waitFor(target): Wait for selector/ref/state. e.g. waitFor('e1'), waitFor('networkidle')
 - grab: React Grab client API (activate, deactivate, toggle, isActive, copyElement, getState)
 
-REACT-SPECIFIC PATTERNS:
-- Get React source: return await ref('e1').source()
-- Get component props: return await ref('e1').props()
-- Get component state: return await ref('e1').state()
-- Find by component: const btn = await component('Button', {nth: 0})
+GETTING REACT INFO (ranked by preference):
+1. Parse snapshot \u2014 [component=X] and [source=file:line] are already in the output
+2. getRef('eX').source() \u2014 for detailed info on a specific element
 
-ELEMENT SCREENSHOTS (PREFERRED for visual issues):
-- return await ref('e1').screenshot()
-Use for: wrong color, broken styling, visual bugs, "how does X look", UI verification
+ELEMENT SCREENSHOTS (for visual issues):
+- return await getRef('e1').screenshot()
+Use for: wrong color, broken styling, visual bugs, UI verification
 
 COMMON PATTERNS:
-- Click: await ref('e1').click()
+- Click: await getRef('e1').click()
 - Fill input: await fill('e1', 'hello')
-- Get attribute: return await ref('e1').getAttribute('href')
+- Get attribute: return await getRef('e1').getAttribute('href')
 - Navigate: await page.goto('https://example.com')
-- Full page screenshot (rare): return await page.screenshot()
 
-PERFORMANCE: Batch multiple actions in one execute call to minimize round-trips.`,
+DON'T manually traverse __reactFiber$ \u2014 use getRef('eX').source() instead.
+
+PERFORMANCE: Batch multiple actions in one execute call.`,
       inputSchema: {
         code: external_exports.string().describe(
           "JavaScript code. Use 'page' for Playwright, 'ref(id)' for elements, 'return' for output"
@@ -17592,19 +17652,19 @@ PERFORMANCE: Batch multiple actions in one execute call to minimize round-trips.
         };
         context.on("page", pageOpenHandler);
         const getActivePage2 = createActivePageGetter(context, () => activePage);
-        const snapshot = createSnapshotHelper(getActivePage2);
-        const ref = createRefHelper(getActivePage2);
-        const fill = createFillHelper(ref, getActivePage2);
+        const getSnapshot = createSnapshotHelper(getActivePage2);
+        const getRef = createRefHelper(getActivePage2);
+        const fill = createFillHelper(getRef, getActivePage2);
         const drag = createDragHelper(getActivePage2);
         const dispatch = createDispatchHelper(getActivePage2);
-        const grab = createGrabHelper(ref, getActivePage2);
+        const grab = createGrabHelper(getRef, getActivePage2);
         const waitFor = createWaitForHelper(getActivePage2);
         const component = createComponentHelper(getActivePage2);
         const executeFunction = new Function(
           "page",
           "getActivePage",
-          "snapshot",
-          "ref",
+          "getSnapshot",
+          "getRef",
           "fill",
           "drag",
           "dispatch",
@@ -17616,8 +17676,8 @@ PERFORMANCE: Batch multiple actions in one execute call to minimize round-trips.
         const result = await executeFunction(
           getActivePage2(),
           getActivePage2,
-          snapshot,
-          ref,
+          getSnapshot,
+          getRef,
           fill,
           drag,
           dispatch,
@@ -17660,82 +17720,12 @@ PERFORMANCE: Batch multiple actions in one execute call to minimize round-trips.
       }
     }
   );
-  server.registerTool(
-    "browser_react_tree",
-    {
-      description: `Get React component tree hierarchy (separate from ARIA tree).
-
-Shows the React component structure with:
-- Component names and nesting
-- Source file locations
-- Element refs where available
-- Optional props (serialized)
-
-Use this when you need to understand React component architecture rather than accessibility tree.
-For interacting with elements, use browser_snapshot to get refs first.`,
-      inputSchema: {
-        page: external_exports.string().optional().default("default").describe("Named page context"),
-        maxDepth: external_exports.number().optional().default(50).describe("Maximum tree depth"),
-        includeProps: external_exports.boolean().optional().default(false).describe("Include component props (increases output size)")
-      }
-    },
-    async ({ page: pageName, maxDepth, includeProps }) => {
-      let browser2 = null;
-      try {
-        const connection = await connectToBrowserPage(pageName);
-        browser2 = connection.browser;
-        const activePage = connection.page;
-        const componentTree = await activePage.evaluate(
-          async (opts2) => {
-            const g2 = globalThis;
-            if (!g2.__REACT_GRAB_GET_COMPONENT_TREE__) {
-              return [];
-            }
-            return g2.__REACT_GRAB_GET_COMPONENT_TREE__(opts2);
-          },
-          { maxDepth: maxDepth ?? 50, includeProps: includeProps ?? false }
-        );
-        const renderTree = (nodes) => {
-          const lines = [];
-          for (const node of nodes) {
-            const indent = "  ".repeat(node.depth);
-            let line = `${indent}- ${node.name}`;
-            if (node.ref) line += ` [ref=${node.ref}]`;
-            if (node.source) line += ` [source=${node.source}]`;
-            if (node.props && Object.keys(node.props).length > 0) {
-              const propsStr = JSON.stringify(node.props);
-              if (propsStr.length < 100) {
-                line += ` [props=${propsStr}]`;
-              } else {
-                line += ` [props=...]`;
-              }
-            }
-            lines.push(line);
-          }
-          return lines.join("\n");
-        };
-        const treeOutput = renderTree(componentTree);
-        return {
-          content: [
-            {
-              type: "text",
-              text: treeOutput || "No React components found. Make sure react-grab is installed and the page uses React."
-            }
-          ]
-        };
-      } catch (error48) {
-        return createMcpErrorResponse(error48);
-      } finally {
-        await browser2?.close();
-      }
-    }
-  );
   const transport = new StdioServerTransport();
   await server.connect(transport);
 };
 
 // src/commands/browser.ts
-var VERSION2 = "0.1.0-beta.4";
+var VERSION2 = "0.1.0-beta.5";
 var printHeader = () => {
   console.log(
     `${pc.magenta("\u273F")} ${pc.bold("React Grab")} ${pc.gray(VERSION2)}`
@@ -17746,24 +17736,6 @@ var exitWithError = (error48) => {
   logger.error(error48 instanceof Error ? error48.message : "Failed");
   process.exit(1);
 };
-var rebuildNativeModuleAndRestart = async (browserPkgDir) => {
-  execSync("npm rebuild better-sqlite3", {
-    stdio: "ignore",
-    cwd: browserPkgDir
-  });
-  const rebuildSpinner = spinner("Restarting server").start();
-  rebuildSpinner.succeed("Restarting server");
-  const args = process.argv.slice(2);
-  const child = spawn(process.argv[0], [process.argv[1], ...args], {
-    stdio: "inherit",
-    detached: false
-  });
-  child.on("error", (error48) => {
-    console.error(`Failed to restart: ${error48.message}`);
-    process.exit(1);
-  });
-  child.on("exit", (code) => process.exit(code ?? 0));
-};
 var isSupportedBrowser = (value) => {
   return SUPPORTED_BROWSERS.includes(value);
 };
@@ -17820,16 +17792,23 @@ var dump = new Command().name("dump").description("dump cookies from a browser")
   }
 });
 var start = new Command().name("start").description("start browser server manually (auto-starts on first execute)").option("-p, --port <port>", "HTTP API port", String(DEFAULT_SERVER_PORT)).option("--headed", "show browser window (default is headless)").option("-b, --browser <browser>", "source browser for cookies (chrome, edge, brave, arc)").option("-d, --domain <domain>", "only load cookies matching this domain").option("--foreground", "run in foreground instead of detaching").action(async (options2) => {
-  printHeader();
+  const isForeground = options2.foreground;
+  if (!isForeground) {
+    printHeader();
+  }
   if (await isServerRunning()) {
     const info = getServerInfo();
-    logger.error(`Server already running on port ${info?.port}`);
+    if (isForeground) {
+      console.error(`Server already running on port ${info?.port}`);
+    } else {
+      logger.error(`Server already running on port ${info?.port}`);
+    }
     process.exit(1);
   }
   const sourceBrowser = resolveSourceBrowser(options2.browser);
   const port = parseInt(options2.port, 10);
-  if (!options2.foreground) {
-    const serverSpinner2 = spinner("Starting server").start();
+  if (!isForeground) {
+    const serverSpinner = spinner("Starting server").start();
     try {
       const browserServer = await spawnServer({
         port,
@@ -17838,55 +17817,30 @@ var start = new Command().name("start").description("start browser server manual
         browser: options2.browser,
         domain: options2.domain
       });
-      serverSpinner2.succeed(`Server running on port ${browserServer.port}`);
+      serverSpinner.succeed(`Server running on port ${browserServer.port}`);
       logger.dim(`CDP: ${browserServer.wsEndpoint}`);
     } catch (error48) {
-      serverSpinner2.fail();
+      serverSpinner.fail();
       exitWithError(error48);
     }
     return;
   }
-  const serverSpinner = spinner("Starting server").start();
   try {
     const browserServer = await serve({
       port,
       headless: !options2.headed
     });
-    serverSpinner.succeed(`Server running on port ${browserServer.port}`);
-    logger.dim(`CDP: ${browserServer.wsEndpoint}`);
-    const cookieSpinner = spinner("Loading cookies").start();
-    try {
-      const cookies = dumpCookies(sourceBrowser, { domain: options2.domain });
-      const playwrightCookies = toPlaywrightCookies(cookies);
-      const browser2 = await chromium.connectOverCDP(browserServer.wsEndpoint);
-      const contexts = browser2.contexts();
-      if (contexts.length > 0) {
-        if (playwrightCookies.length > 0) {
-          await contexts[0].addCookies(playwrightCookies);
-        }
-        await applyStealthScripts(contexts[0]);
-      }
-      await browser2.close();
-      cookieSpinner.succeed(`Loaded ${playwrightCookies.length} cookies from ${sourceBrowser}`);
-    } catch (cookieError) {
-      const errorMessage = cookieError instanceof Error ? cookieError.message : "Unknown error";
-      const isModuleVersionError = errorMessage.includes("NODE_MODULE_VERSION");
-      if (!isModuleVersionError) {
-        cookieSpinner.fail(`Failed to load cookies from ${sourceBrowser}`);
-      } else {
-        cookieSpinner.info("Native module mismatch. Rebuilding...");
-        try {
-          const currentDir = dirname(fileURLToPath(import.meta.url));
-          const browserPkgDir = join(currentDir, "..", "..");
-          await browserServer.stop();
-          await rebuildNativeModuleAndRestart(browserPkgDir);
-          return;
-        } catch {
-          cookieSpinner.fail("Auto-rebuild failed. Run: npm rebuild better-sqlite3");
-        }
+    const cookies = dumpCookies(sourceBrowser, { domain: options2.domain });
+    const playwrightCookies = toPlaywrightCookies(cookies);
+    const browser2 = await chromium.connectOverCDP(browserServer.wsEndpoint);
+    const contexts = browser2.contexts();
+    if (contexts.length > 0) {
+      if (playwrightCookies.length > 0) {
+        await contexts[0].addCookies(playwrightCookies);
       }
+      await applyStealthScripts(contexts[0]);
     }
-    spinner("Server ready. Press Ctrl+C to stop.").succeed();
+    await browser2.close();
     const shutdownHandler = () => {
       browserServer.stop().catch(() => {
       }).finally(() => process.exit(0));
@@ -17897,8 +17851,8 @@ var start = new Command().name("start").description("start browser server manual
     await new Promise(() => {
     });
   } catch (error48) {
-    serverSpinner.fail();
-    exitWithError(error48);
+    console.error(error48 instanceof Error ? error48.message : "Failed to start server");
+    process.exit(1);
   }
 });
 var stop = new Command().name("stop").description("stop the browser server").action(async () => {
@@ -17963,7 +17917,7 @@ var execute = new Command().name("execute").description("run Playwright code wit
   let activePage = null;
   let browser2 = null;
   let pageOpenHandler = null;
-  const buildOutput = createOutputJson(() => activePage, pageName);
+  const outputJson = createOutputJson(() => activePage, pageName);
   let exitCode = 0;
   try {
     const { serverUrl } = await ensureHealthyServer({
@@ -17988,19 +17942,19 @@ var execute = new Command().name("execute").description("run Playwright code wit
     };
     context.on("page", pageOpenHandler);
     const getActivePage2 = createActivePageGetter(context, () => activePage);
-    const snapshot = createSnapshotHelper(getActivePage2);
-    const ref = createRefHelper(getActivePage2);
-    const fill = createFillHelper(ref, getActivePage2);
+    const getSnapshot = createSnapshotHelper(getActivePage2);
+    const getRef = createRefHelper(getActivePage2);
+    const fill = createFillHelper(getRef, getActivePage2);
     const drag = createDragHelper(getActivePage2);
     const dispatch = createDispatchHelper(getActivePage2);
-    const grab = createGrabHelper(ref, getActivePage2);
+    const grab = createGrabHelper(getRef, getActivePage2);
     const waitFor = createWaitForHelper(getActivePage2);
     const component = createComponentHelper(getActivePage2);
     const executeFunction = new Function(
       "page",
       "getActivePage",
-      "snapshot",
-      "ref",
+      "getSnapshot",
+      "getRef",
       "fill",
       "drag",
       "dispatch",
@@ -18009,10 +17963,21 @@ var execute = new Command().name("execute").description("run Playwright code wit
       "component",
       `return (async () => { ${code} })();`
     );
-    const result = await executeFunction(getActivePage2(), getActivePage2, snapshot, ref, fill, drag, dispatch, grab, waitFor, component);
-    console.log(JSON.stringify(await buildOutput(true, result)));
+    const result = await executeFunction(
+      getActivePage2(),
+      getActivePage2,
+      getSnapshot,
+      getRef,
+      fill,
+      drag,
+      dispatch,
+      grab,
+      waitFor,
+      component
+    );
+    console.log(JSON.stringify(await outputJson(true, result)));
   } catch (error48) {
-    console.log(JSON.stringify(await buildOutput(false, void 0, error48 instanceof Error ? error48.message : "Failed")));
+    console.log(JSON.stringify(await outputJson(false, void 0, error48 instanceof Error ? error48.message : "Failed")));
     exitCode = 1;
   } finally {
     if (activePage && pageOpenHandler) {
@@ -18067,37 +18032,32 @@ PERFORMANCE TIPS
   1. Batch multiple actions in a single execute call to minimize round-trips.
      Each execute spawns a new connection, so combining actions is 3-5x faster.
 
-  2. Use interactableOnly or limit depth for smaller snapshots (faster, fewer tokens).
-     - snapshot({interactableOnly: true}) -> only clickable/input elements
-     - snapshot({maxDepth: 5})            -> limit tree depth
+  2. Use maxDepth to limit tree depth for smaller snapshots (faster, fewer tokens).
+     - getSnapshot({maxDepth: 5}) -> limit tree depth
 
-  # SLOW: 3 separate round-trips, full snapshot
+  # SLOW: 3 separate round-trips
   execute "await page.goto('https://example.com')"
-  execute "await ref('e1').click()"
-  execute "return await snapshot()"
+  execute "await getRef('e1').click()"
+  execute "return await getSnapshot()"
 
-  # FAST: 1 round-trip, interactable only
+  # FAST: 1 round-trip (same result, 3x faster)
   execute "
     await page.goto('https://example.com');
-    await ref('e1').click();
-    return await snapshot({interactableOnly: true});
+    await getRef('e1').click();
+    return await getSnapshot();
   "
 
 HELPERS
   page              - Playwright Page object
-  snapshot(opts?)   - Get ARIA accessibility tree with refs
+  getSnapshot(opts?)- Get ARIA accessibility tree with refs
                       opts.maxDepth: limit tree depth (e.g., 5)
-                      opts.interactableOnly: only clickable/input elements
-  ref(id)           - Get element by ref ID (chainable - supports all ElementHandle methods)
-                      Example: await ref('e1').click()
-                      Example: await ref('e1').getAttribute('data-foo')
-  ref(id).source()  - Get React component source file info for element
+  getRef(id)        - Get element by ref ID (chainable - supports all ElementHandle methods)
+                      Example: await getRef('e1').click()
+                      Example: await getRef('e1').getAttribute('data-foo')
+  getRef(id).source()  - Get React component source file info for element
                       Returns { filePath, lineNumber, componentName } or null
-  ref(id).props()   - Get React component props (serialized)
-  ref(id).state()   - Get React component state/hooks (serialized)
-  component(name, opts?) - Find elements by React component name
-                      opts.nth: get the nth matching element (0-indexed)
-                      Example: await component('Button', {nth: 0})
+  getRef(id).props()   - Get React component props (serialized)
+  getRef(id).state()   - Get React component state/hooks (serialized)
   fill(id, text)    - Clear and fill input (works with rich text editors)
   drag(opts)        - Drag with custom MIME types
                       opts.from: source selector or ref ID (e.g., "e1" or "text=src")
@@ -18116,14 +18076,11 @@ HELPERS
   grab              - React Grab client API (activate, copyElement, etc)
 
 SNAPSHOT OPTIONS
-  # Full YAML tree (default, can be large)
-  execute "return await snapshot()"
-
-  # Interactable only (recommended - much smaller!)
-  execute "return await snapshot({interactableOnly: true})"
+  # Full YAML tree (default)
+  execute "return await getSnapshot()"
 
-  # With depth limit
-  execute "return await snapshot({interactableOnly: true, maxDepth: 6})"
+  # With depth limit (smaller output)
+  execute "return await getSnapshot({maxDepth: 6})"
 
 SCREENSHOTS - PREFER ELEMENT OVER FULL PAGE
   For visual issues (wrong color, broken styling, misalignment), ALWAYS screenshot
@@ -18133,8 +18090,8 @@ SCREENSHOTS - PREFER ELEMENT OVER FULL PAGE
   - Easier to compare
 
   # Element screenshot (PREFERRED)
-  execute "await ref('e1').screenshot({path: '/tmp/button.png'})"
-  execute "await ref('e5').screenshot({path: '/tmp/card.png'})"
+  execute "await getRef('e1').screenshot({path: '/tmp/button.png'})"
+  execute "await getRef('e5').screenshot({path: '/tmp/card.png'})"
 
   # Full page (only when needed)
   execute "await page.screenshot({path: '/tmp/full.png'})"
@@ -18144,10 +18101,10 @@ SCREENSHOTS - PREFER ELEMENT OVER FULL PAGE
 
 COMMON PATTERNS
   # Click by ref (chainable - no double await needed!)
-  execute "await ref('e1').click()"
+  execute "await getRef('e1').click()"
 
   # Get element attribute
-  execute "return await ref('e1').getAttribute('data-id')"
+  execute "return await getRef('e1').getAttribute('data-id')"
 
   # Fill input (clears existing content)
   execute "await fill('e1', 'text')"
@@ -18174,23 +18131,17 @@ COMMON PATTERNS
 
 REACT-SPECIFIC PATTERNS
   # Get React component source file
-  execute "return await ref('e1').source()"
+  execute "return await getRef('e1').source()"
 
   # Get component props
-  execute "return await ref('e1').props()"
+  execute "return await getRef('e1').props()"
 
   # Get component state
-  execute "return await ref('e1').state()"
-
-  # Find elements by React component name
-  execute "const buttons = await component('Button'); return buttons.length"
-
-  # Get the first Button component and click it
-  execute "const btn = await component('Button', {nth: 0}); await btn.click()"
+  execute "return await getRef('e1').state()"
 
 MULTI-PAGE SESSIONS
   execute "await page.goto('https://github.com')" --page github
-  execute "return await snapshot({interactableOnly: true})" --page github
+  execute "return await getSnapshot()" --page github
 
 PLAYWRIGHT DOCS: https://playwright.dev/docs/api/class-page
 `;
@@ -18244,7 +18195,7 @@ browser.addCommand(status);
 browser.addCommand(execute);
 browser.addCommand(pages);
 browser.addCommand(mcp);
-var VERSION3 = "0.1.0-beta.4";
+var VERSION3 = "0.1.0-beta.5";
 var isMac = process.platform === "darwin";
 var META_LABEL = isMac ? "Cmd" : "Win";
 var ALT_LABEL = isMac ? "Option" : "Alt";
@@ -18682,122 +18633,48 @@ var configure = new Command().name("configure").alias("config").description("con
     handleError(error48);
   }
 });
-
-// src/utils/cli-helpers.ts
-var formatInstalledAgentNames = (agents) => agents.map((agent) => AGENT_NAMES[agent] ?? agent).join(", ");
-var applyTransformWithFeedback = (result, message) => {
-  const writeSpinner = spinner(message ?? `Applying changes to ${result.filePath}.`).start();
-  const writeResult = applyTransform(result);
-  if (!writeResult.success) {
-    writeSpinner.fail();
-    logger.break();
-    logger.error(writeResult.error || "Failed to write file.");
-    logger.break();
-    process.exit(1);
-  }
-  writeSpinner.succeed();
-};
-var applyPackageJsonWithFeedback = (result, message) => {
-  const writeSpinner = spinner(message ?? `Applying changes to ${result.filePath}.`).start();
-  const writeResult = applyPackageJsonTransform(result);
-  if (!writeResult.success) {
-    writeSpinner.fail();
-    logger.break();
-    logger.error(writeResult.error || "Failed to write file.");
-    logger.break();
-    process.exit(1);
-  }
-  writeSpinner.succeed();
-};
-var installPackagesWithFeedback = (packages, packageManager, projectRoot) => {
-  if (packages.length === 0) return;
-  const installSpinner = spinner(`Installing ${packages.join(", ")}.`).start();
-  try {
-    installPackages(packages, packageManager, projectRoot);
-    installSpinner.succeed();
-  } catch (error48) {
-    installSpinner.fail();
-    handleError(error48);
-  }
-};
-var uninstallPackagesWithFeedback = (packages, packageManager, projectRoot) => {
-  if (packages.length === 0) return;
-  const uninstallSpinner = spinner(`Removing ${packages.join(", ")}.`).start();
-  try {
-    uninstallPackages(packages, packageManager, projectRoot);
-    uninstallSpinner.succeed();
-  } catch (error48) {
-    uninstallSpinner.fail();
-    handleError(error48);
-  }
-};
-var VERSION4 = "0.1.0-beta.4";
+var VERSION4 = "0.1.0-beta.5";
 var REPORT_URL = "https://react-grab.com/api/report-cli";
 var DOCS_URL = "https://github.com/aidenybai/react-grab";
-var promptAgentIntegration = async (cwd, customPkg) => {
-  const { integrationType } = await prompts3({
+var promptSkillInstall = async (cwd) => {
+  const detectedAgents = detectSkillAgents(cwd);
+  if (detectedAgents.length === 0) {
+    return;
+  }
+  logger.log(`The ${highlighter.info("React Grab skill")} gives your agent access to the browser.`);
+  logger.log(`Learn more at ${highlighter.info("https://skill.md")}`);
+  logger.break();
+  const { wantSkill } = await prompts3({
+    type: "confirm",
+    name: "wantSkill",
+    message: `Would you like to install the skill?`,
+    initial: true
+  });
+  if (!wantSkill) return;
+  const { selectedAgent } = await prompts3({
     type: "select",
-    name: "integrationType",
-    message: `Would you like to add ${highlighter.info("agent integration")}?`,
+    name: "selectedAgent",
+    message: `Which ${highlighter.info("agent")} would you like to install the skill for?`,
     choices: [
-      { title: "MCP Server (browser automation for your agent)", value: "mcp" },
-      { title: "Skill (for agents like Codex)", value: "skill" },
-      { title: "Both", value: "both" },
-      { title: "Neither", value: "none" }
+      ...detectedAgents.map((agent) => ({
+        title: agent.name,
+        value: agent
+      })),
+      { title: "Skip", value: null }
     ]
   });
-  if (!integrationType || integrationType === "none") return;
-  if (integrationType === "mcp" || integrationType === "both") {
-    const { mcpClient } = await prompts3({
-      type: "select",
-      name: "mcpClient",
-      message: `Which ${highlighter.info("MCP client")} would you like to configure?`,
-      choices: MCP_CLIENTS.map((client) => ({
-        title: MCP_CLIENT_NAMES[client],
-        value: client
-      }))
-    });
-    if (mcpClient) {
-      const mcpCommand = customPkg ? `npx -y ${customPkg} browser mcp` : `npx -y @react-grab/cli browser mcp`;
-      logger.break();
-      try {
-        execSync(
-          `npx -y install-mcp '${mcpCommand}' --client ${mcpClient} --yes`,
-          { stdio: "inherit", cwd }
-        );
-        logger.break();
-        logger.success("MCP server has been configured.");
-      } catch {
-        logger.break();
-        logger.warn("Failed to configure MCP server. You can try again later with:");
-        logger.log(`  npx -y install-mcp '${mcpCommand}' --client ${mcpClient}`);
-      }
-    }
-  }
-  if (integrationType === "skill" || integrationType === "both") {
-    const { skillTarget } = await prompts3({
-      type: "select",
-      name: "skillTarget",
-      message: `Which ${highlighter.info("agent")} would you like to install the skill for?`,
-      choices: SUPPORTED_TARGETS.map((target) => ({
-        title: target,
-        value: target
-      }))
-    });
-    if (skillTarget) {
-      logger.break();
-      const skillSpinner = spinner("Installing browser automation skill").start();
-      try {
-        const skill = await fetchSkillFile();
-        const skillDir = join(cwd, AGENT_TARGETS[skillTarget]);
-        rmSync(skillDir, { recursive: true, force: true });
-        mkdirSync(skillDir, { recursive: true });
-        writeFileSync(join(skillDir, "SKILL.md"), skill);
-        skillSpinner.succeed(`Skill installed to ${AGENT_TARGETS[skillTarget]}/`);
-      } catch {
-        skillSpinner.fail("Failed to install skill");
-        logger.dim("Try manually: npx -y openskills install aidenybai/react-grab");
-      }
+  if (selectedAgent) {
+    logger.break();
+    const skillSpinner = spinner(`Installing skill for ${selectedAgent.name}`).start();
+    try {
+      execSync(`npx -y add-skill aidenybai/react-grab -y --agent ${selectedAgent.id}`, {
+        stdio: "ignore",
+        cwd
+      });
+      skillSpinner.succeed(`Skill installed for ${selectedAgent.name}.`);
+    } catch {
+      skillSpinner.fail(`Failed to install skill for ${selectedAgent.name}.`);
+      logger.warn(`Try manually: npx -y add-skill aidenybai/react-grab --agent ${selectedAgent.id}`);
     }
   }
   logger.break();
@@ -18931,7 +18808,7 @@ var init = new Command().name("init").description("initialize React Grab in your
         );
         logger.break();
       }
-      await promptAgentIntegration(projectInfo.projectRoot, opts2.pkg);
+      await promptSkillInstall(cwd);
       const { wantCustomizeOptions } = await prompts3({
         type: "confirm",
         name: "wantCustomizeOptions",
@@ -19097,14 +18974,17 @@ var init = new Command().name("init").description("initialize React Grab in your
             type: "select",
             name: "agent",
             message: `Which ${highlighter.info("agent integration")} would you like to add?`,
-            choices: availableAgents.map((innerAgent) => ({
-              title: getAgentName(innerAgent),
-              value: innerAgent
-            }))
+            choices: [
+              ...availableAgents.map((innerAgent) => ({
+                title: getAgentName(innerAgent),
+                value: innerAgent
+              })),
+              { title: "Skip", value: "skip" }
+            ]
           });
-          if (agent === void 0) {
+          if (agent === void 0 || agent === "skip") {
             logger.break();
-            process.exit(1);
+            process.exit(0);
           }
           const agentIntegration2 = agent;
           let agentsToRemove2 = [];
@@ -19267,17 +19147,21 @@ var init = new Command().name("init").description("initialize React Grab in your
             type: "select",
             name: "selectedProject",
             message: "Select a project to install React Grab:",
-            choices: sortedProjects.map((project) => {
-              const frameworkLabel = project.framework !== "unknown" ? ` ${highlighter.dim(`(${FRAMEWORK_NAMES[project.framework]})`)}` : "";
-              return {
-                title: `${project.name}${frameworkLabel}`,
-                value: project.path
-              };
-            })
+            choices: [
+              ...sortedProjects.map((project) => {
+                const frameworkLabel = project.framework !== "unknown" ? ` ${highlighter.dim(`(${FRAMEWORK_NAMES[project.framework]})`)}` : "";
+                return {
+                  title: `${project.name}${frameworkLabel}`,
+                  value: project.path
+                };
+              }),
+              { title: "Skip", value: "skip" }
+            ]
           });
-          if (!selectedProject) {
+          if (!selectedProject || selectedProject === "skip") {
             logger.break();
-            process.exit(1);
+            await promptSkillInstall(cwd);
+            process.exit(0);
           }
           process.chdir(selectedProject);
           const newProjectInfo = await detectProject(selectedProject);
@@ -19419,7 +19303,7 @@ var init = new Command().name("init").description("initialize React Grab in your
     }
     logger.break();
     if (!isNonInteractive) {
-      await promptAgentIntegration(projectInfo.projectRoot, opts2.pkg);
+      await promptSkillInstall(cwd);
     }
     await reportToCli("completed", {
       framework: finalFramework,
@@ -19433,7 +19317,7 @@ var init = new Command().name("init").description("initialize React Grab in your
     await reportToCli("error", void 0, error48);
   }
 });
-var VERSION5 = "0.1.0-beta.4";
+var VERSION5 = "0.1.0-beta.5";
 var remove = new Command().name("remove").description("remove an agent integration").argument(
   "[agent]",
   "agent to remove (claude-code, cursor, opencode, codex, gemini, amp, ami, visual-edit)"
@@ -19610,9 +19494,123 @@ var remove = new Command().name("remove").description("remove an agent integrati
     handleError(error48);
   }
 });
+var VERSION6 = "0.1.0-beta.5";
+var UPDATE_COMMANDS = {
+  npm: "npm install -g grab@latest",
+  yarn: "yarn global add grab@latest",
+  pnpm: "pnpm add -g grab@latest",
+  bun: "bun add -g grab@latest"
+};
+var MANAGER_NAMES = {
+  npm: "npm",
+  yarn: "Yarn",
+  pnpm: "pnpm",
+  bun: "Bun"
+};
+var execSilent = (command) => {
+  try {
+    return execSync(command, {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "pipe"]
+    }).trim();
+  } catch {
+    return null;
+  }
+};
+var getInstalledVersion = () => {
+  const output = execSilent("grab --version");
+  if (!output) return null;
+  const match = output.match(/(\d+\.\d+\.\d+(?:-[a-zA-Z0-9.]+)?)/);
+  return match ? match[1] : null;
+};
+var getLatestVersion = () => execSilent("npm view grab version");
+var isPackageManagerInstalled = (manager) => execSilent(`${manager} --version`) !== null;
+var detectGlobalPackageManager = () => {
+  const managers = ["pnpm", "yarn", "bun"];
+  for (const manager of managers) {
+    if (isPackageManagerInstalled(manager)) {
+      return manager;
+    }
+  }
+  return "npm";
+};
+var update = new Command().name("update").alias("upgrade").description("update grab to the latest version").option("-y, --yes", "skip confirmation prompts", false).option("--check", "only check for updates, don't install", false).action(async (opts2) => {
+  console.log(
+    `${pc.magenta("\u273F")} ${pc.bold("React Grab")} ${pc.gray(VERSION6)}`
+  );
+  console.log();
+  const checkSpinner = spinner("Checking for updates").start();
+  const installedVersion = getInstalledVersion();
+  const latestVersion = getLatestVersion();
+  if (!latestVersion) {
+    checkSpinner.fail("Failed to fetch latest version from npm");
+    logger.break();
+    logger.error("Could not reach npm registry. Check your network connection.");
+    logger.break();
+    process.exit(1);
+  }
+  if (!installedVersion) {
+    checkSpinner.fail("grab is not installed globally");
+    logger.break();
+    logger.log(`Install it with: ${highlighter.info("npm install -g grab")}`);
+    logger.break();
+    process.exit(1);
+  }
+  checkSpinner.succeed(`Current version: ${highlighter.info(installedVersion)}`);
+  if (installedVersion === latestVersion) {
+    logger.break();
+    logger.success(`You're already on the latest version (${latestVersion})`);
+    logger.break();
+    process.exit(0);
+  }
+  logger.log(`Latest version:  ${highlighter.success(latestVersion)}`);
+  logger.break();
+  if (opts2.check) {
+    logger.log(`Update available: ${installedVersion} \u2192 ${latestVersion}`);
+    logger.log(`Run ${highlighter.info("grab update")} to install the update.`);
+    logger.break();
+    process.exit(0);
+  }
+  const packageManager = detectGlobalPackageManager();
+  if (!opts2.yes) {
+    const { shouldProceed } = await prompts3({
+      type: "confirm",
+      name: "shouldProceed",
+      message: `Update grab from ${installedVersion} to ${latestVersion} using ${MANAGER_NAMES[packageManager]}?`,
+      initial: true
+    });
+    if (!shouldProceed) {
+      logger.break();
+      logger.log("Update cancelled.");
+      logger.break();
+      process.exit(0);
+    }
+  }
+  logger.break();
+  const updateSpinner = spinner(`Updating grab to ${latestVersion}`).start();
+  try {
+    const command = UPDATE_COMMANDS[packageManager];
+    execSync(command, {
+      stdio: ["pipe", "pipe", "pipe"]
+    });
+    updateSpinner.succeed(`Updated grab to ${latestVersion}`);
+    logger.break();
+    logger.success("Update complete!");
+    logger.break();
+  } catch (error48) {
+    updateSpinner.fail("Failed to update grab");
+    logger.break();
+    logger.error(`Update failed. Try manually: ${highlighter.info(UPDATE_COMMANDS[packageManager])}`);
+    if (error48 instanceof Error && error48.message) {
+      logger.dim(error48.message);
+    }
+    logger.break();
+    process.exit(1);
+  }
+});
 
 // src/cli.ts
-var VERSION6 = "0.1.0-beta.4";
+var VERSION7 = "0.1.0-beta.5";
 var VERSION_API_URL = "https://www.react-grab.com/api/version";
 process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));
@@ -19621,12 +19619,13 @@ try {
   });
 } catch {
 }
-var program = new Command().name("react-grab").description("add React Grab to your project").version(VERSION6, "-v, --version", "display the version number");
+var program = new Command().name("grab").description("add React Grab to your project").version(VERSION7, "-v, --version", "display the version number");
 program.addCommand(init);
 program.addCommand(add);
 program.addCommand(remove);
 program.addCommand(configure);
 program.addCommand(browser);
+program.addCommand(update);
 var completion = f2(program);
 var initCommand = completion.commands.get("init");
 var initAgentOption = initCommand?.options.get("agent");
@@ -19650,8 +19649,8 @@ var addCommand = completion.commands.get("add");
 var addAgentArg = addCommand?.arguments.get("agent");
 if (addAgentArg) {
   addAgentArg.handler = (complete) => {
-    complete("mcp", "MCP server for browser automation");
-    complete("skill", "Browser automation skill for AI agents");
+    complete("skill", "Instructions for your agent to use the browser (recommended)");
+    complete("mcp", "A server that provides browser tools to your agent");
     for (const agent of AGENTS) {
       complete(agent, "");
     }