Issue Station
Sign In
Tools hereToolbox

claude-code - 💡(How to fix) Fix launch-selected-element: include the page URL (and ideally route + query) for context

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…

Error Message

For any non-trivial debugging that touches data flow (an empty state, an API error, a wrong response shape), the URL is the single most useful piece of context, and right now I have to type or paste it back manually every single time.

  1. Route-driven bugs are blind. If the bug is "the Insights tab on /workspaces/:wsId/rewards/:publicId?tab=insights shows an error", I need both :wsId and :publicId to query the DB, hit the API, or repro locally. The element payload tells me the component but not which workspace/reward.

Code Example

<launch-selected-element>
<element tag="div" has-screenshot="true" class="flex flex-col items-center ...">
  <text>"Something went wrong\n\nFailed to load data..."</text>
  <path>div.mx-auto > div > div.px-7 > div.max-w-[1280px]</path>
  <react component="QueryErrorState (in RewardInsights > DetailChrome > ...)" props={...} />
  <html>...</html>
  <siblings>...</siblings>
</element>
</launch-selected-element>

---

<launch-selected-element>
  <url
    href="http://localhost:4000/workspaces/wsp_abc/rewards/rwd_xyz?tab=insights"
    origin="http://localhost:4000"
    pathname="/workspaces/wsp_abc/rewards/rwd_xyz"
    search="?tab=insights"
  />
  <element ...>...</element>
</launch-selected-element>

---

<url ... routePattern="/workspaces/:workspaceId/rewards/:publicId" />
RAW_BUFFERClick to expand / collapse

Problem

When I pick an element from the browser via the Launch with Claude flow, the agent receives a rich payload — tag, classes, React component name, HTML, siblings, screenshot — but no URL of the page the element came from.

For any non-trivial debugging that touches data flow (an empty state, an API error, a wrong response shape), the URL is the single most useful piece of context, and right now I have to type or paste it back manually every single time.

Example of what arrives today (trimmed):

<launch-selected-element>
<element tag="div" has-screenshot="true" class="flex flex-col items-center ...">
  <text>"Something went wrong\n\nFailed to load data..."</text>
  <path>div.mx-auto > div > div.px-7 > div.max-w-[1280px]</path>
  <react component="QueryErrorState (in RewardInsights > DetailChrome > ...)" props={...} />
  <html>...</html>
  <siblings>...</siblings>
</element>
</launch-selected-element>

There is <path> (DOM ancestor selectors) and React component breadcrumbs, but no window.location.href.

Why this is painful

  1. Route-driven bugs are blind. If the bug is "the Insights tab on /workspaces/:wsId/rewards/:publicId?tab=insights shows an error", I need both :wsId and :publicId to query the DB, hit the API, or repro locally. The element payload tells me the component but not which workspace/reward.
  2. Multi-app monorepos lose context. With www / panel / admin on different ports (4000 / 4001 / 4002), even knowing which app the bug is in is information I currently have to ask for.
  3. Query params drive UI state. ?tab=insights, ?view=…, ?q=… etc. determine what is rendered. The element snapshot is meaningless without them.
  4. Auth context. A protected route vs a public route changes the debug path entirely — the URL tells me that at a glance.

What would solve it

Add a <url> (or <location>) child to the <launch-selected-element> payload:

<launch-selected-element>
  <url
    href="http://localhost:4000/workspaces/wsp_abc/rewards/rwd_xyz?tab=insights"
    origin="http://localhost:4000"
    pathname="/workspaces/wsp_abc/rewards/rwd_xyz"
    search="?tab=insights"
  />
  <element ...>...</element>
</launch-selected-element>

Minimum viable: just href. Nicer: split fields so the agent doesn't have to parse.

Bonus (lower priority)

For SPAs, the matched route pattern would be 🔥:

<url ... routePattern="/workspaces/:workspaceId/rewards/:publicId" />

This is harder (needs router introspection — React Router useMatches(), TanStack Router, etc.), so just href first is fine.

Privacy note

The URL is already visible to the user in their address bar at the moment they invoke the action, so sharing it with the agent they explicitly invoked should not be a privacy regression. If anything, tokens or sensitive query params could be redacted before sending (e.g. ?access_token=… → ?access_token=[REDACTED]) — happy to file a follow-up if that's preferred.

Repro

Any page. Pick any element with the Launch with Claude action. Observe that the payload does not contain window.location.href.

Environment

  • Claude Code with browser extension (Launch with Claude / select-element flow)
  • Tested on Vite + React 19 SPA, but issue is framework-agnostic — it's about the payload shape

Thank you 🙏 — this would make in-app debugging dramatically faster.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

claude-code - 💡(How to fix) Fix launch-selected-element: include the page URL (and ideally route + query) for context