Resolve grabs to app source instead of UI library wrappers

README.md

@@ -28,7 +28,8 @@ React Grab turns a browser selection into source context your agent can use:
 The copied context includes the selected element and its component stack with source locations:
 
 ```txt
-[<a class="ml-auto inline-block text-sm" href="#">Forgot your password?</a> in LoginForm (at components/login-form.tsx:46:19)]
+<a class="ml-auto inline-block text-sm" href="#">Forgot your password?</a>
+  in LoginForm (at components/login-form.tsx:46:19)
 ```
 
 ## Manual Installation

packages/grab/README.md

@@ -28,7 +28,8 @@ React Grab turns a browser selection into source context your agent can use:
 The copied context includes the selected element and its component stack with source locations:
 
 ```txt
-[<a class="ml-auto inline-block text-sm" href="#">Forgot your password?</a> in LoginForm (at components/login-form.tsx:46:19)]
+<a class="ml-auto inline-block text-sm" href="#">Forgot your password?</a>
+  in LoginForm (at components/login-form.tsx:46:19)
 ```
 
 ## Manual Installation

packages/react-grab/README.md

@@ -28,7 +28,8 @@ React Grab turns a browser selection into source context your agent can use:
 The copied context includes the selected element and its component stack with source locations:
 
 ```txt
-[<a class="ml-auto inline-block text-sm" href="#">Forgot your password?</a> in LoginForm (at components/login-form.tsx:46:19)]
+<a class="ml-auto inline-block text-sm" href="#">Forgot your password?</a>
+  in LoginForm (at components/login-form.tsx:46:19)
 ```
 
 ## Manual Installation

packages/react-grab/e2e/element-context.spec.ts

@@ -139,5 +139,141 @@ test.describe("Element Context Fallback", () => {
       expect(clipboard).toContain("long-dom-element");
       expect(clipboard.length).toBeLessThanOrEqual(510);
     });
+
+    test("should include descendant text for syntax highlighted code blocks", async ({
+      reactGrab,
+    }) => {
+      await reactGrab.page.evaluate(() => {
+        const wrapper = document.createElement("div");
+        Object.assign(wrapper.style, {
+          position: "fixed",
+          top: "200px",
+          left: "200px",
+          width: "600px",
+          height: "160px",
+          zIndex: "999",
+        });
+
+        const codeBlock = document.createElement("pre");
+        codeBlock.className = "shiki shiki-themes github-light github-dark";
+        codeBlock.tabIndex = 0;
+        codeBlock.innerHTML = `
+          <code>
+            <span class="line"><span>git</span><span> add</span><span> .github/workflows/react-doctor.yml</span></span>
+            <span class="line"><span>git</span><span> commit</span><span> -m</span><span> "Add React Doctor to CI"</span></span>
+            <span class="line"><span>git</span><span> push</span></span>
+          </code>
+        `;
+
+        wrapper.appendChild(codeBlock);
+        document.body.appendChild(wrapper);
+      });
+
+      const didCopy = await reactGrab.copyElementViaApi("pre.shiki");
+      expect(didCopy).toBe(true);
+
+      const clipboard = await reactGrab.getClipboardContent();
+      expect(clipboard).toContain("<pre");
+      expect(clipboard).toContain("git add .github/workflows/react-doctor.yml");
+      expect(clipboard).toContain('git commit -m "Add React Doctor to CI"');
+      expect(clipboard).toContain("</pre>");
+    });
+
+    test("should include descendant text for nested link labels", async ({ reactGrab }) => {
+      await reactGrab.page.evaluate(() => {
+        const wrapper = document.createElement("div");
+        Object.assign(wrapper.style, {
+          position: "fixed",
+          top: "200px",
+          left: "200px",
+          width: "320px",
+          height: "80px",
+          zIndex: "999",
+        });
+
+        const link = document.createElement("a");
+        link.href = "/docs/ci-and-prs/github-actions-setup";
+        link.className = "flex h-8 w-full items-center gap-2 rounded-md px-2";
+        link.innerHTML = `
+          <span aria-hidden="true">#</span>
+          <span><span>GitHub Actions setup</span></span>
+        `;
+
+        wrapper.appendChild(link);
+        document.body.appendChild(wrapper);
+      });
+
+      const didCopy = await reactGrab.copyElementViaApi(
+        "a[href='/docs/ci-and-prs/github-actions-setup']",
+      );
+      expect(didCopy).toBe(true);
+
+      const clipboard = await reactGrab.getClipboardContent();
+      expect(clipboard).toContain('<a href="/docs/ci-and-prs/github-actions-setup"');
+      expect(clipboard).toContain("GitHub Actions setup");
+      expect(clipboard).not.toContain("# GitHub Actions setup");
+      expect(clipboard).toContain('selector: [href="/docs/ci-and-prs/github-actions-setup"]');
+      expect(clipboard).toContain("</a>");
+    });
+
+    test("should skip preview text for hidden selected roots", async ({ reactGrab }) => {
+      await reactGrab.page.evaluate(() => {
+        const wrapper = document.createElement("div");
+        Object.assign(wrapper.style, {
+          position: "fixed",
+          top: "200px",
+          left: "200px",
+          width: "200px",
+          height: "80px",
+          zIndex: "999",
+        });
+
+        const hiddenLabel = document.createElement("span");
+        hiddenLabel.setAttribute("aria-hidden", "true");
+        hiddenLabel.setAttribute("data-testid", "decorative-hidden-label");
+        hiddenLabel.textContent = "Decorative Hidden Label";
+
+        wrapper.appendChild(hiddenLabel);
+        document.body.appendChild(wrapper);
+      });
+
+      const didCopy = await reactGrab.copyElementViaApi("[data-testid='decorative-hidden-label']");
+      expect(didCopy).toBe(true);
+
+      const clipboard = await reactGrab.getClipboardContent();
+      expect(clipboard).toContain('aria-hidden="true"');
+      expect(clipboard).not.toContain("Decorative Hidden Label");
+    });
+
+    test("should include nested text for mixed inline content", async ({ reactGrab }) => {
+      await reactGrab.page.evaluate(() => {
+        const wrapper = document.createElement("div");
+        Object.assign(wrapper.style, {
+          position: "fixed",
+          top: "200px",
+          left: "200px",
+          width: "260px",
+          height: "80px",
+          zIndex: "999",
+        });
+
+        const link = document.createElement("a");
+        link.href = "/docs/mixed-content";
+        link.textContent = "Read ";
+        const emphasizedText = document.createElement("em");
+        emphasizedText.textContent = "the docs";
+        link.appendChild(emphasizedText);
+
+        wrapper.appendChild(link);
+        document.body.appendChild(wrapper);
+      });
+
+      const didCopy = await reactGrab.copyElementViaApi("a[href='/docs/mixed-content']");
+      expect(didCopy).toBe(true);
+
+      const clipboard = await reactGrab.getClipboardContent();
+      expect(clipboard).toContain("Read the docs");
+      expect(clipboard).not.toContain("<em ...>");
+    });
   });
 });

packages/react-grab/package.json

@@ -85,7 +85,7 @@
     "build": "NODE_ENV=production vp pack",
     "build:profiling": "pnpm run prebuild && NODE_ENV=profiling REACT_GRAB_NO_MINIFY=true REACT_GRAB_SOURCEMAP=true vp pack",
     "dev": "concurrently \"pnpm:css:watch\" \"vp pack --watch\"",
-    "test": "playwright test",
+    "test": "vp test run tests && playwright test",
     "test:perf": "playwright test --grep @perf --reporter=list",
     "test:perf:baseline": "PERF_LABEL=baseline playwright test --grep @perf --reporter=list",
     "test:expect": "bun e2e/react-grab.expect.ts",

packages/react-grab/src/components/renderer.tsx

@@ -7,7 +7,7 @@ import {
   FROZEN_GLOW_EDGE_PX,
   Z_INDEX_OVERLAY_CANVAS,
 } from "../constants.js";
-import { openFile } from "../utils/open-file.js";
+import { requestOpenFile } from "../utils/open-file.js";
 import { isElementConnected } from "../utils/is-element-connected.js";
 import { OverlayCanvas } from "./overlay-canvas.js";
 import { SelectionLabel } from "./selection-label/index.js";
@@ -104,7 +104,7 @@ export const ReactGrabRenderer: Component<ReactGrabRendererProps> = (props) => {
           onCancelDismiss={props.onCancelDismiss}
           onOpen={() => {
             if (props.selectionFilePath) {
-              openFile(props.selectionFilePath, props.selectionLineNumber);
+              requestOpenFile(props.selectionFilePath, props.selectionLineNumber);
             }
           }}
           isContextMenuOpen={props.contextMenuPosition !== null}

packages/react-grab/src/constants.ts

@@ -20,6 +20,8 @@ export const INPUT_FOCUS_ACTIVATION_DELAY_MS = 400;
 export const INPUT_TEXT_SELECTION_ACTIVATION_DELAY_MS = 600;
 export const DEFAULT_KEY_HOLD_DURATION_MS = 100;
 export const DEFAULT_MAX_CONTEXT_LINES = 3;
+// Hard cap when digging past low-signal frames for a trusted app source.
+export const MAX_TRACE_CONTEXT_LINES = 20;
 export const SYMBOLICATION_TIMEOUT_MS = 5000;
 export const MIN_HOLD_FOR_ACTIVATION_AFTER_COPY_MS = 200;
 export const FINDER_TIMEOUT_MS = 200;
@@ -105,6 +107,9 @@ export const PREVIEW_IDENTIFYING_ATTRS = new Set([
   "open",
 ]);
 
+export const PREVIEW_DESCENDANT_TEXT_TAGS = new Set(["a", "code", "pre"]);
+export const PREVIEW_SKIPPED_TEXT_TAGS = new Set(["script", "style", "template", "noscript"]);
+
 export const MODIFIER_KEYS: readonly string[] = ["Meta", "Control", "Shift", "Alt"];
 
 export const ARROW_KEYS = new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);