@spotpatch/runtime 1.0.0 → 1.1.0

package/dist/index.cjs

@@ -259,6 +259,9 @@ function readSuccessData(value) {
 function isCodeContext(value) {
   return isRecord2(value) && typeof value.relativePath === "string" && (value.language === "tsx" || value.language === "jsx") && typeof value.startLine === "number" && typeof value.endLine === "number" && typeof value.excerpt === "string" && (value.boundary === "component" || value.boundary === "nearby-lines");
 }
+function isEditorOpenResult(value) {
+  return isRecord2(value) && typeof value.editor === "string" && import_shared3.SPOTPATCH_EDITOR_PREFERENCES.includes(value.editor);
+}
 function deepFreezeUnknown(value) {
   if (!isRecord2(value) && !Array.isArray(value)) {
     return;
@@ -485,7 +488,11 @@ function createRuntimeApi(options) {
       return Object.freeze({ ...data });
     },
     async openEditor(request) {
-      await requestJson(import_shared3.SPOTPATCH_ENDPOINTS.openEditor, "POST", request);
+      const data = await requestJson(import_shared3.SPOTPATCH_ENDPOINTS.openEditor, "POST", request);
+      if (!isEditorOpenResult(data)) {
+        throw new RuntimeApiError();
+      }
+      return Object.freeze({ editor: data.editor });
     },
     async agentCapability(request) {
       return parseCapability(
@@ -2135,6 +2142,15 @@ var STATUS_ZH = Object.freeze({
   reverted: "\u5DF2\u64A4\u9500",
   failed: "\u5931\u8D25"
 });
+function editorName(editor, automatic) {
+  if (editor === "vscode") {
+    return "VS Code";
+  }
+  if (editor === "cursor") {
+    return "Cursor";
+  }
+  return automatic;
+}
 var ERROR_MESSAGES_EN = Object.freeze({
   [import_shared6.ERROR_CODES.INVALID_REQUEST]: "The Agent request was rejected as invalid.",
   [import_shared6.ERROR_CODES.INVALID_TOKEN]: "The local SpotPatch session expired.",
@@ -2270,7 +2286,12 @@ var UI_MESSAGES = Object.freeze({
     localeName: "EN",
     alternateLocaleName: "\u4E2D",
     switchLocale: "Switch interface language to Chinese",
-    brand: Object.freeze({ name: "SpotPatch", context: "Live context" }),
+    brand: Object.freeze({
+      name: "SpotPatch",
+      context: "Live context",
+      repository: "GitHub",
+      repositoryTitle: "Star SpotPatch on GitHub"
+    }),
     trigger: Object.freeze({
       select: "Select element",
       stop: "Stop selecting",
@@ -2322,7 +2343,8 @@ var UI_MESSAGES = Object.freeze({
     actions: Object.freeze({
       addElement: "Add element",
       reselect: "Start over",
-      openEditor: "Open in VS Code",
+      openEditor: (editor) => editor === "auto" ? "Open source" : `Open in ${editorName(editor, "editor")}`,
+      openTarget: (index, editor) => `Open target ${String(index)} in ${editorName(editor, "the detected editor")}`,
       preview: "Preview prompt",
       copy: "Copy prompt",
       back: "Back to edit"
@@ -2378,8 +2400,9 @@ var UI_MESSAGES = Object.freeze({
       detachedTargetRemoved: "A removed page element was dropped from the selection.",
       contextWarning: "Browser context collection completed with a warning.",
       contextCollected: "Browser context collected.",
-      editorOpened: "VS Code open request sent.",
-      editorFailed: "VS Code could not be opened.",
+      editorOpening: (editor) => `Opening ${editorName(editor, "the detected editor")}\u2026`,
+      editorOpened: (editor) => `Opened the source in ${editorName(editor, "the detected editor")}.`,
+      editorFailed: (editor) => `Could not open ${editorName(editor, "an editor")}. Start the editor or configure editor: "cursor" / "vscode".`,
       completeInstructions: "Add an instruction for every target and wait for context collection to finish.",
       promptCopied: "Prompt copied to the clipboard.",
       clipboardUnavailable: "Clipboard access is unavailable. Select the prompt manually.",
@@ -2392,7 +2415,12 @@ var UI_MESSAGES = Object.freeze({
     localeName: "\u4E2D",
     alternateLocaleName: "EN",
     switchLocale: "\u5C06\u754C\u9762\u8BED\u8A00\u5207\u6362\u4E3A\u82F1\u6587",
-    brand: Object.freeze({ name: "SpotPatch", context: "\u5B9E\u65F6\u4E0A\u4E0B\u6587" }),
+    brand: Object.freeze({
+      name: "SpotPatch",
+      context: "\u5B9E\u65F6\u4E0A\u4E0B\u6587",
+      repository: "GitHub",
+      repositoryTitle: "\u5728 GitHub \u4E0A Star SpotPatch"
+    }),
     trigger: Object.freeze({
       select: "\u9009\u62E9\u5143\u7D20",
       stop: "\u505C\u6B62\u9009\u62E9",
@@ -2444,7 +2472,8 @@ var UI_MESSAGES = Object.freeze({
     actions: Object.freeze({
       addElement: "\u6DFB\u52A0\u5143\u7D20",
       reselect: "\u91CD\u65B0\u5F00\u59CB",
-      openEditor: "\u5728 VS Code \u4E2D\u6253\u5F00",
+      openEditor: (editor) => editor === "auto" ? "\u6253\u5F00\u6E90\u7801" : `\u5728 ${editorName(editor, "\u7F16\u8F91\u5668")} \u4E2D\u6253\u5F00`,
+      openTarget: (index, editor) => `\u5728${editorName(editor, "\u81EA\u52A8\u68C0\u6D4B\u7684\u7F16\u8F91\u5668")}\u4E2D\u6253\u5F00\u76EE\u6807 ${String(index)} \u7684\u6E90\u7801`,
       preview: "\u9884\u89C8 Prompt",
       copy: "\u590D\u5236 Prompt",
       back: "\u8FD4\u56DE\u7F16\u8F91"
@@ -2500,8 +2529,9 @@ var UI_MESSAGES = Object.freeze({
       detachedTargetRemoved: "\u9875\u9762\u4E2D\u7684\u76EE\u6807\u5DF2\u5378\u8F7D\uFF0C\u5DF2\u4ECE\u5F53\u524D\u9009\u62E9\u4E2D\u79FB\u9664\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",
-      editorOpened: "\u5DF2\u53D1\u9001 VS Code \u6253\u5F00\u8BF7\u6C42\u3002",
-      editorFailed: "\u65E0\u6CD5\u6253\u5F00 VS Code\u3002",
+      editorOpening: (editor) => `\u6B63\u5728\u6253\u5F00${editorName(editor, "\u81EA\u52A8\u68C0\u6D4B\u7684\u7F16\u8F91\u5668")}\u2026\u2026`,
+      editorOpened: (editor) => `\u5DF2\u5728${editorName(editor, "\u81EA\u52A8\u68C0\u6D4B\u7684\u7F16\u8F91\u5668")}\u4E2D\u6253\u5F00\u6E90\u7801\u3002`,
+      editorFailed: (editor) => `\u65E0\u6CD5\u6253\u5F00${editorName(editor, "\u7F16\u8F91\u5668")}\u3002\u8BF7\u5148\u542F\u52A8\u7F16\u8F91\u5668\uFF0C\u6216\u914D\u7F6E editor: "cursor" / "vscode"\u3002`,
       completeInstructions: "\u8BF7\u4E3A\u6BCF\u4E2A\u76EE\u6807\u586B\u5199\u4FEE\u6539\u8BF4\u660E\uFF0C\u5E76\u7B49\u5F85\u4E0A\u4E0B\u6587\u91C7\u96C6\u5B8C\u6210\u3002",
       promptCopied: "Prompt \u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F\u3002",
       clipboardUnavailable: "\u65E0\u6CD5\u8BBF\u95EE\u526A\u8D34\u677F\uFF0C\u8BF7\u624B\u52A8\u9009\u62E9\u5E76\u590D\u5236 Prompt\u3002",
@@ -2796,6 +2826,28 @@ function createStyles(document) {
       gap: 8px;
       flex: none;
     }
+    .spotpatch-repository {
+      display: inline-flex;
+      height: 30px;
+      align-items: center;
+      gap: 5px;
+      border: 1px solid rgb(68 202 224 / 20%);
+      border-radius: 9px;
+      padding: 0 10px;
+      color: #bcecf2;
+      background: rgb(8 145 178 / 7%);
+      font-size: 11px;
+      font-weight: 680;
+      text-decoration: none;
+      transition: border-color 150ms ease, color 150ms ease, background 150ms ease, transform 150ms ease;
+    }
+    .spotpatch-repository::after { content: "\u2197"; font-size: 10px; }
+    .spotpatch-repository:hover {
+      border-color: rgb(68 202 224 / 42%);
+      color: #e6fbff;
+      background: rgb(8 145 178 / 12%);
+      transform: translateY(-1px);
+    }
     .spotpatch-locale {
       min-width: 38px;
       height: 30px;
@@ -2939,7 +2991,7 @@ function createStyles(document) {
     }
     .spotpatch-target-summary {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) 34px;
+      grid-template-columns: minmax(0, 1fr) 34px 34px;
       align-items: stretch;
       gap: 4px;
       padding: 5px;
@@ -2990,6 +3042,7 @@ function createStyles(document) {
       white-space: nowrap;
     }
     .spotpatch-target-state[data-complete="false"] { color: #f5c97a; background: rgb(245 158 11 / 9%); }
+    .spotpatch-target-open,
     .spotpatch-target-remove {
       display: inline-grid;
       width: 34px;
@@ -3003,6 +3056,8 @@ function createStyles(document) {
       background: transparent;
       cursor: pointer;
     }
+    .spotpatch-target-open { color: #79d9e7; }
+    .spotpatch-target-open:hover:not(:disabled) { border-color: rgb(68 202 224 / 30%); color: #c8f7ff; background: rgb(8 145 178 / 11%); }
     .spotpatch-target-remove:hover:not(:disabled) { border-color: rgb(251 113 133 / 24%); color: #fda4af; background: rgb(127 29 29 / 12%); }
     .spotpatch-target-editor {
       border-top: 1px solid rgb(255 255 255 / 7%);
@@ -3112,6 +3167,30 @@ function createStyles(document) {
       border-top: 1px solid rgb(255 255 255 / 8%);
       background: rgb(8 12 22 / 82%);
     }
+    .spotpatch-editor-feedback {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      gap: 7px;
+      margin-bottom: 1px;
+      color: #9ca5b5;
+      font-size: 11px;
+      line-height: 1.45;
+    }
+    .spotpatch-editor-feedback[hidden] { display: none; }
+    .spotpatch-editor-feedback::before {
+      width: 6px;
+      height: 6px;
+      flex: none;
+      border-radius: 999px;
+      background: #94a3b8;
+      content: "";
+    }
+    .spotpatch-editor-feedback[data-state="opening"]::before { background: #38bdf8; }
+    .spotpatch-editor-feedback[data-state="success"] { color: #9fe3c4; }
+    .spotpatch-editor-feedback[data-state="success"]::before { background: #34d399; }
+    .spotpatch-editor-feedback[data-state="error"] { color: #fecaca; }
+    .spotpatch-editor-feedback[data-state="error"]::before { background: #fb7185; }
     .spotpatch-actions button {
       display: inline-flex;
       min-height: 40px;
@@ -3143,6 +3222,8 @@ function createStyles(document) {
     .spotpatch-actions .spotpatch-primary::after { margin-left: 8px; content: "\u2197"; font-size: 12px; }
     .spotpatch-actions button:disabled { cursor: not-allowed; opacity: .4; transform: none; }
     .spotpatch-actions button:focus-visible,
+    .spotpatch-repository:focus-visible,
+    .spotpatch-target-open:focus-visible,
     .spotpatch-target-remove:focus-visible,
     .spotpatch-close:focus-visible,
     .spotpatch-trigger:focus-visible,
@@ -3175,6 +3256,8 @@ function createStyles(document) {
       .spotpatch-actions { padding-left: 16px; padding-right: 16px; }
       .spotpatch-target-select { grid-template-columns: 32px minmax(0, 1fr); }
       .spotpatch-target-state { display: none; }
+      .spotpatch-repository { width: 30px; overflow: hidden; padding: 0; justify-content: center; color: transparent; }
+      .spotpatch-repository::after { color: #bcecf2; content: "\u2197"; }
     }
     ${AGENT_PANEL_STYLES}
   `;
@@ -3184,7 +3267,7 @@ function summaryLine(summary, prefix) {
   const line = summary.split("\n").find((candidate) => candidate.startsWith(`${prefix}: `));
   return line?.slice(prefix.length + 2).trim();
 }
-function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: false }), localePreference = "auto") {
+function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: false }), localePreference = "auto", editorPreference = "auto") {
   const localizer = createUiLocalizer(document, localePreference);
   let messages = localizer.messages();
   const host = document.createElement("spotpatch-root");
@@ -3234,9 +3317,14 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   brand.append(createBrandMark(document), brandCopy);
   const headerControls = createMarkedElement(document, "span");
   headerControls.className = "spotpatch-header-controls";
+  const repositoryLink = createMarkedElement(document, "a");
+  repositoryLink.className = "spotpatch-repository";
+  repositoryLink.href = import_shared7.SPOTPATCH_REPOSITORY_URL;
+  repositoryLink.target = "_blank";
+  repositoryLink.rel = "noopener noreferrer";
   const localeButton = createButton(document, "", "spotpatch-locale");
   const closeButton = createButton(document, "\xD7", "spotpatch-close");
-  headerControls.append(localeButton, closeButton);
+  headerControls.append(repositoryLink, localeButton, closeButton);
   brandRow.append(brand, headerControls);
   const title = createMarkedElement(document, "h2");
   title.id = "spotpatch-selection-title";
@@ -3300,9 +3388,18 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   body.append(selectionPanel, previewPanel);
   const actions = createMarkedElement(document, "footer");
   actions.className = "spotpatch-actions";
+  const editorFeedback = createMarkedElement(document, "div");
+  editorFeedback.className = "spotpatch-editor-feedback";
+  editorFeedback.dataset.state = "idle";
+  editorFeedback.setAttribute("role", "status");
+  editorFeedback.setAttribute("aria-live", "polite");
+  editorFeedback.hidden = true;
   const addTargetButton = createButton(document, messages.actions.addElement);
   const reselectButton = createButton(document, messages.actions.reselect);
-  const openEditorButton = createButton(document, messages.actions.openEditor);
+  const openEditorButton = createButton(
+    document,
+    messages.actions.openEditor(editorPreference)
+  );
   const previewButton = createButton(
     document,
     messages.actions.preview,
@@ -3311,6 +3408,7 @@ 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,
     agentPanel.runButton,
     previewButton,
     agentPanel.testButton,
@@ -3348,6 +3446,23 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   let editingEnabled = true;
   let currentTargets = [];
   let currentMaximum = 0;
+  let currentEditorFeedbackState = "idle";
+  function defaultEditorFeedback(state) {
+    if (state === "opening") {
+      return messages.announcements.editorOpening(editorPreference);
+    }
+    if (state === "success") {
+      return messages.announcements.editorOpened(editorPreference);
+    }
+    return state === "error" ? messages.announcements.editorFailed(editorPreference) : "";
+  }
+  function renderEditorStatus(state, message = defaultEditorFeedback(state)) {
+    currentEditorFeedbackState = state;
+    editorFeedback.dataset.state = state;
+    editorFeedback.hidden = state === "idle";
+    editorFeedback.textContent = message;
+    placeDialog();
+  }
   function statusText(target) {
     if (target.status === "ready") {
       return messages.targets.statusReady;
@@ -3426,12 +3541,20 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       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.setAttribute(
+        "aria-label",
+        messages.actions.openTarget(index + 1, editorPreference)
+      );
+      open.title = messages.actions.openTarget(index + 1, editorPreference);
       const remove = createButton(document, "\xD7", "spotpatch-target-remove");
       remove.dataset.removeTargetId = target.id;
       remove.disabled = !editingEnabled;
       remove.setAttribute("aria-label", messages.targets.remove(index + 1));
       remove.title = messages.targets.removeTitle;
-      targetSummary.append(select, remove);
+      targetSummary.append(select, open, remove);
       item.append(targetSummary);
       if (target.active) {
         const editor = createMarkedElement(document, "label");
@@ -3609,6 +3732,9 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     messages = localizer.messages();
     brandName.textContent = messages.brand.name;
     brandContext.textContent = messages.brand.context;
+    repositoryLink.textContent = messages.brand.repository;
+    repositoryLink.title = messages.brand.repositoryTitle;
+    repositoryLink.setAttribute("aria-label", messages.brand.repositoryTitle);
     localeButton.textContent = messages.alternateLocaleName;
     localeButton.title = messages.switchLocale;
     localeButton.setAttribute("aria-label", messages.switchLocale);
@@ -3620,13 +3746,14 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     promptOutput.setAttribute("aria-label", messages.diagnostics.promptAriaLabel);
     addTargetButton.textContent = messages.actions.addElement;
     reselectButton.textContent = messages.actions.reselect;
-    openEditorButton.textContent = messages.actions.openEditor;
+    openEditorButton.textContent = messages.actions.openEditor(editorPreference);
     previewButton.textContent = messages.actions.preview;
     copyButton.textContent = messages.actions.copy;
     backButton.textContent = messages.actions.back;
     triggerButton.title = messages.trigger.title(shortcut);
     triggerButton.textContent = currentStatus === "inspecting" ? messages.trigger.stop : messages.trigger.select;
     renderPanelStatus(currentStatus);
+    renderEditorStatus(currentEditorFeedbackState);
     if (currentTargets.length > 0) {
       renderTargets(currentTargets, currentMaximum);
     } else {
@@ -3657,6 +3784,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     targetList,
     reselectButton,
     openEditorButton,
+    repositoryLink,
     previewButton,
     copyButton,
     backButton,
@@ -3676,6 +3804,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       triggerButton.textContent = inspecting ? messages.trigger.stop : messages.trigger.select;
       renderPanelStatus(status);
     },
+    renderEditorStatus,
     showHighlight(rect, label) {
       currentRect = rect;
       highlight.hidden = false;
@@ -3719,6 +3848,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       currentTargets = [];
       currentMaximum = 0;
       currentSummaryText = "";
+      renderEditorStatus("idle");
       targetCount.textContent = messages.targets.count(0, 0);
       targetComplete.textContent = messages.targets.complete(0, 0);
       targetLabel.textContent = messages.context.selectedElement;
@@ -3762,7 +3892,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
       ).forEach((control) => {
         control.disabled = !enabled;
       });
-      openEditorButton.disabled = !enabled || !currentCanOpenEditor;
+      openEditorButton.disabled = !currentCanOpenEditor;
       previewButton.disabled = !enabled || !currentCanPreview;
       agentPanel.setEditingEnabled(enabled);
       placeDialog();
@@ -4250,7 +4380,13 @@ function resolveBrowserDependencies(dependencies) {
 }
 function createController(config, dependencies = {}) {
   const browser = resolveBrowserDependencies(dependencies);
-  const view = dependencies.view ?? createRuntimeView(browser.document, config.shortcut, config.ai, config.locale);
+  const view = dependencies.view ?? createRuntimeView(
+    browser.document,
+    config.shortcut,
+    config.ai,
+    config.locale,
+    config.editor
+  );
   const api = dependencies.api ?? createRuntimeApi({
     apiBase: config.apiBase,
     fetch: browser.window.fetch.bind(browser.window),
@@ -4281,6 +4417,7 @@ function createController(config, dependencies = {}) {
   let activeTargetId;
   let targetSequence = 0;
   let sessionRevision = 0;
+  let editorRequestRevision = 0;
   let addingTarget = false;
   let previewPrompt = "";
   let previousFocus;
@@ -4355,6 +4492,7 @@ ${summary}`;
         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
@@ -4498,7 +4636,6 @@ ${summary}`;
     resizeObserver?.disconnect();
     for (const target of targets) {
       target.element = void 0;
-      target.marker = void 0;
     }
     view.hideHighlight();
     view.hideSelectionHighlights();
@@ -4775,24 +4912,37 @@ ${summary}`;
     }
     refreshHighlights();
   }
-  function handleOpenEditor() {
-    const current = activeTarget();
+  function handleOpenEditor(targetId) {
+    const current = targetId === void 0 ? activeTarget() : targets.find((target) => target.id === targetId);
     if (state.status !== "selected" || current?.marker === void 0) {
       return;
     }
+    if (activeTargetId !== current.id) {
+      activeTargetId = current.id;
+      refreshSelectionView();
+    }
     const marker = current.marker;
+    const selectionRevision = sessionRevision;
+    const requestRevision = ++editorRequestRevision;
     transition({ type: "OPEN_EDITOR" });
+    const openingMessage = view.messages().announcements.editorOpening(config.editor);
+    view.renderEditorStatus("opening", openingMessage);
+    view.announce(openingMessage);
     void api.openEditor({
       fileId: marker.fileId,
       line: marker.line,
       column: marker.column
-    }).then(() => {
-      if (mounted && state.status === "selected") {
-        view.announce(view.messages().announcements.editorOpened);
+    }).then((result) => {
+      if (mounted && state.status === "selected" && selectionRevision === sessionRevision && requestRevision === editorRequestRevision && activeTargetId === current.id && targets.includes(current)) {
+        const message = view.messages().announcements.editorOpened(result.editor);
+        view.renderEditorStatus("success", message);
+        view.announce(message);
       }
     }).catch(() => {
-      if (mounted && state.status === "selected") {
-        view.announce(view.messages().announcements.editorFailed);
+      if (mounted && state.status === "selected" && selectionRevision === sessionRevision && requestRevision === editorRequestRevision && activeTargetId === current.id && targets.includes(current)) {
+        const message = view.messages().announcements.editorFailed(config.editor);
+        view.renderEditorStatus("error", message);
+        view.announce(message);
       }
     });
   }
@@ -4809,6 +4959,9 @@ ${summary}`;
     view.updateTargetInstruction(target.id, target.instruction);
     view.setPreviewEnabled(canPreview());
   }
+  function handleOpenEditorButtonClick() {
+    handleOpenEditor();
+  }
   function handleTargetListKeydown(event) {
     if (config.ai.enabled && state.status === "selected" && event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
       event.preventDefault();
@@ -4886,6 +5039,13 @@ ${summary}`;
       removeTarget(removeButton.dataset.removeTargetId);
       return;
     }
+    const openButton = eventTarget.closest(
+      "button[data-open-target-id]"
+    );
+    if (openButton?.dataset.openTargetId !== void 0) {
+      handleOpenEditor(openButton.dataset.openTargetId);
+      return;
+    }
     const activateButton = eventTarget.closest(
       "button[data-activate-target-id]"
     );
@@ -4917,7 +5077,7 @@ ${summary}`;
     view.targetList.addEventListener("click", handleTargetListClick);
     view.targetList.addEventListener("input", handleTargetListInput);
     view.targetList.addEventListener("keydown", handleTargetListKeydown);
-    view.openEditorButton.addEventListener("click", handleOpenEditor);
+    view.openEditorButton.addEventListener("click", handleOpenEditorButtonClick);
     view.previewButton.addEventListener("click", handlePreview);
     view.copyButton.addEventListener("click", handleCopy);
     view.backButton.addEventListener("click", handleBack);
@@ -4977,7 +5137,7 @@ ${summary}`;
     view.targetList.removeEventListener("click", handleTargetListClick);
     view.targetList.removeEventListener("input", handleTargetListInput);
     view.targetList.removeEventListener("keydown", handleTargetListKeydown);
-    view.openEditorButton.removeEventListener("click", handleOpenEditor);
+    view.openEditorButton.removeEventListener("click", handleOpenEditorButtonClick);
     view.previewButton.removeEventListener("click", handlePreview);
     view.copyButton.removeEventListener("click", handleCopy);
     view.backButton.removeEventListener("click", handleBack);