@react-grab/cli 0.0.72 → 0.0.73

package/dist/cli.js

@@ -1,12 +1,12 @@
 #!/usr/bin/env node
-import { select, confirm } from '@inquirer/prompts';
-import pc from 'picocolors';
-import yargs from 'yargs';
-import { hideBin } from 'yargs/helpers';
-import { readFileSync, existsSync, writeFileSync, readdirSync, accessSync, constants } from 'fs';
+import { Command } from 'commander';
+import prompts2 from 'prompts';
+import { execSync } from 'child_process';
+import { existsSync, readFileSync, writeFileSync, accessSync, constants, readdirSync } from 'fs';
 import { join, basename } from 'path';
 import { detect } from '@antfu/ni';
-import { execSync } from 'child_process';
+import { cyan, dim, green, yellow, red } from 'kleur/colors';
+import ora from 'ora';
 
 var detectPackageManager = async (projectRoot) => {
   const detected = await detect({ cwd: projectRoot });
@@ -294,7 +294,7 @@ var detectProject = async (projectRoot = process.cwd()) => {
   };
 };
 
-// src/diff.ts
+// src/utils/diff.ts
 var RED = "\x1B[31m";
 var GREEN = "\x1B[32m";
 var GRAY = "\x1B[90m";
@@ -381,6 +381,50 @@ ${BOLD}File: ${filePath}${RESET}`);
   console.log(formatDiff(diff));
   console.log("\u2500".repeat(60));
 };
+var highlighter = {
+  error: red,
+  warn: yellow,
+  info: cyan,
+  success: green,
+  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(" ")));
+  },
+  log(...args) {
+    console.log(args.join(" "));
+  },
+  break() {
+    console.log("");
+  }
+};
+
+// src/utils/handle-error.ts
+var handleError = (error) => {
+  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 (error instanceof Error) {
+    logger.error(error.message);
+  }
+  logger.break();
+  process.exit(1);
+};
 var INSTALL_COMMANDS = {
   npm: "npm install",
   yarn: "yarn add",
@@ -411,8 +455,9 @@ var getPackagesToInstall = (agent, includeReactGrab = true) => {
   }
   return packages;
 };
+var spinner = (text, options) => ora({ text, isSilent: options?.silent, stream: process.stdout });
 
-// src/templates.ts
+// src/utils/templates.ts
 var NEXT_APP_ROUTER_SCRIPT = `{process.env.NODE_ENV === "development" && (
           <Script
             src="//unpkg.com/react-grab/dist/index.global.js"
@@ -485,7 +530,7 @@ var WEBPACK_IMPORT_WITH_AGENT = (agent) => {
 };
 var SCRIPT_IMPORT = 'import Script from "next/script";';
 
-// src/transform.ts
+// src/utils/transform.ts
 var hasReactGrabCode = (content) => {
   const fuzzyPatterns = [
     /["'`][^"'`]*react-grab/,
@@ -641,11 +686,13 @@ var addAgentToExistingVite = (originalContent, agent, filePath) => {
     };
   }
   const agentImport = `import("${agentPackage}/client");`;
-  const reactGrabImportMatch = originalContent.match(/import\s*\(\s*["']react-grab["']\s*\)/);
+  const reactGrabImportMatch = originalContent.match(/import\s*\(\s*["']react-grab["']\s*\);?/);
   if (reactGrabImportMatch) {
+    const matchedText = reactGrabImportMatch[0];
+    const hasSemicolon = matchedText.endsWith(";");
     const newContent = originalContent.replace(
-      reactGrabImportMatch[0],
-      `${reactGrabImportMatch[0]};
+      matchedText,
+      `${hasSemicolon ? matchedText.slice(0, -1) : matchedText};
         ${agentImport}`
     );
     return {
@@ -681,11 +728,13 @@ var addAgentToExistingWebpack = (originalContent, agent, filePath) => {
     };
   }
   const agentImport = `import("${agentPackage}/client");`;
-  const reactGrabImportMatch = originalContent.match(/import\s*\(\s*["']react-grab["']\s*\)/);
+  const reactGrabImportMatch = originalContent.match(/import\s*\(\s*["']react-grab["']\s*\);?/);
   if (reactGrabImportMatch) {
+    const matchedText = reactGrabImportMatch[0];
+    const hasSemicolon = matchedText.endsWith(";");
     const newContent = originalContent.replace(
-      reactGrabImportMatch[0],
-      `${reactGrabImportMatch[0]};
+      matchedText,
+      `${hasSemicolon ? matchedText.slice(0, -1) : matchedText};
   ${agentImport}`
     );
     return {
@@ -1023,9 +1072,187 @@ var applyPackageJsonTransform = (result) => {
   return { success: true };
 };
 
-// src/cli.ts
-var VERSION = "0.0.72";
-var REPORT_URL = "https://reactgrab.com/api/report-cli";
+// src/commands/add.ts
+var AGENT_NAMES = {
+  "claude-code": "Claude Code",
+  cursor: "Cursor",
+  opencode: "Opencode"
+};
+var add = new Command().name("add").description("add an agent integration").argument("[agent]", "agent to add (claude-code, cursor, opencode)").option("-y, --yes", "skip confirmation prompts", false).option(
+  "-c, --cwd <cwd>",
+  "working directory (defaults to current directory)",
+  process.cwd()
+).action(async (agentArg, opts) => {
+  try {
+    const cwd = opts.cwd;
+    const isNonInteractive = opts.yes;
+    logger.log(`\u269B ${highlighter.info("React Grab")}`);
+    logger.break();
+    const preflightSpinner = spinner("Preflight checks.").start();
+    const projectInfo = await detectProject(cwd);
+    if (!projectInfo.hasReactGrab) {
+      preflightSpinner.fail("React Grab is not installed.");
+      logger.break();
+      logger.error(
+        `Run ${highlighter.info("react-grab init")} first to install React Grab.`
+      );
+      logger.break();
+      process.exit(1);
+    }
+    preflightSpinner.succeed();
+    const availableAgents = ["claude-code", "cursor", "opencode"].filter((agent) => !projectInfo.installedAgents.includes(agent));
+    if (availableAgents.length === 0) {
+      logger.break();
+      logger.success("All agent integrations are already installed.");
+      logger.break();
+      process.exit(0);
+    }
+    let agentIntegration;
+    if (agentArg) {
+      if (!["claude-code", "cursor", "opencode"].includes(agentArg)) {
+        logger.break();
+        logger.error(`Invalid agent: ${agentArg}`);
+        logger.error("Available agents: claude-code, cursor, opencode");
+        logger.break();
+        process.exit(1);
+      }
+      if (projectInfo.installedAgents.includes(agentArg)) {
+        logger.break();
+        logger.warn(`${AGENT_NAMES[agentArg]} is already installed.`);
+        logger.break();
+        process.exit(0);
+      }
+      agentIntegration = agentArg;
+    } else if (!isNonInteractive) {
+      logger.break();
+      const { agent } = await prompts2({
+        type: "select",
+        name: "agent",
+        message: `Which ${highlighter.info("agent integration")} would you like to add?`,
+        choices: availableAgents.map((innerAgent) => ({
+          title: AGENT_NAMES[innerAgent],
+          value: innerAgent
+        }))
+      });
+      if (!agent) {
+        logger.break();
+        process.exit(1);
+      }
+      agentIntegration = agent;
+    } else {
+      logger.break();
+      logger.error("Please specify an agent to add.");
+      logger.error("Available agents: " + availableAgents.join(", "));
+      logger.break();
+      process.exit(1);
+    }
+    const addingSpinner = spinner(
+      `Adding ${AGENT_NAMES[agentIntegration]}.`
+    ).start();
+    addingSpinner.succeed();
+    const result = previewTransform(
+      projectInfo.projectRoot,
+      projectInfo.framework,
+      projectInfo.nextRouterType,
+      agentIntegration,
+      true
+    );
+    const packageJsonResult = previewPackageJsonTransform(
+      projectInfo.projectRoot,
+      agentIntegration,
+      projectInfo.installedAgents
+    );
+    if (!result.success) {
+      logger.break();
+      logger.error(result.message);
+      logger.break();
+      process.exit(1);
+    }
+    const hasLayoutChanges = !result.noChanges && result.originalContent && result.newContent;
+    const hasPackageJsonChanges = packageJsonResult.success && !packageJsonResult.noChanges && packageJsonResult.originalContent && packageJsonResult.newContent;
+    if (hasLayoutChanges || hasPackageJsonChanges) {
+      logger.break();
+      if (hasLayoutChanges) {
+        printDiff(result.filePath, result.originalContent, result.newContent);
+      }
+      if (hasPackageJsonChanges) {
+        if (hasLayoutChanges) {
+          logger.break();
+        }
+        printDiff(
+          packageJsonResult.filePath,
+          packageJsonResult.originalContent,
+          packageJsonResult.newContent
+        );
+      }
+      if (!isNonInteractive) {
+        logger.break();
+        const { proceed } = await prompts2({
+          type: "confirm",
+          name: "proceed",
+          message: "Apply these changes?",
+          initial: true
+        });
+        if (!proceed) {
+          logger.break();
+          logger.log("Changes cancelled.");
+          logger.break();
+          process.exit(0);
+        }
+      }
+    }
+    const packages = getPackagesToInstall(agentIntegration, false);
+    if (packages.length > 0) {
+      const installSpinner = spinner(
+        `Installing ${packages.join(", ")}.`
+      ).start();
+      try {
+        installPackages(packages, projectInfo.packageManager, projectInfo.projectRoot);
+        installSpinner.succeed();
+      } catch (error) {
+        installSpinner.fail();
+        handleError(error);
+      }
+    }
+    if (hasLayoutChanges) {
+      const writeSpinner = spinner(`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();
+    }
+    if (hasPackageJsonChanges) {
+      const packageJsonSpinner = spinner(
+        `Applying changes to ${packageJsonResult.filePath}.`
+      ).start();
+      const packageJsonWriteResult = applyPackageJsonTransform(packageJsonResult);
+      if (!packageJsonWriteResult.success) {
+        packageJsonSpinner.fail();
+        logger.break();
+        logger.error(packageJsonWriteResult.error || "Failed to write file.");
+        logger.break();
+        process.exit(1);
+      }
+      packageJsonSpinner.succeed();
+    }
+    logger.break();
+    logger.log(
+      `${highlighter.success("Success!")} ${AGENT_NAMES[agentIntegration]} has been added.`
+    );
+    logger.log("Make sure to start the agent server before using it.");
+    logger.break();
+  } catch (error) {
+    handleError(error);
+  }
+});
+var VERSION = "0.0.73";
+var REPORT_URL = "https://react-grab.com/api/report-cli";
+var DOCS_URL = "https://github.com/aidenybai/react-grab";
 var reportToCli = async (type, config, error) => {
   try {
     await fetch(REPORT_URL, {
@@ -1055,416 +1282,144 @@ var PACKAGE_MANAGER_NAMES = {
   pnpm: "pnpm",
   bun: "Bun"
 };
-var AGENT_NAMES = {
-  "claude-code": "Claude Code",
-  cursor: "Cursor",
-  opencode: "Opencode"
-};
 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(`  ${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")} inside <head>:`);
-    console.log(`     ${pc.gray('import Script from "next/script";')}`);
-    console.log(
-      `     ${pc.gray('{process.env.NODE_ENV === "development" && (')}`
-    );
-    console.log(`     ${pc.gray("  <Script")}`);
-    console.log(
-      `     ${pc.gray('    src="//unpkg.com/react-grab/dist/index.global.js"')}`
-    );
-    console.log(`     ${pc.gray('    crossOrigin="anonymous"')}`);
-    console.log(`     ${pc.gray('    strategy="beforeInteractive"')}`);
-    console.log(`     ${pc.gray("  />")}`);
-    console.log(`     ${pc.gray(")}")}`);
-  } 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. Add to ${pc.cyan("pages/_document.tsx")} inside <Head>:`);
-    console.log(`     ${pc.gray('import Script from "next/script";')}`);
-    console.log(
-      `     ${pc.gray('{process.env.NODE_ENV === "development" && (')}`
-    );
-    console.log(`     ${pc.gray("  <Script")}`);
-    console.log(
-      `     ${pc.gray('    src="//unpkg.com/react-grab/dist/index.global.js"')}`
-    );
-    console.log(`     ${pc.gray('    crossOrigin="anonymous"')}`);
-    console.log(`     ${pc.gray('    strategy="beforeInteractive"')}`);
-    console.log(`     ${pc.gray("  />")}`);
-    console.log(`     ${pc.gray(")}")}`);
-  } 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("Next.js App Router:")} Add to ${pc.cyan("app/layout.tsx")} inside <head>:`
-    );
-    console.log(`     ${pc.gray('import Script from "next/script";')}`);
-    console.log(
-      `     ${pc.gray('{process.env.NODE_ENV === "development" && (')}`
-    );
-    console.log(
-      `     ${pc.gray('  <Script src="//unpkg.com/react-grab/dist/index.global.js" strategy="beforeInteractive" />')}`
-    );
-    console.log(`     ${pc.gray(")}")}`);
-    console.log("");
-    console.log(
-      `${pc.bold("Next.js Pages Router:")} Add to ${pc.cyan("pages/_document.tsx")} inside <Head>:`
-    );
-    console.log(`     ${pc.gray('import Script from "next/script";')}`);
-    console.log(
-      `     ${pc.gray('{process.env.NODE_ENV === "development" && (')}`
-    );
-    console.log(
-      `     ${pc.gray('  <Script src="//unpkg.com/react-grab/dist/index.global.js" strategy="beforeInteractive" />')}`
-    );
-    console.log(`     ${pc.gray(")}")}`);
-    console.log("");
-    console.log(
-      `${pc.bold("Vite:")} 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>")}`);
-    console.log("");
-    console.log(
-      `${pc.bold("Webpack:")} Add to 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("}")}`);
-    console.log("");
-    console.log(`For full instructions, visit:`);
-    console.log(
-      `  ${pc.cyan("https://github.com/aidenybai/react-grab#readme")}`
-    );
-    return;
-  }
-  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)).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: "Override detected framework"
-  }).option("package-manager", {
-    alias: "p",
-    type: "string",
-    choices: ["npm", "yarn", "pnpm", "bun"],
-    description: "Override detected package manager"
-  }).option("router", {
-    alias: "r",
-    type: "string",
-    choices: ["app", "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 automatically forward selected elements to agent instead of copying to clipboard"
-  }).option("yes", {
-    alias: "y",
-    type: "boolean",
-    default: false,
-    description: "Skip all prompts and use auto-detected/default values"
-  }).option("skip-install", {
-    type: "boolean",
-    default: false,
-    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"],
-    router: argv.router,
-    agent: argv.agent,
-    yes: argv.yes,
-    skipInstall: argv["skip-install"]
-  };
-};
-var main = async () => {
-  const args = await parseArgs();
-  const isNonInteractive = args.yes;
-  console.log(
-    `
-${pc.magenta("\u269B")} ${pc.bold("React Grab")} ${pc.gray(VERSION)}`
-  );
-  const projectInfo = await detectProject(process.cwd());
-  console.log(
-    `- Framework:       ${pc.cyan(FRAMEWORK_NAMES[projectInfo.framework])}`
-  );
-  console.log(
-    `- Package Manager: ${pc.cyan(PACKAGE_MANAGER_NAMES[projectInfo.packageManager])}`
-  );
-  if (projectInfo.framework === "next") {
-    console.log(
-      `- Router Type:     ${pc.cyan(projectInfo.nextRouterType === "app" ? "App Router" : "Pages Router")}`
-    );
-  }
-  console.log(
-    `- Monorepo:        ${pc.cyan(projectInfo.isMonorepo ? "Yes" : "No")}`
-  );
-  console.log(
-    `- React Grab:      ${projectInfo.hasReactGrab ? pc.green("Installed") : pc.yellow("Not installed")}`
-  );
-  if (projectInfo.installedAgents.length > 0) {
-    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") {
-    if (projectInfo.isMonorepo && !isNonInteractive) {
-      const workspaceProjects = findWorkspaceProjects(projectInfo.projectRoot);
-      const reactProjects = workspaceProjects.filter(
-        (p) => p.hasReact || p.framework !== "unknown"
+var init = new Command().name("init").description("initialize React Grab in your project").option("-y, --yes", "skip confirmation prompts", false).option("-f, --force", "force overwrite existing config", false).option(
+  "-a, --agent <agent>",
+  "agent integration (claude-code, cursor, opencode)"
+).option("--skip-install", "skip package installation", false).option(
+  "-c, --cwd <cwd>",
+  "working directory (defaults to current directory)",
+  process.cwd()
+).action(async (opts) => {
+  try {
+    const cwd = opts.cwd;
+    const isNonInteractive = opts.yes;
+    logger.log(`\u269B ${highlighter.info("React Grab")}`);
+    logger.break();
+    const preflightSpinner = spinner("Preflight checks.").start();
+    const projectInfo = await detectProject(cwd);
+    if (projectInfo.hasReactGrab && !opts.force) {
+      preflightSpinner.succeed();
+      logger.break();
+      logger.warn("React Grab is already installed.");
+      logger.log(
+        `Use ${highlighter.info("--force")} to reconfigure, or ${highlighter.info("react-grab add")} to add an agent.`
       );
-      if (reactProjects.length > 0) {
-        console.log(
-          `${pc.cyan("\u2139")} ${pc.cyan("Found React projects in this monorepo:")}
-`
-        );
-        const selectedProject = await select({
-          message: "Select a project to install React Grab:",
-          choices: reactProjects.map((project) => ({
-            name: `${project.name} ${pc.gray(`(${FRAMEWORK_NAMES[project.framework] || "React"})`)}`,
-            value: project.path
-          }))
-        });
-        console.log(
-          `
-${pc.magenta("\u269B")} Switching to ${pc.cyan(selectedProject)}...
-`
-        );
-        process.chdir(selectedProject);
-        const newProjectInfo = await detectProject(selectedProject);
-        projectInfo.framework = newProjectInfo.framework;
-        projectInfo.nextRouterType = newProjectInfo.nextRouterType;
-        projectInfo.hasReactGrab = newProjectInfo.hasReactGrab;
-        projectInfo.installedAgents = newProjectInfo.installedAgents;
-        projectInfo.projectRoot = newProjectInfo.projectRoot;
-        console.log(
-          `- Framework:       ${pc.cyan(FRAMEWORK_NAMES[newProjectInfo.framework])}`
+      logger.break();
+      process.exit(0);
+    }
+    preflightSpinner.succeed();
+    const frameworkSpinner = spinner("Verifying framework.").start();
+    if (projectInfo.unsupportedFramework) {
+      const frameworkName = UNSUPPORTED_FRAMEWORK_NAMES[projectInfo.unsupportedFramework];
+      frameworkSpinner.fail(`Found ${highlighter.info(frameworkName)}.`);
+      logger.break();
+      logger.log(`${frameworkName} is not yet supported by automatic setup.`);
+      logger.log(`Visit ${highlighter.info(DOCS_URL)} for manual setup.`);
+      logger.break();
+      process.exit(1);
+    }
+    if (projectInfo.framework === "unknown") {
+      if (projectInfo.isMonorepo && !isNonInteractive) {
+        frameworkSpinner.info("Verifying framework. Found monorepo.");
+        const workspaceProjects = findWorkspaceProjects(projectInfo.projectRoot);
+        const reactProjects = workspaceProjects.filter(
+          (project) => project.hasReact || project.framework !== "unknown"
         );
-        if (newProjectInfo.framework === "next") {
-          console.log(
-            `- Router Type:     ${pc.cyan(newProjectInfo.nextRouterType === "app" ? "App Router" : "Pages Router")}`
+        if (reactProjects.length > 0) {
+          logger.break();
+          const sortedProjects = [...reactProjects].sort((projectA, projectB) => {
+            if (projectA.framework === "unknown" && projectB.framework !== "unknown") return 1;
+            if (projectA.framework !== "unknown" && projectB.framework === "unknown") return -1;
+            return 0;
+          });
+          const { selectedProject } = await prompts2({
+            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
+              };
+            })
+          });
+          if (!selectedProject) {
+            logger.break();
+            process.exit(1);
+          }
+          process.chdir(selectedProject);
+          const newProjectInfo = await detectProject(selectedProject);
+          Object.assign(projectInfo, newProjectInfo);
+          const newFrameworkSpinner = spinner("Verifying framework.").start();
+          newFrameworkSpinner.succeed(
+            `Verifying framework. Found ${highlighter.info(FRAMEWORK_NAMES[newProjectInfo.framework])}.`
           );
+        } else {
+          frameworkSpinner.fail("Could not detect a supported framework.");
+          logger.break();
+          logger.log(`Visit ${highlighter.info(DOCS_URL)} for manual setup.`);
+          logger.break();
+          process.exit(1);
         }
-        console.log(
-          `- React Grab:      ${newProjectInfo.hasReactGrab ? pc.green("Installed") : pc.yellow("Not installed")}`
-        );
-        console.log("");
       } else {
-        console.log(
-          `${pc.yellow("\u26A0\uFE0F")} ${pc.yellow("Could not detect framework automatically.")}
-`
-        );
-        showManualInstructions("unknown");
-        process.exit(0);
+        frameworkSpinner.fail("Could not detect a supported framework.");
+        logger.break();
+        logger.log("React Grab supports Next.js, Vite, and Webpack projects.");
+        logger.log(`Visit ${highlighter.info(DOCS_URL)} for manual setup.`);
+        logger.break();
+        process.exit(1);
       }
     } else {
-      console.log(
-        `${pc.yellow("\u26A0\uFE0F")} ${pc.yellow("Could not detect framework automatically.")}
-`
+      frameworkSpinner.succeed(
+        `Verifying framework. Found ${highlighter.info(FRAMEWORK_NAMES[projectInfo.framework])}.`
       );
-      showManualInstructions("unknown");
-      process.exit(0);
     }
-  }
-  let action = "install-all";
-  if (projectInfo.hasReactGrab && !isNonInteractive) {
-    action = await select({
-      message: "React Grab is already installed. What would you like to do?",
-      choices: [
-        { name: "Add an agent integration", value: "add-agent" },
-        { name: "Reconfigure project files", value: "reconfigure" },
-        { name: "Reinstall everything", value: "install-all" }
-      ]
-    });
-  } 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.")}
-`
+    if (projectInfo.framework === "next") {
+      const routerSpinner = spinner("Detecting router type.").start();
+      routerSpinner.succeed(
+        `Detecting router type. Found ${highlighter.info(projectInfo.nextRouterType === "app" ? "App Router" : "Pages Router")}.`
+      );
+    }
+    const packageManagerSpinner = spinner("Detecting package manager.").start();
+    packageManagerSpinner.succeed(
+      `Detecting package manager. Found ${highlighter.info(PACKAGE_MANAGER_NAMES[projectInfo.packageManager])}.`
     );
-    action = "reconfigure";
-  }
-  let finalFramework = args.framework || projectInfo.framework;
-  let finalPackageManager = args.packageManager || projectInfo.packageManager;
-  let finalNextRouterType = args.router || projectInfo.nextRouterType;
-  if (!isNonInteractive && !args.framework) {
-    const confirmSettings = await confirm({
-      message: "Are these settings correct?",
-      default: true
-    });
-    if (!confirmSettings) {
-      finalFramework = await select({
-        message: "Select your framework:",
-        choices: [
-          { name: "Next.js", value: "next" },
-          { name: "Vite", value: "vite" },
-          { name: "Webpack", value: "webpack" }
-        ],
-        default: projectInfo.framework
-      });
-      finalPackageManager = await select({
-        message: "Select your package manager:",
+    let finalFramework = projectInfo.framework;
+    let finalPackageManager = projectInfo.packageManager;
+    let finalNextRouterType = projectInfo.nextRouterType;
+    let agentIntegration = opts.agent || "none";
+    if (!isNonInteractive && !opts.agent) {
+      logger.break();
+      const { agent } = await prompts2({
+        type: "select",
+        name: "agent",
+        message: `Would you like to add an ${highlighter.info("agent integration")}?`,
         choices: [
-          { name: "npm", value: "npm" },
-          { name: "Yarn", value: "yarn" },
-          { name: "pnpm", value: "pnpm" },
-          { name: "Bun", value: "bun" }
-        ],
-        default: projectInfo.packageManager
+          { title: "None", value: "none" },
+          { title: "Claude Code", value: "claude-code" },
+          { title: "Cursor", value: "cursor" },
+          { title: "Opencode", value: "opencode" }
+        ]
       });
-      if (finalFramework === "next") {
-        finalNextRouterType = await select({
-          message: "Select your Next.js router type:",
-          choices: [
-            { name: "App Router", value: "app" },
-            { name: "Pages Router", value: "pages" }
-          ],
-          default: projectInfo.nextRouterType === "app" ? "app" : "pages"
-        });
+      if (agent === void 0) {
+        logger.break();
+        process.exit(1);
       }
+      agentIntegration = agent;
     }
-  }
-  let agentIntegration = args.agent || "none";
-  const shouldAskForAgent = (action === "install-all" || action === "add-agent") && !args.agent;
-  if (shouldAskForAgent && !isNonInteractive) {
-    const availableAgents = [
-      { name: "Claude Code", value: "claude-code" },
-      { name: "Cursor", value: "cursor" },
-      { name: "Opencode", value: "opencode" }
-    ].filter((agent) => !projectInfo.installedAgents.includes(agent.value));
-    if (availableAgents.length === 0) {
-      console.log(
-        `
-${pc.green("All agent integrations are already installed.")}
-`
-      );
-    } else if (action === "add-agent") {
-      agentIntegration = await select({
-        message: "Select an agent integration to add:",
-        choices: availableAgents
-      });
-    } else {
-      const wantAgentIntegration = await confirm({
-        message: "Do you want to add an agent integration (Claude Code, Cursor, or Opencode)?",
-        default: false
-      });
-      if (wantAgentIntegration) {
-        agentIntegration = await select({
-          message: "Select an agent integration:",
-          choices: availableAgents
-        });
-      }
-    }
-  }
-  const shouldTransform = action === "reconfigure" || action === "install-all" || action === "add-agent" && agentIntegration !== "none";
-  if (shouldTransform) {
-    console.log(`
-${pc.magenta("\u269B")} Previewing changes...
-`);
     const result = previewTransform(
       projectInfo.projectRoot,
       finalFramework,
       finalNextRouterType,
       agentIntegration,
-      projectInfo.hasReactGrab || action === "add-agent"
+      false
     );
     const packageJsonResult = previewPackageJsonTransform(
       projectInfo.projectRoot,
@@ -1472,24 +1427,22 @@ ${pc.magenta("\u269B")} Previewing changes...
       projectInfo.installedAgents
     );
     if (!result.success) {
-      console.error(`${pc.red("Error:")} ${result.message}`);
-      showDocsLink();
+      logger.break();
+      logger.error(result.message);
+      logger.error(`Visit ${highlighter.info(DOCS_URL)} for manual setup.`);
+      logger.break();
       process.exit(1);
     }
     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}`);
-      if (packageJsonResult.message) {
-        console.log(`${pc.cyan("Info:")} ${packageJsonResult.message}`);
-      }
-    } else {
+    if (hasLayoutChanges || hasPackageJsonChanges) {
+      logger.break();
       if (hasLayoutChanges) {
         printDiff(result.filePath, result.originalContent, result.newContent);
       }
       if (hasPackageJsonChanges) {
         if (hasLayoutChanges) {
-          console.log("");
+          logger.break();
         }
         printDiff(
           packageJsonResult.filePath,
@@ -1497,104 +1450,92 @@ ${pc.magenta("\u269B")} Previewing changes...
           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);
-          }
+      logger.break();
+      logger.warn("Auto-detection may not be 100% accurate.");
+      logger.warn("Please verify the changes before committing.");
+      if (!isNonInteractive) {
+        logger.break();
+        const { proceed } = await prompts2({
+          type: "confirm",
+          name: "proceed",
+          message: "Apply these changes?",
+          initial: true
+        });
+        if (!proceed) {
+          logger.break();
+          logger.log("Changes cancelled.");
+          logger.break();
+          process.exit(0);
         }
       }
-      const shouldInstallReactGrab = (action === "install-all" || action === "add-agent") && !projectInfo.hasReactGrab;
-      const shouldInstallAgent = agentIntegration !== "none" && !projectInfo.installedAgents.includes(agentIntegration);
-      if (!args.skipInstall && (shouldInstallReactGrab || shouldInstallAgent)) {
-        const packages = getPackagesToInstall(
-          agentIntegration,
-          shouldInstallReactGrab
-        );
-        if (packages.length > 0) {
-          console.log(
-            `
-${pc.magenta("\u269B")} Installing: ${pc.cyan(packages.join(", "))}
-`
-          );
-          try {
-            installPackages(
-              packages,
-              finalPackageManager,
-              projectInfo.projectRoot
-            );
-            console.log(`
-${pc.green("Packages installed successfully!")}
-`);
-          } catch (error) {
-            console.error(`
-${pc.red("Failed to install packages:")}`, error);
-            showDocsLink();
-            process.exit(1);
-          }
+    }
+    const shouldInstallReactGrab = !projectInfo.hasReactGrab;
+    const shouldInstallAgent = agentIntegration !== "none" && !projectInfo.installedAgents.includes(agentIntegration);
+    if (!opts.skipInstall && (shouldInstallReactGrab || shouldInstallAgent)) {
+      const packages = getPackagesToInstall(agentIntegration, shouldInstallReactGrab);
+      if (packages.length > 0) {
+        const installSpinner = spinner(
+          `Installing ${packages.join(", ")}.`
+        ).start();
+        try {
+          installPackages(packages, finalPackageManager, projectInfo.projectRoot);
+          installSpinner.succeed();
+        } catch (error) {
+          installSpinner.fail();
+          handleError(error);
         }
       }
-      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 (hasLayoutChanges) {
+      const writeSpinner = spinner(`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 (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}`);
+      writeSpinner.succeed();
+    }
+    if (hasPackageJsonChanges) {
+      const packageJsonSpinner = spinner(
+        `Applying changes to ${packageJsonResult.filePath}.`
+      ).start();
+      const packageJsonWriteResult = applyPackageJsonTransform(packageJsonResult);
+      if (!packageJsonWriteResult.success) {
+        packageJsonSpinner.fail();
+        logger.break();
+        logger.error(packageJsonWriteResult.error || "Failed to write file.");
+        logger.break();
+        process.exit(1);
       }
+      packageJsonSpinner.succeed();
     }
-  }
-  console.log(`
-${pc.green("Done!")}`);
-  console.log(`
-Next steps:`);
-  console.log(`- Start your development server`);
-  console.log(`- Select an element to copy its context`);
-  console.log(`- Learn more at ${pc.cyan(DOCS_URL)}
-`);
-  if (agentIntegration !== "none") {
-    console.log(
-      `${pc.magenta("\u269B")} Agent: ${pc.cyan(AGENT_NAMES[agentIntegration])}`
+    logger.break();
+    logger.log(
+      `${highlighter.success("Success!")} React Grab has been installed.`
     );
-    console.log(`  Make sure to start the agent server before using it.
-`);
+    logger.log("You may now start your development server.");
+    logger.break();
+    await reportToCli("completed", {
+      framework: finalFramework,
+      packageManager: finalPackageManager,
+      router: finalNextRouterType,
+      agent: agentIntegration !== "none" ? agentIntegration : void 0,
+      isMonorepo: projectInfo.isMonorepo
+    });
+  } catch (error) {
+    handleError(error);
+    await reportToCli("error", void 0, error);
   }
-  await reportToCli("completed", {
-    framework: finalFramework,
-    packageManager: finalPackageManager,
-    router: finalNextRouterType,
-    agent: agentIntegration !== "none" ? agentIntegration : void 0,
-    isMonorepo: projectInfo.isMonorepo
-  });
-};
-main().catch(async (error) => {
-  console.error(`${pc.red("Error:")}`, error);
-  console.log("\nFor manual installation instructions, visit:");
-  console.log(`  ${DOCS_URL}
-`);
-  await reportToCli("error", void 0, error);
-  process.exit(1);
 });
+
+// src/cli.ts
+var VERSION2 = "0.0.73";
+process.on("SIGINT", () => process.exit(0));
+process.on("SIGTERM", () => process.exit(0));
+var program = new Command().name("react-grab").description("add React Grab to your project").version(VERSION2, "-v, --version", "display the version number");
+program.addCommand(init);
+program.addCommand(add);
+program.parse();