@spotpatch/runtime 1.14.0 → 1.15.1

package/dist/contextual-ask-panel.d.cts

@@ -48,6 +48,7 @@ interface ContextualAskPanel {
     readonly notify: (event: "copied" | "copy-failed" | "converted" | "source-open-failed") => void;
     readonly readConsent: () => boolean;
     readonly readExecutorId: () => string | undefined;
+    readonly readModel: () => string | undefined;
     readonly readQuestion: () => string;
     readonly renderAnswer: (result: AskAnswerResult, stale: boolean) => void;
     readonly renderCapability: (capability?: ContextualAskCapability) => void;
@@ -113,6 +114,7 @@ interface ContextualAskMessages {
     readonly suggestionsLabel: string;
     readonly suggestions: readonly string[];
     readonly executorLabel: string;
+    readonly modelLabel: string;
     readonly loadingExecutors: string;
     readonly noExecutor: string;
     readonly unavailable: string;

package/dist/contextual-ask-panel.d.ts

@@ -48,6 +48,7 @@ interface ContextualAskPanel {
     readonly notify: (event: "copied" | "copy-failed" | "converted" | "source-open-failed") => void;
     readonly readConsent: () => boolean;
     readonly readExecutorId: () => string | undefined;
+    readonly readModel: () => string | undefined;
     readonly readQuestion: () => string;
     readonly renderAnswer: (result: AskAnswerResult, stale: boolean) => void;
     readonly renderCapability: (capability?: ContextualAskCapability) => void;
@@ -113,6 +114,7 @@ interface ContextualAskMessages {
     readonly suggestionsLabel: string;
     readonly suggestions: readonly string[];
     readonly executorLabel: string;
+    readonly modelLabel: string;
     readonly loadingExecutors: string;
     readonly noExecutor: string;
     readonly unavailable: string;

package/dist/contextual-ask-panel.js

@@ -1,7 +1,7 @@
 import {
   getContextualAskExtension,
   registerContextualAskExtension
-} from "./chunk-KIDHJQRG.js";
+} from "./chunk-PXJKFEUJ.js";
 import {
   createButton,
   createMarkedElement
@@ -29,6 +29,7 @@ import {
   ASK_SOURCE_CONFIDENCES,
   CONTEXTUAL_ASK_EXECUTOR_KINDS,
   CONTEXTUAL_ASK_EXECUTOR_STATES,
+  CONTEXTUAL_ASK_LIMITS,
   CONTEXTUAL_ASK_SCHEMA_VERSION,
   isErrorCode
 } from "@spotpatch/shared/contextual-ask-browser";
@@ -77,8 +78,10 @@ function isExecutorCapability(value) {
       "providerDataConsentRequired",
       "readOnlyProven"
     ],
-    ["errorCode"]
-  ) || !isOpaqueId(value.executorId) || !isEnum(value.kind, CONTEXTUAL_ASK_EXECUTOR_KINDS) || !isNonEmptyString(value.label) || !isNonEmptyString(value.requestedModelLabel) || !isNonEmptyString(value.effectiveModelLabel) || !isEnum(value.state, CONTEXTUAL_ASK_EXECUTOR_STATES) || typeof value.providerDataConsentRequired !== "boolean" || typeof value.readOnlyProven !== "boolean" || value.errorCode !== void 0 && !isAskDomainError(value.errorCode)) {
+    ["errorCode", "models"]
+  ) || !isOpaqueId(value.executorId) || !isEnum(value.kind, CONTEXTUAL_ASK_EXECUTOR_KINDS) || !isNonEmptyString(value.label) || !isNonEmptyString(value.requestedModelLabel) || !isNonEmptyString(value.effectiveModelLabel) || value.models !== void 0 && (!Array.isArray(value.models) || value.models.length === 0 || value.models.length > CONTEXTUAL_ASK_LIMITS.maximumModels || !value.models.every(
+    (model) => isNonEmptyString(model) && model.length <= CONTEXTUAL_ASK_LIMITS.maximumLabelCharacters
+  ) || !unique(value.models)) || !isEnum(value.state, CONTEXTUAL_ASK_EXECUTOR_STATES) || typeof value.providerDataConsentRequired !== "boolean" || typeof value.readOnlyProven !== "boolean" || value.errorCode !== void 0 && !isAskDomainError(value.errorCode)) {
     return false;
   }
   return value.state === "ready" ? value.readOnlyProven && value.errorCode === void 0 : value.errorCode !== void 0;
@@ -552,6 +555,7 @@ function createContextualAskWorkflow(input) {
       return;
     }
     const requestRevision = ++revision;
+    const model = input.panel.readModel();
     currentQuestion = question;
     busy = true;
     input.onBusyChange(true);
@@ -564,6 +568,7 @@ function createContextualAskWorkflow(input) {
         requestId: input.createId(),
         envelope,
         executorId,
+        ...model === void 0 ? {} : { model },
         providerDataConsent: true
       });
       if (!isCurrent(requestRevision)) return;
@@ -758,6 +763,158 @@ function createContextualAskWorkflow(input) {
   });
 }
 
+// src/ui/ask-picker.ts
+function createAskPicker(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)}`;
+  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-ask-executor-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.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() {
+    close();
+    menu.replaceChildren();
+    for (const [index, option] of [...select.options].entries()) {
+      const item = createMarkedElement(document, "div");
+      item.id = `${menu.id}-${String(index)}`;
+      item.className = "spotpatch-ask-executor-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();
+  }
+  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);
+    }
+  };
+}
+
 // src/ui/contextual-ask-localization.ts
 var EN = Object.freeze({
   mode: Object.freeze({ ask: "Ask", change: "Change", label: "Task mode" }),
@@ -772,6 +929,7 @@ var EN = Object.freeze({
     "Why is it implemented this way?"
   ]),
   executorLabel: "Read-only executor",
+  modelLabel: "Model",
   loadingExecutors: "Checking available executors\u2026",
   noExecutor: "No verified read-only executor is available.",
   unavailable: "unavailable",
@@ -841,6 +999,7 @@ var ZH = Object.freeze({
     "\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",
@@ -909,7 +1068,8 @@ function createStyles(document) {
     .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%); }
     .spotpatch-ask-panel { display: grid; gap: 14px; }
-    .spotpatch-ask-field { display: grid; gap: 7px; }
+    .spotpatch-ask-field { display: grid; gap: 7px; min-width: 0; }
+    .spotpatch-ask-field[hidden] { display: none; }
     .spotpatch-ask-field > label, .spotpatch-ask-label { color: #c9cad2; font-size: 11px; font-weight: 680; }
     .spotpatch-ask-question { box-sizing: border-box; width: 100%; min-height: 92px; resize: vertical; border: 1px solid var(--spotpatch-border); border-radius: 10px; padding: 11px 12px; outline: none; color: var(--spotpatch-text); background: var(--spotpatch-bg-input); line-height: 1.55; }
     .spotpatch-ask-question:focus { border-color: rgb(139 123 255 / 68%); box-shadow: 0 0 0 3px rgb(139 123 255 / 12%); }
@@ -924,10 +1084,10 @@ function createStyles(document) {
     .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: #101116; box-shadow: 0 10px 28px rgb(0 0 0 / 28%); }
+    .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; }
-    .spotpatch-ask-executor-option:hover, .spotpatch-ask-executor-option:focus-visible { color: #fff; background: rgb(139 123 255 / 13%); outline: 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; }
@@ -1028,33 +1188,21 @@ function createContextualAskPanel(input) {
   const executorField = createMarkedElement(document, "div");
   executorField.className = "spotpatch-ask-field";
   const executorLabel = createMarkedElement(document, "label");
-  const executorPicker = createMarkedElement(document, "div");
-  executorPicker.className = "spotpatch-ask-executor-picker";
-  const executorTrigger = createButton(document, "", "spotpatch-ask-executor");
-  const executorSelect = createMarkedElement(document, "select");
-  const executorId = `spotpatch-ask-executor-${Math.random().toString(36).slice(2)}`;
-  const executorMenuId = `${executorId}-menu`;
-  executorTrigger.id = executorId;
-  executorTrigger.setAttribute("role", "combobox");
-  executorTrigger.setAttribute("aria-controls", executorMenuId);
-  executorTrigger.setAttribute("aria-expanded", "false");
-  const executorText = createMarkedElement(document, "span");
-  executorTrigger.append(executorText);
-  const executorMenu = createMarkedElement(document, "div");
-  executorMenu.id = executorMenuId;
-  executorMenu.className = "spotpatch-ask-executor-menu";
-  executorMenu.setAttribute("role", "listbox");
-  executorMenu.hidden = true;
-  executorSelect.className = "spotpatch-ask-executor-native";
-  executorSelect.tabIndex = -1;
-  executorSelect.setAttribute("aria-hidden", "true");
-  executorLabel.htmlFor = executorId;
+  const executorPicker = createAskPicker(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);
+  modelLabel.htmlFor = modelPicker.trigger.id;
+  modelField.append(modelLabel, modelPicker.root);
+  let modelExecutorId;
   const executorStatus = createMarkedElement(document, "p");
   executorStatus.className = "spotpatch-ask-executor-status";
   executorStatus.setAttribute("role", "status");
   executorStatus.hidden = true;
-  executorPicker.append(executorTrigger, executorMenu, executorSelect);
-  executorField.append(executorLabel, executorPicker, executorStatus);
+  executorField.append(executorLabel, executorPicker.root, executorStatus);
   const safety = createMarkedElement(document, "div");
   safety.className = "spotpatch-ask-safety";
   const dataSummary = createMarkedElement(document, "div");
@@ -1111,7 +1259,16 @@ function createContextualAskPanel(input) {
   const convertButton = createButton(document, "", "spotpatch-primary");
   answerActions.append(copyButton, convertButton);
   answer.append(stale, answerTitle, warnings, blocks, sourcesSection, answerActions);
-  askPanel.append(questionField, executorField, safety, status, error, actions, answer);
+  askPanel.append(
+    questionField,
+    executorField,
+    modelField,
+    safety,
+    status,
+    error,
+    actions,
+    answer
+  );
   root.append(modeSwitch, origin, askPanel);
   function hasReadyExecutor() {
     const selected = currentCapability?.executors.find(
@@ -1124,57 +1281,31 @@ function createContextualAskPanel(input) {
       (candidate) => candidate.state === "ready" && candidate.readOnlyProven
     ) === true;
   }
-  function readyExecutorCount() {
-    return currentCapability?.executors.filter(
-      (candidate) => candidate.state === "ready" && candidate.readOnlyProven
-    ).length ?? 0;
-  }
-  function closeExecutorMenu(focusTrigger = false) {
-    if (executorMenu.hidden) return;
-    executorMenu.hidden = true;
-    executorTrigger.setAttribute("aria-expanded", "false");
-    if (focusTrigger) executorTrigger.focus({ preventScroll: true });
-    input.onViewChange();
-  }
-  function openExecutorMenu(focusSelected = false) {
-    if (executorTrigger.disabled || !executorMenu.hidden) return;
-    executorMenu.hidden = false;
-    executorTrigger.setAttribute("aria-expanded", "true");
-    if (focusSelected) {
-      const selected = executorMenu.querySelector(
-        '.spotpatch-ask-executor-option[aria-selected="true"]'
-      );
-      const first = executorMenu.firstElementChild;
-      const focusTarget = selected ?? (first instanceof HTMLElement ? first : null);
-      focusTarget?.focus({ preventScroll: true });
-    }
-    input.onViewChange();
-  }
-  function syncExecutorControl() {
-    const selectedOption = [...executorSelect.options].find(
-      (option) => option.value === executorSelect.value
+  function renderModels() {
+    const executor = currentCapability?.executors.find(
+      (item) => item.executorId === executorSelect.value
     );
-    executorText.textContent = selectedOption?.textContent ?? messages.noExecutor;
-    executorTrigger.dataset.empty = String(executorSelect.value.length === 0);
-    for (const option of executorMenu.querySelectorAll(
-      ".spotpatch-ask-executor-option"
-    )) {
-      option.setAttribute(
-        "aria-selected",
-        String(option.dataset.executorId === executorSelect.value)
-      );
+    const previous = modelExecutorId === executor?.executorId ? modelPicker.select.value : void 0;
+    modelExecutorId = executor?.executorId;
+    const models = executor?.models;
+    modelField.hidden = models === void 0;
+    modelPicker.select.replaceChildren();
+    for (const model of models ?? []) {
+      const option = document.createElement("option");
+      option.value = model;
+      option.textContent = model;
+      modelPicker.select.append(option);
     }
+    modelPicker.select.value = models?.find((model) => model === previous) ?? models?.find((model) => model === executor?.requestedModelLabel) ?? models?.[0] ?? "";
+    modelPicker.rebuild();
   }
   function refreshSubmitState() {
     submitButton.disabled = busy || questionInput.value.trim().length === 0 || !hasReadyExecutor() || !consentCheckbox.checked || currentPreview.targetCount === 0;
     if (!currentPreview.contextReady) submitButton.disabled = true;
     questionInput.disabled = busy;
-    const readyCount = readyExecutorCount();
     const executorUnavailable = busy || currentCapability === void 0 || !hasAnyReadyExecutor();
-    executorSelect.disabled = executorUnavailable;
-    executorTrigger.disabled = executorUnavailable || readyCount < 2;
-    executorTrigger.dataset.expandable = String(!executorUnavailable && readyCount > 1);
-    if (executorTrigger.disabled) closeExecutorMenu();
+    executorPicker.setDisabled(executorUnavailable);
+    modelPicker.setDisabled(busy || !hasReadyExecutor());
     consentCheckbox.disabled = busy || !hasReadyExecutor();
     newQuestionButton.hidden = busy || currentResult === void 0;
     cancelButton.hidden = !busy;
@@ -1217,6 +1348,9 @@ function createContextualAskPanel(input) {
     questionInput.placeholder = messages.questionPlaceholder;
     suggestions.setAttribute("aria-label", messages.suggestionsLabel);
     executorLabel.textContent = messages.executorLabel;
+    modelLabel.textContent = messages.modelLabel;
+    executorPicker.root.querySelector("[role=listbox]")?.setAttribute("aria-label", messages.executorLabel);
+    modelPicker.root.querySelector("[role=listbox]")?.setAttribute("aria-label", messages.modelLabel);
     consentText.textContent = messages.consent;
     safetyText.textContent = messages.safety;
     submitButton.textContent = messages.submit;
@@ -1241,8 +1375,7 @@ function createContextualAskPanel(input) {
     currentCapability = capability;
     const previous = executorSelect.value;
     executorSelect.replaceChildren();
-    executorMenu.replaceChildren();
-    closeExecutorMenu();
+    executorPicker.close();
     executorStatus.hidden = true;
     executorStatus.textContent = "";
     if (capability === void 0) {
@@ -1265,22 +1398,8 @@ function createContextualAskPanel(input) {
       for (const executor of readyExecutors) {
         const option = document.createElement("option");
         option.value = executor.executorId;
-        option.textContent = `${executor.label} \xB7 ${executor.effectiveModelLabel}`;
+        option.textContent = executor.models === void 0 ? `${executor.label} \xB7 ${executor.effectiveModelLabel}` : executor.label;
         executorSelect.append(option);
-        const menuOption = createButton(
-          document,
-          option.textContent,
-          "spotpatch-ask-executor-option"
-        );
-        menuOption.dataset.executorId = executor.executorId;
-        menuOption.setAttribute("role", "option");
-        menuOption.addEventListener("click", () => {
-          executorSelect.value = executor.executorId;
-          syncExecutorControl();
-          closeExecutorMenu(true);
-          executorSelect.dispatchEvent(new Event("change", { bubbles: true }));
-        });
-        executorMenu.append(menuOption);
       }
       if (readyExecutors.length === 0) {
         const option = document.createElement("option");
@@ -1296,7 +1415,8 @@ function createContextualAskPanel(input) {
         executorStatus.hidden = false;
       }
     }
-    syncExecutorControl();
+    executorPicker.rebuild();
+    renderModels();
     refreshSubmitState();
   }
   function renderJob(snapshot) {
@@ -1451,42 +1571,11 @@ ${sourceText}`;
     applyMode();
   });
   questionInput.addEventListener("input", refreshSubmitState);
-  executorSelect.addEventListener("change", refreshSubmitState);
-  executorTrigger.addEventListener("click", () => {
-    if (executorMenu.hidden) openExecutorMenu();
-    else closeExecutorMenu();
-  });
-  executorTrigger.addEventListener("keydown", (event) => {
-    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
-    event.preventDefault();
-    openExecutorMenu(true);
-  });
-  executorMenu.addEventListener("keydown", (event) => {
-    const options = [
-      ...executorMenu.querySelectorAll(
-        ".spotpatch-ask-executor-option"
-      )
-    ];
-    if (event.key === "Escape") {
-      event.preventDefault();
-      closeExecutorMenu(true);
-      return;
-    }
-    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
-    event.preventDefault();
-    const currentIndex = options.indexOf(document.activeElement);
-    const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : event.key === "ArrowDown" ? (currentIndex + 1 + options.length) % options.length : (currentIndex - 1 + options.length) % options.length;
-    options[nextIndex]?.focus({ preventScroll: true });
-  });
-  executorPicker.addEventListener("focusout", (event) => {
-    if (!(event.relatedTarget instanceof Node) || !executorPicker.contains(event.relatedTarget)) {
-      closeExecutorMenu();
-    }
+  executorSelect.addEventListener("change", () => {
+    renderModels();
+    refreshSubmitState();
+    input.onViewChange();
   });
-  const closeExecutorMenuOutside = (event) => {
-    if (!event.composedPath().includes(executorPicker)) closeExecutorMenu();
-  };
-  document.addEventListener("pointerdown", closeExecutorMenuOutside);
   consentCheckbox.addEventListener("change", refreshSubmitState);
   const unsubscribeLocale = input.subscribeLocale(applyMessages);
   applyMessages();
@@ -1505,7 +1594,8 @@ ${sourceText}`;
     clear,
     dispose: () => {
       unsubscribeLocale();
-      document.removeEventListener("pointerdown", closeExecutorMenuOutside);
+      executorPicker.dispose();
+      modelPicker.dispose();
     },
     focusQuestion: () => {
       questionInput.focus({ preventScroll: true });
@@ -1517,6 +1607,7 @@ ${sourceText}`;
     },
     readConsent: () => consentCheckbox.checked,
     readExecutorId: () => executorSelect.value || void 0,
+    readModel: () => modelPicker.select.value || void 0,
     readQuestion: () => questionInput.value.trim(),
     renderAnswer,
     renderCapability,