@spotpatch/runtime 1.15.4 → 1.15.6

package/dist/index.js

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