fix

Author: aidenybai

packages/cli/src/commands/add.ts

@@ -197,40 +197,40 @@ export const add = new Command()
 
           agentIntegration = agent as AgentIntegration;
 
-        if (projectInfo.installedAgents.length > 0) {
-          const installedNames = formatInstalledAgentNames(
-            projectInfo.installedAgents,
-          );
-
-          const { action } = await prompts({
-            type: "select",
-            name: "action",
-            message: "How would you like to proceed?",
-            choices: [
-              {
-                title: `Replace ${installedNames} with ${getAgentDisplayName(agentIntegration)}`,
-                value: "replace",
-              },
-              {
-                title: `Add ${getAgentDisplayName(agentIntegration)} alongside existing`,
-                value: "add",
-              },
-              { title: "Cancel", value: "cancel" },
-            ],
-          });
+          if (projectInfo.installedAgents.length > 0) {
+            const installedNames = formatInstalledAgentNames(
+              projectInfo.installedAgents,
+            );
 
-          if (!action || action === "cancel") {
-            logger.break();
-            logger.log("Changes cancelled.");
-            logger.break();
-            process.exit(0);
-          }
+            const { action } = await prompts({
+              type: "select",
+              name: "action",
+              message: "How would you like to proceed?",
+              choices: [
+                {
+                  title: `Replace ${installedNames} with ${getAgentDisplayName(agentIntegration)}`,
+                  value: "replace",
+                },
+                {
+                  title: `Add ${getAgentDisplayName(agentIntegration)} alongside existing`,
+                  value: "add",
+                },
+                { title: "Cancel", value: "cancel" },
+              ],
+            });
+
+            if (!action || action === "cancel") {
+              logger.break();
+              logger.log("Changes cancelled.");
+              logger.break();
+              process.exit(0);
+            }
 
-          if (action === "replace") {
-            agentsToRemove = [...projectInfo.installedAgents] as Agent[];
+            if (action === "replace") {
+              agentsToRemove = [...projectInfo.installedAgents] as Agent[];
+            }
           }
         }
-        }
       } else {
         logger.break();
         logger.error("Please specify an agent to connect.");

packages/cli/src/commands/init.ts

@@ -465,9 +465,7 @@ export const init = new Command()
             }
 
             const hasLayoutChanges =
-              !result.noChanges &&
-              result.originalContent &&
-              result.newContent;
+              !result.noChanges && result.originalContent && result.newContent;
             const hasPackageJsonChanges =
               packageJsonResult.success &&
               !packageJsonResult.noChanges &&

packages/cli/src/commands/remove.ts

@@ -21,10 +21,7 @@ const VERSION = process.env.VERSION ?? "0.0.1";
 export const remove = new Command()
   .name("remove")
   .description("disconnect React Grab from your agent")
-  .argument(
-    "[agent]",
-    `agent to disconnect (${AGENTS.join(", ")}, mcp)`,
-  )
+  .argument("[agent]", `agent to disconnect (${AGENTS.join(", ")}, mcp)`)
   .option("-y, --yes", "skip confirmation prompts", false)
   .option(
     "-c, --cwd <cwd>",

packages/cli/test/install-mcp.test.ts

@@ -231,9 +231,7 @@ describe("installTomlClient", () => {
     const content = fs.readFileSync(client.configPath, "utf8");
     expect(content).toContain("[mcp_servers.react-grab-mcp]");
     expect(content).toContain('command = "npx"');
-    expect(content).toContain(
-      'args = ["-y", "@react-grab/mcp", "--stdio"]',
-    );
+    expect(content).toContain('args = ["-y", "@react-grab/mcp", "--stdio"]');
   });
 
   it("should append to an existing TOML file", () => {
@@ -262,7 +260,7 @@ describe("installTomlClient", () => {
     const content = fs.readFileSync(client.configPath, "utf8");
     expect(content).toContain('command = "npx"');
     expect(content).not.toContain('command = "old"');
-    expect(content).toContain('[other]');
+    expect(content).toContain("[other]");
   });
 
   it("should create nested directories if needed", () => {

packages/mcp/src/client.ts

@@ -1,9 +1,4 @@
-import type {
-  init,
-  ReactGrabAPI,
-  Plugin,
-  AgentContext,
-} from "react-grab/core";
+import type { init, ReactGrabAPI, Plugin, AgentContext } from "react-grab/core";
 import { DEFAULT_MCP_PORT } from "./constants.js";
 
 interface McpPluginOptions {
@@ -22,9 +17,7 @@ const sendContextToServer = async (
   }).catch(() => {});
 };
 
-export const createMcpPlugin = (
-  options: McpPluginOptions = {},
-): Plugin => {
+export const createMcpPlugin = (options: McpPluginOptions = {}): Plugin => {
   const port = options.port ?? DEFAULT_MCP_PORT;
   const contextUrl = `http://localhost:${port}/context`;
 

packages/mcp/src/server.ts

@@ -16,7 +16,9 @@ const sleep = (ms: number): Promise<void> =>
   new Promise((resolve) => setTimeout(resolve, ms));
 
 const agentContextSchema = z.object({
-  content: z.array(z.string()).describe("Array of context strings (HTML + component stack traces)"),
+  content: z
+    .array(z.string())
+    .describe("Array of context strings (HTML + component stack traces)"),
   prompt: z.string().optional().describe("User prompt or instruction"),
 });
 
@@ -97,8 +99,14 @@ const createHttpServer = (port: number): Server => {
     const url = new URL(request.url ?? "/", `http://localhost:${port}`);
 
     response.setHeader("Access-Control-Allow-Origin", "*");
-    response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, OPTIONS");
-    response.setHeader("Access-Control-Allow-Headers", "Content-Type, mcp-session-id");
+    response.setHeader(
+      "Access-Control-Allow-Methods",
+      "POST, GET, DELETE, OPTIONS",
+    );
+    response.setHeader(
+      "Access-Control-Allow-Headers",
+      "Content-Type, mcp-session-id",
+    );
     response.setHeader("Access-Control-Expose-Headers", "mcp-session-id");
 
     if (request.method === "OPTIONS") {
@@ -107,9 +115,9 @@ const createHttpServer = (port: number): Server => {
     }
 
     if (url.pathname === "/health") {
-      response.writeHead(200, { "Content-Type": "application/json" }).end(
-        JSON.stringify({ status: "ok" }),
-      );
+      response
+        .writeHead(200, { "Content-Type": "application/json" })
+        .end(JSON.stringify({ status: "ok" }));
       return;
     }
 
@@ -125,13 +133,13 @@ const createHttpServer = (port: number): Server => {
           context: agentContextSchema.parse(body),
           submittedAt: Date.now(),
         };
-        response.writeHead(200, { "Content-Type": "application/json" }).end(
-          JSON.stringify({ status: "ok" }),
-        );
+        response
+          .writeHead(200, { "Content-Type": "application/json" })
+          .end(JSON.stringify({ status: "ok" }));
       } catch {
-        response.writeHead(400, { "Content-Type": "application/json" }).end(
-          JSON.stringify({ error: "Invalid context payload" }),
-        );
+        response
+          .writeHead(400, { "Content-Type": "application/json" })
+          .end(JSON.stringify({ error: "Invalid context payload" }));
       }
       return;
     }
@@ -166,9 +174,13 @@ const createHttpServer = (port: number): Server => {
         return;
       }
 
-      response.writeHead(400, { "Content-Type": "application/json" }).end(
-        JSON.stringify({ error: "No valid session. Send an initialize request first." }),
-      );
+      response
+        .writeHead(400, { "Content-Type": "application/json" })
+        .end(
+          JSON.stringify({
+            error: "No valid session. Send an initialize request first.",
+          }),
+        );
       return;
     }
 
@@ -231,12 +243,15 @@ export const startMcpServer = async ({
     await mcpServer.server.connect(transport);
 
     startHttpServer(port).then(
-      () => console.error(`React Grab context server listening on port ${port}`),
+      () =>
+        console.error(`React Grab context server listening on port ${port}`),
       (error) => console.error(`Failed to start context server: ${error}`),
     );
     return;
   }
 
   await startHttpServer(port);
-  console.log(`React Grab MCP server listening on http://localhost:${port}/mcp`);
+  console.log(
+    `React Grab MCP server listening on http://localhost:${port}/mcp`,
+  );
 };

packages/react-grab/e2e/fixtures.ts

@@ -903,37 +903,40 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
     }, ATTRIBUTE_NAME);
   };
 
-  const getSelectionLabelBounds = async (): Promise<SelectionLabelBounds | null> => {
-    return page.evaluate((attrName) => {
-      const host = document.querySelector(`[${attrName}]`);
-      const shadowRoot = host?.shadowRoot;
-      if (!shadowRoot) return null;
-      const root = shadowRoot.querySelector(`[${attrName}]`);
-      if (!root) return null;
+  const getSelectionLabelBounds =
+    async (): Promise<SelectionLabelBounds | null> => {
+      return page.evaluate((attrName) => {
+        const host = document.querySelector(`[${attrName}]`);
+        const shadowRoot = host?.shadowRoot;
+        if (!shadowRoot) return null;
+        const root = shadowRoot.querySelector(`[${attrName}]`);
+        if (!root) return null;
 
-      const label = root.querySelector<HTMLElement>(
-        "[data-react-grab-selection-label]",
-      );
-      if (!label) return null;
+        const label = root.querySelector<HTMLElement>(
+          "[data-react-grab-selection-label]",
+        );
+        if (!label) return null;
 
-      const toRect = (rect: DOMRect) => ({
-        x: rect.x,
-        y: rect.y,
-        width: rect.width,
-        height: rect.height,
-      });
+        const toRect = (rect: DOMRect) => ({
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
+        });
 
-      const arrowElement = label.querySelector<HTMLElement>(
-        "[data-react-grab-arrow]",
-      );
+        const arrowElement = label.querySelector<HTMLElement>(
+          "[data-react-grab-arrow]",
+        );
 
-      return {
-        label: toRect(label.getBoundingClientRect()),
-        arrow: arrowElement ? toRect(arrowElement.getBoundingClientRect()) : null,
-        viewport: { width: window.innerWidth, height: window.innerHeight },
-      };
-    }, ATTRIBUTE_NAME);
-  };
+        return {
+          label: toRect(label.getBoundingClientRect()),
+          arrow: arrowElement
+            ? toRect(arrowElement.getBoundingClientRect())
+            : null,
+          viewport: { width: window.innerWidth, height: window.innerHeight },
+        };
+      }, ATTRIBUTE_NAME);
+    };
 
   const isSelectionLabelVisible = async (): Promise<boolean> => {
     const info = await getSelectionLabelInfo();

packages/react-grab/src/constants.ts

@@ -11,9 +11,9 @@ export const FADE_COMPLETE_BUFFER_MS = 150;
 export const DISMISS_ANIMATION_BUFFER_MS = 50;
 export const KEYDOWN_SPAM_TIMEOUT_MS = 200;
 export const BLUR_DEACTIVATION_THRESHOLD_MS = 500;
-export const INPUT_FOCUS_ACTIVATION_DELAY_MS = 150;
-export const INPUT_TEXT_SELECTION_ACTIVATION_DELAY_MS = 300;
-export const DEFAULT_KEY_HOLD_DURATION_MS = 75;
+export const INPUT_FOCUS_ACTIVATION_DELAY_MS = 200;
+export const INPUT_TEXT_SELECTION_ACTIVATION_DELAY_MS = 400;
+export const DEFAULT_KEY_HOLD_DURATION_MS = 100;
 export const MIN_HOLD_FOR_ACTIVATION_AFTER_COPY_MS = 200;
 export const RECENT_THRESHOLD_MS = 10_000;
 export const ACTION_CYCLE_IDLE_TRIGGER_MS = 600;

packages/react-grab/src/utils/copy-content.ts

@@ -29,13 +29,12 @@ interface LexicalNode {
   source?: string;
 }
 
-const generateUuid = (): string => {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (char) => {
-    const random = (Math.random() * 16) | 0;
-    const value = char === "x" ? random : (random & 0x3) | 0x8;
-    return value.toString(16);
+const generateUuid = (): string =>
+  "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (character) => {
+    const randomNibble = (Math.random() * 16) | 0;
+    const hexValue = character === "x" ? randomNibble : (randomNibble & 0x3) | 0x8;
+    return hexValue.toString(16);
   });
-};
 
 const createMentionNode = (
   displayName: string,
@@ -67,13 +66,26 @@ const createTextNode = (text: string): LexicalNode => ({
   version: 1,
 });
 
+const escapeHtml = (text: string): string =>
+  text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+
+interface ClipboardData {
+  plainText: string;
+  htmlContent: string;
+  lexicalData: string;
+}
+
 // HACK: Cursor's Lexical editor only reads content from registered commands/files,
 // not from embedded clipboard data. We include the content after the mention chip
 // so Cursor can actually read it.
-const createLexicalClipboardData = (
+const createClipboardData = (
   content: string,
   elementName: string,
-): { plainText: string; htmlContent: string; lexicalData: string } => {
+): ClipboardData => {
   const mentionKey = String(Math.floor(Math.random() * 10000));
   const namespaceUuid = generateUuid();
   const displayName = `<${elementName}>`;
@@ -100,14 +112,9 @@ const createLexicalClipboardData = (
     selectedOption,
   };
 
-  const escapedMentionMetadata = JSON.stringify(mentionMetadata).replace(
-    /"/g,
-    "&quot;",
-  );
-
   return {
     plainText: `@${displayName}\n\n${content}\n`,
-    htmlContent: `<meta charset='utf-8'><span data-mention-key="${mentionKey}" data-lexical-mention="true" data-mention-name="${displayName}" data-typeahead-type="[object Object]" data-mention-metadata="${escapedMentionMetadata}">@${displayName}</span><pre><code>${content}</code></pre>`,
+    htmlContent: `<meta charset='utf-8'><pre><code>${escapeHtml(content)}</code></pre>`,
     lexicalData: JSON.stringify({
       namespace: `chat-input${namespaceUuid}-pane`,
       nodes: [
@@ -128,7 +135,7 @@ export const copyContent = (
   options?: CopyContentOptions,
 ): boolean => {
   const elementName = options?.name ?? "div";
-  const { plainText, htmlContent, lexicalData } = createLexicalClipboardData(
+  const { plainText, htmlContent, lexicalData } = createClipboardData(
     content,
     elementName,
   );