@spotpatch/runtime 1.15.5 → 1.15.6

package/dist/index.js

@@ -56,6 +56,7 @@ function freezeReact(react2) {
 function freezeElement(element2) {
   return Object.freeze({
     ...element2,
+    ...element2.instance === void 0 ? {} : { instance: Object.freeze({ ...element2.instance }) },
     rect: Object.freeze({ ...element2.rect })
   });
 }
@@ -856,6 +857,66 @@ function collectStyleContext(options) {
   });
 }
 
+// src/state/selected-instance.ts
+import {
+  ELEMENT_INSTANCE_HINT_ATTRIBUTE as ELEMENT_INSTANCE_HINT_ATTRIBUTE2,
+  ELEMENT_INSTANCE_LIMITS as ELEMENT_INSTANCE_LIMITS2,
+  SOURCE_MARKER_ATTRIBUTE
+} from "@spotpatch/shared";
+
+// src/collectors/dom-collector.ts
+import {
+  ELEMENT_INSTANCE_HINT_ATTRIBUTE
+} from "@spotpatch/shared";
+
+// src/collectors/element-locator.ts
+import { ELEMENT_INSTANCE_LIMITS, redactSensitiveText as redactSensitiveText2 } from "@spotpatch/shared";
+function escapeIdentifier(value) {
+  return Array.from(value).map(
+    (character) => /[a-z\d_-]/iu.test(character) ? character : `\\${(character.codePointAt(0) ?? 0).toString(16)} `
+  ).join("");
+}
+function uniqueMatch(element2, selector) {
+  if (selector.length > ELEMENT_INSTANCE_LIMITS.selectorCharacters) return false;
+  try {
+    const matches = element2.ownerDocument.querySelectorAll(selector);
+    return matches.length === 1 && matches[0] === element2;
+  } catch {
+    return false;
+  }
+}
+function createElementLocator(element2) {
+  if (!element2.isConnected || element2.getRootNode() !== element2.ownerDocument)
+    return "";
+  const segments = [];
+  let current = element2;
+  while (current !== null && segments.length < ELEMENT_INSTANCE_LIMITS.locatorDepth) {
+    const tag = current.localName;
+    const testId = current.getAttribute("data-testid");
+    const anchors = [
+      ...current.id.length > 0 && redactSensitiveText2(current.id) === current.id ? [`${tag}#${escapeIdentifier(current.id)}`] : [],
+      ...testId && redactSensitiveText2(testId) === testId ? [
+        `${tag}[data-testid="${testId.replaceAll("\\", "\\\\").replaceAll('"', '\\"')}"]`
+      ] : []
+    ];
+    for (const anchor of anchors) {
+      const candidate2 = [anchor, ...segments].join(" > ");
+      if (redactSensitiveText2(candidate2) === candidate2 && uniqueMatch(element2, candidate2))
+        return candidate2;
+    }
+    const siblings = current.parentElement === null ? [current] : Array.from(current.parentElement.children).filter(
+      (sibling) => sibling.localName === tag
+    );
+    const segment = siblings.length > 1 ? `${tag}:nth-of-type(${String(siblings.indexOf(current) + 1)})` : tag;
+    segments.unshift(segment);
+    const candidate = segments.join(" > ");
+    if (uniqueMatch(element2, candidate)) return candidate;
+    if (candidate.length > ELEMENT_INSTANCE_LIMITS.selectorCharacters) return "";
+    current = current.parentElement;
+  }
+  return "";
+}
+
 // src/collectors/dom-collector.ts
 var DOM_COLLECTION_LIMITS = Object.freeze({
   maxDepth: 3,
@@ -923,7 +984,7 @@ function escapeHtml(value) {
   return value.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
 }
 function isPreservedAttribute(name) {
-  return SAFE_ATTRIBUTE_NAMES.has(name) || name.startsWith("aria-") || name === "data-testid";
+  return SAFE_ATTRIBUTE_NAMES.has(name) || name.startsWith("aria-") || name === "data-testid" || name === ELEMENT_INSTANCE_HINT_ATTRIBUTE;
 }
 function openingTag(element2) {
   const tagName = element2.tagName.toLowerCase();
@@ -999,44 +1060,6 @@ function truncateContext(value, maxCharacters) {
   }
   return `${value.slice(0, Math.max(0, maxCharacters - 1)).trimEnd()}…`;
 }
-function escapeCssIdentifier(value) {
-  return Array.from(value).map(
-    (character) => /[a-z\d_-]/iu.test(character) ? character : `\\${character.charCodeAt(0).toString(16)} `
-  ).join("");
-}
-function escapeCssAttribute(value) {
-  return value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
-}
-function selectorSegment(element2) {
-  const tagName = element2.tagName.toLowerCase();
-  if (element2.id.length > 0) {
-    return `${tagName}#${escapeCssIdentifier(element2.id)}`;
-  }
-  const testId = element2.getAttribute("data-testid");
-  if (testId !== null && testId.length > 0) {
-    return `${tagName}[data-testid="${escapeCssAttribute(testId)}"]`;
-  }
-  const classes = Array.from(element2.classList).slice(0, 2).map((name) => `.${escapeCssIdentifier(name)}`).join("");
-  const sameTagSiblings = element2.parentElement === null ? [] : Array.from(element2.parentElement.children).filter(
-    (sibling) => sibling.tagName === element2.tagName
-  );
-  const position = sameTagSiblings.indexOf(element2);
-  const nth = sameTagSiblings.length > 1 && position >= 0 ? `:nth-of-type(${String(position + 1)})` : "";
-  return `${tagName}${classes}${nth}`;
-}
-function createSelector(element2) {
-  const segments = [];
-  let current = element2;
-  while (current !== null && segments.length < 5) {
-    const segment = selectorSegment(current);
-    segments.unshift(segment);
-    if (current.id.length > 0 || current.hasAttribute("data-testid")) {
-      break;
-    }
-    current = current.parentElement;
-  }
-  return segments.join(" > ");
-}
 function collectElementContext(options) {
   const lines = ["<!-- Selected element -->"];
   const state = { nodeCount: 0, truncated: false };
@@ -1050,7 +1073,7 @@ function collectElementContext(options) {
   const role = options.element.getAttribute("role");
   return Object.freeze({
     tagName: options.element.tagName.toLowerCase(),
-    selector: createSelector(options.element),
+    selector: createElementLocator(options.element),
     sanitizedHtml: truncateContext(lines.join("\n"), options.maxCharacters),
     ...text2.length === 0 ? {} : {
       textPreview: text2.length <= DOM_COLLECTION_LIMITS.maxTextCharacters ? text2 : `${text2.slice(0, DOM_COLLECTION_LIMITS.maxTextCharacters)}…`
@@ -1065,6 +1088,65 @@ function collectElementContext(options) {
   });
 }
 
+// src/state/selected-instance.ts
+function instanceScope(element2) {
+  let candidate = element2;
+  for (let depth = 0; candidate !== null && depth < ELEMENT_INSTANCE_LIMITS2.ancestorDepth; depth += 1) {
+    if (candidate === element2.ownerDocument.body || candidate === element2.ownerDocument.documentElement)
+      break;
+    if (candidate.hasAttribute(ELEMENT_INSTANCE_HINT_ATTRIBUTE2) || candidate.matches("article, li, tr, [role=row], [role=listitem]"))
+      return candidate;
+    const marker = candidate.getAttribute(SOURCE_MARKER_ATTRIBUTE);
+    if (marker !== null && candidate.parentElement !== null && Array.from(candidate.parentElement.children).some(
+      (sibling) => sibling !== candidate && sibling.getAttribute(SOURCE_MARKER_ATTRIBUTE) === marker
+    ))
+      return candidate;
+    candidate = candidate.parentElement;
+  }
+  const parent = element2.parentElement;
+  return parent === null || parent === element2.ownerDocument.body || parent === element2.ownerDocument.documentElement ? element2 : parent;
+}
+function captureSelectedInstance(element2, id, maxCharacters) {
+  const context = collectElementContext({ element: element2, maxCharacters });
+  const scope = instanceScope(element2);
+  const nearby = collectElementContext({
+    element: scope,
+    maxCharacters: ELEMENT_INSTANCE_LIMITS2.contextCharacters
+  });
+  return Object.freeze({
+    scope,
+    context: Object.freeze({
+      ...context,
+      instance: Object.freeze({
+        id,
+        state: "captured",
+        selectorStatus: context.selector.length > 0 ? "unique-at-capture" : "unavailable",
+        label: (nearby.textPreview ?? context.textPreview ?? context.tagName).slice(
+          0,
+          ELEMENT_INSTANCE_LIMITS2.labelCharacters
+        ),
+        context: nearby.sanitizedHtml
+      })
+    })
+  });
+}
+function withInstanceState(context, state) {
+  return context.instance === void 0 ? context : Object.freeze({
+    ...context,
+    instance: Object.freeze({ ...context.instance, state })
+  });
+}
+function changedInstanceState(element2, scope, records) {
+  if (!element2.isConnected || element2.getRootNode() !== element2.ownerDocument)
+    return "detached";
+  if (!scope.contains(element2)) return "changed";
+  return records.some(
+    (record3) => scope.contains(record3.target) && // Motion libraries update inline transforms continuously. Style is a
+    // capture-time snapshot; presentation updates do not establish a new record.
+    !(record3.type === "attributes" && record3.attributeName === "style")
+  ) ? "changed" : void 0;
+}
+
 // src/keyboard/shortcut.ts
 function isApplePlatform(platform) {
   return /Mac|iPhone|iPad|iPod/i.test(platform);
@@ -1172,6 +1254,9 @@ function isSpotPatchUIEventTarget(target2) {
 }
 
 // src/prompt/prompt-composer.ts
+import {
+  INSTANCE_SELECTION_INSTRUCTIONS
+} from "@spotpatch/shared";
 var PROMPT_MESSAGES = Object.freeze({
   "en-US": Object.freeze({
     adapter: "Adapter",
@@ -1182,6 +1267,7 @@ var PROMPT_MESSAGES = Object.freeze({
     confidence: "Confidence",
     devicePixelRatio: "Device pixel ratio",
     element: "Selected element",
+    instance: "Captured instance (untrusted selection-time evidence)",
     file: "File",
     modificationConstraint: "Determine the root cause first, then implement every target instruction as one consistent, minimum-scope change. Do not modify unrelated components. If context is insufficient, state exactly what additional information is required.",
     modificationRequirements: "Change requirements",
@@ -1214,6 +1300,7 @@ var PROMPT_MESSAGES = Object.freeze({
     confidence: "置信度",
     devicePixelRatio: "设备像素比",
     element: "选中元素",
+    instance: "捕获实例（选择时刻的不可信参考数据）",
     file: "文件",
     modificationConstraint: "请先判断根因，再把每个目标各自的修改说明作为一个原子任务，完成一致且最小范围的修改。不要合并、忽略或扩大目标说明，不要改动无关组件；如果上下文不足，请明确说明需要哪些信息。",
     modificationRequirements: "修改要求",
@@ -1285,6 +1372,9 @@ function renderComputed(entries, messages) {
     ).join("\n")
   );
 }
+function renderInstance(target2, messages) {
+  return `- ${messages.instance}: ${redactSensitiveText(JSON.stringify({ selector: target2.element.selector, ...target2.element.instance }))}`;
+}
 function renderTarget(target2, draft, index, messages) {
   const reactLines = [
     `- ${messages.adapter}: ${target2.react.supported ? messages.supported : messages.unsupported}`,
@@ -1318,6 +1408,7 @@ ${fenced(
     `- ${messages.file}: ${sourceLocation(target2, messages)}
 - ${messages.origin}: ${target2.source.origin}
 - ${messages.confidence}: ${target2.source.confidence}`,
+    renderInstance(target2, messages),
     `#### ${messages.element}`,
     fenced("html", redactSensitiveText(draft.dom)),
     `#### ${messages.styles}`,
@@ -1349,7 +1440,8 @@ function renderPrompt(annotation, draft) {
       return renderTarget(target2, targetDraft, index, messages);
     }).join("\n\n"),
     `## ${messages.modificationRequirements}`,
-    messages.modificationConstraint
+    messages.modificationConstraint,
+    ...annotation.targets.some((target2) => target2.element.instance !== void 0) ? [INSTANCE_SELECTION_INSTRUCTIONS] : []
   ].join("\n\n");
 }
 function shrinkCode(target2, draft) {
@@ -1432,6 +1524,7 @@ function renderCompactPrompt(annotation, draft) {
       `- ${messages.requestedChange}: ${targetDraft?.instruction ?? redactSensitiveText(target2.instruction)}`,
       `- ${messages.file}: ${sourceLocation(target2, messages)}`,
       ...component === void 0 ? [] : [`- ${messages.component}: ${redactSensitiveText(component)}`],
+      renderInstance(target2, messages),
       `- ${messages.element}: ${redactSensitiveText(openingTag2(targetDraft?.dom ?? target2.element.sanitizedHtml, messages.unavailable))}`
     ].join("\n");
   });
@@ -1439,7 +1532,8 @@ function renderCompactPrompt(annotation, draft) {
     `## ${messages.selectedTargets(annotation.targets.length)}`,
     targets.join("\n\n"),
     `## ${messages.modificationRequirements}`,
-    messages.modificationConstraint
+    messages.modificationConstraint,
+    ...annotation.targets.some((target2) => target2.element.instance !== void 0) ? [INSTANCE_SELECTION_INSTRUCTIONS] : []
   ].join("\n\n");
 }
 function composeBounded(annotation, maxCharacters) {
@@ -1546,6 +1640,10 @@ function reduceRuntimeState(state, event) {
 }
 
 // src/state/selection-session.ts
+import {
+  ELEMENT_INSTANCE_LIMITS as ELEMENT_INSTANCE_LIMITS3,
+  ELEMENT_INSTANCE_STATES
+} from "@spotpatch/shared";
 var STORAGE_PREFIX = "spotpatch:selection:";
 var SNAPSHOT_VERSION = 1;
 var MAX_SNAPSHOT_CHARACTERS = 1e6;
@@ -1582,7 +1680,11 @@ function page(value) {
 function element(value) {
   const item = record(value);
   const rect = record(item?.rect);
-  return item !== void 0 && text(item.tagName) && text(item.selector) && text(item.sanitizedHtml) && optionalText(item.textPreview) && optionalText(item.role) && rect !== void 0 && finiteNumber(rect.x) && finiteNumber(rect.y) && finiteNumber(rect.width) && finiteNumber(rect.height);
+  return item !== void 0 && (item.instance === void 0 || instance(item.instance)) && text(item.tagName) && text(item.selector) && text(item.sanitizedHtml) && optionalText(item.textPreview) && optionalText(item.role) && rect !== void 0 && finiteNumber(rect.x) && finiteNumber(rect.y) && finiteNumber(rect.width) && finiteNumber(rect.height);
+}
+function instance(value) {
+  const item = record(value);
+  return item !== void 0 && Object.keys(item).length === 5 && text(item.id) && item.id.length <= ELEMENT_INSTANCE_LIMITS3.idCharacters && /^[A-Za-z0-9_-]+$/u.test(item.id) && ELEMENT_INSTANCE_STATES.some((state) => state === item.state) && (item.selectorStatus === "unique-at-capture" || item.selectorStatus === "unavailable") && text(item.label) && item.label.length <= ELEMENT_INSTANCE_LIMITS3.labelCharacters && text(item.context) && item.context.length <= ELEMENT_INSTANCE_LIMITS3.contextCharacters;
 }
 function styles(value) {
   const item = record(value);
@@ -1663,14 +1765,14 @@ function createSelectionSession(window, sessionId, maximumTargets) {
 // src/source/source-resolver.ts
 import {
   parseSourceMarker,
-  SOURCE_MARKER_ATTRIBUTE
+  SOURCE_MARKER_ATTRIBUTE as SOURCE_MARKER_ATTRIBUTE2
 } from "@spotpatch/shared";
 var EMPTY_REACT_CONTEXT = Object.freeze({
   supported: false,
   componentStack: Object.freeze([])
 });
 function directMarker(element2) {
-  return parseSourceMarker(element2.getAttribute(SOURCE_MARKER_ATTRIBUTE));
+  return parseSourceMarker(element2.getAttribute(SOURCE_MARKER_ATTRIBUTE2));
 }
 function ancestorMarker(element2) {
   let ancestor = element2.parentElement;
@@ -2624,6 +2726,13 @@ var ERROR_MESSAGES_ZH = Object.freeze({
   [ERROR_CODES2.INTERNAL_ERROR]: "Agent 失败，未暴露私有细节。"
 });
 var SUMMARY_MESSAGES_EN = Object.freeze({
+  instance: "Selected instance",
+  instanceStates: {
+    captured: "Captured element; locator describes selection time",
+    changed: "Page content changed; snapshot preserved. Select again to confirm the current instance",
+    detached: "Element unloaded; historical snapshot preserved",
+    restored: "Restored snapshot; not bound to the current page"
+  },
   adapter: "React adapter",
   api: "API",
   apiStatuses: Object.freeze({
@@ -2664,6 +2773,13 @@ var SUMMARY_MESSAGES_EN = Object.freeze({
   warning: "Warning"
 });
 var SUMMARY_MESSAGES_ZH = Object.freeze({
+  instance: "选中实例",
+  instanceStates: {
+    captured: "已捕获元素；定位信息对应选择时刻",
+    changed: "页面内容已变化，已保留快照；请重新选择以确认当前实例",
+    detached: "元素已卸载，已保留历史快照",
+    restored: "已恢复历史快照，未绑定当前页面"
+  },
   adapter: "React 适配器",
   api: "API",
   apiStatuses: Object.freeze({
@@ -2848,13 +2964,13 @@ var UI_MESSAGES = Object.freeze({
       addCancelled: "Additional selection cancelled.",
       selectionLimit: (maximum) => `The selection limit of ${String(maximum)} elements has been reached.`,
       chooseAdditional: (selected, maximum) => `Choose another element. ${String(selected)} of ${String(maximum)} selected.`,
-      duplicate: "That source target is already selected.",
+      duplicate: "That page element is already selected.",
+      instanceBudgetExceeded: "The prompt cannot preserve every selected instance within its budget. Remove some targets or increase the context budget.",
       sourceProbable: "A probable React component was found without an authorized file token.",
       sourceMissing: "No authorized source marker was found for the selected element.",
       noSelectable: "No selectable element was found.",
       allTargetsRemoved: "All targets were removed. Choose an element to continue.",
       targetRemoved: "Selected target removed.",
-      detachedTargetPreserved: "The page element was unloaded; its collected context remains selected.",
       contextWarning: "Browser context collection completed with a warning.",
       contextCollected: "Browser context collected.",
       editorOpening: "Opening source…",
@@ -3012,13 +3128,13 @@ var UI_MESSAGES = Object.freeze({
       addCancelled: "已取消追加选择。",
       selectionLimit: (maximum) => `已达到 ${String(maximum)} 个元素的选择上限。`,
       chooseAdditional: (selected, maximum) => `请选择另一个元素，当前已选 ${String(selected)} / ${String(maximum)}。`,
-      duplicate: "该源码目标已经在当前选择中。",
+      duplicate: "该页面元素已经在当前选择中。",
+      instanceBudgetExceeded: "上下文预算无法完整保留所有选中实例，请减少目标数量或提高上下文预算。",
       sourceProbable: "找到可能的 React 组件，但没有获授权的源码标记。",
       sourceMissing: "选中元素没有获授权的源码标记。",
       noSelectable: "当前位置没有可选择的元素。",
       allTargetsRemoved: "已移除全部目标，请重新选择元素。",
       targetRemoved: "已移除选中目标。",
-      detachedTargetPreserved: "页面元素已卸载，已采集的上下文仍保留在选择中。",
       contextWarning: "浏览器上下文采集完成，但存在警告。",
       contextCollected: "浏览器上下文采集完成。",
       editorOpening: "正在打开源码……",
@@ -4850,6 +4966,9 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     requestFloatingSurfaceLayout();
   }
   function statusText(target2) {
+    if (target2.instanceState !== void 0 && target2.instanceState !== "captured") {
+      return messages.summary.instanceStates[target2.instanceState];
+    }
     if (target2.status === "ready") {
       return messages.targets.statusReady;
     }
@@ -5490,6 +5609,11 @@ function createSelectionSummary(input, messages) {
     `${messages.confidence}: ${input.resolution.source.confidence} (${messages.confidenceLabels[input.resolution.source.confidence]})`,
     `${messages.origin}: ${input.resolution.source.origin}`
   ];
+  if (input.instance !== void 0) {
+    lines.push(
+      `${messages.instance}: ${messages.instanceStates[input.instance.state]}`
+    );
+  }
   if (input.resolution.react.componentName !== void 0) {
     lines.push(`${messages.component}: ${input.resolution.react.componentName}`);
   }
@@ -5948,7 +6072,7 @@ function sourceLabel(target2, unavailable) {
   return `${path}${line === void 0 ? "" : `:${String(line)}`}${column === void 0 ? "" : `:${String(column)}`}`;
 }
 function targetStatus(target2) {
-  if (target2.apiStatus === "failed" || target2.collectionStatus === "failed") {
+  if (target2.apiStatus === "failed" || target2.collectionStatus === "failed" || target2.elementContext?.instance !== void 0 && target2.elementContext.instance.state !== "captured") {
     return "warning";
   }
   if (target2.apiStatus === "loading" || target2.collectionStatus === "loading") {
@@ -5991,6 +6115,7 @@ function createController(config, dependencies = {}) {
   const now = dependencies.now ?? (() => (/* @__PURE__ */ new Date()).toISOString());
   const selectionSession = dependencies.selectionSession ?? createSelectionSession(browser.window, config.sessionId, config.maxTargets);
   const restoredSelection = selectionSession.load();
+  const instanceNamespace = createBrowserAnnotationId(browser.window);
   const sourceResolver = createSourceResolver({
     adapter: dependencies.reactAdapter ?? createReact18Adapter({
       ...config.dataFlow.enabled ? {
@@ -6022,7 +6147,8 @@ function createController(config, dependencies = {}) {
       dataFlowReport: void 0,
       dataFlowStatus: "idle",
       element: void 0,
-      elementContext: target2.element,
+      instanceScope: void 0,
+      elementContext: withInstanceState(target2.element, "restored"),
       instruction: target2.instruction,
       marker,
       page: target2.page,
@@ -6181,6 +6307,7 @@ function createController(config, dependencies = {}) {
     );
   }
   function selectedAskSelection() {
+    refreshInstanceStates(mutationObserver?.takeRecords() ?? []);
     const snapshots = targets.flatMap((target2) => {
       const snapshot = snapshotTarget(target2);
       return snapshot === void 0 ? [] : [snapshot];
@@ -6199,6 +6326,7 @@ function createController(config, dependencies = {}) {
       const summary = createSelectionSummary(
         {
           resolution: target2.resolution,
+          ...target2.elementContext?.instance === void 0 ? {} : { instance: target2.elementContext.instance },
           ...target2.code === void 0 ? {} : { code: target2.code },
           ...target2.styles === void 0 ? {} : { styles: target2.styles },
           apiStatus: target2.apiStatus,
@@ -6244,7 +6372,11 @@ ${summary}`;
     view.renderTargets(
       targets.map((target2) => ({
         id: target2.id,
-        label: target2.resolution.react.componentName ?? (target2.element === void 0 ? target2.elementContext?.tagName ?? "Element" : elementLabel(target2.element)),
+        ...target2.elementContext?.instance === void 0 ? {} : { instanceState: target2.elementContext.instance.state },
+        label: [
+          target2.resolution.react.componentName ?? target2.elementContext?.tagName ?? "Element",
+          (target2.elementContext?.instance?.label ?? target2.elementContext?.textPreview)?.slice(0, 80)
+        ].filter(Boolean).join(" · "),
         source: sourceLabel(target2, view.messages().context.sourceUnavailable),
         canOpenEditor: target2.marker !== void 0,
         status: targetStatus(target2),
@@ -6264,6 +6396,7 @@ ${summary}`;
     }
   }
   function selectedAnnotation() {
+    refreshInstanceStates(mutationObserver?.takeRecords() ?? []);
     if (!canPreview()) {
       return void 0;
     }
@@ -6416,6 +6549,9 @@ ${summary}`;
     resizeObserver?.disconnect();
     for (const target2 of targets) {
       target2.element = void 0;
+      target2.instanceScope = void 0;
+      if (target2.elementContext !== void 0)
+        target2.elementContext = withInstanceState(target2.elementContext, "detached");
     }
     view.hideHighlight();
     view.hideSelectionHighlights();
@@ -6503,17 +6639,11 @@ ${summary}`;
       if (!targetIsCurrent(target2, revision)) {
         return;
       }
-      let failed = false;
-      try {
-        target2.elementContext = collectElementContext({
-          element: element2,
-          maxCharacters: config.budget.domCharacters
-        });
-      } catch {
-        target2.elementContext = void 0;
-        failed = true;
-      }
+      refreshInstanceStates(mutationObserver?.takeRecords() ?? []);
+      let failed = target2.elementContext === void 0;
       try {
+        if (target2.element !== element2)
+          throw new Error("Selected instance changed before style collection.");
         target2.styles = collectStyleContext({
           document: browser.document,
           element: element2,
@@ -6537,18 +6667,11 @@ ${summary}`;
     }, 0);
     collectionTimers.set(target2.id, timer);
   }
-  function duplicateTarget(element2, marker) {
-    if (marker !== void 0) {
-      return targets.find(
-        (target2) => target2.marker?.fileId === marker.fileId && target2.marker.line === marker.line && target2.marker.column === marker.column
-      );
-    }
-    return targets.find((target2) => target2.element === element2);
-  }
   function selectElement(element2) {
+    refreshInstanceStates(mutationObserver?.takeRecords() ?? []);
     const resolution = sourceResolver.resolve(element2);
     const marker = sourceRefToMarker(resolution.source);
-    const duplicate = duplicateTarget(element2, marker);
+    const duplicate = targets.find((target3) => target3.element === element2);
     if (duplicate !== void 0) {
       activeTargetId = duplicate.id;
       addingTarget = false;
@@ -6580,6 +6703,7 @@ ${summary}`;
     const target2 = {
       id: `target-${String(targetSequence)}`,
       element: element2,
+      instanceScope: void 0,
       resolution,
       marker,
       page: collectPageContext(browser.document, browser.window),
@@ -6592,6 +6716,17 @@ ${summary}`;
       dataFlowReport: void 0,
       dataFlowStatus: "idle"
     };
+    try {
+      const capture = captureSelectedInstance(
+        element2,
+        `${instanceNamespace}_${target2.id}`,
+        config.budget.domCharacters
+      );
+      target2.elementContext = capture.context;
+      target2.instanceScope = capture.scope;
+    } catch {
+      target2.collectionStatus = "failed";
+    }
     targets.push(target2);
     if (!initialSelection) {
       contextualAskWorkflow?.selectionChanged();
@@ -6722,25 +6857,32 @@ ${summary}`;
     persistSelection();
     view.announce(view.messages().announcements.targetRemoved);
   }
-  function refreshSelectedGeometry() {
-    if (state.status === "idle" || targets.length === 0) {
-      return;
+  function refreshInstanceStates(records) {
+    let changed = false;
+    for (const target2 of targets) {
+      if (target2.element === void 0) continue;
+      const next = target2.page.url !== browser.window.location.href ? "changed" : changedInstanceState(
+        target2.element,
+        target2.instanceScope ?? target2.element,
+        records
+      );
+      if (next === void 0) continue;
+      resizeObserver?.unobserve(target2.element);
+      target2.element = void 0;
+      target2.instanceScope = void 0;
+      if (target2.elementContext !== void 0)
+        target2.elementContext = withInstanceState(target2.elementContext, next);
+      changed = true;
     }
-    const disconnected = targets.filter(
-      (target2) => target2.element !== void 0 && !target2.element.isConnected
-    );
-    if (disconnected.length > 0) {
-      for (const target2 of disconnected) {
-        if (target2.element !== void 0) {
-          resizeObserver?.unobserve(target2.element);
-          target2.element = void 0;
-        }
-      }
+    if (changed) {
       refreshSelectionView();
       persistSelection();
-      view.announce(view.messages().announcements.detachedTargetPreserved);
-      return;
+      contextualAskWorkflow?.selectionChanged();
     }
+  }
+  function refreshSelectedGeometry() {
+    if (state.status === "idle" || targets.length === 0) return;
+    refreshInstanceStates(mutationObserver?.takeRecords() ?? []);
     refreshHighlights();
   }
   function handleOpenEditor(targetId) {
@@ -6794,6 +6936,15 @@ ${summary}`;
       agentWorkflow.run();
     }
   }
+  function composeSelectionPrompt(annotation) {
+    try {
+      return promptComposer.compose(annotation);
+    } catch (error) {
+      if (!(error instanceof RangeError)) throw error;
+      view.announce(view.messages().announcements.instanceBudgetExceeded);
+      return void 0;
+    }
+  }
   function handlePreview() {
     if (state.status !== "selected") {
       return;
@@ -6803,7 +6954,9 @@ ${summary}`;
       view.announce(view.messages().announcements.completeInstructions);
       return;
     }
-    previewPrompt = promptComposer.compose(annotation);
+    const composed = composeSelectionPrompt(annotation);
+    if (composed === void 0) return;
+    previewPrompt = composed;
     transition({ type: "PREVIEW" });
     view.showPreview(previewPrompt);
     view.focusPrompt();
@@ -6812,6 +6965,12 @@ ${summary}`;
     if (state.status !== "previewing" || previewPrompt.length === 0) {
       return;
     }
+    const annotation = selectedAnnotation();
+    if (annotation === void 0) return;
+    const composed = composeSelectionPrompt(annotation);
+    if (composed === void 0) return;
+    previewPrompt = composed;
+    view.showPreview(previewPrompt);
     if (clipboard === void 0) {
       transition({ type: "COPY_FAILURE" });
       view.focusPrompt();
@@ -6848,8 +7007,11 @@ ${summary}`;
     if (state.status === "previewing") {
       const annotation = selectedAnnotation();
       if (annotation !== void 0) {
-        previewPrompt = promptComposer.compose(annotation);
-        view.showPreview(previewPrompt);
+        const composed = composeSelectionPrompt(annotation);
+        if (composed !== void 0) {
+          previewPrompt = composed;
+          view.showPreview(previewPrompt);
+        }
       }
     }
   }
@@ -6903,6 +7065,8 @@ ${summary}`;
     browser.document.addEventListener("keydown", handleKeydown, true);
     browser.window.addEventListener("scroll", refreshSelectedGeometry, true);
     browser.window.addEventListener("resize", refreshSelectedGeometry);
+    browser.window.addEventListener("popstate", refreshSelectedGeometry);
+    browser.window.addEventListener("hashchange", refreshSelectedGeometry);
     view.triggerButton.addEventListener("click", activate);
     view.addTargetButton.addEventListener("click", beginAddTarget);
     view.reselectButton.addEventListener("click", handleReselect);
@@ -6939,10 +7103,15 @@ ${summary}`;
       resizeObserver = new browser.resizeObserver(refreshSelectedGeometry);
     }
     if (browser.mutationObserver !== void 0) {
-      mutationObserver = new browser.mutationObserver(refreshSelectedGeometry);
+      mutationObserver = new browser.mutationObserver((records) => {
+        refreshInstanceStates(records);
+        refreshHighlights();
+      });
       mutationObserver.observe(browser.document.documentElement, {
         childList: true,
-        subtree: true
+        subtree: true,
+        attributes: true,
+        characterData: true
       });
     }
     if (selectionOpen && targets.length > 0) {
@@ -6977,6 +7146,8 @@ ${summary}`;
     browser.document.removeEventListener("keydown", handleKeydown, true);
     browser.window.removeEventListener("scroll", refreshSelectedGeometry, true);
     browser.window.removeEventListener("resize", refreshSelectedGeometry);
+    browser.window.removeEventListener("popstate", refreshSelectedGeometry);
+    browser.window.removeEventListener("hashchange", refreshSelectedGeometry);
     view.triggerButton.removeEventListener("click", activate);
     view.addTargetButton.removeEventListener("click", beginAddTarget);
     view.reselectButton.removeEventListener("click", handleReselect);