Is your feature request related to a problem? Please describe.
Chat attachments only include the element's tag and CSS classes. With utility-first CSS (Tailwind, etc.), this produces labels like:
button.inline-flex.cursor-pointer.items-center.justify-center.gap-2.whitespace-nowrap.rounded-md.text-sm.font-medium.transition-colors...
When I attached a button and asked "Which button is this?", the agent had to grep the codebase, read the Button component's variant definitions, and cross-reference styles to eventually figure out it was the "Hide Element" button on the page. That whole search shouldn't be necessary.
Describe the solution you'd like
Add more context to the attachment object:
textContent — the element's visible text (e.g. "Hide Element"). This alone would solve most cases.path — DOM ancestry, like style changes already include (e.g. section > div > button).attributes — useful attributes like id, data-*, aria-label, type, href.
The class-based label is still useful, but text content + position in the tree would let the agent identify the element immediately instead of searching the codebase for it.
Describe alternatives you've considered
I think the source field in React dev mode already solves this for React, but it's not available for Vue?
Additional context
Style changes already have a path field with ancestor selectors. Chat attachments could follow the same pattern for consistency.
Is your feature request related to a problem? Please describe.
Chat attachments only include the element's tag and CSS classes. With utility-first CSS (Tailwind, etc.), this produces labels like:
When I attached a button and asked "Which button is this?", the agent had to grep the codebase, read the Button component's variant definitions, and cross-reference styles to eventually figure out it was the "Hide Element" button on the page. That whole search shouldn't be necessary.
Describe the solution you'd like
Add more context to the attachment object:
textContent— the element's visible text (e.g."Hide Element"). This alone would solve most cases.path— DOM ancestry, like style changes already include (e.g.section > div > button).attributes— useful attributes likeid,data-*,aria-label,type,href.The class-based label is still useful, but text content + position in the tree would let the agent identify the element immediately instead of searching the codebase for it.
Describe alternatives you've considered
I think the
sourcefield in React dev mode already solves this for React, but it's not available for Vue?Additional context
Style changes already have a
pathfield with ancestor selectors. Chat attachments could follow the same pattern for consistency.