acdev 1.0.1 → 1.0.3

package/public/app.js

@@ -108,6 +108,10 @@ let reviewSearch = loadReviewSearch();
 let activeInlineCommentKey = null;
 /** @type {string | null} id of line comment currently being edited */
 let editingCommentId = null;
+/** @type {'inline' | 'pending' | null} where the edit form should render */
+let editingCommentSurface = null;
+/** Original body when edit started — restored on Cancel after live sync. */
+let editingCommentOriginalBody = null;
 /** @type {Record<string, {
  *   generalComment: string,
  *   lineComments: Array<{ id: string, path: string, line: number, side: 'LEFT' | 'RIGHT', body: string }>,
@@ -120,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 {{
@@ -143,6 +150,19 @@ 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,
  * }} */
 let appConfig = {};
 
@@ -153,7 +173,7 @@ 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'),
@@ -217,6 +237,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'),
@@ -234,13 +255,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() {
@@ -447,6 +485,8 @@ function clearReviewDraft(jobId) {
   delete reviewDrafts[jobId];
   activeInlineCommentKey = null;
   editingCommentId = null;
+  editingCommentSurface = null;
+  editingCommentOriginalBody = null;
   try {
     sessionStorage.removeItem(reviewDraftStorageKey(jobId));
   } catch {
@@ -454,6 +494,86 @@ function clearReviewDraft(jobId) {
   }
 }
 
+/** Clear in-progress line-comment edit state. */
+function clearCommentEditState() {
+  editingCommentId = null;
+  editingCommentSurface = null;
+  editingCommentOriginalBody = null;
+}
+
+/**
+ * @param {string} jobId
+ * @param {string} commentId
+ * @param {string} body
+ */
+function updateLineCommentBody(jobId, commentId, body) {
+  const d = loadReviewDraft(jobId);
+  const target = d.lineComments.find((x) => x.id === commentId);
+  if (!target) return;
+  target.body = body;
+  saveReviewDraft(jobId);
+}
+
+/**
+ * Refresh the non-active edit surface so both views stay in sync.
+ * @param {string} jobId
+ */
+function mirrorCommentEditToOtherSurface(jobId) {
+  if (editingCommentSurface === 'inline') {
+    renderPendingCommentList(jobId);
+    syncSubmitReviewButton(jobId);
+    return;
+  }
+  if (editingCommentSurface === 'pending') {
+    const job = jobsById[jobId];
+    if (job) {
+      const diff =
+        job.status === 'awaiting_review'
+          ? filterDiffForReviewJob(job)
+          : job.diff || '';
+      renderDiff(diff, {
+        interactive: job.status === 'awaiting_review',
+        jobId,
+      });
+    }
+    syncSubmitReviewButton(jobId);
+  }
+}
+
+/**
+ * Commit or discard an in-progress comment edit.
+ * @param {string} jobId
+ * @param {string} commentId
+ * @param {string | null} nextBody null = cancel / restore original
+ */
+function finishCommentEdit(jobId, commentId, nextBody) {
+  if (nextBody == null) {
+    if (editingCommentOriginalBody != null) {
+      updateLineCommentBody(jobId, commentId, editingCommentOriginalBody);
+    }
+  } else {
+    updateLineCommentBody(jobId, commentId, nextBody);
+  }
+  clearCommentEditState();
+  refreshReviewCommentUi(jobId);
+}
+
+/**
+ * Start editing a pending line comment on a specific surface.
+ * @param {string} commentId
+ * @param {'inline' | 'pending'} surface
+ * @param {string} jobId
+ */
+function startCommentEdit(commentId, surface, jobId) {
+  const draft = loadReviewDraft(jobId);
+  const target = draft.lineComments.find((x) => x.id === commentId);
+  editingCommentId = commentId;
+  editingCommentSurface = surface;
+  editingCommentOriginalBody = target ? target.body : '';
+  activeInlineCommentKey = null;
+  refreshReviewCommentUi(jobId);
+}
+
 /**
  * Re-render diff + pending list after draft mutation.
  * @param {string} jobId
@@ -480,6 +600,7 @@ function refreshReviewCommentUi(jobId) {
  *   saveLabel?: string,
  *   onSave: (body: string) => void,
  *   onCancel: () => void,
+ *   onInput?: (body: string) => void,
  * }} opts
  */
 function buildCommentEditForm(opts) {
@@ -490,6 +611,9 @@ function buildCommentEditForm(opts) {
   ta.rows = 3;
   ta.value = opts.initialBody;
   ta.placeholder = 'Edit comment…';
+  if (opts.onInput) {
+    ta.addEventListener('input', () => opts.onInput(ta.value));
+  }
   const actions = document.createElement('div');
   actions.className = 'diff-inline-actions';
   const save = document.createElement('button');
@@ -514,6 +638,7 @@ function buildCommentEditForm(opts) {
     ta.focus();
     const len = ta.value.length;
     ta.setSelectionRange(len, len);
+    ta.scrollIntoView({ block: 'nearest', inline: 'nearest' });
   });
   return form;
 }
@@ -1317,7 +1442,7 @@ function renderDiff(diff, opts = {}) {
     plus.addEventListener('click', (e) => {
       e.stopPropagation();
       activeInlineCommentKey = lineCommentKey(path, line, side);
-      editingCommentId = null;
+      clearCommentEditState();
       renderDiff(diff, opts);
       renderPendingCommentList(jobId);
       syncSubmitReviewButton(jobId);
@@ -1327,7 +1452,7 @@ function renderDiff(diff, opts = {}) {
     cell.addEventListener('click', (e) => {
       if (e.target.closest('button, textarea, a')) return;
       activeInlineCommentKey = lineCommentKey(path, line, side);
-      editingCommentId = null;
+      clearCommentEditState();
       renderDiff(diff, opts);
       renderPendingCommentList(jobId);
       syncSubmitReviewButton(jobId);
@@ -1382,22 +1507,16 @@ function renderDiff(diff, opts = {}) {
     thread.appendChild(meta);
 
     for (const c of existing) {
-      if (editingCommentId === c.id) {
+      if (editingCommentId === c.id && editingCommentSurface === 'inline') {
         thread.appendChild(
           buildCommentEditForm({
             initialBody: c.body,
-            onSave: (body) => {
-              const d = loadReviewDraft(jobId);
-              const target = d.lineComments.find((x) => x.id === c.id);
-              if (target) target.body = body;
-              saveReviewDraft(jobId);
-              editingCommentId = null;
-              refreshReviewCommentUi(jobId);
-            },
-            onCancel: () => {
-              editingCommentId = null;
-              refreshReviewCommentUi(jobId);
+            onInput: (body) => {
+              updateLineCommentBody(jobId, c.id, body);
+              mirrorCommentEditToOtherSurface(jobId);
             },
+            onSave: (body) => finishCommentEdit(jobId, c.id, body),
+            onCancel: () => finishCommentEdit(jobId, c.id, null),
           })
         );
         continue;
@@ -1415,9 +1534,7 @@ function renderDiff(diff, opts = {}) {
       edit.className = 'btn btn-muted-text btn-sm';
       edit.textContent = 'Edit';
       edit.addEventListener('click', () => {
-        editingCommentId = c.id;
-        activeInlineCommentKey = null;
-        refreshReviewCommentUi(jobId);
+        startCommentEdit(c.id, 'inline', jobId);
       });
       const remove = document.createElement('button');
       remove.type = 'button';
@@ -1427,7 +1544,7 @@ function renderDiff(diff, opts = {}) {
         const d = loadReviewDraft(jobId);
         d.lineComments = d.lineComments.filter((x) => x.id !== c.id);
         saveReviewDraft(jobId);
-        if (editingCommentId === c.id) editingCommentId = null;
+        if (editingCommentId === c.id) clearCommentEditState();
         refreshReviewCommentUi(jobId);
       });
       actions.appendChild(edit);
@@ -1684,22 +1801,16 @@ function renderPendingCommentList(jobId) {
     loc.textContent = `${c.path}:${c.line} (${c.side})`;
     main.appendChild(loc);
 
-    if (editingCommentId === c.id) {
+    if (editingCommentId === c.id && editingCommentSurface === 'pending') {
       main.appendChild(
         buildCommentEditForm({
           initialBody: c.body,
-          onSave: (body) => {
-            const d = loadReviewDraft(jobId);
-            const target = d.lineComments.find((x) => x.id === c.id);
-            if (target) target.body = body;
-            saveReviewDraft(jobId);
-            editingCommentId = null;
-            refreshReviewCommentUi(jobId);
-          },
-          onCancel: () => {
-            editingCommentId = null;
-            refreshReviewCommentUi(jobId);
+          onInput: (body) => {
+            updateLineCommentBody(jobId, c.id, body);
+            mirrorCommentEditToOtherSurface(jobId);
           },
+          onSave: (body) => finishCommentEdit(jobId, c.id, body),
+          onCancel: () => finishCommentEdit(jobId, c.id, null),
         })
       );
       item.appendChild(main);
@@ -1718,9 +1829,7 @@ function renderPendingCommentList(jobId) {
     edit.className = 'btn btn-muted-text btn-sm';
     edit.textContent = 'Edit';
     edit.addEventListener('click', () => {
-      editingCommentId = c.id;
-      activeInlineCommentKey = null;
-      refreshReviewCommentUi(jobId);
+      startCommentEdit(c.id, 'pending', jobId);
     });
     const remove = document.createElement('button');
     remove.type = 'button';
@@ -1730,7 +1839,7 @@ function renderPendingCommentList(jobId) {
       const d = loadReviewDraft(jobId);
       d.lineComments = d.lineComments.filter((x) => x.id !== c.id);
       saveReviewDraft(jobId);
-      if (editingCommentId === c.id) editingCommentId = null;
+      if (editingCommentId === c.id) clearCommentEditState();
       refreshReviewCommentUi(jobId);
     });
     actions.appendChild(edit);
@@ -2321,7 +2430,7 @@ function renderReview(jobs) {
     const focusInPending = Boolean(
       els.reviewPendingList?.contains(document.activeElement)
     );
-    if (!(editingCommentId && focusInPending)) {
+    if (!(editingCommentId && editingCommentSurface === 'pending' && focusInPending)) {
       renderPendingCommentList(job.id);
     }
     syncSubmitReviewButton(job.id);
@@ -2353,7 +2462,9 @@ function renderReview(jobs) {
 
   const focusInDiff = els.diffViewer?.contains(document.activeElement);
   const preservingDiffCompose =
-    (activeInlineCommentKey || editingCommentId) && focusInDiff;
+    (Boolean(activeInlineCommentKey) ||
+      (editingCommentId && editingCommentSurface === 'inline')) &&
+    focusInDiff;
   if (!preservingDiffCompose) {
     renderDiff(displayDiff, { interactive: editable, jobId: job.id });
   }
@@ -2813,13 +2924,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,
+    });
   }
 }
 
@@ -2847,9 +3039,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) {
@@ -2877,24 +3220,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
@@ -2910,19 +3266,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) {
@@ -2964,12 +3316,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 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 updateGithubRuleLabelVisibility() {
-  if (!els.settingsGithubRuleLabelField || !els.settingsGithubRuleAction) return;
-  const show = els.settingsGithubRuleAction.value === 'add_label';
-  els.settingsGithubRuleLabelField.classList.toggle('hidden', !show);
+function updateGithubRuleFieldsVisibility() {
+  updateRuleFieldsVisibility('github');
 }
 
 /**
@@ -2989,12 +3368,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 =
@@ -3044,7 +3419,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';
@@ -3068,35 +3443,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;
@@ -3120,6 +3466,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 =
@@ -3130,28 +3483,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;
 }
@@ -3190,6 +3546,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');
@@ -3209,15 +3566,79 @@ els.themeToggle.addEventListener('click', () => {
   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');
@@ -3538,5 +3959,6 @@ els.logJobFilter.addEventListener('change', () => {
 
 applyTheme(loadTheme());
 fetchConfig();
+fetchModels();
 fetchJobs();
 setInterval(fetchJobs, 3000);