@spotpatch/runtime 1.0.0 → 1.1.1

package/dist/index.cjs

@@ -485,7 +485,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 (!isRecord2(data) || data.editor !== "auto" && data.editor !== "vscode" && data.editor !== "cursor") {
+        throw new RuntimeApiError();
+      }
+      return Object.freeze({ editor: data.editor });
     },
     async agentCapability(request) {
       return parseCapability(
@@ -2270,7 +2274,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 \u2197",
+      repositoryTitle: "Star SpotPatch on GitHub"
+    }),
     trigger: Object.freeze({
       select: "Select element",
       stop: "Stop selecting",
@@ -2322,7 +2331,8 @@ var UI_MESSAGES = Object.freeze({
     actions: Object.freeze({
       addElement: "Add element",
       reselect: "Start over",
-      openEditor: "Open in VS Code",
+      openEditor: "Open source",
+      openTarget: (index) => `Open source for target ${String(index)}`,
       preview: "Preview prompt",
       copy: "Copy prompt",
       back: "Back to edit"
@@ -2378,8 +2388,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: "Opening source\u2026",
+      editorOpened: "Source opened in the editor.",
+      editorFailed: "Could not open the editor. Start it or configure editor.",
       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 +2403,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 \u2197",
+      repositoryTitle: "\u5728 GitHub \u4E0A Star SpotPatch"
+    }),
     trigger: Object.freeze({
       select: "\u9009\u62E9\u5143\u7D20",
       stop: "\u505C\u6B62\u9009\u62E9",
@@ -2444,7 +2460,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: "\u6253\u5F00\u6E90\u7801",
+      openTarget: (index) => `\u6253\u5F00\u76EE\u6807 ${String(index)} \u7684\u6E90\u7801`,
       preview: "\u9884\u89C8 Prompt",
       copy: "\u590D\u5236 Prompt",
       back: "\u8FD4\u56DE\u7F16\u8F91"
@@ -2500,8 +2517,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: "\u6B63\u5728\u6253\u5F00\u6E90\u7801\u2026\u2026",
+      editorOpened: "\u6E90\u7801\u5DF2\u5728\u7F16\u8F91\u5668\u4E2D\u6253\u5F00\u3002",
+      editorFailed: "\u65E0\u6CD5\u6253\u5F00\u7F16\u8F91\u5668\u3002\u8BF7\u5148\u542F\u52A8\u7F16\u8F91\u5668\u6216\u68C0\u67E5 editor \u914D\u7F6E\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,14 +2814,27 @@ function createStyles(document) {
       gap: 8px;
       flex: none;
     }
-    .spotpatch-locale {
-      min-width: 38px;
+    .spotpatch-repository,
+    .spotpatch-locale,
+    .spotpatch-close {
       height: 30px;
       border: 1px solid rgb(255 255 255 / 11%);
       border-radius: 9px;
+      background: rgb(255 255 255 / 4%);
+    }
+    .spotpatch-repository {
+      display: inline-flex;
+      align-items: center;
+      padding: 0 10px;
+      color: #bcecf2;
+      font-size: 11px;
+      font-weight: 680;
+      text-decoration: none;
+    }
+    .spotpatch-locale {
+      min-width: 38px;
       padding: 0 9px;
       color: #c5cad5;
-      background: rgb(255 255 255 / 4%);
       cursor: pointer;
       font-size: 12px;
       font-weight: 650;
@@ -2811,20 +2842,17 @@ function createStyles(document) {
     .spotpatch-close {
       display: inline-grid;
       width: 30px;
-      height: 30px;
       padding: 0;
       place-items: center;
-      border: 1px solid rgb(255 255 255 / 11%);
-      border-radius: 9px;
       color: #9da5b4;
-      background: rgb(255 255 255 / 4%);
       cursor: pointer;
       font-size: 17px;
       line-height: 1;
       transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
     }
     .spotpatch-close:hover,
-    .spotpatch-locale:hover { border-color: rgb(129 112 247 / 45%); color: #fff; background: rgb(109 93 246 / 10%); }
+    .spotpatch-locale:hover,
+    .spotpatch-repository:hover { border-color: rgb(129 112 247 / 45%); color: #fff; background: rgb(109 93 246 / 10%); }
     .spotpatch-title {
       margin: 0;
       color: #fff;
@@ -2874,10 +2902,14 @@ function createStyles(document) {
       background: #f59e0b;
       content: "";
     }
-    .spotpatch-context-state[data-state="ready"] { color: #9fe3c4; }
-    .spotpatch-context-state[data-state="ready"]::before { background: #34d399; }
-    .spotpatch-context-state[data-state="warning"] { color: #fecaca; }
-    .spotpatch-context-state[data-state="warning"]::before { background: #fb7185; }
+    .spotpatch-context-state[data-state="ready"],
+    .spotpatch-editor-feedback[data-state="success"] { color: #9fe3c4; }
+    .spotpatch-context-state[data-state="ready"]::before,
+    .spotpatch-editor-feedback[data-state="success"]::before { background: #34d399; }
+    .spotpatch-context-state[data-state="warning"],
+    .spotpatch-editor-feedback[data-state="error"] { color: #fecaca; }
+    .spotpatch-context-state[data-state="warning"]::before,
+    .spotpatch-editor-feedback[data-state="error"]::before { background: #fb7185; }
     .spotpatch-body {
       min-height: 0;
       overflow: auto;
@@ -2939,7 +2971,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 +3022,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 +3036,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 +3147,10 @@ function createStyles(document) {
       border-top: 1px solid rgb(255 255 255 / 8%);
       background: rgb(8 12 22 / 82%);
     }
+    .spotpatch-editor-feedback {
+      flex-basis: 100%;
+      white-space: normal;
+    }
     .spotpatch-actions button {
       display: inline-flex;
       min-height: 40px;
@@ -3143,6 +3182,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,
@@ -3234,9 +3275,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,6 +3346,12 @@ 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-context-state 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);
@@ -3311,6 +3363,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 +3401,14 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
   let editingEnabled = true;
   let currentTargets = [];
   let currentMaximum = 0;
+  let currentEditorFeedbackState = "idle";
+  function renderEditorStatus(state) {
+    currentEditorFeedbackState = state;
+    editorFeedback.dataset.state = state;
+    editorFeedback.hidden = state === "idle";
+    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") {
       return messages.targets.statusReady;
@@ -3426,12 +3487,17 @@ 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));
+      open.title = messages.actions.openTarget(index + 1);
       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 +3675,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);
@@ -3627,6 +3696,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     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 +3727,7 @@ function createRuntimeView(document, shortcut, ai = Object.freeze({ enabled: fal
     targetList,
     reselectButton,
     openEditorButton,
+    repositoryLink,
     previewButton,
     copyButton,
     backButton,
@@ -3676,6 +3747,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 +3791,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 +3835,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();
@@ -4281,6 +4354,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 +4429,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 +4573,6 @@ ${summary}`;
     resizeObserver?.disconnect();
     for (const target of targets) {
       target.element = void 0;
-      target.marker = void 0;
     }
     view.hideHighlight();
     view.hideSelectionHighlights();
@@ -4775,24 +4849,31 @@ ${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" });
+    view.renderEditorStatus("opening");
     void api.openEditor({
       fileId: marker.fileId,
       line: marker.line,
       column: marker.column
     }).then(() => {
-      if (mounted && state.status === "selected") {
-        view.announce(view.messages().announcements.editorOpened);
+      if (mounted && state.status === "selected" && selectionRevision === sessionRevision && requestRevision === editorRequestRevision && activeTargetId === current.id && targets.includes(current)) {
+        view.renderEditorStatus("success");
       }
     }).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)) {
+        view.renderEditorStatus("error");
       }
     });
   }
@@ -4809,6 +4890,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 +4970,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 +5008,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 +5068,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);