@spotpatch/runtime 1.15.2 → 1.15.3

package/dist/chunk-ELCIEQGT.js

@@ -0,0 +1,183 @@
+import {
+  createButton,
+  createMarkedElement
+} from "./chunk-P6X75LO5.js";
+
+// src/ui/ask-picker.ts
+var SELECT_PICKER_STYLES = `
+  .spotpatch-select-picker { position: relative; display: grid; gap: 5px; min-width: 0; }
+  .spotpatch-select-trigger { box-sizing: border-box; display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--spotpatch-border); border-radius: 9px; padding: 0 11px; overflow: hidden; color: var(--spotpatch-text); background: var(--spotpatch-bg-input); cursor: pointer; font: inherit; outline: none; text-align: left; }
+  .spotpatch-select-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .spotpatch-select-trigger[data-expandable="true"]::after { width: 7px; height: 7px; flex: 0 0 auto; border-right: 1.5px solid #8f96a3; border-bottom: 1.5px solid #8f96a3; content: ""; transform: translateY(-2px) rotate(45deg); }
+  .spotpatch-select-trigger[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
+  .spotpatch-select-trigger:focus-visible { border-color: rgb(139 123 255 / 68%); box-shadow: 0 0 0 3px rgb(139 123 255 / 12%); }
+  .spotpatch-select-trigger:disabled { color: var(--spotpatch-text); background: rgb(255 255 255 / 3%); cursor: default; opacity: 1; }
+  .spotpatch-select-trigger[data-empty="true"]:disabled { color: var(--spotpatch-text-muted); }
+  .spotpatch-select-menu { position: relative; z-index: 1; display: grid; gap: 3px; max-height: 224px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--spotpatch-border); border-radius: 9px; padding: 4px; background: var(--spotpatch-bg-input); box-shadow: 0 10px 28px rgb(0 0 0 / 28%); scrollbar-width: thin; }
+  .spotpatch-select-menu[hidden] { display: none; }
+  .spotpatch-select-option { box-sizing: border-box; min-height: 34px; border: 0; border-radius: 6px; padding: 7px 9px; overflow-wrap: anywhere; color: var(--spotpatch-text-secondary); background: transparent; cursor: pointer; font: inherit; text-align: left; }
+  .spotpatch-select-option[data-active="true"], .spotpatch-select-option:hover { color: #fff; background: rgb(139 123 255 / 13%); outline: none; }
+  .spotpatch-select-option[aria-selected="true"] { color: #f4f1ff; background: rgb(139 123 255 / 20%); }
+  .spotpatch-select-native { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+`;
+function createSelectPicker(document, onViewChange) {
+  const root = createMarkedElement(document, "div");
+  root.className = "spotpatch-select-picker";
+  const trigger = createButton(document, "", "spotpatch-select-trigger");
+  trigger.id = `spotpatch-select-picker-${Math.random().toString(36).slice(2)}`;
+  trigger.setAttribute("role", "combobox");
+  trigger.setAttribute("aria-haspopup", "listbox");
+  trigger.setAttribute("aria-expanded", "false");
+  const text = createMarkedElement(document, "span");
+  trigger.append(text);
+  const menu = createMarkedElement(document, "div");
+  menu.id = `${trigger.id}-menu`;
+  menu.className = "spotpatch-select-menu";
+  menu.setAttribute("role", "listbox");
+  menu.hidden = true;
+  trigger.setAttribute("aria-controls", menu.id);
+  const select = createMarkedElement(document, "select");
+  select.className = "spotpatch-select-native";
+  select.tabIndex = -1;
+  select.setAttribute("aria-hidden", "true");
+  root.append(trigger, menu, select);
+  function close(focus = false) {
+    if (menu.hidden) return;
+    menu.hidden = true;
+    trigger.setAttribute("aria-expanded", "false");
+    trigger.removeAttribute("aria-activedescendant");
+    if (focus) trigger.focus({ preventScroll: true });
+    onViewChange();
+  }
+  function activate(index) {
+    const options = [...menu.children];
+    const active = options[index];
+    if (active === void 0) return;
+    for (const option of options) option.dataset.active = String(option === active);
+    trigger.setAttribute("aria-activedescendant", active.id);
+    const itemRect = active.getBoundingClientRect();
+    const menuRect = menu.getBoundingClientRect();
+    if (itemRect.top < menuRect.top) menu.scrollTop -= menuRect.top - itemRect.top;
+    else if (itemRect.bottom > menuRect.bottom)
+      menu.scrollTop += itemRect.bottom - menuRect.bottom;
+  }
+  function open() {
+    if (trigger.disabled || !menu.hidden) return;
+    menu.hidden = false;
+    trigger.setAttribute("aria-expanded", "true");
+    activate(Math.max(0, select.selectedIndex));
+    onViewChange();
+  }
+  function sync() {
+    text.textContent = select.selectedOptions[0]?.textContent ?? "";
+    trigger.title = text.textContent;
+    trigger.dataset.empty = String(select.value.length === 0);
+    for (const option of [...menu.children]) {
+      option.setAttribute(
+        "aria-selected",
+        String(option.dataset.value === select.value)
+      );
+    }
+  }
+  function choose(value) {
+    if (trigger.disabled) return;
+    select.value = value;
+    sync();
+    close(true);
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  function rebuild() {
+    const expanded = !menu.hidden;
+    const nativeOptions = [...select.options];
+    menu.replaceChildren();
+    for (const [index, option] of nativeOptions.entries()) {
+      const item = createMarkedElement(document, "div");
+      item.id = `${menu.id}-${String(index)}`;
+      item.className = "spotpatch-select-option";
+      item.setAttribute("role", "option");
+      item.dataset.value = option.value;
+      item.textContent = option.textContent;
+      item.title = option.textContent;
+      item.addEventListener("pointerdown", (event) => {
+        event.preventDefault();
+      });
+      item.addEventListener("click", () => {
+        choose(option.value);
+      });
+      menu.append(item);
+    }
+    sync();
+    if (expanded) {
+      activate(Math.max(0, select.selectedIndex));
+      onViewChange();
+    }
+  }
+  trigger.addEventListener("click", () => {
+    if (menu.hidden) open();
+    else close();
+  });
+  trigger.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && !menu.hidden) {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+      return;
+    }
+    if (event.key === "Tab") {
+      close();
+      return;
+    }
+    if (["Enter", " "].includes(event.key) && !menu.hidden) {
+      event.preventDefault();
+      const active = [...menu.children].find(
+        (item) => item.id === trigger.getAttribute("aria-activedescendant")
+      );
+      if (active?.dataset.value !== void 0) choose(active.dataset.value);
+      return;
+    }
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+    event.preventDefault();
+    if (menu.hidden) {
+      open();
+      return;
+    }
+    const options = [...menu.children];
+    const index = options.findIndex(
+      (item) => item.id === trigger.getAttribute("aria-activedescendant")
+    );
+    activate(
+      event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + options.length) % options.length
+    );
+  });
+  root.addEventListener("focusout", (event) => {
+    if (!(event.relatedTarget instanceof Node) || !root.contains(event.relatedTarget))
+      close();
+  });
+  const outside = (event) => {
+    if (!event.composedPath().includes(root)) close();
+  };
+  document.addEventListener("pointerdown", outside);
+  select.addEventListener("change", sync);
+  return {
+    root,
+    trigger,
+    select,
+    rebuild,
+    close,
+    setDisabled(disabled) {
+      select.disabled = disabled;
+      trigger.disabled = disabled || select.options.length < 2;
+      trigger.dataset.expandable = String(!trigger.disabled);
+      if (trigger.disabled) close();
+    },
+    dispose() {
+      document.removeEventListener("pointerdown", outside);
+    }
+  };
+}
+
+export {
+  SELECT_PICKER_STYLES,
+  createSelectPicker
+};
+//# sourceMappingURL=chunk-ELCIEQGT.js.map

package/dist/chunk-ELCIEQGT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/ask-picker.ts"],"sourcesContent":["import { createButton, createMarkedElement } from \"./dom.js\";\n\nexport const SELECT_PICKER_STYLES = `\n  .spotpatch-select-picker { position: relative; display: grid; gap: 5px; min-width: 0; }\n  .spotpatch-select-trigger { box-sizing: border-box; display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--spotpatch-border); border-radius: 9px; padding: 0 11px; overflow: hidden; color: var(--spotpatch-text); background: var(--spotpatch-bg-input); cursor: pointer; font: inherit; outline: none; text-align: left; }\n  .spotpatch-select-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n  .spotpatch-select-trigger[data-expandable=\"true\"]::after { width: 7px; height: 7px; flex: 0 0 auto; border-right: 1.5px solid #8f96a3; border-bottom: 1.5px solid #8f96a3; content: \"\"; transform: translateY(-2px) rotate(45deg); }\n  .spotpatch-select-trigger[aria-expanded=\"true\"]::after { transform: translateY(2px) rotate(225deg); }\n  .spotpatch-select-trigger:focus-visible { border-color: rgb(139 123 255 / 68%); box-shadow: 0 0 0 3px rgb(139 123 255 / 12%); }\n  .spotpatch-select-trigger:disabled { color: var(--spotpatch-text); background: rgb(255 255 255 / 3%); cursor: default; opacity: 1; }\n  .spotpatch-select-trigger[data-empty=\"true\"]:disabled { color: var(--spotpatch-text-muted); }\n  .spotpatch-select-menu { position: relative; z-index: 1; display: grid; gap: 3px; max-height: 224px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--spotpatch-border); border-radius: 9px; padding: 4px; background: var(--spotpatch-bg-input); box-shadow: 0 10px 28px rgb(0 0 0 / 28%); scrollbar-width: thin; }\n  .spotpatch-select-menu[hidden] { display: none; }\n  .spotpatch-select-option { box-sizing: border-box; min-height: 34px; border: 0; border-radius: 6px; padding: 7px 9px; overflow-wrap: anywhere; color: var(--spotpatch-text-secondary); background: transparent; cursor: pointer; font: inherit; text-align: left; }\n  .spotpatch-select-option[data-active=\"true\"], .spotpatch-select-option:hover { color: #fff; background: rgb(139 123 255 / 13%); outline: none; }\n  .spotpatch-select-option[aria-selected=\"true\"] { color: #f4f1ff; background: rgb(139 123 255 / 20%); }\n  .spotpatch-select-native { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }\n`;\n\n/** Shared select-only picker: native value contract, one accessible custom control. */\nexport function createSelectPicker(document: Document, onViewChange: () => void) {\n  const root = createMarkedElement(document, \"div\");\n  root.className = \"spotpatch-select-picker\";\n  const trigger = createButton(document, \"\", \"spotpatch-select-trigger\");\n  trigger.id = `spotpatch-select-picker-${Math.random().toString(36).slice(2)}`;\n  trigger.setAttribute(\"role\", \"combobox\");\n  trigger.setAttribute(\"aria-haspopup\", \"listbox\");\n  trigger.setAttribute(\"aria-expanded\", \"false\");\n  const text = createMarkedElement(document, \"span\");\n  trigger.append(text);\n  const menu = createMarkedElement(document, \"div\");\n  menu.id = `${trigger.id}-menu`;\n  menu.className = \"spotpatch-select-menu\";\n  menu.setAttribute(\"role\", \"listbox\");\n  menu.hidden = true;\n  trigger.setAttribute(\"aria-controls\", menu.id);\n  const select = createMarkedElement(document, \"select\");\n  select.className = \"spotpatch-select-native\";\n  select.tabIndex = -1;\n  select.setAttribute(\"aria-hidden\", \"true\");\n  root.append(trigger, menu, select);\n\n  function close(focus = false): void {\n    if (menu.hidden) return;\n    menu.hidden = true;\n    trigger.setAttribute(\"aria-expanded\", \"false\");\n    trigger.removeAttribute(\"aria-activedescendant\");\n    if (focus) trigger.focus({ preventScroll: true });\n    onViewChange();\n  }\n\n  function activate(index: number): void {\n    const options = [...menu.children] as HTMLElement[];\n    const active = options[index];\n    if (active === undefined) return;\n    for (const option of options) option.dataset.active = String(option === active);\n    trigger.setAttribute(\"aria-activedescendant\", active.id);\n    const itemRect = active.getBoundingClientRect();\n    const menuRect = menu.getBoundingClientRect();\n    if (itemRect.top < menuRect.top) menu.scrollTop -= menuRect.top - itemRect.top;\n    else if (itemRect.bottom > menuRect.bottom)\n      menu.scrollTop += itemRect.bottom - menuRect.bottom;\n  }\n\n  function open(): void {\n    if (trigger.disabled || !menu.hidden) return;\n    menu.hidden = false;\n    trigger.setAttribute(\"aria-expanded\", \"true\");\n    activate(Math.max(0, select.selectedIndex));\n    onViewChange();\n  }\n\n  function sync(): void {\n    text.textContent = select.selectedOptions[0]?.textContent ?? \"\";\n    trigger.title = text.textContent;\n    trigger.dataset.empty = String(select.value.length === 0);\n    for (const option of [...menu.children] as HTMLElement[]) {\n      option.setAttribute(\n        \"aria-selected\",\n        String(option.dataset.value === select.value),\n      );\n    }\n  }\n\n  function choose(value: string): void {\n    if (trigger.disabled) return;\n    select.value = value;\n    sync();\n    close(true);\n    select.dispatchEvent(new Event(\"change\", { bubbles: true }));\n  }\n\n  function rebuild(): void {\n    const expanded = !menu.hidden;\n    const nativeOptions = [...select.options];\n    menu.replaceChildren();\n    for (const [index, option] of nativeOptions.entries()) {\n      const item = createMarkedElement(document, \"div\");\n      item.id = `${menu.id}-${String(index)}`;\n      item.className = \"spotpatch-select-option\";\n      item.setAttribute(\"role\", \"option\");\n      item.dataset.value = option.value;\n      item.textContent = option.textContent;\n      item.title = option.textContent;\n      item.addEventListener(\"pointerdown\", (event) => {\n        event.preventDefault();\n      });\n      item.addEventListener(\"click\", () => {\n        choose(option.value);\n      });\n      menu.append(item);\n    }\n    sync();\n    if (expanded) {\n      activate(Math.max(0, select.selectedIndex));\n      onViewChange();\n    }\n  }\n\n  trigger.addEventListener(\"click\", () => {\n    if (menu.hidden) open();\n    else close();\n  });\n  trigger.addEventListener(\"keydown\", (event) => {\n    if (event.key === \"Escape\" && !menu.hidden) {\n      event.preventDefault();\n      event.stopPropagation();\n      close();\n      return;\n    }\n    if (event.key === \"Tab\") {\n      close();\n      return;\n    }\n    if ([\"Enter\", \" \"].includes(event.key) && !menu.hidden) {\n      event.preventDefault();\n      const active = [...menu.children].find(\n        (item) => item.id === trigger.getAttribute(\"aria-activedescendant\"),\n      ) as HTMLElement | undefined;\n      if (active?.dataset.value !== undefined) choose(active.dataset.value);\n      return;\n    }\n    if (![\"ArrowDown\", \"ArrowUp\", \"Home\", \"End\"].includes(event.key)) return;\n    event.preventDefault();\n    if (menu.hidden) {\n      open();\n      return;\n    }\n    const options = [...menu.children];\n    const index = options.findIndex(\n      (item) => item.id === trigger.getAttribute(\"aria-activedescendant\"),\n    );\n    activate(\n      event.key === \"Home\"\n        ? 0\n        : event.key === \"End\"\n          ? options.length - 1\n          : (index + (event.key === \"ArrowDown\" ? 1 : -1) + options.length) %\n            options.length,\n    );\n  });\n  root.addEventListener(\"focusout\", (event) => {\n    if (!(event.relatedTarget instanceof Node) || !root.contains(event.relatedTarget))\n      close();\n  });\n  const outside = (event: PointerEvent): void => {\n    if (!event.composedPath().includes(root)) close();\n  };\n  document.addEventListener(\"pointerdown\", outside);\n  select.addEventListener(\"change\", sync);\n  return {\n    root,\n    trigger,\n    select,\n    rebuild,\n    close,\n    setDisabled(disabled: boolean): void {\n      select.disabled = disabled;\n      trigger.disabled = disabled || select.options.length < 2;\n      trigger.dataset.expandable = String(!trigger.disabled);\n      if (trigger.disabled) close();\n    },\n    dispose(): void {\n      document.removeEventListener(\"pointerdown\", outside);\n    },\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/contextual-ask-panel.cjs

@@ -806,11 +806,27 @@ function createButton(document, label, className = "") {
 }
 
 // src/ui/ask-picker.ts
-function createAskPicker(document, onViewChange) {
+var SELECT_PICKER_STYLES = `
+  .spotpatch-select-picker { position: relative; display: grid; gap: 5px; min-width: 0; }
+  .spotpatch-select-trigger { box-sizing: border-box; display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--spotpatch-border); border-radius: 9px; padding: 0 11px; overflow: hidden; color: var(--spotpatch-text); background: var(--spotpatch-bg-input); cursor: pointer; font: inherit; outline: none; text-align: left; }
+  .spotpatch-select-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .spotpatch-select-trigger[data-expandable="true"]::after { width: 7px; height: 7px; flex: 0 0 auto; border-right: 1.5px solid #8f96a3; border-bottom: 1.5px solid #8f96a3; content: ""; transform: translateY(-2px) rotate(45deg); }
+  .spotpatch-select-trigger[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
+  .spotpatch-select-trigger:focus-visible { border-color: rgb(139 123 255 / 68%); box-shadow: 0 0 0 3px rgb(139 123 255 / 12%); }
+  .spotpatch-select-trigger:disabled { color: var(--spotpatch-text); background: rgb(255 255 255 / 3%); cursor: default; opacity: 1; }
+  .spotpatch-select-trigger[data-empty="true"]:disabled { color: var(--spotpatch-text-muted); }
+  .spotpatch-select-menu { position: relative; z-index: 1; display: grid; gap: 3px; max-height: 224px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--spotpatch-border); border-radius: 9px; padding: 4px; background: var(--spotpatch-bg-input); box-shadow: 0 10px 28px rgb(0 0 0 / 28%); scrollbar-width: thin; }
+  .spotpatch-select-menu[hidden] { display: none; }
+  .spotpatch-select-option { box-sizing: border-box; min-height: 34px; border: 0; border-radius: 6px; padding: 7px 9px; overflow-wrap: anywhere; color: var(--spotpatch-text-secondary); background: transparent; cursor: pointer; font: inherit; text-align: left; }
+  .spotpatch-select-option[data-active="true"], .spotpatch-select-option:hover { color: #fff; background: rgb(139 123 255 / 13%); outline: none; }
+  .spotpatch-select-option[aria-selected="true"] { color: #f4f1ff; background: rgb(139 123 255 / 20%); }
+  .spotpatch-select-native { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+`;
+function createSelectPicker(document, onViewChange) {
   const root = createMarkedElement(document, "div");
-  root.className = "spotpatch-ask-executor-picker";
-  const trigger = createButton(document, "", "spotpatch-ask-executor");
-  trigger.id = `spotpatch-ask-picker-${Math.random().toString(36).slice(2)}`;
+  root.className = "spotpatch-select-picker";
+  const trigger = createButton(document, "", "spotpatch-select-trigger");
+  trigger.id = `spotpatch-select-picker-${Math.random().toString(36).slice(2)}`;
   trigger.setAttribute("role", "combobox");
   trigger.setAttribute("aria-haspopup", "listbox");
   trigger.setAttribute("aria-expanded", "false");
@@ -818,12 +834,12 @@ function createAskPicker(document, onViewChange) {
   trigger.append(text);
   const menu = createMarkedElement(document, "div");
   menu.id = `${trigger.id}-menu`;
-  menu.className = "spotpatch-ask-executor-menu";
+  menu.className = "spotpatch-select-menu";
   menu.setAttribute("role", "listbox");
   menu.hidden = true;
   trigger.setAttribute("aria-controls", menu.id);
   const select = createMarkedElement(document, "select");
-  select.className = "spotpatch-ask-executor-native";
+  select.className = "spotpatch-select-native";
   select.tabIndex = -1;
   select.setAttribute("aria-hidden", "true");
   root.append(trigger, menu, select);
@@ -873,12 +889,13 @@ function createAskPicker(document, onViewChange) {
     select.dispatchEvent(new Event("change", { bubbles: true }));
   }
   function rebuild() {
-    close();
+    const expanded = !menu.hidden;
+    const nativeOptions = [...select.options];
     menu.replaceChildren();
-    for (const [index, option] of [...select.options].entries()) {
+    for (const [index, option] of nativeOptions.entries()) {
       const item = createMarkedElement(document, "div");
       item.id = `${menu.id}-${String(index)}`;
-      item.className = "spotpatch-ask-executor-option";
+      item.className = "spotpatch-select-option";
       item.setAttribute("role", "option");
       item.dataset.value = option.value;
       item.textContent = option.textContent;
@@ -892,6 +909,10 @@ function createAskPicker(document, onViewChange) {
       menu.append(item);
     }
     sync();
+    if (expanded) {
+      activate(Math.max(0, select.selectedIndex));
+      onViewChange();
+    }
   }
   trigger.addEventListener("click", () => {
     if (menu.hidden) open();
@@ -972,12 +993,12 @@ var EN = Object.freeze({
   ]),
   executorLabel: "Read-only executor",
   modelLabel: "Model",
-  loadingExecutors: "Checking available executors\u2026",
+  loadingExecutors: "Checking available executors…",
   noExecutor: "No verified read-only executor is available.",
   unavailable: "unavailable",
   consent: "Allow the selected source snapshot to be sent to this provider for this answer.",
-  dataSummary: (targets, sources) => `${String(targets)} selected element${targets === 1 ? "" : "s"} \xB7 ${String(sources)} source-backed`,
-  safety: "Single turn \xB7 read-only \xB7 no history",
+  dataSummary: (targets, sources) => `${String(targets)} selected element${targets === 1 ? "" : "s"} · ${String(sources)} source-backed`,
+  safety: "Single turn · read-only · no history",
   submit: "Ask",
   cancel: "Cancel",
   newQuestion: "Start over",
@@ -997,7 +1018,7 @@ var EN = Object.freeze({
     cancelled: "Cancelled",
     failed: "Could not answer"
   }),
-  sourceLabel: (path, start, end) => `${path}:${String(start)}${end === start ? "" : `\u2013${String(end)}`}`,
+  sourceLabel: (path, start, end) => `${path}:${String(start)}${end === start ? "" : `–${String(end)}`}`,
   readSource: (path) => `Reading ${path}`,
   readFiles: (bucket) => `Reading ${bucket} files`,
   copied: "Answer copied.",
@@ -1029,74 +1050,74 @@ var EN = Object.freeze({
   warning: (code) => code === "insufficient-evidence" ? "The selected source did not contain enough evidence for a complete answer." : "Some source references were omitted because they could not be verified."
 });
 var ZH = Object.freeze({
-  mode: Object.freeze({ ask: "\u95EE\u7B54", change: "\u4FEE\u6539", label: "\u4EFB\u52A1\u6A21\u5F0F" }),
-  title: "\u8BE2\u95EE\u6240\u9009\u5143\u7D20",
-  subtitle: "\u4E00\u6B21\u63D0\u95EE\uFF0C\u4E00\u6B21\u5E26\u6E90\u7801\u5F15\u7528\u7684\u56DE\u7B54\uFF1BSpotPatch \u4E0D\u4F1A\u5199\u5165\u4EE3\u7801\u3002",
-  questionLabel: "\u95EE\u9898",
-  questionPlaceholder: "\u8FD9\u4E2A\u7EC4\u4EF6\u662F\u505A\u4EC0\u4E48\u7684\uFF1F",
-  suggestionsLabel: "\u63A8\u8350\u95EE\u9898",
+  mode: Object.freeze({ ask: "问答", change: "修改", label: "任务模式" }),
+  title: "询问所选元素",
+  subtitle: "一次提问，一次带源码引用的回答；SpotPatch 不会写入代码。",
+  questionLabel: "问题",
+  questionPlaceholder: "这个组件是做什么的？",
+  suggestionsLabel: "推荐问题",
   suggestions: Object.freeze([
-    "\u8FD9\u4E2A\u7EC4\u4EF6\u662F\u505A\u4EC0\u4E48\u7684\uFF1F",
-    "\u5B83\u7684\u6570\u636E\u4ECE\u54EA\u91CC\u6765\uFF1F",
-    "\u4E3A\u4EC0\u4E48\u8981\u8FD9\u6837\u5B9E\u73B0\uFF1F"
+    "这个组件是做什么的？",
+    "它的数据从哪里来？",
+    "为什么要这样实现？"
   ]),
-  executorLabel: "\u53EA\u8BFB\u6267\u884C\u5668",
-  modelLabel: "\u6A21\u578B",
-  loadingExecutors: "\u6B63\u5728\u68C0\u67E5\u53EF\u7528\u6267\u884C\u5668\u2026",
-  noExecutor: "\u76EE\u524D\u6CA1\u6709\u901A\u8FC7\u53EA\u8BFB\u9A8C\u8BC1\u7684\u6267\u884C\u5668\u3002",
-  unavailable: "\u4E0D\u53EF\u7528",
-  consent: "\u5141\u8BB8\u672C\u6B21\u56DE\u7B54\u5C06\u6240\u9009\u6E90\u7801\u5FEB\u7167\u53D1\u9001\u7ED9\u8BE5\u63D0\u4F9B\u5546\u3002",
-  dataSummary: (targets, sources) => `${String(targets)} \u4E2A\u5DF2\u9009\u5143\u7D20 \xB7 ${String(sources)} \u4E2A\u5177\u5907\u6E90\u7801\u4E0A\u4E0B\u6587`,
-  safety: "\u5355\u8F6E \xB7 \u53EA\u8BFB \xB7 \u4E0D\u4FDD\u5B58\u5386\u53F2",
-  submit: "\u63D0\u95EE",
-  cancel: "\u53D6\u6D88",
-  newQuestion: "\u91CD\u65B0\u5F00\u59CB",
-  copy: "\u590D\u5236\u56DE\u7B54",
-  convert: "\u8F6C\u6210\u4FEE\u6539\u8BF7\u6C42",
-  answerTitle: "\u56DE\u7B54",
-  sourcesTitle: "\u6E90\u7801\u5F15\u7528",
-  stale: "\u56DE\u7B54\u540E\u9009\u62E9\u5DF2\u53D1\u751F\u53D8\u5316\u3002\u8BF7\u91CD\u65B0\u63D0\u95EE\u540E\u518D\u91C7\u4FE1\u6B64\u56DE\u7B54\u3002",
-  convertedTitle: "\u6765\u81EA\u4E0A\u4E0B\u6587\u95EE\u7B54",
-  convertedBody: "\u56DE\u7B54\u4E0E\u6E90\u7801\u5F15\u7528\u4EC5\u4F5C\u4E3A\u672C\u5730\u4E0A\u4E0B\u6587\u4FDD\u7559\uFF0C\u5C1A\u672A\u53D1\u8D77\u4EFB\u4F55\u4FEE\u6539\u3002",
+  executorLabel: "只读执行器",
+  modelLabel: "模型",
+  loadingExecutors: "正在检查可用执行器…",
+  noExecutor: "目前没有通过只读验证的执行器。",
+  unavailable: "不可用",
+  consent: "允许本次回答将所选源码快照发送给该提供商。",
+  dataSummary: (targets, sources) => `${String(targets)} 个已选元素 · ${String(sources)} 个具备源码上下文`,
+  safety: "单轮 · 只读 · 不保存历史",
+  submit: "提问",
+  cancel: "取消",
+  newQuestion: "重新开始",
+  copy: "复制回答",
+  convert: "转成修改请求",
+  answerTitle: "回答",
+  sourcesTitle: "源码引用",
+  stale: "回答后选择已发生变化。请重新提问后再采信此回答。",
+  convertedTitle: "来自上下文问答",
+  convertedBody: "回答与源码引用仅作为本地上下文保留，尚未发起任何修改。",
   status: Object.freeze({
-    queued: "\u5DF2\u6392\u961F",
-    authorizing: "\u6B63\u5728\u9A8C\u8BC1\u53EA\u8BFB\u6743\u9650",
-    running: "\u6B63\u5728\u5206\u6790\u6240\u9009\u6E90\u7801",
-    cancelling: "\u6B63\u5728\u53D6\u6D88",
-    answered: "\u56DE\u7B54\u5DF2\u5C31\u7EEA",
-    cancelled: "\u5DF2\u53D6\u6D88",
-    failed: "\u65E0\u6CD5\u56DE\u7B54"
+    queued: "已排队",
+    authorizing: "正在验证只读权限",
+    running: "正在分析所选源码",
+    cancelling: "正在取消",
+    answered: "回答已就绪",
+    cancelled: "已取消",
+    failed: "无法回答"
   }),
-  sourceLabel: (path, start, end) => `${path}:${String(start)}${end === start ? "" : `\u2013${String(end)}`}`,
-  readSource: (path) => `\u6B63\u5728\u8BFB\u53D6 ${path}`,
-  readFiles: (bucket) => `\u6B63\u5728\u8BFB\u53D6 ${bucket} \u4E2A\u6587\u4EF6`,
-  copied: "\u56DE\u7B54\u5DF2\u590D\u5236\u3002",
-  copyFailed: "\u65E0\u6CD5\u590D\u5236\u56DE\u7B54\u3002",
-  sourceOpenFailed: "\u65E0\u6CD5\u6253\u5F00\u6E90\u7801\u3002",
-  converted: "\u5DF2\u5207\u6362\u5230\u4FEE\u6539\u6A21\u5F0F\uFF0C\u5E76\u628A\u56DE\u7B54\u4F5C\u4E3A\u672C\u5730\u4E0A\u4E0B\u6587\u9644\u5E26\u3002",
+  sourceLabel: (path, start, end) => `${path}:${String(start)}${end === start ? "" : `–${String(end)}`}`,
+  readSource: (path) => `正在读取 ${path}`,
+  readFiles: (bucket) => `正在读取 ${bucket} 个文件`,
+  copied: "回答已复制。",
+  copyFailed: "无法复制回答。",
+  sourceOpenFailed: "无法打开源码。",
+  converted: "已切换到修改模式，并把回答作为本地上下文附带。",
   error: (code) => {
     const errors = {
-      INVALID_TOKEN: "\u672C\u5730 SpotPatch \u4F1A\u8BDD\u5DF2\u5931\u6548\uFF0C\u8BF7\u5237\u65B0\u9875\u9762\u3002",
-      ORIGIN_NOT_ALLOWED: "\u672C\u5730\u8BF7\u6C42\u672A\u901A\u8FC7\u540C\u6E90\u5B89\u5168\u6821\u9A8C\uFF0C\u8BF7\u5237\u65B0\u9875\u9762\u6216\u91CD\u542F\u5F00\u53D1\u670D\u52A1\u3002",
-      ASK_DISABLED: "\u4E0A\u4E0B\u6587\u95EE\u7B54\u672A\u542F\u7528\u3002",
-      ASK_SELECTION_REQUIRED: "\u8BF7\u5148\u9009\u62E9\u81F3\u5C11\u4E00\u4E2A\u5143\u7D20\u3002",
-      ASK_SELECTION_STALE: "\u6240\u9009\u6E90\u7801\u5DF2\u7ECF\u53D8\u5316\uFF0C\u8BF7\u5237\u65B0\u9009\u62E9\u540E\u91CD\u65B0\u63D0\u95EE\u3002",
-      ASK_QUESTION_INVALID: "\u8BF7\u8F93\u5165\u4E00\u4E2A\u6709\u6548\u7684\u95EE\u9898\u3002",
-      ASK_EXECUTOR_UNAVAILABLE: "\u6240\u9009\u53EA\u8BFB\u6267\u884C\u5668\u5F53\u524D\u4E0D\u53EF\u7528\u3002",
-      ASK_TIMEOUT: "\u53EA\u8BFB\u6267\u884C\u5668\u672A\u80FD\u5728\u9650\u5B9A\u65F6\u95F4\u5185\u8FD4\u56DE\u56DE\u7B54\uFF0C\u8BF7\u91CD\u65B0\u63D0\u95EE\u3002",
-      ASK_CONSENT_REQUIRED: "\u8BF7\u786E\u8BA4\u672C\u6B21\u56DE\u7B54\u7684\u63D0\u4F9B\u5546\u6570\u636E\u8BBF\u95EE\u3002",
-      ASK_BUSY: "\u5DE5\u4F5C\u533A\u6B63\u5728\u6267\u884C\u5176\u4ED6\u4EFB\u52A1\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5\u3002",
-      ASK_CANCELLED: "\u672C\u6B21\u63D0\u95EE\u5DF2\u53D6\u6D88\u3002",
-      ASK_RESULT_EXPIRED: "\u56DE\u7B54\u5DF2\u8FC7\u671F\uFF0C\u8BF7\u91CD\u65B0\u63D0\u95EE\u3002",
-      ASK_WRITE_ATTEMPTED: "\u6267\u884C\u5668\u5C1D\u8BD5\u5199\u5165\uFF0C\u5DF2\u88AB\u963B\u6B62\u3002",
-      ASK_ANSWER_INVALID: "\u6267\u884C\u5668\u8FD4\u56DE\u7684\u5E26\u5F15\u7528\u56DE\u7B54\u65E0\u6548\u3002",
-      ASK_PROTOCOL_INCOMPATIBLE: "\u6267\u884C\u5668\u534F\u8BAE\u4E0D\u517C\u5BB9\u3002",
-      ASK_LIMIT_EXCEEDED: "\u6240\u9009\u4E0A\u4E0B\u6587\u8FC7\u5927\u3002",
-      ASK_SOURCE_SCOPE_DENIED: "\u8BF7\u6C42\u7684\u6E90\u7801\u8D85\u51FA\u4E86\u6388\u6743\u5FEB\u7167\u8303\u56F4\u3002"
+      INVALID_TOKEN: "本地 SpotPatch 会话已失效，请刷新页面。",
+      ORIGIN_NOT_ALLOWED: "本地请求未通过同源安全校验，请刷新页面或重启开发服务。",
+      ASK_DISABLED: "上下文问答未启用。",
+      ASK_SELECTION_REQUIRED: "请先选择至少一个元素。",
+      ASK_SELECTION_STALE: "所选源码已经变化，请刷新选择后重新提问。",
+      ASK_QUESTION_INVALID: "请输入一个有效的问题。",
+      ASK_EXECUTOR_UNAVAILABLE: "所选只读执行器当前不可用。",
+      ASK_TIMEOUT: "只读执行器未能在限定时间内返回回答，请重新提问。",
+      ASK_CONSENT_REQUIRED: "请确认本次回答的提供商数据访问。",
+      ASK_BUSY: "工作区正在执行其他任务，请稍后重试。",
+      ASK_CANCELLED: "本次提问已取消。",
+      ASK_RESULT_EXPIRED: "回答已过期，请重新提问。",
+      ASK_WRITE_ATTEMPTED: "执行器尝试写入，已被阻止。",
+      ASK_ANSWER_INVALID: "执行器返回的带引用回答无效。",
+      ASK_PROTOCOL_INCOMPATIBLE: "执行器协议不兼容。",
+      ASK_LIMIT_EXCEEDED: "所选上下文过大。",
+      ASK_SOURCE_SCOPE_DENIED: "请求的源码超出了授权快照范围。"
     };
-    return code === void 0 ? "SpotPatch \u672A\u80FD\u5B8C\u6210\u672C\u6B21\u63D0\u95EE\u3002" : errors[code] ?? "SpotPatch \u672A\u80FD\u5B8C\u6210\u672C\u6B21\u63D0\u95EE\u3002";
+    return code === void 0 ? "SpotPatch 未能完成本次提问。" : errors[code] ?? "SpotPatch 未能完成本次提问。";
   },
-  warning: (code) => code === "insufficient-evidence" ? "\u6240\u9009\u6E90\u7801\u4E0D\u8DB3\u4EE5\u652F\u6301\u5B8C\u6574\u56DE\u7B54\u3002" : "\u90E8\u5206\u6E90\u7801\u5F15\u7528\u56E0\u65E0\u6CD5\u9A8C\u8BC1\u800C\u88AB\u7701\u7565\u3002"
+  warning: (code) => code === "insufficient-evidence" ? "所选源码不足以支持完整回答。" : "部分源码引用因无法验证而被省略。"
 });
 function contextualAskMessages(locale) {
   return locale === "zh-CN" ? ZH : EN;
@@ -1106,6 +1127,7 @@ function contextualAskMessages(locale) {
 function createStyles(document) {
   const style = document.createElement("style");
   style.textContent = `
+    ${SELECT_PICKER_STYLES}
     .spotpatch-ask-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--spotpatch-border-subtle); border-radius: 10px; background: #0a0a0e; }
     .spotpatch-ask-mode button { min-height: 34px; border: 0; border-radius: 7px; color: var(--spotpatch-text-secondary); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
     .spotpatch-ask-mode button[aria-selected="true"] { color: #f7f7ff; background: linear-gradient(135deg, rgb(139 123 255 / 25%), rgb(82 168 255 / 14%)); box-shadow: inset 0 0 0 1px rgb(139 123 255 / 24%); }
@@ -1118,20 +1140,6 @@ function createStyles(document) {
     .spotpatch-ask-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
     .spotpatch-ask-suggestions button { border: 1px solid var(--spotpatch-border-subtle); border-radius: 999px; padding: 5px 9px; color: var(--spotpatch-text-secondary); background: rgb(255 255 255 / 2%); cursor: pointer; font-size: 10.5px; }
     .spotpatch-ask-suggestions button:hover { border-color: rgb(139 123 255 / 42%); color: #fff; }
-    .spotpatch-ask-executor-picker { display: grid; gap: 5px; min-width: 0; }
-    .spotpatch-ask-executor { box-sizing: border-box; display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--spotpatch-border); border-radius: 9px; padding: 0 11px; overflow: hidden; color: var(--spotpatch-text); background: var(--spotpatch-bg-input); cursor: pointer; font: inherit; outline: none; text-align: left; }
-    .spotpatch-ask-executor > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .spotpatch-ask-executor[data-expandable="true"]::after { width: 7px; height: 7px; flex: 0 0 auto; border-right: 1.5px solid #8f96a3; border-bottom: 1.5px solid #8f96a3; content: ""; transform: translateY(-2px) rotate(45deg); }
-    .spotpatch-ask-executor[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
-    .spotpatch-ask-executor:focus-visible { border-color: rgb(139 123 255 / 68%); box-shadow: 0 0 0 3px rgb(139 123 255 / 12%); }
-    .spotpatch-ask-executor:disabled { color: var(--spotpatch-text); background: rgb(255 255 255 / 3%); cursor: default; opacity: 1; }
-    .spotpatch-ask-executor[data-empty="true"]:disabled { color: var(--spotpatch-text-muted); }
-    .spotpatch-ask-executor-menu { display: grid; gap: 3px; border: 1px solid var(--spotpatch-border); border-radius: 9px; padding: 4px; background: var(--spotpatch-bg-input); max-height: 224px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; box-shadow: 0 10px 28px rgb(0 0 0 / 28%); }
-    .spotpatch-ask-executor-menu[hidden] { display: none; }
-    .spotpatch-ask-executor-option { box-sizing: border-box; min-height: 34px; border: 0; border-radius: 6px; padding: 7px 9px; color: var(--spotpatch-text-secondary); background: transparent; cursor: pointer; font: inherit; text-align: left; overflow-wrap: anywhere; }
-    .spotpatch-ask-executor-option[data-active="true"], .spotpatch-ask-executor-option:hover { color: #fff; background: rgb(139 123 255 / 13%); outline: none; }
-    .spotpatch-ask-executor-option[aria-selected="true"] { color: #f4f1ff; background: rgb(139 123 255 / 20%); }
-    .spotpatch-ask-executor-native { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
     .spotpatch-ask-executor-status { margin: 0; border-left: 2px solid var(--spotpatch-warning); padding-left: 8px; color: #d8b66c; font-size: 10.5px; line-height: 1.45; }
     .spotpatch-ask-safety { display: grid; gap: 8px; border: 1px solid rgb(82 168 255 / 16%); border-radius: 10px; padding: 10px 11px; background: rgb(82 168 255 / 4%); }
     .spotpatch-ask-data { display: flex; justify-content: space-between; gap: 10px; color: #aab3c2; font-size: 10.5px; }
@@ -1230,13 +1238,13 @@ function createContextualAskPanel(input) {
   const executorField = createMarkedElement(document, "div");
   executorField.className = "spotpatch-ask-field";
   const executorLabel = createMarkedElement(document, "label");
-  const executorPicker = createAskPicker(document, input.onViewChange);
+  const executorPicker = createSelectPicker(document, input.onViewChange);
   const executorSelect = executorPicker.select;
   executorLabel.htmlFor = executorPicker.trigger.id;
   const modelField = createMarkedElement(document, "div");
   modelField.className = "spotpatch-ask-field";
   const modelLabel = createMarkedElement(document, "label");
-  const modelPicker = createAskPicker(document, input.onViewChange);
+  const modelPicker = createSelectPicker(document, input.onViewChange);
   modelLabel.htmlFor = modelPicker.trigger.id;
   modelField.append(modelLabel, modelPicker.root);
   let modelExecutorId;
@@ -1440,7 +1448,7 @@ function createContextualAskPanel(input) {
       for (const executor of readyExecutors) {
         const option = document.createElement("option");
         option.value = executor.executorId;
-        option.textContent = executor.models === void 0 ? `${executor.label} \xB7 ${executor.effectiveModelLabel}` : executor.label;
+        option.textContent = executor.models === void 0 ? `${executor.label} · ${executor.effectiveModelLabel}` : executor.label;
         executorSelect.append(option);
       }
       if (readyExecutors.length === 0) {
@@ -1477,7 +1485,7 @@ function createContextualAskPanel(input) {
         expandedHeadline: messages.status[snapshot.status],
         action: messages.safety,
         expandedAction: messages.safety,
-        meta: `${snapshot.executor.label} \xB7 ${snapshot.executor.modelLabel}`,
+        meta: `${snapshot.executor.label} · ${snapshot.executor.modelLabel}`,
         recentActivities: Object.freeze([]),
         startedAt: snapshot.createdAt
       });
@@ -1504,7 +1512,7 @@ function createContextualAskPanel(input) {
           expandedHeadline: messages.status.running,
           action: activityLabel,
           expandedAction: activityLabel,
-          meta: `${currentJob.executor.label} \xB7 ${currentJob.executor.modelLabel}`,
+          meta: `${currentJob.executor.label} · ${currentJob.executor.modelLabel}`,
           activity: {
             key: `ask:${String(event.sequence)}`,
             kind: "read",