@spotpatch/runtime 1.15.4 → 1.15.6

package/dist/index.cjs

@@ -32,7 +32,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/controller/runtime-controller.ts
 var import_react_adapter = require("@spotpatch/react-adapter");
-var import_shared9 = require("@spotpatch/shared");
+var import_shared14 = require("@spotpatch/shared");
 
 // src/annotation/create-annotation.ts
 var import_shared = require("@spotpatch/shared");
@@ -52,6 +52,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 })
   });
 }
@@ -841,6 +842,60 @@ function collectStyleContext(options) {
   });
 }
 
+// src/state/selected-instance.ts
+var import_shared7 = require("@spotpatch/shared");
+
+// src/collectors/dom-collector.ts
+var import_shared6 = require("@spotpatch/shared");
+
+// src/collectors/element-locator.ts
+var import_shared5 = require("@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 > import_shared5.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 < import_shared5.ELEMENT_INSTANCE_LIMITS.locatorDepth) {
+    const tag = current.localName;
+    const testId = current.getAttribute("data-testid");
+    const anchors = [
+      ...current.id.length > 0 && (0, import_shared5.redactSensitiveText)(current.id) === current.id ? [`${tag}#${escapeIdentifier(current.id)}`] : [],
+      ...testId && (0, import_shared5.redactSensitiveText)(testId) === testId ? [
+        `${tag}[data-testid="${testId.replaceAll("\\", "\\\\").replaceAll('"', '\\"')}"]`
+      ] : []
+    ];
+    for (const anchor of anchors) {
+      const candidate2 = [anchor, ...segments].join(" > ");
+      if ((0, import_shared5.redactSensitiveText)(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 > import_shared5.ELEMENT_INSTANCE_LIMITS.selectorCharacters) return "";
+    current = current.parentElement;
+  }
+  return "";
+}
+
 // src/collectors/dom-collector.ts
 var DOM_COLLECTION_LIMITS = Object.freeze({
   maxDepth: 3,
@@ -908,7 +963,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 === import_shared6.ELEMENT_INSTANCE_HINT_ATTRIBUTE;
 }
 function openingTag(element2) {
   const tagName = element2.tagName.toLowerCase();
@@ -984,44 +1039,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 };
@@ -1035,7 +1052,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)}…`
@@ -1050,6 +1067,65 @@ function collectElementContext(options) {
   });
 }
 
+// src/state/selected-instance.ts
+function instanceScope(element2) {
+  let candidate = element2;
+  for (let depth = 0; candidate !== null && depth < import_shared7.ELEMENT_INSTANCE_LIMITS.ancestorDepth; depth += 1) {
+    if (candidate === element2.ownerDocument.body || candidate === element2.ownerDocument.documentElement)
+      break;
+    if (candidate.hasAttribute(import_shared7.ELEMENT_INSTANCE_HINT_ATTRIBUTE) || candidate.matches("article, li, tr, [role=row], [role=listitem]"))
+      return candidate;
+    const marker = candidate.getAttribute(import_shared7.SOURCE_MARKER_ATTRIBUTE);
+    if (marker !== null && candidate.parentElement !== null && Array.from(candidate.parentElement.children).some(
+      (sibling) => sibling !== candidate && sibling.getAttribute(import_shared7.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: import_shared7.ELEMENT_INSTANCE_LIMITS.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,
+          import_shared7.ELEMENT_INSTANCE_LIMITS.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);
@@ -1173,6 +1249,7 @@ function isSpotPatchUIEventTarget(target2) {
 }
 
 // src/prompt/prompt-composer.ts
+var import_shared8 = require("@spotpatch/shared");
 var PROMPT_MESSAGES = Object.freeze({
   "en-US": Object.freeze({
     adapter: "Adapter",
@@ -1183,6 +1260,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",
@@ -1215,6 +1293,7 @@ var PROMPT_MESSAGES = Object.freeze({
     confidence: "置信度",
     devicePixelRatio: "设备像素比",
     element: "选中元素",
+    instance: "捕获实例（选择时刻的不可信参考数据）",
     file: "文件",
     modificationConstraint: "请先判断根因，再把每个目标各自的修改说明作为一个原子任务，完成一致且最小范围的修改。不要合并、忽略或扩大目标说明，不要改动无关组件；如果上下文不足，请明确说明需要哪些信息。",
     modificationRequirements: "修改要求",
@@ -1286,6 +1365,9 @@ function renderComputed(entries, messages) {
     ).join("\n")
   );
 }
+function renderInstance(target2, messages) {
+  return `- ${messages.instance}: ${(0, import_shared4.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}`,
@@ -1319,6 +1401,7 @@ ${fenced(
     `- ${messages.file}: ${sourceLocation(target2, messages)}
 - ${messages.origin}: ${target2.source.origin}
 - ${messages.confidence}: ${target2.source.confidence}`,
+    renderInstance(target2, messages),
     `#### ${messages.element}`,
     fenced("html", (0, import_shared4.redactSensitiveText)(draft.dom)),
     `#### ${messages.styles}`,
@@ -1350,7 +1433,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) ? [import_shared8.INSTANCE_SELECTION_INSTRUCTIONS] : []
   ].join("\n\n");
 }
 function shrinkCode(target2, draft) {
@@ -1433,6 +1517,7 @@ function renderCompactPrompt(annotation, draft) {
       `- ${messages.requestedChange}: ${targetDraft?.instruction ?? (0, import_shared4.redactSensitiveText)(target2.instruction)}`,
       `- ${messages.file}: ${sourceLocation(target2, messages)}`,
       ...component === void 0 ? [] : [`- ${messages.component}: ${(0, import_shared4.redactSensitiveText)(component)}`],
+      renderInstance(target2, messages),
       `- ${messages.element}: ${(0, import_shared4.redactSensitiveText)(openingTag2(targetDraft?.dom ?? target2.element.sanitizedHtml, messages.unavailable))}`
     ].join("\n");
   });
@@ -1440,7 +1525,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) ? [import_shared8.INSTANCE_SELECTION_INSTRUCTIONS] : []
   ].join("\n\n");
 }
 function composeBounded(annotation, maxCharacters) {
@@ -1547,6 +1633,7 @@ function reduceRuntimeState(state, event) {
 }
 
 // src/state/selection-session.ts
+var import_shared9 = require("@spotpatch/shared");
 var STORAGE_PREFIX = "spotpatch:selection:";
 var SNAPSHOT_VERSION = 1;
 var MAX_SNAPSHOT_CHARACTERS = 1e6;
@@ -1583,7 +1670,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 <= import_shared9.ELEMENT_INSTANCE_LIMITS.idCharacters && /^[A-Za-z0-9_-]+$/u.test(item.id) && import_shared9.ELEMENT_INSTANCE_STATES.some((state) => state === item.state) && (item.selectorStatus === "unique-at-capture" || item.selectorStatus === "unavailable") && text(item.label) && item.label.length <= import_shared9.ELEMENT_INSTANCE_LIMITS.labelCharacters && text(item.context) && item.context.length <= import_shared9.ELEMENT_INSTANCE_LIMITS.contextCharacters;
 }
 function styles(value) {
   const item = record(value);
@@ -1662,13 +1753,13 @@ function createSelectionSession(window, sessionId, maximumTargets) {
 }
 
 // src/source/source-resolver.ts
-var import_shared5 = require("@spotpatch/shared");
+var import_shared10 = require("@spotpatch/shared");
 var EMPTY_REACT_CONTEXT = Object.freeze({
   supported: false,
   componentStack: Object.freeze([])
 });
 function directMarker(element2) {
-  return (0, import_shared5.parseSourceMarker)(element2.getAttribute(import_shared5.SOURCE_MARKER_ATTRIBUTE));
+  return (0, import_shared10.parseSourceMarker)(element2.getAttribute(import_shared10.SOURCE_MARKER_ATTRIBUTE));
 }
 function ancestorMarker(element2) {
   let ancestor = element2.parentElement;
@@ -1748,7 +1839,7 @@ function createSourceResolver(options) {
 }
 
 // src/ui/runtime-view.ts
-var import_shared7 = require("@spotpatch/shared");
+var import_shared12 = require("@spotpatch/shared");
 
 // src/ui/dom.ts
 function createMarkedElement(document, tagName) {
@@ -1771,7 +1862,7 @@ var AGENT_PANEL_STYLES = `
     overflow: hidden;
     border: 1px solid var(--spotpatch-border-subtle);
     border-radius: var(--spotpatch-radius-card);
-    background: rgb(255 255 255 / 2.5%);
+    background: var(--spotpatch-bg-raised);
   }
   .spotpatch-agent-head {
     display: flex;
@@ -1779,17 +1870,17 @@ var AGENT_PANEL_STYLES = `
     justify-content: space-between;
     gap: 10px;
     padding: 10px 12px;
-    border-bottom: 1px solid rgb(255 255 255 / 7%);
+    border-bottom: 1px solid var(--spotpatch-border-subtle);
   }
-  .spotpatch-agent-title { color: #eef0f5; font-size: 13px; font-weight: 650; }
+  .spotpatch-agent-title { font-size: 13px; font-weight: 620; }
   .spotpatch-agent-badge {
-    border: 1px solid rgb(129 112 247 / 24%);
-    border-radius: 999px;
-    padding: 3px 7px;
-    color: #c5cafa;
-    background: rgb(109 93 246 / 9%);
-    font-size: 10px;
-    font-weight: 650;
+    border: 1px solid var(--spotpatch-accent-line);
+    border-radius: var(--spotpatch-radius-pill);
+    padding: 2px 8px;
+    color: var(--spotpatch-accent-soft);
+    background: var(--spotpatch-accent-tint);
+    font-size: 11px;
+    font-weight: 600;
   }
   .spotpatch-agent-setup { padding: 12px; }
   .spotpatch-agent-selectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@@ -1799,71 +1890,71 @@ var AGENT_PANEL_STYLES = `
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    min-height: 34px;
+    min-height: 36px;
     margin-top: 4px;
     border: 1px solid var(--spotpatch-border);
-    border-radius: 8px;
-    padding: 7px 32px 7px 9px;
-    color: #e8ebf2;
-    color-scheme: dark;
-    background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 2%));
-    font-size: 12px;
+    border-radius: var(--spotpatch-radius-sm);
+    padding: 7px 32px 7px 10px;
+    color: var(--spotpatch-text);
+    background: var(--spotpatch-bg-input);
+    font-size: 12.5px;
     font-weight: 560;
     line-height: 1.35;
     outline: none;
-    transition: 160ms ease;
+    transition:
+      border-color var(--spotpatch-duration-fast) ease,
+      box-shadow var(--spotpatch-duration-fast) ease;
   }
-  .spotpatch-agent select:hover { border-color: rgb(148 163 184 / 38%); background-color: rgb(255 255 255 / 5%); }
-  .spotpatch-agent select:focus-visible { border-color: rgb(139 124 247 / 76%); box-shadow: 0 0 0 3px rgb(109 93 246 / 18%); }
-  .spotpatch-agent select option { min-height: 42px; color: #e8ebf2; background: #10151e; }
+  .spotpatch-agent select:hover { border-color: var(--spotpatch-border-strong); }
+  .spotpatch-agent select:focus-visible { border-color: var(--spotpatch-accent-line); box-shadow: 0 0 0 3px var(--spotpatch-accent-tint); }
+  .spotpatch-agent select option { min-height: 42px; color: var(--spotpatch-text); background: var(--spotpatch-bg-raised); }
   @supports (appearance: base-select) {
     .spotpatch-agent select,
     ::picker(select) { appearance: base-select; }
-    .spotpatch-agent select { padding: 7px 9px; }
+    .spotpatch-agent select { padding: 7px 10px; }
     .spotpatch-agent select::picker-icon {
-      color: #9da6b5;
-      transition: rotate 180ms cubic-bezier(.2, .8, .2, 1);
+      color: var(--spotpatch-text-muted);
+      transition: rotate var(--spotpatch-duration-base) var(--spotpatch-ease-out);
     }
-    .spotpatch-agent select:open::picker-icon { rotate: 180deg; color: #c4b5fd; }
+    .spotpatch-agent select:open::picker-icon { rotate: 180deg; color: var(--spotpatch-accent-soft); }
     .spotpatch-agent select::picker(select) {
-      top: calc(anchor(bottom) + 7px);
+      top: calc(anchor(bottom) + 6px);
       left: anchor(left);
       width: anchor-size(width);
       max-height: min(280px, 40vh);
       margin: 0;
       overflow: auto;
-      border: 1px solid rgb(139 124 247 / 28%);
-      border-radius: 12px;
-      padding: 6px;
-      background: #10151e;
-      box-shadow: 0 18px 50px rgb(0 0 0 / 38%);
+      border: 1px solid var(--spotpatch-border);
+      border-radius: var(--spotpatch-radius-card);
+      padding: 5px;
+      background: var(--spotpatch-bg-raised);
+      box-shadow: var(--spotpatch-shadow-panel);
       opacity: 1;
       transform: translateY(0) scale(1);
-      transition: opacity 150ms ease, transform 180ms cubic-bezier(.2, .8, .2, 1), overlay 180ms allow-discrete, display 180ms allow-discrete;
+      transition:
+        opacity var(--spotpatch-duration-fast) ease,
+        transform var(--spotpatch-duration-base) var(--spotpatch-ease-out),
+        overlay var(--spotpatch-duration-base) allow-discrete,
+        display var(--spotpatch-duration-base) allow-discrete;
     }
     @starting-style {
       .spotpatch-agent select::picker(select):popover-open {
         opacity: 0;
-        transform: translateY(-5px) scale(.985);
+        transform: translateY(-5px) scale(.98);
       }
     }
     .spotpatch-agent select option {
-      min-height: 42px;
-      border-radius: 8px;
-      padding: 10px 12px;
-      color: #dfe4ee;
+      min-height: 40px;
+      border-radius: var(--spotpatch-radius-sm);
+      padding: 9px 11px;
+      color: var(--spotpatch-text-secondary);
       background: transparent;
       cursor: pointer;
     }
     .spotpatch-agent select option:hover,
-    .spotpatch-agent select option:focus { color: #fff; background: rgb(109 93 246 / 16%); }
-    .spotpatch-agent select option:checked { color: #fff; background: rgb(109 93 246 / 24%); }
-    .spotpatch-agent select option::checkmark { color: #8b7cf7; }
-  }
-  .spotpatch-agent select:focus-visible,
-  .spotpatch-consent input:focus-visible {
-    outline: 2px solid #8b7cf7;
-    outline-offset: 2px;
+    .spotpatch-agent select option:focus { color: var(--spotpatch-text); background: var(--spotpatch-hover); }
+    .spotpatch-agent select option:checked { color: var(--spotpatch-text); background: var(--spotpatch-accent-tint); }
+    .spotpatch-agent select option::checkmark { color: var(--spotpatch-accent-soft); }
   }
   .spotpatch-consent {
     display: flex;
@@ -1872,26 +1963,21 @@ var AGENT_PANEL_STYLES = `
     margin-top: 10px;
     color: var(--spotpatch-text-secondary);
     cursor: pointer;
-    font-size: 11.5px;
+    font-size: 12px;
     line-height: 1.5;
   }
   .spotpatch-consent input { width: 14px; height: 14px; flex: none; margin: 2px 0 0; accent-color: var(--spotpatch-accent); }
-  .spotpatch-trusted-consent {
-    border: 1px solid rgb(251 191 36 / 20%);
-    border-radius: 10px;
-    padding: 9px 10px;
-    color: #e5e7eb;
-    background: rgb(120 53 15 / 10%);
-  }
+  .spotpatch-trusted-consent,
   .spotpatch-workspace-consent {
-    margin-top: 9px;
-    border: 1px solid rgb(251 191 36 / 18%);
-    border-radius: 10px;
+    border: 1px solid var(--spotpatch-warning-line);
+    border-radius: var(--spotpatch-radius-md);
     padding: 9px 10px;
-    background: rgb(120 53 15 / 9%);
+    background: var(--spotpatch-warning-tint);
   }
-  .spotpatch-workspace-consent strong { display: block; color: #fde68a; font-size: 11.5px; font-weight: 620; }
-  .spotpatch-workspace-consent small { display: block; margin-top: 2px; color: #aeb6c4; font-size: 10.5px; line-height: 1.45; }
+  .spotpatch-trusted-consent { color: var(--spotpatch-text); }
+  .spotpatch-workspace-consent { margin-top: 9px; }
+  .spotpatch-workspace-consent strong { display: block; color: var(--spotpatch-warning-text); font-size: 12px; font-weight: 600; }
+  .spotpatch-workspace-consent small { display: block; margin-top: 2px; color: var(--spotpatch-text-secondary); font-size: 11px; line-height: 1.45; }
   .spotpatch-agent-health-list { display: grid; gap: 6px; margin-top: 10px; }
   .spotpatch-agent-workspace,
   .spotpatch-agent-capability {
@@ -1899,83 +1985,85 @@ var AGENT_PANEL_STYLES = `
     align-items: center;
     gap: 8px;
     margin: 0;
-    color: #929bab;
-    font-size: 11px;
+    color: var(--spotpatch-text-secondary);
+    font-size: 11.5px;
   }
+  .spotpatch-agent-workspace::before,
   .spotpatch-agent-capability::before {
     width: 6px;
     height: 6px;
     flex: none;
-    border-radius: 999px;
-    background: #64748b;
-    content: "";
-  }
-  .spotpatch-agent-capability[data-state="probing"]::before { background: var(--spotpatch-warning); }
-  .spotpatch-agent-capability[data-state="ready"] { color: #a7f3d0; }
-  .spotpatch-agent-capability[data-state="ready"]::before { background: var(--spotpatch-success); }
-  .spotpatch-agent-capability[data-state="error"] { color: #fecaca; }
-  .spotpatch-agent-capability[data-state="error"]::before { background: var(--spotpatch-danger); }
-  .spotpatch-agent-workspace::before {
-    width: 6px;
-    height: 6px;
-    flex: none;
-    border-radius: 999px;
-    background: #64748b;
+    border-radius: 50%;
+    background: var(--spotpatch-text-muted);
     content: "";
   }
+  .spotpatch-agent-capability[data-state="probing"]::before,
   .spotpatch-agent-workspace[data-state="checking"]::before { background: var(--spotpatch-warning); }
-  .spotpatch-agent-workspace[data-state="ready"] { color: #a7f3d0; }
+  .spotpatch-agent-capability[data-state="ready"],
+  .spotpatch-agent-workspace[data-state="ready"] { color: var(--spotpatch-success-text); }
+  .spotpatch-agent-capability[data-state="ready"]::before,
   .spotpatch-agent-workspace[data-state="ready"]::before { background: var(--spotpatch-success); }
-  .spotpatch-agent-workspace[data-state="consent-required"] { color: #fde68a; }
-  .spotpatch-agent-workspace[data-state="consent-required"]::before { background: #fbbf24; }
-  .spotpatch-agent-workspace[data-state="blocked"] { color: #fecaca; }
+  .spotpatch-agent-workspace[data-state="consent-required"] { color: var(--spotpatch-warning-text); }
+  .spotpatch-agent-workspace[data-state="consent-required"]::before { background: var(--spotpatch-warning); }
+  .spotpatch-agent-capability[data-state="error"],
+  .spotpatch-agent-workspace[data-state="blocked"] { color: var(--spotpatch-danger-text); }
+  .spotpatch-agent-capability[data-state="error"]::before,
   .spotpatch-agent-workspace[data-state="blocked"]::before { background: var(--spotpatch-danger); }
   .spotpatch-agent-job { padding: 12px; }
   .spotpatch-agent-job-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-  .spotpatch-agent-model { min-width: 0; overflow: hidden; color: #d6dafe; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
+  .spotpatch-agent-model { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
   .spotpatch-agent-status {
     flex: none;
-    border-radius: 999px;
-    padding: 3px 7px;
-    color: #bae6fd;
-    background: rgb(14 116 144 / 20%);
+    border-radius: var(--spotpatch-radius-pill);
+    padding: 3px 8px;
+    color: var(--spotpatch-cyan-text);
+    background: var(--spotpatch-cyan-tint);
     font-size: 11px;
-    font-weight: 650;
+    font-weight: 600;
   }
-  .spotpatch-agent-phase { margin: 12px 0 0; color: #e2e5ec; font-size: 13px; line-height: 1.55; }
+  .spotpatch-agent-phase { margin: 12px 0 0; font-size: 13px; line-height: 1.55; }
   .spotpatch-agent-error {
     margin: 9px 0 0;
-    border: 1px solid rgb(251 113 133 / 22%);
-    border-radius: 9px;
+    border: 1px solid var(--spotpatch-danger-line);
+    border-radius: var(--spotpatch-radius-md);
     padding: 9px 10px;
-    color: #fecaca;
-    background: rgb(127 29 29 / 14%);
+    color: var(--spotpatch-danger-text);
+    background: var(--spotpatch-danger-tint);
     font-size: 12px;
   }
   .spotpatch-agent-activity { display: grid; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; }
-  .spotpatch-agent-activity li { display: flex; gap: 8px; color: #929bab; font: 11.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
-  .spotpatch-agent-activity li::before { color: #64748b; content: "•"; }
-  .spotpatch-agent-activity li[data-state="active"]::before { color: #fbbf24; }
-  .spotpatch-agent-activity li[data-state="success"]::before { color: #34d399; }
-  .spotpatch-agent-activity li[data-state="failure"]::before { color: #fb7185; }
-  .spotpatch-agent-result { margin-top: 11px; border-top: 1px solid rgb(148 163 184 / 10%); padding-top: 10px; }
-  .spotpatch-agent-summary { margin: 0; color: #dce1eb; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
+  .spotpatch-agent-activity li { display: flex; gap: 8px; color: var(--spotpatch-text-secondary); font: 11.5px/1.55 var(--spotpatch-font-mono); }
+  .spotpatch-agent-activity li::before { color: var(--spotpatch-text-muted); content: "•"; }
+  .spotpatch-agent-activity li[data-state="active"]::before { color: var(--spotpatch-warning); }
+  .spotpatch-agent-activity li[data-state="success"]::before { color: var(--spotpatch-success); }
+  .spotpatch-agent-activity li[data-state="failure"]::before { color: var(--spotpatch-danger); }
+  .spotpatch-agent-result { margin-top: 12px; border-top: 1px solid var(--spotpatch-border-subtle); padding-top: 10px; }
+  .spotpatch-agent-summary { margin: 0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
   .spotpatch-agent-files { display: grid; gap: 4px; margin: 9px 0 0; padding: 0; list-style: none; }
-  .spotpatch-agent-files li { color: #bbc2f7; font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
+  .spotpatch-agent-files li { color: var(--spotpatch-accent-soft); font: 11.5px/1.5 var(--spotpatch-font-mono); overflow-wrap: anywhere; }
   .spotpatch-agent-checks { display: grid; gap: 5px; margin-top: 9px; }
-  .spotpatch-agent-checks details { border: 1px solid rgb(148 163 184 / 12%); border-radius: 8px; background: rgb(2 6 23 / 30%); }
-  .spotpatch-agent-checks summary { padding: 9px 10px; color: #cbd0db; cursor: pointer; font-size: 11.5px; }
-  .spotpatch-agent-checks pre { max-height: 140px; margin: 0; overflow: auto; border-top: 1px solid rgb(255 255 255 / 7%); padding: 10px; color: #929bab; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
+  .spotpatch-agent-checks details { border: 1px solid var(--spotpatch-border-subtle); border-radius: var(--spotpatch-radius-sm); background: var(--spotpatch-bg-input); }
+  .spotpatch-agent-checks summary { padding: 9px 10px; color: var(--spotpatch-text-secondary); cursor: pointer; font-size: 12px; }
+  .spotpatch-agent-checks pre {
+    max-height: 140px;
+    margin: 0;
+    overflow: auto;
+    border-top: 1px solid var(--spotpatch-border-subtle);
+    padding: 10px;
+    color: var(--spotpatch-text-secondary);
+    font: 11px/1.55 var(--spotpatch-font-mono);
+    white-space: pre-wrap;
+  }
   .spotpatch-agent-diff {
     max-height: 300px;
     margin: 9px 0 0;
     overflow: auto;
-    border: 1px solid rgb(129 140 248 / 18%);
-    border-radius: 9px;
-    padding: 8px;
-    color: #cbd5e1;
-    background: rgb(2 6 23 / 66%);
-    font: 11.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
+    border: 1px solid var(--spotpatch-border-subtle);
+    border-radius: var(--spotpatch-radius-md);
+    padding: 8px 10px;
+    color: var(--spotpatch-text);
+    background: var(--spotpatch-bg-input);
+    font: 11.5px/1.6 var(--spotpatch-font-mono);
     overflow-wrap: normal;
     white-space: pre;
     user-select: text;
@@ -2546,6 +2634,113 @@ function getDataFlowExtension(target2 = globalThis) {
   return target2[DATA_FLOW_EXTENSION_KEY];
 }
 
+// src/ui/theme.ts
+var THEME_STYLES = `
+  :host {
+    all: initial;
+    color-scheme: dark;
+
+    --spotpatch-bg: #0c0d12;
+    --spotpatch-bg-raised: #14161d;
+    --spotpatch-bg-active: #1b1e28;
+    --spotpatch-bg-input: #08090d;
+    --spotpatch-border-subtle: rgb(255 255 255 / 7%);
+    --spotpatch-border: rgb(255 255 255 / 11%);
+    --spotpatch-border-strong: rgb(255 255 255 / 20%);
+    --spotpatch-hover: rgb(255 255 255 / 5%);
+
+    --spotpatch-text: #f4f5f7;
+    --spotpatch-text-secondary: #a7acb8;
+    --spotpatch-text-muted: #737987;
+    --spotpatch-text-on-accent: #ffffff;
+
+    --spotpatch-accent: #7c4dff;
+    --spotpatch-accent-strong: #6d35ff;
+    --spotpatch-accent-soft: #c4b3ff;
+    --spotpatch-accent-cyan: #00d9e9;
+    --spotpatch-accent-blue: #168eff;
+    --spotpatch-success: #45d483;
+    --spotpatch-warning: #f4b860;
+    --spotpatch-danger: #ff6b7a;
+
+    --spotpatch-accent-tint: color-mix(in srgb, var(--spotpatch-accent) 16%, transparent);
+    --spotpatch-accent-line: color-mix(in srgb, var(--spotpatch-accent) 48%, transparent);
+    --spotpatch-cyan-text: color-mix(in srgb, var(--spotpatch-accent-cyan) 70%, var(--spotpatch-text));
+    --spotpatch-cyan-tint: color-mix(in srgb, var(--spotpatch-accent-cyan) 10%, transparent);
+    --spotpatch-cyan-line: color-mix(in srgb, var(--spotpatch-accent-cyan) 30%, transparent);
+    --spotpatch-success-text: color-mix(in srgb, var(--spotpatch-success) 72%, var(--spotpatch-text));
+    --spotpatch-success-tint: color-mix(in srgb, var(--spotpatch-success) 12%, transparent);
+    --spotpatch-warning-text: color-mix(in srgb, var(--spotpatch-warning) 78%, var(--spotpatch-text));
+    --spotpatch-warning-tint: color-mix(in srgb, var(--spotpatch-warning) 11%, transparent);
+    --spotpatch-warning-line: color-mix(in srgb, var(--spotpatch-warning) 30%, transparent);
+    --spotpatch-danger-text: color-mix(in srgb, var(--spotpatch-danger) 72%, var(--spotpatch-text));
+    --spotpatch-danger-tint: color-mix(in srgb, var(--spotpatch-danger) 11%, transparent);
+    --spotpatch-danger-line: color-mix(in srgb, var(--spotpatch-danger) 30%, transparent);
+
+    --spotpatch-primary-fill: linear-gradient(135deg, var(--spotpatch-accent), var(--spotpatch-accent-strong));
+    --spotpatch-brand-line: linear-gradient(90deg, var(--spotpatch-accent), var(--spotpatch-accent-blue), var(--spotpatch-accent-cyan));
+    --spotpatch-surface-fill:
+      linear-gradient(180deg, rgb(255 255 255 / 3.5%), transparent 30%),
+      var(--spotpatch-bg);
+    --spotpatch-scrim: rgb(3 3 8 / 72%);
+
+    --spotpatch-shadow-float: 0 18px 44px rgb(6 8 18 / 30%), 0 2px 8px rgb(6 8 18 / 18%);
+    --spotpatch-shadow-panel: 0 28px 70px rgb(6 8 18 / 42%), 0 4px 14px rgb(6 8 18 / 22%);
+    --spotpatch-shadow-inset: inset 0 1px 0 rgb(255 255 255 / 7%);
+    --spotpatch-shadow-accent: 0 10px 26px -10px color-mix(in srgb, var(--spotpatch-accent-strong) 80%, transparent);
+
+    --spotpatch-radius-xs: 6px;
+    --spotpatch-radius-sm: 8px;
+    --spotpatch-radius-md: 10px;
+    --spotpatch-radius-card: 12px;
+    --spotpatch-radius-panel: 20px;
+    --spotpatch-radius-pill: 999px;
+
+    --spotpatch-ease-out: cubic-bezier(.16, 1, .3, 1);
+    --spotpatch-ease-spring: cubic-bezier(.34, 1.36, .64, 1);
+    --spotpatch-ease-standard: cubic-bezier(.2, 0, 0, 1);
+    --spotpatch-duration-fast: 140ms;
+    --spotpatch-duration-base: 220ms;
+    --spotpatch-duration-slow: 420ms;
+
+    --spotpatch-font-sans: Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+    --spotpatch-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+    color: var(--spotpatch-text);
+    font-family: var(--spotpatch-font-sans);
+    font-size: 14px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+  [hidden] { display: none !important; }
+  button, textarea, select, input { font: inherit; }
+  :focus-visible {
+    outline: 2px solid var(--spotpatch-accent-soft);
+    outline-offset: 2px;
+  }
+  * {
+    scrollbar-color: var(--spotpatch-border-strong) transparent;
+    scrollbar-width: thin;
+  }
+  @keyframes spotpatch-enter {
+    from { opacity: 0; filter: blur(3px); transform: translate3d(0, 6px, 0); }
+  }
+  @keyframes spotpatch-pop {
+    from { opacity: 0; transform: scale(.94); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: .01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: .01ms !important;
+    }
+  }
+`;
+var THEME_MOTION_COLORS = Object.freeze({
+  dispatchGlowRest: "0 0 0 0 rgb(124 77 255 / 0%)",
+  dispatchGlow: "0 0 0 4px rgb(124 77 255 / 22%)"
+});
+
 // src/ui/external-handoff-contract.ts
 var EXTERNAL_HANDOFF_EXTENSION_KEY = /* @__PURE__ */ Symbol.for("spotpatch.external-handoff.v1");
 function getExternalHandoffExtension() {
@@ -2565,7 +2760,7 @@ function getFloatingSurfaceMotionExtension() {
 }
 
 // src/ui/localization.ts
-var import_shared6 = require("@spotpatch/shared");
+var import_shared11 = require("@spotpatch/shared");
 var STATUS_EN = Object.freeze({
   queued: "Queued",
   preparing: "Preparing",
@@ -2644,118 +2839,125 @@ function executionActivityLane(kind, detail) {
 var EXTERNAL_HANDOFF_ERROR_EN = "The external Agent handoff request failed.";
 var EXTERNAL_HANDOFF_ERROR_ZH = "外部 Agent 交接请求失败。";
 var ERROR_MESSAGES_EN = Object.freeze({
-  [import_shared6.ERROR_CODES.INVALID_REQUEST]: "The Agent request was rejected as invalid.",
-  [import_shared6.ERROR_CODES.INVALID_TOKEN]: "The local SpotPatch session expired.",
-  [import_shared6.ERROR_CODES.ORIGIN_NOT_ALLOWED]: "The current page origin is not authorized.",
-  [import_shared6.ERROR_CODES.SOURCE_NOT_FOUND]: "The selected source is no longer available.",
-  [import_shared6.ERROR_CODES.SOURCE_OUTSIDE_ROOT]: "The selected source is outside the project.",
-  [import_shared6.ERROR_CODES.SOURCE_TOO_LARGE]: "The selected source exceeds the safety limit.",
-  [import_shared6.ERROR_CODES.EDITOR_OPEN_FAILED]: "The editor request failed.",
-  [import_shared6.ERROR_CODES.DATA_FLOW_DISABLED]: "Component data-flow analysis is disabled.",
-  [import_shared6.ERROR_CODES.DATA_FLOW_SOURCE_STALE]: "The selected source changed. Select the component again.",
-  [import_shared6.ERROR_CODES.DATA_FLOW_ANALYSIS_CANCELLED]: "Component data-flow analysis was cancelled.",
-  [import_shared6.ERROR_CODES.AI_DISABLED]: "AI execution is disabled in Vite configuration.",
-  [import_shared6.ERROR_CODES.PROVIDER_NOT_CONFIGURED]: "The provider Key environment variable is missing on the Vite process.",
-  [import_shared6.ERROR_CODES.PROVIDER_AUTH_FAILED]: "The provider rejected authentication. Check the server-side Key.",
-  [import_shared6.ERROR_CODES.PROVIDER_PROTOCOL_UNSUPPORTED]: "The relay does not match the configured OpenAI-compatible protocol.",
-  [import_shared6.ERROR_CODES.MODEL_NOT_ALLOWED]: "The selected model profile is not allowed.",
-  [import_shared6.ERROR_CODES.MODEL_TOOL_CALL_UNSUPPORTED]: "The selected model did not start or continue the required tool call.",
-  [import_shared6.ERROR_CODES.PROVIDER_RATE_LIMITED]: "The provider is rate limited. Wait and try again.",
-  [import_shared6.ERROR_CODES.AGENT_BUSY]: "Another write Agent job is still active.",
-  [import_shared6.ERROR_CODES.AGENT_LIMIT_EXCEEDED]: "The Agent stopped at a configured time, turn, output, or size limit.",
-  [import_shared6.ERROR_CODES.AGENT_CANCELLED]: "The Agent job was cancelled.",
-  [import_shared6.ERROR_CODES.EXTERNAL_HANDOFF_DISABLED]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.EXTERNAL_HANDOFF_UNAVAILABLE]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.HANDOFF_VALIDATION_FAILED]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.HANDOFF_SOURCE_STALE]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.HANDOFF_NOT_FOUND]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.HANDOFF_EXPIRED]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.HANDOFF_CURSOR_INVALID]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.HANDOFF_RESPONSE_TOO_LARGE]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.BRIDGE_UNAUTHORIZED]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.BRIDGE_PROTOCOL_MISMATCH]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.BRIDGE_BUSY]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.EXTERNAL_AGENT_BUSY]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.ACTIVE_ADAPTER_CONFLICT]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.ACTIVE_ADAPTER_LEASE_INVALID]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.ACTIVE_DISPATCH_INVALID]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.SESSION_NOT_FOUND]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.SESSION_AMBIGUOUS]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.SESSION_CLOSED]: EXTERNAL_HANDOFF_ERROR_EN,
-  [import_shared6.ERROR_CODES.WORKTREE_DIRTY]: "Confirm inclusion of local changes before running AI.",
-  [import_shared6.ERROR_CODES.WORKTREE_NOT_REPOSITORY]: "Vite root must be an initialized Git repository root.",
-  [import_shared6.ERROR_CODES.WORKTREE_OPERATION_IN_PROGRESS]: "Finish the active merge, rebase, cherry-pick, or revert.",
-  [import_shared6.ERROR_CODES.WORKTREE_CONFLICTED]: "Resolve all Git conflicts before running AI.",
-  [import_shared6.ERROR_CODES.WORKTREE_LOCAL_CHANGES_TOO_LARGE]: "Reduce untracked files below the safe count and size limits.",
-  [import_shared6.ERROR_CODES.WORKTREE_UNTRACKED_UNSUPPORTED]: "An untracked path is missing, linked, or not a regular file.",
-  [import_shared6.ERROR_CODES.WORKTREE_LOCAL_CHANGES_UNSUPPORTED]: "Local changes cannot be isolated safely.",
-  [import_shared6.ERROR_CODES.TOOL_DENIED]: "A tool request violated local safety policy.",
-  [import_shared6.ERROR_CODES.TOOL_INPUT_INVALID]: "Invalid tool request.",
-  [import_shared6.ERROR_CODES.TOOL_ARGUMENTS_INVALID]: "Tool arguments are invalid.",
-  [import_shared6.ERROR_CODES.TOOL_CALL_ID_CONFLICT]: "Tool ID conflicts in this turn.",
-  [import_shared6.ERROR_CODES.TOOL_PATH_DENIED]: "The model requested a protected or external path.",
-  [import_shared6.ERROR_CODES.PATCH_REJECTED]: "The patch violated local policy.",
-  [import_shared6.ERROR_CODES.VALIDATION_FAILED]: "Required checks failed; changes cannot be applied.",
-  [import_shared6.ERROR_CODES.APPLY_CONFLICT]: "Agent-touched files changed; nothing was overwritten.",
-  [import_shared6.ERROR_CODES.INTERNAL_ERROR]: "The Agent failed without exposing private details."
+  [import_shared11.ERROR_CODES.INVALID_REQUEST]: "The Agent request was rejected as invalid.",
+  [import_shared11.ERROR_CODES.INVALID_TOKEN]: "The local SpotPatch session expired.",
+  [import_shared11.ERROR_CODES.ORIGIN_NOT_ALLOWED]: "The current page origin is not authorized.",
+  [import_shared11.ERROR_CODES.SOURCE_NOT_FOUND]: "The selected source is no longer available.",
+  [import_shared11.ERROR_CODES.SOURCE_OUTSIDE_ROOT]: "The selected source is outside the project.",
+  [import_shared11.ERROR_CODES.SOURCE_TOO_LARGE]: "The selected source exceeds the safety limit.",
+  [import_shared11.ERROR_CODES.EDITOR_OPEN_FAILED]: "The editor request failed.",
+  [import_shared11.ERROR_CODES.DATA_FLOW_DISABLED]: "Component data-flow analysis is disabled.",
+  [import_shared11.ERROR_CODES.DATA_FLOW_SOURCE_STALE]: "The selected source changed. Select the component again.",
+  [import_shared11.ERROR_CODES.DATA_FLOW_ANALYSIS_CANCELLED]: "Component data-flow analysis was cancelled.",
+  [import_shared11.ERROR_CODES.AI_DISABLED]: "AI execution is disabled in Vite configuration.",
+  [import_shared11.ERROR_CODES.PROVIDER_NOT_CONFIGURED]: "The provider Key environment variable is missing on the Vite process.",
+  [import_shared11.ERROR_CODES.PROVIDER_AUTH_FAILED]: "The provider rejected authentication. Check the server-side Key.",
+  [import_shared11.ERROR_CODES.PROVIDER_PROTOCOL_UNSUPPORTED]: "The relay does not match the configured OpenAI-compatible protocol.",
+  [import_shared11.ERROR_CODES.MODEL_NOT_ALLOWED]: "The selected model profile is not allowed.",
+  [import_shared11.ERROR_CODES.MODEL_TOOL_CALL_UNSUPPORTED]: "The selected model did not start or continue the required tool call.",
+  [import_shared11.ERROR_CODES.PROVIDER_RATE_LIMITED]: "The provider is rate limited. Wait and try again.",
+  [import_shared11.ERROR_CODES.AGENT_BUSY]: "Another write Agent job is still active.",
+  [import_shared11.ERROR_CODES.AGENT_LIMIT_EXCEEDED]: "The Agent stopped at a configured time, turn, output, or size limit.",
+  [import_shared11.ERROR_CODES.AGENT_CANCELLED]: "The Agent job was cancelled.",
+  [import_shared11.ERROR_CODES.EXTERNAL_HANDOFF_DISABLED]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.EXTERNAL_HANDOFF_UNAVAILABLE]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.HANDOFF_VALIDATION_FAILED]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.HANDOFF_SOURCE_STALE]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.HANDOFF_NOT_FOUND]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.HANDOFF_EXPIRED]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.HANDOFF_CURSOR_INVALID]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.HANDOFF_RESPONSE_TOO_LARGE]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.BRIDGE_UNAUTHORIZED]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.BRIDGE_PROTOCOL_MISMATCH]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.BRIDGE_BUSY]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.EXTERNAL_AGENT_BUSY]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.ACTIVE_ADAPTER_CONFLICT]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.ACTIVE_ADAPTER_LEASE_INVALID]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.ACTIVE_DISPATCH_INVALID]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.SESSION_NOT_FOUND]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.SESSION_AMBIGUOUS]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.SESSION_CLOSED]: EXTERNAL_HANDOFF_ERROR_EN,
+  [import_shared11.ERROR_CODES.WORKTREE_DIRTY]: "Confirm inclusion of local changes before running AI.",
+  [import_shared11.ERROR_CODES.WORKTREE_NOT_REPOSITORY]: "Vite root must be an initialized Git repository root.",
+  [import_shared11.ERROR_CODES.WORKTREE_OPERATION_IN_PROGRESS]: "Finish the active merge, rebase, cherry-pick, or revert.",
+  [import_shared11.ERROR_CODES.WORKTREE_CONFLICTED]: "Resolve all Git conflicts before running AI.",
+  [import_shared11.ERROR_CODES.WORKTREE_LOCAL_CHANGES_TOO_LARGE]: "Reduce untracked files below the safe count and size limits.",
+  [import_shared11.ERROR_CODES.WORKTREE_UNTRACKED_UNSUPPORTED]: "An untracked path is missing, linked, or not a regular file.",
+  [import_shared11.ERROR_CODES.WORKTREE_LOCAL_CHANGES_UNSUPPORTED]: "Local changes cannot be isolated safely.",
+  [import_shared11.ERROR_CODES.TOOL_DENIED]: "A tool request violated local safety policy.",
+  [import_shared11.ERROR_CODES.TOOL_INPUT_INVALID]: "Invalid tool request.",
+  [import_shared11.ERROR_CODES.TOOL_ARGUMENTS_INVALID]: "Tool arguments are invalid.",
+  [import_shared11.ERROR_CODES.TOOL_CALL_ID_CONFLICT]: "Tool ID conflicts in this turn.",
+  [import_shared11.ERROR_CODES.TOOL_PATH_DENIED]: "The model requested a protected or external path.",
+  [import_shared11.ERROR_CODES.PATCH_REJECTED]: "The patch violated local policy.",
+  [import_shared11.ERROR_CODES.VALIDATION_FAILED]: "Required checks failed; changes cannot be applied.",
+  [import_shared11.ERROR_CODES.APPLY_CONFLICT]: "Agent-touched files changed; nothing was overwritten.",
+  [import_shared11.ERROR_CODES.INTERNAL_ERROR]: "The Agent failed without exposing private details."
 });
 var ERROR_MESSAGES_ZH = Object.freeze({
-  [import_shared6.ERROR_CODES.INVALID_REQUEST]: "Agent 请求无效，已被拒绝。",
-  [import_shared6.ERROR_CODES.INVALID_TOKEN]: "本地 SpotPatch 会话已失效。",
-  [import_shared6.ERROR_CODES.ORIGIN_NOT_ALLOWED]: "当前页面来源未获授权。",
-  [import_shared6.ERROR_CODES.SOURCE_NOT_FOUND]: "选中目标对应的源码已不可用。",
-  [import_shared6.ERROR_CODES.SOURCE_OUTSIDE_ROOT]: "选中源码位于项目根目录之外。",
-  [import_shared6.ERROR_CODES.SOURCE_TOO_LARGE]: "选中源码超过安全大小限制。",
-  [import_shared6.ERROR_CODES.EDITOR_OPEN_FAILED]: "编辑器打开请求失败。",
-  [import_shared6.ERROR_CODES.DATA_FLOW_DISABLED]: "组件数据链路分析未启用。",
-  [import_shared6.ERROR_CODES.DATA_FLOW_SOURCE_STALE]: "选中源码已经变化，请重新选择组件。",
-  [import_shared6.ERROR_CODES.DATA_FLOW_ANALYSIS_CANCELLED]: "组件数据链路分析已取消。",
-  [import_shared6.ERROR_CODES.AI_DISABLED]: "Vite 配置未启用 AI 执行。",
-  [import_shared6.ERROR_CODES.PROVIDER_NOT_CONFIGURED]: "启动 Vite 的进程中缺少模型服务 Key 环境变量。",
-  [import_shared6.ERROR_CODES.PROVIDER_AUTH_FAILED]: "模型服务鉴权失败，请检查服务端 Key。",
-  [import_shared6.ERROR_CODES.PROVIDER_PROTOCOL_UNSUPPORTED]: "中转服务与配置的 OpenAI 兼容协议不一致。",
-  [import_shared6.ERROR_CODES.MODEL_NOT_ALLOWED]: "当前模型配置未获授权。",
-  [import_shared6.ERROR_CODES.MODEL_TOOL_CALL_UNSUPPORTED]: "当前模型未完成必要的工具调用或结果续接。",
-  [import_shared6.ERROR_CODES.PROVIDER_RATE_LIMITED]: "模型服务正在限流，请稍后重试。",
-  [import_shared6.ERROR_CODES.AGENT_BUSY]: "当前项目已有一个写入任务正在运行。",
-  [import_shared6.ERROR_CODES.AGENT_LIMIT_EXCEEDED]: "Agent 达到时间、轮次、输出或变更规模限制。",
-  [import_shared6.ERROR_CODES.AGENT_CANCELLED]: "Agent 任务已取消。",
-  [import_shared6.ERROR_CODES.EXTERNAL_HANDOFF_DISABLED]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.EXTERNAL_HANDOFF_UNAVAILABLE]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.HANDOFF_VALIDATION_FAILED]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.HANDOFF_SOURCE_STALE]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.HANDOFF_NOT_FOUND]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.HANDOFF_EXPIRED]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.HANDOFF_CURSOR_INVALID]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.HANDOFF_RESPONSE_TOO_LARGE]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.BRIDGE_UNAUTHORIZED]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.BRIDGE_PROTOCOL_MISMATCH]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.BRIDGE_BUSY]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.EXTERNAL_AGENT_BUSY]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.ACTIVE_ADAPTER_CONFLICT]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.ACTIVE_ADAPTER_LEASE_INVALID]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.ACTIVE_DISPATCH_INVALID]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.SESSION_NOT_FOUND]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.SESSION_AMBIGUOUS]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.SESSION_CLOSED]: EXTERNAL_HANDOFF_ERROR_ZH,
-  [import_shared6.ERROR_CODES.WORKTREE_DIRTY]: "运行 AI 前，请明确同意将当前本地修改纳入隔离基线。",
-  [import_shared6.ERROR_CODES.WORKTREE_NOT_REPOSITORY]: "Vite 根目录不是已初始化 Git 仓库的顶层目录。",
-  [import_shared6.ERROR_CODES.WORKTREE_OPERATION_IN_PROGRESS]: "请先完成当前 merge、rebase、cherry-pick 或 revert，再运行 AI。",
-  [import_shared6.ERROR_CODES.WORKTREE_CONFLICTED]: "请先解决全部 Git 冲突，再运行 AI。",
-  [import_shared6.ERROR_CODES.WORKTREE_LOCAL_CHANGES_TOO_LARGE]: "未跟踪文件超过安全数量或体积上限，请先精简。",
-  [import_shared6.ERROR_CODES.WORKTREE_UNTRACKED_UNSUPPORTED]: "未跟踪项已丢失、是符号链接或不是普通文件。",
-  [import_shared6.ERROR_CODES.WORKTREE_LOCAL_CHANGES_UNSUPPORTED]: "当前本地修改无法安全隔离。",
-  [import_shared6.ERROR_CODES.TOOL_DENIED]: "工具请求违反本地安全策略。",
-  [import_shared6.ERROR_CODES.TOOL_INPUT_INVALID]: "工具请求无效。",
-  [import_shared6.ERROR_CODES.TOOL_ARGUMENTS_INVALID]: "工具参数无效。",
-  [import_shared6.ERROR_CODES.TOOL_CALL_ID_CONFLICT]: "本轮工具 ID 冲突。",
-  [import_shared6.ERROR_CODES.TOOL_PATH_DENIED]: "模型请求了受保护或项目外路径。",
-  [import_shared6.ERROR_CODES.PATCH_REJECTED]: "补丁违反本地策略。",
-  [import_shared6.ERROR_CODES.VALIDATION_FAILED]: "必需检查失败，无法应用变更。",
-  [import_shared6.ERROR_CODES.APPLY_CONFLICT]: "Agent 触及文件已变化，未覆盖。",
-  [import_shared6.ERROR_CODES.INTERNAL_ERROR]: "Agent 失败，未暴露私有细节。"
+  [import_shared11.ERROR_CODES.INVALID_REQUEST]: "Agent 请求无效，已被拒绝。",
+  [import_shared11.ERROR_CODES.INVALID_TOKEN]: "本地 SpotPatch 会话已失效。",
+  [import_shared11.ERROR_CODES.ORIGIN_NOT_ALLOWED]: "当前页面来源未获授权。",
+  [import_shared11.ERROR_CODES.SOURCE_NOT_FOUND]: "选中目标对应的源码已不可用。",
+  [import_shared11.ERROR_CODES.SOURCE_OUTSIDE_ROOT]: "选中源码位于项目根目录之外。",
+  [import_shared11.ERROR_CODES.SOURCE_TOO_LARGE]: "选中源码超过安全大小限制。",
+  [import_shared11.ERROR_CODES.EDITOR_OPEN_FAILED]: "编辑器打开请求失败。",
+  [import_shared11.ERROR_CODES.DATA_FLOW_DISABLED]: "组件数据链路分析未启用。",
+  [import_shared11.ERROR_CODES.DATA_FLOW_SOURCE_STALE]: "选中源码已经变化，请重新选择组件。",
+  [import_shared11.ERROR_CODES.DATA_FLOW_ANALYSIS_CANCELLED]: "组件数据链路分析已取消。",
+  [import_shared11.ERROR_CODES.AI_DISABLED]: "Vite 配置未启用 AI 执行。",
+  [import_shared11.ERROR_CODES.PROVIDER_NOT_CONFIGURED]: "启动 Vite 的进程中缺少模型服务 Key 环境变量。",
+  [import_shared11.ERROR_CODES.PROVIDER_AUTH_FAILED]: "模型服务鉴权失败，请检查服务端 Key。",
+  [import_shared11.ERROR_CODES.PROVIDER_PROTOCOL_UNSUPPORTED]: "中转服务与配置的 OpenAI 兼容协议不一致。",
+  [import_shared11.ERROR_CODES.MODEL_NOT_ALLOWED]: "当前模型配置未获授权。",
+  [import_shared11.ERROR_CODES.MODEL_TOOL_CALL_UNSUPPORTED]: "当前模型未完成必要的工具调用或结果续接。",
+  [import_shared11.ERROR_CODES.PROVIDER_RATE_LIMITED]: "模型服务正在限流，请稍后重试。",
+  [import_shared11.ERROR_CODES.AGENT_BUSY]: "当前项目已有一个写入任务正在运行。",
+  [import_shared11.ERROR_CODES.AGENT_LIMIT_EXCEEDED]: "Agent 达到时间、轮次、输出或变更规模限制。",
+  [import_shared11.ERROR_CODES.AGENT_CANCELLED]: "Agent 任务已取消。",
+  [import_shared11.ERROR_CODES.EXTERNAL_HANDOFF_DISABLED]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.EXTERNAL_HANDOFF_UNAVAILABLE]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.HANDOFF_VALIDATION_FAILED]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.HANDOFF_SOURCE_STALE]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.HANDOFF_NOT_FOUND]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.HANDOFF_EXPIRED]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.HANDOFF_CURSOR_INVALID]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.HANDOFF_RESPONSE_TOO_LARGE]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.BRIDGE_UNAUTHORIZED]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.BRIDGE_PROTOCOL_MISMATCH]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.BRIDGE_BUSY]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.EXTERNAL_AGENT_BUSY]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.ACTIVE_ADAPTER_CONFLICT]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.ACTIVE_ADAPTER_LEASE_INVALID]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.ACTIVE_DISPATCH_INVALID]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.SESSION_NOT_FOUND]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.SESSION_AMBIGUOUS]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.SESSION_CLOSED]: EXTERNAL_HANDOFF_ERROR_ZH,
+  [import_shared11.ERROR_CODES.WORKTREE_DIRTY]: "运行 AI 前，请明确同意将当前本地修改纳入隔离基线。",
+  [import_shared11.ERROR_CODES.WORKTREE_NOT_REPOSITORY]: "Vite 根目录不是已初始化 Git 仓库的顶层目录。",
+  [import_shared11.ERROR_CODES.WORKTREE_OPERATION_IN_PROGRESS]: "请先完成当前 merge、rebase、cherry-pick 或 revert，再运行 AI。",
+  [import_shared11.ERROR_CODES.WORKTREE_CONFLICTED]: "请先解决全部 Git 冲突，再运行 AI。",
+  [import_shared11.ERROR_CODES.WORKTREE_LOCAL_CHANGES_TOO_LARGE]: "未跟踪文件超过安全数量或体积上限，请先精简。",
+  [import_shared11.ERROR_CODES.WORKTREE_UNTRACKED_UNSUPPORTED]: "未跟踪项已丢失、是符号链接或不是普通文件。",
+  [import_shared11.ERROR_CODES.WORKTREE_LOCAL_CHANGES_UNSUPPORTED]: "当前本地修改无法安全隔离。",
+  [import_shared11.ERROR_CODES.TOOL_DENIED]: "工具请求违反本地安全策略。",
+  [import_shared11.ERROR_CODES.TOOL_INPUT_INVALID]: "工具请求无效。",
+  [import_shared11.ERROR_CODES.TOOL_ARGUMENTS_INVALID]: "工具参数无效。",
+  [import_shared11.ERROR_CODES.TOOL_CALL_ID_CONFLICT]: "本轮工具 ID 冲突。",
+  [import_shared11.ERROR_CODES.TOOL_PATH_DENIED]: "模型请求了受保护或项目外路径。",
+  [import_shared11.ERROR_CODES.PATCH_REJECTED]: "补丁违反本地策略。",
+  [import_shared11.ERROR_CODES.VALIDATION_FAILED]: "必需检查失败，无法应用变更。",
+  [import_shared11.ERROR_CODES.APPLY_CONFLICT]: "Agent 触及文件已变化，未覆盖。",
+  [import_shared11.ERROR_CODES.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({
@@ -2796,6 +2998,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({
@@ -2980,13 +3189,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…",
@@ -3144,13 +3353,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: "正在打开源码……",
@@ -3713,67 +3922,102 @@ function resolveStyleNonce(document) {
 function createStyles(document) {
   const style = document.createElement("style");
   style.textContent = `
-    :host {
-      all: initial;
-      --spotpatch-bg: #0e0e12;
-      --spotpatch-bg-raised: #17171c;
-      --spotpatch-bg-active: #1c1c22;
-      --spotpatch-bg-input: #0b0b0f;
-      --spotpatch-border: #2a2a32;
-      --spotpatch-border-subtle: #232329;
-      --spotpatch-text: #f2f2f5;
-      --spotpatch-text-secondary: #96969f;
-      --spotpatch-text-muted: #686872;
-      --spotpatch-accent: #8b7bff;
-      --spotpatch-accent-strong: #6a5ce8;
-      --spotpatch-accent-cyan: #52a8ff;
-      --spotpatch-danger: #fb7185;
-      --spotpatch-success: #34d399;
-      --spotpatch-warning: #f59e0b;
-      --spotpatch-text-on-accent: #0b0b12;
-      --spotpatch-radius-card: 10px;
-      color: var(--spotpatch-text);
-      font-family: Inter, "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
-      font-size: 14px;
-      line-height: 1.5;
-    }
-    [hidden] { display: none !important; }
-    button, textarea, select { font: inherit; }
+    ${THEME_STYLES}
     .spotpatch-floating-surface {
       position: fixed;
       right: ${String(FLOATING_SURFACE_LAYOUT.desktopInset)}px;
       bottom: ${String(FLOATING_SURFACE_LAYOUT.desktopInset)}px;
       z-index: ${String(UI_Z_INDEX.controls)};
+      box-sizing: border-box;
+      overflow: hidden;
       isolation: isolate;
+      border: 1px solid var(--spotpatch-border);
+      background: var(--spotpatch-surface-fill);
+      box-shadow: var(--spotpatch-shadow-float), var(--spotpatch-shadow-inset);
+      transform-origin: 100% 100%;
     }
-    .spotpatch-highlight {
+    .spotpatch-floating-surface[data-scene="pill"],
+    .spotpatch-floating-surface[data-scene="capturing"] {
+      width: max-content;
+      border-radius: var(--spotpatch-radius-pill);
+    }
+    .spotpatch-floating-surface[data-scene="planner"] {
+      border-radius: var(--spotpatch-radius-panel);
+      box-shadow: var(--spotpatch-shadow-panel), var(--spotpatch-shadow-inset);
+    }
+
+    .spotpatch-trigger {
+      display: inline-flex;
+      min-height: 44px;
+      align-items: center;
+      gap: 10px;
+      border: 0;
+      border-radius: var(--spotpatch-radius-pill);
+      padding: 0 18px 0 16px;
+      color: var(--spotpatch-text);
+      background: transparent;
+      cursor: pointer;
+      font-size: 13.5px;
+      font-weight: 620;
+      letter-spacing: -.005em;
+      touch-action: none;
+      user-select: none;
+      transition: background var(--spotpatch-duration-fast) ease;
+    }
+    .spotpatch-trigger::before {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--spotpatch-accent);
+      box-shadow: 0 0 0 4px var(--spotpatch-accent-tint);
+      content: "";
+      transition: background var(--spotpatch-duration-base) ease;
+    }
+    .spotpatch-trigger:hover { background: var(--spotpatch-hover); }
+    .spotpatch-trigger[aria-pressed="true"]::before {
+      background: var(--spotpatch-accent-cyan);
+      animation: spotpatch-trigger-pulse 1.6s var(--spotpatch-ease-standard) infinite;
+    }
+    .spotpatch-trigger[data-dragging="true"] { cursor: grabbing; }
+    @keyframes spotpatch-trigger-pulse {
+      0% { box-shadow: 0 0 0 0 var(--spotpatch-cyan-line); }
+      100% { box-shadow: 0 0 0 9px transparent; }
+    }
+
+    .spotpatch-highlight,
+    .spotpatch-selection-highlight {
       position: fixed;
       top: 0;
       left: 0;
-      z-index: ${String(UI_Z_INDEX.highlight)};
       box-sizing: border-box;
-      border: 2px solid var(--spotpatch-accent);
-      border-radius: 6px;
-      background: rgb(109 93 246 / 8%);
-      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%), 0 0 0 1px rgb(109 93 246 / 10%);
+      border-radius: var(--spotpatch-radius-xs);
       pointer-events: none;
     }
-    .spotpatch-highlight-label {
+    .spotpatch-highlight {
+      z-index: ${String(UI_Z_INDEX.highlight)};
+      border: 1.5px solid var(--spotpatch-accent);
+      background: var(--spotpatch-accent-tint);
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--spotpatch-accent) 12%, transparent);
+      transition:
+        transform var(--spotpatch-duration-fast) var(--spotpatch-ease-out),
+        width var(--spotpatch-duration-fast) var(--spotpatch-ease-out),
+        height var(--spotpatch-duration-fast) var(--spotpatch-ease-out);
+    }
+    .spotpatch-highlight-label,
+    .spotpatch-selection-highlight > span {
       position: absolute;
-      top: -30px;
-      left: -2px;
-      max-width: min(380px, 80vw);
+      bottom: calc(100% + 6px);
+      left: -1.5px;
       overflow: hidden;
-      border: 1px solid rgb(255 255 255 / 14%);
-      border-radius: 8px 8px 8px 3px;
-      padding: 6px 10px;
-      color: #fff;
-      background: #5546dc;
-      box-shadow: 0 8px 20px rgb(49 46 129 / 22%);
-      font: 650 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
+      border-radius: var(--spotpatch-radius-xs);
+      padding: 4px 8px;
+      color: var(--spotpatch-text-on-accent);
+      background: var(--spotpatch-accent-strong);
+      font: 600 11px/1.3 var(--spotpatch-font-mono);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+    .spotpatch-highlight-label { max-width: min(380px, 80vw); }
     .spotpatch-selection-highlights {
       position: fixed;
       inset: 0;
@@ -3781,37 +4025,27 @@ function createStyles(document) {
       pointer-events: none;
     }
     .spotpatch-selection-highlight {
-      position: fixed;
-      top: 0;
-      left: 0;
-      box-sizing: border-box;
-      border: 2px solid var(--spotpatch-accent-cyan);
-      border-radius: 6px;
-      background: rgb(8 182 214 / 5%);
-      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
+      border: 1.5px solid var(--spotpatch-accent-cyan);
+      background: var(--spotpatch-cyan-tint);
     }
     .spotpatch-selection-highlight[data-active="true"] {
-      border-color: #7768f7;
-      background: rgb(109 93 246 / 8%);
-      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%);
+      border-color: var(--spotpatch-accent);
+      background: var(--spotpatch-accent-tint);
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--spotpatch-accent) 12%, transparent);
+    }
+    .spotpatch-selection-highlight[data-entering="true"] {
+      animation: spotpatch-pop var(--spotpatch-duration-base) var(--spotpatch-ease-spring) both;
     }
     .spotpatch-selection-highlight > span {
-      position: absolute;
-      top: -24px;
-      left: -2px;
       max-width: min(300px, 70vw);
-      overflow: hidden;
-      border-radius: 7px 7px 7px 2px;
-      padding: 4px 8px;
-      color: #ecfeff;
-      background: rgb(14 67 82 / 96%);
-      font: 650 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      color: var(--spotpatch-bg);
+      background: var(--spotpatch-accent-cyan);
     }
     .spotpatch-selection-highlight[data-active="true"] > span {
-      background: #5546dc;
+      color: var(--spotpatch-text-on-accent);
+      background: var(--spotpatch-accent-strong);
     }
+
     .spotpatch-dialog {
       position: relative;
       box-sizing: border-box;
@@ -3819,18 +4053,14 @@ function createStyles(document) {
       outline: none;
     }
     .spotpatch-shell {
-      position: relative;
-      z-index: 1;
       display: flex;
       box-sizing: border-box;
       max-height: min(${String(FLOATING_SURFACE_LAYOUT.workbenchMaxHeight)}px, calc(100vh - ${String(FLOATING_SURFACE_LAYOUT.desktopInset * 2)}px));
       overflow: hidden;
       flex-direction: column;
     }
-    .spotpatch-header {
-      position: relative;
-      padding: 0 18px 14px;
-    }
+
+    .spotpatch-header { padding: 0 18px 16px; }
     .spotpatch-header[data-spotpatch-drag-handle] { cursor: grab; touch-action: none; user-select: none; }
     .spotpatch-header[data-dragging="true"] { cursor: grabbing; }
     .spotpatch-header button,
@@ -3840,133 +4070,115 @@ function createStyles(document) {
       align-items: center;
       justify-content: space-between;
       gap: 12px;
-      margin: 0 -18px 18px;
-      padding: 14px 18px 13px;
+      margin: 0 -18px 16px;
+      padding: 12px 14px 12px 18px;
       border-bottom: 1px solid var(--spotpatch-border-subtle);
     }
-    .spotpatch-brand {
-      display: inline-flex;
-      align-items: center;
-      gap: 10px;
-      min-width: 0;
-      color: #f8fafc;
-    }
-    .spotpatch-brand-mark {
-      width: 30px;
-      height: 30px;
-      flex: none;
-      filter: drop-shadow(0 6px 12px rgb(76 29 149 / 22%));
-    }
+    .spotpatch-brand { display: inline-flex; min-width: 0; align-items: center; gap: 10px; }
+    .spotpatch-brand-mark { width: 28px; height: 28px; flex: none; }
     .spotpatch-brand-copy { display: grid; min-width: 0; gap: 1px; }
-    .spotpatch-header-controls {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      flex: none;
-    }
+    .spotpatch-brand-name { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; }
+    .spotpatch-brand-context { color: var(--spotpatch-text-muted); font-size: 11px; font-weight: 520; }
+    .spotpatch-header-controls { display: inline-flex; flex: none; align-items: center; gap: 2px; }
     .spotpatch-repository,
     .spotpatch-locale,
     .spotpatch-reset-position,
-    .spotpatch-close {
-      height: 27px;
-      border: 1px solid rgb(255 255 255 / 11%);
-      border-radius: 7px;
-      background: transparent;
-    }
-    .spotpatch-repository {
-      display: inline-flex;
-      align-items: center;
-      padding: 0 9px;
-      color: var(--spotpatch-text-secondary);
-      font-size: 11px;
-      font-weight: 680;
-      text-decoration: none;
-    }
-    .spotpatch-locale {
-      min-width: 34px;
-      padding: 0 8px;
-      color: #c5cad5;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: 650;
-    }
-    .spotpatch-reset-position {
-      display: inline-grid;
-      width: 27px;
-      padding: 0;
-      place-items: center;
-      color: #c5cad5;
-      cursor: pointer;
-      font-size: 15px;
-      line-height: 1;
-    }
     .spotpatch-close {
       display: inline-grid;
-      width: 27px;
-      padding: 0;
+      box-sizing: border-box;
+      min-width: 28px;
+      height: 28px;
       place-items: center;
-      color: #9da5b4;
-      cursor: pointer;
-      font-size: 15px;
+      border: 0;
+      border-radius: var(--spotpatch-radius-sm);
+      padding: 0 7px;
+      color: var(--spotpatch-text-muted);
+      background: transparent;
+      font-size: 12px;
+      font-weight: 600;
       line-height: 1;
-      transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
+      text-decoration: none;
+      transition:
+        color var(--spotpatch-duration-fast) ease,
+        background var(--spotpatch-duration-fast) ease;
     }
-    .spotpatch-close:hover,
+    .spotpatch-reset-position,
+    .spotpatch-close { padding: 0; font-size: 15px; }
+    .spotpatch-reset-position svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; }
+    .spotpatch-repository:hover,
     .spotpatch-locale:hover,
     .spotpatch-reset-position:hover,
-    .spotpatch-repository:hover { border-color: rgb(129 112 247 / 45%); color: #fff; background: rgb(109 93 246 / 10%); }
+    .spotpatch-close:hover { color: var(--spotpatch-text); background: var(--spotpatch-hover); }
+
+    .spotpatch-title {
+      margin: 0;
+      font-size: 17px;
+      font-weight: 650;
+      letter-spacing: -.02em;
+      line-height: 1.3;
+    }
+    .spotpatch-subtitle {
+      max-width: 400px;
+      margin: 4px 0 0;
+      color: var(--spotpatch-text-secondary);
+      font-size: 12.5px;
+      line-height: 1.55;
+    }
     .spotpatch-target-row {
       display: flex;
-      align-items: center;
-      gap: 8px;
       min-width: 0;
+      align-items: center;
+      gap: 10px;
       margin-top: 14px;
     }
     .spotpatch-target-label {
       min-width: 0;
       overflow: hidden;
-      border: 1px solid rgb(129 112 247 / 24%);
-      border-radius: 999px;
-      padding: 4px 10px;
-      color: #cdd2ff;
-      background: rgb(109 93 246 / 10%);
-      font: 600 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
+      border: 1px solid var(--spotpatch-accent-line);
+      border-radius: var(--spotpatch-radius-pill);
+      padding: 3px 10px;
+      color: var(--spotpatch-accent-soft);
+      background: var(--spotpatch-accent-tint);
+      font: 600 11px/1.4 var(--spotpatch-font-mono);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
     .spotpatch-context-state {
       display: inline-flex;
+      flex: none;
       align-items: center;
       gap: 6px;
-      flex: none;
-      color: #a5adba;
-      font-size: 11px;
+      color: var(--spotpatch-warning-text);
+      font-size: 11.5px;
       white-space: nowrap;
     }
     .spotpatch-context-state::before {
       width: 6px;
       height: 6px;
-      border-radius: 999px;
-      background: #f59e0b;
+      border-radius: 50%;
+      background: var(--spotpatch-warning);
       content: "";
     }
+    .spotpatch-context-state[data-state="loading"]::before {
+      animation: spotpatch-dot-breathe 1.4s ease-in-out infinite;
+    }
     .spotpatch-context-state[data-state="ready"],
-    .spotpatch-editor-feedback[data-state="success"] { color: #9fe3c4; }
+    .spotpatch-editor-feedback[data-state="success"] { color: var(--spotpatch-success-text); }
     .spotpatch-context-state[data-state="ready"]::before,
-    .spotpatch-editor-feedback[data-state="success"]::before { background: #34d399; }
+    .spotpatch-editor-feedback[data-state="success"]::before { background: var(--spotpatch-success); }
     .spotpatch-context-state[data-state="warning"],
-    .spotpatch-editor-feedback[data-state="error"] { color: #fecaca; }
+    .spotpatch-editor-feedback[data-state="error"] { color: var(--spotpatch-danger-text); }
     .spotpatch-context-state[data-state="warning"]::before,
-    .spotpatch-editor-feedback[data-state="error"]::before { background: #fb7185; }
+    .spotpatch-editor-feedback[data-state="error"]::before { background: var(--spotpatch-danger); }
+    @keyframes spotpatch-dot-breathe {
+      50% { opacity: .35; }
+    }
+
     .spotpatch-body {
       min-height: 0;
       overflow: auto;
-      padding: 0 18px 14px;
-      scrollbar-color: rgb(100 116 139 / 50%) transparent;
-      scrollbar-width: thin;
-    }
-    .spotpatch-targets {
-      margin: 0;
+      overscroll-behavior: contain;
+      padding: 0 18px 16px;
     }
     .spotpatch-targets-heading {
       display: flex;
@@ -3974,71 +4186,73 @@ function createStyles(document) {
       justify-content: space-between;
       gap: 10px;
       margin-bottom: 8px;
-      color: var(--spotpatch-text-secondary);
+      color: var(--spotpatch-text-muted);
       font-size: 11px;
-      font-weight: 650;
-      letter-spacing: .04em;
+      font-weight: 600;
+      letter-spacing: .06em;
       text-transform: uppercase;
     }
     .spotpatch-targets-meta {
       display: flex;
+      min-width: 0;
       align-items: center;
       gap: 8px;
-      min-width: 0;
       letter-spacing: 0;
       text-transform: none;
     }
-    .spotpatch-target-complete { color: var(--spotpatch-text-muted); font-size: 11px; font-weight: 560; }
-    .spotpatch-target-budget {
-      color: var(--spotpatch-text-muted);
-      font: 550 10.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
-    }
+    .spotpatch-target-budget { font: 500 11px/1.4 var(--spotpatch-font-mono); }
     .spotpatch-target-budget[data-state="ready"] { display: none; }
-    .spotpatch-target-budget[data-state="over"] { color: #fda4af; }
+    .spotpatch-target-budget[data-state="over"] { color: var(--spotpatch-danger-text); }
     .spotpatch-target-count {
       margin-left: auto;
-      border-radius: 999px;
-      padding: 3px 8px;
       color: var(--spotpatch-text-muted);
-      font: 600 10.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
+      font: 500 11px/1.4 var(--spotpatch-font-mono);
     }
     .spotpatch-target-progress {
-      height: 3px;
-      margin-bottom: 13px;
+      height: 2px;
+      margin-bottom: 12px;
       overflow: hidden;
-      border-radius: 999px;
+      border-radius: var(--spotpatch-radius-pill);
       background: var(--spotpatch-border-subtle);
     }
     .spotpatch-target-progress-fill {
       width: 0;
       height: 100%;
       border-radius: inherit;
-      background: linear-gradient(90deg, var(--spotpatch-accent), var(--spotpatch-accent-cyan));
-      transition: width 180ms ease;
+      background: var(--spotpatch-brand-line);
+      transition: width var(--spotpatch-duration-slow) var(--spotpatch-ease-out);
     }
     .spotpatch-target-list {
       display: grid;
       gap: 8px;
       max-height: min(340px, 48vh);
       overflow: auto;
-      padding-right: 2px;
+      padding: 2px;
+      margin: -2px;
     }
+
     .spotpatch-target-item {
       overflow: hidden;
       border: 1px solid var(--spotpatch-border-subtle);
       border-radius: var(--spotpatch-radius-card);
       background: var(--spotpatch-bg-raised);
-      transition: border-color 150ms ease, background 150ms ease;
+      transition:
+        border-color var(--spotpatch-duration-base) ease,
+        background var(--spotpatch-duration-base) ease,
+        box-shadow var(--spotpatch-duration-base) ease;
     }
     .spotpatch-target-item[data-active="true"] {
-      border-color: rgb(139 123 255 / 34%);
+      border-color: var(--spotpatch-accent-line);
       background: var(--spotpatch-bg-active);
-      box-shadow: 0 0 0 3px rgb(139 123 255 / 10%);
+      box-shadow: 0 0 0 3px var(--spotpatch-accent-tint);
+    }
+    .spotpatch-target-item[data-entering="true"] {
+      animation: spotpatch-enter var(--spotpatch-duration-slow) var(--spotpatch-ease-out) both;
     }
     .spotpatch-target-summary {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) 28px 28px;
-      align-items: stretch;
+      grid-template-columns: minmax(0, 1fr) 30px 30px;
+      align-items: center;
       gap: 2px;
       padding: 4px;
     }
@@ -4046,27 +4260,31 @@ function createStyles(document) {
       display: grid;
       grid-template-columns: 24px minmax(0, 1fr) auto;
       align-items: center;
-      gap: 9px;
+      gap: 10px;
       min-width: 0;
       border: 0;
-      border-radius: 8px;
-      padding: 8px;
+      border-radius: var(--spotpatch-radius-sm);
+      padding: 7px 8px;
       color: inherit;
       background: transparent;
       cursor: pointer;
       text-align: left;
+      transition: background var(--spotpatch-duration-fast) ease;
     }
-    .spotpatch-target-select:hover { background: rgb(255 255 255 / 3.5%); }
+    .spotpatch-target-select:hover { background: var(--spotpatch-hover); }
     .spotpatch-target-index {
       display: inline-grid;
-      width: 22px;
-      height: 22px;
+      width: 24px;
+      height: 24px;
       place-items: center;
-      border: 1px solid rgb(68 202 224 / 25%);
-      border-radius: 6px;
+      border-radius: var(--spotpatch-radius-xs);
       color: var(--spotpatch-text-secondary);
-      background: var(--spotpatch-bg);
-      font: 650 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
+      background: var(--spotpatch-hover);
+      font: 600 11px/1 var(--spotpatch-font-mono);
+    }
+    [data-active="true"] .spotpatch-target-index {
+      color: var(--spotpatch-text-on-accent);
+      background: var(--spotpatch-accent-strong);
     }
     .spotpatch-target-copy { min-width: 0; }
     .spotpatch-target-name,
@@ -4076,37 +4294,49 @@ function createStyles(document) {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    .spotpatch-target-name { color: #f2f2f5; font-size: 13px; font-weight: 650; }
-    .spotpatch-target-source { margin-top: 1px; color: var(--spotpatch-text-muted); font: 500 10.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
+    .spotpatch-target-name { font-size: 13px; font-weight: 620; }
+    .spotpatch-target-source {
+      margin-top: 1px;
+      color: var(--spotpatch-text-muted);
+      font: 500 11px/1.4 var(--spotpatch-font-mono);
+    }
     .spotpatch-target-state {
-      border-radius: 999px;
+      border-radius: var(--spotpatch-radius-pill);
       padding: 3px 8px;
-      color: #a7f3d0;
-      background: rgb(16 185 129 / 9%);
-      font-size: 10.5px;
-      font-weight: 650;
+      color: var(--spotpatch-success-text);
+      background: var(--spotpatch-success-tint);
+      font-size: 11px;
+      font-weight: 600;
       white-space: nowrap;
     }
-    .spotpatch-target-state[data-complete="false"] { color: #f5c97a; background: rgb(245 158 11 / 9%); }
+    .spotpatch-target-state[data-complete="false"] {
+      color: var(--spotpatch-warning-text);
+      background: var(--spotpatch-warning-tint);
+    }
     .spotpatch-target-open,
     .spotpatch-target-remove {
       display: inline-grid;
-      width: 28px;
-      height: 100%;
-      min-height: 34px;
-      padding: 0;
+      width: 30px;
+      height: 30px;
       place-items: center;
-      border: 1px solid transparent;
-      border-radius: 7px;
-      color: #7f899a;
+      border: 0;
+      border-radius: var(--spotpatch-radius-sm);
+      padding: 0;
+      color: var(--spotpatch-text-muted);
       background: transparent;
       cursor: pointer;
-    }
-    .spotpatch-target-open { color: #79d9e7; }
-    .spotpatch-target-open:hover:not(:disabled) { border-color: rgb(68 202 224 / 30%); color: #c8f7ff; background: rgb(8 145 178 / 11%); }
-    .spotpatch-target-remove:hover:not(:disabled) { border-color: rgb(251 113 133 / 24%); color: #fda4af; background: rgb(127 29 29 / 12%); }
+      transition:
+        color var(--spotpatch-duration-fast) ease,
+        background var(--spotpatch-duration-fast) ease;
+    }
+    .spotpatch-target-open:hover:not(:disabled) { color: var(--spotpatch-cyan-text); background: var(--spotpatch-cyan-tint); }
+    .spotpatch-target-remove:hover:not(:disabled) { color: var(--spotpatch-danger-text); background: var(--spotpatch-danger-tint); }
+    .spotpatch-target-open:disabled,
+    .spotpatch-target-remove:disabled { cursor: not-allowed; opacity: .35; }
+
     .spotpatch-target-editor {
-      padding: 0 12px 12px;
+      display: block;
+      padding: 2px 12px 12px;
     }
     .spotpatch-target-editor-head {
       display: flex;
@@ -4115,179 +4345,178 @@ function createStyles(document) {
       gap: 12px;
       margin-bottom: 6px;
     }
-    .spotpatch-target-editor-label { color: var(--spotpatch-text-secondary); font-size: 11px; font-weight: 650; }
-    .spotpatch-target-editor-count { color: var(--spotpatch-text-muted); font: 500 10.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
+    .spotpatch-target-editor-label { color: var(--spotpatch-text-secondary); font-size: 11.5px; font-weight: 600; }
+    .spotpatch-target-editor-count { color: var(--spotpatch-text-muted); font: 500 11px/1.3 var(--spotpatch-font-mono); }
     .spotpatch-target-editor textarea {
+      display: block;
       box-sizing: border-box;
       width: 100%;
-      min-height: 74px;
+      min-height: 76px;
       resize: vertical;
       border: 1px solid var(--spotpatch-border);
-      border-radius: 7px;
-      padding: 9px 10px;
-      color: #f8fafc;
-      caret-color: #8b7cf7;
+      border-radius: var(--spotpatch-radius-md);
+      padding: 10px 12px;
+      color: var(--spotpatch-text);
+      caret-color: var(--spotpatch-accent-soft);
       background: var(--spotpatch-bg-input);
-      font-size: 12.5px;
+      font-size: 13px;
       line-height: 1.55;
       outline: none;
-      transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
+      transition:
+        border-color var(--spotpatch-duration-fast) ease,
+        box-shadow var(--spotpatch-duration-fast) ease;
     }
-    .spotpatch-target-editor textarea::placeholder { color: #687284; }
-    .spotpatch-target-editor textarea:hover { border-color: rgb(139 124 247 / 34%); }
+    .spotpatch-target-editor textarea::placeholder { color: var(--spotpatch-text-muted); }
+    .spotpatch-target-editor textarea:hover { border-color: var(--spotpatch-border-strong); }
     .spotpatch-target-editor textarea:focus {
-      border-color: rgb(139 124 247 / 68%);
-      background: rgb(3 7 18 / 65%);
-      box-shadow: 0 0 0 2px rgb(109 93 246 / 10%);
+      border-color: var(--spotpatch-accent-line);
+      box-shadow: 0 0 0 3px var(--spotpatch-accent-tint);
     }
+
     .spotpatch-diagnostics {
       margin-top: 10px;
       overflow: hidden;
-      border: 1px solid rgb(255 255 255 / 8%);
-      border-radius: 9px;
-      background: rgb(255 255 255 / 2.5%);
+      border: 1px solid var(--spotpatch-border-subtle);
+      border-radius: var(--spotpatch-radius-md);
     }
     .spotpatch-diagnostics > summary {
       display: flex;
       align-items: center;
       gap: 8px;
-      padding: 9px 11px;
-      color: #bfc5d0;
+      padding: 9px 12px;
+      color: var(--spotpatch-text-secondary);
       cursor: pointer;
-      font-size: 11px;
-      font-weight: 650;
+      font-size: 11.5px;
+      font-weight: 600;
       list-style: none;
       user-select: none;
     }
     .spotpatch-diagnostics > summary::-webkit-details-marker { display: none; }
     .spotpatch-diagnostics > summary::before {
-      color: #778193;
+      color: var(--spotpatch-text-muted);
       content: "›";
       font-size: 16px;
       line-height: 1;
-      transform: rotate(0deg);
-      transition: transform 150ms ease;
+      transition: transform var(--spotpatch-duration-base) var(--spotpatch-ease-out);
     }
     .spotpatch-diagnostics[open] > summary::before { transform: rotate(90deg); }
     .spotpatch-source-peek {
       min-width: 0;
-      overflow: hidden;
       margin-left: auto;
-      color: #64748b;
-      font: 500 10.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
+      overflow: hidden;
+      color: var(--spotpatch-text-muted);
+      font: 500 11px/1.3 var(--spotpatch-font-mono);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    .spotpatch-summary {
-      max-height: 170px;
+    .spotpatch-summary,
+    .spotpatch-prompt {
       margin: 0;
       overflow: auto;
-      border-top: 1px solid rgb(255 255 255 / 7%);
-      padding: 10px 11px 11px;
-      color: #9ca5b5;
-      font: 10.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
       overflow-wrap: anywhere;
       white-space: pre-wrap;
       user-select: text;
+      font: 11px/1.6 var(--spotpatch-font-mono);
+    }
+    .spotpatch-summary {
+      max-height: 170px;
+      border-top: 1px solid var(--spotpatch-border-subtle);
+      padding: 10px 12px 12px;
+      color: var(--spotpatch-text-secondary);
     }
     .spotpatch-prompt {
       max-height: min(500px, 60vh);
-      margin: 0;
-      overflow: auto;
-      border: 1px solid rgb(255 255 255 / 9%);
-      border-radius: 9px;
-      padding: 11px;
-      color: #d8ddeb;
-      background: rgb(3 7 18 / 55%);
-      font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
-      overflow-wrap: anywhere;
-      white-space: pre-wrap;
-      user-select: text;
+      border: 1px solid var(--spotpatch-border-subtle);
+      border-radius: var(--spotpatch-radius-md);
+      padding: 12px;
+      color: var(--spotpatch-text);
+      background: var(--spotpatch-bg-input);
     }
+
     .spotpatch-actions {
       display: grid;
       gap: 8px;
-      padding: 10px 18px 14px;
-      border-top: 1px solid rgb(255 255 255 / 8%);
-      background: rgb(8 8 12 / 86%);
-    }
-    .spotpatch-editor-feedback {
-      white-space: normal;
+      border-top: 1px solid var(--spotpatch-border-subtle);
+      padding: 12px 18px 16px;
     }
+    .spotpatch-editor-feedback { white-space: normal; }
     .spotpatch-secondary-actions,
-    .spotpatch-primary-actions {
-      display: flex;
-      align-items: center;
-      gap: 7px;
-    }
-    .spotpatch-secondary-actions { min-height: 30px; }
+    .spotpatch-primary-actions { display: flex; align-items: center; gap: 8px; }
+    .spotpatch-secondary-actions { gap: 2px; margin: 0 -8px; }
     .spotpatch-actions button {
       display: inline-flex;
-      min-height: 34px;
+      min-height: 36px;
       align-items: center;
       justify-content: center;
-      border: 1px solid rgb(255 255 255 / 10%);
-      border-radius: 9px;
-      padding: 7px 11px;
-      color: var(--spotpatch-text-secondary);
-      background: rgb(255 255 255 / 4%);
+      gap: 6px;
+      border: 1px solid var(--spotpatch-border);
+      border-radius: var(--spotpatch-radius-md);
+      padding: 0 12px;
+      color: var(--spotpatch-text);
+      background: var(--spotpatch-bg-raised);
       cursor: pointer;
-      font-size: 12px;
-      font-weight: 650;
-      transition: border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
+      font-size: 12.5px;
+      font-weight: 600;
+      white-space: nowrap;
+      transition:
+        border-color var(--spotpatch-duration-fast) ease,
+        background var(--spotpatch-duration-fast) ease,
+        box-shadow var(--spotpatch-duration-base) ease,
+        transform var(--spotpatch-duration-fast) ease;
     }
     .spotpatch-actions button:hover:not(:disabled) {
-      border-color: rgb(139 124 247 / 45%);
-      color: #fff;
-      transform: translateY(-1px);
+      border-color: var(--spotpatch-border-strong);
+      background: var(--spotpatch-bg-active);
     }
+    .spotpatch-actions button:active:not(:disabled) { transform: scale(.98); }
     .spotpatch-actions .spotpatch-primary {
-      min-width: 138px;
+      min-width: 140px;
       flex: 1;
       border-color: transparent;
       color: var(--spotpatch-text-on-accent);
-      background: linear-gradient(135deg, var(--spotpatch-accent), var(--spotpatch-accent-strong));
-      box-shadow: 0 8px 20px -8px rgb(139 123 255 / 55%);
+      background: var(--spotpatch-primary-fill);
+      box-shadow: var(--spotpatch-shadow-accent), var(--spotpatch-shadow-inset);
+    }
+    .spotpatch-actions .spotpatch-primary:hover:not(:disabled) {
+      border-color: transparent;
+      background: var(--spotpatch-primary-fill);
+      filter: brightness(1.1);
     }
-    .spotpatch-actions .spotpatch-primary:hover:not(:disabled) { color: var(--spotpatch-text-on-accent); filter: brightness(1.08); }
-    .spotpatch-actions .spotpatch-primary::after { margin-left: 8px; content: "↗"; font-size: 12px; }
+    .spotpatch-actions .spotpatch-primary::after { content: "↗"; font-size: 12px; opacity: .8; }
     .spotpatch-actions .spotpatch-secondary-action {
       min-height: 30px;
-      border-style: dashed;
-      padding: 5px 10px;
-      color: var(--spotpatch-text-muted);
+      border-color: transparent;
+      padding: 0 8px;
+      color: var(--spotpatch-text-secondary);
       background: transparent;
-      font-size: 11px;
+      font-size: 12px;
+      font-weight: 550;
+    }
+    .spotpatch-actions .spotpatch-secondary-action:hover:not(:disabled) {
+      border-color: transparent;
+      color: var(--spotpatch-text);
+      background: var(--spotpatch-hover);
     }
     .spotpatch-actions .spotpatch-icon-action {
-      width: 34px;
-      min-width: 34px;
+      width: 36px;
+      min-width: 36px;
       padding: 0;
       font-size: 0;
     }
     .spotpatch-actions .spotpatch-icon-action::before {
       color: var(--spotpatch-text-secondary);
       content: attr(data-compact-icon);
-      font-size: 18px;
+      font-size: 17px;
       font-weight: 400;
       line-height: 1;
     }
-    .spotpatch-actions button:disabled { cursor: not-allowed; opacity: .4; transform: none; }
-    .spotpatch-actions button:focus-visible,
-    .spotpatch-repository:focus-visible,
-    .spotpatch-target-open:focus-visible,
-    .spotpatch-target-remove:focus-visible,
-    .spotpatch-close:focus-visible,
-    .spotpatch-reset-position:focus-visible,
-    .spotpatch-trigger:focus-visible,
-    .spotpatch-target-select:focus-visible,
-    .spotpatch-target-editor textarea:focus-visible,
-    .spotpatch-locale:focus-visible,
-    .spotpatch-prompt:focus-visible,
-    .spotpatch-diagnostics > summary:focus-visible {
-      outline: 2px solid #8b7cf7;
-      outline-offset: 2px;
+    .spotpatch-actions button:disabled {
+      box-shadow: none;
+      cursor: not-allowed;
+      filter: none;
+      opacity: .4;
     }
+
     .spotpatch-live {
       position: absolute;
       width: 1px;
@@ -4297,16 +4526,11 @@ function createStyles(document) {
       clip-path: inset(50%);
       white-space: nowrap;
     }
-    @media (prefers-reduced-motion: reduce) {
-      .spotpatch-trigger,
-      .spotpatch-actions button,
-      .spotpatch-diagnostics > summary::before { transition: none; }
-    }
     @media (max-width: 520px) {
       .spotpatch-dialog { width: calc(100vw - 16px); }
       .spotpatch-shell { max-height: calc(100dvh - 16px); }
-      .spotpatch-header, .spotpatch-body { padding-left: 14px; padding-right: 14px; }
-      .spotpatch-brand-row { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
+      .spotpatch-header, .spotpatch-body { padding-right: 14px; padding-left: 14px; }
+      .spotpatch-brand-row { margin-right: -14px; margin-left: -14px; padding-right: 10px; padding-left: 14px; }
       .spotpatch-actions { padding-right: 14px; padding-left: 14px; }
       .spotpatch-target-select { grid-template-columns: 24px minmax(0, 1fr); }
       .spotpatch-target-state { display: none; }
@@ -4316,6 +4540,19 @@ function createStyles(document) {
   `;
   return style;
 }
+function createResetPositionIcon(document) {
+  const namespace = "http://www.w3.org/2000/svg";
+  const icon = document.createElementNS(namespace, "svg");
+  icon.setAttribute("viewBox", "0 0 16 16");
+  icon.setAttribute("aria-hidden", "true");
+  const path = document.createElementNS(namespace, "path");
+  path.setAttribute(
+    "d",
+    "M8 1.5v3M8 11.5v3M1.5 8h3M11.5 8h3M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+  );
+  icon.append(path);
+  return icon;
+}
 function summaryLine(summary, prefix) {
   const line = summary.split("\n").find((candidate) => candidate.startsWith(`${prefix}: `));
   return line?.slice(prefix.length + 2).trim();
@@ -4442,11 +4679,12 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   headerControls.className = "spotpatch-header-controls";
   const repositoryLink = createMarkedElement(document, "a");
   repositoryLink.className = "spotpatch-repository";
-  repositoryLink.href = import_shared7.SPOTPATCH_REPOSITORY_URL;
+  repositoryLink.href = import_shared12.SPOTPATCH_REPOSITORY_URL;
   repositoryLink.target = "_blank";
   repositoryLink.rel = "noopener noreferrer";
   const localeButton = createButton(document, "", "spotpatch-locale");
-  const resetPositionButton = createButton(document, "⌖", "spotpatch-reset-position");
+  const resetPositionButton = createButton(document, "", "spotpatch-reset-position");
+  resetPositionButton.append(createResetPositionIcon(document));
   const closeButton = createButton(document, "×", "spotpatch-close");
   headerControls.append(repositoryLink, localeButton, resetPositionButton, closeButton);
   brandRow.append(brand, headerControls);
@@ -4673,6 +4911,8 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   let editingEnabled = true;
   let currentTargets = [];
   let currentMaximum = 0;
+  let renderedTargetIds = /* @__PURE__ */ new Set();
+  let renderedHighlightIds = /* @__PURE__ */ new Set();
   let currentEditorFeedbackState = "idle";
   let currentDataFlowState = Object.freeze({
     component: Object.freeze({
@@ -4951,6 +5191,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;
     }
@@ -4977,6 +5220,8 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     const selectionEnd = focusedInstruction?.selectionEnd;
     currentTargets = targets.map((target2) => Object.freeze({ ...target2 }));
     currentMaximum = maximum;
+    const previousTargetIds = renderedTargetIds;
+    renderedTargetIds = new Set(targets.map((target2) => target2.id));
     targetList.replaceChildren();
     const completeCount = targets.filter(
       (target2) => target2.instruction.trim().length > 0
@@ -4991,14 +5236,14 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       completeCount,
       targets.length
     );
-    const instructionLimitExceeded = instructionCharacters > import_shared7.MAX_ANNOTATION_INSTRUCTION_CHARACTERS;
+    const instructionLimitExceeded = instructionCharacters > import_shared12.MAX_ANNOTATION_INSTRUCTION_CHARACTERS;
     targetBudget.dataset.state = instructionLimitExceeded ? "over" : "ready";
     targetBudget.textContent = instructionLimitExceeded ? messages.targets.instructionBudgetExceeded(
       instructionCharacters,
-      import_shared7.MAX_ANNOTATION_INSTRUCTION_CHARACTERS
+      import_shared12.MAX_ANNOTATION_INSTRUCTION_CHARACTERS
     ) : messages.targets.instructionBudget(
       instructionCharacters,
-      import_shared7.MAX_ANNOTATION_INSTRUCTION_CHARACTERS
+      import_shared12.MAX_ANNOTATION_INSTRUCTION_CHARACTERS
     );
     addTargetButton.disabled = !editingEnabled || targets.length >= maximum;
     addTargetButton.title = targets.length >= maximum ? messages.targets.limitTitle(maximum) : messages.targets.addTitle;
@@ -5009,6 +5254,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       item.dataset.active = String(target2.active);
       item.dataset.status = target2.status;
       item.dataset.targetId = target2.id;
+      item.dataset.entering = String(!previousTargetIds.has(target2.id));
       const targetSummary = createMarkedElement(document, "div");
       targetSummary.className = "spotpatch-target-summary";
       const select = createButton(document, "", "spotpatch-target-select");
@@ -5057,12 +5303,12 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
         characterCount.className = "spotpatch-target-editor-count";
         characterCount.textContent = messages.targets.instructionCount(
           target2.instruction.length,
-          import_shared7.MAX_TARGET_INSTRUCTION_CHARACTERS
+          import_shared12.MAX_TARGET_INSTRUCTION_CHARACTERS
         );
         editorHead.append(editorLabel, characterCount);
         const input = createMarkedElement(document, "textarea");
         input.rows = 4;
-        input.maxLength = import_shared7.MAX_TARGET_INSTRUCTION_CHARACTERS;
+        input.maxLength = import_shared12.MAX_TARGET_INSTRUCTION_CHARACTERS;
         input.value = target2.instruction;
         input.placeholder = messages.targets.instructionPlaceholder;
         input.disabled = !editingEnabled;
@@ -5105,7 +5351,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     if (count !== null) {
       count.textContent = messages.targets.instructionCount(
         instruction.length,
-        import_shared7.MAX_TARGET_INSTRUCTION_CHARACTERS
+        import_shared12.MAX_TARGET_INSTRUCTION_CHARACTERS
       );
     }
     const completeCount = currentTargets.filter(
@@ -5120,22 +5366,25 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       (total, target2) => total + target2.instruction.trim().length,
       0
     );
-    const instructionLimitExceeded = instructionCharacters > import_shared7.MAX_ANNOTATION_INSTRUCTION_CHARACTERS;
+    const instructionLimitExceeded = instructionCharacters > import_shared12.MAX_ANNOTATION_INSTRUCTION_CHARACTERS;
     targetBudget.dataset.state = instructionLimitExceeded ? "over" : "ready";
     targetBudget.textContent = instructionLimitExceeded ? messages.targets.instructionBudgetExceeded(
       instructionCharacters,
-      import_shared7.MAX_ANNOTATION_INSTRUCTION_CHARACTERS
+      import_shared12.MAX_ANNOTATION_INSTRUCTION_CHARACTERS
     ) : messages.targets.instructionBudget(
       instructionCharacters,
-      import_shared7.MAX_ANNOTATION_INSTRUCTION_CHARACTERS
+      import_shared12.MAX_ANNOTATION_INSTRUCTION_CHARACTERS
     );
   }
   function showSelectionHighlights(targets) {
+    const previousHighlightIds = renderedHighlightIds;
+    renderedHighlightIds = new Set(targets.map((target2) => target2.id));
     selectionHighlights.replaceChildren();
     for (const [index, target2] of targets.entries()) {
       const box = createMarkedElement(document, "div");
       box.className = "spotpatch-selection-highlight";
       box.dataset.targetId = target2.id;
+      box.dataset.entering = String(!previousHighlightIds.has(target2.id));
       box.dataset.active = String(target2.active);
       box.style.transform = `translate(${String(target2.rect.x)}px, ${String(target2.rect.y)}px)`;
       box.style.width = `${String(target2.rect.width)}px`;
@@ -5245,7 +5494,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       targetBudget.dataset.state = "ready";
       targetBudget.textContent = messages.targets.instructionBudget(
         0,
-        import_shared7.MAX_ANNOTATION_INSTRUCTION_CHARACTERS
+        import_shared12.MAX_ANNOTATION_INSTRUCTION_CHARACTERS
       );
       targetLabel.textContent = messages.context.selectedElement;
     }
@@ -5585,6 +5834,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}`);
   }
@@ -5618,7 +5872,7 @@ function createSelectionSummary(input, messages) {
 }
 
 // src/controller/agent-workflow.ts
-var import_shared8 = require("@spotpatch/shared");
+var import_shared13 = require("@spotpatch/shared");
 function capabilityKey(providerProfileId, modelProfileId) {
   return `${providerProfileId}:${modelProfileId}`;
 }
@@ -5656,7 +5910,7 @@ function activityFromEvent(event) {
   return void 0;
 }
 function createAgentWorkflow(options) {
-  const errorCode = (error) => runtimeApiErrorCode(error) ?? import_shared8.ERROR_CODES.INTERNAL_ERROR;
+  const errorCode = (error) => runtimeApiErrorCode(error) ?? import_shared13.ERROR_CODES.INTERNAL_ERROR;
   const errorMessage = (error) => options.view.messages().errors[errorCode(error)];
   const capabilities = /* @__PURE__ */ new Map();
   const providerConsents = /* @__PURE__ */ new Set();
@@ -5742,7 +5996,7 @@ function createAgentWorkflow(options) {
     }
     if (capability.state !== "agent-ready") {
       throw new RuntimeApiError(
-        capability.errorCode ?? import_shared8.ERROR_CODES.MODEL_TOOL_CALL_UNSUPPORTED
+        capability.errorCode ?? import_shared13.ERROR_CODES.MODEL_TOOL_CALL_UNSUPPORTED
       );
     }
     capabilities.set(key, capability);
@@ -5936,11 +6190,11 @@ function createAgentWorkflow(options) {
         }
         if (health.state === "blocked") {
           throw new RuntimeApiError(
-            health.errorCode ?? import_shared8.ERROR_CODES.WORKTREE_LOCAL_CHANGES_UNSUPPORTED
+            health.errorCode ?? import_shared13.ERROR_CODES.WORKTREE_LOCAL_CHANGES_UNSUPPORTED
           );
         }
         if (health.state === "consent-required" && !options.view.agentWorkspaceConsentGranted()) {
-          throw new RuntimeApiError(import_shared8.ERROR_CODES.WORKTREE_DIRTY);
+          throw new RuntimeApiError(import_shared13.ERROR_CODES.WORKTREE_DIRTY);
         }
         const created = await options.api.createAgentJob({
           annotation,
@@ -6041,7 +6295,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") {
@@ -6084,6 +6338,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 ?? (0, import_react_adapter.createReact18Adapter)({
       ...config.dataFlow.enabled ? {
@@ -6115,7 +6370,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,
@@ -6149,14 +6405,14 @@ function createController(config, dependencies = {}) {
     const react2 = target2.resolution.react;
     if (react2.componentSourceId !== void 0 && react2.sourceVersion !== void 0) {
       return Object.freeze({
-        schemaVersion: import_shared9.DATA_FLOW_SCHEMA_VERSION,
+        schemaVersion: import_shared14.DATA_FLOW_SCHEMA_VERSION,
         componentSourceId: react2.componentSourceId,
         sourceVersion: react2.sourceVersion
       });
     }
     const marker = target2.marker;
     return marker === void 0 ? void 0 : Object.freeze({
-      schemaVersion: import_shared9.DATA_FLOW_SCHEMA_VERSION,
+      schemaVersion: import_shared14.DATA_FLOW_SCHEMA_VERSION,
       fileId: marker.fileId,
       line: marker.line,
       column: marker.column
@@ -6204,7 +6460,7 @@ function createController(config, dependencies = {}) {
     const [componentResult, pageResult] = await Promise.allSettled([
       currentRequest === void 0 ? Promise.resolve(void 0) : api.componentDataFlowReport(currentRequest),
       pageTargets.length === 0 ? Promise.resolve(void 0) : api.pageDataFlowReport({
-        schemaVersion: import_shared9.DATA_FLOW_SCHEMA_VERSION,
+        schemaVersion: import_shared14.DATA_FLOW_SCHEMA_VERSION,
         targets: pageTargets
       })
     ]);
@@ -6269,11 +6525,12 @@ function createController(config, dependencies = {}) {
       (total, target2) => total + target2.instruction.trim().length,
       0
     );
-    return targets.length > 0 && instructionCharacters <= import_shared9.MAX_ANNOTATION_INSTRUCTION_CHARACTERS && targets.every(
+    return targets.length > 0 && instructionCharacters <= import_shared14.MAX_ANNOTATION_INSTRUCTION_CHARACTERS && targets.every(
       (target2) => target2.instruction.trim().length > 0 && target2.elementContext !== void 0 && target2.styles !== void 0 && target2.apiStatus !== "loading"
     );
   }
   function selectedAskSelection() {
+    refreshInstanceStates(mutationObserver?.takeRecords() ?? []);
     const snapshots = targets.flatMap((target2) => {
       const snapshot = snapshotTarget(target2);
       return snapshot === void 0 ? [] : [snapshot];
@@ -6292,6 +6549,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,
@@ -6337,7 +6595,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),
@@ -6357,6 +6619,7 @@ ${summary}`;
     }
   }
   function selectedAnnotation() {
+    refreshInstanceStates(mutationObserver?.takeRecords() ?? []);
     if (!canPreview()) {
       return void 0;
     }
@@ -6509,6 +6772,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();
@@ -6596,17 +6862,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,
@@ -6630,18 +6890,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;
@@ -6673,6 +6926,7 @@ ${summary}`;
     const target2 = {
       id: `target-${String(targetSequence)}`,
       element: element2,
+      instanceScope: void 0,
       resolution,
       marker,
       page: collectPageContext(browser.document, browser.window),
@@ -6685,6 +6939,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();
@@ -6815,25 +7080,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) {
@@ -6887,6 +7159,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;
@@ -6896,7 +7177,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();
@@ -6905,6 +7188,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();
@@ -6941,8 +7230,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);
+        }
       }
     }
   }
@@ -6996,6 +7288,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);
@@ -7032,10 +7326,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) {
@@ -7070,6 +7369,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);
@@ -7555,7 +7856,7 @@ function getDataFlowRuntime(target2 = globalThis) {
 }
 
 // src/data-flow/report-merger.ts
-var import_shared10 = require("@spotpatch/shared");
+var import_shared15 = require("@spotpatch/shared");
 function observationMatchesDependency(observation, dependency) {
   const origin = dependency.origin;
   const transportMatches = dependency.kind === "rpc" ? observation.transport === "trpc" && dependency.operation !== void 0 && observation.operation === dependency.operation : dependency.kind === "http" ? observation.transport === "fetch" || observation.transport === "xhr" : false;
@@ -7625,7 +7926,7 @@ function mergeComponentDataFlowReport(report, observations) {
     (observation) => observation.componentSourceId === void 0 || owners.has(observation.componentSourceId)
   );
   const merged = mergeDependencies(report.dependencies, componentObservations);
-  return (0, import_shared10.limitDataFlowReportCollections)(
+  return (0, import_shared15.limitDataFlowReportCollections)(
     Object.freeze({
       ...report,
       dependencies: merged.dependencies,
@@ -7654,7 +7955,7 @@ function unassignedDependency(observation) {
         (path) => Object.freeze({
           path,
           position: "query",
-          sensitive: (0, import_shared10.isSensitiveName)(path),
+          sensitive: (0, import_shared15.isSensitiveName)(path),
           valueState: "not-collected",
           evidenceIds: Object.freeze([observation.id])
         })
@@ -7676,7 +7977,7 @@ function mergePageDataFlowReport(report, observations) {
   const merged = mergeDependencies(report.dependencies, currentObservations);
   const unassigned = currentObservations.filter(({ id }) => !merged.matchedObservationIds.has(id)).map(unassignedDependency);
   const allObservationIds = new Set(currentObservations.map(({ id }) => id));
-  return (0, import_shared10.limitDataFlowReportCollections)(
+  return (0, import_shared15.limitDataFlowReportCollections)(
     Object.freeze({
       ...report,
       dependencies: Object.freeze([...merged.dependencies, ...unassigned]),