[gowtham012]

What

When the picked element belongs to a component rendered more than once, the comment box shows a one-line hint (<ProductCard> appears 6 times on this page) with two toggle buttons: Just this one / Everywhere (the component). Neither is chosen by default, and clicking the chosen one again clears it. Both are plain <button aria-pressed> elements inside a labelled group, so they work with Tab, Space and Enter.

• Note: element.reuse = { component, count, estimate, scope? }, where scope is "instance" or "component" and is only set when the developer picks one.
• Markdown (toMarkdown, so get_pending_annotations and get_annotation both show it): - Reused: <Card> is rendered 3 times on this page. Scope: the component | just this instance | not specified — … ask with reply_annotation before editing if unclear. The component name is flattened like other page data. The scope text always comes from a fixed table, so it can't carry page text (Object.hasOwn, so "constructor" doesn't sneak through).
• MCP instructions: one added sentence telling the agent to ask before changing the shared component when the scope isn't specified.

Detection (inspector.js, MAIN world: one new reuseHint() plus one call in inspect())

• React: find the nearest named component fiber, the same walk used for the component chain. Then count fibers of that type in the committed tree (HostRoot.stateNode.current), going depth-first by child and sibling.
• Vue 3: take the element's __vueParentComponent, go up to the app's root instance, then walk subTree vnodes (component subtrees, children arrays, the active Suspense branch) and count instances with the same type.
• Plain HTML (no framework detected): count elements with the same tag and class list whose parent has the same tag and class list. Marked estimate: true and shown as div.card > h3 … (estimate). Skipped when neither the element nor its parent has a class.
• Limits: only reported when count > 1. Counting stops at 500 (shown as "500+") and the walk at 50k nodes. Only the picked element's own React root or Vue app is counted. Vue 2, Svelte, Angular and Astro get no count, and no structural guess when a framework is detected. Hidden or offscreen copies still count.

Tests

• test/e2e-reuse.test.mjs (browser, ports P+12/S+12): React Card ×3 (hint, keyboard choice of "Everywhere", stored scope, markdown via MCP get_annotation); React Hero ×1 (no hint, no reuse); Vue PriceCard ×2 ("Just this one"); plain HTML 4 cards (estimate, choice cleared → "not specified"); plain single button (no hint).
• test/reuse-bridge.test.mjs: markdown for each scope, the estimate and 500+ wording, no line for bad counts, flattening of an injection attempt, and the MCP instruction sentence.
• Full suite: 225 tests, 224 pass, 0 fail, 1 skipped (an existing skip).

🤖 Generated with Claude Code

[gowtham012]

Included in #30 (merged), together with fixes found by testing on real Vite/React/Next/webpack/Vue production builds.