acdev 1.0.0

package/public/app.js

@@ -0,0 +1,3291 @@
+/** @typedef {'overview' | 'runs' | 'review' | 'logs' | 'alerts' | 'settings'} ViewId */
+
+const VIEW_TITLES = {
+  overview: 'Overview',
+  runs: 'Runs',
+  review: 'Review',
+  logs: 'Logs',
+  alerts: 'Alerts',
+  settings: 'Settings',
+};
+
+const DEFAULT_KNOWN_TOOLS = ['Read', 'Glob', 'Grep', 'Edit', 'Write', 'Bash'];
+
+const RUNNING_STATUSES = new Set([
+  'syncing',
+  'preparing_worktree',
+  'running',
+  'applying_feedback',
+]);
+const RUN_STATUSES = new Set([
+  'syncing',
+  'preparing_worktree',
+  'running',
+  'applying_feedback',
+  'awaiting_review',
+  'pr_opened',
+  'failed',
+]);
+const CLEARABLE_STATUSES = new Set([
+  'queued',
+  'awaiting_review',
+  'pr_opened',
+  'discarded',
+  'failed',
+]);
+
+const PIPELINE_KEYS = [
+  'queued',
+  'syncing',
+  'preparing_worktree',
+  'running',
+  'applying_feedback',
+  'awaiting_review',
+];
+
+const STATUS_LABELS = {
+  queued: 'Queued',
+  syncing: 'Syncing base branch…',
+  preparing_worktree: 'Preparing worktree…',
+  running: 'Agent running…',
+  applying_feedback: 'Applying review feedback…',
+  awaiting_review: 'Awaiting review',
+  pr_opened: 'PR opened',
+  discarded: 'Discarded',
+  failed: 'Failed',
+  'retry queued': 'Retry queued',
+};
+
+const THEME_KEY = 'acdev-theme';
+const DISMISS_KEY = 'acdev-dismissed-alerts';
+const REVIEW_FILTER_KEY = 'acdev-review-filter';
+const REVIEW_SEARCH_KEY = 'acdev-review-search';
+const REVIEW_DRAFT_PREFIX = 'acdev-review-draft:';
+const REVIEW_FILES_PREFIX = 'acdev-review-files:';
+
+/** Review-pipeline statuses shown on the Review page. */
+const REVIEW_STATUSES = new Set([
+  'awaiting_review',
+  'pr_opened',
+  'discarded',
+  'failed',
+]);
+
+/** @typedef {'all' | 'pending' | 'approved' | 'rejected' | 'failed'} ReviewFilterId */
+
+const REVIEW_FILTERS = {
+  all: { label: 'All', statuses: null },
+  pending: { label: 'Pending', statuses: new Set(['awaiting_review']) },
+  approved: { label: 'Approved', statuses: new Set(['pr_opened']) },
+  rejected: { label: 'Rejected', statuses: new Set(['discarded']) },
+  failed: { label: 'Failed', statuses: new Set(['failed']) },
+};
+
+/** @type {ViewId} */
+let currentView = 'overview';
+/** @type {string | null} */
+let selectedRunId = null;
+/** @type {string | null} */
+let selectedReviewId = null;
+/** @type {EventSource | null} */
+let eventSource = null;
+/** Follow live logs only while the user is near the bottom of the pane. */
+let logsPinnedToBottom = true;
+/** Scroll offset restored across log pane rebuilds when unpinned. */
+let logsScrollTop = 0;
+const LOG_PIN_THRESHOLD_PX = 100;
+/** @type {Record<string, object>} */
+let jobsById = {};
+/** @type {string[]} */
+let dismissedAlertIds = loadDismissed();
+/** @type {string} */
+let logFilterJobId = '';
+/** @type {ReviewFilterId} */
+let reviewFilter = loadReviewFilter();
+/** @type {string} */
+let reviewSearch = loadReviewSearch();
+/** @type {string | null} */
+let activeInlineCommentKey = null;
+/** @type {Record<string, {
+ *   generalComment: string,
+ *   lineComments: Array<{ id: string, path: string, line: number, side: 'LEFT' | 'RIGHT', body: string }>
+ * }>} */
+let reviewDrafts = {};
+/** @type {Record<string, string[]>} changed file paths per job (from API or parsed diff) */
+let reviewFileLists = {};
+/** @type {Record<string, Set<string>>} excluded paths per job while reviewing */
+let reviewExcludedByJob = {};
+let modelSaving = false;
+let settingsSaving = false;
+/** @type {string} */
+let currentModel = 'claude-sonnet-5';
+/** @type {'github' | 'jira'} */
+let ticketSource = 'github';
+/** @type {{
+ *   repoName?: string,
+ *   baseBranch?: string,
+ *   testCommand?: string | null,
+ *   maxAgentTurns?: number,
+ *   agentTimeoutMs?: number,
+ *   allowedTools?: string[],
+ *   knownTools?: string[],
+ *   models?: Array<{id:string,label:string}>,
+ *   model?: string,
+ *   ticketSource?: 'github' | 'jira',
+ *   jiraBaseUrl?: string,
+ *   jiraEmail?: string | null,
+ *   jiraApiTokenSet?: boolean,
+ *   jiraApiTokenMasked?: string | null,
+ *   jiraConfigured?: boolean,
+ *   jiraPrLinkPhrase?: string,
+ * }} */
+let appConfig = {};
+
+const els = {
+  app: document.getElementById('app'),
+  viewTitle: document.getElementById('view-title'),
+  themeToggle: document.getElementById('theme-toggle'),
+  repoName: document.getElementById('repo-name'),
+  repoBranch: document.getElementById('repo-branch'),
+  ticketSourceMeta: document.getElementById('ticket-source-meta'),
+  modelToggle: document.getElementById('model-toggle'),
+  navBadgeOverview: document.getElementById('nav-badge-overview'),
+  navBadgeRuns: document.getElementById('nav-badge-runs'),
+  navBadgeReview: document.getElementById('nav-badge-review'),
+  navBadgeAlerts: document.getElementById('nav-badge-alerts'),
+  issueUrls: document.getElementById('issue-urls'),
+  issueUrlsLabel: document.getElementById('issue-urls-label'),
+  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'),
+  overviewRunningEmpty: document.getElementById('overview-running-empty'),
+  overviewReview: document.getElementById('overview-review'),
+  overviewReviewEmpty: document.getElementById('overview-review-empty'),
+  overviewQueue: document.getElementById('overview-queue'),
+  overviewQueueEmpty: document.getElementById('overview-queue-empty'),
+  runsList: document.getElementById('runs-list'),
+  runsEmpty: document.getElementById('runs-empty'),
+  reviewEmpty: document.getElementById('review-empty'),
+  reviewNoMatches: document.getElementById('review-no-matches'),
+  reviewToolbar: document.getElementById('review-toolbar'),
+  reviewFilters: document.getElementById('review-filters'),
+  reviewSearch: document.getElementById('review-search'),
+  reviewLayout: document.getElementById('review-layout'),
+  reviewList: document.getElementById('review-list'),
+  reviewEmptyDetail: document.getElementById('review-empty-detail'),
+  reviewDetailContent: document.getElementById('review-detail-content'),
+  reviewActions: document.getElementById('review-actions'),
+  reviewFeedbackSection: document.getElementById('review-feedback-section'),
+  reviewGeneralComment: document.getElementById('review-general-comment'),
+  reviewPendingList: document.getElementById('review-pending-list'),
+  reviewPendingEmpty: document.getElementById('review-pending-empty'),
+  submitReviewBtn: document.getElementById('submit-review-btn'),
+  reviewPrSection: document.getElementById('review-pr-section'),
+  reviewPrLink: document.getElementById('review-pr-link'),
+  reviewClearBtn: document.getElementById('review-clear-btn'),
+  reviewPrClearBtn: document.getElementById('review-pr-clear-btn'),
+  reviewTerminalSection: document.getElementById('review-terminal-section'),
+  reviewTerminalMessage: document.getElementById('review-terminal-message'),
+  reviewRetryBtn: document.getElementById('review-retry-btn'),
+  reviewTerminalClearBtn: document.getElementById('review-terminal-clear-btn'),
+  prTitle: document.getElementById('pr-title'),
+  prBody: document.getElementById('pr-body'),
+  reviewFilesSection: document.getElementById('review-files-section'),
+  reviewFilesList: document.getElementById('review-files-list'),
+  reviewFilesCount: document.getElementById('review-files-count'),
+  reviewFilesSelectAll: document.getElementById('review-files-select-all'),
+  reviewFilesDeselectAll: document.getElementById('review-files-deselect-all'),
+  diffHeader: document.getElementById('diff-header'),
+  diffViewer: document.getElementById('diff-viewer'),
+  approveDraftBtn: document.getElementById('approve-draft-btn'),
+  approveReadyBtn: document.getElementById('approve-ready-btn'),
+  rejectBtn: document.getElementById('reject-btn'),
+  logJobFilter: document.getElementById('log-job-filter'),
+  activityLog: document.getElementById('activity-log'),
+  logEmpty: document.getElementById('log-empty'),
+  alertsList: document.getElementById('alerts-list'),
+  alertsEmpty: document.getElementById('alerts-empty'),
+  settingsForm: document.getElementById('settings-form'),
+  settingsBaseBranch: document.getElementById('settings-base-branch'),
+  settingsModel: document.getElementById('settings-model'),
+  settingsMaxTurns: document.getElementById('settings-max-turns'),
+  settingsTimeout: document.getElementById('settings-timeout'),
+  settingsTimeoutMs: document.getElementById('settings-timeout-ms'),
+  settingsTestCommand: document.getElementById('settings-test-command'),
+  settingsTools: document.getElementById('settings-tools'),
+  settingsFeedback: document.getElementById('settings-feedback'),
+  settingsSaveBtn: document.getElementById('settings-save-btn'),
+  settingsTicketSource: document.getElementById('settings-ticket-source'),
+  jiraConnectPanel: document.getElementById('jira-connect-panel'),
+  settingsJiraBaseUrl: document.getElementById('settings-jira-base-url'),
+  settingsJiraEmail: document.getElementById('settings-jira-email'),
+  settingsJiraToken: document.getElementById('settings-jira-token'),
+  settingsJiraTokenHint: document.getElementById('settings-jira-token-hint'),
+  settingsJiraPrPhrase: document.getElementById('settings-jira-pr-phrase'),
+  jiraTestBtn: document.getElementById('jira-test-btn'),
+  jiraStatus: document.getElementById('jira-status'),
+  settingsJiraRuleEnabled: document.getElementById('settings-jira-rule-enabled'),
+  settingsJiraRuleStatus: document.getElementById('settings-jira-rule-status'),
+  settingsGithubRuleEnabled: document.getElementById('settings-github-rule-enabled'),
+  settingsGithubRuleAction: document.getElementById('settings-github-rule-action'),
+  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'),
+};
+
+function loadDismissed() {
+  try {
+    const raw = localStorage.getItem(DISMISS_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    return Array.isArray(parsed) ? parsed.map(String) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveDismissed() {
+  localStorage.setItem(DISMISS_KEY, JSON.stringify(dismissedAlertIds));
+}
+
+/** @returns {ReviewFilterId} */
+function loadReviewFilter() {
+  try {
+    const raw = sessionStorage.getItem(REVIEW_FILTER_KEY);
+    if (raw && raw in REVIEW_FILTERS) return /** @type {ReviewFilterId} */ (raw);
+  } catch {
+    /* ignore */
+  }
+  return 'pending';
+}
+
+function saveReviewFilter() {
+  try {
+    sessionStorage.setItem(REVIEW_FILTER_KEY, reviewFilter);
+  } catch {
+    /* ignore */
+  }
+}
+
+function loadReviewSearch() {
+  try {
+    return sessionStorage.getItem(REVIEW_SEARCH_KEY) || '';
+  } catch {
+    return '';
+  }
+}
+
+function saveReviewSearch() {
+  try {
+    sessionStorage.setItem(REVIEW_SEARCH_KEY, reviewSearch);
+  } catch {
+    /* ignore */
+  }
+}
+
+/** @param {string} jobId */
+function reviewDraftStorageKey(jobId) {
+  return `${REVIEW_DRAFT_PREFIX}${jobId}`;
+}
+
+/**
+ * @param {string} jobId
+ * @returns {{
+ *   generalComment: string,
+ *   lineComments: Array<{ id: string, path: string, line: number, side: 'LEFT' | 'RIGHT', body: string }>
+ * }}
+ */
+function emptyReviewDraft() {
+  return { generalComment: '', lineComments: [] };
+}
+
+/** @param {string} jobId */
+function loadReviewDraft(jobId) {
+  if (reviewDrafts[jobId]) return reviewDrafts[jobId];
+  try {
+    const raw = sessionStorage.getItem(reviewDraftStorageKey(jobId));
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      const draft = {
+        generalComment:
+          typeof parsed?.generalComment === 'string' ? parsed.generalComment : '',
+        lineComments: Array.isArray(parsed?.lineComments)
+          ? parsed.lineComments
+              .filter(
+                (c) =>
+                  c &&
+                  typeof c.path === 'string' &&
+                  typeof c.body === 'string' &&
+                  (c.side === 'LEFT' || c.side === 'RIGHT') &&
+                  Number.isInteger(Number(c.line))
+              )
+              .map((c) => ({
+                id: typeof c.id === 'string' ? c.id : `lc-${Date.now()}-${Math.random()}`,
+                path: c.path,
+                line: Number(c.line),
+                side: /** @type {'LEFT' | 'RIGHT'} */ (c.side),
+                body: c.body,
+              }))
+          : [],
+      };
+      reviewDrafts[jobId] = draft;
+      return draft;
+    }
+  } catch {
+    /* ignore */
+  }
+  const draft = emptyReviewDraft();
+  reviewDrafts[jobId] = draft;
+  return draft;
+}
+
+/** @param {string} jobId */
+function saveReviewDraft(jobId) {
+  const draft = reviewDrafts[jobId] || emptyReviewDraft();
+  reviewDrafts[jobId] = draft;
+  try {
+    sessionStorage.setItem(reviewDraftStorageKey(jobId), JSON.stringify(draft));
+  } catch {
+    /* ignore */
+  }
+}
+
+/** @param {string} jobId */
+function clearReviewDraft(jobId) {
+  delete reviewDrafts[jobId];
+  activeInlineCommentKey = null;
+  try {
+    sessionStorage.removeItem(reviewDraftStorageKey(jobId));
+  } catch {
+    /* ignore */
+  }
+}
+
+/** @param {string} jobId */
+function reviewFilesStorageKey(jobId) {
+  return `${REVIEW_FILES_PREFIX}${jobId}`;
+}
+
+/**
+ * @param {string} jobId
+ * @returns {Set<string>}
+ */
+function loadExcludedPaths(jobId) {
+  if (reviewExcludedByJob[jobId]) return reviewExcludedByJob[jobId];
+  try {
+    const raw = sessionStorage.getItem(reviewFilesStorageKey(jobId));
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      const list = Array.isArray(parsed?.excludedPaths)
+        ? parsed.excludedPaths.filter((p) => typeof p === 'string' && p.trim())
+        : [];
+      reviewExcludedByJob[jobId] = new Set(list.map((p) => p.trim()));
+      return reviewExcludedByJob[jobId];
+    }
+  } catch {
+    /* ignore */
+  }
+  reviewExcludedByJob[jobId] = new Set();
+  return reviewExcludedByJob[jobId];
+}
+
+/** @param {string} jobId */
+function saveExcludedPaths(jobId) {
+  const set = reviewExcludedByJob[jobId] || new Set();
+  try {
+    sessionStorage.setItem(
+      reviewFilesStorageKey(jobId),
+      JSON.stringify({ excludedPaths: [...set] })
+    );
+  } catch {
+    /* ignore */
+  }
+}
+
+/** @param {string} jobId */
+function clearExcludedPaths(jobId) {
+  delete reviewExcludedByJob[jobId];
+  try {
+    sessionStorage.removeItem(reviewFilesStorageKey(jobId));
+  } catch {
+    /* ignore */
+  }
+}
+
+/**
+ * Extract changed file paths from a unified diff (`diff --git a/… b/…`).
+ * @param {string} diff
+ * @returns {string[]}
+ */
+function parseChangedFilesFromDiff(diff) {
+  const seen = new Set();
+  /** @type {string[]} */
+  const paths = [];
+  for (const line of String(diff || '').split('\n')) {
+    if (!line.startsWith('diff --git ')) continue;
+    const m = line.match(/^diff --git a\/(.+?) b\/(.+)$/);
+    if (!m) continue;
+    const aPath = m[1];
+    const bPath = m[2];
+    const chosen =
+      bPath && bPath !== '/dev/null' ? bPath : aPath && aPath !== '/dev/null' ? aPath : null;
+    if (!chosen || seen.has(chosen)) continue;
+    seen.add(chosen);
+    paths.push(chosen);
+  }
+  return paths;
+}
+
+/**
+ * Keep only unified-diff file sections whose path is in `included`.
+ * @param {string} diff
+ * @param {Set<string> | string[]} included
+ * @returns {string}
+ */
+function filterDiffByIncludedPaths(diff, included) {
+  const allow = included instanceof Set ? included : new Set(included);
+  if (!diff || allow.size === 0) return '';
+  const lines = String(diff).split('\n');
+  /** @type {string[]} */
+  const out = [];
+  let keep = true;
+  let sawFile = false;
+
+  for (const line of lines) {
+    if (line.startsWith('diff --git ')) {
+      sawFile = true;
+      const m = line.match(/^diff --git a\/(.+?) b\/(.+)$/);
+      const aPath = m?.[1];
+      const bPath = m?.[2];
+      const chosen =
+        bPath && bPath !== '/dev/null'
+          ? bPath
+          : aPath && aPath !== '/dev/null'
+            ? aPath
+            : null;
+      keep = Boolean(chosen && allow.has(chosen));
+      if (keep) out.push(line);
+      continue;
+    }
+    if (!sawFile || keep) out.push(line);
+  }
+  return out.join('\n');
+}
+
+/**
+ * @param {string} jobId
+ * @returns {string[]}
+ */
+function getReviewFilePaths(jobId) {
+  if (reviewFileLists[jobId]?.length) return reviewFileLists[jobId];
+  const job = jobsById[jobId];
+  return parseChangedFilesFromDiff(job?.diff || '');
+}
+
+/**
+ * @param {string} jobId
+ * @param {string[]} files
+ */
+function setReviewFilePaths(jobId, files) {
+  reviewFileLists[jobId] = [...files];
+}
+
+/**
+ * @param {string} jobId
+ * @returns {string[]}
+ */
+function getExcludedPathsForApprove(jobId) {
+  const files = getReviewFilePaths(jobId);
+  const excluded = loadExcludedPaths(jobId);
+  return files.filter((p) => excluded.has(p));
+}
+
+/** @param {string} jobId */
+function reviewDraftHasContent(jobId) {
+  const draft = loadReviewDraft(jobId);
+  if (draft.generalComment.trim()) return true;
+  return draft.lineComments.some((c) => c.body.trim());
+}
+
+/** @param {string} path @param {number} line @param {'LEFT' | 'RIGHT'} side */
+function lineCommentKey(path, line, side) {
+  return `${side}:${path}:${line}`;
+}
+
+function loadTheme() {
+  try {
+    const t = localStorage.getItem(THEME_KEY);
+    return t === 'dark' || t === 'light' ? t : 'light';
+  } catch {
+    return 'light';
+  }
+}
+
+function applyTheme(theme) {
+  els.app.dataset.theme = theme;
+  localStorage.setItem(THEME_KEY, theme);
+  const isDark = theme === 'dark';
+  els.themeToggle.querySelector('.theme-icon-moon')?.classList.toggle('hidden', isDark);
+  els.themeToggle.querySelector('.theme-icon-sun')?.classList.toggle('hidden', !isDark);
+}
+
+function statusLabel(status) {
+  return String(status || '').replace(/_/g, ' ');
+}
+
+function parseIssueRef(url) {
+  const match = String(url || '').match(/github\.com\/([^/]+)\/([^/]+)\/issues\/(\d+)/i);
+  if (!match) return null;
+  return { owner: match[1], repo: match[2], number: match[3], full: `${match[1]}/${match[2]}` };
+}
+
+function parseJiraKeyFromJob(job) {
+  if (job?.jiraKey) return String(job.jiraKey).toUpperCase();
+  const url = String(job?.issueUrl || '');
+  const browse = url.match(/\/browse\/([A-Z][A-Z0-9]+-\d+)/i);
+  if (browse) return browse[1].toUpperCase();
+  if (/^[A-Z][A-Z0-9]+-\d+$/i.test(url.trim())) return url.trim().toUpperCase();
+  return null;
+}
+
+function isJiraJob(job) {
+  return job?.ticketSource === 'jira' || Boolean(job?.jiraKey) || Boolean(parseJiraKeyFromJob(job));
+}
+
+function jobTicketLabel(job) {
+  if (isJiraJob(job)) {
+    return parseJiraKeyFromJob(job) || 'Jira';
+  }
+  const ref = parseIssueRef(job.issueUrl);
+  if (ref) return `#${ref.number}`;
+  if (job.issueNumber != null) return `#${job.issueNumber}`;
+  return '—';
+}
+
+function jobTitle(job) {
+  return job.issueTitle || truncate(job.issueUrl, 48);
+}
+
+function jobRepoLine(job) {
+  if (isJiraJob(job)) {
+    const key = parseJiraKeyFromJob(job) || '—';
+    const branch = job.branchName ? ` · ${job.branchName}` : '';
+    return { repo: 'Jira', number: key, branch, text: `Jira ${key}${branch}`, isJira: true };
+  }
+  const ref = parseIssueRef(job.issueUrl);
+  const repo = ref?.full || '—';
+  const num = ref?.number || job.issueNumber || '—';
+  const branch = job.branchName ? ` · ${job.branchName}` : '';
+  return { repo, number: num, branch, text: `${repo} #${num}${branch}`, isJira: false };
+}
+
+function jobSubLine(job) {
+  const meta = jobRepoLine(job);
+  if (meta.isJira) {
+    return `${meta.number}${meta.branch}`;
+  }
+  return `${meta.repo} #${meta.number}${meta.branch}`;
+}
+
+function issueBadge(job) {
+  const t = job.issueType === 'feat' ? 'feature' : job.issueType === 'fix' ? 'bug' : null;
+  if (!t) return null;
+  return t;
+}
+
+function truncate(str, max = 40) {
+  if (!str || str.length <= max) return str || '';
+  return str.slice(0, max - 3) + '...';
+}
+
+function splitIssueUrls(text) {
+  return String(text || '')
+    .split(/[\n,]+/)
+    .map((u) => u.trim())
+    .filter(Boolean);
+}
+
+function sortedJobs() {
+  return Object.values(jobsById).sort(
+    (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
+  );
+}
+
+function formatTime(ts) {
+  try {
+    return new Date(ts).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+    });
+  } catch {
+    return '';
+  }
+}
+
+function formatElapsed(job) {
+  const start = new Date(job.createdAt || job.updatedAt || Date.now()).getTime();
+  const end =
+    job.status === 'failed' ||
+    job.status === 'awaiting_review' ||
+    job.status === 'pr_opened' ||
+    job.status === 'discarded'
+      ? new Date(job.updatedAt || job.createdAt).getTime()
+      : Date.now();
+  const sec = Math.max(0, Math.floor((end - start) / 1000));
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return `${m}m ${String(s).padStart(2, '0')}s`;
+}
+
+/** @param {number | undefined | null} n */
+function formatUsd(n) {
+  if (typeof n !== 'number' || !Number.isFinite(n)) return null;
+  if (n > 0 && n < 0.01) return `$${n.toFixed(4)}`;
+  return `$${n.toFixed(2)}`;
+}
+
+/** @param {number | undefined | null} n */
+function formatTokenCount(n) {
+  if (typeof n !== 'number' || !Number.isFinite(n)) return null;
+  if (n >= 1_000_000) {
+    const m = n / 1_000_000;
+    return `${m >= 10 ? m.toFixed(0) : m.toFixed(1)}M`;
+  }
+  if (n >= 1000) {
+    const k = n / 1000;
+    return `${k >= 100 ? k.toFixed(0) : k.toFixed(1)}k`;
+  }
+  return String(Math.round(n));
+}
+
+/** @param {number | undefined | null} ms */
+function formatDurationMs(ms) {
+  if (typeof ms !== 'number' || !Number.isFinite(ms) || ms < 0) return null;
+  const sec = Math.floor(ms / 1000);
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  if (m <= 0) return `${s}s`;
+  return `${m}m ${s}s`;
+}
+
+/**
+ * Compact chip for Overview rows: `$1.17 · 18.5k tok`
+ * @param {object | null | undefined} usage
+ */
+function formatUsageCompact(usage) {
+  if (!usage) return null;
+  const parts = [];
+  const cost = formatUsd(usage.totalCostUsd);
+  if (cost) parts.push(cost);
+  const inTok = usage.inputTokens || 0;
+  const outTok = usage.outputTokens || 0;
+  const total = inTok + outTok;
+  if (total > 0) {
+    const t = formatTokenCount(total);
+    if (t) parts.push(`${t} tok`);
+  }
+  return parts.length ? parts.join(' · ') : null;
+}
+
+/**
+ * Full line for Runs: `$1.17 · 12.4k in / 6.1k out · 27 turns · 2m 16s`
+ * @param {object | null | undefined} usage
+ */
+function formatUsageDetail(usage) {
+  if (!usage) return null;
+  const parts = [];
+  const cost = formatUsd(usage.totalCostUsd);
+  if (cost) parts.push(cost);
+
+  const inTok = formatTokenCount(usage.inputTokens);
+  const outTok = formatTokenCount(usage.outputTokens);
+  if (inTok || outTok) {
+    parts.push(`${inTok || '0'} in / ${outTok || '0'} out`);
+  }
+
+  if (typeof usage.numTurns === 'number' && Number.isFinite(usage.numTurns)) {
+    parts.push(`${usage.numTurns} turn${usage.numTurns === 1 ? '' : 's'}`);
+  }
+
+  const dur = formatDurationMs(usage.durationMs);
+  if (dur) parts.push(dur);
+
+  return parts.length ? parts.join(' · ') : null;
+}
+
+/** Sum cost / tokens across jobs that have usage (this app's jobs only). */
+function aggregateJobUsage(jobs) {
+  let totalCostUsd = 0;
+  let totalTokens = 0;
+  let withCost = 0;
+  let withTokens = 0;
+  for (const job of jobs) {
+    const u = job.usage;
+    if (!u) continue;
+    if (typeof u.totalCostUsd === 'number' && Number.isFinite(u.totalCostUsd)) {
+      totalCostUsd += u.totalCostUsd;
+      withCost += 1;
+    }
+    const tok = (u.inputTokens || 0) + (u.outputTokens || 0);
+    if (tok > 0) {
+      totalTokens += tok;
+      withTokens += 1;
+    }
+  }
+  return { totalCostUsd, totalTokens, withCost, withTokens };
+}
+
+/** Five progress dots: sync → worktree → agent → review → PR */
+function pipelineStates(job) {
+  if (job.status === 'pr_opened') {
+    return ['done', 'done', 'done', 'done', 'done'];
+  }
+  if (job.status === 'awaiting_review') {
+    return ['done', 'done', 'done', 'pending', 'pending'];
+  }
+  if (job.status === 'queued') {
+    return ['active', 'pending', 'pending', 'pending', 'pending'];
+  }
+  if (job.status === 'syncing') {
+    return ['done', 'active', 'pending', 'pending', 'pending'];
+  }
+  if (job.status === 'preparing_worktree') {
+    return ['done', 'done', 'active', 'pending', 'pending'];
+  }
+  if (job.status === 'running') {
+    return ['done', 'done', 'active', 'pending', 'pending'];
+  }
+  if (job.status === 'failed') {
+    const order = PIPELINE_KEYS;
+    let idx = Math.max(
+      0,
+      order.findIndex((k) =>
+        (job.logs || []).some((l) => l.type === 'status' && l.payload === k)
+      )
+    );
+    if (idx < 0) idx = 0;
+    return [0, 1, 2, 3, 4].map((i) => (i < idx ? 'done' : i === idx ? 'active' : 'pending'));
+  }
+  return ['pending', 'pending', 'pending', 'pending', 'pending'];
+}
+
+function currentStepLabel(job) {
+  if (job.status === 'failed') return job.error || 'failed';
+  if (job.status === 'awaiting_review') return 'awaiting review';
+  if (job.status === 'pr_opened') return 'PR opened';
+  const logs = job.logs || [];
+  for (let i = logs.length - 1; i >= 0; i--) {
+    const formatted = formatLogEvent(logs[i]);
+    if (formatted.kind === 'tool' || formatted.kind === 'thinking' || formatted.kind === 'msg') {
+      return truncate(formatted.text, 72);
+    }
+  }
+  return STATUS_LABELS[job.status] || statusLabel(job.status);
+}
+
+function formatRawPayload(value) {
+  if (value === undefined) return '';
+  if (typeof value === 'string') return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+function summarizeToolInput(input) {
+  if (!input || typeof input !== 'object') return '';
+  if (typeof input.command === 'string' && input.command) {
+    return truncate(input.command, 80);
+  }
+  if (typeof input.pattern === 'string' && input.pattern) {
+    const scope =
+      (typeof input.path === 'string' && input.path) ||
+      (typeof input.glob === 'string' && input.glob) ||
+      '';
+    return truncate(scope ? `${input.pattern} · ${scope}` : input.pattern, 80);
+  }
+  const pathKeys = ['file_path', 'path', 'file', 'filename', 'target_file', 'notebook_path'];
+  for (const key of pathKeys) {
+    if (typeof input[key] === 'string' && input[key]) {
+      return truncate(String(input[key]), 72);
+    }
+  }
+  if (typeof input.query === 'string' && input.query) return truncate(input.query, 72);
+  if (typeof input.url === 'string' && input.url) return truncate(input.url, 72);
+  if (typeof input.prompt === 'string' && input.prompt) return truncate(input.prompt, 72);
+  if (typeof input.description === 'string' && input.description) {
+    return truncate(input.description, 72);
+  }
+  if (typeof input.content === 'string' && input.content) {
+    return truncate(input.content.replace(/\s+/g, ' '), 60);
+  }
+  const keys = Object.keys(input);
+  if (keys.length === 0) return '';
+  return truncate(JSON.stringify(input), 80);
+}
+
+function formatToolUseLine(block) {
+  const name = block.name || block.tool || 'tool';
+  const summary = summarizeToolInput(block.input);
+  return summary ? `${name} · ${summary}` : name;
+}
+
+function summarizeContentBlocks(content) {
+  if (!Array.isArray(content)) return [];
+  /** @type {{ kind: string, text: string }[]} */
+  const lines = [];
+  for (const block of content) {
+    if (!block || typeof block !== 'object') continue;
+    const type = block.type;
+    if (type === 'text' && typeof block.text === 'string') {
+      const text = block.text.trim();
+      if (text) lines.push({ kind: 'msg', text: truncate(text.replace(/\s+/g, ' '), 220) });
+    } else if (type === 'thinking' || type === 'reasoning') {
+      const raw =
+        (typeof block.thinking === 'string' && block.thinking) ||
+        (typeof block.text === 'string' && block.text) ||
+        '';
+      const text = String(raw).trim();
+      if (text) {
+        lines.push({ kind: 'thinking', text: truncate(text.replace(/\s+/g, ' '), 180) });
+      }
+    } else if (type === 'tool_use') {
+      lines.push({ kind: 'tool', text: formatToolUseLine(block) });
+    } else if (type === 'tool_result') {
+      const preview =
+        typeof block.content === 'string'
+          ? block.content
+          : Array.isArray(block.content)
+            ? block.content
+                .map((c) => (c?.type === 'text' ? c.text : JSON.stringify(c)))
+                .filter(Boolean)
+                .join(' ')
+            : formatRawPayload(block.content);
+      const isErr = Boolean(block.is_error);
+      lines.push({
+        kind: isErr ? 'error' : 'result',
+        text: truncate(
+          (isErr ? 'Tool error · ' : 'Tool result · ') +
+            String(preview || '').replace(/\s+/g, ' ').trim(),
+          200
+        ),
+      });
+    }
+  }
+  return lines;
+}
+
+function formatLogEvent(event) {
+  const raw = formatRawPayload(
+    event.type === 'agent_event' ? event.payload : event.payload ?? event
+  );
+
+  if (event.type === 'status') {
+    const key = String(event.payload || '');
+    const text = STATUS_LABELS[key] || statusLabel(key) || key || 'Status update';
+    return { kind: 'status', label: 'Status', text, raw };
+  }
+
+  if (event.type === 'error') {
+    return {
+      kind: 'error',
+      label: 'Error',
+      text: String(event.payload || 'Unknown error'),
+      raw,
+    };
+  }
+
+  if (event.type === 'agent_event') {
+    const msg = event.payload;
+    if (msg && typeof msg === 'object') {
+      if (msg.type === 'assistant' && Array.isArray(msg.message?.content)) {
+        const parts = summarizeContentBlocks(msg.message.content);
+        if (parts.length) {
+          const hasTool = parts.some((p) => p.kind === 'tool');
+          const hasThinking = parts.some((p) => p.kind === 'thinking');
+          const hasText = parts.some((p) => p.kind === 'msg');
+          const kind = hasTool ? 'tool' : hasThinking ? 'thinking' : parts[0].kind;
+          const label = hasTool
+            ? hasText || hasThinking
+              ? 'Assistant'
+              : 'Tool'
+            : hasThinking
+              ? 'Thinking'
+              : 'Assistant';
+          return { kind, label, text: parts.map((p) => p.text).join(' · '), raw };
+        }
+        return { kind: 'msg', label: 'Assistant', text: '(empty message)', raw };
+      }
+
+      if (msg.type === 'user' && Array.isArray(msg.message?.content)) {
+        const parts = summarizeContentBlocks(msg.message.content);
+        if (parts.length) {
+          const kind = parts[0].kind === 'error' ? 'error' : 'result';
+          return {
+            kind,
+            label: kind === 'error' ? 'Tool error' : 'Result',
+            text: parts.map((p) => p.text).join(' · '),
+            raw,
+          };
+        }
+      }
+
+      if (msg.type === 'result') {
+        const ok = msg.subtype === 'success';
+        const detail =
+          (typeof msg.result === 'string' && msg.result.trim()) ||
+          (typeof msg.error === 'string' && msg.error) ||
+          msg.subtype ||
+          '';
+        const usageHint = formatUsageCompact({
+          totalCostUsd: msg.total_cost_usd,
+          inputTokens: msg.usage?.input_tokens,
+          outputTokens: msg.usage?.output_tokens,
+        });
+        const base = ok
+          ? truncate(String(detail).replace(/\s+/g, ' '), 180) || 'Agent finished successfully'
+          : truncate(String(detail || 'Agent failed').replace(/\s+/g, ' '), 200);
+        return {
+          kind: ok ? 'success' : 'error',
+          label: ok ? 'Done' : 'Failed',
+          text: usageHint ? `${base} · ${usageHint}` : base,
+          raw,
+        };
+      }
+
+      if (msg.type === 'system') {
+        const subtype = msg.subtype ? ` (${msg.subtype})` : '';
+        return {
+          kind: 'status',
+          label: 'System',
+          text: truncate(
+            (typeof msg.content === 'string' && msg.content) || `System event${subtype}`,
+            180
+          ),
+          raw,
+        };
+      }
+
+      if (msg.type === 'tool_use' || msg.name) {
+        return { kind: 'tool', label: 'Tool', text: formatToolUseLine(msg), raw };
+      }
+
+      if (msg.type === 'stream_event' && msg.event) {
+        const ev = msg.event;
+        if (ev.type === 'content_block_start' && ev.content_block?.type === 'tool_use') {
+          return {
+            kind: 'tool',
+            label: 'Tool',
+            text: formatToolUseLine(ev.content_block),
+            raw,
+          };
+        }
+        return {
+          kind: 'msg',
+          label: 'Stream',
+          text: truncate(ev.type || 'stream event', 120),
+          raw,
+        };
+      }
+    }
+
+    if (typeof msg === 'string') {
+      return { kind: 'msg', label: 'Event', text: truncate(msg, 220), raw };
+    }
+
+    return {
+      kind: 'msg',
+      label: 'Event',
+      text: truncate(typeof msg?.type === 'string' ? String(msg.type) : JSON.stringify(msg), 200),
+      raw,
+    };
+  }
+
+  return {
+    kind: 'msg',
+    label: 'Event',
+    text: truncate(JSON.stringify(event), 200),
+    raw: formatRawPayload(event),
+  };
+}
+
+function buildLogRow(event) {
+  const { kind, label, text, raw } = formatLogEvent(event);
+  const row = document.createElement('div');
+  row.className = `log-line is-${kind}`;
+
+  const ts = document.createElement('span');
+  ts.className = 'log-ts';
+  ts.textContent = formatTime(event.ts);
+
+  const body = document.createElement('div');
+  body.className = 'log-body';
+
+  const primary = document.createElement('div');
+  primary.className = 'log-primary';
+
+  const kindEl = document.createElement('span');
+  kindEl.className = 'log-kind';
+  kindEl.textContent = label;
+
+  const msg = document.createElement('span');
+  msg.className = 'log-msg';
+  msg.textContent = text;
+
+  primary.appendChild(kindEl);
+  primary.appendChild(msg);
+  body.appendChild(primary);
+
+  if (raw && raw.trim()) {
+    const details = document.createElement('details');
+    details.className = 'log-raw';
+    const summary = document.createElement('summary');
+    summary.textContent = 'Raw';
+    const pre = document.createElement('pre');
+    pre.className = 'log-raw-pre';
+    pre.textContent = raw;
+    details.appendChild(summary);
+    details.appendChild(pre);
+    body.appendChild(details);
+  }
+
+  row.appendChild(ts);
+  row.appendChild(body);
+  return row;
+}
+
+function diffStats(diff) {
+  let additions = 0;
+  let deletions = 0;
+  const files = new Set();
+  if (!diff) return { additions, deletions, files: 0 };
+  for (const line of diff.split('\n')) {
+    if (line.startsWith('+++ ') || line.startsWith('--- ')) {
+      const path = line.slice(4).replace(/^[ab]\//, '').trim();
+      if (path && path !== '/dev/null') files.add(path);
+    } else if (line.startsWith('+') && !line.startsWith('+++')) {
+      additions += 1;
+    } else if (line.startsWith('-') && !line.startsWith('---')) {
+      deletions += 1;
+    }
+  }
+  return { additions, deletions, files: files.size || (diff ? 1 : 0) };
+}
+
+/**
+ * Render unified diff as side-by-side column panes (GitHub-style) with optional
+ * line-comment anchors. Each file uses `.diff-split` with left|right panes;
+ * horizontal scroll syncs across panes of the same `.diff-file` only.
+ * @param {string} diff
+ * @param {{ interactive?: boolean, jobId?: string | null }} [opts]
+ */
+function renderDiff(diff, opts = {}) {
+  const interactive = Boolean(opts.interactive && opts.jobId);
+  const jobId = opts.jobId || null;
+  const draft = jobId ? loadReviewDraft(jobId) : emptyReviewDraft();
+
+  els.diffViewer.innerHTML = '';
+  els.diffViewer.className = 'diff-viewer amcp-scroll';
+  if (!diff) {
+    const empty = document.createElement('div');
+    empty.className = 'diff-hunk-meta';
+    empty.textContent = 'No diff available.';
+    els.diffViewer.appendChild(empty);
+    return;
+  }
+
+  /** @type {HTMLElement | null} */
+  let fileEl = null;
+  /** @type {HTMLElement | null} */
+  let splitEl = null;
+  /** @type {HTMLElement | null} */
+  let leftPane = null;
+  /** @type {HTMLElement | null} */
+  let rightPane = null;
+  let leftNo = 0;
+  let rightNo = 0;
+  let currentPath = '';
+
+  const flushSplit = () => {
+    splitEl = null;
+    leftPane = null;
+    rightPane = null;
+  };
+
+  const ensureFile = () => {
+    if (!fileEl) {
+      fileEl = document.createElement('div');
+      fileEl.className = 'diff-file';
+      els.diffViewer.appendChild(fileEl);
+    }
+  };
+
+  const ensureSplit = () => {
+    ensureFile();
+    if (!splitEl || !leftPane || !rightPane) {
+      splitEl = document.createElement('div');
+      splitEl.className = 'diff-split';
+      leftPane = document.createElement('div');
+      leftPane.className = 'diff-pane diff-pane-left';
+      rightPane = document.createElement('div');
+      rightPane.className = 'diff-pane diff-pane-right';
+      splitEl.appendChild(leftPane);
+      splitEl.appendChild(rightPane);
+      fileEl.appendChild(splitEl);
+    }
+  };
+
+  /**
+   * @param {HTMLElement} cell
+   * @param {string} path
+   * @param {number} line
+   * @param {'LEFT' | 'RIGHT'} side
+   */
+  const makeCommentable = (cell, path, line, side) => {
+    if (!interactive || !path || !line) return;
+    cell.classList.add('commentable');
+    cell.dataset.path = path;
+    cell.dataset.line = String(line);
+    cell.dataset.side = side;
+
+    const plus = document.createElement('button');
+    plus.type = 'button';
+    plus.className = 'diff-add-comment';
+    plus.title = 'Add line comment';
+    plus.setAttribute('aria-label', `Add comment on ${path}:${line}`);
+    plus.textContent = '+';
+    plus.addEventListener('click', (e) => {
+      e.stopPropagation();
+      activeInlineCommentKey = lineCommentKey(path, line, side);
+      renderDiff(diff, opts);
+      renderPendingCommentList(jobId);
+      syncSubmitReviewButton(jobId);
+    });
+    cell.appendChild(plus);
+
+    cell.addEventListener('click', (e) => {
+      if (e.target.closest('button, textarea, a')) return;
+      activeInlineCommentKey = lineCommentKey(path, line, side);
+      renderDiff(diff, opts);
+      renderPendingCommentList(jobId);
+      syncSubmitReviewButton(jobId);
+    });
+  };
+
+  /**
+   * @param {string | null | undefined} text
+   * @param {string} cls
+   * @param {number | ''} num
+   * @param {'LEFT' | 'RIGHT'} side
+   */
+  const createLine = (text, cls, num, side) => {
+    const el = document.createElement('div');
+    const placeholder = !num;
+    el.className = ['diff-line', cls || '', placeholder ? 'diff-line-empty' : '']
+      .filter(Boolean)
+      .join(' ');
+    const ln = document.createElement('span');
+    ln.className = 'diff-ln';
+    ln.textContent = num ? String(num) : '';
+    el.appendChild(ln);
+    el.appendChild(document.createTextNode(text ?? ''));
+
+    if (!placeholder && interactive && currentPath && num) {
+      makeCommentable(el, currentPath, num, side);
+    }
+    return el;
+  };
+
+  /**
+   * @param {string} path
+   * @param {number} line
+   * @param {'LEFT' | 'RIGHT'} side
+   * @param {Array<{ id: string, path: string, line: number, side: string, body: string }>} existing
+   */
+  const appendThread = (path, line, side, existing) => {
+    if (!interactive || !fileEl) return;
+    const key = lineCommentKey(path, line, side);
+    const showForm = activeInlineCommentKey === key;
+    if (!showForm && existing.length === 0) return;
+
+    // Full-width thread between split segments (keeps left|right row heights aligned).
+    flushSplit();
+
+    const thread = document.createElement('div');
+    thread.className = 'diff-inline-thread';
+
+    const meta = document.createElement('div');
+    meta.className = 'diff-inline-meta';
+    meta.textContent = `${path}:${line} · ${side}`;
+    thread.appendChild(meta);
+
+    for (const c of existing) {
+      const chip = document.createElement('div');
+      chip.className = 'diff-pending-chip';
+      const body = document.createElement('div');
+      body.className = 'diff-pending-chip-body';
+      body.textContent = c.body;
+      const actions = document.createElement('div');
+      actions.className = 'diff-pending-chip-actions';
+      const remove = document.createElement('button');
+      remove.type = 'button';
+      remove.className = 'btn btn-muted-text btn-sm';
+      remove.textContent = 'Remove';
+      remove.addEventListener('click', () => {
+        const d = loadReviewDraft(jobId);
+        d.lineComments = d.lineComments.filter((x) => x.id !== c.id);
+        saveReviewDraft(jobId);
+        renderDiff(diff, opts);
+        renderPendingCommentList(jobId);
+        syncSubmitReviewButton(jobId);
+      });
+      actions.appendChild(remove);
+      chip.appendChild(body);
+      chip.appendChild(actions);
+      thread.appendChild(chip);
+    }
+
+    if (showForm) {
+      const form = document.createElement('div');
+      form.className = 'diff-inline-form';
+      const ta = document.createElement('textarea');
+      ta.className = 'input textarea';
+      ta.rows = 3;
+      ta.placeholder = 'Leave a comment on this line…';
+      const actions = document.createElement('div');
+      actions.className = 'diff-inline-actions';
+      const save = document.createElement('button');
+      save.type = 'button';
+      save.className = 'btn btn-primary btn-sm';
+      save.textContent = 'Add comment';
+      const cancel = document.createElement('button');
+      cancel.type = 'button';
+      cancel.className = 'btn btn-secondary btn-sm';
+      cancel.textContent = 'Cancel';
+      cancel.addEventListener('click', () => {
+        activeInlineCommentKey = null;
+        renderDiff(diff, opts);
+      });
+      save.addEventListener('click', () => {
+        const body = ta.value.trim();
+        if (!body) return;
+        const d = loadReviewDraft(jobId);
+        d.lineComments.push({
+          id: `lc-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+          path,
+          line,
+          side,
+          body,
+        });
+        saveReviewDraft(jobId);
+        activeInlineCommentKey = null;
+        renderDiff(diff, opts);
+        renderPendingCommentList(jobId);
+        syncSubmitReviewButton(jobId);
+      });
+      actions.appendChild(save);
+      actions.appendChild(cancel);
+      form.appendChild(ta);
+      form.appendChild(actions);
+      thread.appendChild(form);
+      requestAnimationFrame(() => ta.focus());
+    }
+
+    fileEl.appendChild(thread);
+  };
+
+  const addPair = (left, right, leftCls, rightCls, lNum, rNum) => {
+    ensureSplit();
+    if (!leftPane || !rightPane) return;
+    leftPane.appendChild(createLine(left, leftCls, lNum, 'LEFT'));
+    rightPane.appendChild(createLine(right, rightCls, rNum, 'RIGHT'));
+
+    /** @type {{ path: string, line: number, side: 'LEFT' | 'RIGHT', existing: any[] } | null} */
+    let leftInfo = null;
+    /** @type {{ path: string, line: number, side: 'LEFT' | 'RIGHT', existing: any[] } | null} */
+    let rightInfo = null;
+
+    if (interactive && currentPath) {
+      if (lNum) {
+        leftInfo = {
+          path: currentPath,
+          line: lNum,
+          side: 'LEFT',
+          existing: draft.lineComments.filter(
+            (c) => c.path === currentPath && c.line === lNum && c.side === 'LEFT'
+          ),
+        };
+      }
+      if (rNum) {
+        rightInfo = {
+          path: currentPath,
+          line: rNum,
+          side: 'RIGHT',
+          existing: draft.lineComments.filter(
+            (c) => c.path === currentPath && c.line === rNum && c.side === 'RIGHT'
+          ),
+        };
+      }
+    }
+
+    // Prefer showing a thread for the side that is actively being edited,
+    // otherwise for whichever side has pending comments (RIGHT first for context).
+    if (leftInfo && activeInlineCommentKey === lineCommentKey(leftInfo.path, leftInfo.line, 'LEFT')) {
+      appendThread(leftInfo.path, leftInfo.line, 'LEFT', leftInfo.existing);
+    } else if (
+      rightInfo &&
+      activeInlineCommentKey === lineCommentKey(rightInfo.path, rightInfo.line, 'RIGHT')
+    ) {
+      appendThread(rightInfo.path, rightInfo.line, 'RIGHT', rightInfo.existing);
+    } else if (rightInfo?.existing.length) {
+      appendThread(rightInfo.path, rightInfo.line, 'RIGHT', rightInfo.existing);
+    } else if (leftInfo?.existing.length) {
+      appendThread(leftInfo.path, leftInfo.line, 'LEFT', leftInfo.existing);
+    }
+  };
+
+  for (const line of diff.split('\n')) {
+    if (line.startsWith('diff --git ')) {
+      flushSplit();
+      fileEl = document.createElement('div');
+      fileEl.className = 'diff-file';
+      const header = document.createElement('div');
+      header.className = 'diff-file-header';
+      const parts = line.split(' ');
+      const raw = parts[parts.length - 1]?.replace(/^b\//, '') || line;
+      currentPath = raw;
+      header.textContent = raw;
+      fileEl.appendChild(header);
+      els.diffViewer.appendChild(fileEl);
+      continue;
+    }
+
+    if (line.startsWith('+++ ')) {
+      const raw = line.slice(4).trim();
+      if (raw !== '/dev/null') {
+        currentPath = raw.replace(/^b\//, '');
+      }
+      continue;
+    }
+
+    if (line.startsWith('@@')) {
+      const m = line.match(/@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+      if (m) {
+        leftNo = Number(m[1]);
+        rightNo = Number(m[2]);
+      }
+      flushSplit();
+      ensureFile();
+      const meta = document.createElement('div');
+      meta.className = 'diff-hunk-meta';
+      meta.textContent = line;
+      fileEl.appendChild(meta);
+      continue;
+    }
+
+    if (
+      line.startsWith('index ') ||
+      line.startsWith('---') ||
+      line.startsWith('new file') ||
+      line.startsWith('deleted file')
+    ) {
+      continue;
+    }
+
+    if (line.startsWith('+') && !line.startsWith('+++')) {
+      addPair('', line.slice(1), '', 'add', '', rightNo++);
+    } else if (line.startsWith('-') && !line.startsWith('---')) {
+      addPair(line.slice(1), '', 'del', '', leftNo++, '');
+    } else {
+      const text = line.startsWith(' ') ? line.slice(1) : line;
+      addPair(text, text, '', '', leftNo++, rightNo++);
+    }
+  }
+
+  bindDiffHorizontalScrollSync(els.diffViewer);
+}
+
+/**
+ * Sync horizontal scroll across left|right panes within each `.diff-file`
+ * (all splits in that file). Does not sync across different files.
+ * Pane lists are captured at bind time — scroll handlers never re-query the DOM.
+ * No-op for unified diffs (`.diff-unified`). Vertical scroll is untouched.
+ * @param {HTMLElement | null} root
+ */
+function bindDiffHorizontalScrollSync(root) {
+  if (!root || root.classList.contains('diff-unified')) return;
+
+  const files = root.querySelectorAll(':scope > .diff-file');
+  const scopes = files.length > 0 ? files : [root];
+
+  scopes.forEach((scope) => {
+    const panes = [
+      ...scope.querySelectorAll('.diff-pane-left'),
+      ...scope.querySelectorAll('.diff-pane-right'),
+    ];
+    if (panes.length < 2) return;
+
+    let syncing = false;
+    let raf = 0;
+    /** @type {HTMLElement | null} */
+    let pendingSource = null;
+
+    const apply = () => {
+      raf = 0;
+      const source = pendingSource;
+      pendingSource = null;
+      if (!source || syncing || root.classList.contains('diff-unified')) return;
+      syncing = true;
+      const x = source.scrollLeft;
+      for (const other of panes) {
+        if (other !== source && other.scrollLeft !== x) {
+          other.scrollLeft = x;
+        }
+      }
+      syncing = false;
+    };
+
+    for (const pane of panes) {
+      pane.addEventListener(
+        'scroll',
+        () => {
+          if (syncing) return;
+          pendingSource = /** @type {HTMLElement} */ (pane);
+          if (!raf) raf = requestAnimationFrame(apply);
+        },
+        { passive: true }
+      );
+    }
+  });
+}
+
+/** @param {string | null} jobId */
+function renderPendingCommentList(jobId) {
+  if (!els.reviewPendingList) return;
+  els.reviewPendingList.innerHTML = '';
+  if (!jobId) {
+    if (els.reviewPendingEmpty) {
+      els.reviewPendingList.appendChild(els.reviewPendingEmpty);
+      els.reviewPendingEmpty.classList.remove('hidden');
+    }
+    return;
+  }
+
+  const draft = loadReviewDraft(jobId);
+  if (draft.lineComments.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'review-pending-empty';
+    empty.id = 'review-pending-empty';
+    empty.textContent = 'No line comments yet. Click a diff line to add one.';
+    els.reviewPendingEmpty = empty;
+    els.reviewPendingList.appendChild(empty);
+    return;
+  }
+
+  for (const c of draft.lineComments) {
+    const item = document.createElement('div');
+    item.className = 'review-pending-item';
+    const main = document.createElement('div');
+    main.className = 'review-pending-item-main';
+    const loc = document.createElement('div');
+    loc.className = 'review-pending-item-loc';
+    loc.textContent = `${c.path}:${c.line} (${c.side})`;
+    const body = document.createElement('div');
+    body.className = 'review-pending-item-body';
+    body.textContent = c.body;
+    main.appendChild(loc);
+    main.appendChild(body);
+    const remove = document.createElement('button');
+    remove.type = 'button';
+    remove.className = 'btn btn-muted-text btn-sm';
+    remove.textContent = 'Remove';
+    remove.addEventListener('click', () => {
+      const d = loadReviewDraft(jobId);
+      d.lineComments = d.lineComments.filter((x) => x.id !== c.id);
+      saveReviewDraft(jobId);
+      const job = jobsById[jobId];
+      if (job) {
+        const diff =
+          job.status === 'awaiting_review'
+            ? filterDiffForReviewJob(job)
+            : job.diff || '';
+        renderDiff(diff, { interactive: job.status === 'awaiting_review', jobId });
+      }
+      renderPendingCommentList(jobId);
+      syncSubmitReviewButton(jobId);
+    });
+    item.appendChild(main);
+    item.appendChild(remove);
+    els.reviewPendingList.appendChild(item);
+  }
+}
+
+/** @param {string | null} jobId */
+function syncSubmitReviewButton(jobId) {
+  if (!els.submitReviewBtn) return;
+  const enabled = Boolean(jobId && reviewDraftHasContent(jobId));
+  els.submitReviewBtn.disabled = !enabled;
+}
+
+function setView(view) {
+  currentView = view;
+  els.viewTitle.textContent = VIEW_TITLES[view] || view;
+
+  document.querySelectorAll('.nav-item').forEach((btn) => {
+    const active = btn.dataset.view === view;
+    btn.classList.toggle('active', active);
+    if (active) btn.setAttribute('aria-current', 'page');
+    else btn.removeAttribute('aria-current');
+  });
+
+  document.querySelectorAll('[data-view-panel]').forEach((panel) => {
+    panel.classList.toggle('hidden', panel.dataset.viewPanel !== view);
+  });
+
+  if (view === 'runs' && selectedRunId) {
+    connectSSE(selectedRunId);
+  }
+
+  if (view === 'settings') {
+    fillSettingsForm(appConfig);
+    setSettingsFeedback(null);
+  }
+
+  renderAll();
+}
+
+function setNavBadge(el, count) {
+  if (!el) return;
+  if (count > 0) {
+    el.textContent = String(count);
+    el.classList.remove('hidden');
+  } else {
+    el.textContent = '';
+    el.classList.add('hidden');
+  }
+}
+
+function updateNavBadges(jobs) {
+  const queued = jobs.filter((j) => j.status === 'queued').length;
+  const running = jobs.filter((j) => RUNNING_STATUSES.has(j.status)).length;
+  const review = jobs.filter((j) => j.status === 'awaiting_review').length;
+  const alerts = collectAlerts(jobs).length;
+  setNavBadge(els.navBadgeOverview, queued);
+  setNavBadge(els.navBadgeRuns, running);
+  setNavBadge(els.navBadgeReview, review);
+  setNavBadge(els.navBadgeAlerts, alerts);
+}
+
+function collectAlerts(jobs) {
+  /** @type {Array<{id: string, jobId: string, title: string, text: string, repo: string, number: string, time: string, actions: string[]}>} */
+  const alerts = [];
+  for (const job of jobs) {
+    const meta = jobRepoLine(job);
+    if (job.status === 'failed') {
+      alerts.push({
+        id: `failed:${job.id}:${job.updatedAt || job.createdAt}`,
+        jobId: job.id,
+        title: job.error ? truncate(job.error, 80) : `${jobTitle(job)} failed`,
+        text: job.error || 'Unknown error',
+        repo: meta.repo,
+        number: String(meta.number),
+        time: formatTime(job.updatedAt || job.createdAt),
+        actions: ['retry', 'clear'],
+      });
+    }
+    for (const log of job.logs || []) {
+      if (log.type !== 'error' && log.type !== 'warn') continue;
+      const payload = String(log.payload || '');
+      const notable =
+        /dirty|timeout|max.?turns|restart|recover|timed out|EADDRINUSE|post-pr|ticket rule|transition|jira/i.test(
+          payload
+        );
+      if (!notable && job.status !== 'failed' && log.type !== 'warn') continue;
+      if (job.status === 'failed' && payload === job.error) continue;
+      alerts.push({
+        id: `log:${job.id}:${log.ts}:${payload.slice(0, 40)}`,
+        jobId: job.id,
+        title: `${jobTitle(job)} warning`,
+        text: payload,
+        repo: meta.repo,
+        number: String(meta.number),
+        time: formatTime(log.ts),
+        actions: job.status === 'failed' ? ['retry', 'clear'] : ['runs'],
+      });
+    }
+  }
+  return alerts.filter((a) => !dismissedAlertIds.includes(a.id));
+}
+
+function renderStats(jobs) {
+  const queued = jobs.filter((j) => j.status === 'queued').length;
+  const running = jobs.filter((j) => RUNNING_STATUSES.has(j.status)).length;
+  const review = jobs.filter((j) => j.status === 'awaiting_review').length;
+  const alerts = collectAlerts(jobs).length;
+  const agg = aggregateJobUsage(jobs);
+  const costLabel = formatUsd(agg.withCost ? agg.totalCostUsd : null) || '—';
+  const tokLabel = agg.withTokens ? formatTokenCount(agg.totalTokens) || '—' : '—';
+
+  const items = [
+    { label: 'Queued', value: queued, color: 'var(--text-muted)', dot: false },
+    { label: 'Running', value: running, color: 'var(--amber)', dot: true },
+    { label: 'Ready for review', value: review, color: 'var(--primary)', dot: false },
+    { label: 'Alerts', value: alerts, color: 'var(--accent)', dot: false },
+    {
+      label: 'Job cost',
+      value: costLabel,
+      color: 'var(--primary)',
+      dot: false,
+      hint: 'These jobs only',
+    },
+    {
+      label: 'Tokens',
+      value: tokLabel,
+      color: 'var(--text-muted)',
+      dot: false,
+      hint: 'In + out',
+    },
+  ];
+
+  els.statsGrid.innerHTML = items
+    .map(
+      (s) => `
+      <div class="stat-card">
+        <div class="stat-label" style="color:${s.color}">
+          ${s.dot ? `<span class="stat-dot" style="background:${s.color}"></span>` : ''}
+          ${s.label}
+        </div>
+        <div class="stat-value${typeof s.value === 'string' ? ' stat-value-sm' : ''}">${s.value}</div>
+        ${s.hint ? `<div class="stat-hint">${s.hint}</div>` : ''}
+      </div>`
+    )
+    .join('');
+}
+
+function stepDotsHtml(states) {
+  return `<div class="step-dots">${states
+    .map((st) => `<span class="step-dot ${st}"></span>`)
+    .join('')}</div>`;
+}
+
+function typeBadgeEl(job) {
+  const t = issueBadge(job);
+  if (!t) return null;
+  const span = document.createElement('span');
+  span.className = `type-badge ${t}`;
+  span.textContent = t;
+  return span;
+}
+
+function statusPill(job) {
+  const span = document.createElement('span');
+  span.className = `status-pill ${job.status}`;
+  if (RUNNING_STATUSES.has(job.status)) {
+    span.innerHTML = `<span class="dot"></span>${statusLabel(job.status)}`;
+  } else {
+    span.textContent = statusLabel(job.status);
+  }
+  return span;
+}
+
+function renderOverview(jobs) {
+  const running = jobs.filter((j) => RUNNING_STATUSES.has(j.status));
+  const review = jobs.filter((j) => j.status === 'awaiting_review');
+  const queued = jobs.filter((j) => j.status === 'queued');
+
+  els.overviewRunning.innerHTML = '';
+  els.overviewRunningEmpty.classList.toggle('hidden', running.length > 0);
+  for (const job of running) {
+    const row = document.createElement('div');
+    row.className = 'job-row';
+    row.innerHTML = `
+      ${stepDotsHtml(pipelineStates(job))}
+      <div class="job-main">
+        <div class="job-title"></div>
+        <div class="job-sub mono"></div>
+      </div>
+    `;
+    row.querySelector('.job-title').textContent = jobTitle(job);
+    row.querySelector('.job-sub').textContent = jobSubLine(job);
+    const badge = typeBadgeEl(job);
+    if (badge) row.appendChild(badge);
+    const usageText = formatUsageCompact(job.usage);
+    if (usageText) {
+      const usageEl = document.createElement('span');
+      usageEl.className = 'usage-chip';
+      usageEl.textContent = usageText;
+      usageEl.title = formatUsageDetail(job.usage) || usageText;
+      row.appendChild(usageEl);
+    }
+    const elapsed = document.createElement('span');
+    elapsed.className = 'elapsed';
+    elapsed.textContent = formatElapsed(job);
+    row.appendChild(elapsed);
+    row.appendChild(statusPill(job));
+    row.style.cursor = 'pointer';
+    row.addEventListener('click', () => {
+      setView('runs');
+      selectRun(job.id);
+    });
+    els.overviewRunning.appendChild(row);
+  }
+
+  els.overviewReview.innerHTML = '';
+  els.overviewReviewEmpty.classList.toggle('hidden', review.length > 0);
+  for (const job of review) {
+    const row = document.createElement('div');
+    row.className = 'job-row';
+    row.innerHTML = `
+      ${stepDotsHtml(pipelineStates(job))}
+      <div class="job-main">
+        <div class="job-title"></div>
+        <div class="job-sub mono"></div>
+      </div>
+    `;
+    row.querySelector('.job-title').textContent = jobTitle(job);
+    row.querySelector('.job-sub').textContent = jobSubLine(job);
+    const badge = typeBadgeEl(job);
+    if (badge) row.appendChild(badge);
+    const usageText = formatUsageCompact(job.usage);
+    if (usageText) {
+      const usageEl = document.createElement('span');
+      usageEl.className = 'usage-chip';
+      usageEl.textContent = usageText;
+      usageEl.title = formatUsageDetail(job.usage) || usageText;
+      row.appendChild(usageEl);
+    }
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'btn btn-primary btn-sm';
+    btn.textContent = 'Review';
+    btn.addEventListener('click', () => {
+      setView('review');
+      selectReview(job.id);
+    });
+    row.appendChild(btn);
+    const link = document.createElement('button');
+    link.type = 'button';
+    link.className = 'btn-link';
+    link.textContent = 'Review →';
+    link.addEventListener('click', () => {
+      setView('review');
+      selectReview(job.id);
+    });
+    row.appendChild(link);
+    els.overviewReview.appendChild(row);
+  }
+
+  els.overviewQueue.innerHTML = '';
+  els.overviewQueueEmpty.classList.toggle('hidden', queued.length > 0);
+  queued.forEach((job, i) => {
+    const row = document.createElement('div');
+    row.className = 'job-row job-row-queue';
+    row.innerHTML = `
+      <span class="job-pos">${i + 1}</span>
+      <div class="job-main">
+        <div class="job-title"></div>
+        <div class="job-sub mono"></div>
+      </div>
+    `;
+    row.querySelector('.job-title').textContent = jobTitle(job);
+    row.querySelector('.job-sub').textContent = jobSubLine(job);
+    const badge = typeBadgeEl(job);
+    if (badge) row.appendChild(badge);
+    const pill = document.createElement('span');
+    pill.className = 'status-pill queued';
+    pill.textContent = 'Queued';
+    row.appendChild(pill);
+    const remove = document.createElement('button');
+    remove.type = 'button';
+    remove.className = 'btn-remove';
+    remove.setAttribute('aria-label', 'Remove');
+    remove.textContent = '✕';
+    remove.addEventListener('click', (e) => {
+      e.stopPropagation();
+      clearJob(job.id);
+    });
+    row.appendChild(remove);
+    els.overviewQueue.appendChild(row);
+  });
+}
+
+function renderRuns(jobs) {
+  const runs = jobs.filter((j) => RUN_STATUSES.has(j.status)).slice(0, 40);
+  els.runsList.innerHTML = '';
+  els.runsEmpty.classList.toggle('hidden', runs.length > 0);
+
+  for (const job of runs) {
+    const card = document.createElement('button');
+    card.type = 'button';
+    card.className = 'run-card' + (job.id === selectedRunId ? ' selected' : '');
+    const previewLogs = (job.logs || []).slice(-4);
+
+    const top = document.createElement('div');
+    top.className = 'run-card-top';
+    top.innerHTML = `
+      <div class="job-main">
+        <div class="job-title"></div>
+        <div class="job-sub mono"></div>
+      </div>
+    `;
+    top.querySelector('.job-title').textContent = jobTitle(job);
+    top.querySelector('.job-sub').textContent = jobSubLine(job);
+    top.appendChild(statusPill(job));
+    const elapsed = document.createElement('span');
+    elapsed.className = 'elapsed';
+    elapsed.textContent = formatElapsed(job);
+    top.appendChild(elapsed);
+    card.appendChild(top);
+
+    const usageLine = document.createElement('div');
+    usageLine.className = 'run-usage mono';
+    const usageDetail = formatUsageDetail(job.usage);
+    usageLine.textContent = usageDetail || '—';
+    if (!usageDetail) usageLine.classList.add('muted');
+    card.appendChild(usageLine);
+
+    const now = document.createElement('div');
+    now.className = 'run-now';
+    now.innerHTML = `<span class="run-now-label">Now:</span><span class="mono"></span>`;
+    now.querySelector('.mono').textContent = currentStepLabel(job);
+    card.appendChild(now);
+
+    if (job.id !== selectedRunId && previewLogs.length) {
+      const preview = document.createElement('div');
+      preview.className = 'run-log-preview';
+      for (const ev of previewLogs) {
+        const line = document.createElement('div');
+        const f = formatLogEvent(ev);
+        line.textContent = `[${formatTime(ev.ts)}] ${f.text}`;
+        preview.appendChild(line);
+      }
+      card.appendChild(preview);
+    }
+
+    if (job.id === selectedRunId) {
+      const detail = document.createElement('div');
+      detail.className = 'run-detail';
+      detail.addEventListener('click', (e) => e.stopPropagation());
+
+      const logWrap = document.createElement('div');
+      logWrap.className = 'log-pane-wrap';
+      const logPane = document.createElement('div');
+      logPane.className = 'log-pane amcp-scroll';
+      logPane.id = 'runs-log';
+      logPane.setAttribute('role', 'log');
+      logPane.setAttribute('aria-live', 'polite');
+      logPane.addEventListener('scroll', () => updateLogsPinFromScroll(logPane), { passive: true });
+      const jumpBtn = document.createElement('button');
+      jumpBtn.type = 'button';
+      jumpBtn.className = 'log-jump-latest hidden';
+      jumpBtn.id = 'runs-log-jump';
+      jumpBtn.textContent = 'Jump to latest';
+      jumpBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        scrollLogPaneToBottom(logPane);
+      });
+      logWrap.appendChild(logPane);
+      logWrap.appendChild(jumpBtn);
+      detail.appendChild(logWrap);
+
+      if (job.status === 'pr_opened' && job.prUrl) {
+        const banner = document.createElement('div');
+        banner.className = 'pr-banner';
+        const stats = diffStats(job.diff);
+        banner.innerHTML = `
+          <span>${stats.files} files · +${stats.additions} −${stats.deletions}</span>
+          <a class="btn btn-primary btn-sm" href="${job.prUrl}" target="_blank" rel="noopener">View Pull Request</a>
+        `;
+        detail.appendChild(banner);
+      }
+
+      if (job.status === 'failed') {
+        const err = document.createElement('div');
+        err.className = 'error-banner';
+        err.textContent = job.error || 'Unknown error';
+        detail.appendChild(err);
+        const actions = document.createElement('div');
+        actions.className = 'actions';
+        const retry = document.createElement('button');
+        retry.type = 'button';
+        retry.className = 'btn btn-warn';
+        retry.textContent = 'Retry';
+        retry.addEventListener('click', async () => {
+          await fetch(`/api/jobs/${job.id}/retry`, { method: 'POST' });
+          await fetchJobs();
+        });
+        const clear = document.createElement('button');
+        clear.type = 'button';
+        clear.className = 'btn btn-secondary';
+        clear.textContent = 'Clear';
+        clear.addEventListener('click', () => clearJob(job.id));
+        actions.appendChild(retry);
+        actions.appendChild(clear);
+        detail.appendChild(actions);
+      } else if (CLEARABLE_STATUSES.has(job.status) && job.status !== 'queued') {
+        const actions = document.createElement('div');
+        actions.className = 'actions';
+        const clear = document.createElement('button');
+        clear.type = 'button';
+        clear.className = 'btn btn-secondary btn-sm';
+        clear.textContent = 'Clear from history';
+        clear.addEventListener('click', () => clearJob(job.id));
+        actions.appendChild(clear);
+        detail.appendChild(actions);
+      }
+
+      card.appendChild(detail);
+    }
+
+    card.addEventListener('click', () => selectRun(job.id));
+    els.runsList.appendChild(card);
+  }
+
+  // Re-paint selected run logs after DOM rebuild (polling / re-render)
+  if (selectedRunId && jobsById[selectedRunId] && currentView === 'runs') {
+    const job = jobsById[selectedRunId];
+    requestAnimationFrame(() => renderLogPane(job.logs || []));
+  }
+}
+
+function isNearLogBottom(pane) {
+  return pane.scrollHeight - pane.scrollTop - pane.clientHeight <= LOG_PIN_THRESHOLD_PX;
+}
+
+function updateLogsPinFromScroll(pane) {
+  logsScrollTop = pane.scrollTop;
+  logsPinnedToBottom = isNearLogBottom(pane);
+  syncJumpToLatestButton();
+}
+
+function syncJumpToLatestButton() {
+  const jump = document.getElementById('runs-log-jump');
+  if (!jump) return;
+  jump.classList.toggle('hidden', logsPinnedToBottom);
+}
+
+function scrollLogPaneToBottom(pane) {
+  pane.scrollTop = pane.scrollHeight;
+  logsScrollTop = pane.scrollTop;
+  logsPinnedToBottom = true;
+  syncJumpToLatestButton();
+}
+
+function applyLogPaneScroll(pane) {
+  if (logsPinnedToBottom) {
+    scrollLogPaneToBottom(pane);
+  } else {
+    pane.scrollTop = logsScrollTop;
+    syncJumpToLatestButton();
+  }
+}
+
+function appendLogLine(event, shouldFollow = true) {
+  const pane = document.getElementById('runs-log');
+  if (!pane) return;
+  pane.appendChild(buildLogRow(event));
+  if (shouldFollow && logsPinnedToBottom) {
+    scrollLogPaneToBottom(pane);
+  } else {
+    syncJumpToLatestButton();
+  }
+}
+
+function renderLogPane(events) {
+  const pane = document.getElementById('runs-log');
+  if (!pane) return;
+  pane.innerHTML = '';
+  for (const event of events || []) {
+    appendLogLine(event, false);
+  }
+  applyLogPaneScroll(pane);
+}
+
+function renderReview(jobs) {
+  const pool = jobs.filter((j) => REVIEW_STATUSES.has(j.status));
+  const hasPool = pool.length > 0;
+
+  els.reviewToolbar.classList.toggle('hidden', !hasPool);
+  els.reviewEmpty.classList.toggle('hidden', hasPool);
+
+  if (els.reviewSearch && document.activeElement !== els.reviewSearch) {
+    els.reviewSearch.value = reviewSearch;
+  }
+  syncReviewFilterChips(pool);
+
+  if (!hasPool) {
+    els.reviewNoMatches.classList.add('hidden');
+    els.reviewLayout.classList.add('hidden');
+    return;
+  }
+
+  const list = filterReviewJobs(pool);
+  const noMatches = list.length === 0;
+  els.reviewNoMatches.classList.toggle('hidden', !noMatches);
+  els.reviewLayout.classList.toggle('hidden', noMatches);
+
+  if (selectedReviewId && !list.some((j) => j.id === selectedReviewId)) {
+    selectedReviewId = null;
+  }
+
+  if (noMatches) return;
+
+  if (!selectedReviewId && list.length) {
+    selectedReviewId = list[0].id;
+  }
+
+  els.reviewList.innerHTML = '';
+  for (const job of list) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'review-pick' + (job.id === selectedReviewId ? ' selected' : '');
+    btn.innerHTML = `
+      <div class="review-pick-title"></div>
+      <div class="review-pick-sub"></div>
+    `;
+    btn.querySelector('.review-pick-title').textContent = jobTitle(job);
+    btn.querySelector('.review-pick-sub').textContent =
+      `${jobSubLine(job).replace(/ · .*$/, '')} · ${statusLabel(job.status)}`;
+    btn.addEventListener('click', () => selectReview(job.id));
+    els.reviewList.appendChild(btn);
+  }
+
+  const job = selectedReviewId ? jobsById[selectedReviewId] : null;
+  if (!job || !REVIEW_STATUSES.has(job.status)) {
+    els.reviewEmptyDetail.classList.remove('hidden');
+    els.reviewDetailContent.classList.add('hidden');
+    return;
+  }
+
+  els.reviewEmptyDetail.classList.add('hidden');
+  els.reviewDetailContent.classList.remove('hidden');
+
+  const editable = job.status === 'awaiting_review';
+  const isOpened = job.status === 'pr_opened';
+  const isTerminal = job.status === 'discarded' || job.status === 'failed';
+
+  els.reviewActions.classList.toggle('hidden', !editable);
+  if (els.reviewFeedbackSection) {
+    els.reviewFeedbackSection.classList.toggle('hidden', !editable);
+  }
+  if (els.reviewFilesSection) {
+    els.reviewFilesSection.classList.toggle('hidden', !editable);
+  }
+  els.prTitle.disabled = !editable;
+  els.prBody.disabled = !editable;
+  if (els.reviewGeneralComment) {
+    els.reviewGeneralComment.disabled = !editable;
+  }
+  els.reviewPrSection.classList.toggle('hidden', !isOpened);
+  els.reviewTerminalSection.classList.toggle('hidden', !isTerminal);
+
+  if (document.activeElement !== els.prTitle && document.activeElement !== els.prBody) {
+    els.prTitle.value = job.prTitle || '';
+    els.prBody.value = job.prBody || '';
+  }
+
+  if (editable) {
+    const draft = loadReviewDraft(job.id);
+    if (
+      els.reviewGeneralComment &&
+      document.activeElement !== els.reviewGeneralComment
+    ) {
+      els.reviewGeneralComment.value = draft.generalComment;
+    }
+    renderPendingCommentList(job.id);
+    syncSubmitReviewButton(job.id);
+    renderReviewFilesPanel(job);
+  }
+
+  const displayDiff = editable
+    ? filterDiffForReviewJob(job)
+    : job.diff || '';
+  const stats = diffStats(displayDiff);
+  const fileHint = stats.files ? `${stats.files} files` : 'diff';
+  els.diffHeader.textContent = `Diff · ${fileHint} (+${stats.additions} / -${stats.deletions})`;
+
+  if (isOpened && job.prUrl) {
+    els.reviewPrLink.href = job.prUrl;
+    els.reviewPrLink.textContent = job.prUrl;
+  }
+
+  if (isTerminal) {
+    if (job.status === 'failed') {
+      els.reviewTerminalMessage.textContent = job.error
+        ? `Failed: ${job.error}`
+        : 'This run failed.';
+    } else {
+      els.reviewTerminalMessage.textContent = 'Rejected — discarded without opening a PR.';
+    }
+    els.reviewRetryBtn.classList.remove('hidden');
+  }
+
+  const focusInDiff = els.diffViewer?.contains(document.activeElement);
+  if (!(activeInlineCommentKey && focusInDiff)) {
+    renderDiff(displayDiff, { interactive: editable, jobId: job.id });
+  }
+
+  if (editable) {
+    ensureReviewFiles(job.id);
+  }
+}
+
+/**
+ * @param {object} job
+ * @returns {string}
+ */
+function filterDiffForReviewJob(job) {
+  const files = getReviewFilePaths(job.id);
+  if (files.length === 0) return job.diff || '';
+  const excluded = loadExcludedPaths(job.id);
+  const included = new Set(files.filter((p) => !excluded.has(p)));
+  if (included.size === files.length) return job.diff || '';
+  return filterDiffByIncludedPaths(job.diff || '', included);
+}
+
+/**
+ * @param {object} job
+ */
+function renderReviewFilesPanel(job) {
+  if (!els.reviewFilesList) return;
+
+  const paths = getReviewFilePaths(job.id).length
+    ? getReviewFilePaths(job.id)
+    : parseChangedFilesFromDiff(job.diff || '');
+  const excluded = loadExcludedPaths(job.id);
+  // Drop stale exclusions for paths no longer in the change.
+  let pruned = false;
+  for (const p of [...excluded]) {
+    if (!paths.includes(p)) {
+      excluded.delete(p);
+      pruned = true;
+    }
+  }
+  if (pruned) saveExcludedPaths(job.id);
+
+  const includedCount = paths.filter((p) => !excluded.has(p)).length;
+  if (els.reviewFilesCount) {
+    els.reviewFilesCount.textContent =
+      paths.length === 0
+        ? 'No files'
+        : `${includedCount} of ${paths.length} file${paths.length === 1 ? '' : 's'} included`;
+  }
+
+  els.reviewFilesList.innerHTML = '';
+  if (paths.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'review-files-empty';
+    empty.textContent = 'No changed files detected yet.';
+    els.reviewFilesList.appendChild(empty);
+    syncApproveButtonsForFileSelection(job.id);
+    return;
+  }
+
+  for (const filePath of paths) {
+    const label = document.createElement('label');
+    label.className = 'review-file-check';
+    const input = document.createElement('input');
+    input.type = 'checkbox';
+    input.checked = !excluded.has(filePath);
+    input.dataset.path = filePath;
+    input.addEventListener('change', () => {
+      const set = loadExcludedPaths(job.id);
+      if (input.checked) set.delete(filePath);
+      else set.add(filePath);
+      saveExcludedPaths(job.id);
+      renderReview(sortedJobs());
+    });
+    const span = document.createElement('span');
+    span.textContent = filePath;
+    label.appendChild(input);
+    label.appendChild(span);
+    els.reviewFilesList.appendChild(label);
+  }
+
+  syncApproveButtonsForFileSelection(job.id);
+}
+
+/** @param {string} jobId */
+function syncApproveButtonsForFileSelection(jobId) {
+  const files = getReviewFilePaths(jobId);
+  const excluded = loadExcludedPaths(jobId);
+  const includedCount = files.filter((p) => !excluded.has(p)).length;
+  const block = files.length > 0 && includedCount === 0;
+  for (const btn of [els.approveDraftBtn, els.approveReadyBtn].filter(Boolean)) {
+    if (block) {
+      btn.disabled = true;
+      btn.title = 'Keep at least one file included';
+    } else {
+      btn.title = '';
+      // Don't re-enable if submit/approve flow already disabled them mid-request;
+      // renderReview / approve finally handles that. Here only clear exclusion lock.
+      if (!btn.dataset.busy) btn.disabled = false;
+    }
+  }
+}
+
+/**
+ * Fetch changed-file list for a review job (best-effort).
+ * @param {string} jobId
+ */
+async function ensureReviewFiles(jobId) {
+  const job = jobsById[jobId];
+  if (!job || job.status !== 'awaiting_review') return;
+  if (Object.prototype.hasOwnProperty.call(reviewFileLists, jobId)) return;
+  try {
+    const res = await fetch(`/api/jobs/${jobId}/files`);
+    const data = await res.json().catch(() => ({}));
+    if (res.ok && Array.isArray(data.files)) {
+      setReviewFilePaths(jobId, data.files.map(String));
+      if (selectedReviewId === jobId) renderReview(sortedJobs());
+      return;
+    }
+  } catch {
+    /* fall through */
+  }
+  setReviewFilePaths(jobId, parseChangedFilesFromDiff(job.diff || ''));
+  if (selectedReviewId === jobId) renderReview(sortedJobs());
+}
+
+/** @param {object[]} pool */
+function syncReviewFilterChips(pool) {
+  const q = reviewSearch.trim().toLowerCase();
+  const searched = q ? pool.filter((j) => jobMatchesReviewSearch(j, q)) : pool;
+
+  for (const btn of els.reviewFilters?.querySelectorAll('[data-review-filter]') || []) {
+    const id = /** @type {ReviewFilterId} */ (btn.getAttribute('data-review-filter'));
+    const selected = id === reviewFilter;
+    btn.setAttribute('aria-selected', selected ? 'true' : 'false');
+    const countEl = btn.querySelector('[data-count-for]');
+    if (countEl) {
+      const def = REVIEW_FILTERS[id];
+      const n = def?.statuses
+        ? searched.filter((j) => def.statuses.has(j.status)).length
+        : searched.length;
+      countEl.textContent = String(n);
+    }
+  }
+}
+
+/** @param {object[]} pool */
+function filterReviewJobs(pool) {
+  const def = REVIEW_FILTERS[reviewFilter] || REVIEW_FILTERS.pending;
+  let list = def.statuses
+    ? pool.filter((j) => def.statuses.has(j.status))
+    : pool.slice();
+  const q = reviewSearch.trim().toLowerCase();
+  if (q) list = list.filter((j) => jobMatchesReviewSearch(j, q));
+  return list;
+}
+
+/**
+ * Case-insensitive substring match on issue number, title, URL, branch, PR title.
+ * @param {object} job
+ * @param {string} q lowercased query
+ */
+function jobMatchesReviewSearch(job, q) {
+  const ref = parseIssueRef(job.issueUrl);
+  const jiraKey = parseJiraKeyFromJob(job);
+  const hay = [
+    job.issueTitle,
+    job.issueUrl,
+    job.branchName,
+    job.prTitle,
+    job.prUrl,
+    ref?.number,
+    job.issueNumber,
+    ref?.full,
+    jiraKey,
+    job.ticketSource,
+  ]
+    .filter(Boolean)
+    .map((s) => String(s).toLowerCase());
+  return hay.some((s) => s.includes(q));
+}
+
+function renderActivityLog(jobs) {
+  const prev = els.logJobFilter.value;
+  els.logJobFilter.innerHTML = '<option value="">All jobs</option>';
+  for (const job of jobs) {
+    const opt = document.createElement('option');
+    opt.value = job.id;
+    opt.textContent = jobTicketLabel(job);
+    els.logJobFilter.appendChild(opt);
+  }
+  if ([...els.logJobFilter.options].some((o) => o.value === (logFilterJobId || prev))) {
+    els.logJobFilter.value = logFilterJobId || prev;
+    logFilterJobId = els.logJobFilter.value;
+  }
+
+  /** @type {Array<{ts: string, job: object, event: object}>} */
+  const entries = [];
+  for (const job of jobs) {
+    if (logFilterJobId && job.id !== logFilterJobId) continue;
+    for (const event of job.logs || []) {
+      entries.push({ ts: event.ts, job, event });
+    }
+  }
+  entries.sort((a, b) => new Date(b.ts) - new Date(a.ts));
+
+  els.activityLog.innerHTML = '';
+  els.logEmpty.classList.toggle('hidden', entries.length > 0);
+
+  for (const entry of entries.slice(0, 300)) {
+    const f = formatLogEvent(entry.event);
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td class="time"></td>
+      <td class="job"></td>
+      <td class="event"></td>
+      <td class="detail"></td>
+    `;
+    tr.querySelector('.time').textContent = formatTime(entry.event.ts);
+    tr.querySelector('.job').textContent = jobTicketLabel(entry.job);
+    tr.querySelector('.event').textContent = f.label;
+    const detail = tr.querySelector('.detail');
+    detail.textContent = f.text;
+    if (f.raw && f.raw.trim()) {
+      const details = document.createElement('details');
+      details.className = 'log-raw';
+      const summary = document.createElement('summary');
+      summary.textContent = 'Raw';
+      const pre = document.createElement('pre');
+      pre.className = 'log-raw-pre';
+      pre.textContent = f.raw;
+      details.appendChild(summary);
+      details.appendChild(pre);
+      detail.appendChild(details);
+    }
+    els.activityLog.appendChild(tr);
+  }
+}
+
+function jobCardShort(job) {
+  return jobTicketLabel(job);
+}
+
+function renderAlerts(jobs) {
+  const alerts = collectAlerts(jobs);
+  els.alertsList.innerHTML = '';
+  els.alertsEmpty.classList.toggle('hidden', alerts.length > 0);
+
+  for (const alert of alerts) {
+    const card = document.createElement('div');
+    card.className = 'alert-card';
+    card.innerHTML = `
+      <span class="alert-icon" aria-hidden="true">⚠</span>
+      <div class="alert-body">
+        <div class="alert-title"></div>
+        <div class="alert-meta"></div>
+        <div class="alert-message"></div>
+      </div>
+      <div class="alert-actions"></div>
+    `;
+    card.querySelector('.alert-title').textContent = alert.title;
+    card.querySelector('.alert-meta').textContent =
+      `${alert.number} · ${alert.time}`;
+    card.querySelector('.alert-message').textContent = alert.text;
+    const actions = card.querySelector('.alert-actions');
+
+    if (alert.actions.includes('retry')) {
+      const retry = document.createElement('button');
+      retry.type = 'button';
+      retry.className = 'btn btn-primary btn-sm';
+      retry.textContent = 'Retry';
+      retry.addEventListener('click', async () => {
+        await fetch(`/api/jobs/${alert.jobId}/retry`, { method: 'POST' });
+        await fetchJobs();
+        setView('runs');
+        selectRun(alert.jobId);
+      });
+      actions.appendChild(retry);
+    }
+
+    if (alert.actions.includes('clear')) {
+      const clear = document.createElement('button');
+      clear.type = 'button';
+      clear.className = 'btn btn-secondary btn-sm';
+      clear.textContent = 'Clear';
+      clear.addEventListener('click', () => clearJob(alert.jobId));
+      actions.appendChild(clear);
+    }
+
+    const dismiss = document.createElement('button');
+    dismiss.type = 'button';
+    dismiss.className = 'btn btn-secondary btn-sm';
+    dismiss.textContent = 'Dismiss';
+    dismiss.addEventListener('click', () => {
+      dismissedAlertIds.push(alert.id);
+      saveDismissed();
+      renderAll();
+    });
+    actions.appendChild(dismiss);
+
+    els.alertsList.appendChild(card);
+  }
+}
+
+function renderAll() {
+  const jobs = sortedJobs();
+  updateNavBadges(jobs);
+  renderStats(jobs);
+  renderOverview(jobs);
+  renderRuns(jobs);
+  renderReview(jobs);
+  renderActivityLog(jobs);
+  renderAlerts(jobs);
+}
+
+function connectSSE(jobId) {
+  if (eventSource) {
+    eventSource.close();
+    eventSource = null;
+  }
+
+  const job = jobsById[jobId];
+  // Defer until DOM from renderRuns exists
+  requestAnimationFrame(() => {
+    renderLogPane(job?.logs || []);
+  });
+
+  eventSource = new EventSource(`/api/jobs/${jobId}/events`);
+  const seen = new Set(
+    (job?.logs || []).map((e) => `${e.ts}:${e.type}:${JSON.stringify(e.payload)}`)
+  );
+
+  eventSource.onmessage = (e) => {
+    const event = JSON.parse(e.data);
+    const key = `${event.ts}:${event.type}:${JSON.stringify(event.payload)}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    if (currentView === 'runs' && selectedRunId === jobId) {
+      appendLogLine(event);
+    }
+    if (event.type === 'status' || event.type === 'error') {
+      fetchJobs();
+    }
+  };
+
+  eventSource.onerror = () => {
+    // EventSource auto-reconnects; polling keeps job state fresh
+  };
+}
+
+function selectRun(jobId) {
+  const changed = selectedRunId !== jobId;
+  selectedRunId = jobId;
+  if (changed) {
+    logsPinnedToBottom = true;
+    logsScrollTop = 0;
+  }
+  renderRuns(sortedJobs());
+  if (changed || !eventSource) {
+    connectSSE(jobId);
+  } else {
+    requestAnimationFrame(() => renderLogPane(jobsById[jobId]?.logs || []));
+  }
+}
+
+function selectReview(jobId) {
+  selectedReviewId = jobId;
+  const job = jobsById[jobId];
+  if (job && REVIEW_STATUSES.has(job.status)) {
+    const def = REVIEW_FILTERS[reviewFilter];
+    if (def?.statuses && !def.statuses.has(job.status)) {
+      if (job.status === 'awaiting_review') reviewFilter = 'pending';
+      else if (job.status === 'pr_opened') reviewFilter = 'approved';
+      else if (job.status === 'discarded') reviewFilter = 'rejected';
+      else if (job.status === 'failed') reviewFilter = 'failed';
+      else reviewFilter = 'all';
+      saveReviewFilter();
+    }
+    const q = reviewSearch.trim().toLowerCase();
+    if (q && !jobMatchesReviewSearch(job, q)) {
+      reviewSearch = '';
+      if (els.reviewSearch) els.reviewSearch.value = '';
+      saveReviewSearch();
+    }
+  }
+  renderReview(sortedJobs());
+  if (job?.status === 'awaiting_review') {
+    ensureReviewFiles(jobId);
+  }
+}
+
+async function clearJob(jobId) {
+  if (
+    !confirm(
+      'Clear this job from history? Worktree/branch will be removed if present. You can re-queue the issue afterward.'
+    )
+  ) {
+    return;
+  }
+
+  try {
+    const res = await fetch(`/api/jobs/${jobId}`, { method: 'DELETE' });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      alert(data.error || `Clear failed (HTTP ${res.status})`);
+      return;
+    }
+
+    delete jobsById[jobId];
+    if (selectedRunId === jobId) {
+      selectedRunId = null;
+      if (eventSource) {
+        eventSource.close();
+        eventSource = null;
+      }
+    }
+    if (selectedReviewId === jobId) {
+      selectedReviewId = null;
+    }
+    clearExcludedPaths(jobId);
+    delete reviewFileLists[jobId];
+    clearReviewDraft(jobId);
+    await fetchJobs();
+  } catch (err) {
+    alert(`Clear failed: ${err.message}`);
+  }
+}
+
+async function fetchJobs() {
+  try {
+    const res = await fetch('/api/jobs');
+    const jobs = await res.json();
+    jobsById = Object.fromEntries(jobs.map((j) => [j.id, j]));
+    renderAll();
+
+    if (currentView === 'runs' && selectedRunId && jobsById[selectedRunId]) {
+      // Keep SSE; refresh card chrome via renderRuns already called
+    }
+  } catch (err) {
+    console.error('Failed to fetch jobs:', err);
+  }
+}
+
+async function readJson(res) {
+  const ct = res.headers.get('content-type') || '';
+  const text = await res.text();
+  if (!ct.includes('application/json')) {
+    const snippet = text.trim().slice(0, 80).replace(/\s+/g, ' ');
+    throw new Error(
+      `Expected JSON from ${res.url || 'API'} (HTTP ${res.status}), got ${ct || 'unknown type'}: ${snippet}`
+    );
+  }
+  try {
+    return text ? JSON.parse(text) : {};
+  } catch {
+    throw new Error(`Invalid JSON (HTTP ${res.status})`);
+  }
+}
+
+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 msToMinutes(ms) {
+  const n = Number(ms);
+  if (!Number.isFinite(n) || n <= 0) return 15;
+  return Math.max(1, Math.round(n / 60_000));
+}
+
+function setSettingsFeedback(message, kind = 'ok') {
+  if (!els.settingsFeedback) return;
+  if (!message) {
+    els.settingsFeedback.textContent = '';
+    els.settingsFeedback.className = 'feedback hidden';
+    return;
+  }
+  els.settingsFeedback.textContent = message;
+  els.settingsFeedback.className = `feedback ${kind}`;
+  els.settingsFeedback.classList.remove('hidden');
+}
+
+function knownToolsList(cfg = appConfig) {
+  return Array.isArray(cfg.knownTools) && cfg.knownTools.length
+    ? cfg.knownTools
+    : DEFAULT_KNOWN_TOOLS;
+}
+
+function fillSettingsForm(cfg) {
+  if (!els.settingsForm || !cfg) return;
+
+  updateTicketSourceUI(cfg.ticketSource === 'jira' ? 'jira' : 'github');
+
+  if (els.settingsJiraBaseUrl) {
+    els.settingsJiraBaseUrl.value = cfg.jiraBaseUrl || '';
+  }
+  if (els.settingsJiraEmail) {
+    els.settingsJiraEmail.value = cfg.jiraEmail || '';
+  }
+  if (els.settingsJiraToken) {
+    els.settingsJiraToken.value = '';
+    els.settingsJiraToken.placeholder = cfg.jiraApiTokenSet
+      ? `Saved (${cfg.jiraApiTokenMasked || '••••'}) — leave blank to keep`
+      : 'Paste API token';
+  }
+  if (els.settingsJiraTokenHint) {
+    els.settingsJiraTokenHint.innerHTML = cfg.jiraConfigured
+      ? 'Connected — token stored in <code>.acdev/.env</code> (not committed).'
+      : 'Create a token at id.atlassian.com → Security → API tokens. Stored in <code>.acdev/.env</code> (not committed).';
+  }
+  if (els.settingsJiraPrPhrase) {
+    els.settingsJiraPrPhrase.value = cfg.jiraPrLinkPhrase || 'Relates to';
+  }
+
+  const jiraRule = cfg.jiraRules?.afterPrOpened || {};
+  if (els.settingsJiraRuleEnabled) {
+    els.settingsJiraRuleEnabled.checked = Boolean(jiraRule.enabled);
+  }
+  if (els.settingsJiraRuleStatus) {
+    els.settingsJiraRuleStatus.value = jiraRule.targetStatus || 'In Review';
+  }
+
+  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)
+      ? ghRule.action
+      : 'none';
+    els.settingsGithubRuleAction.value = action;
+  }
+  if (els.settingsGithubRuleLabel) {
+    els.settingsGithubRuleLabel.value = ghRule.label || '';
+  }
+  updateGithubRuleLabelVisibility();
+
+  if (els.jiraStatus) {
+    els.jiraStatus.textContent = cfg.jiraConfigured
+      ? 'Credentials on file'
+      : ticketSource === 'jira'
+        ? 'Connect Jira to enqueue issues'
+        : '';
+    els.jiraStatus.className = cfg.jiraConfigured ? 'jira-status ok' : 'jira-status';
+  }
+
+  if (els.settingsBaseBranch) {
+    els.settingsBaseBranch.value = cfg.baseBranch || '';
+  }
+
+  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 (cfg.model) els.settingsModel.value = cfg.model;
+  }
+
+  if (els.settingsMaxTurns) {
+    els.settingsMaxTurns.value = String(cfg.maxAgentTurns ?? 30);
+  }
+
+  if (els.settingsTimeout) {
+    const minutes = msToMinutes(cfg.agentTimeoutMs ?? 900_000);
+    els.settingsTimeout.value = String(minutes);
+    updateTimeoutMsHint(minutes);
+  }
+
+  if (els.settingsTestCommand) {
+    els.settingsTestCommand.value =
+      cfg.testCommand == null ? '' : String(cfg.testCommand);
+  }
+
+  if (els.settingsTools) {
+    const tools = knownToolsList(cfg);
+    const selected = new Set(
+      Array.isArray(cfg.allowedTools) ? cfg.allowedTools : tools
+    );
+    els.settingsTools.innerHTML = '';
+    for (const tool of tools) {
+      const label = document.createElement('label');
+      label.className = 'tool-check';
+      const input = document.createElement('input');
+      input.type = 'checkbox';
+      input.name = 'allowedTools';
+      input.value = tool;
+      input.checked = selected.has(tool);
+      const span = document.createElement('span');
+      span.textContent = tool;
+      label.appendChild(input);
+      label.appendChild(span);
+      els.settingsTools.appendChild(label);
+    }
+  }
+}
+
+/**
+ * Show GitHub label field only when action is add_label.
+ */
+function updateGithubRuleLabelVisibility() {
+  if (!els.settingsGithubRuleLabelField || !els.settingsGithubRuleAction) return;
+  const show = els.settingsGithubRuleAction.value === 'add_label';
+  els.settingsGithubRuleLabelField.classList.toggle('hidden', !show);
+}
+
+/**
+ * @param {'github' | 'jira'} source
+ */
+function updateTicketSourceUI(source) {
+  ticketSource = source === 'jira' ? 'jira' : 'github';
+
+  if (els.settingsTicketSource) {
+    els.settingsTicketSource.querySelectorAll('.source-btn').forEach((btn) => {
+      const active = btn.dataset.source === ticketSource;
+      btn.classList.toggle('active', active);
+    });
+  }
+
+  if (els.jiraConnectPanel) {
+    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');
+  }
+
+  if (els.ticketSourceMeta) {
+    els.ticketSourceMeta.textContent =
+      ticketSource === 'jira' ? 'Tickets: Jira' : 'Tickets: GitHub';
+  }
+
+  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';
+    } else {
+      els.issueUrls.placeholder =
+        'Paste GitHub issue links — one per line, or comma-separated\ne.g. https://github.com/acme/storefront/issues/482';
+    }
+  }
+
+  if (els.issueUrlsLabel) {
+    els.issueUrlsLabel.textContent =
+      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.overviewQueueEmpty) {
+    els.overviewQueueEmpty.textContent =
+      ticketSource === 'jira'
+        ? 'Nothing queued. Paste Jira keys or browse URLs above to get started.'
+        : 'Nothing queued. Paste issue links above to get started.';
+  }
+}
+
+function updateTimeoutMsHint(minutes) {
+  if (!els.settingsTimeoutMs) return;
+  const m = Number(minutes);
+  if (!Number.isFinite(m) || m <= 0) {
+    els.settingsTimeoutMs.textContent = '—';
+    return;
+  }
+  els.settingsTimeoutMs.textContent = String(Math.round(m * 60_000));
+}
+
+function applyConfigSnapshot(data) {
+  appConfig = data || {};
+  if (data?.model) currentModel = data.model;
+  updateModelButtons();
+  updateTicketSourceUI(data?.ticketSource === 'jira' ? 'jira' : 'github');
+  if (els.repoName) {
+    els.repoName.textContent = data?.repoName || 'local repo';
+  }
+  if (els.repoBranch) {
+    els.repoBranch.textContent = data?.baseBranch || '—';
+  }
+  if (currentView === 'settings') {
+    fillSettingsForm(appConfig);
+  }
+}
+
+async function fetchConfig() {
+  try {
+    const res = await fetch('/api/config');
+    if (!res.ok) return;
+    const data = await readJson(res);
+    applyConfigSnapshot(data);
+  } catch (err) {
+    console.error('Failed to fetch config:', err);
+  }
+}
+
+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;
+  const maxAgentTurns = Number(els.settingsMaxTurns?.value);
+  const timeoutMinutes = Number(els.settingsTimeout?.value);
+  const testRaw = els.settingsTestCommand?.value ?? '';
+  const testTrimmed = testRaw.trim();
+  const allowedTools = [
+    ...(els.settingsTools?.querySelectorAll('input[name="allowedTools"]:checked') ||
+      []),
+  ].map((el) => el.value);
+
+  /** @type {Record<string, unknown>} */
+  const patch = {
+    baseBranch,
+    model,
+    maxAgentTurns,
+    agentTimeoutMs: Math.round(timeoutMinutes * 60_000),
+    testCommand: testTrimmed === '' ? null : testTrimmed,
+    allowedTools,
+    ticketSource,
+  };
+
+  if (ticketSource === 'jira' || els.settingsJiraBaseUrl?.value) {
+    patch.jiraBaseUrl = els.settingsJiraBaseUrl?.value?.trim() || '';
+    patch.jiraPrLinkPhrase =
+      els.settingsJiraPrPhrase?.value?.trim() || 'Relates to';
+    const email = els.settingsJiraEmail?.value?.trim() || '';
+    if (email) patch.jiraEmail = email;
+    const token = els.settingsJiraToken?.value?.trim() || '';
+    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() || '',
+      },
+    };
+  }
+
+  return patch;
+}
+
+async function saveSettings(event) {
+  event?.preventDefault?.();
+  if (settingsSaving) return;
+  settingsSaving = true;
+  if (els.settingsSaveBtn) els.settingsSaveBtn.disabled = true;
+  setSettingsFeedback(null);
+
+  try {
+    const patch = readSettingsForm();
+    if (!patch.baseBranch) {
+      setSettingsFeedback('Base branch is required.', 'error');
+      return;
+    }
+    if (!Number.isInteger(patch.maxAgentTurns) || patch.maxAgentTurns <= 0) {
+      setSettingsFeedback('Max agent turns must be a positive integer.', 'error');
+      return;
+    }
+    if (!Number.isInteger(patch.agentTimeoutMs) || patch.agentTimeoutMs <= 0) {
+      setSettingsFeedback('Agent timeout must be at least 1 minute.', 'error');
+      return;
+    }
+
+    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) {
+      setSettingsFeedback(data.error || `Save failed (HTTP ${res.status})`, 'error');
+      return;
+    }
+    applyConfigSnapshot(data);
+    fillSettingsForm(data);
+    setSettingsFeedback('Settings saved. Next jobs will use these values.', 'ok');
+  } catch (err) {
+    setSettingsFeedback(err.message || 'Save failed', 'error');
+  } finally {
+    settingsSaving = false;
+    if (els.settingsSaveBtn) els.settingsSaveBtn.disabled = false;
+  }
+}
+
+// —— Events ——
+document.querySelectorAll('.nav-item').forEach((btn) => {
+  btn.addEventListener('click', () => setView(/** @type {ViewId} */ (btn.dataset.view)));
+});
+
+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.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;
+
+  const urls = splitIssueUrls(text);
+
+  try {
+    const res = await fetch('/api/issues', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ urls, ticketSource }),
+    });
+    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';
+      els.enqueueFeedback.classList.remove('hidden');
+      return;
+    }
+    els.issueUrls.value = '';
+    const parts = [];
+    if (data.jobs?.length) parts.push(`Added ${data.jobs.length}`);
+    if (data.skipped?.length) {
+      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');
+      els.enqueueFeedback.classList.remove('hidden');
+    }
+    await fetchJobs();
+    if (data.jobs?.length) {
+      setView('runs');
+      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) => {
+  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
+  }
+});
+
+els.jiraTestBtn?.addEventListener('click', async () => {
+  if (!els.jiraTestBtn || !els.jiraStatus) return;
+  els.jiraTestBtn.disabled = true;
+  els.jiraStatus.textContent = 'Testing…';
+  els.jiraStatus.className = 'jira-status';
+  try {
+    const body = {
+      baseUrl: els.settingsJiraBaseUrl?.value?.trim() || undefined,
+      email: els.settingsJiraEmail?.value?.trim() || undefined,
+      apiToken: els.settingsJiraToken?.value?.trim() || undefined,
+    };
+    const res = await fetch('/api/jira/test', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    const data = await readJson(res);
+    if (!res.ok || !data.ok) {
+      els.jiraStatus.textContent = data.error || `Failed (HTTP ${res.status})`;
+      els.jiraStatus.className = 'jira-status err';
+      return;
+    }
+    els.jiraStatus.textContent = `Connected as ${data.displayName || 'OK'}`;
+    els.jiraStatus.className = 'jira-status ok';
+  } catch (err) {
+    els.jiraStatus.textContent = err.message || 'Test failed';
+    els.jiraStatus.className = 'jira-status err';
+  } finally {
+    els.jiraTestBtn.disabled = false;
+  }
+});
+
+async function approve(draft) {
+  if (!selectedReviewId) return;
+  const jobId = selectedReviewId;
+  const files = getReviewFilePaths(jobId);
+  const excludedPaths = getExcludedPathsForApprove(jobId);
+  if (files.length > 0 && excludedPaths.length >= files.length) {
+    alert('Keep at least one file included');
+    return;
+  }
+
+  const btns = [
+    els.approveDraftBtn,
+    els.approveReadyBtn,
+    els.rejectBtn,
+    els.submitReviewBtn,
+  ].filter(Boolean);
+  btns.forEach((b) => {
+    b.disabled = true;
+    b.dataset.busy = '1';
+  });
+  try {
+    const res = await fetch(`/api/jobs/${jobId}/approve`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        prTitle: els.prTitle.value,
+        prBody: els.prBody.value,
+        draft,
+        excludedPaths,
+      }),
+    });
+    if (res.ok) {
+      clearExcludedPaths(jobId);
+      delete reviewFileLists[jobId];
+    }
+    await fetchJobs();
+    if (!res.ok) {
+      const data = await res.json();
+      alert(`Approve failed: ${data.error}`);
+    }
+  } finally {
+    btns.forEach((b) => {
+      delete b.dataset.busy;
+      b.disabled = false;
+    });
+    if (selectedReviewId) {
+      syncSubmitReviewButton(selectedReviewId);
+      syncApproveButtonsForFileSelection(selectedReviewId);
+    }
+  }
+}
+
+async function submitReview() {
+  if (!selectedReviewId) return;
+  const jobId = selectedReviewId;
+  const draft = loadReviewDraft(jobId);
+  const generalComment = (els.reviewGeneralComment?.value || draft.generalComment || '').trim();
+  draft.generalComment = generalComment;
+  saveReviewDraft(jobId);
+
+  const lineComments = draft.lineComments
+    .map((c) => ({
+      path: c.path,
+      line: c.line,
+      side: c.side,
+      body: c.body.trim(),
+    }))
+    .filter((c) => c.body);
+
+  if (!generalComment && lineComments.length === 0) {
+    syncSubmitReviewButton(jobId);
+    return;
+  }
+
+  const btns = [
+    els.submitReviewBtn,
+    els.approveDraftBtn,
+    els.approveReadyBtn,
+    els.rejectBtn,
+  ].filter(Boolean);
+  btns.forEach((b) => {
+    b.disabled = true;
+  });
+
+  try {
+    const res = await fetch(`/api/jobs/${jobId}/review`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ generalComment, lineComments }),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      alert(data.error || `Submit review failed (HTTP ${res.status})`);
+      return;
+    }
+
+    clearReviewDraft(jobId);
+    if (els.reviewGeneralComment) els.reviewGeneralComment.value = '';
+    selectedRunId = jobId;
+    selectedReviewId = null;
+    await fetchJobs();
+    setView('runs');
+    selectRun(jobId);
+  } catch (err) {
+    alert(`Submit review failed: ${err.message}`);
+  } finally {
+    btns.forEach((b) => {
+      b.disabled = false;
+    });
+    if (selectedReviewId) syncSubmitReviewButton(selectedReviewId);
+  }
+}
+
+els.approveDraftBtn.addEventListener('click', () => approve(true));
+els.approveReadyBtn.addEventListener('click', () => approve(false));
+els.submitReviewBtn?.addEventListener('click', () => submitReview());
+
+els.reviewFilesSelectAll?.addEventListener('click', () => {
+  if (!selectedReviewId) return;
+  const set = loadExcludedPaths(selectedReviewId);
+  set.clear();
+  saveExcludedPaths(selectedReviewId);
+  renderReview(sortedJobs());
+});
+
+els.reviewFilesDeselectAll?.addEventListener('click', () => {
+  if (!selectedReviewId) return;
+  const files = getReviewFilePaths(selectedReviewId);
+  const set = loadExcludedPaths(selectedReviewId);
+  for (const p of files) set.add(p);
+  saveExcludedPaths(selectedReviewId);
+  renderReview(sortedJobs());
+});
+
+els.reviewGeneralComment?.addEventListener('input', () => {
+  if (!selectedReviewId) return;
+  const draft = loadReviewDraft(selectedReviewId);
+  draft.generalComment = els.reviewGeneralComment.value;
+  saveReviewDraft(selectedReviewId);
+  syncSubmitReviewButton(selectedReviewId);
+});
+
+els.rejectBtn.addEventListener('click', async () => {
+  if (!selectedReviewId) return;
+  await fetch(`/api/jobs/${selectedReviewId}/reject`, { method: 'POST' });
+  selectedReviewId = null;
+  await fetchJobs();
+});
+
+els.reviewClearBtn.addEventListener('click', () => {
+  if (!selectedReviewId) return;
+  clearJob(selectedReviewId);
+});
+
+els.reviewPrClearBtn.addEventListener('click', () => {
+  if (!selectedReviewId) return;
+  clearJob(selectedReviewId);
+});
+
+els.reviewTerminalClearBtn?.addEventListener('click', () => {
+  if (!selectedReviewId) return;
+  clearJob(selectedReviewId);
+});
+
+els.reviewRetryBtn?.addEventListener('click', async () => {
+  if (!selectedReviewId) return;
+  await fetch(`/api/jobs/${selectedReviewId}/retry`, { method: 'POST' });
+  selectedReviewId = null;
+  await fetchJobs();
+  setView('runs');
+});
+
+els.reviewFilters?.addEventListener('click', (e) => {
+  const btn = e.target.closest('[data-review-filter]');
+  if (!btn || !els.reviewFilters.contains(btn)) return;
+  const id = btn.getAttribute('data-review-filter');
+  if (!id || !(id in REVIEW_FILTERS) || id === reviewFilter) return;
+  reviewFilter = /** @type {ReviewFilterId} */ (id);
+  saveReviewFilter();
+  renderReview(sortedJobs());
+});
+
+els.reviewSearch?.addEventListener('input', () => {
+  reviewSearch = els.reviewSearch.value;
+  saveReviewSearch();
+  renderReview(sortedJobs());
+});
+
+els.logJobFilter.addEventListener('change', () => {
+  logFilterJobId = els.logJobFilter.value;
+  renderActivityLog(sortedJobs());
+});
+
+applyTheme(loadTheme());
+fetchConfig();
+fetchJobs();
+setInterval(fetchJobs, 3000);