@react-grab/cli 0.0.68 → 0.0.70

package/dist/cli.cjs

@@ -27,21 +27,25 @@ var detectFramework = (projectRoot) => {
   if (!fs.existsSync(packageJsonPath)) {
     return "unknown";
   }
-  const packageJson = JSON.parse(fs.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";
+  try {
+    const packageJson = JSON.parse(fs.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";
   }
-  return "unknown";
 };
 var detectNextRouterType = (projectRoot) => {
   const hasAppDir = fs.existsSync(path.join(projectRoot, "app"));
@@ -65,9 +69,13 @@ var detectMonorepo = (projectRoot) => {
   }
   const packageJsonPath = path.join(projectRoot, "package.json");
   if (fs.existsSync(packageJsonPath)) {
-    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
-    if (packageJson.workspaces) {
-      return true;
+    try {
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+      if (packageJson.workspaces) {
+        return true;
+      }
+    } catch {
+      return false;
     }
   }
   return false;
@@ -77,27 +85,63 @@ var detectReactGrab = (projectRoot) => {
   if (!fs.existsSync(packageJsonPath)) {
     return false;
   }
-  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
-  const allDependencies = {
-    ...packageJson.dependencies,
-    ...packageJson.devDependencies
-  };
-  return Boolean(allDependencies["react-grab"]);
+  try {
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+    const allDependencies = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies
+    };
+    return Boolean(allDependencies["react-grab"]);
+  } catch {
+    return false;
+  }
 };
 var AGENT_PACKAGES = ["@react-grab/claude-code", "@react-grab/cursor", "@react-grab/opencode"];
+var detectUnsupportedFramework = (projectRoot) => {
+  const packageJsonPath = path.join(projectRoot, "package.json");
+  if (!fs.existsSync(packageJsonPath)) {
+    return null;
+  }
+  try {
+    const packageJson = JSON.parse(fs.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 = path.join(projectRoot, "package.json");
   if (!fs.existsSync(packageJsonPath)) {
     return [];
   }
-  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
-  const allDependencies = {
-    ...packageJson.dependencies,
-    ...packageJson.devDependencies
-  };
-  return AGENT_PACKAGES.filter((agent) => Boolean(allDependencies[agent])).map(
-    (agent) => agent.replace("@react-grab/", "")
-  );
+  try {
+    const packageJson = JSON.parse(fs.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);
@@ -109,7 +153,8 @@ var detectProject = async (projectRoot = process.cwd()) => {
     isMonorepo: detectMonorepo(projectRoot),
     projectRoot,
     hasReactGrab: detectReactGrab(projectRoot),
-    installedAgents: detectInstalledAgents(projectRoot)
+    installedAgents: detectInstalledAgents(projectRoot),
+    unsupportedFramework: detectUnsupportedFramework(projectRoot)
   };
 };
 
@@ -553,7 +598,7 @@ var transformNextPagesRouter = (projectRoot, agent, reactGrabAlreadyConfigured)
     return {
       success: false,
       filePath: "",
-      message: "Could not find pages/_document.tsx. Please create one or add React Grab manually."
+      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 = fs.readFileSync(documentPath, "utf-8");
@@ -681,14 +726,134 @@ var previewTransform = (projectRoot, framework, nextRouterType, agent, reactGrab
       };
   }
 };
+var canWriteToFile = (filePath) => {
+  try {
+    fs.accessSync(filePath, fs.constants.W_OK);
+    return true;
+  } catch {
+    return false;
+  }
+};
 var applyTransform = (result) => {
   if (result.success && result.newContent && result.filePath) {
-    fs.writeFileSync(result.filePath, result.newContent);
+    if (!canWriteToFile(result.filePath)) {
+      return {
+        success: false,
+        error: `Cannot write to ${result.filePath}. Check file permissions.`
+      };
+    }
+    try {
+      fs.writeFileSync(result.filePath, result.newContent);
+      return { success: true };
+    } catch (error) {
+      return {
+        success: false,
+        error: `Failed to write to ${result.filePath}: ${error instanceof Error ? error.message : "Unknown error"}`
+      };
+    }
   }
+  return { success: true };
+};
+var AGENT_PREFIXES = {
+  "claude-code": "npx @react-grab/claude-code@latest &&",
+  cursor: "npx @react-grab/cursor@latest &&",
+  opencode: "npx @react-grab/opencode@latest &&"
+};
+var previewPackageJsonTransform = (projectRoot, agent, installedAgents) => {
+  if (agent === "none") {
+    return {
+      success: true,
+      filePath: "",
+      message: "No agent selected, skipping package.json modification",
+      noChanges: true
+    };
+  }
+  const packageJsonPath = path.join(projectRoot, "package.json");
+  if (!fs.existsSync(packageJsonPath)) {
+    return {
+      success: false,
+      filePath: "",
+      message: "Could not find package.json"
+    };
+  }
+  const originalContent = fs.readFileSync(packageJsonPath, "utf-8");
+  const agentPrefix = AGENT_PREFIXES[agent];
+  if (!agentPrefix) {
+    return {
+      success: false,
+      filePath: packageJsonPath,
+      message: `Unknown agent: ${agent}`
+    };
+  }
+  if (originalContent.includes(agentPrefix)) {
+    return {
+      success: true,
+      filePath: packageJsonPath,
+      message: `Agent ${agent} dev script is already configured`,
+      noChanges: true
+    };
+  }
+  try {
+    const packageJson = JSON.parse(originalContent);
+    if (!packageJson.scripts?.dev) {
+      return {
+        success: false,
+        filePath: packageJsonPath,
+        message: 'No "dev" script found in package.json'
+      };
+    }
+    const currentDevScript = packageJson.scripts.dev;
+    for (const installedAgent of installedAgents) {
+      const existingPrefix = AGENT_PREFIXES[installedAgent];
+      if (existingPrefix && currentDevScript.includes(existingPrefix)) {
+        return {
+          success: true,
+          filePath: packageJsonPath,
+          message: `Agent ${installedAgent} is already in dev script`,
+          noChanges: true
+        };
+      }
+    }
+    packageJson.scripts.dev = `${agentPrefix} ${currentDevScript}`;
+    const newContent = JSON.stringify(packageJson, null, 2) + "\n";
+    return {
+      success: true,
+      filePath: packageJsonPath,
+      message: `Add ${agent} server to dev script`,
+      originalContent,
+      newContent
+    };
+  } catch {
+    return {
+      success: false,
+      filePath: packageJsonPath,
+      message: "Failed to parse package.json"
+    };
+  }
+};
+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 {
+      fs.writeFileSync(result.filePath, result.newContent);
+      return { success: true };
+    } catch (error) {
+      return {
+        success: false,
+        error: `Failed to write to ${result.filePath}: ${error instanceof Error ? error.message : "Unknown error"}`
+      };
+    }
+  }
+  return { success: true };
 };
 
 // src/cli.ts
-var VERSION = "0.0.1";
+var VERSION = "0.0.68";
 var FRAMEWORK_NAMES = {
   next: "Next.js",
   vite: "Vite",
@@ -706,43 +871,116 @@ var AGENT_NAMES = {
   cursor: "Cursor",
   opencode: "Opencode"
 };
-var DOCS_URL = "https://react-grab.com/docs";
+var UNSUPPORTED_FRAMEWORK_NAMES = {
+  remix: "Remix",
+  astro: "Astro",
+  sveltekit: "SvelteKit",
+  gatsby: "Gatsby"
+};
+var DOCS_URL = "https://github.com/aidenybai/react-grab";
 var showDocsLink = () => {
   console.log("\nFor manual installation instructions, visit:");
-  console.log(`  ${DOCS_URL}
+  console.log(`  ${pc__default.default.cyan(DOCS_URL)}
 `);
 };
+var showManualInstructions = (framework, nextRouterType) => {
+  console.log(`
+${pc__default.default.yellow("\u26A0\uFE0F")} ${pc__default.default.yellow("Manual Setup Instructions:")}
+`);
+  if (framework === "next" && nextRouterType === "app") {
+    console.log(`${pc__default.default.bold("Next.js App Router:")}`);
+    console.log(`  1. Install: ${pc__default.default.cyan("npm install -D react-grab")}`);
+    console.log(`  2. Add to ${pc__default.default.cyan("app/layout.tsx")}:`);
+    console.log(`     ${pc__default.default.gray('import Script from "next/script";')}`);
+    console.log(`     ${pc__default.default.gray("// Inside <head> or after <html>:")}`);
+    console.log(`     ${pc__default.default.gray('<Script src="//unpkg.com/react-grab/dist/index.global.js" strategy="beforeInteractive" />')}`);
+  } else if (framework === "next" && nextRouterType === "pages") {
+    console.log(`${pc__default.default.bold("Next.js Pages Router:")}`);
+    console.log(`  1. Install: ${pc__default.default.cyan("npm install -D react-grab")}`);
+    console.log(`  2. Create or edit ${pc__default.default.cyan("pages/_document.tsx")}:`);
+    console.log(`     ${pc__default.default.gray('import Script from "next/script";')}`);
+    console.log(`     ${pc__default.default.gray("// Inside <Head>:")}`);
+    console.log(`     ${pc__default.default.gray('<Script src="//unpkg.com/react-grab/dist/index.global.js" strategy="beforeInteractive" />')}`);
+  } else if (framework === "vite") {
+    console.log(`${pc__default.default.bold("Vite:")}`);
+    console.log(`  1. Install: ${pc__default.default.cyan("npm install -D react-grab")}`);
+    console.log(`  2. Add to ${pc__default.default.cyan("index.html")} inside <head>:`);
+    console.log(`     ${pc__default.default.gray('<script type="module">')}`);
+    console.log(`     ${pc__default.default.gray('  if (import.meta.env.DEV) { import("react-grab"); }')}`);
+    console.log(`     ${pc__default.default.gray("</script>")}`);
+  } else if (framework === "webpack") {
+    console.log(`${pc__default.default.bold("Webpack:")}`);
+    console.log(`  1. Install: ${pc__default.default.cyan("npm install -D react-grab")}`);
+    console.log(`  2. Add to your entry file (e.g., ${pc__default.default.cyan("src/index.tsx")}):`);
+    console.log(`     ${pc__default.default.gray('if (process.env.NODE_ENV === "development") {')}`);
+    console.log(`     ${pc__default.default.gray('  import("react-grab");')}`);
+    console.log(`     ${pc__default.default.gray("}")}`);
+  } else {
+    console.log(`${pc__default.default.bold("Generic Setup:")}`);
+    console.log(`  1. Install: ${pc__default.default.cyan("npm install -D react-grab")}`);
+    console.log(`  2. Add the script to your HTML or entry file.`);
+    console.log(`  3. See docs for framework-specific instructions.`);
+  }
+  showDocsLink();
+};
+var showAccuracyWarning = () => {
+  console.log(`
+${pc__default.default.yellow("\u26A0\uFE0F")} ${pc__default.default.yellow("Auto-detection may not be 100% accurate.")}`);
+  console.log(`${pc__default.default.yellow("   Please verify the changes in your file before committing.")}`);
+};
 var parseArgs = async () => {
-  const argv = await yargs__default.default(helpers.hideBin(process.argv)).usage("Usage: $0 [options]").option("framework", {
+  const argv = await yargs__default.default(helpers.hideBin(process.argv)).scriptName("react-grab").usage(
+    `${pc__default.default.magenta("\u269B")} ${pc__default.default.bold("React Grab CLI")} ${pc__default.default.gray(`v${VERSION}`)}
+
+${pc__default.default.cyan("Usage:")} $0 [options]
+
+React Grab adds AI-powered context selection to your React application,
+allowing you to select components and copy their context for AI assistants.
+
+The CLI auto-detects your project configuration (framework, package manager,
+router type) and installs React Grab with optional agent integrations.`
+  ).option("framework", {
     alias: "f",
     type: "string",
     choices: ["next", "vite", "webpack"],
-    description: "Framework to configure (next, vite, webpack)"
+    description: "Override detected framework"
   }).option("package-manager", {
     alias: "p",
     type: "string",
     choices: ["npm", "yarn", "pnpm", "bun"],
-    description: "Package manager to use"
+    description: "Override detected package manager"
   }).option("router", {
     alias: "r",
     type: "string",
     choices: ["app", "pages"],
-    description: "Next.js router type (app or pages)"
+    description: "Next.js router type (only for Next.js projects)"
   }).option("agent", {
     alias: "a",
     type: "string",
     choices: ["claude-code", "cursor", "opencode", "none"],
-    description: "Agent integration to add"
+    description: "Agent integration to automatically forward selected elements to agent instead of copying to clipboard"
   }).option("yes", {
     alias: "y",
     type: "boolean",
     default: false,
-    description: "Skip all confirmation prompts"
+    description: "Skip all prompts and use auto-detected/default values"
   }).option("skip-install", {
     type: "boolean",
     default: false,
-    description: "Skip package installation (only modify files)"
-  }).help().alias("help", "h").version(VERSION).alias("version", "v").example("$0", "Run interactive setup").example("$0 -y", "Auto-detect and install without prompts").example("$0 -f next -r app -a cursor", "Install for Next.js App Router with Cursor agent").example("$0 -p pnpm -a claude-code -y", "Use pnpm and add Claude Code agent").parse();
+    description: "Only modify config files, skip npm/yarn/pnpm install"
+  }).help().alias("help", "h").version(VERSION).alias("version", "v").example("$0", "Run interactive setup with prompts").example("$0 -y", "Auto-detect everything and install without prompts").example("$0 -f next -r app", "Configure for Next.js App Router").example("$0 -a cursor -y", "Add Cursor agent integration non-interactively").example("$0 -p pnpm -a claude-code", "Use pnpm and add Claude Code agent").example("$0 --skip-install", "Only modify files, install packages manually").epilog(
+    `${pc__default.default.bold("Agent Integrations:")}
+  ${pc__default.default.cyan("claude-code")}  Connect React Grab to Claude Code
+  ${pc__default.default.cyan("cursor")}       Connect React Grab to Cursor IDE
+  ${pc__default.default.cyan("opencode")}     Connect React Grab to Opencode
+
+${pc__default.default.bold("Supported Frameworks:")}
+  ${pc__default.default.cyan("next")}     Next.js (App Router & Pages Router)
+  ${pc__default.default.cyan("vite")}     Vite-based React projects
+  ${pc__default.default.cyan("webpack")}  Webpack-based React projects
+
+${pc__default.default.bold("Documentation:")} ${pc__default.default.underline(DOCS_URL)}`
+  ).wrap(Math.min(100, process.stdout.columns || 80)).parse();
   return {
     framework: argv.framework,
     packageManager: argv["package-manager"],
@@ -769,6 +1007,20 @@ ${pc__default.default.magenta("\u269B")} ${pc__default.default.bold("React Grab"
     console.log(`- Agents:          ${pc__default.default.cyan(projectInfo.installedAgents.map((agent) => AGENT_NAMES[agent] || agent).join(", "))}`);
   }
   console.log("");
+  if (projectInfo.unsupportedFramework) {
+    const frameworkName = UNSUPPORTED_FRAMEWORK_NAMES[projectInfo.unsupportedFramework];
+    console.log(`${pc__default.default.yellow("\u26A0\uFE0F")} ${pc__default.default.yellow(`Detected ${frameworkName} - this framework requires manual setup.`)}`);
+    console.log(`${pc__default.default.yellow("   React Grab may not work correctly with auto-configuration.")}
+`);
+    showManualInstructions(projectInfo.framework, projectInfo.nextRouterType);
+    process.exit(0);
+  }
+  if (projectInfo.framework === "unknown") {
+    console.log(`${pc__default.default.yellow("\u26A0\uFE0F")} ${pc__default.default.yellow("Could not detect framework automatically.")}
+`);
+    showManualInstructions("unknown");
+    process.exit(0);
+  }
   let action = "install-all";
   if (projectInfo.hasReactGrab && !isNonInteractive) {
     action = await prompts.select({
@@ -781,6 +1033,11 @@ ${pc__default.default.magenta("\u269B")} ${pc__default.default.bold("React Grab"
     });
   } else if (projectInfo.hasReactGrab && args.agent && args.agent !== "none") {
     action = "add-agent";
+  } else if (projectInfo.hasReactGrab && isNonInteractive && !args.agent) {
+    console.log(`${pc__default.default.yellow("\u26A0\uFE0F")} ${pc__default.default.yellow("React Grab is already installed.")}`);
+    console.log(`${pc__default.default.yellow("   Use --agent to add an agent, or run without -y for interactive mode.")}
+`);
+    action = "reconfigure";
   }
   let finalFramework = args.framework || projectInfo.framework;
   let finalPackageManager = args.packageManager || projectInfo.packageManager;
@@ -864,25 +1121,46 @@ ${pc__default.default.magenta("\u269B")} Previewing changes...
       agentIntegration,
       projectInfo.hasReactGrab || action === "add-agent"
     );
+    const packageJsonResult = previewPackageJsonTransform(
+      projectInfo.projectRoot,
+      agentIntegration,
+      projectInfo.installedAgents
+    );
     if (!result.success) {
       console.error(`${pc__default.default.red("Error:")} ${result.message}`);
       showDocsLink();
       process.exit(1);
     }
-    if (result.noChanges) {
+    const hasLayoutChanges = !result.noChanges && result.originalContent && result.newContent;
+    const hasPackageJsonChanges = packageJsonResult.success && !packageJsonResult.noChanges && packageJsonResult.originalContent && packageJsonResult.newContent;
+    if (result.noChanges && packageJsonResult.noChanges) {
       console.log(`${pc__default.default.cyan("Info:")} ${result.message}`);
-    } else if (result.originalContent && result.newContent) {
-      printDiff(result.filePath, result.originalContent, result.newContent);
-      if (!isNonInteractive) {
-        const confirmChanges = await prompts.confirm({
-          message: "Apply these changes?",
-          default: true
-        });
-        if (!confirmChanges) {
-          console.log(`
+      if (packageJsonResult.message) {
+        console.log(`${pc__default.default.cyan("Info:")} ${packageJsonResult.message}`);
+      }
+    } else {
+      if (hasLayoutChanges) {
+        printDiff(result.filePath, result.originalContent, result.newContent);
+      }
+      if (hasPackageJsonChanges) {
+        if (hasLayoutChanges) {
+          console.log("");
+        }
+        printDiff(packageJsonResult.filePath, packageJsonResult.originalContent, packageJsonResult.newContent);
+      }
+      if (hasLayoutChanges || hasPackageJsonChanges) {
+        showAccuracyWarning();
+        if (!isNonInteractive) {
+          const confirmChanges = await prompts.confirm({
+            message: "Apply these changes?",
+            default: true
+          });
+          if (!confirmChanges) {
+            console.log(`
 ${pc__default.default.yellow("Changes cancelled.")}
 `);
-          process.exit(0);
+            process.exit(0);
+          }
         }
       }
       const shouldInstallReactGrab = action === "install-all" && !projectInfo.hasReactGrab;
@@ -906,9 +1184,27 @@ ${pc__default.default.red("Failed to install packages:")}`, error);
           }
         }
       }
-      applyTransform(result);
-      console.log(`
+      if (hasLayoutChanges) {
+        const writeResult = applyTransform(result);
+        if (!writeResult.success) {
+          console.error(`
+${pc__default.default.red("Error:")} ${writeResult.error}`);
+          showDocsLink();
+          process.exit(1);
+        }
+        console.log(`
 ${pc__default.default.green("Applied:")} ${result.filePath}`);
+      }
+      if (hasPackageJsonChanges) {
+        const packageJsonWriteResult = applyPackageJsonTransform(packageJsonResult);
+        if (!packageJsonWriteResult.success) {
+          console.error(`
+${pc__default.default.red("Error:")} ${packageJsonWriteResult.error}`);
+          showDocsLink();
+          process.exit(1);
+        }
+        console.log(`${pc__default.default.green("Applied:")} ${packageJsonResult.filePath}`);
+      }
     }
   }
   console.log(`
@@ -917,7 +1213,7 @@ ${pc__default.default.green("Done!")}`);
 Next steps:`);
   console.log(`  - Start your development server`);
   console.log(`  - Select an element to copy its context`);
-  console.log(`  - Learn more at ${pc__default.default.cyan("https://react-grab.com")}
+  console.log(`  - Learn more at ${pc__default.default.cyan(DOCS_URL)}
 `);
   if (agentIntegration !== "none") {
     console.log(`${pc__default.default.magenta("\u269B")} Agent: ${pc__default.default.cyan(AGENT_NAMES[agentIntegration])}`);

package/dist/cli.js

@@ -3,7 +3,7 @@ import { select, confirm } from '@inquirer/prompts';
 import pc from 'picocolors';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
-import { writeFileSync, existsSync, readFileSync } from 'fs';
+import { existsSync, readFileSync, writeFileSync, accessSync, constants } from 'fs';
 import { join } from 'path';
 import { detect } from '@antfu/ni';
 import { execSync } from 'child_process';
@@ -20,21 +20,25 @@ var detectFramework = (projectRoot) => {
   if (!existsSync(packageJsonPath)) {
     return "unknown";
   }
-  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";
+  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";
   }
-  return "unknown";
 };
 var detectNextRouterType = (projectRoot) => {
   const hasAppDir = existsSync(join(projectRoot, "app"));
@@ -58,9 +62,13 @@ var detectMonorepo = (projectRoot) => {
   }
   const packageJsonPath = join(projectRoot, "package.json");
   if (existsSync(packageJsonPath)) {
-    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-    if (packageJson.workspaces) {
-      return true;
+    try {
+      const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+      if (packageJson.workspaces) {
+        return true;
+      }
+    } catch {
+      return false;
     }
   }
   return false;
@@ -70,27 +78,63 @@ var detectReactGrab = (projectRoot) => {
   if (!existsSync(packageJsonPath)) {
     return false;
   }
-  const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-  const allDependencies = {
-    ...packageJson.dependencies,
-    ...packageJson.devDependencies
-  };
-  return Boolean(allDependencies["react-grab"]);
+  try {
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+    const allDependencies = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies
+    };
+    return Boolean(allDependencies["react-grab"]);
+  } catch {
+    return false;
+  }
 };
 var AGENT_PACKAGES = ["@react-grab/claude-code", "@react-grab/cursor", "@react-grab/opencode"];
+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 [];
   }
-  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/", "")
-  );
+  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);
@@ -102,7 +146,8 @@ var detectProject = async (projectRoot = process.cwd()) => {
     isMonorepo: detectMonorepo(projectRoot),
     projectRoot,
     hasReactGrab: detectReactGrab(projectRoot),
-    installedAgents: detectInstalledAgents(projectRoot)
+    installedAgents: detectInstalledAgents(projectRoot),
+    unsupportedFramework: detectUnsupportedFramework(projectRoot)
   };
 };
 
@@ -546,7 +591,7 @@ var transformNextPagesRouter = (projectRoot, agent, reactGrabAlreadyConfigured)
     return {
       success: false,
       filePath: "",
-      message: "Could not find pages/_document.tsx. Please create one or add React Grab manually."
+      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");
@@ -674,14 +719,134 @@ var previewTransform = (projectRoot, framework, nextRouterType, agent, reactGrab
       };
   }
 };
+var canWriteToFile = (filePath) => {
+  try {
+    accessSync(filePath, constants.W_OK);
+    return true;
+  } catch {
+    return false;
+  }
+};
 var applyTransform = (result) => {
   if (result.success && result.newContent && result.filePath) {
-    writeFileSync(result.filePath, result.newContent);
+    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 (error) {
+      return {
+        success: false,
+        error: `Failed to write to ${result.filePath}: ${error instanceof Error ? error.message : "Unknown error"}`
+      };
+    }
   }
+  return { success: true };
+};
+var AGENT_PREFIXES = {
+  "claude-code": "npx @react-grab/claude-code@latest &&",
+  cursor: "npx @react-grab/cursor@latest &&",
+  opencode: "npx @react-grab/opencode@latest &&"
+};
+var previewPackageJsonTransform = (projectRoot, agent, installedAgents) => {
+  if (agent === "none") {
+    return {
+      success: true,
+      filePath: "",
+      message: "No agent selected, skipping package.json modification",
+      noChanges: true
+    };
+  }
+  const packageJsonPath = join(projectRoot, "package.json");
+  if (!existsSync(packageJsonPath)) {
+    return {
+      success: false,
+      filePath: "",
+      message: "Could not find package.json"
+    };
+  }
+  const originalContent = readFileSync(packageJsonPath, "utf-8");
+  const agentPrefix = AGENT_PREFIXES[agent];
+  if (!agentPrefix) {
+    return {
+      success: false,
+      filePath: packageJsonPath,
+      message: `Unknown agent: ${agent}`
+    };
+  }
+  if (originalContent.includes(agentPrefix)) {
+    return {
+      success: true,
+      filePath: packageJsonPath,
+      message: `Agent ${agent} dev script is already configured`,
+      noChanges: true
+    };
+  }
+  try {
+    const packageJson = JSON.parse(originalContent);
+    if (!packageJson.scripts?.dev) {
+      return {
+        success: false,
+        filePath: packageJsonPath,
+        message: 'No "dev" script found in package.json'
+      };
+    }
+    const currentDevScript = packageJson.scripts.dev;
+    for (const installedAgent of installedAgents) {
+      const existingPrefix = AGENT_PREFIXES[installedAgent];
+      if (existingPrefix && currentDevScript.includes(existingPrefix)) {
+        return {
+          success: true,
+          filePath: packageJsonPath,
+          message: `Agent ${installedAgent} is already in dev script`,
+          noChanges: true
+        };
+      }
+    }
+    packageJson.scripts.dev = `${agentPrefix} ${currentDevScript}`;
+    const newContent = JSON.stringify(packageJson, null, 2) + "\n";
+    return {
+      success: true,
+      filePath: packageJsonPath,
+      message: `Add ${agent} server to dev script`,
+      originalContent,
+      newContent
+    };
+  } catch {
+    return {
+      success: false,
+      filePath: packageJsonPath,
+      message: "Failed to parse package.json"
+    };
+  }
+};
+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 (error) {
+      return {
+        success: false,
+        error: `Failed to write to ${result.filePath}: ${error instanceof Error ? error.message : "Unknown error"}`
+      };
+    }
+  }
+  return { success: true };
 };
 
 // src/cli.ts
-var VERSION = "0.0.1";
+var VERSION = "0.0.68";
 var FRAMEWORK_NAMES = {
   next: "Next.js",
   vite: "Vite",
@@ -699,43 +864,116 @@ var AGENT_NAMES = {
   cursor: "Cursor",
   opencode: "Opencode"
 };
-var DOCS_URL = "https://react-grab.com/docs";
+var UNSUPPORTED_FRAMEWORK_NAMES = {
+  remix: "Remix",
+  astro: "Astro",
+  sveltekit: "SvelteKit",
+  gatsby: "Gatsby"
+};
+var DOCS_URL = "https://github.com/aidenybai/react-grab";
 var showDocsLink = () => {
   console.log("\nFor manual installation instructions, visit:");
-  console.log(`  ${DOCS_URL}
+  console.log(`  ${pc.cyan(DOCS_URL)}
 `);
 };
+var showManualInstructions = (framework, nextRouterType) => {
+  console.log(`
+${pc.yellow("\u26A0\uFE0F")} ${pc.yellow("Manual Setup Instructions:")}
+`);
+  if (framework === "next" && nextRouterType === "app") {
+    console.log(`${pc.bold("Next.js App Router:")}`);
+    console.log(`  1. Install: ${pc.cyan("npm install -D react-grab")}`);
+    console.log(`  2. Add to ${pc.cyan("app/layout.tsx")}:`);
+    console.log(`     ${pc.gray('import Script from "next/script";')}`);
+    console.log(`     ${pc.gray("// Inside <head> or after <html>:")}`);
+    console.log(`     ${pc.gray('<Script src="//unpkg.com/react-grab/dist/index.global.js" strategy="beforeInteractive" />')}`);
+  } else if (framework === "next" && nextRouterType === "pages") {
+    console.log(`${pc.bold("Next.js Pages Router:")}`);
+    console.log(`  1. Install: ${pc.cyan("npm install -D react-grab")}`);
+    console.log(`  2. Create or edit ${pc.cyan("pages/_document.tsx")}:`);
+    console.log(`     ${pc.gray('import Script from "next/script";')}`);
+    console.log(`     ${pc.gray("// Inside <Head>:")}`);
+    console.log(`     ${pc.gray('<Script src="//unpkg.com/react-grab/dist/index.global.js" strategy="beforeInteractive" />')}`);
+  } else if (framework === "vite") {
+    console.log(`${pc.bold("Vite:")}`);
+    console.log(`  1. Install: ${pc.cyan("npm install -D react-grab")}`);
+    console.log(`  2. Add to ${pc.cyan("index.html")} inside <head>:`);
+    console.log(`     ${pc.gray('<script type="module">')}`);
+    console.log(`     ${pc.gray('  if (import.meta.env.DEV) { import("react-grab"); }')}`);
+    console.log(`     ${pc.gray("</script>")}`);
+  } else if (framework === "webpack") {
+    console.log(`${pc.bold("Webpack:")}`);
+    console.log(`  1. Install: ${pc.cyan("npm install -D react-grab")}`);
+    console.log(`  2. Add to your entry file (e.g., ${pc.cyan("src/index.tsx")}):`);
+    console.log(`     ${pc.gray('if (process.env.NODE_ENV === "development") {')}`);
+    console.log(`     ${pc.gray('  import("react-grab");')}`);
+    console.log(`     ${pc.gray("}")}`);
+  } else {
+    console.log(`${pc.bold("Generic Setup:")}`);
+    console.log(`  1. Install: ${pc.cyan("npm install -D react-grab")}`);
+    console.log(`  2. Add the script to your HTML or entry file.`);
+    console.log(`  3. See docs for framework-specific instructions.`);
+  }
+  showDocsLink();
+};
+var showAccuracyWarning = () => {
+  console.log(`
+${pc.yellow("\u26A0\uFE0F")} ${pc.yellow("Auto-detection may not be 100% accurate.")}`);
+  console.log(`${pc.yellow("   Please verify the changes in your file before committing.")}`);
+};
 var parseArgs = async () => {
-  const argv = await yargs(hideBin(process.argv)).usage("Usage: $0 [options]").option("framework", {
+  const argv = await yargs(hideBin(process.argv)).scriptName("react-grab").usage(
+    `${pc.magenta("\u269B")} ${pc.bold("React Grab CLI")} ${pc.gray(`v${VERSION}`)}
+
+${pc.cyan("Usage:")} $0 [options]
+
+React Grab adds AI-powered context selection to your React application,
+allowing you to select components and copy their context for AI assistants.
+
+The CLI auto-detects your project configuration (framework, package manager,
+router type) and installs React Grab with optional agent integrations.`
+  ).option("framework", {
     alias: "f",
     type: "string",
     choices: ["next", "vite", "webpack"],
-    description: "Framework to configure (next, vite, webpack)"
+    description: "Override detected framework"
   }).option("package-manager", {
     alias: "p",
     type: "string",
     choices: ["npm", "yarn", "pnpm", "bun"],
-    description: "Package manager to use"
+    description: "Override detected package manager"
   }).option("router", {
     alias: "r",
     type: "string",
     choices: ["app", "pages"],
-    description: "Next.js router type (app or pages)"
+    description: "Next.js router type (only for Next.js projects)"
   }).option("agent", {
     alias: "a",
     type: "string",
     choices: ["claude-code", "cursor", "opencode", "none"],
-    description: "Agent integration to add"
+    description: "Agent integration to automatically forward selected elements to agent instead of copying to clipboard"
   }).option("yes", {
     alias: "y",
     type: "boolean",
     default: false,
-    description: "Skip all confirmation prompts"
+    description: "Skip all prompts and use auto-detected/default values"
   }).option("skip-install", {
     type: "boolean",
     default: false,
-    description: "Skip package installation (only modify files)"
-  }).help().alias("help", "h").version(VERSION).alias("version", "v").example("$0", "Run interactive setup").example("$0 -y", "Auto-detect and install without prompts").example("$0 -f next -r app -a cursor", "Install for Next.js App Router with Cursor agent").example("$0 -p pnpm -a claude-code -y", "Use pnpm and add Claude Code agent").parse();
+    description: "Only modify config files, skip npm/yarn/pnpm install"
+  }).help().alias("help", "h").version(VERSION).alias("version", "v").example("$0", "Run interactive setup with prompts").example("$0 -y", "Auto-detect everything and install without prompts").example("$0 -f next -r app", "Configure for Next.js App Router").example("$0 -a cursor -y", "Add Cursor agent integration non-interactively").example("$0 -p pnpm -a claude-code", "Use pnpm and add Claude Code agent").example("$0 --skip-install", "Only modify files, install packages manually").epilog(
+    `${pc.bold("Agent Integrations:")}
+  ${pc.cyan("claude-code")}  Connect React Grab to Claude Code
+  ${pc.cyan("cursor")}       Connect React Grab to Cursor IDE
+  ${pc.cyan("opencode")}     Connect React Grab to Opencode
+
+${pc.bold("Supported Frameworks:")}
+  ${pc.cyan("next")}     Next.js (App Router & Pages Router)
+  ${pc.cyan("vite")}     Vite-based React projects
+  ${pc.cyan("webpack")}  Webpack-based React projects
+
+${pc.bold("Documentation:")} ${pc.underline(DOCS_URL)}`
+  ).wrap(Math.min(100, process.stdout.columns || 80)).parse();
   return {
     framework: argv.framework,
     packageManager: argv["package-manager"],
@@ -762,6 +1000,20 @@ ${pc.magenta("\u269B")} ${pc.bold("React Grab")} ${pc.gray(VERSION)}`);
     console.log(`- Agents:          ${pc.cyan(projectInfo.installedAgents.map((agent) => AGENT_NAMES[agent] || agent).join(", "))}`);
   }
   console.log("");
+  if (projectInfo.unsupportedFramework) {
+    const frameworkName = UNSUPPORTED_FRAMEWORK_NAMES[projectInfo.unsupportedFramework];
+    console.log(`${pc.yellow("\u26A0\uFE0F")} ${pc.yellow(`Detected ${frameworkName} - this framework requires manual setup.`)}`);
+    console.log(`${pc.yellow("   React Grab may not work correctly with auto-configuration.")}
+`);
+    showManualInstructions(projectInfo.framework, projectInfo.nextRouterType);
+    process.exit(0);
+  }
+  if (projectInfo.framework === "unknown") {
+    console.log(`${pc.yellow("\u26A0\uFE0F")} ${pc.yellow("Could not detect framework automatically.")}
+`);
+    showManualInstructions("unknown");
+    process.exit(0);
+  }
   let action = "install-all";
   if (projectInfo.hasReactGrab && !isNonInteractive) {
     action = await select({
@@ -774,6 +1026,11 @@ ${pc.magenta("\u269B")} ${pc.bold("React Grab")} ${pc.gray(VERSION)}`);
     });
   } else if (projectInfo.hasReactGrab && args.agent && args.agent !== "none") {
     action = "add-agent";
+  } else if (projectInfo.hasReactGrab && isNonInteractive && !args.agent) {
+    console.log(`${pc.yellow("\u26A0\uFE0F")} ${pc.yellow("React Grab is already installed.")}`);
+    console.log(`${pc.yellow("   Use --agent to add an agent, or run without -y for interactive mode.")}
+`);
+    action = "reconfigure";
   }
   let finalFramework = args.framework || projectInfo.framework;
   let finalPackageManager = args.packageManager || projectInfo.packageManager;
@@ -857,25 +1114,46 @@ ${pc.magenta("\u269B")} Previewing changes...
       agentIntegration,
       projectInfo.hasReactGrab || action === "add-agent"
     );
+    const packageJsonResult = previewPackageJsonTransform(
+      projectInfo.projectRoot,
+      agentIntegration,
+      projectInfo.installedAgents
+    );
     if (!result.success) {
       console.error(`${pc.red("Error:")} ${result.message}`);
       showDocsLink();
       process.exit(1);
     }
-    if (result.noChanges) {
+    const hasLayoutChanges = !result.noChanges && result.originalContent && result.newContent;
+    const hasPackageJsonChanges = packageJsonResult.success && !packageJsonResult.noChanges && packageJsonResult.originalContent && packageJsonResult.newContent;
+    if (result.noChanges && packageJsonResult.noChanges) {
       console.log(`${pc.cyan("Info:")} ${result.message}`);
-    } else if (result.originalContent && result.newContent) {
-      printDiff(result.filePath, result.originalContent, result.newContent);
-      if (!isNonInteractive) {
-        const confirmChanges = await confirm({
-          message: "Apply these changes?",
-          default: true
-        });
-        if (!confirmChanges) {
-          console.log(`
+      if (packageJsonResult.message) {
+        console.log(`${pc.cyan("Info:")} ${packageJsonResult.message}`);
+      }
+    } else {
+      if (hasLayoutChanges) {
+        printDiff(result.filePath, result.originalContent, result.newContent);
+      }
+      if (hasPackageJsonChanges) {
+        if (hasLayoutChanges) {
+          console.log("");
+        }
+        printDiff(packageJsonResult.filePath, packageJsonResult.originalContent, packageJsonResult.newContent);
+      }
+      if (hasLayoutChanges || hasPackageJsonChanges) {
+        showAccuracyWarning();
+        if (!isNonInteractive) {
+          const confirmChanges = await confirm({
+            message: "Apply these changes?",
+            default: true
+          });
+          if (!confirmChanges) {
+            console.log(`
 ${pc.yellow("Changes cancelled.")}
 `);
-          process.exit(0);
+            process.exit(0);
+          }
         }
       }
       const shouldInstallReactGrab = action === "install-all" && !projectInfo.hasReactGrab;
@@ -899,9 +1177,27 @@ ${pc.red("Failed to install packages:")}`, error);
           }
         }
       }
-      applyTransform(result);
-      console.log(`
+      if (hasLayoutChanges) {
+        const writeResult = applyTransform(result);
+        if (!writeResult.success) {
+          console.error(`
+${pc.red("Error:")} ${writeResult.error}`);
+          showDocsLink();
+          process.exit(1);
+        }
+        console.log(`
 ${pc.green("Applied:")} ${result.filePath}`);
+      }
+      if (hasPackageJsonChanges) {
+        const packageJsonWriteResult = applyPackageJsonTransform(packageJsonResult);
+        if (!packageJsonWriteResult.success) {
+          console.error(`
+${pc.red("Error:")} ${packageJsonWriteResult.error}`);
+          showDocsLink();
+          process.exit(1);
+        }
+        console.log(`${pc.green("Applied:")} ${packageJsonResult.filePath}`);
+      }
     }
   }
   console.log(`
@@ -910,7 +1206,7 @@ ${pc.green("Done!")}`);
 Next steps:`);
   console.log(`  - Start your development server`);
   console.log(`  - Select an element to copy its context`);
-  console.log(`  - Learn more at ${pc.cyan("https://react-grab.com")}
+  console.log(`  - Learn more at ${pc.cyan(DOCS_URL)}
 `);
   if (agentIntegration !== "none") {
     console.log(`${pc.magenta("\u269B")} Agent: ${pc.cyan(AGENT_NAMES[agentIntegration])}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-grab/cli",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "type": "module",
   "bin": {
     "react-grab": "./dist/cli.js"