@spotpatch/runtime 1.4.0 → 1.5.1

package/dist/index.js

@@ -10,45 +10,46 @@ import {
   MAX_ANNOTATION_TARGETS,
   MAX_TARGET_INSTRUCTION_CHARACTERS
 } from "@spotpatch/shared";
-function freezeSource(source, code) {
+function freezeSource(source2, code2) {
   return Object.freeze({
-    ...source,
-    ...source.relativePath === void 0 && code !== void 0 ? { relativePath: code.relativePath } : {}
+    ...source2,
+    ...source2.relativePath === void 0 && code2 !== void 0 ? { relativePath: code2.relativePath } : {}
   });
 }
-function freezeReact(react) {
+function freezeReact(react2) {
   return Object.freeze({
-    ...react,
-    componentStack: Object.freeze([...react.componentStack]),
-    ...react.source === void 0 ? {} : { source: freezeSource(react.source) }
+    ...react2,
+    componentStack: Object.freeze([...react2.componentStack]),
+    ...react2.source === void 0 ? {} : { source: freezeSource(react2.source) }
   });
 }
-function freezeElement(element) {
+function freezeElement(element2) {
   return Object.freeze({
-    ...element,
-    rect: Object.freeze({ ...element.rect })
+    ...element2,
+    rect: Object.freeze({ ...element2.rect })
   });
 }
-function freezeStyles(styles) {
+function freezeStyles(styles2) {
   return Object.freeze({
-    ...styles,
-    classNames: Object.freeze([...styles.classNames]),
+    ...styles2,
+    classNames: Object.freeze([...styles2.classNames]),
     matchedRules: Object.freeze(
-      styles.matchedRules.map((rule) => Object.freeze({ ...rule }))
+      styles2.matchedRules.map((rule) => Object.freeze({ ...rule }))
     ),
-    computed: Object.freeze({ ...styles.computed }),
-    warnings: Object.freeze([...styles.warnings])
+    computed: Object.freeze({ ...styles2.computed }),
+    warnings: Object.freeze([...styles2.warnings])
   });
 }
-function freezeTarget(target) {
+function freezeTarget(target2) {
   return Object.freeze({
-    instruction: target.instruction.trim(),
-    source: freezeSource(target.source, target.code),
-    react: freezeReact(target.react),
-    element: freezeElement(target.element),
-    styles: freezeStyles(target.styles),
-    ...target.code === void 0 ? {} : { code: Object.freeze({ ...target.code }) },
-    warnings: Object.freeze([...target.warnings])
+    instruction: target2.instruction.trim(),
+    ...target2.page === void 0 ? {} : { page: Object.freeze({ ...target2.page }) },
+    source: freezeSource(target2.source, target2.code),
+    react: freezeReact(target2.react),
+    element: freezeElement(target2.element),
+    styles: freezeStyles(target2.styles),
+    ...target2.code === void 0 ? {} : { code: Object.freeze({ ...target2.code }) },
+    warnings: Object.freeze([...target2.warnings])
   });
 }
 function createAnnotation(input) {
@@ -57,7 +58,7 @@ function createAnnotation(input) {
       `SpotPatch annotations require between 1 and ${String(MAX_ANNOTATION_TARGETS)} targets.`
     );
   }
-  const instructions = input.targets.map((target) => target.instruction.trim());
+  const instructions = input.targets.map((target2) => target2.instruction.trim());
   if (instructions.some(
     (instruction) => instruction.length === 0 || instruction.length > MAX_TARGET_INSTRUCTION_CHARACTERS
   ) || instructions.reduce((total, instruction) => total + instruction.length, 0) > MAX_ANNOTATION_INSTRUCTION_CHARACTERS) {
@@ -254,10 +255,10 @@ var MAX_EVENT_LINE_BYTES = 1e5;
 var MAX_EVENT_STREAM_BYTES = 4e6;
 var RuntimeApiError = class extends Error {
   code;
-  constructor(code) {
+  constructor(code2) {
     super("SpotPatch local API request failed.");
     this.name = "RuntimeApiError";
-    this.code = code;
+    this.code = code2;
   }
 };
 function isRecord2(value) {
@@ -329,9 +330,9 @@ async function readBoundedText(response, maximumBytes) {
     reader.releaseLock();
   }
 }
-function parseJson(text) {
+function parseJson(text2) {
   try {
-    return JSON.parse(text);
+    return JSON.parse(text2);
   } catch {
     throw new RuntimeApiError();
   }
@@ -374,13 +375,13 @@ function omitBrowserCodeContext(request) {
     ...request,
     annotation: {
       ...request.annotation,
-      targets: request.annotation.targets.map((target) => ({
-        instruction: target.instruction,
-        source: target.source,
-        react: target.react,
-        element: target.element,
-        styles: target.styles,
-        warnings: target.warnings
+      targets: request.annotation.targets.map((target2) => ({
+        instruction: target2.instruction,
+        source: target2.source,
+        react: target2.react,
+        element: target2.element,
+        styles: target2.styles,
+        warnings: target2.warnings
       }))
     }
   };
@@ -671,12 +672,12 @@ function contextCharacterCount(classNames, inlineStyle, rules, computed, warning
 function stylesheetSource(sheet, baseUrl) {
   return sheet.href === null ? void 0 : sanitizeUrl(sheet.href, baseUrl);
 }
-function collectMatchedRules(element, rules, source, inheritedConditions, output, warnings) {
+function collectMatchedRules(element2, rules, source2, inheritedConditions, output, warnings) {
   for (const rule of rules) {
     if (isStyleRule(rule)) {
       let matches = false;
       try {
-        matches = element.matches(rule.selectorText);
+        matches = element2.matches(rule.selectorText);
       } catch {
         warnings.add(CSS_COLLECTION_WARNINGS.selector);
         continue;
@@ -686,7 +687,7 @@ function collectMatchedRules(element, rules, source, inheritedConditions, output
           Object.freeze({
             selector: sanitizeCssText(rule.selectorText),
             declarations: sanitizeCssText(rule.style.cssText),
-            ...source === void 0 ? {} : { source },
+            ...source2 === void 0 ? {} : { source: source2 },
             ...inheritedConditions.length === 0 ? {} : { media: inheritedConditions.join(" and ") }
           })
         );
@@ -696,9 +697,9 @@ function collectMatchedRules(element, rules, source, inheritedConditions, output
     if (isGroupingRule(rule)) {
       const condition = groupingCondition(rule);
       collectMatchedRules(
-        element,
+        element2,
         rule.cssRules,
-        source,
+        source2,
         condition === void 0 ? inheritedConditions : [...inheritedConditions, condition],
         output,
         warnings
@@ -706,11 +707,11 @@ function collectMatchedRules(element, rules, source, inheritedConditions, output
     }
   }
 }
-function collectComputedStyle(element, getComputedStyle) {
+function collectComputedStyle(element2, getComputedStyle) {
   if (getComputedStyle === void 0) {
     return {};
   }
-  const declaration = getComputedStyle(element);
+  const declaration = getComputedStyle(element2);
   const computed = {};
   for (const property of COMPUTED_STYLE_PROPERTIES) {
     const value = sanitizeCssText(declaration.getPropertyValue(property).trim());
@@ -848,11 +849,11 @@ function escapeHtml(value) {
 function isPreservedAttribute(name) {
   return SAFE_ATTRIBUTE_NAMES.has(name) || name.startsWith("aria-") || name === "data-testid";
 }
-function openingTag(element) {
-  const tagName = element.tagName.toLowerCase();
+function openingTag(element2) {
+  const tagName = element2.tagName.toLowerCase();
   const attributes = [];
-  const baseUrl = element.ownerDocument.baseURI;
-  for (const attribute of element.attributes) {
+  const baseUrl = element2.ownerDocument.baseURI;
+  for (const attribute of element2.attributes) {
     const name = attribute.name.toLowerCase();
     if (!isPreservedAttribute(name)) {
       continue;
@@ -867,28 +868,28 @@ function openingTag(element) {
 function normalizedText(value) {
   return redactSensitiveText(value).replaceAll(/\s+/gu, " ").trim();
 }
-function serializeElement(element, depth, state, lines) {
+function serializeElement(element2, depth, state, lines) {
   if (state.nodeCount >= DOM_COLLECTION_LIMITS.maxNodes) {
     state.truncated = true;
     return;
   }
   state.nodeCount += 1;
   const indent = "  ".repeat(depth);
-  const tagName = element.tagName.toLowerCase();
-  lines.push(`${indent}${openingTag(element)}`);
+  const tagName = element2.tagName.toLowerCase();
+  lines.push(`${indent}${openingTag(element2)}`);
   if (VOID_ELEMENT_NAMES.has(tagName)) {
     return;
   }
-  for (const child of element.childNodes) {
+  for (const child of element2.childNodes) {
     if (state.nodeCount >= DOM_COLLECTION_LIMITS.maxNodes) {
       state.truncated = true;
       break;
     }
     if (child.nodeType === 3) {
-      const text = normalizedText(child.textContent ?? "");
-      if (text.length > 0) {
+      const text2 = normalizedText(child.textContent ?? "");
+      if (text2.length > 0) {
         state.nodeCount += 1;
-        const truncated = text.length <= DOM_COLLECTION_LIMITS.maxTextCharacters ? text : `${text.slice(0, DOM_COLLECTION_LIMITS.maxTextCharacters)}\u2026`;
+        const truncated = text2.length <= DOM_COLLECTION_LIMITS.maxTextCharacters ? text2 : `${text2.slice(0, DOM_COLLECTION_LIMITS.maxTextCharacters)}\u2026`;
         lines.push(`${"  ".repeat(depth + 1)}${escapeHtml(truncated)}`);
       }
       continue;
@@ -907,9 +908,9 @@ function serializeElement(element, depth, state, lines) {
   }
   lines.push(`${indent}</${tagName}>`);
 }
-function parentContext(element) {
+function parentContext(element2) {
   const parents = [];
-  let parent = element.parentElement;
+  let parent = element2.parentElement;
   while (parent !== null && parents.length < DOM_COLLECTION_LIMITS.maxParentDepth) {
     parents.push(openingTag(parent));
     parent = parent.parentElement;
@@ -930,26 +931,26 @@ function escapeCssIdentifier(value) {
 function escapeCssAttribute(value) {
   return value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
 }
-function selectorSegment(element) {
-  const tagName = element.tagName.toLowerCase();
-  if (element.id.length > 0) {
-    return `${tagName}#${escapeCssIdentifier(element.id)}`;
+function selectorSegment(element2) {
+  const tagName = element2.tagName.toLowerCase();
+  if (element2.id.length > 0) {
+    return `${tagName}#${escapeCssIdentifier(element2.id)}`;
   }
-  const testId = element.getAttribute("data-testid");
+  const testId = element2.getAttribute("data-testid");
   if (testId !== null && testId.length > 0) {
     return `${tagName}[data-testid="${escapeCssAttribute(testId)}"]`;
   }
-  const classes = Array.from(element.classList).slice(0, 2).map((name) => `.${escapeCssIdentifier(name)}`).join("");
-  const sameTagSiblings = element.parentElement === null ? [] : Array.from(element.parentElement.children).filter(
-    (sibling) => sibling.tagName === element.tagName
+  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(element);
+  const position = sameTagSiblings.indexOf(element2);
   const nth = sameTagSiblings.length > 1 && position >= 0 ? `:nth-of-type(${String(position + 1)})` : "";
   return `${tagName}${classes}${nth}`;
 }
-function createSelector(element) {
+function createSelector(element2) {
   const segments = [];
-  let current = element;
+  let current = element2;
   while (current !== null && segments.length < 5) {
     const segment = selectorSegment(current);
     segments.unshift(segment);
@@ -968,15 +969,15 @@ function collectElementContext(options) {
   if (parents.length > 0) {
     lines.push("<!-- Parent context: nearest first -->", ...parents);
   }
-  const text = normalizedText(options.element.textContent);
+  const text2 = normalizedText(options.element.textContent);
   const rect = options.element.getBoundingClientRect();
   const role = options.element.getAttribute("role");
   return Object.freeze({
     tagName: options.element.tagName.toLowerCase(),
     selector: createSelector(options.element),
     sanitizedHtml: truncateContext(lines.join("\n"), options.maxCharacters),
-    ...text.length === 0 ? {} : {
-      textPreview: text.length <= DOM_COLLECTION_LIMITS.maxTextCharacters ? text : `${text.slice(0, DOM_COLLECTION_LIMITS.maxTextCharacters)}\u2026`
+    ...text2.length === 0 ? {} : {
+      textPreview: text2.length <= DOM_COLLECTION_LIMITS.maxTextCharacters ? text2 : `${text2.slice(0, DOM_COLLECTION_LIMITS.maxTextCharacters)}\u2026`
     },
     ...role === null ? {} : { role },
     rect: Object.freeze({
@@ -995,11 +996,11 @@ function isApplePlatform(platform) {
 function normalizedKey(key) {
   return key.toLowerCase();
 }
-function isTextEntryTarget(target) {
-  if (!(target instanceof Element)) {
+function isTextEntryTarget(target2) {
+  if (!(target2 instanceof Element)) {
     return false;
   }
-  return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target.closest("[contenteditable]:not([contenteditable='false'])") !== null;
+  return target2 instanceof HTMLInputElement || target2 instanceof HTMLTextAreaElement || target2 instanceof HTMLSelectElement || target2.closest("[contenteditable]:not([contenteditable='false'])") !== null;
 }
 function matchesShortcut(event, shortcut, platform) {
   const tokens = shortcut.split("+").map((token) => token.trim().toLowerCase()).filter((token) => token.length > 0);
@@ -1049,15 +1050,25 @@ function unionRects(rects) {
     height: bottom - top
   });
 }
-function getElementRect(element, view) {
-  const display = view.getComputedStyle(element).display;
+function measureElementRect(element2, display) {
   if (display.startsWith("inline")) {
-    const lineBoxRect = unionRects(Array.from(element.getClientRects()));
+    const lineBoxRect = unionRects(Array.from(element2.getClientRects()));
     if (lineBoxRect !== void 0) {
       return lineBoxRect;
     }
   }
-  return toElementRect(element.getBoundingClientRect());
+  return toElementRect(element2.getBoundingClientRect());
+}
+function getElementRect(element2, view) {
+  return measureElementRect(element2, view.getComputedStyle(element2).display);
+}
+function getVisibleElementRect(element2, view) {
+  const style = view.getComputedStyle(element2);
+  if (style.display === "none" || style.visibility === "hidden") {
+    return void 0;
+  }
+  const rect = measureElementRect(element2, style.display);
+  return rect.width > 0 && rect.height > 0 ? rect : void 0;
 }
 
 // src/ui/ui-constants.ts
@@ -1068,32 +1079,27 @@ var UI_Z_INDEX = Object.freeze({
 });
 
 // src/picker/hit-test.ts
-function isInsideSpotPatchUI(element) {
-  if (element.closest(`[${UI_MARKER_ATTRIBUTE}]`) !== null) {
+function isInsideSpotPatchUI(element2) {
+  if (element2.closest(`[${UI_MARKER_ATTRIBUTE}]`) !== null) {
     return true;
   }
-  const root = element.getRootNode();
+  const root = element2.getRootNode();
   return root instanceof ShadowRoot && root.host.hasAttribute(UI_MARKER_ATTRIBUTE);
 }
-function hasVisibleArea(element, view) {
-  const style = view.getComputedStyle(element);
-  if (style.display === "none" || style.visibility === "hidden") {
-    return false;
-  }
-  const rect = element.getBoundingClientRect();
-  return rect.width > 0 && rect.height > 0;
+function hasVisibleArea(element2, view) {
+  return getVisibleElementRect(element2, view) !== void 0;
 }
-function isDocumentRoot(element) {
-  return element.tagName === "HTML" || element.tagName === "BODY";
+function isDocumentRoot(element2) {
+  return element2.tagName === "HTML" || element2.tagName === "BODY";
 }
 function pickElementAt(document, view, clientX, clientY) {
   const visibleCandidates = document.elementsFromPoint(clientX, clientY).filter(
-    (element) => !isInsideSpotPatchUI(element) && hasVisibleArea(element, view)
+    (element2) => !isInsideSpotPatchUI(element2) && hasVisibleArea(element2, view)
   );
-  return visibleCandidates.find((element) => !isDocumentRoot(element)) ?? visibleCandidates[0];
+  return visibleCandidates.find((element2) => !isDocumentRoot(element2)) ?? visibleCandidates[0];
 }
-function isSpotPatchUIEventTarget(target) {
-  return target instanceof Element && isInsideSpotPatchUI(target);
+function isSpotPatchUIEventTarget(target2) {
+  return target2 instanceof Element && isInsideSpotPatchUI(target2);
 }
 
 // src/prompt/prompt-composer.ts
@@ -1172,10 +1178,10 @@ function fenced(language, value) {
 ${value}
 ${fence}`;
 }
-function sourceLocation(target, messages) {
-  const path = target.code?.relativePath ?? target.source.relativePath;
-  const line = target.source.line;
-  const column = target.source.column;
+function sourceLocation(target2, messages) {
+  const path = target2.code?.relativePath ?? target2.source.relativePath;
+  const line = target2.source.line;
+  const column = target2.source.column;
   if (path === void 0) {
     return messages.unavailable;
   }
@@ -1194,10 +1200,10 @@ function renderRule(rule) {
 }`;
   return [...metadata, body].join("\n");
 }
-function renderStyles(target, rules, messages) {
+function renderStyles(target2, rules, messages) {
   const metadata = [
-    target.styles.classNames.length === 0 ? void 0 : `/* classes: ${target.styles.classNames.map(sanitizeCssText).join(" ")} */`,
-    target.styles.inlineStyle === void 0 ? void 0 : `/* inline: ${sanitizeCssText(target.styles.inlineStyle)} */`
+    target2.styles.classNames.length === 0 ? void 0 : `/* classes: ${target2.styles.classNames.map(sanitizeCssText).join(" ")} */`,
+    target2.styles.inlineStyle === void 0 ? void 0 : `/* inline: ${sanitizeCssText(target2.styles.inlineStyle)} */`
   ].filter((line) => line !== void 0);
   const blocks = [...metadata, ...rules.map(renderRule)];
   return blocks.length === 0 ? messages.unavailable : fenced("css", blocks.join("\n\n"));
@@ -1210,41 +1216,47 @@ function renderComputed(entries, messages) {
     ).join("\n")
   );
 }
-function renderTarget(target, draft, index, messages) {
+function renderTarget(target2, draft, index, messages) {
   const reactLines = [
-    `- ${messages.adapter}: ${target.react.supported ? messages.supported : messages.unsupported}`,
-    ...target.react.version === void 0 ? [] : [`- ${messages.reactVersion}: ${redactSensitiveText(target.react.version)}`],
-    ...target.react.componentName === void 0 ? [] : [
-      `- ${messages.component}: ${redactSensitiveText(target.react.componentName)}`
+    `- ${messages.adapter}: ${target2.react.supported ? messages.supported : messages.unsupported}`,
+    ...target2.react.version === void 0 ? [] : [`- ${messages.reactVersion}: ${redactSensitiveText(target2.react.version)}`],
+    ...target2.react.componentName === void 0 ? [] : [
+      `- ${messages.component}: ${redactSensitiveText(target2.react.componentName)}`
     ],
     ...draft.reactStack.length === 0 ? [] : [
       `- ${messages.stack}: ${draft.reactStack.map(redactSensitiveText).join(" > ")}`
     ]
   ];
-  const code = target.code === void 0 || draft.codeLines.length === 0 ? messages.unavailable : `- ${messages.boundary}: ${target.code.boundary}
+  const code2 = target2.code === void 0 || draft.codeLines.length === 0 ? messages.unavailable : `- ${messages.boundary}: ${target2.code.boundary}
 
 ${fenced(
-    target.code.language,
+    target2.code.language,
     redactSensitiveText(draft.codeLines.join("\n"))
   )}`;
   return [
     `### ${messages.target(index + 1)}`,
     `#### ${messages.requestedChange}`,
     draft.instruction,
+    ...target2.page === void 0 ? [] : [
+      `#### ${messages.pageEnvironment}`,
+      `- ${messages.url}: <${sanitizeUrl(target2.page.url, target2.page.url)}>
+- ${messages.pathname}: ${redactSensitiveText(target2.page.pathname)}
+- ${messages.title}: ${redactSensitiveText(target2.page.title) || messages.unavailable}`
+    ],
     `#### ${messages.reactContext}`,
     reactLines.join("\n"),
     `#### ${messages.source}`,
-    `- ${messages.file}: ${sourceLocation(target, messages)}
-- ${messages.origin}: ${target.source.origin}
-- ${messages.confidence}: ${target.source.confidence}`,
+    `- ${messages.file}: ${sourceLocation(target2, messages)}
+- ${messages.origin}: ${target2.source.origin}
+- ${messages.confidence}: ${target2.source.confidence}`,
     `#### ${messages.element}`,
     fenced("html", redactSensitiveText(draft.dom)),
     `#### ${messages.styles}`,
-    renderStyles(target, draft.matchedRules, messages),
+    renderStyles(target2, draft.matchedRules, messages),
     `#### ${messages.computedStyles}`,
     renderComputed(draft.computedEntries, messages),
     `#### ${messages.code}`,
-    code,
+    code2,
     `#### ${messages.warnings}`,
     draft.warnings.length === 0 ? `- ${messages.none}` : draft.warnings.map((warning) => `- ${redactSensitiveText(warning)}`).join("\n")
   ].join("\n\n");
@@ -1260,19 +1272,19 @@ function renderPrompt(annotation, draft) {
 - ${messages.viewport}: ${String(annotation.page.viewportWidth)} \xD7 ${String(annotation.page.viewportHeight)}
 - ${messages.devicePixelRatio}: ${String(annotation.page.devicePixelRatio)}`,
     `## ${messages.selectedTargets(annotation.targets.length)}`,
-    annotation.targets.map((target, index) => {
+    annotation.targets.map((target2, index) => {
       const targetDraft = draft.targets[index];
       if (targetDraft === void 0) {
         throw new RangeError("Prompt target draft is missing.");
       }
-      return renderTarget(target, targetDraft, index, messages);
+      return renderTarget(target2, targetDraft, index, messages);
     }).join("\n\n"),
     `## ${messages.modificationRequirements}`,
     messages.modificationConstraint
   ].join("\n\n");
 }
-function shrinkCode(target, draft) {
-  if (draft.codeLines.length === 0 || target.code === void 0) {
+function shrinkCode(target2, draft) {
+  if (draft.codeLines.length === 0 || target2.code === void 0) {
     return false;
   }
   if (draft.codeLines.length === 1) {
@@ -1284,9 +1296,9 @@ function shrinkCode(target, draft) {
     }
     return true;
   }
-  const selectedLine = target.source.line ?? target.code.startLine;
-  const firstDistance = Math.abs(target.code.startLine - selectedLine);
-  const lastLine = target.code.startLine + draft.codeLines.length - 1;
+  const selectedLine = target2.source.line ?? target2.code.startLine;
+  const firstDistance = Math.abs(target2.code.startLine - selectedLine);
+  const lastLine = target2.code.startLine + draft.codeLines.length - 1;
   const lastDistance = Math.abs(lastLine - selectedLine);
   if (lastDistance >= firstDistance) {
     draft.codeLines.pop();
@@ -1295,15 +1307,15 @@ function shrinkCode(target, draft) {
   }
   return true;
 }
-function createTargetDraft(target) {
+function createTargetDraft(target2) {
   return {
-    instruction: redactSensitiveText(target.instruction.trim()),
-    reactStack: [...target.react.componentStack],
-    dom: target.element.sanitizedHtml,
-    matchedRules: [...target.styles.matchedRules],
-    computedEntries: Object.entries(target.styles.computed),
-    codeLines: target.code?.excerpt.split(/\r?\n/u) ?? [],
-    warnings: Array.from(/* @__PURE__ */ new Set([...target.styles.warnings, ...target.warnings]))
+    instruction: redactSensitiveText(target2.instruction.trim()),
+    reactStack: [...target2.react.componentStack],
+    dom: target2.element.sanitizedHtml,
+    matchedRules: [...target2.styles.matchedRules],
+    computedEntries: Object.entries(target2.styles.computed),
+    codeLines: target2.code?.excerpt.split(/\r?\n/u) ?? [],
+    warnings: Array.from(/* @__PURE__ */ new Set([...target2.styles.warnings, ...target2.warnings]))
   };
 }
 function createDraft(annotation) {
@@ -1332,9 +1344,9 @@ function shrinkTargetsFairly(annotation, draft, cursor) {
   for (const operation of operations) {
     for (let offset = 0; offset < annotation.targets.length; offset += 1) {
       const index = (cursor + offset) % annotation.targets.length;
-      const target = annotation.targets[index];
+      const target2 = annotation.targets[index];
       const targetDraft = draft.targets[index];
-      if (target !== void 0 && targetDraft !== void 0 && operation(target, targetDraft)) {
+      if (target2 !== void 0 && targetDraft !== void 0 && operation(target2, targetDraft)) {
         return (index + 1) % annotation.targets.length;
       }
     }
@@ -1343,15 +1355,15 @@ function shrinkTargetsFairly(annotation, draft, cursor) {
 }
 function renderCompactPrompt(annotation, draft) {
   const messages = PROMPT_MESSAGES[annotation.locale];
-  const targets = annotation.targets.map((target, index) => {
+  const targets = annotation.targets.map((target2, index) => {
     const targetDraft = draft.targets[index];
-    const component = target.react.componentName;
+    const component = target2.react.componentName;
     return [
       `### ${messages.target(index + 1)}`,
-      `- ${messages.requestedChange}: ${targetDraft?.instruction ?? redactSensitiveText(target.instruction)}`,
-      `- ${messages.file}: ${sourceLocation(target, messages)}`,
+      `- ${messages.requestedChange}: ${targetDraft?.instruction ?? redactSensitiveText(target2.instruction)}`,
+      `- ${messages.file}: ${sourceLocation(target2, messages)}`,
       ...component === void 0 ? [] : [`- ${messages.component}: ${redactSensitiveText(component)}`],
-      `- ${messages.element}: ${redactSensitiveText(openingTag2(targetDraft?.dom ?? target.element.sanitizedHtml, messages.unavailable))}`
+      `- ${messages.element}: ${redactSensitiveText(openingTag2(targetDraft?.dom ?? target2.element.sanitizedHtml, messages.unavailable))}`
     ].join("\n");
   });
   return [
@@ -1409,7 +1421,10 @@ var STATES = Object.freeze({
 });
 var INITIAL_RUNTIME_STATE = STATES.idle;
 function reduceIdle(event) {
-  return event.type === "ACTIVATE" ? STATES.inspecting : STATES.idle;
+  if (event.type === "ACTIVATE") {
+    return STATES.inspecting;
+  }
+  return event.type === "RESTORE" ? STATES.selected : STATES.idle;
 }
 function reduceInspecting(event) {
   switch (event.type) {
@@ -1461,6 +1476,121 @@ function reduceRuntimeState(state, event) {
   }
 }
 
+// src/state/selection-session.ts
+var STORAGE_PREFIX = "spotpatch:selection:";
+var SNAPSHOT_VERSION = 1;
+var MAX_SNAPSHOT_CHARACTERS = 1e6;
+function record(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) ? value : void 0;
+}
+function text(value) {
+  return typeof value === "string";
+}
+function optionalText(value) {
+  return value === void 0 || text(value);
+}
+function strings(value) {
+  return Array.isArray(value) && value.length <= 256 && value.every(text);
+}
+function finiteNumber(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function optionalNumber(value) {
+  return value === void 0 || finiteNumber(value);
+}
+function source(value) {
+  const item = record(value);
+  return item !== void 0 && text(item.origin) && text(item.confidence) && optionalText(item.fileId) && optionalText(item.relativePath) && optionalNumber(item.line) && optionalNumber(item.column);
+}
+function react(value) {
+  const item = record(value);
+  return item !== void 0 && typeof item.supported === "boolean" && optionalText(item.version) && optionalText(item.componentName) && strings(item.componentStack) && (item.source === void 0 || source(item.source));
+}
+function page(value) {
+  const item = record(value);
+  return item !== void 0 && text(item.url) && text(item.pathname) && text(item.title) && finiteNumber(item.viewportWidth) && finiteNumber(item.viewportHeight) && finiteNumber(item.devicePixelRatio);
+}
+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);
+}
+function styles(value) {
+  const item = record(value);
+  const computed = record(item?.computed);
+  return item !== void 0 && strings(item.classNames) && optionalText(item.inlineStyle) && Array.isArray(item.matchedRules) && item.matchedRules.length <= 256 && item.matchedRules.every((value2) => {
+    const rule = record(value2);
+    return rule !== void 0 && text(rule.selector) && text(rule.declarations) && optionalText(rule.source) && optionalText(rule.media);
+  }) && computed !== void 0 && Object.values(computed).every(text) && strings(item.warnings);
+}
+function code(value) {
+  const item = record(value);
+  return item !== void 0 && text(item.relativePath) && text(item.language) && finiteNumber(item.startLine) && finiteNumber(item.endLine) && text(item.excerpt) && text(item.boundary);
+}
+function target(value) {
+  const item = record(value);
+  return item !== void 0 && text(item.id) && text(item.instruction) && page(item.page) && source(item.source) && react(item.react) && element(item.element) && styles(item.styles) && (item.code === void 0 || code(item.code));
+}
+function parseSnapshot(value, maximumTargets) {
+  const item = record(value);
+  if (item?.version !== SNAPSHOT_VERSION || typeof item.open !== "boolean" || !Number.isSafeInteger(item.sequence) || Number(item.sequence) < 0 || item.activeTargetId !== void 0 && typeof item.activeTargetId !== "string" || !Array.isArray(item.targets) || item.targets.length === 0 || item.targets.length > maximumTargets || !item.targets.every(target)) {
+    return void 0;
+  }
+  const targets = item.targets;
+  const ids = targets.map(({ id }) => id);
+  if (new Set(ids).size !== ids.length || item.activeTargetId !== void 0 && !ids.includes(item.activeTargetId)) {
+    return void 0;
+  }
+  return {
+    ...item.activeTargetId === void 0 ? {} : { activeTargetId: item.activeTargetId },
+    open: item.open,
+    sequence: Number(item.sequence),
+    targets
+  };
+}
+function createSelectionSession(window, sessionId, maximumTargets) {
+  const key = `${STORAGE_PREFIX}${sessionId}`;
+  let storage;
+  try {
+    storage = window.sessionStorage;
+  } catch {
+    storage = void 0;
+  }
+  return Object.freeze({
+    clear() {
+      try {
+        storage?.removeItem(key);
+      } catch {
+      }
+    },
+    load() {
+      let serialized;
+      try {
+        serialized = storage?.getItem(key) ?? null;
+      } catch {
+        return void 0;
+      }
+      if (serialized === null || serialized.length > MAX_SNAPSHOT_CHARACTERS) {
+        return void 0;
+      }
+      try {
+        return parseSnapshot(JSON.parse(serialized), maximumTargets);
+      } catch {
+        return void 0;
+      }
+    },
+    save(snapshot) {
+      try {
+        storage?.setItem(
+          key,
+          JSON.stringify({ version: SNAPSHOT_VERSION, ...snapshot })
+        );
+      } catch {
+      }
+    }
+  });
+}
+
 // src/source/source-resolver.ts
 import {
   parseSourceMarker,
@@ -1470,11 +1600,11 @@ var EMPTY_REACT_CONTEXT = Object.freeze({
   supported: false,
   componentStack: Object.freeze([])
 });
-function directMarker(element) {
-  return parseSourceMarker(element.getAttribute(SOURCE_MARKER_ATTRIBUTE));
+function directMarker(element2) {
+  return parseSourceMarker(element2.getAttribute(SOURCE_MARKER_ATTRIBUTE));
 }
-function ancestorMarker(element) {
-  let ancestor = element.parentElement;
+function ancestorMarker(element2) {
+  let ancestor = element2.parentElement;
   while (ancestor !== null) {
     const marker = directMarker(ancestor);
     if (marker !== void 0) {
@@ -1496,21 +1626,21 @@ function markerSource(marker, origin, confidence) {
 function unknownSource() {
   return Object.freeze({ origin: "none", confidence: "unknown" });
 }
-function sourceRefToMarker(source) {
-  return source.fileId === void 0 || source.line === void 0 || source.column === void 0 ? void 0 : Object.freeze({
-    fileId: source.fileId,
-    line: source.line,
-    column: source.column
+function sourceRefToMarker(source2) {
+  return source2.fileId === void 0 || source2.line === void 0 || source2.column === void 0 ? void 0 : Object.freeze({
+    fileId: source2.fileId,
+    line: source2.line,
+    column: source2.column
   });
 }
 function createSourceResolver(options) {
   let adapterEnabled = true;
-  function inspectReact(element) {
+  function inspectReact(element2) {
     if (!adapterEnabled) {
       return EMPTY_REACT_CONTEXT;
     }
     try {
-      return options.adapter.inspect(element);
+      return options.adapter.inspect(element2);
     } catch {
       adapterEnabled = false;
       options.onAdapterError?.();
@@ -1518,26 +1648,26 @@ function createSourceResolver(options) {
     }
   }
   return Object.freeze({
-    resolve(element) {
-      const marker = directMarker(element);
-      const react = inspectReact(element);
+    resolve(element2) {
+      const marker = directMarker(element2);
+      const react2 = inspectReact(element2);
       if (marker !== void 0) {
         return Object.freeze({
-          react,
+          react: react2,
           source: markerSource(marker, "jsx-host", "exact")
         });
       }
-      if (react.source !== void 0) {
-        return Object.freeze({ react, source: react.source });
+      if (react2.source !== void 0) {
+        return Object.freeze({ react: react2, source: react2.source });
       }
-      const nearestAncestor = ancestorMarker(element);
+      const nearestAncestor = ancestorMarker(element2);
       if (nearestAncestor !== void 0) {
         return Object.freeze({
-          react,
+          react: react2,
           source: markerSource(nearestAncestor, "dom-ancestor", "approximate")
         });
       }
-      return Object.freeze({ react, source: unknownSource() });
+      return Object.freeze({ react: react2, source: unknownSource() });
     },
     dispose() {
       adapterEnabled = false;
@@ -1555,9 +1685,9 @@ import {
 
 // src/ui/dom.ts
 function createMarkedElement(document, tagName) {
-  const element = document.createElement(tagName);
-  element.setAttribute(UI_MARKER_ATTRIBUTE, "");
-  return element;
+  const element2 = document.createElement(tagName);
+  element2.setAttribute(UI_MARKER_ATTRIBUTE, "");
+  return element2;
 }
 function createButton(document, label, className = "") {
   const button = createMarkedElement(document, "button");
@@ -1570,7 +1700,7 @@ function createButton(document, label, className = "") {
 // src/ui/agent-panel.ts
 var AGENT_PANEL_STYLES = `
   .spotpatch-agent {
-    margin-top: 14px;
+    margin-top: 10px;
     overflow: hidden;
     border: 1px solid var(--spotpatch-border-subtle);
     border-radius: var(--spotpatch-radius-card);
@@ -1580,36 +1710,36 @@ var AGENT_PANEL_STYLES = `
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 12px;
-    padding: 14px 16px;
+    gap: 10px;
+    padding: 10px 12px;
     border-bottom: 1px solid rgb(255 255 255 / 7%);
   }
-  .spotpatch-agent-title { color: #eef0f5; font-size: 16px; font-weight: 680; }
+  .spotpatch-agent-title { color: #eef0f5; font-size: 13px; font-weight: 650; }
   .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: 11px;
+    font-size: 10px;
     font-weight: 650;
   }
-  .spotpatch-agent-setup { padding: 18px; }
-  .spotpatch-agent-selectors { display: grid; grid-template-columns: 1fr; gap: 15px; }
-  .spotpatch-agent-selectors label { min-width: 0; color: var(--spotpatch-text-secondary); font-size: 14px; font-weight: 580; }
+  .spotpatch-agent-setup { padding: 12px; }
+  .spotpatch-agent-selectors { display: grid; grid-template-columns: 1fr; gap: 10px; }
+  .spotpatch-agent-selectors label { min-width: 0; color: var(--spotpatch-text-secondary); font-size: 11.5px; font-weight: 580; }
   .spotpatch-agent select {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    min-height: 46px;
-    margin-top: 7px;
+    min-height: 34px;
+    margin-top: 4px;
     border: 1px solid var(--spotpatch-border);
-    border-radius: 12px;
-    padding: 10px 38px 10px 13px;
+    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: 15px;
+    font-size: 12px;
     font-weight: 560;
     line-height: 1.35;
     outline: none;
@@ -1621,7 +1751,7 @@ var AGENT_PANEL_STYLES = `
   @supports (appearance: base-select) {
     .spotpatch-agent select,
     ::picker(select) { appearance: base-select; }
-    .spotpatch-agent select { padding: 10px 13px; }
+    .spotpatch-agent select { padding: 7px 9px; }
     .spotpatch-agent select::picker-icon {
       color: #9da6b5;
       transition: rotate 180ms cubic-bezier(.2, .8, .2, 1);
@@ -1668,24 +1798,24 @@ var AGENT_PANEL_STYLES = `
   .spotpatch-consent {
     display: flex;
     align-items: flex-start;
-    gap: 10px;
-    margin-top: 16px;
+    gap: 8px;
+    margin-top: 10px;
     color: var(--spotpatch-text-secondary);
     cursor: pointer;
-    font-size: 14px;
-    line-height: 1.6;
+    font-size: 11.5px;
+    line-height: 1.5;
   }
-  .spotpatch-consent input { width: 16px; height: 16px; flex: none; margin: 3px 0 0; accent-color: var(--spotpatch-accent); }
+  .spotpatch-consent input { width: 14px; height: 14px; flex: none; margin: 2px 0 0; accent-color: var(--spotpatch-accent); }
   .spotpatch-workspace-consent {
-    margin-top: 12px;
+    margin-top: 9px;
     border: 1px solid rgb(251 191 36 / 18%);
     border-radius: 10px;
-    padding: 11px 12px;
+    padding: 9px 10px;
     background: rgb(120 53 15 / 9%);
   }
-  .spotpatch-workspace-consent strong { display: block; color: #fde68a; font-size: 13px; font-weight: 620; }
-  .spotpatch-workspace-consent small { display: block; margin-top: 2px; color: #aeb6c4; font-size: 12px; line-height: 1.5; }
-  .spotpatch-agent-health-list { display: grid; gap: 8px; margin-top: 14px; }
+  .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-agent-health-list { display: grid; gap: 6px; margin-top: 10px; }
   .spotpatch-agent-workspace,
   .spotpatch-agent-capability {
     display: flex;
@@ -1693,7 +1823,7 @@ var AGENT_PANEL_STYLES = `
     gap: 8px;
     margin: 0;
     color: #929bab;
-    font-size: 13px;
+    font-size: 11px;
   }
   .spotpatch-agent-capability::before {
     width: 6px;
@@ -1723,7 +1853,7 @@ var AGENT_PANEL_STYLES = `
   .spotpatch-agent-workspace[data-state="consent-required"]::before { background: #fbbf24; }
   .spotpatch-agent-workspace[data-state="blocked"] { color: #fecaca; }
   .spotpatch-agent-workspace[data-state="blocked"]::before { background: var(--spotpatch-danger); }
-  .spotpatch-agent-job { padding: 16px; }
+  .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-status {
@@ -2174,68 +2304,81 @@ function createAgentPanel(document, ai, localizer) {
   });
 }
 
+// src/ui/brand-mark-content.ts
+var BRAND_MARK_CONTENT = `
+  <defs>
+    <linearGradient id="locator-gradient" x1="76" y1="92" x2="436" y2="374" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#B61CFF" />
+      <stop offset="0.38" stop-color="#6D35FF" />
+      <stop offset="0.72" stop-color="#168EFF" />
+      <stop offset="1" stop-color="#00D9E9" />
+    </linearGradient>
+    <linearGradient id="left-code-gradient" x1="165" y1="166" x2="236" y2="258" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#A51EFF" />
+      <stop offset="1" stop-color="#653BFF" />
+    </linearGradient>
+    <linearGradient id="right-code-gradient" x1="276" y1="166" x2="347" y2="258" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#158DFF" />
+      <stop offset="1" stop-color="#00D8E9" />
+    </linearGradient>
+    <linearGradient id="bolt-gradient" x1="270" y1="111" x2="252" y2="365" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#6840FF" />
+      <stop offset="0.48" stop-color="#257BFF" />
+      <stop offset="1" stop-color="#00CBEF" />
+    </linearGradient>
+  </defs>
+  <path
+    fill="url(#locator-gradient)"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M256 52C345.47 52 418 124.53 418 214C418 267.55 391.98 316.24 354.04 348.02L256 468L157.96 348.02C120.02 316.24 94 267.55 94 214C94 124.53 166.53 52 256 52ZM256 88C186.41 88 130 144.41 130 214C130 258.2 152.76 297.08 187.2 319.57L256 403.8L324.8 319.57C359.24 297.08 382 258.2 382 214C382 144.41 325.59 88 256 88Z"
+  />
+  <rect x="238" y="20" width="36" height="84" rx="4" fill="url(#locator-gradient)" />
+  <rect x="62" y="196" width="84" height="36" rx="4" fill="url(#locator-gradient)" />
+  <rect x="366" y="196" width="84" height="36" rx="4" fill="url(#locator-gradient)" />
+  <path
+    d="M213.5 160L158 211.5L213.5 263L238 236.5L211 211.5L238 186.5L213.5 160Z"
+    fill="url(#left-code-gradient)"
+  />
+  <path
+    d="M298.5 160L354 211.5L298.5 263L274 236.5L301 211.5L274 186.5L298.5 160Z"
+    fill="url(#right-code-gradient)"
+  />
+  <path
+    d="M283 108L232 212L266 253L238 369L302 237L267 198L283 108Z"
+    fill="url(#bolt-gradient)"
+  />
+`;
+
 // src/ui/brand-mark.ts
 var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+function resolveBrandMarkContent(override) {
+  if (override !== void 0) {
+    return { content: override, viewBox: "0 0 512 512" };
+  }
+  const injected = typeof __SPOTPATCH_BRAND_MARK_CONTENT__ === "string" ? __SPOTPATCH_BRAND_MARK_CONTENT__ : void 0;
+  if (typeof injected === "string") {
+    return { content: injected, viewBox: "0 0 512 512" };
+  }
+  return true ? { content: BRAND_MARK_CONTENT, viewBox: "0 0 512 512" } : { content: FALLBACK_BRAND_MARK_CONTENT, viewBox: "0 0 1 1" };
+}
 function svgElement(document, tagName, attributes) {
-  const element = document.createElementNS(SVG_NAMESPACE, tagName);
+  const element2 = document.createElementNS(SVG_NAMESPACE, tagName);
   for (const [name, value] of Object.entries(attributes)) {
-    element.setAttribute(name, value);
+    element2.setAttribute(name, value);
   }
-  return element;
+  return element2;
 }
-function createBrandMark(document) {
+function createBrandMark(document, content) {
+  const resolved = resolveBrandMarkContent(content);
   const svg = svgElement(document, "svg", {
+    xmlns: SVG_NAMESPACE,
     class: "spotpatch-brand-mark",
-    viewBox: "0 0 210 208",
+    viewBox: resolved.viewBox,
     "aria-hidden": "true",
     focusable: "false"
   });
-  const definitions = svgElement(document, "defs", {});
-  const gradient = svgElement(document, "linearGradient", {
-    id: "spotpatch-brand-gradient",
-    x1: "35",
-    y1: "42",
-    x2: "184",
-    y2: "176",
-    gradientUnits: "userSpaceOnUse"
-  });
-  gradient.append(
-    svgElement(document, "stop", { offset: "0", "stop-color": "#7c22ff" }),
-    svgElement(document, "stop", { offset: ".52", "stop-color": "#4a69ff" }),
-    svgElement(document, "stop", { offset: "1", "stop-color": "#06d9ef" })
-  );
-  definitions.append(gradient);
-  const commonStroke = {
-    fill: "none",
-    stroke: "url(#spotpatch-brand-gradient)",
-    "stroke-linecap": "square",
-    "stroke-linejoin": "miter"
-  };
-  const outer = svgElement(document, "path", {
-    d: "M106 42C67 42 43 68 43 105c0 36 24 61 63 96 39-35 63-60 63-96 0-37-24-63-63-63Z",
-    ...commonStroke,
-    "stroke-width": "14"
-  });
-  const topStem = svgElement(document, "path", {
-    d: "M106 25v42",
-    ...commonStroke,
-    "stroke-width": "14"
-  });
-  const sideStems = svgElement(document, "path", {
-    d: "M35 109h20m102 0h38",
-    ...commonStroke,
-    "stroke-width": "13"
-  });
-  const brackets = svgElement(document, "path", {
-    d: "m94 89-18 19 18 17m39-36 18 19-18 17",
-    ...commonStroke,
-    "stroke-width": "9"
-  });
-  const bolt = svgElement(document, "path", {
-    d: "m119 61-20 45 15 11-13 47 30-56-16-12 4-35Z",
-    fill: "url(#spotpatch-brand-gradient)"
-  });
-  svg.append(definitions, outer, topStem, sideStems, brackets, bolt);
+  svg.innerHTML = resolved.content;
   return svg;
 }
 
@@ -2250,32 +2393,51 @@ function clamp(value, minimum, maximum) {
 function calculateDialogPlacement({
   dialogHeight,
   dialogWidth,
-  target,
+  target: target2,
   viewportHeight,
   viewportWidth
 }) {
   const maxLeft = viewportWidth - dialogWidth - VIEWPORT_MARGIN;
   const maxTop = viewportHeight - dialogHeight - VIEWPORT_MARGIN;
-  const targetCenterX = target.x + target.width / 2;
-  const targetCenterY = target.y + target.height / 2;
+  const viewportLeft = clamp(
+    (viewportWidth - dialogWidth) / 2,
+    VIEWPORT_MARGIN,
+    maxLeft
+  );
+  const viewportTop = clamp(
+    (viewportHeight - dialogHeight) / 2,
+    VIEWPORT_MARGIN,
+    maxTop
+  );
+  if (target2 === void 0) {
+    return Object.freeze({
+      anchorX: clamp(dialogWidth / 2, ANCHOR_INSET, dialogWidth - ANCHOR_INSET),
+      anchorY: clamp(dialogHeight / 2, ANCHOR_INSET, dialogHeight - ANCHOR_INSET),
+      left: viewportLeft,
+      mode: "viewport",
+      top: viewportTop
+    });
+  }
+  const targetCenterX = target2.x + target2.width / 2;
+  const targetCenterY = target2.y + target2.height / 2;
   const centeredLeft = clamp(targetCenterX - dialogWidth / 2, VIEWPORT_MARGIN, maxLeft);
   const centeredTop = clamp(targetCenterY - dialogHeight / 2, VIEWPORT_MARGIN, maxTop);
   let left = centeredLeft;
   let top = centeredTop;
   let mode = "viewport";
-  if (target.width >= dialogWidth + TARGET_INSET * 2 && target.height >= dialogHeight + TARGET_INSET * 2) {
+  if (target2.width >= dialogWidth + TARGET_INSET * 2 && target2.height >= dialogHeight + TARGET_INSET * 2) {
     mode = "center";
-  } else if (target.y - dialogHeight - TARGET_GAP >= VIEWPORT_MARGIN) {
-    top = target.y - dialogHeight - TARGET_GAP;
+  } else if (target2.y - dialogHeight - TARGET_GAP >= VIEWPORT_MARGIN) {
+    top = target2.y - dialogHeight - TARGET_GAP;
     mode = "above";
-  } else if (target.y + target.height + TARGET_GAP + dialogHeight <= viewportHeight - VIEWPORT_MARGIN) {
-    top = target.y + target.height + TARGET_GAP;
+  } else if (target2.y + target2.height + TARGET_GAP + dialogHeight <= viewportHeight - VIEWPORT_MARGIN) {
+    top = target2.y + target2.height + TARGET_GAP;
     mode = "below";
-  } else if (target.x + target.width + TARGET_GAP + dialogWidth <= viewportWidth - VIEWPORT_MARGIN) {
-    left = target.x + target.width + TARGET_GAP;
+  } else if (target2.x + target2.width + TARGET_GAP + dialogWidth <= viewportWidth - VIEWPORT_MARGIN) {
+    left = target2.x + target2.width + TARGET_GAP;
     mode = "right";
-  } else if (target.x - dialogWidth - TARGET_GAP >= VIEWPORT_MARGIN) {
-    left = target.x - dialogWidth - TARGET_GAP;
+  } else if (target2.x - dialogWidth - TARGET_GAP >= VIEWPORT_MARGIN) {
+    left = target2.x - dialogWidth - TARGET_GAP;
     mode = "left";
   }
   return Object.freeze({
@@ -2594,7 +2756,7 @@ var UI_MESSAGES = Object.freeze({
       noSelectable: "No selectable element was found.",
       allTargetsRemoved: "All targets were removed. Choose an element to continue.",
       targetRemoved: "Selected target removed.",
-      detachedTargetRemoved: "A removed page element was dropped from the selection.",
+      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\u2026",
@@ -2730,7 +2892,7 @@ var UI_MESSAGES = Object.freeze({
       noSelectable: "\u5F53\u524D\u4F4D\u7F6E\u6CA1\u6709\u53EF\u9009\u62E9\u7684\u5143\u7D20\u3002",
       allTargetsRemoved: "\u5DF2\u79FB\u9664\u5168\u90E8\u76EE\u6807\uFF0C\u8BF7\u91CD\u65B0\u9009\u62E9\u5143\u7D20\u3002",
       targetRemoved: "\u5DF2\u79FB\u9664\u9009\u4E2D\u76EE\u6807\u3002",
-      detachedTargetRemoved: "\u9875\u9762\u4E2D\u7684\u76EE\u6807\u5DF2\u5378\u8F7D\uFF0C\u5DF2\u4ECE\u5F53\u524D\u9009\u62E9\u4E2D\u79FB\u9664\u3002",
+      detachedTargetPreserved: "\u9875\u9762\u5143\u7D20\u5DF2\u5378\u8F7D\uFF0C\u5DF2\u91C7\u96C6\u7684\u4E0A\u4E0B\u6587\u4ECD\u4FDD\u7559\u5728\u9009\u62E9\u4E2D\u3002",
       contextWarning: "\u6D4F\u89C8\u5668\u4E0A\u4E0B\u6587\u91C7\u96C6\u5B8C\u6210\uFF0C\u4F46\u5B58\u5728\u8B66\u544A\u3002",
       contextCollected: "\u6D4F\u89C8\u5668\u4E0A\u4E0B\u6587\u91C7\u96C6\u5B8C\u6210\u3002",
       editorOpening: "\u6B63\u5728\u6253\u5F00\u6E90\u7801\u2026\u2026",
@@ -2788,33 +2950,36 @@ function createUiLocalizer(document, preference = "auto") {
 }
 
 // src/ui/runtime-view.ts
-var DIALOG_FALLBACK_WIDTH = 560;
+var DIALOG_MAX_WIDTH = 460;
+var DIALOG_MAX_HEIGHT = 620;
 var DIALOG_FALLBACK_HEIGHT = Object.freeze({
-  previewing: 640,
-  selected: 720
+  previewing: 560,
+  selected: DIALOG_MAX_HEIGHT
 });
 function createStyles(document) {
   const style = document.createElement("style");
   style.textContent = `
     :host {
       all: initial;
-      --spotpatch-bg: #11141a;
-      --spotpatch-bg-raised: #191d25;
-      --spotpatch-bg-input: #0c0f14;
-      --spotpatch-border: #303641;
-      --spotpatch-border-subtle: #262c35;
-      --spotpatch-text: #f4f6fb;
-      --spotpatch-text-secondary: #a4adbd;
-      --spotpatch-text-muted: #7f899a;
-      --spotpatch-accent: #7060ee;
-      --spotpatch-accent-strong: #604ee8;
-      --spotpatch-accent-cyan: #27b8cf;
+      --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-radius-panel: 24px;
-      --spotpatch-radius-card: 15px;
-      --spotpatch-shadow-panel: 0 28px 72px rgb(0 0 0 / 38%);
+      --spotpatch-text-on-accent: #0b0b12;
+      --spotpatch-radius-panel: 16px;
+      --spotpatch-radius-card: 10px;
+      --spotpatch-shadow-panel: 0 30px 60px -20px rgb(0 0 0 / 70%);
       color-scheme: dark;
       color: var(--spotpatch-text);
       font-family: Inter, "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
@@ -2934,7 +3099,7 @@ function createStyles(document) {
       left: 16px;
       z-index: ${String(UI_Z_INDEX.controls)};
       box-sizing: border-box;
-      width: min(560px, calc(100vw - 32px));
+      width: min(${String(DIALOG_MAX_WIDTH)}px, calc(100vw - 32px));
       color: #edf0f7;
       outline: none;
       filter: drop-shadow(var(--spotpatch-shadow-panel));
@@ -2978,78 +3143,92 @@ function createStyles(document) {
       position: relative;
       z-index: 1;
       display: flex;
-      max-height: min(720px, calc(100vh - 32px));
+      box-sizing: border-box;
+      max-height: min(${String(DIALOG_MAX_HEIGHT)}px, calc(100vh - 32px));
       overflow: hidden;
       flex-direction: column;
       border: 1px solid var(--spotpatch-border);
       border-radius: var(--spotpatch-radius-panel);
       background: var(--spotpatch-bg);
-      box-shadow: inset 0 1px rgb(255 255 255 / 7%), inset 0 0 0 1px rgb(2 6 23 / 40%);
+      box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 0 60px -32px rgb(139 123 255 / 20%);
+    }
+    .spotpatch-shell::before {
+      position: absolute;
+      z-index: 2;
+      top: 0;
+      right: 20%;
+      left: 20%;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, var(--spotpatch-accent), var(--spotpatch-accent-cyan), transparent);
+      content: "";
+      opacity: .65;
+      pointer-events: none;
     }
     .spotpatch-header {
       position: relative;
-      padding: 20px 22px 18px;
-      border-bottom: 1px solid rgb(255 255 255 / 8%);
+      padding: 0 18px 14px;
     }
     .spotpatch-brand-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 16px;
-      margin-bottom: 18px;
+      gap: 12px;
+      margin: 0 -18px 18px;
+      padding: 14px 18px 13px;
+      border-bottom: 1px solid var(--spotpatch-border-subtle);
     }
     .spotpatch-brand {
       display: inline-flex;
       align-items: center;
-      gap: 11px;
+      gap: 10px;
       min-width: 0;
       color: #f8fafc;
     }
     .spotpatch-brand-mark {
-      width: 34px;
-      height: 34px;
+      width: 30px;
+      height: 30px;
       flex: none;
       filter: drop-shadow(0 6px 12px rgb(76 29 149 / 22%));
     }
     .spotpatch-brand-copy { display: grid; min-width: 0; gap: 1px; }
     .spotpatch-brand-name {
       color: #fff;
-      font-size: 15px;
-      font-weight: 720;
+      font-size: 13.5px;
+      font-weight: 680;
       letter-spacing: -.01em;
     }
     .spotpatch-brand-context {
       color: #8e98aa;
-      font-size: 11px;
+      font-size: 10.5px;
       font-weight: 560;
       letter-spacing: .02em;
     }
     .spotpatch-header-controls {
       display: inline-flex;
       align-items: center;
-      gap: 8px;
+      gap: 6px;
       flex: none;
     }
     .spotpatch-repository,
     .spotpatch-locale,
     .spotpatch-close {
-      height: 30px;
+      height: 27px;
       border: 1px solid rgb(255 255 255 / 11%);
-      border-radius: 9px;
-      background: rgb(255 255 255 / 4%);
+      border-radius: 7px;
+      background: transparent;
     }
     .spotpatch-repository {
       display: inline-flex;
       align-items: center;
-      padding: 0 10px;
-      color: #bcecf2;
+      padding: 0 9px;
+      color: var(--spotpatch-text-secondary);
       font-size: 11px;
       font-weight: 680;
       text-decoration: none;
     }
     .spotpatch-locale {
-      min-width: 38px;
-      padding: 0 9px;
+      min-width: 34px;
+      padding: 0 8px;
       color: #c5cad5;
       cursor: pointer;
       font-size: 12px;
@@ -3057,12 +3236,12 @@ function createStyles(document) {
     }
     .spotpatch-close {
       display: inline-grid;
-      width: 30px;
+      width: 27px;
       padding: 0;
       place-items: center;
       color: #9da5b4;
       cursor: pointer;
-      font-size: 17px;
+      font-size: 15px;
       line-height: 1;
       transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
     }
@@ -3072,30 +3251,30 @@ function createStyles(document) {
     .spotpatch-title {
       margin: 0;
       color: #fff;
-      font-size: 24px;
-      font-weight: 730;
-      letter-spacing: -.025em;
+      font-size: 18px;
+      font-weight: 680;
+      letter-spacing: -.015em;
     }
     .spotpatch-subtitle {
-      max-width: 470px;
-      margin: 6px 0 0;
-      color: #9ca5b5;
-      font-size: 15px;
-      line-height: 1.55;
+      max-width: 390px;
+      margin: 4px 0 0;
+      color: var(--spotpatch-text-secondary);
+      font-size: 12.5px;
+      line-height: 1.5;
     }
     .spotpatch-target-row {
       display: flex;
       align-items: center;
       gap: 8px;
       min-width: 0;
-      margin-top: 16px;
+      margin-top: 14px;
     }
     .spotpatch-target-label {
       min-width: 0;
       overflow: hidden;
       border: 1px solid rgb(129 112 247 / 24%);
       border-radius: 999px;
-      padding: 6px 10px;
+      padding: 4px 10px;
       color: #cdd2ff;
       background: rgb(109 93 246 / 10%);
       font: 600 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -3108,7 +3287,7 @@ function createStyles(document) {
       gap: 6px;
       flex: none;
       color: #a5adba;
-      font-size: 12px;
+      font-size: 11px;
       white-space: nowrap;
     }
     .spotpatch-context-state::before {
@@ -3129,7 +3308,7 @@ function createStyles(document) {
     .spotpatch-body {
       min-height: 0;
       overflow: auto;
-      padding: 20px 22px 22px;
+      padding: 0 18px 14px;
       scrollbar-color: rgb(100 116 139 / 50%) transparent;
       scrollbar-width: thin;
     }
@@ -3140,36 +3319,54 @@ function createStyles(document) {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 12px;
-      margin-bottom: 7px;
-      color: #eef0f5;
-      font-size: 14px;
-      font-weight: 680;
+      gap: 10px;
+      margin-bottom: 8px;
+      color: var(--spotpatch-text-secondary);
+      font-size: 11px;
+      font-weight: 650;
+      letter-spacing: .04em;
+      text-transform: uppercase;
     }
     .spotpatch-targets-meta {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      margin-bottom: 12px;
+      gap: 8px;
+      min-width: 0;
+      letter-spacing: 0;
+      text-transform: none;
     }
-    .spotpatch-target-complete { color: var(--spotpatch-text-secondary); font-size: 12px; font-weight: 560; }
+    .spotpatch-target-complete { color: var(--spotpatch-text-muted); font-size: 11px; font-weight: 560; }
     .spotpatch-target-budget {
       color: var(--spotpatch-text-muted);
-      font: 550 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
+      font: 550 10.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
     }
+    .spotpatch-target-budget[data-state="ready"] { display: none; }
     .spotpatch-target-budget[data-state="over"] { color: #fda4af; }
     .spotpatch-target-count {
+      margin-left: auto;
       border-radius: 999px;
       padding: 3px 8px;
-      color: #b8bffd;
-      background: rgb(109 93 246 / 11%);
-      font: 650 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
+      color: var(--spotpatch-text-muted);
+      font: 600 10.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
+    }
+    .spotpatch-target-progress {
+      height: 3px;
+      margin-bottom: 13px;
+      overflow: hidden;
+      border-radius: 999px;
+      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;
     }
     .spotpatch-target-list {
       display: grid;
-      gap: 12px;
-      max-height: min(390px, 48vh);
+      gap: 8px;
+      max-height: min(340px, 48vh);
       overflow: auto;
       padding-right: 2px;
     }
@@ -3177,30 +3374,30 @@ function createStyles(document) {
       overflow: hidden;
       border: 1px solid var(--spotpatch-border-subtle);
       border-radius: var(--spotpatch-radius-card);
-      background: rgb(255 255 255 / 2.7%);
+      background: var(--spotpatch-bg-raised);
       transition: border-color 150ms ease, background 150ms ease;
     }
     .spotpatch-target-item[data-active="true"] {
-      border-color: rgb(125 106 248 / 42%);
-      background: rgb(109 93 246 / 6%);
-      box-shadow: inset 3px 0 var(--spotpatch-accent-strong);
+      border-color: rgb(139 123 255 / 34%);
+      background: var(--spotpatch-bg-active);
+      box-shadow: 0 0 0 3px rgb(139 123 255 / 10%);
     }
     .spotpatch-target-summary {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) 34px 34px;
+      grid-template-columns: minmax(0, 1fr) 28px 28px;
       align-items: stretch;
-      gap: 4px;
-      padding: 5px;
+      gap: 2px;
+      padding: 4px;
     }
     .spotpatch-target-select {
       display: grid;
-      grid-template-columns: 34px minmax(0, 1fr) auto;
+      grid-template-columns: 24px minmax(0, 1fr) auto;
       align-items: center;
-      gap: 11px;
+      gap: 9px;
       min-width: 0;
       border: 0;
-      border-radius: 11px;
-      padding: 10px 11px;
+      border-radius: 8px;
+      padding: 8px;
       color: inherit;
       background: transparent;
       cursor: pointer;
@@ -3209,14 +3406,14 @@ function createStyles(document) {
     .spotpatch-target-select:hover { background: rgb(255 255 255 / 3.5%); }
     .spotpatch-target-index {
       display: inline-grid;
-      width: 30px;
-      height: 30px;
+      width: 22px;
+      height: 22px;
       place-items: center;
       border: 1px solid rgb(68 202 224 / 25%);
-      border-radius: 9px;
-      color: #9ce7f0;
-      background: rgb(8 145 178 / 10%);
-      font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
+      border-radius: 6px;
+      color: var(--spotpatch-text-secondary);
+      background: var(--spotpatch-bg);
+      font: 650 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
     }
     .spotpatch-target-copy { min-width: 0; }
     .spotpatch-target-name,
@@ -3226,14 +3423,14 @@ function createStyles(document) {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    .spotpatch-target-name { color: #f2f4f8; font-size: 16px; font-weight: 680; }
-    .spotpatch-target-source { margin-top: 5px; color: var(--spotpatch-text-muted); font: 500 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
+    .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-state {
       border-radius: 999px;
-      padding: 4px 8px;
+      padding: 3px 8px;
       color: #a7f3d0;
       background: rgb(16 185 129 / 9%);
-      font-size: 11px;
+      font-size: 10.5px;
       font-weight: 650;
       white-space: nowrap;
     }
@@ -3241,13 +3438,13 @@ function createStyles(document) {
     .spotpatch-target-open,
     .spotpatch-target-remove {
       display: inline-grid;
-      width: 34px;
+      width: 28px;
       height: 100%;
-      min-height: 40px;
+      min-height: 34px;
       padding: 0;
       place-items: center;
       border: 1px solid transparent;
-      border-radius: 10px;
+      border-radius: 7px;
       color: #7f899a;
       background: transparent;
       cursor: pointer;
@@ -3256,31 +3453,30 @@ function createStyles(document) {
     .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%); }
     .spotpatch-target-editor {
-      border-top: 1px solid rgb(255 255 255 / 7%);
-      padding: 18px;
+      padding: 0 12px 12px;
     }
     .spotpatch-target-editor-head {
       display: flex;
       align-items: baseline;
       justify-content: space-between;
       gap: 12px;
-      margin-bottom: 9px;
+      margin-bottom: 6px;
     }
-    .spotpatch-target-editor-label { color: #dfe3ea; font-size: 15px; font-weight: 650; }
-    .spotpatch-target-editor-count { color: var(--spotpatch-text-muted); font: 500 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
+    .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 textarea {
       box-sizing: border-box;
       width: 100%;
-      min-height: 126px;
+      min-height: 74px;
       resize: vertical;
       border: 1px solid var(--spotpatch-border);
-      border-radius: 12px;
-      padding: 14px 15px;
+      border-radius: 7px;
+      padding: 9px 10px;
       color: #f8fafc;
       caret-color: #8b7cf7;
       background: var(--spotpatch-bg-input);
-      font-size: 15px;
-      line-height: 1.65;
+      font-size: 12.5px;
+      line-height: 1.55;
       outline: none;
       transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
     }
@@ -3289,23 +3485,23 @@ function createStyles(document) {
     .spotpatch-target-editor textarea:focus {
       border-color: rgb(139 124 247 / 68%);
       background: rgb(3 7 18 / 65%);
-      box-shadow: 0 0 0 3px rgb(109 93 246 / 10%);
+      box-shadow: 0 0 0 2px rgb(109 93 246 / 10%);
     }
     .spotpatch-diagnostics {
-      margin-top: 14px;
+      margin-top: 10px;
       overflow: hidden;
       border: 1px solid rgb(255 255 255 / 8%);
-      border-radius: 13px;
+      border-radius: 9px;
       background: rgb(255 255 255 / 2.5%);
     }
     .spotpatch-diagnostics > summary {
       display: flex;
       align-items: center;
       gap: 8px;
-      padding: 11px 13px;
+      padding: 9px 11px;
       color: #bfc5d0;
       cursor: pointer;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 650;
       list-style: none;
       user-select: none;
@@ -3334,9 +3530,9 @@ function createStyles(document) {
       margin: 0;
       overflow: auto;
       border-top: 1px solid rgb(255 255 255 / 7%);
-      padding: 12px 13px 13px;
+      padding: 10px 11px 11px;
       color: #9ca5b5;
-      font: 11.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
+      font: 10.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
       overflow-wrap: anywhere;
       white-space: pre-wrap;
       user-select: text;
@@ -3346,39 +3542,44 @@ function createStyles(document) {
       margin: 0;
       overflow: auto;
       border: 1px solid rgb(255 255 255 / 9%);
-      border-radius: 14px;
-      padding: 13px;
+      border-radius: 9px;
+      padding: 11px;
       color: #d8ddeb;
       background: rgb(3 7 18 / 55%);
-      font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
+      font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
       overflow-wrap: anywhere;
       white-space: pre-wrap;
       user-select: text;
     }
     .spotpatch-actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 9px;
-      padding: 14px 22px 18px;
+      display: grid;
+      gap: 8px;
+      padding: 10px 18px 14px;
       border-top: 1px solid rgb(255 255 255 / 8%);
-      background: rgb(8 12 22 / 82%);
+      background: rgb(8 8 12 / 86%);
     }
     .spotpatch-editor-feedback {
-      flex-basis: 100%;
       white-space: normal;
     }
+    .spotpatch-secondary-actions,
+    .spotpatch-primary-actions {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+    }
+    .spotpatch-secondary-actions { min-height: 30px; }
     .spotpatch-actions button {
       display: inline-flex;
-      min-height: 40px;
+      min-height: 34px;
       align-items: center;
       justify-content: center;
       border: 1px solid rgb(255 255 255 / 10%);
-      border-radius: 11px;
-      padding: 9px 13px;
-      color: #d8ddeb;
+      border-radius: 9px;
+      padding: 7px 11px;
+      color: var(--spotpatch-text-secondary);
       background: rgb(255 255 255 / 4%);
       cursor: pointer;
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 650;
       transition: border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
     }
@@ -3388,14 +3589,36 @@ function createStyles(document) {
       transform: translateY(-1px);
     }
     .spotpatch-actions .spotpatch-primary {
-      min-width: 154px;
+      min-width: 138px;
       flex: 1;
-      border-color: rgb(139 124 247 / 58%);
-      color: #fff;
-      background: var(--spotpatch-accent-strong);
-      box-shadow: 0 9px 24px rgb(55 48 163 / 20%), inset 0 1px rgb(255 255 255 / 14%);
+      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%);
     }
+    .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: "\u2197"; font-size: 12px; }
+    .spotpatch-actions .spotpatch-secondary-action {
+      min-height: 30px;
+      border-style: dashed;
+      padding: 5px 10px;
+      color: var(--spotpatch-text-muted);
+      background: transparent;
+      font-size: 11px;
+    }
+    .spotpatch-actions .spotpatch-icon-action {
+      width: 34px;
+      min-width: 34px;
+      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-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,
@@ -3427,11 +3650,13 @@ function createStyles(document) {
     }
     @media (max-width: 520px) {
       .spotpatch-dialog { top: 8px; left: 8px; width: calc(100vw - 16px); }
-      .spotpatch-shell { max-height: calc(100vh - 16px); border-radius: 18px; }
-      .spotpatch-header, .spotpatch-body { padding-left: 16px; padding-right: 16px; }
-      .spotpatch-actions { padding-left: 16px; padding-right: 16px; }
-      .spotpatch-target-select { grid-template-columns: 32px minmax(0, 1fr); }
+      .spotpatch-shell { max-height: calc(100vh - 16px); border-radius: 14px; }
+      .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-actions { padding-right: 14px; padding-left: 14px; }
+      .spotpatch-target-select { grid-template-columns: 24px minmax(0, 1fr); }
       .spotpatch-target-state { display: none; }
+      .spotpatch-repository { display: none; }
     }
     ${AGENT_PANEL_STYLES}
   `;
@@ -3534,10 +3759,17 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   const targetCount = createMarkedElement(document, "span");
   targetCount.className = "spotpatch-target-count";
   targetsMeta.append(targetComplete, targetBudget);
-  targetsHeading.append(targetsTitle, targetCount);
+  targetRow.append(targetCount);
+  targetsHeading.append(targetsTitle, targetsMeta);
+  const targetProgress = createMarkedElement(document, "div");
+  targetProgress.className = "spotpatch-target-progress";
+  targetProgress.setAttribute("aria-hidden", "true");
+  const targetProgressFill = createMarkedElement(document, "div");
+  targetProgressFill.className = "spotpatch-target-progress-fill";
+  targetProgress.append(targetProgressFill);
   const targetList = createMarkedElement(document, "div");
   targetList.className = "spotpatch-target-list";
-  targetsPanel.append(targetsHeading, targetsMeta, targetList);
+  targetsPanel.append(targetsHeading, targetProgress, targetList);
   const diagnostics = createMarkedElement(document, "details");
   diagnostics.className = "spotpatch-diagnostics";
   const diagnosticsLabel = createMarkedElement(document, "summary");
@@ -3578,21 +3810,30 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   );
   const copyButton = createButton(document, messages.actions.copy, "spotpatch-primary");
   const backButton = createButton(document, messages.actions.back);
-  actions.append(
-    editorFeedback,
+  const secondaryActions = createMarkedElement(document, "div");
+  secondaryActions.className = "spotpatch-secondary-actions";
+  const primaryActions = createMarkedElement(document, "div");
+  primaryActions.className = "spotpatch-primary-actions";
+  addTargetButton.classList.add("spotpatch-icon-action");
+  addTargetButton.dataset.compactIcon = "+";
+  agentPanel.testButton.classList.add("spotpatch-icon-action");
+  agentPanel.testButton.dataset.compactIcon = "\u2713";
+  openEditorButton.classList.add("spotpatch-secondary-action");
+  reselectButton.classList.add("spotpatch-secondary-action");
+  secondaryActions.append(openEditorButton, reselectButton);
+  primaryActions.append(
+    agentPanel.testButton,
+    addTargetButton,
     agentPanel.runButton,
     previewButton,
-    agentPanel.testButton,
     agentPanel.cancelButton,
     agentPanel.applyButton,
     agentPanel.revertButton,
     agentPanel.resetButton,
-    addTargetButton,
-    openEditorButton,
-    reselectButton,
     copyButton,
     backButton
   );
+  actions.append(editorFeedback, secondaryActions, primaryActions);
   shell.append(header, body, actions);
   dialog.append(anchor, shell);
   const liveRegion = createMarkedElement(document, "div");
@@ -3625,11 +3866,15 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     editorFeedback.textContent = state === "opening" ? messages.announcements.editorOpening : state === "success" ? messages.announcements.editorOpened : state === "error" ? messages.announcements.editorFailed : "";
     placeDialog();
   }
-  function statusText(target) {
-    if (target.status === "ready") {
+  function statusText(target2) {
+    if (target2.status === "ready") {
       return messages.targets.statusReady;
     }
-    return target.status === "warning" ? messages.targets.statusPartial : messages.targets.statusCollecting;
+    return target2.status === "warning" ? messages.targets.statusPartial : messages.targets.statusCollecting;
+  }
+  function renderTargetProgress(complete, total) {
+    const ratio = total === 0 ? 0 : complete / total;
+    targetProgressFill.style.width = `${String(ratio * 100)}%`;
   }
   function instructionInput(targetId) {
     const inputs = targetList.querySelectorAll(
@@ -3646,16 +3891,17 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     const focusedTargetId = focusedInstruction?.dataset.targetInstructionId;
     const selectionStart = focusedInstruction?.selectionStart;
     const selectionEnd = focusedInstruction?.selectionEnd;
-    currentTargets = targets.map((target) => Object.freeze({ ...target }));
+    currentTargets = targets.map((target2) => Object.freeze({ ...target2 }));
     currentMaximum = maximum;
     targetList.replaceChildren();
     const completeCount = targets.filter(
-      (target) => target.instruction.trim().length > 0
+      (target2) => target2.instruction.trim().length > 0
     ).length;
     const instructionCharacters = targets.reduce(
-      (total, target) => total + target.instruction.trim().length,
+      (total, target2) => total + target2.instruction.trim().length,
       0
     );
+    renderTargetProgress(completeCount, targets.length);
     targetCount.textContent = messages.targets.count(targets.length, maximum);
     targetComplete.textContent = messages.targets.complete(
       completeCount,
@@ -3673,18 +3919,18 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     addTargetButton.disabled = !editingEnabled || targets.length >= maximum;
     addTargetButton.title = targets.length >= maximum ? messages.targets.limitTitle(maximum) : messages.targets.addTitle;
     targetLabel.textContent = targets.length === 1 ? targets[0]?.label ?? messages.context.selectedElement : messages.context.selectedCount(targets.length);
-    for (const [index, target] of targets.entries()) {
+    for (const [index, target2] of targets.entries()) {
       const item = createMarkedElement(document, "div");
       item.className = "spotpatch-target-item";
-      item.dataset.active = String(target.active);
-      item.dataset.status = target.status;
-      item.dataset.targetId = target.id;
+      item.dataset.active = String(target2.active);
+      item.dataset.status = target2.status;
+      item.dataset.targetId = target2.id;
       const targetSummary = createMarkedElement(document, "div");
       targetSummary.className = "spotpatch-target-summary";
       const select = createButton(document, "", "spotpatch-target-select");
-      select.dataset.activateTargetId = target.id;
+      select.dataset.activateTargetId = target2.id;
       select.setAttribute("aria-label", messages.targets.activate(index + 1));
-      select.setAttribute("aria-expanded", String(target.active));
+      select.setAttribute("aria-expanded", String(target2.active));
       const number = createMarkedElement(document, "span");
       number.className = "spotpatch-target-index";
       number.textContent = String(index + 1);
@@ -3692,54 +3938,54 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       copy.className = "spotpatch-target-copy";
       const name = createMarkedElement(document, "span");
       name.className = "spotpatch-target-name";
-      name.textContent = target.label;
-      const source = createMarkedElement(document, "span");
-      source.className = "spotpatch-target-source";
-      source.textContent = `${statusText(target)} \xB7 ${target.source}`;
-      copy.append(name, source);
-      const instructionComplete = target.instruction.trim().length > 0;
+      name.textContent = target2.label;
+      const source2 = createMarkedElement(document, "span");
+      source2.className = "spotpatch-target-source";
+      source2.textContent = `${statusText(target2)} \xB7 ${target2.source}`;
+      copy.append(name, source2);
+      const instructionComplete = target2.instruction.trim().length > 0;
       const state = createMarkedElement(document, "span");
       state.className = "spotpatch-target-state";
       state.dataset.complete = String(instructionComplete);
       state.textContent = instructionComplete ? messages.targets.instructionReady : messages.targets.instructionMissing;
       select.append(number, copy, state);
       const open = createButton(document, "\u2197", "spotpatch-target-open");
-      open.dataset.openTargetId = target.id;
-      open.disabled = !target.canOpenEditor;
+      open.dataset.openTargetId = target2.id;
+      open.disabled = !target2.canOpenEditor;
       open.setAttribute("aria-label", messages.actions.openTarget(index + 1));
       open.title = messages.actions.openTarget(index + 1);
       const remove = createButton(document, "\xD7", "spotpatch-target-remove");
-      remove.dataset.removeTargetId = target.id;
+      remove.dataset.removeTargetId = target2.id;
       remove.disabled = !editingEnabled;
       remove.setAttribute("aria-label", messages.targets.remove(index + 1));
       remove.title = messages.targets.removeTitle;
       targetSummary.append(select, open, remove);
       item.append(targetSummary);
-      if (target.active) {
+      if (target2.active) {
         const editor = createMarkedElement(document, "label");
         editor.className = "spotpatch-target-editor";
         const editorHead = createMarkedElement(document, "span");
         editorHead.className = "spotpatch-target-editor-head";
         const editorLabel = createMarkedElement(document, "span");
         editorLabel.className = "spotpatch-target-editor-label";
-        editorLabel.textContent = messages.targets.instructionLabel(target.label);
+        editorLabel.textContent = messages.targets.instructionLabel(target2.label);
         const characterCount = createMarkedElement(document, "span");
         characterCount.className = "spotpatch-target-editor-count";
         characterCount.textContent = messages.targets.instructionCount(
-          target.instruction.length,
+          target2.instruction.length,
           MAX_TARGET_INSTRUCTION_CHARACTERS2
         );
         editorHead.append(editorLabel, characterCount);
         const input = createMarkedElement(document, "textarea");
         input.rows = 4;
         input.maxLength = MAX_TARGET_INSTRUCTION_CHARACTERS2;
-        input.value = target.instruction;
+        input.value = target2.instruction;
         input.placeholder = messages.targets.instructionPlaceholder;
         input.disabled = !editingEnabled;
-        input.dataset.targetInstructionId = target.id;
+        input.dataset.targetInstructionId = target2.id;
         input.setAttribute(
           "aria-label",
-          messages.targets.instructionLabel(target.label)
+          messages.targets.instructionLabel(target2.label)
         );
         editor.append(editorHead, input);
         item.append(editor);
@@ -3756,7 +4002,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   }
   function updateTargetInstruction(targetId, instruction) {
     currentTargets = currentTargets.map(
-      (target) => target.id === targetId ? Object.freeze({ ...target, instruction }) : target
+      (target2) => target2.id === targetId ? Object.freeze({ ...target2, instruction }) : target2
     );
     const item = Array.from(
       targetList.querySelectorAll(".spotpatch-target-item")
@@ -3777,12 +4023,16 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
         MAX_TARGET_INSTRUCTION_CHARACTERS2
       );
     }
+    const completeCount = currentTargets.filter(
+      (target2) => target2.instruction.trim().length > 0
+    ).length;
     targetComplete.textContent = messages.targets.complete(
-      currentTargets.filter((target) => target.instruction.trim().length > 0).length,
+      completeCount,
       currentTargets.length
     );
+    renderTargetProgress(completeCount, currentTargets.length);
     const instructionCharacters = currentTargets.reduce(
-      (total, target) => total + target.instruction.trim().length,
+      (total, target2) => total + target2.instruction.trim().length,
       0
     );
     const instructionLimitExceeded = instructionCharacters > MAX_ANNOTATION_INSTRUCTION_CHARACTERS2;
@@ -3797,25 +4047,25 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   }
   function showSelectionHighlights(targets) {
     selectionHighlights.replaceChildren();
-    activeSelectionRect = targets.find((target) => target.active)?.rect;
+    activeSelectionRect = targets.find((target2) => target2.active)?.rect;
     currentRect = activeSelectionRect;
-    for (const [index, target] of targets.entries()) {
+    for (const [index, target2] of targets.entries()) {
       const box = createMarkedElement(document, "div");
       box.className = "spotpatch-selection-highlight";
-      box.dataset.targetId = target.id;
-      box.dataset.active = String(target.active);
-      box.style.transform = `translate(${String(target.rect.x)}px, ${String(target.rect.y)}px)`;
-      box.style.width = `${String(target.rect.width)}px`;
-      box.style.height = `${String(target.rect.height)}px`;
+      box.dataset.targetId = 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`;
+      box.style.height = `${String(target2.rect.height)}px`;
       const label = createMarkedElement(document, "span");
-      label.textContent = `${String(index + 1)} \xB7 ${target.label}`;
+      label.textContent = `${String(index + 1)} \xB7 ${target2.label}`;
       box.append(label);
       selectionHighlights.append(box);
     }
     placeDialog();
   }
   function placeDialog() {
-    if (dialog.hidden || currentRect === void 0) {
+    if (dialog.hidden) {
       return;
     }
     const view = document.defaultView;
@@ -3823,14 +4073,14 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     const viewportHeight = view?.innerHeight ?? document.documentElement.clientHeight;
     const measured = dialog.getBoundingClientRect();
     const status = currentStatus === "previewing" ? "previewing" : "selected";
-    const dialogWidth = measured.width > 0 ? measured.width : Math.min(DIALOG_FALLBACK_WIDTH, viewportWidth - 32);
+    const dialogWidth = measured.width > 0 ? measured.width : Math.min(DIALOG_MAX_WIDTH, viewportWidth - 32);
     const dialogHeight = measured.height > 0 ? measured.height : Math.min(DIALOG_FALLBACK_HEIGHT[status], viewportHeight - 32);
     const placement = calculateDialogPlacement({
-      target: currentRect,
       dialogWidth,
       dialogHeight,
       viewportWidth,
-      viewportHeight
+      viewportHeight,
+      ...currentRect === void 0 ? {} : { target: currentRect }
     });
     dialog.style.left = `${String(placement.left)}px`;
     dialog.style.top = `${String(placement.top)}px`;
@@ -3840,8 +4090,8 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   }
   function updateContextOverview(summaryText) {
     const summaryMessages = messages.summary;
-    const source = summaryLine(summaryText, summaryMessages.source);
-    sourcePeek.textContent = source ?? messages.diagnostics.noExactSource;
+    const source2 = summaryLine(summaryText, summaryMessages.source);
+    sourcePeek.textContent = source2 ?? messages.diagnostics.noExactSource;
     const browserReady = `${summaryMessages.browserContext}: ${summaryMessages.collectionStatuses.ready}`;
     const browserLoading = `${summaryMessages.browserContext}: ${summaryMessages.collectionStatuses.loading}`;
     const browserFailed = `${summaryMessages.browserContext}: ${summaryMessages.collectionStatuses.failed}`;
@@ -3880,6 +4130,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     addTargetButton.hidden = !selected;
     openEditorButton.hidden = !selected;
     previewButton.hidden = !selected;
+    secondaryActions.hidden = !selected;
     agentPanel.setSelectionVisible(selected);
     copyButton.hidden = !previewing;
     backButton.hidden = !previewing;
@@ -3918,6 +4169,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     } else {
       targetCount.textContent = messages.targets.count(0, currentMaximum);
       targetComplete.textContent = messages.targets.complete(0, 0);
+      renderTargetProgress(0, 0);
       targetBudget.dataset.state = "ready";
       targetBudget.textContent = messages.targets.instructionBudget(
         0,
@@ -3986,6 +4238,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       selectionHighlights.replaceChildren();
       activeSelectionRect = void 0;
       currentRect = void 0;
+      placeDialog();
     },
     showSelection(summaryText, canOpenEditor, canPreview) {
       updateSelection(summaryText, canOpenEditor, canPreview);
@@ -4011,6 +4264,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       renderEditorStatus("idle");
       targetCount.textContent = messages.targets.count(0, 0);
       targetComplete.textContent = messages.targets.complete(0, 0);
+      renderTargetProgress(0, 0);
       targetLabel.textContent = messages.context.selectedElement;
       summary.textContent = "";
       promptOutput.textContent = "";
@@ -4552,25 +4806,25 @@ var EMPTY_STYLE_CONTEXT = Object.freeze({
   computed: Object.freeze({}),
   warnings: Object.freeze(["CSS context collection failed."])
 });
-function elementLabel(element) {
-  const id = element.id.length > 0 ? `#${element.id}` : "";
-  const className = Array.from(element.classList).slice(0, 2).map((name) => `.${name}`).join("");
-  return `<${element.tagName.toLowerCase()}${id}${className}>`;
-}
-function sourceLabel(target, unavailable) {
-  const path = target.code?.relativePath ?? target.resolution.source.relativePath;
-  const line = target.resolution.source.line;
-  const column = target.resolution.source.column;
+function elementLabel(element2) {
+  const id = element2.id.length > 0 ? `#${element2.id}` : "";
+  const className = Array.from(element2.classList).slice(0, 2).map((name) => `.${name}`).join("");
+  return `<${element2.tagName.toLowerCase()}${id}${className}>`;
+}
+function sourceLabel(target2, unavailable) {
+  const path = target2.code?.relativePath ?? target2.resolution.source.relativePath;
+  const line = target2.resolution.source.line;
+  const column = target2.resolution.source.column;
   if (path === void 0) {
     return unavailable;
   }
   return `${path}${line === void 0 ? "" : `:${String(line)}`}${column === void 0 ? "" : `:${String(column)}`}`;
 }
-function targetStatus(target) {
-  if (target.apiStatus === "failed" || target.collectionStatus === "failed") {
+function targetStatus(target2) {
+  if (target2.apiStatus === "failed" || target2.collectionStatus === "failed") {
     return "warning";
   }
-  if (target.apiStatus === "loading" || target.collectionStatus === "loading") {
+  if (target2.apiStatus === "loading" || target2.collectionStatus === "loading") {
     return "loading";
   }
   return "ready";
@@ -4597,6 +4851,8 @@ function createController(config, dependencies = {}) {
   const clipboard = dependencies.clipboard ?? resolveClipboardWriter(browser.window.navigator);
   const createId = dependencies.createId ?? (() => createBrowserAnnotationId(browser.window));
   const now = dependencies.now ?? (() => (/* @__PURE__ */ new Date()).toISOString());
+  const selectionSession = dependencies.selectionSession ?? createSelectionSession(browser.window, config.sessionId, config.maxTargets);
+  const restoredSelection = selectionSession.load();
   const sourceResolver = createSourceResolver({
     adapter: dependencies.reactAdapter ?? createReact18Adapter({
       maxComponentDepth: config.budget.maxComponentDepth
@@ -4614,9 +4870,26 @@ function createController(config, dependencies = {}) {
   let mounted = false;
   let animationFrame;
   let lastPointer;
-  let targets = [];
-  let activeTargetId;
-  let targetSequence = 0;
+  let targets = restoredSelection?.targets.map((target2) => {
+    const marker = sourceRefToMarker(target2.source);
+    return {
+      id: target2.id,
+      resolution: Object.freeze({ source: target2.source, react: target2.react }),
+      apiStatus: marker === void 0 ? "not-required" : target2.code === void 0 ? "failed" : "connected",
+      code: target2.code,
+      collectionStatus: "ready",
+      element: void 0,
+      elementContext: target2.element,
+      instruction: target2.instruction,
+      marker,
+      page: target2.page,
+      styles: target2.styles
+    };
+  }) ?? [];
+  let activeTargetId = restoredSelection?.activeTargetId;
+  let targetSequence = restoredSelection?.sequence ?? 0;
+  let selectionOpen = restoredSelection?.open ?? false;
+  let workflowSelectionActive = false;
   let sessionRevision = 0;
   let editorRequestRevision = 0;
   let addingTarget = false;
@@ -4631,51 +4904,87 @@ function createController(config, dependencies = {}) {
     view.renderStatus(state.status);
   }
   function activeTarget() {
-    return targets.find((target) => target.id === activeTargetId) ?? targets.at(-1);
+    return targets.find((target2) => target2.id === activeTargetId) ?? targets.at(-1);
+  }
+  function snapshotTarget(target2) {
+    if (target2.elementContext === void 0 || target2.styles === void 0) {
+      return void 0;
+    }
+    return {
+      id: target2.id,
+      instruction: target2.instruction,
+      page: target2.page,
+      source: target2.resolution.source,
+      react: target2.resolution.react,
+      element: target2.elementContext,
+      styles: target2.styles,
+      ...target2.code === void 0 ? {} : { code: target2.code }
+    };
   }
-  function targetIsCurrent(target, revision) {
-    return mounted && revision === sessionRevision && state.status !== "idle" && targets.includes(target);
+  function persistSelection() {
+    const persistedTargets = targets.flatMap((target2) => {
+      const snapshot = snapshotTarget(target2);
+      return snapshot === void 0 ? [] : [snapshot];
+    });
+    if (persistedTargets.length === 0) {
+      selectionSession.clear();
+      return;
+    }
+    const persistedIds = new Set(persistedTargets.map(({ id }) => id));
+    selectionSession.save({
+      ...activeTargetId !== void 0 && persistedIds.has(activeTargetId) ? { activeTargetId } : {},
+      open: selectionOpen,
+      sequence: targetSequence,
+      targets: persistedTargets
+    });
+  }
+  function targetIsCurrent(target2, revision) {
+    return mounted && revision === sessionRevision && state.status !== "idle" && targets.includes(target2);
   }
   function canPreview() {
     const instructionCharacters = targets.reduce(
-      (total, target) => total + target.instruction.trim().length,
+      (total, target2) => total + target2.instruction.trim().length,
       0
     );
     return targets.length > 0 && instructionCharacters <= MAX_ANNOTATION_INSTRUCTION_CHARACTERS3 && targets.every(
-      (target) => target.instruction.trim().length > 0 && target.element !== void 0 && target.elementContext !== void 0 && target.styles !== void 0 && target.apiStatus !== "loading"
+      (target2) => target2.instruction.trim().length > 0 && target2.elementContext !== void 0 && target2.styles !== void 0 && target2.apiStatus !== "loading"
     );
   }
   function selectionSummary() {
     const messages = view.messages().summary;
-    return targets.map((target, index) => {
+    return targets.map((target2, index) => {
       const summary = createSelectionSummary(
         {
-          resolution: target.resolution,
-          ...target.code === void 0 ? {} : { code: target.code },
-          ...target.styles === void 0 ? {} : { styles: target.styles },
-          apiStatus: target.apiStatus,
-          collectionStatus: target.collectionStatus,
+          resolution: target2.resolution,
+          ...target2.code === void 0 ? {} : { code: target2.code },
+          ...target2.styles === void 0 ? {} : { styles: target2.styles },
+          apiStatus: target2.apiStatus,
+          collectionStatus: target2.collectionStatus,
           framework: config.framework,
           frameworkVersion: config.frameworkVersion,
           spotPatchVersion: config.spotPatchVersion
         },
         messages
       );
-      return `${messages.target(index + 1, target.id === activeTargetId)}
+      return `${messages.target(index + 1, target2.id === activeTargetId)}
 ${summary}`;
     }).join("\n\n");
   }
   function refreshHighlights() {
-    const highlights = targets.flatMap((target) => {
-      if (!target.element?.isConnected) {
+    const highlights = targets.flatMap((target2) => {
+      if (!target2.element?.isConnected) {
+        return [];
+      }
+      const rect = getVisibleElementRect(target2.element, browser.window);
+      if (rect === void 0) {
         return [];
       }
       return [
         {
-          id: target.id,
-          label: elementLabel(target.element),
-          rect: getElementRect(target.element, browser.window),
-          active: target.id === activeTargetId
+          id: target2.id,
+          label: elementLabel(target2.element),
+          rect,
+          active: target2.id === activeTargetId
         }
       ];
     });
@@ -4690,14 +4999,14 @@ ${summary}`;
       return;
     }
     view.renderTargets(
-      targets.map((target) => ({
-        id: target.id,
-        label: target.resolution.react.componentName ?? (target.element === void 0 ? target.elementContext?.tagName ?? "Element" : elementLabel(target.element)),
-        source: sourceLabel(target, view.messages().context.sourceUnavailable),
-        canOpenEditor: target.marker !== void 0,
-        status: targetStatus(target),
-        active: target.id === activeTargetId,
-        instruction: target.instruction
+      targets.map((target2) => ({
+        id: target2.id,
+        label: target2.resolution.react.componentName ?? (target2.element === void 0 ? target2.elementContext?.tagName ?? "Element" : elementLabel(target2.element)),
+        source: sourceLabel(target2, view.messages().context.sourceUnavailable),
+        canOpenEditor: target2.marker !== void 0,
+        status: targetStatus(target2),
+        active: target2.id === activeTargetId,
+        instruction: target2.instruction
       })),
       config.maxTargets
     );
@@ -4715,21 +5024,22 @@ ${summary}`;
     if (!canPreview()) {
       return void 0;
     }
-    const annotationTargets = targets.map((target) => {
-      if (target.elementContext === void 0 || target.styles === void 0) {
+    const annotationTargets = targets.map((target2) => {
+      if (target2.elementContext === void 0 || target2.styles === void 0) {
         throw new Error("SpotPatch attempted to compose an incomplete target.");
       }
       const warnings = [
-        ...target.apiStatus === "failed" ? ["Source context could not be loaded."] : [],
-        ...target.collectionStatus === "failed" ? ["Part of the browser context could not be collected."] : []
+        ...target2.apiStatus === "failed" ? ["Source context could not be loaded."] : [],
+        ...target2.collectionStatus === "failed" ? ["Part of the browser context could not be collected."] : []
       ];
       return {
-        instruction: target.instruction.trim(),
-        source: target.resolution.source,
-        react: target.resolution.react,
-        element: target.elementContext,
-        styles: target.styles,
-        ...target.code === void 0 ? {} : { code: target.code },
+        instruction: target2.instruction.trim(),
+        page: target2.page,
+        source: target2.resolution.source,
+        react: target2.resolution.react,
+        element: target2.elementContext,
+        styles: target2.styles,
+        ...target2.code === void 0 ? {} : { code: target2.code },
         warnings
       };
     });
@@ -4741,8 +5051,8 @@ ${summary}`;
       targets: annotationTargets
     });
   }
-  function showElementHighlight(element) {
-    view.showHighlight(getElementRect(element, browser.window), elementLabel(element));
+  function showElementHighlight(element2) {
+    view.showHighlight(getElementRect(element2, browser.window), elementLabel(element2));
   }
   function restoreFocus() {
     if (previousFocus?.isConnected === true) {
@@ -4764,10 +5074,13 @@ ${summary}`;
     resizeObserver?.disconnect();
     targets = [];
     activeTargetId = void 0;
+    selectionOpen = false;
+    workflowSelectionActive = false;
     addingTarget = false;
     previewPrompt = "";
     view.hideSelection();
     view.hideSelectionHighlights();
+    selectionSession.clear();
     restoreFocus();
   }
   function close() {
@@ -4779,7 +5092,11 @@ ${summary}`;
       transition({ type: "BACK" });
       transition({ type: "CLOSE" });
     }
-    releaseSelection();
+    selectionOpen = false;
+    persistSelection();
+    view.hideSelection();
+    view.hideSelectionHighlights();
+    restoreFocus();
     view.hideHighlight();
   }
   function cancelAddTarget() {
@@ -4803,6 +5120,18 @@ ${summary}`;
       close();
       return;
     }
+    if (targets.length > 0) {
+      selectionOpen = true;
+      transition({ type: "RESTORE" });
+      if (!workflowSelectionActive) {
+        agentWorkflow.beginSelection();
+        workflowSelectionActive = true;
+      }
+      refreshSelectionView(true);
+      view.focusTargetInstruction(activeTargetId);
+      persistSelection();
+      return;
+    }
     transition({ type: "ACTIVATE" });
     view.hideSelection();
     view.announce(view.messages().announcements.selectionEnabled);
@@ -4836,12 +5165,13 @@ ${summary}`;
     sessionRevision += 1;
     clearCollectionTimers();
     resizeObserver?.disconnect();
-    for (const target of targets) {
-      target.element = void 0;
+    for (const target2 of targets) {
+      target2.element = void 0;
     }
     view.hideHighlight();
     view.hideSelectionHighlights();
     refreshSelectionView();
+    selectionSession.clear();
     view.announce(view.messages().announcements.appliedTargetsDetached);
   }
   const agentWorkflow = createAgentWorkflow({
@@ -4854,8 +5184,8 @@ ${summary}`;
     },
     view
   });
-  async function loadSourceContext(target, revision) {
-    const marker = target.marker;
+  async function loadSourceContext(target2, revision) {
+    const marker = target2.marker;
     if (marker === void 0) {
       return;
     }
@@ -4866,16 +5196,18 @@ ${summary}`;
         column: marker.column,
         maxLines: config.budget.maxCodeLines
       });
-      if (targetIsCurrent(target, revision)) {
-        target.code = context;
-        target.apiStatus = "connected";
+      if (targetIsCurrent(target2, revision)) {
+        target2.code = context;
+        target2.apiStatus = "connected";
+        persistSelection();
         refreshSelectionView();
         view.announce(view.messages().announcements.sourceLoaded);
       }
     } catch (error) {
-      if (targetIsCurrent(target, revision)) {
-        target.code = void 0;
-        target.apiStatus = "failed";
+      if (targetIsCurrent(target2, revision)) {
+        target2.code = void 0;
+        target2.apiStatus = "failed";
+        persistSelection();
         refreshSelectionView();
         view.announce(view.messages().announcements.sourceFailed);
         if (config.debug && !(error instanceof DOMException && error.name === "AbortError")) {
@@ -4884,61 +5216,62 @@ ${summary}`;
       }
     }
   }
-  function scheduleBrowserContextCollection(target, revision) {
-    const element = target.element;
-    if (element === void 0) {
+  function scheduleBrowserContextCollection(target2, revision) {
+    const element2 = target2.element;
+    if (element2 === void 0) {
       return;
     }
     const timer = browser.window.setTimeout(() => {
-      collectionTimers.delete(target.id);
-      if (!targetIsCurrent(target, revision)) {
+      collectionTimers.delete(target2.id);
+      if (!targetIsCurrent(target2, revision)) {
         return;
       }
       let failed = false;
       try {
-        target.elementContext = collectElementContext({
-          element,
+        target2.elementContext = collectElementContext({
+          element: element2,
           maxCharacters: config.budget.domCharacters
         });
       } catch {
-        target.elementContext = void 0;
+        target2.elementContext = void 0;
         failed = true;
       }
       try {
-        target.styles = collectStyleContext({
+        target2.styles = collectStyleContext({
           document: browser.document,
-          element,
+          element: element2,
           maxCharacters: config.budget.cssCharacters
         });
       } catch {
-        target.styles = EMPTY_STYLE_CONTEXT;
+        target2.styles = EMPTY_STYLE_CONTEXT;
         failed = true;
       }
-      target.collectionStatus = failed ? "failed" : "ready";
+      target2.collectionStatus = failed ? "failed" : "ready";
+      persistSelection();
       refreshSelectionView();
       view.announce(
         failed ? view.messages().announcements.contextWarning : view.messages().announcements.contextCollected
       );
-      if (config.debug && target.styles.warnings.length > 0) {
+      if (config.debug && target2.styles.warnings.length > 0) {
         console.warn(
-          `[spotpatch:runtime] CSS collection completed with ${String(target.styles.warnings.length)} warning(s).`
+          `[spotpatch:runtime] CSS collection completed with ${String(target2.styles.warnings.length)} warning(s).`
         );
       }
     }, 0);
-    collectionTimers.set(target.id, timer);
+    collectionTimers.set(target2.id, timer);
   }
-  function duplicateTarget(element, marker) {
+  function duplicateTarget(element2, marker) {
     if (marker !== void 0) {
       return targets.find(
-        (target) => target.marker?.fileId === marker.fileId && target.marker.line === marker.line && target.marker.column === marker.column
+        (target2) => target2.marker?.fileId === marker.fileId && target2.marker.line === marker.line && target2.marker.column === marker.column
       );
     }
-    return targets.find((target) => target.element === element);
+    return targets.find((target2) => target2.element === element2);
   }
-  function selectElement(element) {
-    const resolution = sourceResolver.resolve(element);
+  function selectElement(element2) {
+    const resolution = sourceResolver.resolve(element2);
     const marker = sourceRefToMarker(resolution.source);
-    const duplicate = duplicateTarget(element, marker);
+    const duplicate = duplicateTarget(element2, marker);
     if (duplicate !== void 0) {
       activeTargetId = duplicate.id;
       addingTarget = false;
@@ -4962,13 +5295,15 @@ ${summary}`;
       previousFocus = browser.document.activeElement instanceof HTMLElement ? browser.document.activeElement : void 0;
       previewPrompt = "";
       agentWorkflow.beginSelection();
+      workflowSelectionActive = true;
     }
     targetSequence += 1;
-    const target = {
+    const target2 = {
       id: `target-${String(targetSequence)}`,
-      element,
+      element: element2,
       resolution,
       marker,
+      page: collectPageContext(browser.document, browser.window),
       code: void 0,
       elementContext: void 0,
       styles: void 0,
@@ -4976,18 +5311,19 @@ ${summary}`;
       apiStatus: marker === void 0 ? "not-required" : "loading",
       collectionStatus: "loading"
     };
-    targets.push(target);
-    activeTargetId = target.id;
+    targets.push(target2);
+    activeTargetId = target2.id;
     addingTarget = false;
     const revision = sessionRevision;
     transition({ type: "SELECT" });
     view.hideHighlight();
-    resizeObserver?.observe(element);
+    resizeObserver?.observe(element2);
     refreshSelectionView(true);
-    view.focusTargetInstruction(target.id);
-    scheduleBrowserContextCollection(target, revision);
+    selectionOpen = true;
+    view.focusTargetInstruction(target2.id);
+    scheduleBrowserContextCollection(target2, revision);
     if (marker !== void 0) {
-      void loadSourceContext(target, revision);
+      void loadSourceContext(target2, revision);
     } else {
       view.announce(
         resolution.source.confidence === "probable" ? view.messages().announcements.sourceProbable : view.messages().announcements.sourceMissing
@@ -5061,7 +5397,7 @@ ${summary}`;
     if (state.status !== "selected" && state.status !== "inspecting") {
       return;
     }
-    const index = targets.findIndex((target) => target.id === targetId);
+    const index = targets.findIndex((target2) => target2.id === targetId);
     if (index < 0) {
       return;
     }
@@ -5087,10 +5423,12 @@ ${summary}`;
       }
       view.hideSelectionTemporarily();
       view.hideSelectionHighlights();
+      selectionSession.clear();
       view.announce(view.messages().announcements.allTargetsRemoved);
       return;
     }
     refreshSelectionView();
+    persistSelection();
     view.announce(view.messages().announcements.targetRemoved);
   }
   function refreshSelectedGeometry() {
@@ -5098,24 +5436,24 @@ ${summary}`;
       return;
     }
     const disconnected = targets.filter(
-      (target) => target.element !== void 0 && !target.element.isConnected
+      (target2) => target2.element !== void 0 && !target2.element.isConnected
     );
     if (disconnected.length > 0) {
-      if (state.status === "previewing") {
-        transition({ type: "BACK" });
-      }
-      for (const target of disconnected) {
-        removeTarget(target.id);
-      }
-      if (targets.length > 0) {
-        view.announce(view.messages().announcements.detachedTargetRemoved);
+      for (const target2 of disconnected) {
+        if (target2.element !== void 0) {
+          resizeObserver?.unobserve(target2.element);
+          target2.element = void 0;
+        }
       }
+      refreshSelectionView();
+      persistSelection();
+      view.announce(view.messages().announcements.detachedTargetPreserved);
       return;
     }
     refreshHighlights();
   }
   function handleOpenEditor(targetId) {
-    const current = targetId === void 0 ? activeTarget() : targets.find((target) => target.id === targetId);
+    const current = targetId === void 0 ? activeTarget() : targets.find((target2) => target2.id === targetId);
     if (state.status !== "selected" || current?.marker === void 0) {
       return;
     }
@@ -5147,13 +5485,14 @@ ${summary}`;
       return;
     }
     const targetId = event.target.dataset.targetInstructionId;
-    const target = targets.find((candidate) => candidate.id === targetId);
-    if (target === void 0) {
+    const target2 = targets.find((candidate) => candidate.id === targetId);
+    if (target2 === void 0) {
       return;
     }
-    target.instruction = event.target.value;
-    view.updateTargetInstruction(target.id, target.instruction);
+    target2.instruction = event.target.value;
+    view.updateTargetInstruction(target2.id, target2.instruction);
     view.setPreviewEnabled(canPreview());
+    persistSelection();
   }
   function handleOpenEditorButtonClick() {
     handleOpenEditor();
@@ -5246,7 +5585,7 @@ ${summary}`;
       "button[data-activate-target-id]"
     );
     const targetId = activateButton?.dataset.activateTargetId;
-    if (state.status !== "selected" || targetId === void 0 || !targets.some((target) => target.id === targetId)) {
+    if (state.status !== "selected" || targetId === void 0 || !targets.some((target2) => target2.id === targetId)) {
       return;
     }
     activeTargetId = targetId;
@@ -5304,6 +5643,12 @@ ${summary}`;
         subtree: true
       });
     }
+    if (selectionOpen && targets.length > 0) {
+      transition({ type: "RESTORE" });
+      agentWorkflow.beginSelection();
+      workflowSelectionActive = true;
+      refreshSelectionView(true);
+    }
     if (config.debug) {
       console.info(`[spotpatch:runtime] Mounted. Shortcut: ${config.shortcut}.`);
     }
@@ -5361,6 +5706,7 @@ ${summary}`;
       animationFrame = void 0;
     }
     clearCollectionTimers();
+    persistSelection();
     resizeObserver?.disconnect();
     mutationObserver?.disconnect();
     resizeObserver = void 0;
@@ -5383,10 +5729,10 @@ ${summary}`;
 // src/controller/bootstrap.ts
 var RUNTIME_INSTANCE_KEY = "__spotpatchRuntime__";
 function bootstrapSpotPatch(config) {
-  const target = globalThis;
-  target[RUNTIME_INSTANCE_KEY]?.dispose();
+  const target2 = globalThis;
+  target2[RUNTIME_INSTANCE_KEY]?.dispose();
   const controller = createController(config);
-  target[RUNTIME_INSTANCE_KEY] = controller;
+  target2[RUNTIME_INSTANCE_KEY] = controller;
   controller.mount();
 }
 export {