@react-grab/cli 0.0.84 → 0.0.86

package/dist/cli.cjs

@@ -255,7 +255,7 @@ var AGENT_PACKAGES = [
   "@react-grab/gemini",
   "@react-grab/amp",
   "@react-grab/ami",
-  "@react-grab/instant"
+  "@react-grab/visual-edit"
 ];
 var detectUnsupportedFramework = (projectRoot) => {
   const packageJsonPath = path.join(projectRoot, "package.json");
@@ -1046,11 +1046,11 @@ var AGENT_PREFIXES = {
   amp: "npx @react-grab/amp@latest &&"
 };
 var previewPackageJsonTransform = (projectRoot, agent, installedAgents) => {
-  if (agent === "none" || agent === "ami" || agent === "instant") {
+  if (agent === "none" || agent === "ami" || agent === "visual-edit") {
     return {
       success: true,
       filePath: "",
-      message: agent === "ami" || agent === "instant" ? `${agent === "ami" ? "Ami" : "Instant"} does not require package.json modification` : "No agent selected, skipping package.json modification",
+      message: agent === "ami" || agent === "visual-edit" ? `${agent === "ami" ? "Ami" : "Visual Edit"} does not require package.json modification` : "No agent selected, skipping package.json modification",
       noChanges: true
     };
   }
@@ -1137,9 +1137,197 @@ var applyPackageJsonTransform = (result) => {
   }
   return { success: true };
 };
+var formatOptionsForNextjs = (options) => {
+  const parts = [];
+  if (options.activationKey) {
+    const keyParts = [];
+    if (options.activationKey.key)
+      keyParts.push(`key: "${options.activationKey.key}"`);
+    if (options.activationKey.metaKey) keyParts.push("metaKey: true");
+    if (options.activationKey.ctrlKey) keyParts.push("ctrlKey: true");
+    if (options.activationKey.shiftKey) keyParts.push("shiftKey: true");
+    if (options.activationKey.altKey) keyParts.push("altKey: true");
+    if (keyParts.length > 0) {
+      parts.push(`activationKey: { ${keyParts.join(", ")} }`);
+    }
+  }
+  if (options.activationMode) {
+    parts.push(`activationMode: "${options.activationMode}"`);
+  }
+  if (options.keyHoldDuration !== void 0) {
+    parts.push(`keyHoldDuration: ${options.keyHoldDuration}`);
+  }
+  if (options.allowActivationInsideInput !== void 0) {
+    parts.push(
+      `allowActivationInsideInput: ${options.allowActivationInsideInput}`
+    );
+  }
+  if (options.maxContextLines !== void 0) {
+    parts.push(`maxContextLines: ${options.maxContextLines}`);
+  }
+  return `{ ${parts.join(", ")} }`;
+};
+var formatOptionsAsJson = (options) => {
+  const cleanOptions = {};
+  if (options.activationKey) {
+    const activationKey = {};
+    if (options.activationKey.key) activationKey.key = options.activationKey.key;
+    if (options.activationKey.metaKey) activationKey.metaKey = true;
+    if (options.activationKey.ctrlKey) activationKey.ctrlKey = true;
+    if (options.activationKey.shiftKey) activationKey.shiftKey = true;
+    if (options.activationKey.altKey) activationKey.altKey = true;
+    if (Object.keys(activationKey).length > 0) {
+      cleanOptions.activationKey = activationKey;
+    }
+  }
+  if (options.activationMode) {
+    cleanOptions.activationMode = options.activationMode;
+  }
+  if (options.keyHoldDuration !== void 0) {
+    cleanOptions.keyHoldDuration = options.keyHoldDuration;
+  }
+  if (options.allowActivationInsideInput !== void 0) {
+    cleanOptions.allowActivationInsideInput = options.allowActivationInsideInput;
+  }
+  if (options.maxContextLines !== void 0) {
+    cleanOptions.maxContextLines = options.maxContextLines;
+  }
+  return JSON.stringify(cleanOptions);
+};
+var findReactGrabFile = (projectRoot, framework, nextRouterType) => {
+  switch (framework) {
+    case "next":
+      if (nextRouterType === "app") {
+        return findLayoutFile(projectRoot);
+      }
+      return findDocumentFile(projectRoot);
+    case "vite":
+      return findIndexHtml(projectRoot);
+    case "webpack":
+      return findEntryFile(projectRoot);
+    default:
+      return null;
+  }
+};
+var addOptionsToNextScript = (originalContent, options, filePath) => {
+  const reactGrabScriptMatch = originalContent.match(
+    /(<Script[^>]*react-grab[^>]*)(\/?>)/is
+  );
+  if (!reactGrabScriptMatch) {
+    return {
+      success: false,
+      filePath,
+      message: "Could not find React Grab Script tag"
+    };
+  }
+  const scriptTag = reactGrabScriptMatch[0];
+  const scriptOpening = reactGrabScriptMatch[1];
+  const scriptClosing = reactGrabScriptMatch[2];
+  const existingDataOptionsMatch = scriptTag.match(
+    /data-options=\{JSON\.stringify\([^)]+\)\}/
+  );
+  const dataOptionsAttr = `data-options={JSON.stringify(
+              ${formatOptionsForNextjs(options)}
+            )}`;
+  let newScriptTag;
+  if (existingDataOptionsMatch) {
+    newScriptTag = scriptTag.replace(existingDataOptionsMatch[0], dataOptionsAttr);
+  } else {
+    newScriptTag = `${scriptOpening}
+            ${dataOptionsAttr}
+          ${scriptClosing}`;
+  }
+  const newContent = originalContent.replace(scriptTag, newScriptTag);
+  return {
+    success: true,
+    filePath,
+    message: "Update React Grab options",
+    originalContent,
+    newContent
+  };
+};
+var addOptionsToViteScript = (originalContent, options, filePath) => {
+  const reactGrabImportMatch = originalContent.match(
+    /import\s*\(\s*["']react-grab["']\s*\)/
+  );
+  if (!reactGrabImportMatch) {
+    return {
+      success: false,
+      filePath,
+      message: "Could not find React Grab import"
+    };
+  }
+  const optionsJson = formatOptionsAsJson(options);
+  const newImport = `import("react-grab").then((m) => m.init(${optionsJson}))`;
+  const newContent = originalContent.replace(reactGrabImportMatch[0], newImport);
+  return {
+    success: true,
+    filePath,
+    message: "Update React Grab options",
+    originalContent,
+    newContent
+  };
+};
+var addOptionsToWebpackImport = (originalContent, options, filePath) => {
+  const reactGrabImportMatch = originalContent.match(
+    /import\s*\(\s*["']react-grab["']\s*\)/
+  );
+  if (!reactGrabImportMatch) {
+    return {
+      success: false,
+      filePath,
+      message: "Could not find React Grab import"
+    };
+  }
+  const optionsJson = formatOptionsAsJson(options);
+  const newImport = `import("react-grab").then((m) => m.init(${optionsJson}))`;
+  const newContent = originalContent.replace(reactGrabImportMatch[0], newImport);
+  return {
+    success: true,
+    filePath,
+    message: "Update React Grab options",
+    originalContent,
+    newContent
+  };
+};
+var previewOptionsTransform = (projectRoot, framework, nextRouterType, options) => {
+  const filePath = findReactGrabFile(projectRoot, framework, nextRouterType);
+  if (!filePath) {
+    return {
+      success: false,
+      filePath: "",
+      message: "Could not find file containing React Grab configuration"
+    };
+  }
+  const originalContent = fs.readFileSync(filePath, "utf-8");
+  if (!hasReactGrabCode(originalContent)) {
+    return {
+      success: false,
+      filePath,
+      message: "Could not find React Grab code in the file"
+    };
+  }
+  switch (framework) {
+    case "next":
+      return addOptionsToNextScript(originalContent, options, filePath);
+    case "vite":
+      return addOptionsToViteScript(originalContent, options, filePath);
+    case "webpack":
+      return addOptionsToWebpackImport(originalContent, options, filePath);
+    default:
+      return {
+        success: false,
+        filePath,
+        message: `Unknown framework: ${framework}`
+      };
+  }
+};
+var applyOptionsTransform = (result) => {
+  return applyTransform(result);
+};
 
 // src/commands/add.ts
-var VERSION = "0.0.84";
+var VERSION = "0.0.86";
 var AGENT_NAMES = {
   "claude-code": "Claude Code",
   cursor: "Cursor",
@@ -1148,18 +1336,18 @@ var AGENT_NAMES = {
   gemini: "Gemini",
   amp: "Amp",
   ami: "Ami",
-  instant: "Instant"
+  "visual-edit": "Visual Edit"
 };
 var add = new commander.Command().name("add").description("add an agent integration").argument(
   "[agent]",
-  "agent to add (claude-code, cursor, opencode, codex, gemini, amp, ami, instant)"
+  "agent to add (claude-code, cursor, opencode, codex, gemini, amp, ami, visual-edit)"
 ).option("-y, --yes", "skip confirmation prompts", false).option(
   "-c, --cwd <cwd>",
   "working directory (defaults to current directory)",
   process.cwd()
 ).action(async (agentArg, opts) => {
   console.log(
-    `${pc__default.default.magenta("\u269B")} ${pc__default.default.bold("React Grab")} ${pc__default.default.gray(VERSION)}`
+    `${pc__default.default.magenta("\u273F")} ${pc__default.default.bold("React Grab")} ${pc__default.default.gray(VERSION)}`
   );
   console.log();
   try {
@@ -1185,7 +1373,7 @@ var add = new commander.Command().name("add").description("add an agent integrat
       "gemini",
       "amp",
       "ami",
-      "instant"
+      "visual-edit"
     ].filter((agent) => !projectInfo.installedAgents.includes(agent));
     if (availableAgents.length === 0) {
       logger.break();
@@ -1208,7 +1396,7 @@ var add = new commander.Command().name("add").description("add an agent integrat
         logger.break();
         logger.error(`Invalid agent: ${agentArg}`);
         logger.error(
-          "Available agents: claude-code, cursor, opencode, codex, gemini, amp, ami, instant"
+          "Available agents: claude-code, cursor, opencode, codex, gemini, amp, ami, visual-edit"
         );
         logger.break();
         process.exit(1);
@@ -1357,7 +1545,215 @@ var add = new commander.Command().name("add").description("add an agent integrat
     handleError(error);
   }
 });
-var VERSION2 = "0.0.84";
+var VERSION2 = "0.0.86";
+var MODIFIER_KEY_NAMES = {
+  metaKey: process.platform === "darwin" ? "\u2318 Command" : "\u229E Windows",
+  ctrlKey: "Ctrl",
+  shiftKey: "Shift",
+  altKey: process.platform === "darwin" ? "\u2325 Option" : "Alt"
+};
+var formatActivationKey = (activationKey) => {
+  if (!activationKey) return "Default (Option/Alt)";
+  const parts = [];
+  if (activationKey.metaKey) parts.push(process.platform === "darwin" ? "\u2318" : "Win");
+  if (activationKey.ctrlKey) parts.push("Ctrl");
+  if (activationKey.shiftKey) parts.push("Shift");
+  if (activationKey.altKey) parts.push(process.platform === "darwin" ? "\u2325" : "Alt");
+  if (activationKey.key) parts.push(activationKey.key.toUpperCase());
+  return parts.length > 0 ? parts.join(" + ") : "Default (Option/Alt)";
+};
+var configure = new commander.Command().name("configure").alias("config").description("configure React Grab options").option("-y, --yes", "skip confirmation prompts", false).option(
+  "-c, --cwd <cwd>",
+  "working directory (defaults to current directory)",
+  process.cwd()
+).action(async (opts) => {
+  console.log(
+    `${pc__default.default.magenta("\u273F")} ${pc__default.default.bold("React Grab")} ${pc__default.default.gray(VERSION2)}`
+  );
+  console.log();
+  try {
+    const cwd = opts.cwd;
+    const isNonInteractive = opts.yes;
+    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();
+    if (isNonInteractive) {
+      logger.break();
+      logger.error("Configure command requires interactive mode.");
+      logger.error("Remove the --yes flag to use interactive prompts.");
+      logger.break();
+      process.exit(1);
+    }
+    logger.break();
+    logger.log(`Configure ${highlighter.info("React Grab")} options:`);
+    logger.break();
+    const collectedOptions = {};
+    const { wantActivationKey } = await prompts2__default.default({
+      type: "confirm",
+      name: "wantActivationKey",
+      message: `Configure ${highlighter.info("activation key")}?`,
+      initial: false
+    });
+    if (wantActivationKey === void 0) {
+      logger.break();
+      process.exit(1);
+    }
+    if (wantActivationKey) {
+      const { key } = await prompts2__default.default({
+        type: "text",
+        name: "key",
+        message: "Enter the activation key (e.g., g, k, space):",
+        initial: ""
+      });
+      if (key === void 0) {
+        logger.break();
+        process.exit(1);
+      }
+      const { modifiers } = await prompts2__default.default({
+        type: "multiselect",
+        name: "modifiers",
+        message: "Select modifier keys (space to select, enter to confirm):",
+        choices: [
+          { title: MODIFIER_KEY_NAMES.metaKey, value: "metaKey" },
+          { title: MODIFIER_KEY_NAMES.ctrlKey, value: "ctrlKey" },
+          { title: MODIFIER_KEY_NAMES.shiftKey, value: "shiftKey" },
+          { title: MODIFIER_KEY_NAMES.altKey, value: "altKey", selected: true }
+        ],
+        hint: "- Space to select, Enter to confirm"
+      });
+      if (modifiers === void 0) {
+        logger.break();
+        process.exit(1);
+      }
+      collectedOptions.activationKey = {
+        ...key && { key: key.toLowerCase() },
+        ...modifiers.includes("metaKey") && { metaKey: true },
+        ...modifiers.includes("ctrlKey") && { ctrlKey: true },
+        ...modifiers.includes("shiftKey") && { shiftKey: true },
+        ...modifiers.includes("altKey") && { altKey: true }
+      };
+      logger.log(
+        `  Activation key: ${highlighter.info(formatActivationKey(collectedOptions.activationKey))}`
+      );
+    }
+    const { activationMode } = await prompts2__default.default({
+      type: "select",
+      name: "activationMode",
+      message: `Select ${highlighter.info("activation mode")}:`,
+      choices: [
+        { title: "Toggle (press to activate/deactivate)", value: "toggle" },
+        { title: "Hold (hold key to keep active)", value: "hold" }
+      ],
+      initial: 0
+    });
+    if (activationMode === void 0) {
+      logger.break();
+      process.exit(1);
+    }
+    collectedOptions.activationMode = activationMode;
+    if (activationMode === "hold") {
+      const { keyHoldDuration } = await prompts2__default.default({
+        type: "number",
+        name: "keyHoldDuration",
+        message: `Enter ${highlighter.info("key hold duration")} in milliseconds:`,
+        initial: 150,
+        min: 0,
+        max: 2e3
+      });
+      if (keyHoldDuration === void 0) {
+        logger.break();
+        process.exit(1);
+      }
+      collectedOptions.keyHoldDuration = keyHoldDuration;
+    }
+    const { allowActivationInsideInput } = await prompts2__default.default({
+      type: "confirm",
+      name: "allowActivationInsideInput",
+      message: `Allow activation ${highlighter.info("inside input fields")}?`,
+      initial: true
+    });
+    if (allowActivationInsideInput === void 0) {
+      logger.break();
+      process.exit(1);
+    }
+    collectedOptions.allowActivationInsideInput = allowActivationInsideInput;
+    const { maxContextLines } = await prompts2__default.default({
+      type: "number",
+      name: "maxContextLines",
+      message: `Enter ${highlighter.info("max context lines")} to include:`,
+      initial: 3,
+      min: 0,
+      max: 50
+    });
+    if (maxContextLines === void 0) {
+      logger.break();
+      process.exit(1);
+    }
+    collectedOptions.maxContextLines = maxContextLines;
+    const result = previewOptionsTransform(
+      projectInfo.projectRoot,
+      projectInfo.framework,
+      projectInfo.nextRouterType,
+      collectedOptions
+    );
+    if (!result.success) {
+      logger.break();
+      logger.error(result.message);
+      logger.break();
+      process.exit(1);
+    }
+    const hasChanges = !result.noChanges && result.originalContent && result.newContent;
+    if (hasChanges) {
+      logger.break();
+      printDiff(result.filePath, result.originalContent, result.newContent);
+      logger.break();
+      const { proceed } = await prompts2__default.default({
+        type: "confirm",
+        name: "proceed",
+        message: "Apply these changes?",
+        initial: true
+      });
+      if (!proceed) {
+        logger.break();
+        logger.log("Changes cancelled.");
+        logger.break();
+        process.exit(0);
+      }
+      const writeSpinner = spinner(
+        `Applying changes to ${result.filePath}.`
+      ).start();
+      const writeResult = applyOptionsTransform(result);
+      if (!writeResult.success) {
+        writeSpinner.fail();
+        logger.break();
+        logger.error(writeResult.error || "Failed to write file.");
+        logger.break();
+        process.exit(1);
+      }
+      writeSpinner.succeed();
+    } else {
+      logger.break();
+      logger.log("No changes needed.");
+    }
+    logger.break();
+    logger.log(
+      `${highlighter.success("Success!")} React Grab options have been configured.`
+    );
+    logger.break();
+  } catch (error) {
+    handleError(error);
+  }
+});
+var VERSION3 = "0.0.86";
 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) => {
@@ -1367,7 +1763,7 @@ var reportToCli = async (type, config, error) => {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
         type,
-        version: VERSION2,
+        version: VERSION3,
         config,
         error: error ? { message: error.message, stack: error.stack } : void 0,
         timestamp: (/* @__PURE__ */ new Date()).toISOString()
@@ -1397,14 +1793,14 @@ var UNSUPPORTED_FRAMEWORK_NAMES = {
 };
 var init = new commander.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, codex, gemini, amp, ami, instant)"
+  "agent integration (claude-code, cursor, opencode, codex, gemini, amp, ami, visual-edit)"
 ).option("--skip-install", "skip package installation", false).option(
   "-c, --cwd <cwd>",
   "working directory (defaults to current directory)",
   process.cwd()
 ).action(async (opts) => {
   console.log(
-    `${pc__default.default.magenta("\u269B")} ${pc__default.default.bold("React Grab")} ${pc__default.default.gray(VERSION2)}`
+    `${pc__default.default.magenta("\u273F")} ${pc__default.default.bold("React Grab")} ${pc__default.default.gray(VERSION3)}`
   );
   console.log();
   try {
@@ -1529,7 +1925,7 @@ var init = new commander.Command().name("init").description("initialize React Gr
           { title: "Gemini", value: "gemini" },
           { title: "Amp", value: "amp" },
           { title: "Ami", value: "ami" },
-          { title: "Instant", value: "instant" }
+          { title: "Visual Edit", value: "visual-edit" }
         ]
       });
       if (agent === void 0) {
@@ -1667,7 +2063,7 @@ var init = new commander.Command().name("init").description("initialize React Gr
     await reportToCli("error", void 0, error);
   }
 });
-var VERSION3 = "0.0.84";
+var VERSION4 = "0.0.86";
 var DEFAULT_PROXY_PORT = 2e3;
 var REACT_GRAB_SCRIPT = '<script src="//unpkg.com/react-grab/dist/index.global.js"></script>';
 var buildProviderScript = (provider) => `<script src="//unpkg.com/${provider}/dist/client.global.js"></script>`;
@@ -1712,7 +2108,7 @@ var start = new commander.Command().name("start").alias("proxy").description("st
   "provider package to run via npx (e.g., @react-grab/cursor)"
 ).action(async (urlArg, opts) => {
   console.log(
-    `${pc__default.default.magenta("\u269B")} ${pc__default.default.bold("React Grab")} ${pc__default.default.gray(VERSION3)}`
+    `${pc__default.default.magenta("\u273F")} ${pc__default.default.bold("React Grab")} ${pc__default.default.gray(VERSION4)}`
   );
   console.log();
   let url = urlArg;
@@ -1892,8 +2288,8 @@ var start = new commander.Command().name("start").alias("proxy").description("st
 });
 
 // src/cli.ts
-var VERSION4 = "0.0.84";
-var VERSION_API_URL = "https://react-grab.com/api/version";
+var VERSION5 = "0.0.86";
+var VERSION_API_URL = "https://www.react-grab.com/api/version";
 process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));
 try {
@@ -1901,8 +2297,9 @@ try {
   });
 } catch {
 }
-var program = new commander.Command().name("react-grab").description("add React Grab to your project").version(VERSION4, "-v, --version", "display the version number");
+var program = new commander.Command().name("react-grab").description("add React Grab to your project").version(VERSION5, "-v, --version", "display the version number");
 program.addCommand(init);
 program.addCommand(add);
+program.addCommand(configure);
 program.addCommand(start);
 program.parse();

package/dist/cli.js

@@ -247,7 +247,7 @@ var AGENT_PACKAGES = [
   "@react-grab/gemini",
   "@react-grab/amp",
   "@react-grab/ami",
-  "@react-grab/instant"
+  "@react-grab/visual-edit"
 ];
 var detectUnsupportedFramework = (projectRoot) => {
   const packageJsonPath = join(projectRoot, "package.json");
@@ -1038,11 +1038,11 @@ var AGENT_PREFIXES = {
   amp: "npx @react-grab/amp@latest &&"
 };
 var previewPackageJsonTransform = (projectRoot, agent, installedAgents) => {
-  if (agent === "none" || agent === "ami" || agent === "instant") {
+  if (agent === "none" || agent === "ami" || agent === "visual-edit") {
     return {
       success: true,
       filePath: "",
-      message: agent === "ami" || agent === "instant" ? `${agent === "ami" ? "Ami" : "Instant"} does not require package.json modification` : "No agent selected, skipping package.json modification",
+      message: agent === "ami" || agent === "visual-edit" ? `${agent === "ami" ? "Ami" : "Visual Edit"} does not require package.json modification` : "No agent selected, skipping package.json modification",
       noChanges: true
     };
   }
@@ -1129,9 +1129,197 @@ var applyPackageJsonTransform = (result) => {
   }
   return { success: true };
 };
+var formatOptionsForNextjs = (options) => {
+  const parts = [];
+  if (options.activationKey) {
+    const keyParts = [];
+    if (options.activationKey.key)
+      keyParts.push(`key: "${options.activationKey.key}"`);
+    if (options.activationKey.metaKey) keyParts.push("metaKey: true");
+    if (options.activationKey.ctrlKey) keyParts.push("ctrlKey: true");
+    if (options.activationKey.shiftKey) keyParts.push("shiftKey: true");
+    if (options.activationKey.altKey) keyParts.push("altKey: true");
+    if (keyParts.length > 0) {
+      parts.push(`activationKey: { ${keyParts.join(", ")} }`);
+    }
+  }
+  if (options.activationMode) {
+    parts.push(`activationMode: "${options.activationMode}"`);
+  }
+  if (options.keyHoldDuration !== void 0) {
+    parts.push(`keyHoldDuration: ${options.keyHoldDuration}`);
+  }
+  if (options.allowActivationInsideInput !== void 0) {
+    parts.push(
+      `allowActivationInsideInput: ${options.allowActivationInsideInput}`
+    );
+  }
+  if (options.maxContextLines !== void 0) {
+    parts.push(`maxContextLines: ${options.maxContextLines}`);
+  }
+  return `{ ${parts.join(", ")} }`;
+};
+var formatOptionsAsJson = (options) => {
+  const cleanOptions = {};
+  if (options.activationKey) {
+    const activationKey = {};
+    if (options.activationKey.key) activationKey.key = options.activationKey.key;
+    if (options.activationKey.metaKey) activationKey.metaKey = true;
+    if (options.activationKey.ctrlKey) activationKey.ctrlKey = true;
+    if (options.activationKey.shiftKey) activationKey.shiftKey = true;
+    if (options.activationKey.altKey) activationKey.altKey = true;
+    if (Object.keys(activationKey).length > 0) {
+      cleanOptions.activationKey = activationKey;
+    }
+  }
+  if (options.activationMode) {
+    cleanOptions.activationMode = options.activationMode;
+  }
+  if (options.keyHoldDuration !== void 0) {
+    cleanOptions.keyHoldDuration = options.keyHoldDuration;
+  }
+  if (options.allowActivationInsideInput !== void 0) {
+    cleanOptions.allowActivationInsideInput = options.allowActivationInsideInput;
+  }
+  if (options.maxContextLines !== void 0) {
+    cleanOptions.maxContextLines = options.maxContextLines;
+  }
+  return JSON.stringify(cleanOptions);
+};
+var findReactGrabFile = (projectRoot, framework, nextRouterType) => {
+  switch (framework) {
+    case "next":
+      if (nextRouterType === "app") {
+        return findLayoutFile(projectRoot);
+      }
+      return findDocumentFile(projectRoot);
+    case "vite":
+      return findIndexHtml(projectRoot);
+    case "webpack":
+      return findEntryFile(projectRoot);
+    default:
+      return null;
+  }
+};
+var addOptionsToNextScript = (originalContent, options, filePath) => {
+  const reactGrabScriptMatch = originalContent.match(
+    /(<Script[^>]*react-grab[^>]*)(\/?>)/is
+  );
+  if (!reactGrabScriptMatch) {
+    return {
+      success: false,
+      filePath,
+      message: "Could not find React Grab Script tag"
+    };
+  }
+  const scriptTag = reactGrabScriptMatch[0];
+  const scriptOpening = reactGrabScriptMatch[1];
+  const scriptClosing = reactGrabScriptMatch[2];
+  const existingDataOptionsMatch = scriptTag.match(
+    /data-options=\{JSON\.stringify\([^)]+\)\}/
+  );
+  const dataOptionsAttr = `data-options={JSON.stringify(
+              ${formatOptionsForNextjs(options)}
+            )}`;
+  let newScriptTag;
+  if (existingDataOptionsMatch) {
+    newScriptTag = scriptTag.replace(existingDataOptionsMatch[0], dataOptionsAttr);
+  } else {
+    newScriptTag = `${scriptOpening}
+            ${dataOptionsAttr}
+          ${scriptClosing}`;
+  }
+  const newContent = originalContent.replace(scriptTag, newScriptTag);
+  return {
+    success: true,
+    filePath,
+    message: "Update React Grab options",
+    originalContent,
+    newContent
+  };
+};
+var addOptionsToViteScript = (originalContent, options, filePath) => {
+  const reactGrabImportMatch = originalContent.match(
+    /import\s*\(\s*["']react-grab["']\s*\)/
+  );
+  if (!reactGrabImportMatch) {
+    return {
+      success: false,
+      filePath,
+      message: "Could not find React Grab import"
+    };
+  }
+  const optionsJson = formatOptionsAsJson(options);
+  const newImport = `import("react-grab").then((m) => m.init(${optionsJson}))`;
+  const newContent = originalContent.replace(reactGrabImportMatch[0], newImport);
+  return {
+    success: true,
+    filePath,
+    message: "Update React Grab options",
+    originalContent,
+    newContent
+  };
+};
+var addOptionsToWebpackImport = (originalContent, options, filePath) => {
+  const reactGrabImportMatch = originalContent.match(
+    /import\s*\(\s*["']react-grab["']\s*\)/
+  );
+  if (!reactGrabImportMatch) {
+    return {
+      success: false,
+      filePath,
+      message: "Could not find React Grab import"
+    };
+  }
+  const optionsJson = formatOptionsAsJson(options);
+  const newImport = `import("react-grab").then((m) => m.init(${optionsJson}))`;
+  const newContent = originalContent.replace(reactGrabImportMatch[0], newImport);
+  return {
+    success: true,
+    filePath,
+    message: "Update React Grab options",
+    originalContent,
+    newContent
+  };
+};
+var previewOptionsTransform = (projectRoot, framework, nextRouterType, options) => {
+  const filePath = findReactGrabFile(projectRoot, framework, nextRouterType);
+  if (!filePath) {
+    return {
+      success: false,
+      filePath: "",
+      message: "Could not find file containing React Grab configuration"
+    };
+  }
+  const originalContent = readFileSync(filePath, "utf-8");
+  if (!hasReactGrabCode(originalContent)) {
+    return {
+      success: false,
+      filePath,
+      message: "Could not find React Grab code in the file"
+    };
+  }
+  switch (framework) {
+    case "next":
+      return addOptionsToNextScript(originalContent, options, filePath);
+    case "vite":
+      return addOptionsToViteScript(originalContent, options, filePath);
+    case "webpack":
+      return addOptionsToWebpackImport(originalContent, options, filePath);
+    default:
+      return {
+        success: false,
+        filePath,
+        message: `Unknown framework: ${framework}`
+      };
+  }
+};
+var applyOptionsTransform = (result) => {
+  return applyTransform(result);
+};
 
 // src/commands/add.ts
-var VERSION = "0.0.84";
+var VERSION = "0.0.86";
 var AGENT_NAMES = {
   "claude-code": "Claude Code",
   cursor: "Cursor",
@@ -1140,18 +1328,18 @@ var AGENT_NAMES = {
   gemini: "Gemini",
   amp: "Amp",
   ami: "Ami",
-  instant: "Instant"
+  "visual-edit": "Visual Edit"
 };
 var add = new Command().name("add").description("add an agent integration").argument(
   "[agent]",
-  "agent to add (claude-code, cursor, opencode, codex, gemini, amp, ami, instant)"
+  "agent to add (claude-code, cursor, opencode, codex, gemini, amp, ami, visual-edit)"
 ).option("-y, --yes", "skip confirmation prompts", false).option(
   "-c, --cwd <cwd>",
   "working directory (defaults to current directory)",
   process.cwd()
 ).action(async (agentArg, opts) => {
   console.log(
-    `${pc.magenta("\u269B")} ${pc.bold("React Grab")} ${pc.gray(VERSION)}`
+    `${pc.magenta("\u273F")} ${pc.bold("React Grab")} ${pc.gray(VERSION)}`
   );
   console.log();
   try {
@@ -1177,7 +1365,7 @@ var add = new Command().name("add").description("add an agent integration").argu
       "gemini",
       "amp",
       "ami",
-      "instant"
+      "visual-edit"
     ].filter((agent) => !projectInfo.installedAgents.includes(agent));
     if (availableAgents.length === 0) {
       logger.break();
@@ -1200,7 +1388,7 @@ var add = new Command().name("add").description("add an agent integration").argu
         logger.break();
         logger.error(`Invalid agent: ${agentArg}`);
         logger.error(
-          "Available agents: claude-code, cursor, opencode, codex, gemini, amp, ami, instant"
+          "Available agents: claude-code, cursor, opencode, codex, gemini, amp, ami, visual-edit"
         );
         logger.break();
         process.exit(1);
@@ -1349,7 +1537,215 @@ var add = new Command().name("add").description("add an agent integration").argu
     handleError(error);
   }
 });
-var VERSION2 = "0.0.84";
+var VERSION2 = "0.0.86";
+var MODIFIER_KEY_NAMES = {
+  metaKey: process.platform === "darwin" ? "\u2318 Command" : "\u229E Windows",
+  ctrlKey: "Ctrl",
+  shiftKey: "Shift",
+  altKey: process.platform === "darwin" ? "\u2325 Option" : "Alt"
+};
+var formatActivationKey = (activationKey) => {
+  if (!activationKey) return "Default (Option/Alt)";
+  const parts = [];
+  if (activationKey.metaKey) parts.push(process.platform === "darwin" ? "\u2318" : "Win");
+  if (activationKey.ctrlKey) parts.push("Ctrl");
+  if (activationKey.shiftKey) parts.push("Shift");
+  if (activationKey.altKey) parts.push(process.platform === "darwin" ? "\u2325" : "Alt");
+  if (activationKey.key) parts.push(activationKey.key.toUpperCase());
+  return parts.length > 0 ? parts.join(" + ") : "Default (Option/Alt)";
+};
+var configure = new Command().name("configure").alias("config").description("configure React Grab options").option("-y, --yes", "skip confirmation prompts", false).option(
+  "-c, --cwd <cwd>",
+  "working directory (defaults to current directory)",
+  process.cwd()
+).action(async (opts) => {
+  console.log(
+    `${pc.magenta("\u273F")} ${pc.bold("React Grab")} ${pc.gray(VERSION2)}`
+  );
+  console.log();
+  try {
+    const cwd = opts.cwd;
+    const isNonInteractive = opts.yes;
+    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();
+    if (isNonInteractive) {
+      logger.break();
+      logger.error("Configure command requires interactive mode.");
+      logger.error("Remove the --yes flag to use interactive prompts.");
+      logger.break();
+      process.exit(1);
+    }
+    logger.break();
+    logger.log(`Configure ${highlighter.info("React Grab")} options:`);
+    logger.break();
+    const collectedOptions = {};
+    const { wantActivationKey } = await prompts2({
+      type: "confirm",
+      name: "wantActivationKey",
+      message: `Configure ${highlighter.info("activation key")}?`,
+      initial: false
+    });
+    if (wantActivationKey === void 0) {
+      logger.break();
+      process.exit(1);
+    }
+    if (wantActivationKey) {
+      const { key } = await prompts2({
+        type: "text",
+        name: "key",
+        message: "Enter the activation key (e.g., g, k, space):",
+        initial: ""
+      });
+      if (key === void 0) {
+        logger.break();
+        process.exit(1);
+      }
+      const { modifiers } = await prompts2({
+        type: "multiselect",
+        name: "modifiers",
+        message: "Select modifier keys (space to select, enter to confirm):",
+        choices: [
+          { title: MODIFIER_KEY_NAMES.metaKey, value: "metaKey" },
+          { title: MODIFIER_KEY_NAMES.ctrlKey, value: "ctrlKey" },
+          { title: MODIFIER_KEY_NAMES.shiftKey, value: "shiftKey" },
+          { title: MODIFIER_KEY_NAMES.altKey, value: "altKey", selected: true }
+        ],
+        hint: "- Space to select, Enter to confirm"
+      });
+      if (modifiers === void 0) {
+        logger.break();
+        process.exit(1);
+      }
+      collectedOptions.activationKey = {
+        ...key && { key: key.toLowerCase() },
+        ...modifiers.includes("metaKey") && { metaKey: true },
+        ...modifiers.includes("ctrlKey") && { ctrlKey: true },
+        ...modifiers.includes("shiftKey") && { shiftKey: true },
+        ...modifiers.includes("altKey") && { altKey: true }
+      };
+      logger.log(
+        `  Activation key: ${highlighter.info(formatActivationKey(collectedOptions.activationKey))}`
+      );
+    }
+    const { activationMode } = await prompts2({
+      type: "select",
+      name: "activationMode",
+      message: `Select ${highlighter.info("activation mode")}:`,
+      choices: [
+        { title: "Toggle (press to activate/deactivate)", value: "toggle" },
+        { title: "Hold (hold key to keep active)", value: "hold" }
+      ],
+      initial: 0
+    });
+    if (activationMode === void 0) {
+      logger.break();
+      process.exit(1);
+    }
+    collectedOptions.activationMode = activationMode;
+    if (activationMode === "hold") {
+      const { keyHoldDuration } = await prompts2({
+        type: "number",
+        name: "keyHoldDuration",
+        message: `Enter ${highlighter.info("key hold duration")} in milliseconds:`,
+        initial: 150,
+        min: 0,
+        max: 2e3
+      });
+      if (keyHoldDuration === void 0) {
+        logger.break();
+        process.exit(1);
+      }
+      collectedOptions.keyHoldDuration = keyHoldDuration;
+    }
+    const { allowActivationInsideInput } = await prompts2({
+      type: "confirm",
+      name: "allowActivationInsideInput",
+      message: `Allow activation ${highlighter.info("inside input fields")}?`,
+      initial: true
+    });
+    if (allowActivationInsideInput === void 0) {
+      logger.break();
+      process.exit(1);
+    }
+    collectedOptions.allowActivationInsideInput = allowActivationInsideInput;
+    const { maxContextLines } = await prompts2({
+      type: "number",
+      name: "maxContextLines",
+      message: `Enter ${highlighter.info("max context lines")} to include:`,
+      initial: 3,
+      min: 0,
+      max: 50
+    });
+    if (maxContextLines === void 0) {
+      logger.break();
+      process.exit(1);
+    }
+    collectedOptions.maxContextLines = maxContextLines;
+    const result = previewOptionsTransform(
+      projectInfo.projectRoot,
+      projectInfo.framework,
+      projectInfo.nextRouterType,
+      collectedOptions
+    );
+    if (!result.success) {
+      logger.break();
+      logger.error(result.message);
+      logger.break();
+      process.exit(1);
+    }
+    const hasChanges = !result.noChanges && result.originalContent && result.newContent;
+    if (hasChanges) {
+      logger.break();
+      printDiff(result.filePath, result.originalContent, result.newContent);
+      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 writeSpinner = spinner(
+        `Applying changes to ${result.filePath}.`
+      ).start();
+      const writeResult = applyOptionsTransform(result);
+      if (!writeResult.success) {
+        writeSpinner.fail();
+        logger.break();
+        logger.error(writeResult.error || "Failed to write file.");
+        logger.break();
+        process.exit(1);
+      }
+      writeSpinner.succeed();
+    } else {
+      logger.break();
+      logger.log("No changes needed.");
+    }
+    logger.break();
+    logger.log(
+      `${highlighter.success("Success!")} React Grab options have been configured.`
+    );
+    logger.break();
+  } catch (error) {
+    handleError(error);
+  }
+});
+var VERSION3 = "0.0.86";
 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) => {
@@ -1359,7 +1755,7 @@ var reportToCli = async (type, config, error) => {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
         type,
-        version: VERSION2,
+        version: VERSION3,
         config,
         error: error ? { message: error.message, stack: error.stack } : void 0,
         timestamp: (/* @__PURE__ */ new Date()).toISOString()
@@ -1389,14 +1785,14 @@ var UNSUPPORTED_FRAMEWORK_NAMES = {
 };
 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, codex, gemini, amp, ami, instant)"
+  "agent integration (claude-code, cursor, opencode, codex, gemini, amp, ami, visual-edit)"
 ).option("--skip-install", "skip package installation", false).option(
   "-c, --cwd <cwd>",
   "working directory (defaults to current directory)",
   process.cwd()
 ).action(async (opts) => {
   console.log(
-    `${pc.magenta("\u269B")} ${pc.bold("React Grab")} ${pc.gray(VERSION2)}`
+    `${pc.magenta("\u273F")} ${pc.bold("React Grab")} ${pc.gray(VERSION3)}`
   );
   console.log();
   try {
@@ -1521,7 +1917,7 @@ var init = new Command().name("init").description("initialize React Grab in your
           { title: "Gemini", value: "gemini" },
           { title: "Amp", value: "amp" },
           { title: "Ami", value: "ami" },
-          { title: "Instant", value: "instant" }
+          { title: "Visual Edit", value: "visual-edit" }
         ]
       });
       if (agent === void 0) {
@@ -1659,7 +2055,7 @@ var init = new Command().name("init").description("initialize React Grab in your
     await reportToCli("error", void 0, error);
   }
 });
-var VERSION3 = "0.0.84";
+var VERSION4 = "0.0.86";
 var DEFAULT_PROXY_PORT = 2e3;
 var REACT_GRAB_SCRIPT = '<script src="//unpkg.com/react-grab/dist/index.global.js"></script>';
 var buildProviderScript = (provider) => `<script src="//unpkg.com/${provider}/dist/client.global.js"></script>`;
@@ -1704,7 +2100,7 @@ var start = new Command().name("start").alias("proxy").description("start a prox
   "provider package to run via npx (e.g., @react-grab/cursor)"
 ).action(async (urlArg, opts) => {
   console.log(
-    `${pc.magenta("\u269B")} ${pc.bold("React Grab")} ${pc.gray(VERSION3)}`
+    `${pc.magenta("\u273F")} ${pc.bold("React Grab")} ${pc.gray(VERSION4)}`
   );
   console.log();
   let url = urlArg;
@@ -1884,8 +2280,8 @@ var start = new Command().name("start").alias("proxy").description("start a prox
 });
 
 // src/cli.ts
-var VERSION4 = "0.0.84";
-var VERSION_API_URL = "https://react-grab.com/api/version";
+var VERSION5 = "0.0.86";
+var VERSION_API_URL = "https://www.react-grab.com/api/version";
 process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));
 try {
@@ -1893,8 +2289,9 @@ try {
   });
 } catch {
 }
-var program = new Command().name("react-grab").description("add React Grab to your project").version(VERSION4, "-v, --version", "display the version number");
+var program = new Command().name("react-grab").description("add React Grab to your project").version(VERSION5, "-v, --version", "display the version number");
 program.addCommand(init);
 program.addCommand(add);
+program.addCommand(configure);
 program.addCommand(start);
 program.parse();

package/package.json

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