feat(FR-2218): integrate react-grab for AI agent element inspection (#5887)

Author: yomybaby

react/package.json

@@ -51,8 +51,8 @@
     "lucide-react": "catalog:",
     "markdown-to-jsx": "^7.7.17",
     "marked": "catalog:",
-    "nanoid": "^5.1.6",
     "markty-toml": "catalog:",
+    "nanoid": "^5.1.6",
     "nuqs": "^2.8.6",
     "p-queue": "^8.1.1",
     "prettier": "catalog:",
@@ -151,6 +151,7 @@
     "nodemon": "^3.1.11",
     "prop-types": "^15.8.1",
     "react-dev-utils": "^12.0.1",
+    "react-grab": "^0.1.21",
     "react-scripts": "5.0.1",
     "react-test-renderer": "^19.2.3",
     "relay-compiler": "catalog:",

react/src/index.tsx

@@ -23,6 +23,15 @@ import ReactDOM from 'react-dom/client';
 // This can cause Relay to show "Warning: RelayResponseNormalizer: Payload did not contain a value for field" in the browser console during development.
 // It's advisable to ignore these frequent logs in development mode.
 if (process.env.NODE_ENV === 'development') {
+  // Enable react-grab for AI agent element inspection during development
+  import('react-grab').catch((error) => {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Failed to load react-grab devtool. AI agent element inspection will be disabled.',
+      error,
+    );
+  });
+
   // eslint-disable-next-line no-console
   const originalConsoleError = console.error;
   // eslint-disable-next-line no-console