acdev 1.0.5 → 1.0.7

package/public/app.js

@@ -127,10 +127,14 @@ let reviewExcludedByJob = {};
 let settingsSaving = false;
 /** @type {'ticket' | 'auth' | 'rules' | 'config'} */
 let settingsTab = 'ticket';
+/** Sentinel: no model selected (jobs blocked until user picks one). */
+const NO_MODEL = '-';
 /** @type {string} */
 let currentModel = 'claude-sonnet-5';
 /** @type {Array<{id:string,label?:string,name?:string}>} */
 let availableModels = [];
+/** @type {'claude' | 'openrouter' | null} */
+let availableModelsProvider = null;
 /** @type {'github' | 'jira'} */
 let ticketSource = 'github';
 /** @type {{
@@ -163,6 +167,12 @@ let ticketSource = 'github';
  *   anthropicApiKeyMasked?: string | null,
  *   claudeOauthTokenSet?: boolean,
  *   claudeOauthTokenMasked?: string | null,
+ *   llmProvider?: 'claude' | 'openrouter',
+ *   lastModelsByProvider?: Record<string, string>,
+ *   openrouterAuthOk?: boolean,
+ *   openrouterApiKeySet?: boolean,
+ *   openrouterApiKeyMasked?: string | null,
+ *   llmAuthOk?: boolean,
  *   stubAgent?: boolean,
  * }} */
 let appConfig = {};
@@ -174,18 +184,33 @@ const els = {
   repoName: document.getElementById('repo-name'),
   repoBranch: document.getElementById('repo-branch'),
   ticketSourceMeta: document.getElementById('ticket-source-meta'),
+  modelProvider: document.getElementById('model-provider'),
   modelCurrent: document.getElementById('model-current'),
+  modelCombined: document.getElementById('model-combined'),
+  overviewLlmProvider: document.getElementById('overview-llm-provider'),
+  overviewModel: document.getElementById('overview-model'),
+  overviewAgentPicker: document.getElementById('overview-agent-picker'),
+  overviewAgentTrigger: document.getElementById('overview-agent-trigger'),
+  overviewAgentValue: document.getElementById('overview-agent-value'),
+  overviewAgentIcon: document.getElementById('overview-agent-icon'),
+  overviewAgentPanel: document.getElementById('overview-agent-panel'),
+  overviewAgentSearch: document.getElementById('overview-agent-search'),
+  overviewAgentModelList: document.getElementById('overview-agent-model-list'),
+  overviewLlmFeedback: document.getElementById('overview-llm-feedback'),
   navBadgeOverview: document.getElementById('nav-badge-overview'),
   navBadgeRuns: document.getElementById('nav-badge-runs'),
   navBadgeReview: document.getElementById('nav-badge-review'),
   navBadgeAlerts: document.getElementById('nav-badge-alerts'),
-  authBanner: document.getElementById('auth-banner'),
-  authBannerText: document.getElementById('auth-banner-text'),
-  authBannerBtn: document.getElementById('auth-banner-btn'),
   issueUrls: document.getElementById('issue-urls'),
   issueUrlsLabel: document.getElementById('issue-urls-label'),
+  enqueueQueuedCount: document.getElementById('enqueue-queued-count'),
+  enqueueInputHint: document.getElementById('enqueue-input-hint'),
+  enqueueHintExample: document.getElementById('enqueue-hint-example'),
+  enqueueInfoText: document.getElementById('enqueue-info-text'),
+  enqueueJiraHint: document.getElementById('enqueue-jira-hint'),
+  enqueueJiraSettingsLink: document.getElementById('enqueue-jira-settings-link'),
+  overviewTicketSource: document.getElementById('overview-ticket-source'),
   enqueueFeedback: document.getElementById('enqueue-feedback'),
-  enqueueHint: document.getElementById('enqueue-hint'),
   addBtn: document.getElementById('add-btn'),
   statsGrid: document.getElementById('stats-grid'),
   overviewRunning: document.getElementById('overview-running'),
@@ -241,7 +266,15 @@ const els = {
   settingsForm: document.getElementById('settings-form'),
   settingsBaseBranch: document.getElementById('settings-base-branch'),
   settingsModel: document.getElementById('settings-model'),
+  settingsModelPicker: document.getElementById('settings-model-picker'),
+  settingsModelTrigger: document.getElementById('settings-model-trigger'),
+  settingsModelValue: document.getElementById('settings-model-value'),
+  settingsModelPanel: document.getElementById('settings-model-panel'),
+  settingsModelList: document.getElementById('settings-model-list'),
+  settingsModelSearch: document.getElementById('settings-model-search'),
   settingsModelHint: document.getElementById('settings-model-hint'),
+  settingsLlmProvider: document.getElementById('settings-llm-provider'),
+  settingsLlmProviderHint: document.getElementById('settings-llm-provider-hint'),
   settingsMaxTurns: document.getElementById('settings-max-turns'),
   settingsTimeout: document.getElementById('settings-timeout'),
   settingsTimeoutMs: document.getElementById('settings-timeout-ms'),
@@ -282,6 +315,10 @@ const els = {
   settingsClaudeOauth: document.getElementById('settings-claude-oauth'),
   settingsClaudeOauthClear: document.getElementById('settings-claude-oauth-clear'),
   settingsClaudeOauthHint: document.getElementById('settings-claude-oauth-hint'),
+  settingsOpenrouterStatus: document.getElementById('settings-openrouter-status'),
+  settingsOpenrouterKey: document.getElementById('settings-openrouter-key'),
+  settingsOpenrouterKeyClear: document.getElementById('settings-openrouter-key-clear'),
+  settingsOpenrouterKeyHint: document.getElementById('settings-openrouter-key-hint'),
   settingsTabs: document.getElementById('settings-tabs'),
 };
 
@@ -1911,6 +1948,16 @@ function updateNavBadges(jobs) {
   setNavBadge(els.navBadgeRuns, running);
   setNavBadge(els.navBadgeReview, review);
   setNavBadge(els.navBadgeAlerts, alerts);
+  updateEnqueueQueuedCount(queued);
+}
+
+/**
+ * @param {number} count
+ */
+function updateEnqueueQueuedCount(count) {
+  if (!els.enqueueQueuedCount) return;
+  const n = Number.isFinite(count) && count >= 0 ? count : 0;
+  els.enqueueQueuedCount.textContent = `${n} queued`;
 }
 
 function collectAlerts(jobs) {
@@ -2928,93 +2975,833 @@ async function readJson(res) {
   }
 }
 
+function llmProviderLabel(provider) {
+  return provider === 'openrouter' ? 'OpenRouter' : 'Claude';
+}
+
+/**
+ * @param {'claude' | 'openrouter'} [provider]
+ * @param {string} [modelId]
+ * @returns {string}
+ */
+function agentDisplayText(provider = currentLlmProviderSelection(), modelId = currentModel) {
+  const providerName = llmProviderLabel(provider);
+  const modelText = isNoModelSelection(modelId) ? '—' : modelPickerDisplayText(modelId);
+  return `${providerName} • ${modelText}`;
+}
+
 function updateModelLabel() {
-  if (!els.modelCurrent) return;
-  const id = currentModel || '—';
-  els.modelCurrent.textContent = id;
-  els.modelCurrent.title = `Model: ${id} — change in Settings → Configuration`;
+  const provider = appConfig.llmProvider === 'openrouter' ? 'openrouter' : 'claude';
+  const providerName = llmProviderLabel(provider);
+  const modelText = isNoModelSelection(currentModel) ? '—' : currentModel;
+  const modelTitle = isNoModelSelection(currentModel)
+    ? 'none selected'
+    : currentModel;
+  const combined = agentDisplayText(provider, currentModel);
+
+  if (els.modelProvider) {
+    els.modelProvider.textContent = providerName;
+    els.modelProvider.title = `${providerName} — switch in Overview or Settings`;
+  }
+  if (els.modelCurrent) {
+    els.modelCurrent.textContent = modelText;
+    els.modelCurrent.title = `Model: ${modelTitle} — switch in Overview or Settings`;
+  }
+  if (els.modelCombined) {
+    els.modelCombined.textContent = combined;
+    els.modelCombined.title = combined;
+  }
+  syncAgentPickerDisplay();
+}
+
+/**
+ * @param {'claude' | 'openrouter'} [provider]
+ * @returns {Array<{id:string,label?:string,name?:string}>}
+ */
+function getAvailableModels(provider = currentLlmProviderSelection()) {
+  if (availableModelsProvider === provider) return availableModels;
+  return [];
+}
+
+/**
+ * @param {'claude' | 'openrouter'} provider
+ * @param {Array<{id:string,label?:string,name?:string}>} models
+ */
+function setAvailableModels(provider, models) {
+  availableModelsProvider = provider;
+  availableModels = models;
+}
+
+function clearAvailableModels() {
+  availableModels = [];
+  availableModelsProvider = null;
+}
+
+/**
+ * @param {string | undefined | null} value
+ * @returns {boolean}
+ */
+function isNoModelSelection(value) {
+  const s = String(value ?? '').trim();
+  return s === '' || s === NO_MODEL;
+}
+
+/**
+ * @param {string} [selectedId]
+ * @returns {string}
+ */
+function modelPickerDisplayText(selectedId = currentModel) {
+  if (isNoModelSelection(selectedId)) return '—';
+  const models = getAvailableModels();
+  const hit = models.find((m) => m.id === selectedId);
+  return hit ? modelPickerLabel(hit) : selectedId;
+}
+
+/**
+ * @typedef {Object} ModelComboboxInstance
+ * @property {HTMLElement} root
+ * @property {HTMLButtonElement} trigger
+ * @property {HTMLElement} panel
+ * @property {HTMLInputElement} search
+ * @property {HTMLElement} list
+ * @property {HTMLInputElement | null} [hiddenInput]
+ * @property {HTMLElement} valueEl
+ * @property {string} optionIdPrefix
+ * @property {boolean} open
+ * @property {number} activeIndex
+ * @property {(modelId: string) => void} onSelect
+ */
+
+/** @type {ModelComboboxInstance[]} */
+const modelComboboxes = [];
+
+/**
+ * @param {HTMLElement} panel
+ * @param {boolean} open
+ */
+function setOverlayPanelOpen(panel, open) {
+  panel.classList.toggle('is-open', open);
+  panel.setAttribute('aria-hidden', open ? 'false' : 'true');
+}
+
+/**
+ * @param {HTMLInputElement} input
+ */
+function focusWithoutScroll(input) {
+  try {
+    input.focus({ preventScroll: true });
+  } catch {
+    input.focus();
+  }
+}
+
+/**
+ * @param {{
+ *   root: HTMLElement,
+ *   trigger: HTMLButtonElement,
+ *   panel: HTMLElement,
+ *   search: HTMLInputElement,
+ *   list: HTMLElement,
+ *   hiddenInput?: HTMLInputElement | null,
+ *   valueEl: HTMLElement,
+ *   optionIdPrefix?: string,
+ *   onSelect: (modelId: string) => void,
+ * }} opts
+ * @returns {ModelComboboxInstance}
+ */
+function initModelCombobox(opts) {
+  /** @type {ModelComboboxInstance} */
+  const instance = {
+    root: opts.root,
+    trigger: opts.trigger,
+    panel: opts.panel,
+    search: opts.search,
+    list: opts.list,
+    hiddenInput: opts.hiddenInput ?? null,
+    valueEl: opts.valueEl,
+    optionIdPrefix: opts.optionIdPrefix || 'model-opt',
+    open: false,
+    activeIndex: -1,
+    onSelect: opts.onSelect,
+  };
+  modelComboboxes.push(instance);
+
+  instance.trigger.addEventListener('click', () => {
+    setModelComboboxOpen(instance, !instance.open);
+  });
+
+  instance.search.addEventListener('input', () => {
+    instance.activeIndex = -1;
+    renderModelComboboxList(instance, currentModel);
+  });
+
+  instance.search.addEventListener('keydown', (ev) => {
+    if (ev.key === 'Escape') {
+      ev.preventDefault();
+      setModelComboboxOpen(instance, false);
+      instance.trigger.focus();
+      return;
+    }
+    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+      ev.preventDefault();
+      const options = [
+        ...(instance.list.querySelectorAll('.model-picker-option') || []),
+      ];
+      if (!options.length) return;
+      if (ev.key === 'ArrowDown') {
+        instance.activeIndex =
+          instance.activeIndex < options.length - 1 ? instance.activeIndex + 1 : 0;
+      } else {
+        instance.activeIndex =
+          instance.activeIndex > 0 ? instance.activeIndex - 1 : options.length - 1;
+      }
+      renderModelComboboxList(instance, currentModel);
+      options[instance.activeIndex]?.scrollIntoView({ block: 'nearest' });
+    }
+    if (ev.key === 'Enter' && instance.activeIndex >= 0) {
+      ev.preventDefault();
+      const options = [
+        ...(instance.list.querySelectorAll('.model-picker-option') || []),
+      ];
+      const active = options[instance.activeIndex];
+      if (active?.dataset.modelId) {
+        instance.onSelect(active.dataset.modelId);
+        setModelComboboxOpen(instance, false);
+      }
+    }
+  });
+
+  return instance;
+}
+
+/**
+ * @param {ModelComboboxInstance} instance
+ * @param {string} [selectedId]
+ */
+function syncModelComboboxValue(instance, selectedId = currentModel) {
+  if (instance.hiddenInput) {
+    instance.hiddenInput.value = isNoModelSelection(selectedId) ? NO_MODEL : selectedId;
+  }
+  const text = modelPickerDisplayText(selectedId);
+  instance.valueEl.textContent = text;
+  instance.valueEl.classList.toggle('is-empty', isNoModelSelection(selectedId));
+}
+
+function syncAllModelComboboxValues(selectedId = currentModel) {
+  for (const cb of modelComboboxes) {
+    syncModelComboboxValue(cb, selectedId);
+  }
+  syncAgentPickerDisplay(selectedId);
+}
+
+/**
+ * @param {ModelComboboxInstance} instance
+ * @param {boolean} open
+ */
+function setModelComboboxOpen(instance, open) {
+  if (open) {
+    for (const cb of modelComboboxes) {
+      if (cb !== instance) setModelComboboxOpen(cb, false);
+    }
+    for (const ap of agentPickers) {
+      if (ap.open) setAgentPickerOpen(ap, false);
+    }
+  }
+
+  instance.open = open;
+  instance.trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
+  setOverlayPanelOpen(instance.panel, open);
+
+  if (open) {
+    instance.activeIndex = -1;
+    instance.search.value = '';
+    renderModelComboboxList(instance, currentModel);
+    focusWithoutScroll(instance.search);
+  } else {
+    instance.search.value = '';
+    renderModelComboboxList(instance, currentModel);
+  }
+}
+
+/**
+ * @param {ModelComboboxInstance} instance
+ * @returns {string}
+ */
+function getModelComboboxSearchQuery(instance) {
+  return instance.search?.value?.trim() || '';
+}
+
+/**
+ * @param {ModelComboboxInstance} instance
+ * @param {Array<{id:string,label?:string,name?:string}>} allModels
+ * @param {string} [selectedId]
+ * @returns {Array<{id:string,label?:string,name?:string}>}
+ */
+function modelsForCombobox(instance, allModels, selectedId) {
+  const query = getModelComboboxSearchQuery(instance);
+  return query
+    ? allModels.filter((m) => modelMatchesSearchQuery(m, query))
+    : [...allModels];
+}
+
+/**
+ * @param {ModelComboboxInstance} instance
+ * @param {string} [selectedId]
+ */
+function renderModelComboboxList(instance, selectedId = currentModel) {
+  const models = modelsForCombobox(instance, getAvailableModels(), selectedId);
+  const query = getModelComboboxSearchQuery(instance);
+
+  instance.list.innerHTML = '';
+  if (!models.length) {
+    const empty = document.createElement('li');
+    empty.className = 'model-picker-empty';
+    empty.textContent = query ? 'No models match your search' : 'No models available';
+    empty.setAttribute('role', 'presentation');
+    instance.list.appendChild(empty);
+    return;
+  }
+
+  models.forEach((m, index) => {
+    const li = document.createElement('li');
+    li.setAttribute('role', 'presentation');
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'model-picker-option';
+    btn.setAttribute('role', 'option');
+    btn.dataset.modelId = m.id;
+    btn.id = `${instance.optionIdPrefix}-${index}`;
+    if (m.id === selectedId) {
+      btn.classList.add('is-selected');
+      btn.setAttribute('aria-selected', 'true');
+    } else {
+      btn.setAttribute('aria-selected', 'false');
+    }
+    if (index === instance.activeIndex) {
+      btn.classList.add('is-active');
+    }
+
+    const title = document.createElement('span');
+    title.textContent = modelPickerLabel(m);
+    btn.appendChild(title);
+
+    if (m.id !== modelPickerLabel(m)) {
+      const sub = document.createElement('span');
+      sub.className = 'model-picker-option-id';
+      sub.textContent = m.id;
+      btn.appendChild(sub);
+    }
+
+    btn.addEventListener('click', () => {
+      instance.onSelect(m.id);
+      setModelComboboxOpen(instance, false);
+    });
+    li.appendChild(btn);
+    instance.list.appendChild(li);
+  });
+}
+
+function renderAllModelComboboxLists(selectedId = currentModel) {
+  for (const cb of modelComboboxes) {
+    renderModelComboboxList(cb, selectedId);
+  }
+  for (const ap of agentPickers) {
+    renderAgentPickerModelList(ap, selectedId);
+  }
+}
+
+/**
+ * @typedef {Object} AgentPickerInstance
+ * @property {HTMLElement} root
+ * @property {HTMLButtonElement} trigger
+ * @property {HTMLElement} panel
+ * @property {HTMLInputElement} search
+ * @property {HTMLElement} list
+ * @property {HTMLElement} valueEl
+ * @property {HTMLElement | null} iconEl
+ * @property {HTMLElement[]} tabs
+ * @property {HTMLInputElement | null} hiddenInput
+ * @property {string} optionIdPrefix
+ * @property {boolean} open
+ * @property {number} activeIndex
+ * @property {(modelId: string) => void} onSelect
+ */
+
+/** @type {AgentPickerInstance[]} */
+const agentPickers = [];
+
+const PROVIDER_UNAVAILABLE_TOOLTIP =
+  'Not configured — add credentials in Settings → Authentication';
+
+/**
+ * @param {'claude' | 'openrouter'} provider
+ * @param {typeof appConfig} [cfg]
+ */
+function isLlmProviderAvailable(provider, cfg = appConfig) {
+  if (cfg.stubAgent) return true;
+  if (provider === 'openrouter') return cfg.openrouterAuthOk === true;
+  return cfg.claudeAuthOk === true;
 }
 
 /**
- * @param {'anthropic' | 'fallback' | string | undefined} source
+ * Disable provider tabs and select options when auth is missing.
+ * @param {typeof appConfig} [cfg]
  */
-function updateModelSourceHint(source) {
+function syncLlmProviderAvailability(cfg = appConfig) {
+  for (const ap of agentPickers) {
+    for (const tab of ap.tabs) {
+      const provider =
+        tab.dataset.provider === 'openrouter' ? 'openrouter' : 'claude';
+      const available = isLlmProviderAvailable(provider, cfg);
+      tab.disabled = !available;
+      tab.classList.toggle('is-disabled', !available);
+      tab.setAttribute('aria-disabled', available ? 'false' : 'true');
+      if (available) {
+        tab.removeAttribute('title');
+      } else {
+        tab.title = PROVIDER_UNAVAILABLE_TOOLTIP;
+      }
+    }
+  }
+
+  for (const select of [els.settingsLlmProvider, els.overviewLlmProvider]) {
+    if (!select) continue;
+    for (const opt of select.options) {
+      const provider = opt.value === 'openrouter' ? 'openrouter' : 'claude';
+      const available = isLlmProviderAvailable(provider, cfg);
+      opt.disabled = !available;
+      if (available) {
+        opt.removeAttribute('title');
+      } else {
+        opt.title = PROVIDER_UNAVAILABLE_TOOLTIP;
+      }
+    }
+  }
+}
+
+/**
+ * @param {'claude' | 'openrouter'} provider
+ */
+function syncAgentPickerTabs(provider) {
+  const value = provider === 'openrouter' ? 'openrouter' : 'claude';
+  for (const ap of agentPickers) {
+    for (const tab of ap.tabs) {
+      const active = tab.dataset.provider === value;
+      tab.classList.toggle('is-active', active);
+      tab.setAttribute('aria-selected', active ? 'true' : 'false');
+    }
+    if (ap.iconEl) {
+      ap.iconEl.classList.toggle('agent-pill-icon--claude', value === 'claude');
+      ap.iconEl.classList.toggle('agent-pill-icon--openrouter', value === 'openrouter');
+    }
+  }
+}
+
+function syncAgentPickerDisplay(selectedId = currentModel) {
+  const provider = currentLlmProviderSelection();
+  const text = agentDisplayText(provider, selectedId);
+  for (const ap of agentPickers) {
+    ap.valueEl.textContent = text;
+    ap.valueEl.classList.toggle('is-empty', isNoModelSelection(selectedId));
+    if (ap.hiddenInput) {
+      ap.hiddenInput.value = isNoModelSelection(selectedId) ? NO_MODEL : selectedId;
+    }
+  }
+  syncAgentPickerTabs(provider);
+}
+
+/**
+ * @param {AgentPickerInstance} instance
+ * @param {boolean} open
+ */
+function setAgentPickerOpen(instance, open) {
+  if (open) {
+    for (const ap of agentPickers) {
+      if (ap !== instance) setAgentPickerOpen(ap, false);
+    }
+    for (const cb of modelComboboxes) {
+      if (cb.open) setModelComboboxOpen(cb, false);
+    }
+  }
+
+  instance.open = open;
+  instance.trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
+  setOverlayPanelOpen(instance.panel, open);
+
+  if (open) {
+    instance.activeIndex = -1;
+    instance.search.value = '';
+    syncAgentPickerTabs(currentLlmProviderSelection());
+    renderAgentPickerModelList(instance, currentModel);
+    focusWithoutScroll(instance.search);
+  } else {
+    instance.search.value = '';
+    renderAgentPickerModelList(instance, currentModel);
+  }
+}
+
+/**
+ * @param {AgentPickerInstance} instance
+ * @param {string} [selectedId]
+ */
+function renderAgentPickerModelList(instance, selectedId = currentModel) {
+  const models = modelsForCombobox(instance, getAvailableModels(), selectedId);
+  const query = getModelComboboxSearchQuery(instance);
+
+  instance.list.innerHTML = '';
+  if (!models.length) {
+    const empty = document.createElement('li');
+    empty.className = 'model-picker-empty';
+    empty.textContent = query ? 'No models match your search' : 'No models available';
+    empty.setAttribute('role', 'presentation');
+    instance.list.appendChild(empty);
+    return;
+  }
+
+  models.forEach((m, index) => {
+    const li = document.createElement('li');
+    li.setAttribute('role', 'presentation');
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'model-picker-option';
+    btn.setAttribute('role', 'option');
+    btn.dataset.modelId = m.id;
+    btn.id = `${instance.optionIdPrefix}-${index}`;
+    if (m.id === selectedId) {
+      btn.classList.add('is-selected');
+      btn.setAttribute('aria-selected', 'true');
+    } else {
+      btn.setAttribute('aria-selected', 'false');
+    }
+    if (index === instance.activeIndex) {
+      btn.classList.add('is-active');
+    }
+
+    const title = document.createElement('span');
+    title.textContent = modelPickerLabel(m);
+    btn.appendChild(title);
+
+    if (m.id !== modelPickerLabel(m)) {
+      const sub = document.createElement('span');
+      sub.className = 'model-picker-option-id';
+      sub.textContent = m.id;
+      btn.appendChild(sub);
+    }
+
+    btn.addEventListener('click', () => {
+      instance.onSelect(m.id);
+      setAgentPickerOpen(instance, false);
+    });
+    li.appendChild(btn);
+    instance.list.appendChild(li);
+  });
+}
+
+/**
+ * @param {{
+ *   root: HTMLElement,
+ *   trigger: HTMLButtonElement,
+ *   panel: HTMLElement,
+ *   search: HTMLInputElement,
+ *   list: HTMLElement,
+ *   valueEl: HTMLElement,
+ *   iconEl?: HTMLElement | null,
+ *   tabs?: HTMLElement[],
+ *   hiddenInput?: HTMLInputElement | null,
+ *   optionIdPrefix?: string,
+ *   onSelect: (modelId: string) => void,
+ * }} opts
+ * @returns {AgentPickerInstance}
+ */
+function initAgentPicker(opts) {
+  /** @type {AgentPickerInstance} */
+  const instance = {
+    root: opts.root,
+    trigger: opts.trigger,
+    panel: opts.panel,
+    search: opts.search,
+    list: opts.list,
+    valueEl: opts.valueEl,
+    iconEl: opts.iconEl ?? null,
+    tabs: opts.tabs || [],
+    hiddenInput: opts.hiddenInput ?? null,
+    optionIdPrefix: opts.optionIdPrefix || 'agent-model-opt',
+    open: false,
+    activeIndex: -1,
+    onSelect: opts.onSelect,
+  };
+  agentPickers.push(instance);
+
+  instance.trigger.addEventListener('click', () => {
+    setAgentPickerOpen(instance, !instance.open);
+  });
+
+  instance.search.addEventListener('input', () => {
+    instance.activeIndex = -1;
+    renderAgentPickerModelList(instance, currentModel);
+  });
+
+  instance.search.addEventListener('keydown', (ev) => {
+    if (ev.key === 'Escape') {
+      ev.preventDefault();
+      setAgentPickerOpen(instance, false);
+      instance.trigger.focus();
+      return;
+    }
+    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+      ev.preventDefault();
+      const options = [
+        ...(instance.list.querySelectorAll('.model-picker-option') || []),
+      ];
+      if (!options.length) return;
+      if (ev.key === 'ArrowDown') {
+        instance.activeIndex =
+          instance.activeIndex < options.length - 1 ? instance.activeIndex + 1 : 0;
+      } else {
+        instance.activeIndex =
+          instance.activeIndex > 0 ? instance.activeIndex - 1 : options.length - 1;
+      }
+      renderAgentPickerModelList(instance, currentModel);
+      options[instance.activeIndex]?.scrollIntoView({ block: 'nearest' });
+    }
+    if (ev.key === 'Enter' && instance.activeIndex >= 0) {
+      ev.preventDefault();
+      const options = [
+        ...(instance.list.querySelectorAll('.model-picker-option') || []),
+      ];
+      const active = options[instance.activeIndex];
+      if (active?.dataset.modelId) {
+        instance.onSelect(active.dataset.modelId);
+        setAgentPickerOpen(instance, false);
+      }
+    }
+  });
+
+  for (const tab of instance.tabs) {
+    tab.addEventListener('click', () => {
+      if (tab.disabled) return;
+      const provider =
+        tab.dataset.provider === 'openrouter' ? 'openrouter' : 'claude';
+      if (!isLlmProviderAvailable(provider)) return;
+      if (provider === currentLlmProviderSelection()) return;
+      syncLlmProviderSelects(provider);
+      syncAgentPickerTabs(provider);
+      void onLlmProviderChange(provider);
+    });
+  }
+
+  return instance;
+}
+
+/** @deprecated use syncModelComboboxValue */
+function syncModelPickerValue(selectedId = currentModel) {
+  syncAllModelComboboxValues(selectedId);
+}
+
+/**
+ * Reconcile current model against a provider's model list.
+ * @param {Array<{id:string}>} models
+ * @param {string} [candidate]
+ * @param {string} [storedCandidate] last valid model for this provider
+ * @returns {string}
+ */
+function reconcileModelForProvider(models, candidate = currentModel, storedCandidate) {
+  if (
+    !isNoModelSelection(candidate) &&
+    models.some((m) => m.id === candidate)
+  ) {
+    return candidate;
+  }
+  if (
+    storedCandidate &&
+    !isNoModelSelection(storedCandidate) &&
+    models.some((m) => m.id === storedCandidate)
+  ) {
+    return storedCandidate;
+  }
+  return NO_MODEL;
+}
+
+/**
+ * @param {'claude' | 'openrouter'} provider
+ * @returns {string | undefined}
+ */
+function lastModelForProvider(provider) {
+  const stored = appConfig.lastModelsByProvider?.[provider];
+  return typeof stored === 'string' && !isNoModelSelection(stored) ? stored : undefined;
+}
+
+/**
+ * @returns {Array<{id:string,label?:string,name?:string}>}
+ */
+function defaultModelsForProvider(provider = 'claude') {
+  if (provider === 'openrouter') {
+    return [
+      { id: 'anthropic/claude-sonnet-4', label: 'Claude Sonnet 4 (Anthropic)' },
+      { id: 'anthropic/claude-opus-4', label: 'Claude Opus 4 (Anthropic)' },
+      { id: 'anthropic/claude-3.5-sonnet', label: 'Claude 3.5 Sonnet (Anthropic)' },
+    ];
+  }
+  return [
+    { id: 'claude-sonnet-5', label: 'Sonnet 5' },
+    { id: 'claude-opus-5', label: 'Opus 5' },
+    { id: 'claude-fable-5', label: 'Fable 5' },
+    { id: 'claude-haiku-4-5', label: 'Haiku 4.5' },
+    { id: 'sonnet', label: 'sonnet (latest)' },
+    { id: 'opus', label: 'opus (latest)' },
+  ];
+}
+
+/**
+ * @param {'anthropic' | 'openrouter' | 'fallback' | string | undefined} source
+ * @param {'claude' | 'openrouter'} [provider]
+ */
+function updateModelSourceHint(source, provider = 'claude') {
   if (!els.settingsModelHint) return;
+  const name = provider === 'openrouter' ? 'OpenRouter' : 'Claude';
   if (source === 'anthropic') {
     els.settingsModelHint.textContent =
-      'Claude model for agent runs. List loaded from Anthropic Models API.';
-  } else if (source === 'fallback') {
+      `${name} model for agent runs. List loaded from Anthropic Models API.`;
+  } else if (source === 'openrouter') {
     els.settingsModelHint.textContent =
-      'Claude model for agent runs. Showing curated Claude Code models (live list unavailable — set an API key or use claude auth login).';
+      'OpenRouter model for agent runs (anthropic/* only — Claude Agent SDK uses Anthropic-compatible API). List loaded from OpenRouter Models API.';
+  } else if (source === 'fallback') {
+    if (provider === 'openrouter') {
+      els.settingsModelHint.textContent =
+        'OpenRouter model for agent runs (anthropic/* only). Showing curated Anthropic models (live list unavailable — set OPENROUTER_API_KEY in Authentication).';
+    } else {
+      els.settingsModelHint.textContent =
+        'Claude model for agent runs. Showing curated Claude Code models (live list unavailable — set an API key or use claude auth login).';
+    }
   } else {
-    els.settingsModelHint.textContent = 'Claude model for agent runs.';
+    els.settingsModelHint.textContent = `${name} model for agent runs.`;
   }
 }
 
 /**
- * @param {{ models?: Array<{id:string,label?:string,name?:string}>, selected?: string, source?: string }} data
+ * @param {{ id: string, label?: string, name?: string }} model
+ * @returns {string}
+ */
+function modelPickerLabel(model) {
+  return model.label || model.name || model.id;
+}
+
+/**
+ * @param {{ id: string, label?: string, name?: string }} model
+ * @param {string} query
+ * @returns {boolean}
+ */
+function modelMatchesSearchQuery(model, query) {
+  if (!query) return true;
+  const q = query.toLowerCase();
+  return [model.id, model.label, model.name]
+    .filter(Boolean)
+    .some((part) => String(part).toLowerCase().includes(q));
+}
+
+/**
+ * @returns {'claude' | 'openrouter'}
+ */
+function currentLlmProviderSelection() {
+  const fromOverview = els.overviewLlmProvider?.value;
+  if (fromOverview === 'openrouter' || fromOverview === 'claude') return fromOverview;
+  const fromForm = els.settingsLlmProvider?.value;
+  if (fromForm === 'openrouter' || fromForm === 'claude') return fromForm;
+  return appConfig.llmProvider === 'openrouter' ? 'openrouter' : 'claude';
+}
+
+/**
+ * @param {'claude' | 'openrouter'} provider
+ */
+function syncLlmProviderSelects(provider) {
+  const value = provider === 'openrouter' ? 'openrouter' : 'claude';
+  if (els.settingsLlmProvider) els.settingsLlmProvider.value = value;
+  if (els.overviewLlmProvider) els.overviewLlmProvider.value = value;
+  syncAgentPickerTabs(value);
+  if (els.settingsLlmProviderHint) {
+    els.settingsLlmProviderHint.textContent =
+      value === 'openrouter'
+        ? 'Agent runs route through OpenRouter (requires OPENROUTER_API_KEY). Use anthropic/* models only.'
+        : 'Agent runs use Claude via Anthropic API, OAuth token, or claude auth login.';
+  }
+}
+
+/**
+ * @param {{ models?: Array<{id:string,label?:string,name?:string}>, selected?: string, source?: string, provider?: string }} data
  */
 function populateSettingsModels(data) {
-  const models = Array.isArray(data?.models) && data.models.length
+  const provider = data?.provider || currentLlmProviderSelection();
+  const cached = getAvailableModels(provider);
+  const models = Array.isArray(data?.models)
     ? data.models
-    : availableModels.length
-      ? availableModels
-      : [
-          { id: 'claude-sonnet-5', label: 'Sonnet 5' },
-          { id: 'claude-opus-5', label: 'Opus 5' },
-          { id: 'claude-fable-5', label: 'Fable 5' },
-          { id: 'claude-haiku-4-5', label: 'Haiku 4.5' },
-        ];
-  availableModels = models;
-  if (data?.selected) currentModel = data.selected;
-  if (data?.source) updateModelSourceHint(data.source);
-
-  if (els.settingsModel) {
-    const currentIds = [...els.settingsModel.options].map((o) => o.value);
-    const nextIds = models.map((m) => m.id);
-    if (currentIds.join(',') !== nextIds.join(',')) {
-      els.settingsModel.innerHTML = '';
-      for (const m of models) {
-        const opt = document.createElement('option');
-        opt.value = m.id;
-        opt.textContent = m.label || m.name || m.id;
-        els.settingsModel.appendChild(opt);
-      }
-    }
-    const selected = currentModel;
-    if (selected && [...els.settingsModel.options].some((o) => o.value === selected)) {
-      els.settingsModel.value = selected;
-    }
+    : data?.reconcileProvider
+      ? []
+      : cached.length
+        ? cached
+        : defaultModelsForProvider(provider);
+  setAvailableModels(provider, models);
+
+  if (data?.reconcileProvider) {
+    currentModel = reconcileModelForProvider(
+      models,
+      data.reconcileCandidate,
+      lastModelForProvider(provider)
+    );
+  } else if (data?.selected != null) {
+    const next = isNoModelSelection(data.selected) ? NO_MODEL : data.selected;
+    currentModel = reconcileModelForProvider(models, next, lastModelForProvider(provider));
   }
+  if (data?.source) updateModelSourceHint(data.source, provider);
+
+  syncAllModelComboboxValues(currentModel);
+  renderAllModelComboboxLists(currentModel);
   updateModelLabel();
 }
 
+function modelsForFetchFallback(provider, reconcileProvider) {
+  if (reconcileProvider) return [];
+  const cached = getAvailableModels(provider);
+  if (cached.length) return cached;
+  return defaultModelsForProvider(provider);
+}
+
 async function fetchModels(opts = {}) {
   const refresh = opts.refresh === true;
+  const provider = opts.provider || currentLlmProviderSelection();
+  const reconcileProvider = opts.reconcileProvider === true;
+  const reconcileCandidate = opts.reconcileCandidate;
+  if (reconcileProvider) {
+    clearAvailableModels();
+  }
+  const query = new URLSearchParams({ provider });
+  if (refresh) query.set('refresh', '1');
   try {
-    const res = await fetch(refresh ? '/api/models?refresh=1' : '/api/models');
+    const res = await fetch(`/api/models?${query.toString()}`);
     if (!res.ok) {
       populateSettingsModels({
-        models: availableModels.length
-          ? availableModels
-          : [
-              { id: currentModel || 'claude-sonnet-5', label: currentModel || 'claude-sonnet-5' },
-            ],
+        models: modelsForFetchFallback(provider, reconcileProvider),
         selected: currentModel,
+        provider,
+        reconcileProvider,
+        reconcileCandidate,
       });
       return;
     }
     const data = await readJson(res);
-    populateSettingsModels(data);
+    populateSettingsModels({
+      ...data,
+      provider: data.provider || provider,
+      reconcileProvider,
+      reconcileCandidate,
+    });
   } catch (err) {
     console.error('Failed to fetch models:', err);
     populateSettingsModels({
-      models: availableModels.length
-        ? availableModels
-        : [
-            { id: currentModel || 'claude-sonnet-5', label: currentModel || 'claude-sonnet-5' },
-          ],
+      models: modelsForFetchFallback(provider, reconcileProvider),
       selected: currentModel,
+      provider,
+      reconcileProvider,
+      reconcileCandidate,
     });
   }
 }
@@ -3133,6 +3920,13 @@ function claudeStatusText(cfg) {
   }
 }
 
+function openrouterStatusText(cfg) {
+  if (cfg.openrouterAuthOk) {
+    return 'Authenticated via OPENROUTER_API_KEY';
+  }
+  return 'Not authenticated — add an OpenRouter API key below';
+}
+
 function fillAuthSettings(cfg) {
   if (els.settingsGhStatus) {
     els.settingsGhStatus.textContent = ghStatusText(cfg);
@@ -3163,8 +3957,9 @@ function fillAuthSettings(cfg) {
 
   if (els.settingsClaudeStatus) {
     els.settingsClaudeStatus.textContent = claudeStatusText(cfg);
-    els.settingsClaudeStatus.className =
-      cfg.claudeAuthOk ? 'auth-status ok' : 'auth-status err';
+    els.settingsClaudeStatus.className = cfg.claudeAuthOk
+      ? 'auth-status ok'
+      : 'auth-status err';
   }
   fillSecretInput(
     els.settingsAnthropicKey,
@@ -3190,6 +3985,25 @@ function fillAuthSettings(cfg) {
       ? 'OAuth token stored in <code>.acdev/.env</code> as <code>CLAUDE_CODE_OAUTH_TOKEN</code>. Settings cannot complete browser OAuth — that still needs <code>claude auth login</code> on this host.'
       : 'From <code>claude setup-token</code> for non-interactive subscription auth. Stored as <code>CLAUDE_CODE_OAUTH_TOKEN</code>. Settings cannot complete browser OAuth — that still needs <code>claude auth login</code> on this host.';
   }
+
+  if (els.settingsOpenrouterStatus) {
+    els.settingsOpenrouterStatus.textContent = openrouterStatusText(cfg);
+    els.settingsOpenrouterStatus.className = cfg.openrouterAuthOk
+      ? 'auth-status ok'
+      : 'auth-status err';
+  }
+  fillSecretInput(
+    els.settingsOpenrouterKey,
+    els.settingsOpenrouterKeyClear,
+    Boolean(cfg.openrouterApiKeySet),
+    cfg.openrouterApiKeyMasked,
+    'Paste an OpenRouter API key'
+  );
+  if (els.settingsOpenrouterKeyHint) {
+    els.settingsOpenrouterKeyHint.innerHTML = cfg.openrouterApiKeySet
+      ? 'API key stored in <code>.acdev/.env</code> as <code>OPENROUTER_API_KEY</code> (not committed).'
+      : 'Required when LLM provider is OpenRouter. Get a key at <a href="https://openrouter.ai/keys" target="_blank" rel="noopener noreferrer">openrouter.ai/keys</a>. Stored as <code>OPENROUTER_API_KEY</code> in <code>.acdev/.env</code>.';
+  }
 }
 
 function fillSettingsForm(cfg) {
@@ -3269,16 +4083,23 @@ function fillSettingsForm(cfg) {
     els.settingsBaseBranch.value = cfg.baseBranch || '';
   }
 
-  if (els.settingsModel) {
-    if (availableModels.length) {
-      populateSettingsModels({ models: availableModels, selected: cfg.model || currentModel });
-    } else if (cfg.model) {
+  if (els.settingsLlmProvider) {
+    syncLlmProviderSelects(cfg.llmProvider === 'openrouter' ? 'openrouter' : 'claude');
+  }
+
+  if (els.settingsModelPicker) {
+    const provider = cfg.llmProvider === 'openrouter' ? 'openrouter' : 'claude';
+    if (getAvailableModels(provider).length) {
       populateSettingsModels({
-        models: [{ id: cfg.model, label: cfg.model }],
-        selected: cfg.model,
+        models: getAvailableModels(provider),
+        selected: cfg.model ?? currentModel,
+        provider,
       });
+    } else if (cfg.model != null) {
+      currentModel = isNoModelSelection(cfg.model) ? NO_MODEL : cfg.model;
+      syncModelPickerValue(currentModel);
     }
-    void fetchModels();
+    void fetchModels({ provider });
   }
 
   if (els.settingsMaxTurns) {
@@ -3361,10 +4182,12 @@ function updateGithubRuleFieldsVisibility() {
 function updateTicketSourceUI(source) {
   ticketSource = source === 'jira' ? 'jira' : 'github';
 
-  if (els.settingsTicketSource) {
-    els.settingsTicketSource.querySelectorAll('.source-btn').forEach((btn) => {
+  for (const toggle of [els.settingsTicketSource, els.overviewTicketSource]) {
+    if (!toggle) continue;
+    toggle.querySelectorAll('.source-btn').forEach((btn) => {
       const active = btn.dataset.source === ticketSource;
       btn.classList.toggle('active', active);
+      btn.setAttribute('aria-pressed', active ? 'true' : 'false');
     });
   }
 
@@ -3382,11 +4205,9 @@ function updateTicketSourceUI(source) {
 
   if (els.issueUrls) {
     if (ticketSource === 'jira') {
-      els.issueUrls.placeholder =
-        'Paste Jira keys or browse URLs — one per line, or comma-separated\ne.g. PROJ-123 or https://your-domain.atlassian.net/browse/PROJ-123';
+      els.issueUrls.placeholder = 'Paste Jira keys or browse URLs…';
     } else {
-      els.issueUrls.placeholder =
-        'Paste GitHub issue links — one per line, or comma-separated\ne.g. https://github.com/acme/storefront/issues/482';
+      els.issueUrls.placeholder = 'Paste GitHub issue links or URLs…';
     }
   }
 
@@ -3395,11 +4216,24 @@ function updateTicketSourceUI(source) {
       ticketSource === 'jira' ? 'Jira issue keys or URLs' : 'GitHub issue URLs';
   }
 
-  if (els.enqueueHint && !els.enqueueHint.classList.contains('hidden')) {
-    els.enqueueHint.textContent =
-      ticketSource === 'jira'
-        ? 'Jira issues run one at a time. PRs still open on GitHub via gh.'
-        : 'Issues run one at a time, each in its own workspace and branch.';
+  if (els.enqueueHintExample) {
+    els.enqueueHintExample.textContent =
+      ticketSource === 'jira' ? 'PROJ-123' : 'owner/repo#42';
+  }
+
+  if (els.enqueueInfoText) {
+    if (ticketSource === 'jira') {
+      els.enqueueInfoText.innerHTML =
+        '<strong>Jira issues run one at a time.</strong> Open GitHub PRs are picked up automatically via gh.';
+    } else {
+      els.enqueueInfoText.innerHTML =
+        '<strong>GitHub issues run one at a time.</strong> Open PRs are picked up automatically via gh.';
+    }
+  }
+
+  if (els.enqueueJiraHint) {
+    const showJiraHint = ticketSource === 'jira' && !appConfig.jiraConfigured;
+    els.enqueueJiraHint.classList.toggle('hidden', !showJiraHint);
   }
 
   if (els.overviewQueueEmpty) {
@@ -3410,6 +4244,27 @@ function updateTicketSourceUI(source) {
   }
 }
 
+/**
+ * @param {'github' | 'jira'} next
+ */
+async function saveTicketSource(next) {
+  const source = next === 'jira' ? 'jira' : 'github';
+  updateTicketSourceUI(source);
+  try {
+    const res = await fetch('/api/config', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ticketSource: source }),
+    });
+    const data = await readJson(res);
+    if (res.ok) {
+      applyConfigSnapshot({ ...appConfig, ...data });
+    }
+  } catch {
+    // local UI already updated; save via Settings if needed
+  }
+}
+
 function updateTimeoutMsHint(minutes) {
   if (!els.settingsTimeoutMs) return;
   const m = Number(minutes);
@@ -3420,10 +4275,94 @@ function updateTimeoutMsHint(minutes) {
   els.settingsTimeoutMs.textContent = String(Math.round(m * 60_000));
 }
 
+function setOverviewLlmFeedback(message, kind = 'ok') {
+  if (!els.overviewLlmFeedback) return;
+  if (!message) {
+    els.overviewLlmFeedback.textContent = '';
+    els.overviewLlmFeedback.className = 'feedback hidden';
+    return;
+  }
+  els.overviewLlmFeedback.textContent = message;
+  els.overviewLlmFeedback.className = `feedback ${kind}`;
+  els.overviewLlmFeedback.classList.remove('hidden');
+}
+
+/**
+ * @param {typeof appConfig} cfg
+ */
+function fillOverviewLlmControls(cfg) {
+  if (!cfg) return;
+  const provider = cfg.llmProvider === 'openrouter' ? 'openrouter' : 'claude';
+  syncLlmProviderSelects(provider);
+  syncAllModelComboboxValues(currentModel);
+}
+
+let llmConfigSaving = false;
+
+/**
+ * PATCH llmProvider and/or model immediately (Overview switcher).
+ * @param {{ llmProvider?: 'claude' | 'openrouter', model?: string }} patch
+ */
+async function patchLlmConfig(patch) {
+  if (llmConfigSaving) return;
+  llmConfigSaving = true;
+  setOverviewLlmFeedback(null);
+  try {
+    const res = await fetch('/api/config', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(patch),
+    });
+    const data = await readJson(res);
+    if (!res.ok) {
+      setOverviewLlmFeedback(data.error || `Update failed (HTTP ${res.status})`, 'error');
+      return;
+    }
+    applyConfigSnapshot(data);
+    fillOverviewLlmControls(data);
+    if (currentView === 'settings') {
+      fillSettingsForm(data);
+    }
+    setOverviewLlmFeedback('LLM updated. Next jobs will use these values.', 'ok');
+    window.setTimeout(() => setOverviewLlmFeedback(null), 2500);
+  } catch (err) {
+    setOverviewLlmFeedback(err.message || 'Update failed', 'error');
+  } finally {
+    llmConfigSaving = false;
+  }
+}
+
+/**
+ * @param {'claude' | 'openrouter'} provider
+ */
+async function onLlmProviderChange(provider) {
+  const previousModel = currentModel;
+  syncLlmProviderSelects(provider);
+  clearAvailableModels();
+  currentModel = NO_MODEL;
+  syncAllModelComboboxValues(currentModel);
+  renderAllModelComboboxLists(currentModel);
+  updateModelLabel();
+  await fetchModels({
+    refresh: true,
+    provider,
+    reconcileProvider: true,
+    reconcileCandidate: previousModel,
+  });
+  await patchLlmConfig({
+    llmProvider: provider,
+    model: currentModel,
+  });
+}
+
 function applyConfigSnapshot(data) {
   appConfig = data || {};
-  if (data?.model) currentModel = data.model;
+  if (data?.model != null) {
+    currentModel = isNoModelSelection(data.model) ? NO_MODEL : data.model;
+  }
+  syncAllModelComboboxValues(currentModel);
   updateModelLabel();
+  fillOverviewLlmControls(data);
   updateTicketSourceUI(data?.ticketSource === 'jira' ? 'jira' : 'github');
   if (els.repoName) {
     els.repoName.textContent = data?.repoName || 'local repo';
@@ -3431,33 +4370,12 @@ function applyConfigSnapshot(data) {
   if (els.repoBranch) {
     els.repoBranch.textContent = data?.baseBranch || '—';
   }
-  updateAuthBanner(appConfig);
+  syncLlmProviderAvailability(appConfig);
   if (currentView === 'settings') {
     fillSettingsForm(appConfig);
   }
 }
 
-/**
- * Surface missing GitHub / Claude auth on Overview so users can open Settings.
- * @param {typeof appConfig} cfg
- */
-function updateAuthBanner(cfg) {
-  if (!els.authBanner || !els.authBannerText) return;
-  const missing = [];
-  if (!cfg.ghAuthOk) missing.push('GitHub');
-  if (!cfg.claudeAuthOk && !cfg.stubAgent) missing.push('Claude');
-  if (missing.length === 0) {
-    els.authBanner.classList.add('hidden');
-    els.authBanner.hidden = true;
-    els.authBannerText.textContent = '';
-    return;
-  }
-  const label = missing.join(' and ');
-  els.authBannerText.textContent = `Configure ${label} in Settings → Authentication before starting jobs.`;
-  els.authBanner.classList.remove('hidden');
-  els.authBanner.hidden = false;
-}
-
 async function fetchConfig() {
   try {
     const res = await fetch('/api/config');
@@ -3471,7 +4389,8 @@ async function fetchConfig() {
 
 function readSettingsForm() {
   const baseBranch = els.settingsBaseBranch?.value?.trim() || '';
-  const model = els.settingsModel?.value || currentModel;
+  const rawModel = els.settingsModel?.value ?? currentModel;
+  const model = isNoModelSelection(rawModel) ? NO_MODEL : rawModel;
   const maxAgentTurns = Number(els.settingsMaxTurns?.value);
   const timeoutMinutes = Number(els.settingsTimeout?.value);
   const testRaw = els.settingsTestCommand?.value ?? '';
@@ -3485,6 +4404,7 @@ function readSettingsForm() {
   const patch = {
     baseBranch,
     model,
+    llmProvider: els.settingsLlmProvider?.value === 'openrouter' ? 'openrouter' : 'claude',
     maxAgentTurns,
     agentTimeoutMs: Math.round(timeoutMinutes * 60_000),
     testCommand: testTrimmed === '' ? null : testTrimmed,
@@ -3498,6 +4418,8 @@ function readSettingsForm() {
   if (anthropicApiKey !== undefined) patch.anthropicApiKey = anthropicApiKey;
   const claudeOauthToken = secretPatchValue(els.settingsClaudeOauth);
   if (claudeOauthToken !== undefined) patch.claudeOauthToken = claudeOauthToken;
+  const openrouterApiKey = secretPatchValue(els.settingsOpenrouterKey);
+  if (openrouterApiKey !== undefined) patch.openrouterApiKey = openrouterApiKey;
 
   if (ticketSource === 'jira' || els.settingsJiraBaseUrl?.value) {
     patch.jiraBaseUrl = els.settingsJiraBaseUrl?.value?.trim() || '';
@@ -3587,11 +4509,6 @@ document.querySelectorAll('.nav-item').forEach((btn) => {
   btn.addEventListener('click', () => setView(/** @type {ViewId} */ (btn.dataset.view)));
 });
 
-els.authBannerBtn?.addEventListener('click', () => {
-  setView('settings');
-  setSettingsTab('auth');
-});
-
 els.themeToggle.addEventListener('click', () => {
   const next = els.app.dataset.theme === 'dark' ? 'light' : 'dark';
   applyTheme(next);
@@ -3670,10 +4587,141 @@ bindSecretClear(
   els.settingsClaudeOauthHint,
   'Saved CLAUDE_CODE_OAUTH_TOKEN will be removed when you click Save settings.'
 );
+bindSecretClear(
+  els.settingsOpenrouterKeyClear,
+  els.settingsOpenrouterKey,
+  els.settingsOpenrouterKeyHint,
+  'Saved OPENROUTER_API_KEY will be removed when you click Save settings.'
+);
+
+
+document.addEventListener('click', (ev) => {
+  const target = /** @type {Node | null} */ (ev.target);
+  for (const cb of modelComboboxes) {
+    if (!cb.open) continue;
+    if (cb.root.contains(target)) continue;
+    setModelComboboxOpen(cb, false);
+  }
+  for (const ap of agentPickers) {
+    if (!ap.open) continue;
+    if (ap.root.contains(target)) continue;
+    setAgentPickerOpen(ap, false);
+  }
+});
+
+document.addEventListener('keydown', (ev) => {
+  if (ev.key !== 'Escape') return;
+  for (const ap of agentPickers) {
+    if (!ap.open) continue;
+    setAgentPickerOpen(ap, false);
+    ap.trigger.focus();
+    return;
+  }
+  for (const cb of modelComboboxes) {
+    if (!cb.open) continue;
+    setModelComboboxOpen(cb, false);
+    cb.trigger.focus();
+    break;
+  }
+});
+
+els.settingsLlmProvider?.addEventListener('change', () => {
+  const provider = currentLlmProviderSelection();
+  if (!isLlmProviderAvailable(provider)) {
+    const fallback =
+      appConfig.llmProvider === 'openrouter' ? 'openrouter' : 'claude';
+    syncLlmProviderSelects(fallback);
+    return;
+  }
+  for (const cb of modelComboboxes) {
+    setModelComboboxOpen(cb, false);
+  }
+  void onLlmProviderChange(provider);
+});
+
+els.overviewLlmProvider?.addEventListener('change', () => {
+  const provider =
+    els.overviewLlmProvider.value === 'openrouter' ? 'openrouter' : 'claude';
+  if (!isLlmProviderAvailable(provider)) {
+    const fallback =
+      appConfig.llmProvider === 'openrouter' ? 'openrouter' : 'claude';
+    syncLlmProviderSelects(fallback);
+    return;
+  }
+  for (const cb of modelComboboxes) {
+    setModelComboboxOpen(cb, false);
+  }
+  for (const ap of agentPickers) {
+    setAgentPickerOpen(ap, false);
+  }
+  void onLlmProviderChange(provider);
+});
+
+if (
+  els.settingsModelPicker &&
+  els.settingsModelTrigger &&
+  els.settingsModelPanel &&
+  els.settingsModelSearch &&
+  els.settingsModelList &&
+  els.settingsModelValue
+) {
+  initModelCombobox({
+    root: els.settingsModelPicker,
+    trigger: els.settingsModelTrigger,
+    panel: els.settingsModelPanel,
+    search: els.settingsModelSearch,
+    list: els.settingsModelList,
+    hiddenInput: els.settingsModel,
+    valueEl: els.settingsModelValue,
+    optionIdPrefix: 'settings-model-opt',
+    onSelect: (modelId) => {
+      currentModel = isNoModelSelection(modelId) ? NO_MODEL : modelId;
+      syncAllModelComboboxValues(currentModel);
+      renderAllModelComboboxLists(currentModel);
+      updateModelLabel();
+    },
+  });
+}
+
+if (
+  els.overviewAgentPicker &&
+  els.overviewAgentTrigger &&
+  els.overviewAgentPanel &&
+  els.overviewAgentSearch &&
+  els.overviewAgentModelList &&
+  els.overviewAgentValue
+) {
+  initAgentPicker({
+    root: els.overviewAgentPicker,
+    trigger: els.overviewAgentTrigger,
+    panel: els.overviewAgentPanel,
+    search: els.overviewAgentSearch,
+    list: els.overviewAgentModelList,
+    valueEl: els.overviewAgentValue,
+    iconEl: els.overviewAgentIcon,
+    tabs: [
+      ...(els.overviewAgentPanel.querySelectorAll('.agent-picker-tab') || []),
+    ],
+    hiddenInput: els.overviewModel,
+    optionIdPrefix: 'overview-agent-model-opt',
+    onSelect: (modelId) => {
+      currentModel = isNoModelSelection(modelId) ? NO_MODEL : modelId;
+      syncAllModelComboboxValues(currentModel);
+      renderAllModelComboboxLists(currentModel);
+      updateModelLabel();
+      void patchLlmConfig({ model: currentModel });
+    },
+  });
+}
+
+els.issueUrls?.addEventListener('keydown', (ev) => {
+  if (ev.key !== 'Enter' || ev.shiftKey || ev.metaKey || ev.ctrlKey || ev.altKey) return;
+  ev.preventDefault();
+  els.addBtn?.click();
+});
 
 els.addBtn.addEventListener('click', async () => {
   els.enqueueFeedback.classList.add('hidden');
-  if (els.enqueueHint) els.enqueueHint.classList.remove('hidden');
   const text = els.issueUrls.value.trim();
   if (!text) return;
 
@@ -3687,7 +4735,6 @@ els.addBtn.addEventListener('click', async () => {
     });
     const data = await res.json();
     if (!res.ok) {
-      if (els.enqueueHint) els.enqueueHint.classList.add('hidden');
       els.enqueueFeedback.textContent =
         data.error + (data.invalidUrls ? `: ${data.invalidUrls.join(', ')}` : '');
       els.enqueueFeedback.className = 'feedback error';
@@ -3701,7 +4748,6 @@ els.addBtn.addEventListener('click', async () => {
       parts.push(`Skipped duplicates: ${data.skipped.join(', ')}`);
     }
     if (parts.length) {
-      if (els.enqueueHint) els.enqueueHint.classList.add('hidden');
       els.enqueueFeedback.textContent = parts.join(' · ');
       els.enqueueFeedback.className =
         'feedback ' + (data.skipped?.length ? 'warn' : 'ok');
@@ -3713,31 +4759,27 @@ els.addBtn.addEventListener('click', async () => {
       selectRun(data.jobs[0].id);
     }
   } catch (err) {
-    if (els.enqueueHint) els.enqueueHint.classList.add('hidden');
     els.enqueueFeedback.textContent = err.message;
     els.enqueueFeedback.className = 'feedback error';
     els.enqueueFeedback.classList.remove('hidden');
   }
 });
 
-els.settingsTicketSource?.addEventListener('click', async (e) => {
+function handleTicketSourceToggleClick(e) {
   const btn = e.target.closest('.source-btn');
   if (!btn?.dataset.source) return;
   const next = btn.dataset.source === 'jira' ? 'jira' : 'github';
-  updateTicketSourceUI(next);
-  try {
-    const res = await fetch('/api/config', {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ ticketSource: next }),
-    });
-    const data = await readJson(res);
-    if (res.ok) {
-      applyConfigSnapshot({ ...appConfig, ...data });
-    }
-  } catch {
-    // local UI already updated; save via Settings if needed
-  }
+  if (next === ticketSource) return;
+  void saveTicketSource(next);
+}
+
+els.settingsTicketSource?.addEventListener('click', handleTicketSourceToggleClick);
+els.overviewTicketSource?.addEventListener('click', handleTicketSourceToggleClick);
+
+els.enqueueJiraSettingsLink?.addEventListener('click', (e) => {
+  e.preventDefault();
+  setView('settings');
+  setSettingsTab('ticket');
 });
 
 els.jiraTestBtn?.addEventListener('click', async () => {