acdev 1.0.2 → 1.0.4

package/public/app.js

@@ -124,10 +124,13 @@ let reviewDrafts = {};
 let reviewFileLists = {};
 /** @type {Record<string, Set<string>>} excluded paths per job while reviewing */
 let reviewExcludedByJob = {};
-let modelSaving = false;
 let settingsSaving = false;
+/** @type {'ticket' | 'auth' | 'rules' | 'config'} */
+let settingsTab = 'ticket';
 /** @type {string} */
 let currentModel = 'claude-sonnet-5';
+/** @type {Array<{id:string,label?:string,name?:string}>} */
+let availableModels = [];
 /** @type {'github' | 'jira'} */
 let ticketSource = 'github';
 /** @type {{
@@ -147,6 +150,20 @@ let ticketSource = 'github';
  *   jiraApiTokenMasked?: string | null,
  *   jiraConfigured?: boolean,
  *   jiraPrLinkPhrase?: string,
+ *   ghAuthOk?: boolean,
+ *   ghInstalled?: boolean,
+ *   ghTokenSet?: boolean,
+ *   ghTokenMasked?: string | null,
+ *   ghAuthMethod?: 'token' | 'gh-login' | null,
+ *   originRemoteUrl?: string | null,
+ *   originRemoteSsh?: boolean,
+ *   claudeAuthOk?: boolean,
+ *   claudeAuthMethod?: string,
+ *   anthropicApiKeySet?: boolean,
+ *   anthropicApiKeyMasked?: string | null,
+ *   claudeOauthTokenSet?: boolean,
+ *   claudeOauthTokenMasked?: string | null,
+ *   stubAgent?: boolean,
  * }} */
 let appConfig = {};
 
@@ -157,11 +174,14 @@ const els = {
   repoName: document.getElementById('repo-name'),
   repoBranch: document.getElementById('repo-branch'),
   ticketSourceMeta: document.getElementById('ticket-source-meta'),
-  modelToggle: document.getElementById('model-toggle'),
+  modelCurrent: document.getElementById('model-current'),
   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'),
   enqueueFeedback: document.getElementById('enqueue-feedback'),
@@ -221,6 +241,7 @@ const els = {
   settingsForm: document.getElementById('settings-form'),
   settingsBaseBranch: document.getElementById('settings-base-branch'),
   settingsModel: document.getElementById('settings-model'),
+  settingsModelHint: document.getElementById('settings-model-hint'),
   settingsMaxTurns: document.getElementById('settings-max-turns'),
   settingsTimeout: document.getElementById('settings-timeout'),
   settingsTimeoutMs: document.getElementById('settings-timeout-ms'),
@@ -238,13 +259,30 @@ const els = {
   jiraTestBtn: document.getElementById('jira-test-btn'),
   jiraStatus: document.getElementById('jira-status'),
   settingsJiraRuleEnabled: document.getElementById('settings-jira-rule-enabled'),
+  settingsJiraRuleAction: document.getElementById('settings-jira-rule-action'),
   settingsJiraRuleStatus: document.getElementById('settings-jira-rule-status'),
+  settingsJiraRuleStatusField: document.getElementById('settings-jira-rule-status-field'),
+  settingsJiraRuleLabel: document.getElementById('settings-jira-rule-label'),
+  settingsJiraRuleLabelField: document.getElementById('settings-jira-rule-label-field'),
   settingsGithubRuleEnabled: document.getElementById('settings-github-rule-enabled'),
   settingsGithubRuleAction: document.getElementById('settings-github-rule-action'),
+  settingsGithubRuleStatus: document.getElementById('settings-github-rule-status'),
+  settingsGithubRuleStatusField: document.getElementById('settings-github-rule-status-field'),
   settingsGithubRuleLabel: document.getElementById('settings-github-rule-label'),
   settingsGithubRuleLabelField: document.getElementById('settings-github-rule-label-field'),
-  jiraRulesPanel: document.getElementById('jira-rules-panel'),
-  githubRulesPanel: document.getElementById('github-rules-panel'),
+  settingsGhStatus: document.getElementById('settings-gh-status'),
+  settingsGhOrigin: document.getElementById('settings-gh-origin'),
+  settingsGhToken: document.getElementById('settings-gh-token'),
+  settingsGhTokenClear: document.getElementById('settings-gh-token-clear'),
+  settingsGhTokenHint: document.getElementById('settings-gh-token-hint'),
+  settingsClaudeStatus: document.getElementById('settings-claude-status'),
+  settingsAnthropicKey: document.getElementById('settings-anthropic-key'),
+  settingsAnthropicKeyClear: document.getElementById('settings-anthropic-key-clear'),
+  settingsAnthropicKeyHint: document.getElementById('settings-anthropic-key-hint'),
+  settingsClaudeOauth: document.getElementById('settings-claude-oauth'),
+  settingsClaudeOauthClear: document.getElementById('settings-claude-oauth-clear'),
+  settingsClaudeOauthHint: document.getElementById('settings-claude-oauth-hint'),
+  settingsTabs: document.getElementById('settings-tabs'),
 };
 
 function loadDismissed() {
@@ -2890,13 +2928,94 @@ async function readJson(res) {
   }
 }
 
-function updateModelButtons() {
-  els.modelToggle.querySelectorAll('.model-btn').forEach((btn) => {
-    btn.classList.toggle('active', btn.dataset.model === currentModel);
-  });
-  if (els.settingsModel && els.settingsModel.value !== currentModel) {
-    const opt = [...els.settingsModel.options].find((o) => o.value === currentModel);
-    if (opt) els.settingsModel.value = currentModel;
+function updateModelLabel() {
+  if (!els.modelCurrent) return;
+  const id = currentModel || '—';
+  els.modelCurrent.textContent = id;
+  els.modelCurrent.title = `Model: ${id} — change in Settings → Configuration`;
+}
+
+/**
+ * @param {'anthropic' | 'fallback' | string | undefined} source
+ */
+function updateModelSourceHint(source) {
+  if (!els.settingsModelHint) return;
+  if (source === 'anthropic') {
+    els.settingsModelHint.textContent =
+      'Claude model for agent runs. List loaded from Anthropic Models API.';
+  } else if (source === 'fallback') {
+    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.';
+  }
+}
+
+/**
+ * @param {{ models?: Array<{id:string,label?:string,name?:string}>, selected?: string, source?: string }} data
+ */
+function populateSettingsModels(data) {
+  const models = Array.isArray(data?.models) && data.models.length
+    ? 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;
+    }
+  }
+  updateModelLabel();
+}
+
+async function fetchModels(opts = {}) {
+  const refresh = opts.refresh === true;
+  try {
+    const res = await fetch(refresh ? '/api/models?refresh=1' : '/api/models');
+    if (!res.ok) {
+      populateSettingsModels({
+        models: availableModels.length
+          ? availableModels
+          : [
+              { id: currentModel || 'claude-sonnet-5', label: currentModel || 'claude-sonnet-5' },
+            ],
+        selected: currentModel,
+      });
+      return;
+    }
+    const data = await readJson(res);
+    populateSettingsModels(data);
+  } catch (err) {
+    console.error('Failed to fetch models:', err);
+    populateSettingsModels({
+      models: availableModels.length
+        ? availableModels
+        : [
+            { id: currentModel || 'claude-sonnet-5', label: currentModel || 'claude-sonnet-5' },
+          ],
+      selected: currentModel,
+    });
   }
 }
 
@@ -2924,9 +3043,160 @@ function knownToolsList(cfg = appConfig) {
     : DEFAULT_KNOWN_TOOLS;
 }
 
+/**
+ * Switch Settings top-level tab (Ticket source / Authentication / Rules / Configuration).
+ * @param {'ticket' | 'auth' | 'rules' | 'config'} tab
+ */
+function setSettingsTab(tab) {
+  const next =
+    tab === 'auth' || tab === 'rules' || tab === 'config' ? tab : 'ticket';
+  settingsTab = next;
+
+  if (els.settingsTabs) {
+    els.settingsTabs.querySelectorAll('[role="tab"]').forEach((btn) => {
+      const selected = btn.dataset.settingsTab === next;
+      btn.setAttribute('aria-selected', selected ? 'true' : 'false');
+      btn.tabIndex = selected ? 0 : -1;
+    });
+  }
+
+  document.querySelectorAll('[data-settings-panel]').forEach((panel) => {
+    const show = panel.dataset.settingsPanel === next;
+    panel.classList.toggle('hidden', !show);
+  });
+
+  if (next === 'config') {
+    void fetchModels();
+  }
+}
+
+/**
+ * Empty = keep existing secret; data-clear + empty = send null to clear.
+ * @param {HTMLInputElement | null} inputEl
+ * @returns {string | null | undefined}
+ */
+function secretPatchValue(inputEl) {
+  const typed = inputEl?.value?.trim() || '';
+  if (typed) return typed;
+  if (inputEl?.dataset.clear === '1') return null;
+  return undefined;
+}
+
+/**
+ * @param {HTMLInputElement | null} inputEl
+ * @param {HTMLButtonElement | null} clearBtn
+ * @param {boolean} set
+ * @param {string | null | undefined} masked
+ * @param {string} unsetPlaceholder
+ */
+function fillSecretInput(inputEl, clearBtn, set, masked, unsetPlaceholder) {
+  if (!inputEl) return;
+  inputEl.value = '';
+  delete inputEl.dataset.clear;
+  inputEl.placeholder = set
+    ? `Saved (${masked || '••••'}) — leave blank to keep`
+    : unsetPlaceholder;
+  if (clearBtn) {
+    clearBtn.classList.toggle('hidden', !set);
+  }
+}
+
+function ghStatusText(cfg) {
+  if (!cfg.ghInstalled) {
+    return 'gh is not installed (required for issues and PRs)';
+  }
+  if (cfg.ghAuthOk) {
+    const method =
+      cfg.ghAuthMethod === 'token'
+        ? 'env token (GH_TOKEN)'
+        : 'gh auth login';
+    return `Authenticated via ${method}`;
+  }
+  if (cfg.ghTokenSet) {
+    return 'Token saved, but gh is not authenticated — check the token';
+  }
+  return 'Not authenticated — paste a PAT or run gh auth login';
+}
+
+function claudeStatusText(cfg) {
+  switch (cfg.claudeAuthMethod) {
+    case 'api-key':
+      return 'Authenticated via ANTHROPIC_API_KEY (API billing)';
+    case 'auth-token':
+      return 'Authenticated via ANTHROPIC_AUTH_TOKEN';
+    case 'oauth-token':
+      return 'Authenticated via CLAUDE_CODE_OAUTH_TOKEN';
+    case 'claude-code-login':
+      return 'Authenticated via claude auth login (subscription)';
+    default:
+      return 'Not authenticated — add an API key, OAuth token, or run claude auth login';
+  }
+}
+
+function fillAuthSettings(cfg) {
+  if (els.settingsGhStatus) {
+    els.settingsGhStatus.textContent = ghStatusText(cfg);
+    els.settingsGhStatus.className =
+      cfg.ghAuthOk ? 'auth-status ok' : 'auth-status err';
+  }
+  if (els.settingsGhOrigin) {
+    if (cfg.originRemoteUrl) {
+      els.settingsGhOrigin.textContent = cfg.originRemoteSsh
+        ? `origin: ${cfg.originRemoteUrl} (SSH — git push/fetch only, not gh API auth)`
+        : `origin: ${cfg.originRemoteUrl}`;
+    } else {
+      els.settingsGhOrigin.textContent = '';
+    }
+  }
+  fillSecretInput(
+    els.settingsGhToken,
+    els.settingsGhTokenClear,
+    Boolean(cfg.ghTokenSet),
+    cfg.ghTokenMasked,
+    'Paste a GitHub PAT'
+  );
+  if (els.settingsGhTokenHint) {
+    els.settingsGhTokenHint.innerHTML = cfg.ghTokenSet
+      ? 'Token stored in <code>.acdev/.env</code> as <code>GH_TOKEN</code> (not committed). Leave blank to keep. SSH remotes can push/fetch git but do <strong>not</strong> authenticate <code>gh</code> for issues or PRs.'
+      : 'If <code>gh auth login</code> already works on this machine, leave this blank. Otherwise paste a PAT (<code>repo</code> and pull-request scopes). Stored as <code>GH_TOKEN</code> so <code>gh</code> can auth without a browser. SSH remotes can push/fetch git but do <strong>not</strong> authenticate <code>gh</code> for issues or PRs.';
+  }
+
+  if (els.settingsClaudeStatus) {
+    els.settingsClaudeStatus.textContent = claudeStatusText(cfg);
+    els.settingsClaudeStatus.className =
+      cfg.claudeAuthOk ? 'auth-status ok' : 'auth-status err';
+  }
+  fillSecretInput(
+    els.settingsAnthropicKey,
+    els.settingsAnthropicKeyClear,
+    Boolean(cfg.anthropicApiKeySet),
+    cfg.anthropicApiKeyMasked,
+    'Paste an Anthropic API key'
+  );
+  fillSecretInput(
+    els.settingsClaudeOauth,
+    els.settingsClaudeOauthClear,
+    Boolean(cfg.claudeOauthTokenSet),
+    cfg.claudeOauthTokenMasked,
+    'Paste token from claude setup-token'
+  );
+  if (els.settingsAnthropicKeyHint) {
+    els.settingsAnthropicKeyHint.innerHTML = cfg.anthropicApiKeySet
+      ? 'API key stored in <code>.acdev/.env</code> (not committed). Takes precedence over subscription login — clear it to use <code>claude auth login</code>.'
+      : 'Console / pay-as-you-go billing. Takes precedence over subscription login. Stored as <code>ANTHROPIC_API_KEY</code>. Clear or omit the key to use <code>claude auth login</code> instead.';
+  }
+  if (els.settingsClaudeOauthHint) {
+    els.settingsClaudeOauthHint.innerHTML = cfg.claudeOauthTokenSet
+      ? '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.';
+  }
+}
+
 function fillSettingsForm(cfg) {
   if (!els.settingsForm || !cfg) return;
 
+  fillAuthSettings(cfg);
+
   updateTicketSourceUI(cfg.ticketSource === 'jira' ? 'jira' : 'github');
 
   if (els.settingsJiraBaseUrl) {
@@ -2954,24 +3224,37 @@ function fillSettingsForm(cfg) {
   if (els.settingsJiraRuleEnabled) {
     els.settingsJiraRuleEnabled.checked = Boolean(jiraRule.enabled);
   }
+  if (els.settingsJiraRuleAction) {
+    const action = ['none', 'set_status', 'add_label', 'close_issue'].includes(jiraRule.action)
+      ? jiraRule.action
+      : 'none';
+    els.settingsJiraRuleAction.value = action;
+  }
   if (els.settingsJiraRuleStatus) {
     els.settingsJiraRuleStatus.value = jiraRule.targetStatus || 'In Review';
   }
+  if (els.settingsJiraRuleLabel) {
+    els.settingsJiraRuleLabel.value = jiraRule.label || '';
+  }
 
   const ghRule = cfg.githubRules?.afterPrOpened || {};
   if (els.settingsGithubRuleEnabled) {
     els.settingsGithubRuleEnabled.checked = Boolean(ghRule.enabled);
   }
   if (els.settingsGithubRuleAction) {
-    const action = ['none', 'add_label', 'close_issue'].includes(ghRule.action)
+    const action = ['none', 'set_status', 'add_label', 'close_issue'].includes(ghRule.action)
       ? ghRule.action
       : 'none';
     els.settingsGithubRuleAction.value = action;
   }
+  if (els.settingsGithubRuleStatus) {
+    els.settingsGithubRuleStatus.value = ghRule.targetStatus || 'In Review';
+  }
   if (els.settingsGithubRuleLabel) {
     els.settingsGithubRuleLabel.value = ghRule.label || '';
   }
-  updateGithubRuleLabelVisibility();
+  updateJiraRuleFieldsVisibility();
+  updateGithubRuleFieldsVisibility();
 
   if (els.jiraStatus) {
     els.jiraStatus.textContent = cfg.jiraConfigured
@@ -2987,19 +3270,15 @@ function fillSettingsForm(cfg) {
   }
 
   if (els.settingsModel) {
-    const models = Array.isArray(cfg.models) ? cfg.models : [];
-    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.id;
-        els.settingsModel.appendChild(opt);
-      }
+    if (availableModels.length) {
+      populateSettingsModels({ models: availableModels, selected: cfg.model || currentModel });
+    } else if (cfg.model) {
+      populateSettingsModels({
+        models: [{ id: cfg.model, label: cfg.model }],
+        selected: cfg.model,
+      });
     }
-    if (cfg.model) els.settingsModel.value = cfg.model;
+    void fetchModels();
   }
 
   if (els.settingsMaxTurns) {
@@ -3041,12 +3320,39 @@ function fillSettingsForm(cfg) {
 }
 
 /**
- * Show GitHub label field only when action is add_label.
+ * Show status / label fields based on the selected post-PR action.
+ * @param {'jira' | 'github'} source
  */
-function updateGithubRuleLabelVisibility() {
-  if (!els.settingsGithubRuleLabelField || !els.settingsGithubRuleAction) return;
-  const show = els.settingsGithubRuleAction.value === 'add_label';
-  els.settingsGithubRuleLabelField.classList.toggle('hidden', !show);
+function updateRuleFieldsVisibility(source) {
+  const actionEl =
+    source === 'jira' ? els.settingsJiraRuleAction : els.settingsGithubRuleAction;
+  const statusField =
+    source === 'jira'
+      ? els.settingsJiraRuleStatusField
+      : els.settingsGithubRuleStatusField;
+  const labelField =
+    source === 'jira'
+      ? els.settingsJiraRuleLabelField
+      : els.settingsGithubRuleLabelField;
+  if (!actionEl) return;
+  const action = actionEl.value;
+  if (statusField) {
+    statusField.classList.toggle('hidden', action !== 'set_status');
+  }
+  if (labelField) {
+    labelField.classList.toggle('hidden', action !== 'add_label');
+  }
+}
+
+function updateJiraRuleFieldsVisibility() {
+  updateRuleFieldsVisibility('jira');
+}
+
+/**
+ * Show status / label fields based on the selected GitHub post-PR action.
+ */
+function updateGithubRuleFieldsVisibility() {
+  updateRuleFieldsVisibility('github');
 }
 
 /**
@@ -3066,12 +3372,8 @@ function updateTicketSourceUI(source) {
     els.jiraConnectPanel.classList.toggle('hidden', ticketSource !== 'jira');
   }
 
-  if (els.jiraRulesPanel) {
-    els.jiraRulesPanel.classList.toggle('hidden', ticketSource !== 'jira');
-  }
-  if (els.githubRulesPanel) {
-    els.githubRulesPanel.classList.toggle('hidden', ticketSource !== 'github');
-  }
+  // Rules tab always shows both GitHub and Jira post-PR options
+  // (ticket source only gates the Jira connect panel above).
 
   if (els.ticketSourceMeta) {
     els.ticketSourceMeta.textContent =
@@ -3121,7 +3423,7 @@ function updateTimeoutMsHint(minutes) {
 function applyConfigSnapshot(data) {
   appConfig = data || {};
   if (data?.model) currentModel = data.model;
-  updateModelButtons();
+  updateModelLabel();
   updateTicketSourceUI(data?.ticketSource === 'jira' ? 'jira' : 'github');
   if (els.repoName) {
     els.repoName.textContent = data?.repoName || 'local repo';
@@ -3129,11 +3431,33 @@ function applyConfigSnapshot(data) {
   if (els.repoBranch) {
     els.repoBranch.textContent = data?.baseBranch || '—';
   }
+  updateAuthBanner(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');
@@ -3145,35 +3469,6 @@ async function fetchConfig() {
   }
 }
 
-async function setModel(model) {
-  if (modelSaving || model === currentModel) return;
-  modelSaving = true;
-  const prev = currentModel;
-  currentModel = model;
-  updateModelButtons();
-  try {
-    const res = await fetch('/api/config', {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ model }),
-    });
-    const data = await readJson(res);
-    if (!res.ok) {
-      currentModel = prev;
-      updateModelButtons();
-      alert(`Model update failed: ${data.error || `HTTP ${res.status}`}`);
-      return;
-    }
-    applyConfigSnapshot({ ...appConfig, ...data });
-  } catch (err) {
-    currentModel = prev;
-    updateModelButtons();
-    alert(`Model update failed: ${err.message}`);
-  } finally {
-    modelSaving = false;
-  }
-}
-
 function readSettingsForm() {
   const baseBranch = els.settingsBaseBranch?.value?.trim() || '';
   const model = els.settingsModel?.value || currentModel;
@@ -3197,6 +3492,13 @@ function readSettingsForm() {
     ticketSource,
   };
 
+  const ghToken = secretPatchValue(els.settingsGhToken);
+  if (ghToken !== undefined) patch.ghToken = ghToken;
+  const anthropicApiKey = secretPatchValue(els.settingsAnthropicKey);
+  if (anthropicApiKey !== undefined) patch.anthropicApiKey = anthropicApiKey;
+  const claudeOauthToken = secretPatchValue(els.settingsClaudeOauth);
+  if (claudeOauthToken !== undefined) patch.claudeOauthToken = claudeOauthToken;
+
   if (ticketSource === 'jira' || els.settingsJiraBaseUrl?.value) {
     patch.jiraBaseUrl = els.settingsJiraBaseUrl?.value?.trim() || '';
     patch.jiraPrLinkPhrase =
@@ -3207,28 +3509,31 @@ function readSettingsForm() {
     if (token) patch.jiraApiToken = token;
   }
 
-  // Only PATCH the visible source's rules so saving on one source
-  // never resets the other source's saved config (updateConfig merges).
-  if (ticketSource === 'jira') {
-    patch.jiraRules = {
-      afterPrOpened: {
-        enabled: Boolean(els.settingsJiraRuleEnabled?.checked),
-        targetStatus:
-          els.settingsJiraRuleStatus?.value?.trim() || 'In Review',
-      },
-    };
-  } else {
-    const ghAction = els.settingsGithubRuleAction?.value || 'none';
-    patch.githubRules = {
-      afterPrOpened: {
-        enabled: Boolean(els.settingsGithubRuleEnabled?.checked),
-        action: ['none', 'add_label', 'close_issue'].includes(ghAction)
-          ? ghAction
-          : 'none',
-        label: els.settingsGithubRuleLabel?.value?.trim() || '',
-      },
-    };
-  }
+  // Both rule panels are always visible on the Rules tab — PATCH both.
+  const jiraAction = els.settingsJiraRuleAction?.value || 'none';
+  patch.jiraRules = {
+    afterPrOpened: {
+      enabled: Boolean(els.settingsJiraRuleEnabled?.checked),
+      action: ['none', 'set_status', 'add_label', 'close_issue'].includes(jiraAction)
+        ? jiraAction
+        : 'none',
+      targetStatus:
+        els.settingsJiraRuleStatus?.value?.trim() || 'In Review',
+      label: els.settingsJiraRuleLabel?.value?.trim() || '',
+    },
+  };
+  const ghAction = els.settingsGithubRuleAction?.value || 'none';
+  patch.githubRules = {
+    afterPrOpened: {
+      enabled: Boolean(els.settingsGithubRuleEnabled?.checked),
+      action: ['none', 'set_status', 'add_label', 'close_issue'].includes(ghAction)
+        ? ghAction
+        : 'none',
+      targetStatus:
+        els.settingsGithubRuleStatus?.value?.trim() || 'In Review',
+      label: els.settingsGithubRuleLabel?.value?.trim() || '',
+    },
+  };
 
   return patch;
 }
@@ -3267,6 +3572,7 @@ async function saveSettings(event) {
     }
     applyConfigSnapshot(data);
     fillSettingsForm(data);
+    void fetchModels({ refresh: true });
     setSettingsFeedback('Settings saved. Next jobs will use these values.', 'ok');
   } catch (err) {
     setSettingsFeedback(err.message || 'Save failed', 'error');
@@ -3281,20 +3587,89 @@ 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);
 });
 
-els.modelToggle.querySelectorAll('.model-btn').forEach((btn) => {
-  btn.addEventListener('click', () => setModel(btn.dataset.model));
-});
-
 els.settingsForm?.addEventListener('submit', saveSettings);
 els.settingsTimeout?.addEventListener('input', () => {
   updateTimeoutMsHint(els.settingsTimeout.value);
 });
-els.settingsGithubRuleAction?.addEventListener('change', updateGithubRuleLabelVisibility);
+els.settingsJiraRuleAction?.addEventListener('change', updateJiraRuleFieldsVisibility);
+els.settingsGithubRuleAction?.addEventListener('change', updateGithubRuleFieldsVisibility);
+
+els.settingsTabs?.addEventListener('click', (e) => {
+  const btn = e.target.closest('[data-settings-tab]');
+  if (!btn?.dataset.settingsTab) return;
+  setSettingsTab(
+    /** @type {'ticket' | 'auth' | 'rules' | 'config'} */ (btn.dataset.settingsTab)
+  );
+});
+
+els.settingsTabs?.addEventListener('keydown', (e) => {
+  const tabs = [...(els.settingsTabs?.querySelectorAll('[role="tab"]') || [])];
+  if (!tabs.length) return;
+  const current = document.activeElement;
+  const idx = tabs.indexOf(/** @type {HTMLElement} */ (current));
+  if (idx < 0) return;
+  let nextIdx = -1;
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+    nextIdx = (idx + 1) % tabs.length;
+  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+    nextIdx = (idx - 1 + tabs.length) % tabs.length;
+  } else if (e.key === 'Home') {
+    nextIdx = 0;
+  } else if (e.key === 'End') {
+    nextIdx = tabs.length - 1;
+  }
+  if (nextIdx < 0) return;
+  e.preventDefault();
+  const nextTab = tabs[nextIdx];
+  setSettingsTab(
+    /** @type {'ticket' | 'auth' | 'rules' | 'config'} */ (nextTab.dataset.settingsTab)
+  );
+  nextTab.focus();
+});
+
+/**
+ * @param {HTMLInputElement | null} inputEl
+ * @param {HTMLElement | null} hintEl
+ * @param {string} clearedHint
+ */
+function bindSecretClear(clearBtn, inputEl, hintEl, clearedHint) {
+  clearBtn?.addEventListener('click', () => {
+    if (!inputEl) return;
+    inputEl.value = '';
+    inputEl.dataset.clear = '1';
+    inputEl.placeholder = 'Will be removed on save';
+    if (hintEl) hintEl.textContent = clearedHint;
+  });
+}
+
+bindSecretClear(
+  els.settingsGhTokenClear,
+  els.settingsGhToken,
+  els.settingsGhTokenHint,
+  'Saved GH_TOKEN will be removed when you click Save settings.'
+);
+bindSecretClear(
+  els.settingsAnthropicKeyClear,
+  els.settingsAnthropicKey,
+  els.settingsAnthropicKeyHint,
+  'Saved API key will be removed on save so subscription login can be used.'
+);
+bindSecretClear(
+  els.settingsClaudeOauthClear,
+  els.settingsClaudeOauth,
+  els.settingsClaudeOauthHint,
+  'Saved CLAUDE_CODE_OAUTH_TOKEN will be removed when you click Save settings.'
+);
 
 els.addBtn.addEventListener('click', async () => {
   els.enqueueFeedback.classList.add('hidden');
@@ -3615,5 +3990,6 @@ els.logJobFilter.addEventListener('change', () => {
 
 applyTheme(loadTheme());
 fetchConfig();
+fetchModels();
 fetchJobs();
 setInterval(fetchJobs, 3000);