Overly generic results and missing information in context

[conradkoh]

This has been a recurring problem for me. I optimistically use the latest version published always, but frequently find major problems with the changes.

This is how I apply the code to my next.js project:

<Script
            src="//unpkg.com/react-grab/dist/index.global.js"
            crossOrigin="anonymous"
            strategy="afterInteractive"
          />

The Problem

By far the most major issue is that the hovered component name does not actually appear anywhere in the clipboard context.

This is what is copied to the clipboard:

[<div> in ChatroomDashboard @/Users/conradkoh/Documents/Repos/chatroom/apps/webapp/src/modules/chatroom/ChatroomDashboard.tsx:400]

This has happened so many times on and off, and will get resolved over time. For example, I just reloaded the page somewhere in the last 5 mins and now it shows this, which is much better.

[<div class="flex items-cent..." /> in WorkspaceStatusContent in WorkspaceBottomBar in ChatroomDashboard]

Solution

I think adding some basic test scaffolding could be helpful (sorry if this already exists, I haven't poured through the code). Verification: Ensure that the text from the selected element is found in the content copied to clipboard.

---

Thanks for building this tool, it has been really helpful.

[conradkoh]

One more thing. I'm unsure if this is related. But there is often critical context missing as well. For example, in the image above, clearly WorkspaceStatusContent is a parent of the branch name. But selecting the branch name causes this to be copied:

[<span class="uppercase track...">revert/code-review-workflow-template</span> in PopperAnchor (@radix-ui/react-popper) in PopoverTrigger (@radix-ui/react-popover) in Popper (@radix-ui/react-popper)]

There is almost no useful context provided at all. I know at some point there was something like a component trace. I don't think that there can be any form of truncation that has no edge cases (neither favoring the items closest to the bottom of the call stack nor favoring items closest to the top of the call stack).

Perhaps a suggestion could also to be to hide this behind a flag, for people who either want full context or minimal context? I don't think the tradeoff to sacrifice specificity for token savings (if intentional) is worth it.

[aidenybai]

@conradkoh this should be fixed in the latest version - can you try again?

[conradkoh]

So this is what I see now, when I select the branch name (see screenshot above)

[<button type="button" title="feat: add agent handoff user-visibility guidance" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-_r_12_" data-state="closed" data-slot="popover-trigger" class="inline-flex ite..." /> in PopperAnchor (@radix-ui/react-popper) in PopoverTrigger (@radix-ui/react-popover) in Popper (@radix-ui/react-popper)]

In short, I don't think my issue has been resolved fully. Since the branch is nested within the component WorkspaceStatusContent, then I expect that when I select any element inside of the WorkspaceStatusContent, that it appears somewhere in the trace.

In this case, you can see that only the radix components show up in the trace.

[conradkoh]

Here's another example that I just encountered.

[<div class="flex items-cent..." /> in DismissableLayer (@radix-ui/react-dismissable-layer) in FocusScope (@radix-ui/react-focus-scope) in Presence (@radix-ui/react-presence)]

This was what was given when I selected the header of a dialog. There is almost no useful information here at all.