@spotpatch/runtime 1.3.0 → 1.5.0

package/dist/index.cjs

@@ -3,9 +3,9 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
+var __export = (target2, all) => {
   for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+    __defProp(target2, name, { get: all[name], enumerable: true });
 };
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
@@ -31,45 +31,46 @@ var import_shared9 = require("@spotpatch/shared");
 
 // src/annotation/create-annotation.ts
 var import_shared = require("@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) {
@@ -78,7 +79,7 @@ function createAnnotation(input) {
       `SpotPatch annotations require between 1 and ${String(import_shared.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 > import_shared.MAX_TARGET_INSTRUCTION_CHARACTERS
   ) || instructions.reduce((total, instruction) => total + instruction.length, 0) > import_shared.MAX_ANNOTATION_INSTRUCTION_CHARACTERS) {
@@ -265,10 +266,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) {
@@ -340,9 +341,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();
   }
@@ -385,13 +386,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
       }))
     }
   };
@@ -682,12 +683,12 @@ function contextCharacterCount(classNames, inlineStyle, rules, computed, warning
 function stylesheetSource(sheet, baseUrl) {
   return sheet.href === null ? void 0 : (0, import_shared4.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;
@@ -697,7 +698,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 ") }
           })
         );
@@ -707,9 +708,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
@@ -717,11 +718,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());
@@ -859,11 +860,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;
@@ -878,28 +879,28 @@ function openingTag(element) {
 function normalizedText(value) {
   return (0, import_shared4.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;
@@ -918,9 +919,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;
@@ -941,26 +942,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);
@@ -979,15 +980,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({
@@ -1006,11 +1007,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);
@@ -1060,15 +1061,15 @@ function unionRects(rects) {
     height: bottom - top
   });
 }
-function getElementRect(element, view) {
-  const display = view.getComputedStyle(element).display;
+function getElementRect(element2, view) {
+  const display = view.getComputedStyle(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());
 }
 
 // src/ui/ui-constants.ts
@@ -1079,32 +1080,32 @@ 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);
+function hasVisibleArea(element2, view) {
+  const style = view.getComputedStyle(element2);
   if (style.display === "none" || style.visibility === "hidden") {
     return false;
   }
-  const rect = element.getBoundingClientRect();
+  const rect = element2.getBoundingClientRect();
   return rect.width > 0 && rect.height > 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
@@ -1183,10 +1184,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;
   }
@@ -1205,10 +1206,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"));
@@ -1221,41 +1222,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}: ${(0, import_shared4.redactSensitiveText)(target.react.version)}`],
-    ...target.react.componentName === void 0 ? [] : [
-      `- ${messages.component}: ${(0, import_shared4.redactSensitiveText)(target.react.componentName)}`
+    `- ${messages.adapter}: ${target2.react.supported ? messages.supported : messages.unsupported}`,
+    ...target2.react.version === void 0 ? [] : [`- ${messages.reactVersion}: ${(0, import_shared4.redactSensitiveText)(target2.react.version)}`],
+    ...target2.react.componentName === void 0 ? [] : [
+      `- ${messages.component}: ${(0, import_shared4.redactSensitiveText)(target2.react.componentName)}`
     ],
     ...draft.reactStack.length === 0 ? [] : [
       `- ${messages.stack}: ${draft.reactStack.map(import_shared4.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,
     (0, import_shared4.redactSensitiveText)(draft.codeLines.join("\n"))
   )}`;
   return [
     `### ${messages.target(index + 1)}`,
     `#### ${messages.requestedChange}`,
     draft.instruction,
+    ...target2.page === void 0 ? [] : [
+      `#### ${messages.pageEnvironment}`,
+      `- ${messages.url}: <${(0, import_shared4.sanitizeUrl)(target2.page.url, target2.page.url)}>
+- ${messages.pathname}: ${(0, import_shared4.redactSensitiveText)(target2.page.pathname)}
+- ${messages.title}: ${(0, import_shared4.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", (0, import_shared4.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) => `- ${(0, import_shared4.redactSensitiveText)(warning)}`).join("\n")
   ].join("\n\n");
@@ -1271,19 +1278,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) {
@@ -1295,9 +1302,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();
@@ -1306,15 +1313,15 @@ function shrinkCode(target, draft) {
   }
   return true;
 }
-function createTargetDraft(target) {
+function createTargetDraft(target2) {
   return {
-    instruction: (0, import_shared4.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: (0, import_shared4.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) {
@@ -1343,9 +1350,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;
       }
     }
@@ -1354,15 +1361,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 ?? (0, import_shared4.redactSensitiveText)(target.instruction)}`,
-      `- ${messages.file}: ${sourceLocation(target, messages)}`,
+      `- ${messages.requestedChange}: ${targetDraft?.instruction ?? (0, import_shared4.redactSensitiveText)(target2.instruction)}`,
+      `- ${messages.file}: ${sourceLocation(target2, messages)}`,
       ...component === void 0 ? [] : [`- ${messages.component}: ${(0, import_shared4.redactSensitiveText)(component)}`],
-      `- ${messages.element}: ${(0, import_shared4.redactSensitiveText)(openingTag2(targetDraft?.dom ?? target.element.sanitizedHtml, messages.unavailable))}`
+      `- ${messages.element}: ${(0, import_shared4.redactSensitiveText)(openingTag2(targetDraft?.dom ?? target2.element.sanitizedHtml, messages.unavailable))}`
     ].join("\n");
   });
   return [
@@ -1420,7 +1427,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) {
@@ -1472,17 +1482,132 @@ 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
 var import_shared5 = require("@spotpatch/shared");
 var EMPTY_REACT_CONTEXT = Object.freeze({
   supported: false,
   componentStack: Object.freeze([])
 });
-function directMarker(element) {
-  return (0, import_shared5.parseSourceMarker)(element.getAttribute(import_shared5.SOURCE_MARKER_ATTRIBUTE));
+function directMarker(element2) {
+  return (0, import_shared5.parseSourceMarker)(element2.getAttribute(import_shared5.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) {
@@ -1504,21 +1629,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?.();
@@ -1526,26 +1651,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;
@@ -1559,9 +1684,9 @@ var import_shared7 = require("@spotpatch/shared");
 
 // 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");
@@ -2178,68 +2303,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;
 }
 
@@ -2254,32 +2392,32 @@ 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 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({
@@ -2596,7 +2734,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",
@@ -2732,7 +2870,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",
@@ -3627,11 +3765,11 @@ 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 instructionInput(targetId) {
     const inputs = targetList.querySelectorAll(
@@ -3648,14 +3786,14 @@ 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
     );
     targetCount.textContent = messages.targets.count(targets.length, maximum);
@@ -3675,18 +3813,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);
@@ -3694,54 +3832,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,
           import_shared7.MAX_TARGET_INSTRUCTION_CHARACTERS
         );
         editorHead.append(editorLabel, characterCount);
         const input = createMarkedElement(document, "textarea");
         input.rows = 4;
         input.maxLength = import_shared7.MAX_TARGET_INSTRUCTION_CHARACTERS;
-        input.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);
@@ -3758,7 +3896,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")
@@ -3780,11 +3918,11 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       );
     }
     targetComplete.textContent = messages.targets.complete(
-      currentTargets.filter((target) => target.instruction.trim().length > 0).length,
+      currentTargets.filter((target2) => target2.instruction.trim().length > 0).length,
       currentTargets.length
     );
     const instructionCharacters = currentTargets.reduce(
-      (total, target) => total + target.instruction.trim().length,
+      (total, target2) => total + target2.instruction.trim().length,
       0
     );
     const instructionLimitExceeded = instructionCharacters > import_shared7.MAX_ANNOTATION_INSTRUCTION_CHARACTERS;
@@ -3799,18 +3937,18 @@ 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);
     }
@@ -3842,8 +3980,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}`;
@@ -4120,7 +4258,7 @@ function sourceLocation2(resolution, context, messages) {
 function createSelectionSummary(input, messages) {
   const lines = [
     `SpotPatch: ${input.spotPatchVersion}`,
-    `Vite: ${input.viteVersion}`,
+    `${input.framework === "next" ? "Next.js" : "Vite"}: ${input.frameworkVersion}`,
     `${messages.source}: ${sourceLocation2(input.resolution, input.code, messages)}`,
     `${messages.confidence}: ${input.resolution.source.confidence} (${messages.confidenceLabels[input.resolution.source.confidence]})`,
     `${messages.origin}: ${input.resolution.source.origin}`
@@ -4552,25 +4690,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 +4735,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 ?? (0, import_react_adapter.createReact18Adapter)({
       maxComponentDepth: config.budget.maxComponentDepth
@@ -4614,9 +4754,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,50 +4788,83 @@ 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 <= import_shared9.MAX_ANNOTATION_INSTRUCTION_CHARACTERS && 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,
-          spotPatchVersion: config.spotPatchVersion,
-          viteVersion: config.viteVersion
+          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 [];
       }
       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: getElementRect(target2.element, browser.window),
+          active: target2.id === activeTargetId
         }
       ];
     });
@@ -4689,14 +4879,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
     );
@@ -4714,21 +4904,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
       };
     });
@@ -4740,8 +4931,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) {
@@ -4763,10 +4954,13 @@ ${summary}`;
     resizeObserver?.disconnect();
     targets = [];
     activeTargetId = void 0;
+    selectionOpen = false;
+    workflowSelectionActive = false;
     addingTarget = false;
     previewPrompt = "";
     view.hideSelection();
     view.hideSelectionHighlights();
+    selectionSession.clear();
     restoreFocus();
   }
   function close() {
@@ -4778,7 +4972,11 @@ ${summary}`;
       transition({ type: "BACK" });
       transition({ type: "CLOSE" });
     }
-    releaseSelection();
+    selectionOpen = false;
+    persistSelection();
+    view.hideSelection();
+    view.hideSelectionHighlights();
+    restoreFocus();
     view.hideHighlight();
   }
   function cancelAddTarget() {
@@ -4802,6 +5000,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);
@@ -4835,12 +5045,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({
@@ -4853,8 +5064,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;
     }
@@ -4865,16 +5076,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")) {
@@ -4883,61 +5096,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;
@@ -4961,13 +5175,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,
@@ -4975,18 +5191,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
@@ -5060,7 +5277,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;
     }
@@ -5086,10 +5303,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() {
@@ -5097,24 +5316,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;
     }
@@ -5146,13 +5365,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();
@@ -5245,7 +5465,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;
@@ -5303,6 +5523,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}.`);
     }
@@ -5360,6 +5586,7 @@ ${summary}`;
       animationFrame = void 0;
     }
     clearCollectionTimers();
+    persistSelection();
     resizeObserver?.disconnect();
     mutationObserver?.disconnect();
     resizeObserver = void 0;
@@ -5382,10 +5609,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();
 }
 // Annotate the CommonJS export names for ESM import in node: