@react-grab/cli 0.1.0-beta.10 → 0.1.0-beta.11

package/dist/cli.cjs

@@ -2,7 +2,7 @@
 'use strict';
 
 var commander = require('commander');
-var pc = require('picocolors');
+var pc2 = require('picocolors');
 var prompts3 = require('prompts');
 var fs = require('fs');
 var path = require('path');
@@ -18,7 +18,7 @@ var stdio_js = require('@modelcontextprotocol/sdk/server/stdio.js');
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var pc__default = /*#__PURE__*/_interopDefault(pc);
+var pc2__default = /*#__PURE__*/_interopDefault(pc2);
 var prompts3__default = /*#__PURE__*/_interopDefault(prompts3);
 var ora__default = /*#__PURE__*/_interopDefault(ora);
 
@@ -1160,11 +1160,11 @@ var previewPackageJsonAgentRemoval = (projectRoot, agent) => {
   }
 };
 var highlighter = {
-  error: pc__default.default.red,
-  warn: pc__default.default.yellow,
-  info: pc__default.default.cyan,
-  success: pc__default.default.green,
-  dim: pc__default.default.dim
+  error: pc2__default.default.red,
+  warn: pc2__default.default.yellow,
+  info: pc2__default.default.cyan,
+  success: pc2__default.default.green,
+  dim: pc2__default.default.dim
 };
 
 // src/utils/logger.ts
@@ -1262,6 +1262,17 @@ var spinner = (text, options2) => ora__default.default({ text, isSilent: options
 var detectSkillAgents = (cwd) => {
   return SKILL_AGENTS.filter((agent) => fs.existsSync(path.join(cwd, agent.folder)));
 };
+var getRankedSkillAgents = (cwd) => {
+  const rankedAgents = SKILL_AGENTS.map((agent) => ({
+    ...agent,
+    detected: fs.existsSync(path.join(cwd, agent.folder))
+  }));
+  return rankedAgents.sort((first, second) => {
+    if (first.detected && !second.detected) return -1;
+    if (!first.detected && second.detected) return 1;
+    return 0;
+  });
+};
 var findSkillAgent = (id) => {
   return SKILL_AGENTS.find((agent) => agent.id === id);
 };
@@ -1715,7 +1726,8 @@ ${BOLD}File: ${filePath}${RESET}`);
   console.log(formatDiff(diff));
   console.log("\u2500".repeat(60));
 };
-var VERSION = "0.1.0-beta.9";
+var VERSION = "0.1.0-beta.10";
+var formatInstalledAgentNames2 = (agents) => agents.map((agent) => AGENT_NAMES[agent] || agent).join(", ");
 var configureMcp = (mcpClient, cwd, customPkg) => {
   const mcpCommand = customPkg ? `npx -y ${customPkg} browser mcp` : `npx -y grab browser mcp`;
   const mcpSpinner = spinner(
@@ -1771,17 +1783,15 @@ var add = new commander.Command().name("add").alias("install").description("add
   process.cwd()
 ).action(async (agentArg, opts2) => {
   console.log(
-    `${pc__default.default.magenta("\u273F")} ${pc__default.default.bold("React Grab")} ${pc__default.default.gray(VERSION)}`
+    `${pc2__default.default.magenta("\u273F")} ${pc2__default.default.bold("React Grab")} ${pc2__default.default.gray(VERSION)}`
   );
   console.log();
   try {
     const cwd = opts2.cwd;
     const isNonInteractive = opts2.yes;
     if (agentArg === "mcp") {
-      let mcpClient = opts2.client;
-      if (mcpClient === "claude") {
-        mcpClient = "claude-code";
-      }
+      const rawClient = opts2.client === "claude" ? "claude-code" : opts2.client;
+      let mcpClient = rawClient;
       if (mcpClient && !MCP_CLIENTS.includes(mcpClient)) {
         logger.break();
         logger.error(`Invalid MCP client: ${mcpClient}`);
@@ -1795,9 +1805,9 @@ var add = new commander.Command().name("add").alias("install").description("add
           type: "select",
           name: "client",
           message: `Which ${highlighter.info("client")} would you like to configure?`,
-          choices: MCP_CLIENTS.map((innerClient) => ({
-            title: MCP_CLIENT_NAMES[innerClient],
-            value: innerClient
+          choices: MCP_CLIENTS.map((mcpClientOption) => ({
+            title: MCP_CLIENT_NAMES[mcpClientOption],
+            value: mcpClientOption
           }))
         });
         if (!client) {
@@ -1818,35 +1828,29 @@ var add = new commander.Command().name("add").alias("install").description("add
     if (agentArg === "skill") {
       const clientArg = opts2.client;
       let selectedAgent = clientArg ? findSkillAgent(clientArg) : void 0;
-      const detectedAgents = detectSkillAgents(cwd);
       if (clientArg && !selectedAgent) {
         logger.break();
         logger.error(`Invalid skill agent: ${clientArg}`);
         logger.error(
-          `Available agents: ${SKILL_AGENTS.map((a) => a.id).join(", ")}`
+          `Available agents: ${SKILL_AGENTS.map((skillAgent) => skillAgent.id).join(", ")}`
         );
         logger.break();
         process.exit(1);
       }
       if (!selectedAgent && !isNonInteractive) {
-        if (detectedAgents.length === 0) {
-          logger.break();
-          logger.warn("No supported agent folders detected.");
-          logger.log(
-            "Supported agents: " + SKILL_AGENTS.map((a) => a.id).join(", ")
-          );
-          logger.break();
-          process.exit(0);
-        }
+        const rankedAgents = getRankedSkillAgents(cwd);
+        const hasDetectedAgents = rankedAgents.some(
+          (rankedAgent) => rankedAgent.detected
+        );
         logger.break();
         const { agent } = await prompts3__default.default({
           type: "select",
           name: "agent",
           message: `Which ${highlighter.info("agent")} would you like to install the skill for?`,
           choices: [
-            ...detectedAgents.map((innerAgent) => ({
-              title: innerAgent.name,
-              value: innerAgent
+            ...rankedAgents.map((rankedAgent) => ({
+              title: hasDetectedAgents ? `${rankedAgent.name}${rankedAgent.detected ? pc2__default.default.green(" (detected)") : pc2__default.default.dim(" (not detected)")}` : rankedAgent.name,
+              value: rankedAgent
             })),
             { title: "Skip", value: null }
           ]
@@ -1861,7 +1865,7 @@ var add = new commander.Command().name("add").alias("install").description("add
         logger.break();
         logger.error("Please specify an agent with --client");
         logger.error(
-          `Available agents: ${SKILL_AGENTS.map((a) => a.id).join(", ")}`
+          `Available agents: ${SKILL_AGENTS.map((skillAgent) => skillAgent.id).join(", ")}`
         );
         logger.break();
         process.exit(1);
@@ -1901,9 +1905,9 @@ var add = new commander.Command().name("add").alias("install").description("add
           type: "select",
           name: "client",
           message: `Which ${highlighter.info("client")} would you like to configure?`,
-          choices: MCP_CLIENTS.map((innerClient) => ({
-            title: MCP_CLIENT_NAMES[innerClient],
-            value: innerClient
+          choices: MCP_CLIENTS.map((mcpClientOption) => ({
+            title: MCP_CLIENT_NAMES[mcpClientOption],
+            value: mcpClientOption
           }))
         });
         if (!client) {
@@ -1917,24 +1921,18 @@ var add = new commander.Command().name("add").alias("install").description("add
         );
       }
       if (addType === "skill") {
-        const detectedAgents = detectSkillAgents(cwd);
-        if (detectedAgents.length === 0) {
-          logger.break();
-          logger.warn("No supported agent folders detected.");
-          logger.log(
-            "Supported agents: " + SKILL_AGENTS.map((a) => a.id).join(", ")
-          );
-          logger.break();
-          process.exit(0);
-        }
+        const rankedAgents = getRankedSkillAgents(cwd);
+        const hasDetectedAgents = rankedAgents.some(
+          (rankedAgent) => rankedAgent.detected
+        );
         const { selectedAgent } = await prompts3__default.default({
           type: "select",
           name: "selectedAgent",
           message: `Which ${highlighter.info("agent")} would you like to install the skill for?`,
           choices: [
-            ...detectedAgents.map((innerAgent) => ({
-              title: innerAgent.name,
-              value: innerAgent
+            ...rankedAgents.map((rankedAgent) => ({
+              title: hasDetectedAgents ? `${rankedAgent.name}${rankedAgent.detected ? pc2__default.default.green(" (detected)") : pc2__default.default.dim(" (not detected)")}` : rankedAgent.name,
+              value: rankedAgent
             })),
             { title: "Skip", value: null }
           ]
@@ -1986,7 +1984,7 @@ var add = new commander.Command().name("add").alias("install").description("add
       }
       agentIntegration = validAgent;
       if (projectInfo.installedAgents.length > 0 && !isNonInteractive) {
-        const installedNames = projectInfo.installedAgents.map((innerAgent) => AGENT_NAMES[innerAgent] || innerAgent).join(", ");
+        const installedNames = formatInstalledAgentNames2(projectInfo.installedAgents);
         logger.break();
         logger.warn(`${installedNames} is already installed.`);
         const { action } = await prompts3__default.default({
@@ -2017,7 +2015,7 @@ var add = new commander.Command().name("add").alias("install").description("add
       }
     } else if (!isNonInteractive) {
       if (projectInfo.installedAgents.length > 0) {
-        const installedNames = projectInfo.installedAgents.map((innerAgent) => AGENT_NAMES[innerAgent] || innerAgent).join(", ");
+        const installedNames = formatInstalledAgentNames2(projectInfo.installedAgents);
         logger.warn(`Currently installed: ${installedNames}`);
         logger.break();
       }
@@ -2025,9 +2023,9 @@ var add = new commander.Command().name("add").alias("install").description("add
         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
+        choices: availableAgents.map((availableAgent) => ({
+          title: AGENT_NAMES[availableAgent],
+          value: availableAgent
         }))
       });
       if (!agent) {
@@ -2036,7 +2034,7 @@ var add = new commander.Command().name("add").alias("install").description("add
       }
       agentIntegration = agent;
       if (projectInfo.installedAgents.length > 0) {
-        const installedNames = projectInfo.installedAgents.map((innerAgent) => AGENT_NAMES[innerAgent] || innerAgent).join(", ");
+        const installedNames = formatInstalledAgentNames2(projectInfo.installedAgents);
         const { action } = await prompts3__default.default({
           type: "select",
           name: "action",
@@ -2133,7 +2131,7 @@ var add = new commander.Command().name("add").alias("install").description("add
         }
       }
       projectInfo.installedAgents = projectInfo.installedAgents.filter(
-        (innerAgent) => !agentsToRemove.includes(innerAgent)
+        (installedAgent) => !agentsToRemove.includes(installedAgent)
       );
     }
     const addingSpinner = spinner(
@@ -16751,10 +16749,10 @@ PERFORMANCE: Batch multiple actions in one execute call.`,
 };
 
 // src/commands/browser.ts
-var VERSION2 = "0.1.0-beta.9";
+var VERSION2 = "0.1.0-beta.10";
 var printHeader = () => {
   console.log(
-    `${pc__default.default.magenta("\u273F")} ${pc__default.default.bold("React Grab")} ${pc__default.default.gray(VERSION2)}`
+    `${pc2__default.default.magenta("\u273F")} ${pc2__default.default.bold("React Grab")} ${pc2__default.default.gray(VERSION2)}`
   );
   console.log();
 };
@@ -17259,7 +17257,7 @@ browser.addCommand(status);
 browser.addCommand(execute);
 browser.addCommand(pages);
 browser.addCommand(mcp);
-var VERSION3 = "0.1.0-beta.9";
+var VERSION3 = "0.1.0-beta.10";
 var isMac = process.platform === "darwin";
 var META_LABEL = isMac ? "Cmd" : "Win";
 var ALT_LABEL = isMac ? "Option" : "Alt";
@@ -17469,7 +17467,7 @@ var configure = new commander.Command().name("configure").alias("config").descri
   process.cwd()
 ).action(async (opts2) => {
   console.log(
-    `${pc__default.default.magenta("\u273F")} ${pc__default.default.bold("React Grab")} ${pc__default.default.gray(VERSION3)}`
+    `${pc2__default.default.magenta("\u273F")} ${pc2__default.default.bold("React Grab")} ${pc2__default.default.gray(VERSION3)}`
   );
   console.log();
   try {
@@ -17656,7 +17654,7 @@ var configure = new commander.Command().name("configure").alias("config").descri
         `Add this to your ${highlighter.info("init()")} call or ${highlighter.info("data-options")} attribute:`
       );
       logger.break();
-      console.log(`  ${pc__default.default.cyan(configJson)}`);
+      console.log(`  ${pc2__default.default.cyan(configJson)}`);
       logger.break();
       process.exit(1);
     }
@@ -17704,7 +17702,7 @@ var configure = new commander.Command().name("configure").alias("config").descri
     handleError(error48);
   }
 });
-var VERSION4 = "0.1.0-beta.9";
+var VERSION4 = "0.1.0-beta.10";
 var REPORT_URL = "https://react-grab.com/api/report-cli";
 var DOCS_URL = "https://github.com/aidenybai/react-grab";
 var promptSkillInstall = async (cwd) => {
@@ -17821,7 +17819,7 @@ var init = new commander.Command().name("init").description("initialize React Gr
   process.cwd()
 ).action(async (opts2) => {
   console.log(
-    `${pc__default.default.magenta("\u273F")} ${pc__default.default.bold("React Grab")} ${pc__default.default.gray(VERSION4)}`
+    `${pc2__default.default.magenta("\u273F")} ${pc2__default.default.bold("React Grab")} ${pc2__default.default.gray(VERSION4)}`
   );
   console.log();
   try {
@@ -18393,7 +18391,7 @@ var init = new commander.Command().name("init").description("initialize React Gr
     reportToCli("error", void 0, error48);
   }
 });
-var VERSION5 = "0.1.0-beta.9";
+var VERSION5 = "0.1.0-beta.10";
 var remove = new commander.Command().name("remove").description("remove an agent integration").argument(
   "[agent]",
   "agent to remove (claude-code, cursor, opencode, codex, gemini, amp, ami, visual-edit)"
@@ -18403,7 +18401,7 @@ var remove = new commander.Command().name("remove").description("remove an agent
   process.cwd()
 ).action(async (agentArg, opts2) => {
   console.log(
-    `${pc__default.default.magenta("\u273F")} ${pc__default.default.bold("React Grab")} ${pc__default.default.gray(VERSION5)}`
+    `${pc2__default.default.magenta("\u273F")} ${pc2__default.default.bold("React Grab")} ${pc2__default.default.gray(VERSION5)}`
   );
   console.log();
   try {
@@ -18580,7 +18578,7 @@ var uninstall = new commander.Command().name("uninstall").description("uninstall
     process.exit(1);
   }
 });
-var VERSION6 = "0.1.0-beta.9";
+var VERSION6 = "0.1.0-beta.10";
 var UPDATE_COMMAND = "npm install -g grab@latest";
 var getLatestVersion = () => {
   try {
@@ -18594,7 +18592,7 @@ var getLatestVersion = () => {
 };
 var update = new commander.Command().name("update").alias("upgrade").description("update React Grab CLI 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__default.default.magenta("\u273F")} ${pc__default.default.bold("React Grab")} ${pc__default.default.gray(VERSION6)}`
+    `${pc2__default.default.magenta("\u273F")} ${pc2__default.default.bold("React Grab")} ${pc2__default.default.gray(VERSION6)}`
   );
   console.log();
   const checkSpinner = spinner("Checking for updates").start();
@@ -18660,15 +18658,15 @@ var update = new commander.Command().name("update").alias("upgrade").description
     process.exit(1);
   }
 });
-var isGloballyInstalled = () => {
+var getGlobalVersion = () => {
   try {
-    const result = child_process.execSync("which grab", {
+    const result = child_process.execSync("grab --version", {
       encoding: "utf-8",
       stdio: ["pipe", "pipe", "pipe"]
     }).trim();
-    return result.length > 0;
+    return result || null;
   } catch {
-    return false;
+    return null;
   }
 };
 var isRunningViaNpx = () => {
@@ -18676,21 +18674,58 @@ var isRunningViaNpx = () => {
   const npmCommand = process.env.npm_command ?? "";
   return npmExecPath.includes("npx") || npmCommand === "exec";
 };
-var installGloballyInBackground = (version2) => {
-  if (!isRunningViaNpx() || isGloballyInstalled()) {
+var promptGlobalInstall = async (version2) => {
+  if (!isRunningViaNpx()) {
     return;
   }
-  const packageSpec = `grab@${version2}`;
-  const child = child_process.spawn("npm", ["install", "-g", packageSpec], {
-    detached: true,
-    stdio: "ignore",
-    shell: true
+  const globalVersion = getGlobalVersion();
+  const isInstalled = globalVersion !== null;
+  const isOutdated = isInstalled && globalVersion !== version2;
+  if (isInstalled && !isOutdated) {
+    return;
+  }
+  logger.break();
+  const message = isOutdated ? `Update global grab from ${globalVersion} to ${version2}?` : "Install grab globally so you can run it without npx?";
+  const { shouldInstall } = await prompts3__default.default({
+    type: "confirm",
+    name: "shouldInstall",
+    message,
+    initial: true
   });
-  child.unref();
+  if (!shouldInstall) {
+    logger.dim(
+      `Skipped. Run ${highlighter.info("npm install -g grab")} to install later.`
+    );
+    logger.break();
+    return;
+  }
+  const packageSpec = `grab@${version2}`;
+  const actionText = isOutdated ? "Updating" : "Installing";
+  const installSpinner = spinner(`${actionText} ${packageSpec} globally`).start();
+  try {
+    child_process.execSync(`npm install -g ${packageSpec}`, {
+      stdio: ["pipe", "pipe", "pipe"]
+    });
+    const successText = isOutdated ? "Updated" : "Installed";
+    installSpinner.succeed(
+      `${successText} globally. Run ${highlighter.info("grab")} to get started.`
+    );
+  } catch {
+    const failText = isOutdated ? "Update" : "Install";
+    installSpinner.fail(`Global ${failText.toLowerCase()} failed`);
+    logger.break();
+    logger.dim(
+      `Try running: ${highlighter.info("sudo npm install -g grab")}`
+    );
+    logger.dim(
+      `Or see: ${highlighter.info("https://docs.npmjs.com/resolving-eacces-permissions-errors")}`
+    );
+  }
+  logger.break();
 };
 
 // src/cli.ts
-var VERSION7 = "0.1.0-beta.9";
+var VERSION7 = "0.1.0-beta.10";
 var VERSION_API_URL = "https://www.react-grab.com/api/version";
 process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));
@@ -18699,7 +18734,6 @@ try {
   });
 } catch {
 }
-installGloballyInBackground(VERSION7);
 var program = new commander.Command().name("grab").description("add React Grab to your project").version(VERSION7, "-v, --version", "display the version number");
 program.addCommand(init);
 program.addCommand(add);
@@ -18708,4 +18742,8 @@ program.addCommand(configure);
 program.addCommand(browser);
 program.addCommand(update);
 program.addCommand(uninstall);
-program.parse();
+var main = async () => {
+  await promptGlobalInstall(VERSION7);
+  await program.parseAsync();
+};
+main();

package/dist/cli.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 import { Command } from 'commander';
-import pc from 'picocolors';
+import pc2 from 'picocolors';
 import prompts3 from 'prompts';
 import { existsSync, readFileSync, writeFileSync, accessSync, constants, readdirSync } from 'fs';
 import { join, dirname, basename } from 'path';
-import { execSync, spawn } from 'child_process';
+import { execSync } from 'child_process';
 import ora from 'ora';
 import { detect } from '@antfu/ni';
 import { createRequire } from 'module';
@@ -1151,11 +1151,11 @@ var previewPackageJsonAgentRemoval = (projectRoot, agent) => {
   }
 };
 var highlighter = {
-  error: pc.red,
-  warn: pc.yellow,
-  info: pc.cyan,
-  success: pc.green,
-  dim: pc.dim
+  error: pc2.red,
+  warn: pc2.yellow,
+  info: pc2.cyan,
+  success: pc2.green,
+  dim: pc2.dim
 };
 
 // src/utils/logger.ts
@@ -1253,6 +1253,17 @@ var spinner = (text, options2) => ora({ text, isSilent: options2?.silent });
 var detectSkillAgents = (cwd) => {
   return SKILL_AGENTS.filter((agent) => existsSync(join(cwd, agent.folder)));
 };
+var getRankedSkillAgents = (cwd) => {
+  const rankedAgents = SKILL_AGENTS.map((agent) => ({
+    ...agent,
+    detected: existsSync(join(cwd, agent.folder))
+  }));
+  return rankedAgents.sort((first, second) => {
+    if (first.detected && !second.detected) return -1;
+    if (!first.detected && second.detected) return 1;
+    return 0;
+  });
+};
 var findSkillAgent = (id) => {
   return SKILL_AGENTS.find((agent) => agent.id === id);
 };
@@ -1706,7 +1717,8 @@ ${BOLD}File: ${filePath}${RESET}`);
   console.log(formatDiff(diff));
   console.log("\u2500".repeat(60));
 };
-var VERSION = "0.1.0-beta.9";
+var VERSION = "0.1.0-beta.10";
+var formatInstalledAgentNames2 = (agents) => agents.map((agent) => AGENT_NAMES[agent] || agent).join(", ");
 var configureMcp = (mcpClient, cwd, customPkg) => {
   const mcpCommand = customPkg ? `npx -y ${customPkg} browser mcp` : `npx -y grab browser mcp`;
   const mcpSpinner = spinner(
@@ -1762,17 +1774,15 @@ var add = new Command().name("add").alias("install").description("add an agent i
   process.cwd()
 ).action(async (agentArg, opts2) => {
   console.log(
-    `${pc.magenta("\u273F")} ${pc.bold("React Grab")} ${pc.gray(VERSION)}`
+    `${pc2.magenta("\u273F")} ${pc2.bold("React Grab")} ${pc2.gray(VERSION)}`
   );
   console.log();
   try {
     const cwd = opts2.cwd;
     const isNonInteractive = opts2.yes;
     if (agentArg === "mcp") {
-      let mcpClient = opts2.client;
-      if (mcpClient === "claude") {
-        mcpClient = "claude-code";
-      }
+      const rawClient = opts2.client === "claude" ? "claude-code" : opts2.client;
+      let mcpClient = rawClient;
       if (mcpClient && !MCP_CLIENTS.includes(mcpClient)) {
         logger.break();
         logger.error(`Invalid MCP client: ${mcpClient}`);
@@ -1786,9 +1796,9 @@ var add = new Command().name("add").alias("install").description("add an agent i
           type: "select",
           name: "client",
           message: `Which ${highlighter.info("client")} would you like to configure?`,
-          choices: MCP_CLIENTS.map((innerClient) => ({
-            title: MCP_CLIENT_NAMES[innerClient],
-            value: innerClient
+          choices: MCP_CLIENTS.map((mcpClientOption) => ({
+            title: MCP_CLIENT_NAMES[mcpClientOption],
+            value: mcpClientOption
           }))
         });
         if (!client) {
@@ -1809,35 +1819,29 @@ var add = new Command().name("add").alias("install").description("add an agent i
     if (agentArg === "skill") {
       const clientArg = opts2.client;
       let selectedAgent = clientArg ? findSkillAgent(clientArg) : void 0;
-      const detectedAgents = detectSkillAgents(cwd);
       if (clientArg && !selectedAgent) {
         logger.break();
         logger.error(`Invalid skill agent: ${clientArg}`);
         logger.error(
-          `Available agents: ${SKILL_AGENTS.map((a) => a.id).join(", ")}`
+          `Available agents: ${SKILL_AGENTS.map((skillAgent) => skillAgent.id).join(", ")}`
         );
         logger.break();
         process.exit(1);
       }
       if (!selectedAgent && !isNonInteractive) {
-        if (detectedAgents.length === 0) {
-          logger.break();
-          logger.warn("No supported agent folders detected.");
-          logger.log(
-            "Supported agents: " + SKILL_AGENTS.map((a) => a.id).join(", ")
-          );
-          logger.break();
-          process.exit(0);
-        }
+        const rankedAgents = getRankedSkillAgents(cwd);
+        const hasDetectedAgents = rankedAgents.some(
+          (rankedAgent) => rankedAgent.detected
+        );
         logger.break();
         const { agent } = await prompts3({
           type: "select",
           name: "agent",
           message: `Which ${highlighter.info("agent")} would you like to install the skill for?`,
           choices: [
-            ...detectedAgents.map((innerAgent) => ({
-              title: innerAgent.name,
-              value: innerAgent
+            ...rankedAgents.map((rankedAgent) => ({
+              title: hasDetectedAgents ? `${rankedAgent.name}${rankedAgent.detected ? pc2.green(" (detected)") : pc2.dim(" (not detected)")}` : rankedAgent.name,
+              value: rankedAgent
             })),
             { title: "Skip", value: null }
           ]
@@ -1852,7 +1856,7 @@ var add = new Command().name("add").alias("install").description("add an agent i
         logger.break();
         logger.error("Please specify an agent with --client");
         logger.error(
-          `Available agents: ${SKILL_AGENTS.map((a) => a.id).join(", ")}`
+          `Available agents: ${SKILL_AGENTS.map((skillAgent) => skillAgent.id).join(", ")}`
         );
         logger.break();
         process.exit(1);
@@ -1892,9 +1896,9 @@ var add = new Command().name("add").alias("install").description("add an agent i
           type: "select",
           name: "client",
           message: `Which ${highlighter.info("client")} would you like to configure?`,
-          choices: MCP_CLIENTS.map((innerClient) => ({
-            title: MCP_CLIENT_NAMES[innerClient],
-            value: innerClient
+          choices: MCP_CLIENTS.map((mcpClientOption) => ({
+            title: MCP_CLIENT_NAMES[mcpClientOption],
+            value: mcpClientOption
           }))
         });
         if (!client) {
@@ -1908,24 +1912,18 @@ var add = new Command().name("add").alias("install").description("add an agent i
         );
       }
       if (addType === "skill") {
-        const detectedAgents = detectSkillAgents(cwd);
-        if (detectedAgents.length === 0) {
-          logger.break();
-          logger.warn("No supported agent folders detected.");
-          logger.log(
-            "Supported agents: " + SKILL_AGENTS.map((a) => a.id).join(", ")
-          );
-          logger.break();
-          process.exit(0);
-        }
+        const rankedAgents = getRankedSkillAgents(cwd);
+        const hasDetectedAgents = rankedAgents.some(
+          (rankedAgent) => rankedAgent.detected
+        );
         const { selectedAgent } = await prompts3({
           type: "select",
           name: "selectedAgent",
           message: `Which ${highlighter.info("agent")} would you like to install the skill for?`,
           choices: [
-            ...detectedAgents.map((innerAgent) => ({
-              title: innerAgent.name,
-              value: innerAgent
+            ...rankedAgents.map((rankedAgent) => ({
+              title: hasDetectedAgents ? `${rankedAgent.name}${rankedAgent.detected ? pc2.green(" (detected)") : pc2.dim(" (not detected)")}` : rankedAgent.name,
+              value: rankedAgent
             })),
             { title: "Skip", value: null }
           ]
@@ -1977,7 +1975,7 @@ var add = new Command().name("add").alias("install").description("add an agent i
       }
       agentIntegration = validAgent;
       if (projectInfo.installedAgents.length > 0 && !isNonInteractive) {
-        const installedNames = projectInfo.installedAgents.map((innerAgent) => AGENT_NAMES[innerAgent] || innerAgent).join(", ");
+        const installedNames = formatInstalledAgentNames2(projectInfo.installedAgents);
         logger.break();
         logger.warn(`${installedNames} is already installed.`);
         const { action } = await prompts3({
@@ -2008,7 +2006,7 @@ var add = new Command().name("add").alias("install").description("add an agent i
       }
     } else if (!isNonInteractive) {
       if (projectInfo.installedAgents.length > 0) {
-        const installedNames = projectInfo.installedAgents.map((innerAgent) => AGENT_NAMES[innerAgent] || innerAgent).join(", ");
+        const installedNames = formatInstalledAgentNames2(projectInfo.installedAgents);
         logger.warn(`Currently installed: ${installedNames}`);
         logger.break();
       }
@@ -2016,9 +2014,9 @@ var add = new Command().name("add").alias("install").description("add an agent i
         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
+        choices: availableAgents.map((availableAgent) => ({
+          title: AGENT_NAMES[availableAgent],
+          value: availableAgent
         }))
       });
       if (!agent) {
@@ -2027,7 +2025,7 @@ var add = new Command().name("add").alias("install").description("add an agent i
       }
       agentIntegration = agent;
       if (projectInfo.installedAgents.length > 0) {
-        const installedNames = projectInfo.installedAgents.map((innerAgent) => AGENT_NAMES[innerAgent] || innerAgent).join(", ");
+        const installedNames = formatInstalledAgentNames2(projectInfo.installedAgents);
         const { action } = await prompts3({
           type: "select",
           name: "action",
@@ -2124,7 +2122,7 @@ var add = new Command().name("add").alias("install").description("add an agent i
         }
       }
       projectInfo.installedAgents = projectInfo.installedAgents.filter(
-        (innerAgent) => !agentsToRemove.includes(innerAgent)
+        (installedAgent) => !agentsToRemove.includes(installedAgent)
       );
     }
     const addingSpinner = spinner(
@@ -16742,10 +16740,10 @@ PERFORMANCE: Batch multiple actions in one execute call.`,
 };
 
 // src/commands/browser.ts
-var VERSION2 = "0.1.0-beta.9";
+var VERSION2 = "0.1.0-beta.10";
 var printHeader = () => {
   console.log(
-    `${pc.magenta("\u273F")} ${pc.bold("React Grab")} ${pc.gray(VERSION2)}`
+    `${pc2.magenta("\u273F")} ${pc2.bold("React Grab")} ${pc2.gray(VERSION2)}`
   );
   console.log();
 };
@@ -17250,7 +17248,7 @@ browser.addCommand(status);
 browser.addCommand(execute);
 browser.addCommand(pages);
 browser.addCommand(mcp);
-var VERSION3 = "0.1.0-beta.9";
+var VERSION3 = "0.1.0-beta.10";
 var isMac = process.platform === "darwin";
 var META_LABEL = isMac ? "Cmd" : "Win";
 var ALT_LABEL = isMac ? "Option" : "Alt";
@@ -17460,7 +17458,7 @@ var configure = new Command().name("configure").alias("config").description("con
   process.cwd()
 ).action(async (opts2) => {
   console.log(
-    `${pc.magenta("\u273F")} ${pc.bold("React Grab")} ${pc.gray(VERSION3)}`
+    `${pc2.magenta("\u273F")} ${pc2.bold("React Grab")} ${pc2.gray(VERSION3)}`
   );
   console.log();
   try {
@@ -17647,7 +17645,7 @@ var configure = new Command().name("configure").alias("config").description("con
         `Add this to your ${highlighter.info("init()")} call or ${highlighter.info("data-options")} attribute:`
       );
       logger.break();
-      console.log(`  ${pc.cyan(configJson)}`);
+      console.log(`  ${pc2.cyan(configJson)}`);
       logger.break();
       process.exit(1);
     }
@@ -17695,7 +17693,7 @@ var configure = new Command().name("configure").alias("config").description("con
     handleError(error48);
   }
 });
-var VERSION4 = "0.1.0-beta.9";
+var VERSION4 = "0.1.0-beta.10";
 var REPORT_URL = "https://react-grab.com/api/report-cli";
 var DOCS_URL = "https://github.com/aidenybai/react-grab";
 var promptSkillInstall = async (cwd) => {
@@ -17812,7 +17810,7 @@ var init = new Command().name("init").description("initialize React Grab in your
   process.cwd()
 ).action(async (opts2) => {
   console.log(
-    `${pc.magenta("\u273F")} ${pc.bold("React Grab")} ${pc.gray(VERSION4)}`
+    `${pc2.magenta("\u273F")} ${pc2.bold("React Grab")} ${pc2.gray(VERSION4)}`
   );
   console.log();
   try {
@@ -18384,7 +18382,7 @@ var init = new Command().name("init").description("initialize React Grab in your
     reportToCli("error", void 0, error48);
   }
 });
-var VERSION5 = "0.1.0-beta.9";
+var VERSION5 = "0.1.0-beta.10";
 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)"
@@ -18394,7 +18392,7 @@ var remove = new Command().name("remove").description("remove an agent integrati
   process.cwd()
 ).action(async (agentArg, opts2) => {
   console.log(
-    `${pc.magenta("\u273F")} ${pc.bold("React Grab")} ${pc.gray(VERSION5)}`
+    `${pc2.magenta("\u273F")} ${pc2.bold("React Grab")} ${pc2.gray(VERSION5)}`
   );
   console.log();
   try {
@@ -18571,7 +18569,7 @@ var uninstall = new Command().name("uninstall").description("uninstall React Gra
     process.exit(1);
   }
 });
-var VERSION6 = "0.1.0-beta.9";
+var VERSION6 = "0.1.0-beta.10";
 var UPDATE_COMMAND = "npm install -g grab@latest";
 var getLatestVersion = () => {
   try {
@@ -18585,7 +18583,7 @@ var getLatestVersion = () => {
 };
 var update = new Command().name("update").alias("upgrade").description("update React Grab CLI 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)}`
+    `${pc2.magenta("\u273F")} ${pc2.bold("React Grab")} ${pc2.gray(VERSION6)}`
   );
   console.log();
   const checkSpinner = spinner("Checking for updates").start();
@@ -18651,15 +18649,15 @@ var update = new Command().name("update").alias("upgrade").description("update R
     process.exit(1);
   }
 });
-var isGloballyInstalled = () => {
+var getGlobalVersion = () => {
   try {
-    const result = execSync("which grab", {
+    const result = execSync("grab --version", {
       encoding: "utf-8",
       stdio: ["pipe", "pipe", "pipe"]
     }).trim();
-    return result.length > 0;
+    return result || null;
   } catch {
-    return false;
+    return null;
   }
 };
 var isRunningViaNpx = () => {
@@ -18667,21 +18665,58 @@ var isRunningViaNpx = () => {
   const npmCommand = process.env.npm_command ?? "";
   return npmExecPath.includes("npx") || npmCommand === "exec";
 };
-var installGloballyInBackground = (version2) => {
-  if (!isRunningViaNpx() || isGloballyInstalled()) {
+var promptGlobalInstall = async (version2) => {
+  if (!isRunningViaNpx()) {
     return;
   }
-  const packageSpec = `grab@${version2}`;
-  const child = spawn("npm", ["install", "-g", packageSpec], {
-    detached: true,
-    stdio: "ignore",
-    shell: true
+  const globalVersion = getGlobalVersion();
+  const isInstalled = globalVersion !== null;
+  const isOutdated = isInstalled && globalVersion !== version2;
+  if (isInstalled && !isOutdated) {
+    return;
+  }
+  logger.break();
+  const message = isOutdated ? `Update global grab from ${globalVersion} to ${version2}?` : "Install grab globally so you can run it without npx?";
+  const { shouldInstall } = await prompts3({
+    type: "confirm",
+    name: "shouldInstall",
+    message,
+    initial: true
   });
-  child.unref();
+  if (!shouldInstall) {
+    logger.dim(
+      `Skipped. Run ${highlighter.info("npm install -g grab")} to install later.`
+    );
+    logger.break();
+    return;
+  }
+  const packageSpec = `grab@${version2}`;
+  const actionText = isOutdated ? "Updating" : "Installing";
+  const installSpinner = spinner(`${actionText} ${packageSpec} globally`).start();
+  try {
+    execSync(`npm install -g ${packageSpec}`, {
+      stdio: ["pipe", "pipe", "pipe"]
+    });
+    const successText = isOutdated ? "Updated" : "Installed";
+    installSpinner.succeed(
+      `${successText} globally. Run ${highlighter.info("grab")} to get started.`
+    );
+  } catch {
+    const failText = isOutdated ? "Update" : "Install";
+    installSpinner.fail(`Global ${failText.toLowerCase()} failed`);
+    logger.break();
+    logger.dim(
+      `Try running: ${highlighter.info("sudo npm install -g grab")}`
+    );
+    logger.dim(
+      `Or see: ${highlighter.info("https://docs.npmjs.com/resolving-eacces-permissions-errors")}`
+    );
+  }
+  logger.break();
 };
 
 // src/cli.ts
-var VERSION7 = "0.1.0-beta.9";
+var VERSION7 = "0.1.0-beta.10";
 var VERSION_API_URL = "https://www.react-grab.com/api/version";
 process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));
@@ -18690,7 +18725,6 @@ try {
   });
 } catch {
 }
-installGloballyInBackground(VERSION7);
 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);
@@ -18699,4 +18733,8 @@ program.addCommand(configure);
 program.addCommand(browser);
 program.addCommand(update);
 program.addCommand(uninstall);
-program.parse();
+var main = async () => {
+  await promptGlobalInstall(VERSION7);
+  await program.parseAsync();
+};
+main();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-grab/cli",
-  "version": "0.1.0-beta.10",
+  "version": "0.1.0-beta.11",
   "type": "module",
   "bin": {
     "react-grab": "./dist/cli.js"
@@ -30,7 +30,7 @@
     "playwright-core": "^1.50.0",
     "prompts": "^2.4.2",
     "zod": "^4.3.5",
-    "@react-grab/browser": "0.1.0-beta.10"
+    "@react-grab/browser": "0.1.0-beta.11"
   },
   "scripts": {
     "dev": "tsup --watch",