Fix Run Detection: use /api/dda/detect/from-library and deploy compare UI.

The jobs API was not on dev Space (404). Wire compare tab to the existing
sync library detection endpoint and ship compare/result/reports JS + template.

Co-authored-by: Cursor <cursoragent@cursor.com>

Dockerfile

@@ -21,7 +21,7 @@ WORKDIR /app
 
 # Build-time info + cache-bust:
 # Changing APP_BUILD forces Docker to re-run subsequent layers (including pip install).
-ARG APP_BUILD=31
+ARG APP_BUILD=32
 ENV MAX_GEOTIFF_MB=5120
 ENV APP_BUILD=${APP_BUILD}
 ENV GDAL_CONFIG=/usr/bin/gdal-config

static/css/dda.css

@@ -175,12 +175,130 @@
 .dda-slot {
   border: 2px dashed var(--border);
   border-radius: 10px;
-  padding: 1.5rem;
-  min-height: 140px;
+  padding: 1rem;
+  min-height: 120px;
   text-align: center;
 }
+.dda-image-select {
+  width: 100%;
+  margin: 0.5rem 0;
+  padding: 0.45rem 0.55rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 0.88rem;
+}
+.dda-slot-preview-wrap { min-height: 48px; margin: 0.35rem 0; }
+.dda-slot .dda-slot-pick { margin-top: 0.35rem; }
 .dda-slot.filled { border-style: solid; border-color: var(--grad-start); }
+.dda-slot.drag-over { border-color: var(--grad-start); background: rgba(45,212,191,0.06); }
 .dda-slot-label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
+.dda-compare-library { margin: 1rem 0; }
+.dda-compare-assign .btn {
+  pointer-events: auto;
+  position: relative;
+  z-index: 2;
+}
+.dda-compare-grid { min-height: 120px; }
+.dda-compare-card { position: relative; }
+.dda-compare-card.selected-t1 { border-color: #2dd4bf; box-shadow: 0 0 0 2px rgba(45,212,191,0.35); }
+.dda-compare-card.selected-t2 { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96,165,250,0.35); }
+.dda-compare-assign {
+  display: flex;
+  gap: 0.35rem;
+  padding: 0.45rem 0.5rem 0.55rem;
+  border-top: 1px solid var(--border);
+}
+.dda-compare-assign .btn { flex: 1; font-size: 0.75rem; padding: 0.3rem 0.4rem; }
+
+.dda-reports-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+  margin-top: 0.5rem;
+}
+.dda-reports-table th, .dda-reports-table td {
+  border: 1px solid var(--border);
+  padding: 0.4rem 0.55rem;
+  text-align: left;
+}
+.dda-status { font-size: 0.78rem; font-weight: 600; text-transform: capitalize; }
+.dda-status-completed { color: var(--success, #16a34a); }
+.dda-status-running, .dda-status-queued { color: #ca8a04; }
+.dda-status-failed { color: var(--danger, #dc2626); }
+.dda-slot-preview {
+  width: 100%;
+  max-height: 160px;
+  object-fit: contain;
+  border-radius: 6px;
+  margin: 0.5rem 0;
+  background: var(--bg);
+}
+.dda-slot-meta { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.5rem; }
+
+.dda-detect-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: flex-end;
+  margin-bottom: 1rem;
+}
+.dda-detect-options .form-group { margin: 0; min-width: 160px; }
+.dda-check { display: flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; color: var(--text-muted); }
+
+.dda-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1300;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+.dda-modal.hidden { display: none; }
+.dda-modal-panel {
+  width: min(720px, 100%);
+  max-height: 80vh;
+  overflow: auto;
+}
+.dda-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 0.65rem;
+  padding: 0.5rem 0;
+}
+.dda-picker-item {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-elevated);
+  cursor: pointer;
+  padding: 0;
+  overflow: hidden;
+  text-align: left;
+  color: var(--text);
+}
+.dda-picker-item:hover { border-color: var(--grad-start); }
+.dda-picker-item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
+.dda-picker-item span { padding: 0.4rem 0.5rem; font-size: 0.75rem; }
+
+.dda-result-overlay { margin: 1rem 0; }
+.dda-result-img { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }
+.dda-regions-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+  margin-top: 0.75rem;
+}
+.dda-regions-table th, .dda-regions-table td {
+  border: 1px solid var(--border);
+  padding: 0.35rem 0.5rem;
+  text-align: left;
+}
 
 .dda-upload-form .location-row { margin-bottom: 0.5rem; }
 

static/js/dda/compare.js

@@ -0,0 +1,363 @@
+/** Change Detection tab — pick library images and run comparison. */
+
+const compareState = { t1: null, t2: null, pickingSlot: null };
+
+function compareFormatBytes(n) {
+  if (n >= 1024 ** 3) return (n / 1024 ** 3).toFixed(1) + ' GB';
+  if (n >= 1024 ** 2) return (n / 1024 ** 2).toFixed(1) + ' MB';
+  return (n / 1024).toFixed(0) + ' KB';
+}
+
+function thumbUrlFor(path) {
+  return `/api/dda/local/thumb?path=${encodeURIComponent(path)}`;
+}
+
+function encodePath(path) {
+  return encodeURIComponent(path || '');
+}
+
+function decodePath(encoded) {
+  try {
+    return decodeURIComponent(encoded || '');
+  } catch (_) {
+    return encoded || '';
+  }
+}
+
+function ensureDdaState() {
+  window.ddaState = window.ddaState || {};
+  return window.ddaState;
+}
+
+function updateRunButton() {
+  const btn = document.getElementById('btn-run-job');
+  if (btn) btn.disabled = !(compareState.t1 && compareState.t2);
+}
+
+function renderSlotPreview(slotKey, selection) {
+  const wrap = document.getElementById(slotKey === 't1' ? 'slot-t1-preview' : 'slot-t2-preview');
+  const slot = document.getElementById(slotKey === 't1' ? 'slot-t1' : 'slot-t2');
+  if (!wrap || !slot) return;
+
+  if (!selection) {
+    wrap.innerHTML = '<p class="dim">No image selected</p>';
+    slot.classList.remove('filled');
+    return;
+  }
+
+  slot.classList.add('filled');
+  const thumb = selection.thumbUrl || thumbUrlFor(selection.path);
+  wrap.innerHTML = `
+    <img class="dda-slot-preview" src="${thumb}" alt="" />
+    <div class="dda-slot-meta"><strong>${selection.year}</strong> — ${selection.filename}</div>`;
+}
+
+function populateSelects(items) {
+  ['select-t1', 'select-t2'].forEach((id) => {
+    const sel = document.getElementById(id);
+    if (!sel) return;
+    const current = sel.value;
+    const label = id === 'select-t1' ? '— Choose base image —' : '— Choose comparison image —';
+    sel.innerHTML = `<option value="">${label}</option>` +
+      items.map((img) => `<option value="${encodePath(img.path)}">${img.year} — ${img.filename}</option>`).join('');
+    if (current) sel.value = current;
+  });
+}
+
+function setSlot(slotKey, img) {
+  if (!img || !img.path) return;
+  const item = {
+    path: img.path,
+    year: img.year,
+    filename: img.filename,
+    thumbUrl: img.thumbUrl || thumbUrlFor(img.path),
+  };
+  if (slotKey === 't1') {
+    compareState.t1 = item;
+    const sel = document.getElementById('select-t1');
+    if (sel) sel.value = encodePath(item.path);
+    renderSlotPreview('t1', item);
+  } else {
+    compareState.t2 = item;
+    const sel = document.getElementById('select-t2');
+    if (sel) sel.value = encodePath(item.path);
+    renderSlotPreview('t2', item);
+  }
+  updateRunButton();
+  refreshCompareLibrarySelection();
+  if (typeof showDdaSuccess === 'function') {
+    showDdaSuccess(`${slotKey.toUpperCase()} set: ${item.filename}`);
+  }
+}
+
+function findLibraryItem(path) {
+  const norm = decodePath(path);
+  const items = ensureDdaState().libraryItems || [];
+  return items.find((i) => i.path === norm) || {
+    path: norm,
+    year: parseInt(norm.split('/')[0], 10) || '',
+    filename: norm.split('/').pop(),
+    thumbUrl: thumbUrlFor(norm),
+  };
+}
+
+function refreshCompareLibrarySelection() {
+  const grid = document.getElementById('compare-lib-grid');
+  if (!grid) return;
+  grid.querySelectorAll('.dda-compare-card').forEach((card) => {
+    const path = decodePath(card.dataset.imagePath || '');
+    card.classList.toggle('selected-t1', !!(compareState.t1 && compareState.t1.path === path));
+    card.classList.toggle('selected-t2', !!(compareState.t2 && compareState.t2.path === path));
+  });
+}
+
+async function loadCompareLibraryGrid() {
+  const grid = document.getElementById('compare-lib-grid');
+  if (!grid) return;
+
+  grid.innerHTML = '<p class="dim">Loading library images…</p>';
+  try {
+    const items = await ddaApi('GET', '/api/dda/local/images');
+    ensureDdaState().libraryItems = items;
+    populateSelects(items);
+
+    if (!items.length) {
+      grid.innerHTML = '<p class="dim">No images found. Copy .tif files into <code>library_sources/YEAR/</code> in your project folder, then click <strong>Refresh list</strong>.</p>';
+      return;
+    }
+
+    grid.innerHTML = items.map((img) => {
+      const thumb = img.thumbUrl || thumbUrlFor(img.path);
+      const enc = encodePath(img.path);
+      const t1Sel = compareState.t1?.path === img.path ? ' selected-t1' : '';
+      const t2Sel = compareState.t2?.path === img.path ? ' selected-t2' : '';
+      const safeName = img.filename.replace(/</g, '&lt;');
+      return `
+        <div class="dda-compare-card dda-card-img${t1Sel}${t2Sel}" data-image-path="${enc}" draggable="true">
+          ${thumb ? `<img src="${thumb}" alt="" loading="lazy" draggable="false" />` : '<div class="meta">No preview</div>'}
+          <div class="meta">
+            <strong>${img.year}</strong><br/>
+            ${safeName}<br/>
+            <span class="dim">${compareFormatBytes(img.fileSizeBytes)}</span>
+          </div>
+          <div class="dda-compare-assign">
+            <button type="button" class="btn btn-secondary btn-sm" data-assign="t1" data-path="${enc}">T1</button>
+            <button type="button" class="btn btn-secondary btn-sm" data-assign="t2" data-path="${enc}">T2</button>
+          </div>
+        </div>`;
+    }).join('');
+
+    grid.querySelectorAll('.dda-compare-card').forEach((card) => {
+      card.addEventListener('dragstart', (e) => {
+        const path = decodePath(card.dataset.imagePath);
+        e.dataTransfer.setData('application/x-dda-image-path', path);
+        e.dataTransfer.setData('text/plain', path);
+      });
+    });
+  } catch (err) {
+    grid.innerHTML = `<p class="dim">Could not load images: ${err.message}</p>`;
+    if (typeof showDdaError === 'function') showDdaError(err.message);
+  }
+}
+
+async function openPicker(slotKey) {
+  compareState.pickingSlot = slotKey;
+  const modal = document.getElementById('dda-picker-modal');
+  const list = document.getElementById('dda-picker-list');
+  const title = document.getElementById('dda-picker-title');
+  if (!modal || !list) return;
+
+  if (title) {
+    title.textContent = slotKey === 't1' ? 'Select Base Image (T1)' : 'Select Comparison Image (T2)';
+  }
+  list.innerHTML = '<p class="dim">Loading library…</p>';
+  modal.classList.remove('hidden');
+
+  let items = ensureDdaState().libraryItems || [];
+  try {
+    items = await ddaApi('GET', '/api/dda/local/images');
+    ensureDdaState().libraryItems = items;
+    populateSelects(items);
+  } catch (err) {
+    list.innerHTML = `<p class="dim">Could not load images: ${err.message}</p>`;
+    return;
+  }
+
+  if (!items.length) {
+    list.innerHTML = '<p class="dim">No images in library. Add files under library_sources/YEAR/ and refresh.</p>';
+  } else {
+    list.innerHTML = items.map((img) => {
+      const enc = encodePath(img.path);
+      return `
+      <button type="button" class="dda-picker-item" data-path="${enc}">
+        <img src="${img.thumbUrl || thumbUrlFor(img.path)}" alt="" loading="lazy" />
+        <span><strong>${img.year}</strong><br/>${img.filename}</span>
+      </button>`;
+    }).join('');
+    list.querySelectorAll('.dda-picker-item').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const slot = compareState.pickingSlot;
+        if (!slot) return;
+        setSlot(slot, findLibraryItem(btn.dataset.path));
+        closePicker();
+      });
+    });
+  }
+}
+
+function closePicker() {
+  document.getElementById('dda-picker-modal')?.classList.add('hidden');
+  compareState.pickingSlot = null;
+}
+
+function setupCompareInteractions() {
+  const slotsWrap = document.querySelector('.dda-compare-slots');
+  if (slotsWrap) {
+    slotsWrap.addEventListener('click', (e) => {
+      const pickBtn = e.target.closest('.dda-slot-pick');
+      if (pickBtn) {
+        e.preventDefault();
+        openPicker(pickBtn.dataset.pick);
+      }
+    });
+  }
+
+  document.getElementById('select-t1')?.addEventListener('change', (e) => {
+    const path = e.target.value;
+    if (!path) {
+      compareState.t1 = null;
+      renderSlotPreview('t1', null);
+      updateRunButton();
+      refreshCompareLibrarySelection();
+      return;
+    }
+    setSlot('t1', findLibraryItem(path));
+  });
+
+  document.getElementById('select-t2')?.addEventListener('change', (e) => {
+    const path = e.target.value;
+    if (!path) {
+      compareState.t2 = null;
+      renderSlotPreview('t2', null);
+      updateRunButton();
+      refreshCompareLibrarySelection();
+      return;
+    }
+    setSlot('t2', findLibraryItem(path));
+  });
+
+  const grid = document.getElementById('compare-lib-grid');
+  if (grid) {
+    grid.addEventListener('click', (e) => {
+      const btn = e.target.closest('[data-assign]');
+      if (!btn) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setSlot(btn.dataset.assign, findLibraryItem(btn.dataset.path));
+    });
+  }
+
+  ['slot-t1', 'slot-t2'].forEach((id) => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.addEventListener('dragover', (e) => { e.preventDefault(); el.classList.add('drag-over'); });
+    el.addEventListener('dragleave', () => el.classList.remove('drag-over'));
+    el.addEventListener('drop', (e) => {
+      e.preventDefault();
+      el.classList.remove('drag-over');
+      const path = e.dataTransfer.getData('application/x-dda-image-path')
+        || e.dataTransfer.getData('text/plain');
+      if (!path) return;
+      setSlot(id === 'slot-t1' ? 't1' : 't2', findLibraryItem(path));
+    });
+  });
+
+  document.getElementById('btn-compare-refresh')?.addEventListener('click', () => loadCompareLibraryGrid());
+  document.getElementById('dda-picker-close')?.addEventListener('click', closePicker);
+  document.getElementById('dda-picker-modal')?.addEventListener('click', (e) => {
+    if (e.target.id === 'dda-picker-modal') closePicker();
+  });
+  document.getElementById('btn-run-job')?.addEventListener('click', runLibraryDetection);
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return;
+    const picker = document.getElementById('dda-picker-modal');
+    if (picker && !picker.classList.contains('hidden')) closePicker();
+  });
+}
+
+function showDetectResult(data) {
+  if (typeof showDdaResult === 'function') showDdaResult(data);
+  else if (typeof showDdaError === 'function') showDdaError('Result viewer failed to load.');
+}
+
+async function pollJobUntilDone(jobId, loadingEl) {
+  const maxAttempts = 600;
+  for (let i = 0; i < maxAttempts; i++) {
+    const job = await ddaApi('GET', `/api/dda/jobs/${jobId}`);
+    const status = job.status;
+    if (loadingEl) {
+      loadingEl.textContent = `Detection job #${jobId} — ${status}… (${i + 1})`;
+    }
+    if (status === 'completed' && job.result) return job.result;
+    if (status === 'failed') throw new Error(job.errorMessage || 'Detection job failed');
+    await new Promise((r) => setTimeout(r, 2000));
+  }
+  throw new Error('Detection timed out. Check Reports tab for job status.');
+}
+
+async function runLibraryDetection() {
+  if (!compareState.t1 || !compareState.t2) {
+    if (typeof showDdaError === 'function') showDdaError('Select both T1 (base) and T2 (comparison) images first.');
+    return;
+  }
+  const btn = document.getElementById('btn-run-job');
+  const loading = document.getElementById('dda-detect-loading');
+  if (typeof hideDdaError === 'function') hideDdaError();
+  btn.disabled = true;
+  loading?.classList.remove('hidden');
+  loading.textContent = 'Running detection…';
+
+  const form = new FormData();
+  form.append('base_path', compareState.t1.path);
+  form.append('comparison_path', compareState.t2.path);
+  form.append('title', `${compareState.t1.filename} vs ${compareState.t2.filename}`);
+  form.append('method', document.getElementById('dda-detect-method')?.value || 'AI-Based Deep Learning');
+  form.append('enable_registration', String(document.getElementById('dda-detect-registration')?.checked !== false));
+  form.append('enable_normalization', String(document.getElementById('dda-detect-normalization')?.checked !== false));
+  form.append('detection_sensitivity', String(Math.max(0, Math.min(1, Number(document.getElementById('dda-detect-sensitivity')?.value ?? 0.45)))));
+  const minArea = Number(document.getElementById('dda-detect-min-area')?.value ?? 150);
+  if (!Number.isNaN(minArea) && minArea >= 50) form.append('min_region_area', String(Math.round(minArea)));
+
+  try {
+    const data = await ddaApi('POST', '/api/dda/detect/from-library', { body: form });
+    showDetectResult(data);
+    if (typeof showDdaSuccess === 'function') showDdaSuccess('Detection complete.');
+    if (typeof loadReportsList === 'function') loadReportsList();
+  } catch (err) {
+    if (typeof showDdaError === 'function') showDdaError(err.message || 'Detection failed');
+  } finally {
+    btn.disabled = !(compareState.t1 && compareState.t2);
+    loading?.classList.add('hidden');
+  }
+}
+
+let compareInitialized = false;
+
+function initCompareTab() {
+  if (!compareInitialized) {
+    setupCompareInteractions();
+    compareInitialized = true;
+  }
+  updateRunButton();
+  loadCompareLibraryGrid();
+}
+
+window.loadCompareLibraryGrid = loadCompareLibraryGrid;
+window.initCompareTab = initCompareTab;
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initCompareTab);
+} else {
+  initCompareTab();
+}

static/js/dda/reports.js

@@ -0,0 +1,119 @@
+/** Reports tab — detection jobs and history (Phase 4 foundation). */
+
+function formatReportDate(iso) {
+  if (!iso) return '—';
+  try {
+    return new Date(iso).toLocaleString();
+  } catch (_) {
+    return iso;
+  }
+}
+
+async function loadReportsList() {
+  const el = document.getElementById('reports-list');
+  if (!el) return;
+  el.innerHTML = '<p class="dim">Loading reports…</p>';
+  try {
+    let jobs = [];
+    try {
+      const jobsData = await ddaApi('GET', '/api/dda/jobs?limit=30');
+      jobs = jobsData.jobs || [];
+    } catch (_) {
+      /* jobs API optional — history still works */
+    }
+    const history = await ddaApi('GET', '/api/history');
+    const rows = [];
+
+    jobs.forEach((j) => {
+      rows.push({
+        kind: 'job',
+        id: j.id,
+        runId: j.runId,
+        title: j.title || `${j.basePath} vs ${j.comparisonPath}`,
+        status: j.status,
+        changePct: j.report?.changePercentage,
+        regions: j.report?.regionsCount,
+        createdAt: j.createdAt,
+        error: j.errorMessage,
+      });
+    });
+
+    (history || []).forEach((r) => {
+      if (rows.some((x) => x.runId === r.id)) return;
+      rows.push({
+        kind: 'run',
+        id: r.id,
+        runId: r.id,
+        title: r.title,
+        status: 'completed',
+        changePct: r.changePercentage,
+        regions: r.regionsCount,
+        createdAt: r.createdAt,
+      });
+    });
+
+    rows.sort((a, b) => String(b.createdAt).localeCompare(String(a.createdAt)));
+
+    if (!rows.length) {
+      el.innerHTML = '<p class="dim">No detection reports yet. Run a comparison on the Change Detection tab.</p>';
+      return;
+    }
+
+    el.innerHTML = `
+      <table class="dda-reports-table">
+        <thead>
+          <tr>
+            <th>Date</th>
+            <th>Title</th>
+            <th>Status</th>
+            <th>Change %</th>
+            <th>Regions</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          ${rows.map((r) => `
+            <tr>
+              <td>${formatReportDate(r.createdAt)}</td>
+              <td>${r.title}</td>
+              <td><span class="dda-status dda-status-${r.status}">${r.status}</span></td>
+              <td>${r.changePct != null ? r.changePct.toFixed(2) + '%' : '—'}</td>
+              <td>${r.regions ?? '—'}</td>
+              <td>
+                ${r.status === 'completed' && r.runId
+                  ? `<button type="button" class="btn btn-secondary btn-sm" data-view-run="${r.runId}">View</button>`
+                  : (r.error ? `<span class="dim" title="${r.error.replace(/"/g, '')}">Error</span>` : '—')}
+              </td>
+            </tr>`).join('')}
+        </tbody>
+      </table>`;
+
+    el.querySelectorAll('[data-view-run]').forEach((btn) => {
+      btn.addEventListener('click', async () => {
+        const runId = btn.dataset.viewRun;
+        try {
+          const data = await ddaApi('GET', `/api/history/${runId}`);
+          if (typeof showDdaResult === 'function') showDdaResult(data);
+        } catch (err) {
+          if (typeof showDdaError === 'function') showDdaError(err.message);
+        }
+      });
+    });
+  } catch (err) {
+    el.innerHTML = `<p class="dim">Could not load reports: ${err.message}</p>`;
+  }
+}
+
+window.loadReportsList = loadReportsList;
+
+document.getElementById('btn-reports-refresh')?.addEventListener('click', loadReportsList);
+
+document.querySelectorAll('.dda-tab').forEach((btn) => {
+  if (btn.dataset.tab === 'reports') {
+    btn.addEventListener('click', () => loadReportsList());
+  }
+});
+
+if (document.getElementById('tab-reports')?.classList.contains('active')) {
+  loadReportsList();
+}

static/js/dda/result.js

@@ -0,0 +1,282 @@
+/** DDA result modal — before/after compare slider (same as production). */
+
+let ddaCurrentResult = null;
+let ddaRegionRows = [];
+let ddaRegionList = [];
+let ddaRegionPage = 0;
+const DDA_REGIONS_PER_PAGE = 10;
+let ddaZoom = 1;
+const DDA_ZOOM_MIN = 0.5;
+const DDA_ZOOM_MAX = 3;
+const DDA_ZOOM_STEP = 0.25;
+
+function formatCompact(n) {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
+  if (n >= 10_000) return (n / 1_000).toFixed(1).replace(/\.0$/, '') + 'K';
+  return n.toLocaleString();
+}
+
+function showDdaResult(data) {
+  const modal = document.getElementById('result-modal');
+  const statsEl = document.getElementById('result-stats');
+  const titleEl = document.getElementById('result-modal-title');
+  if (!modal || !statsEl) return;
+
+  ddaCurrentResult = data;
+  if (titleEl) titleEl.textContent = data.title || 'Detection Result';
+
+  const stats = data.statistics || {};
+  const pct = (stats.changePercentage ?? 0).toFixed(2);
+  const chPx = stats.changedPixels ?? 0;
+  const totPx = stats.totalPixels ?? 0;
+  const regOk = stats.registrationOk;
+  const alignWarn = stats.alignmentWarning;
+  const thrDbg = stats.thresholdDebug || {};
+  const fusionPx = thrDbg.fused_changed_px != null
+    ? `DL ${thrDbg.dl_changed_px ?? '—'} / fused ${thrDbg.fused_changed_px}`
+    : '';
+
+  let warnHtml = '';
+  if (alignWarn) {
+    warnHtml = `<div class="result-warning" role="alert">${alignWarn}</div>`;
+  } else if (regOk === false) {
+    warnHtml = '<div class="result-warning" role="alert">Image alignment was weak — results may include false detections.</div>';
+  }
+
+  const resHint = data.detectionMaxSide
+    ? `<div class="stat-box"><div class="value value-sm">${data.detectionMaxSide}px</div><div class="label">Detection res</div></div>`
+    : '';
+
+  statsEl.innerHTML = warnHtml + `
+    <div class="stat-box"><div class="value">${pct}%</div><div class="label">Changed</div></div>
+    <div class="stat-box"><div class="value" title="${chPx.toLocaleString()}">${formatCompact(chPx)}</div><div class="label">Changed px</div></div>
+    <div class="stat-box"><div class="value" title="${totPx.toLocaleString()}">${formatCompact(totPx)}</div><div class="label">Total px</div></div>
+    <div class="stat-box"><div class="value">${(data.regions || []).length}</div><div class="label">Regions</div></div>
+    ${resHint}
+    ${fusionPx ? `<div class="stat-box stat-box-wide"><div class="value value-sm">${fusionPx}</div><div class="label">Fusion px</div></div>` : ''}
+    <div class="stat-box"><div class="value value-sm">${regOk === true ? 'OK' : regOk === false ? 'Weak' : '—'}</div><div class="label">Alignment</div></div>
+  `;
+
+  const beforeImg = document.getElementById('compare-before-img');
+  const afterImg = document.getElementById('compare-after-img');
+  if (!beforeImg || !afterImg) return;
+
+  if (data.overlayBase64Png) {
+    afterImg.src = 'data:image/png;base64,' + data.overlayBase64Png;
+  } else {
+    afterImg.src = data.overlayUrl || '';
+  }
+  beforeImg.src = data.beforeFullUrl || data.beforeThumbUrl || '';
+
+  let loaded = 0;
+  const onReady = () => {
+    if (++loaded >= 2) {
+      resetDdaCompareSlider();
+      resetDdaZoom();
+    }
+  };
+  afterImg.onload = onReady;
+  beforeImg.onload = onReady;
+  setTimeout(() => { resetDdaCompareSlider(); resetDdaZoom(); }, 500);
+
+  const regions = (data.regions || []).slice(0, 60);
+  ddaRegionList = regions;
+  ddaRegionRows = regions.map((r) => {
+    const tr = document.createElement('tr');
+    tr.dataset.regionId = r.id;
+    const subType = r.subType || '—';
+    const ddaType = r.ddaChangeType || '—';
+    const latLng = r.latLng ? `${r.latLng.lat}, ${r.latLng.lng}` : '—';
+    const severity = (r.severity || 'minor').toLowerCase();
+    const stories = r.estimatedStories != null ? r.estimatedStories : '—';
+    const height = r.estimatedHeightM != null ? r.estimatedHeightM + ' m' : '—';
+    const stage = r.constructionStage && r.constructionStage !== 'Unknown' ? r.constructionStage : '—';
+    tr.innerHTML = `
+      <td>${r.id}</td>
+      <td>${r.objectType}</td>
+      <td>${ddaType}</td>
+      <td>${latLng}</td>
+      <td>${subType}</td>
+      <td><span class="severity-badge ${severity}">${severity}</span></td>
+      <td>${(r.confidence * 100).toFixed(1)}%</td>
+      <td>${r.area.toLocaleString()}</td>
+      <td>(${r.center.x}, ${r.center.y})</td>
+      <td>${stories}</td>
+      <td>${height}</td>
+      <td>${stage}</td>
+    `;
+    return tr;
+  });
+
+  ddaRegionPage = 0;
+  renderDdaRegionPage();
+  openDdaResultModal();
+}
+
+function renderDdaRegionPage() {
+  const tbody = document.getElementById('regions-tbody');
+  const pag = document.getElementById('regions-pagination');
+  if (!tbody) return;
+
+  const totalPages = Math.max(1, Math.ceil(ddaRegionRows.length / DDA_REGIONS_PER_PAGE));
+  ddaRegionPage = Math.max(0, Math.min(ddaRegionPage, totalPages - 1));
+  const start = ddaRegionPage * DDA_REGIONS_PER_PAGE;
+  const pageRows = ddaRegionRows.slice(start, start + DDA_REGIONS_PER_PAGE);
+  const pageData = ddaRegionList.slice(start, start + DDA_REGIONS_PER_PAGE);
+
+  tbody.innerHTML = '';
+  pageRows.forEach((tr) => tbody.appendChild(tr));
+  setupDdaRegionHover(tbody, pageData);
+
+  if (!pag) return;
+  pag.innerHTML = '';
+  if (totalPages <= 1) return;
+
+  const prev = document.createElement('button');
+  prev.textContent = '‹';
+  prev.disabled = ddaRegionPage === 0;
+  prev.addEventListener('click', () => { ddaRegionPage--; renderDdaRegionPage(); });
+  pag.appendChild(prev);
+
+  for (let i = 0; i < totalPages; i++) {
+    const btn = document.createElement('button');
+    btn.textContent = i + 1;
+    if (i === ddaRegionPage) btn.classList.add('active');
+    btn.addEventListener('click', () => { ddaRegionPage = i; renderDdaRegionPage(); });
+    pag.appendChild(btn);
+  }
+
+  const next = document.createElement('button');
+  next.textContent = '›';
+  next.disabled = ddaRegionPage >= totalPages - 1;
+  next.addEventListener('click', () => { ddaRegionPage++; renderDdaRegionPage(); });
+  pag.appendChild(next);
+}
+
+function setupDdaRegionHover(tbody, regions) {
+  const overlay = document.getElementById('region-highlight-overlay');
+  if (!overlay) return;
+  overlay.innerHTML = '';
+  tbody.querySelectorAll('tr[data-region-id]').forEach((tr) => {
+    tr.addEventListener('mouseenter', () => {
+      const id = parseInt(tr.dataset.regionId, 10);
+      const r = regions.find((x) => x.id === id);
+      if (!r || !r.bbox) return;
+      tbody.querySelectorAll('tr').forEach((row) => row.classList.remove('region-hover'));
+      tr.classList.add('region-hover');
+      const box = document.createElement('div');
+      box.className = 'highlight-box';
+      const imgEl = document.getElementById('compare-after-img');
+      const slider = document.getElementById('compare-slider');
+      if (!imgEl || !slider || !imgEl.naturalWidth) return;
+      const rw = slider.offsetWidth;
+      const rh = slider.offsetHeight;
+      const imgW = imgEl.naturalWidth || 1;
+      const imgH = imgEl.naturalHeight || 1;
+      const scale = Math.min(rw / imgW, rh / imgH);
+      const drawW = imgW * scale;
+      const drawH = imgH * scale;
+      const offsetX = (rw - drawW) / 2;
+      const offsetY = (rh - drawH) / 2;
+      box.style.left = (offsetX + r.bbox.x * scale) + 'px';
+      box.style.top = (offsetY + r.bbox.y * scale) + 'px';
+      box.style.width = (r.bbox.w * scale) + 'px';
+      box.style.height = (r.bbox.h * scale) + 'px';
+      overlay.appendChild(box);
+    });
+    tr.addEventListener('mouseleave', () => {
+      tr.classList.remove('region-hover');
+      overlay.innerHTML = '';
+    });
+  });
+}
+
+function openDdaResultModal() {
+  const modal = document.getElementById('result-modal');
+  if (!modal) return;
+  modal.classList.remove('hidden');
+  document.body.style.overflow = 'hidden';
+}
+
+function closeDdaResultModal() {
+  const modal = document.getElementById('result-modal');
+  if (!modal) return;
+  modal.classList.add('hidden');
+  const picker = document.getElementById('dda-picker-modal');
+  if (!picker || picker.classList.contains('hidden')) {
+    document.body.style.overflow = '';
+  }
+}
+
+function resetDdaCompareSlider() {
+  const ac = document.getElementById('compare-after-clip');
+  const h = document.getElementById('compare-handle');
+  if (ac) ac.style.clipPath = 'inset(0 0 0 50%)';
+  if (h) h.style.left = '50%';
+}
+
+function applyDdaZoom() {
+  const slider = document.getElementById('compare-slider');
+  const levelEl = document.getElementById('zoom-level');
+  if (!slider) return;
+  slider.style.transform = `scale(${ddaZoom})`;
+  slider.style.transformOrigin = 'center top';
+  if (levelEl) levelEl.textContent = Math.round(ddaZoom * 100) + '%';
+}
+
+function resetDdaZoom() {
+  ddaZoom = 1;
+  applyDdaZoom();
+}
+
+function initDdaCompareSlider() {
+  const slider = document.getElementById('compare-slider');
+  if (!slider) return;
+  let isDragging = false;
+
+  function updatePosition(clientX) {
+    const rect = slider.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100));
+    document.getElementById('compare-after-clip').style.clipPath = `inset(0 0 0 ${pct}%)`;
+    document.getElementById('compare-handle').style.left = pct + '%';
+  }
+
+  slider.addEventListener('mousedown', (e) => { e.preventDefault(); isDragging = true; updatePosition(e.clientX); });
+  document.addEventListener('mousemove', (e) => { if (isDragging) updatePosition(e.clientX); });
+  document.addEventListener('mouseup', () => { isDragging = false; });
+  slider.addEventListener('touchstart', (e) => { isDragging = true; updatePosition(e.touches[0].clientX); }, { passive: true });
+  document.addEventListener('touchmove', (e) => { if (isDragging) updatePosition(e.touches[0].clientX); }, { passive: true });
+  document.addEventListener('touchend', () => { isDragging = false; });
+}
+
+function initDdaZoom() {
+  document.getElementById('zoom-in')?.addEventListener('click', () => {
+    ddaZoom = Math.min(DDA_ZOOM_MAX, ddaZoom + DDA_ZOOM_STEP);
+    applyDdaZoom();
+  });
+  document.getElementById('zoom-out')?.addEventListener('click', () => {
+    ddaZoom = Math.max(DDA_ZOOM_MIN, ddaZoom - DDA_ZOOM_STEP);
+    applyDdaZoom();
+  });
+  document.getElementById('zoom-wrapper')?.addEventListener('wheel', (e) => {
+    if (!e.ctrlKey && !e.metaKey) return;
+    e.preventDefault();
+    if (e.deltaY < 0) ddaZoom = Math.min(DDA_ZOOM_MAX, ddaZoom + DDA_ZOOM_STEP);
+    else ddaZoom = Math.max(DDA_ZOOM_MIN, ddaZoom - DDA_ZOOM_STEP);
+    applyDdaZoom();
+  }, { passive: false });
+}
+
+document.getElementById('result-modal-close')?.addEventListener('click', closeDdaResultModal);
+document.getElementById('result-modal')?.addEventListener('click', (e) => {
+  if (e.target === e.currentTarget) closeDdaResultModal();
+});
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    const modal = document.getElementById('result-modal');
+    if (modal && !modal.classList.contains('hidden')) closeDdaResultModal();
+  }
+});
+
+initDdaCompareSlider();
+initDdaZoom();

templates/index_dda.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>DDA Change Detection</title>
   <link rel="stylesheet" href="/static/css/style.css?v=30" />
-  <link rel="stylesheet" href="/static/css/dda.css?v=3" />
+  <link rel="stylesheet" href="/static/css/dda.css?v=7" />
 </head>
 <body>
   <div class="app dda-app">
@@ -53,7 +53,7 @@
               <h3>Upload to Space storage</h3>
               <span class="dim">Required on Hugging Face</span>
             </div>
-            <p class="sub">Files on your computer are not on the server. Upload .tif images here (up to 2 GB each).</p>
+            <p class="sub" id="hf-upload-limit">Files on your computer are not on the server. Upload .tif images here (up to 5 GB each).</p>
             <form id="form-hf-upload" class="dda-upload-form">
               <div class="location-row">
                 <div class="form-group">
@@ -83,36 +83,155 @@
       </div>
     </section>
 
-    <!-- Tab: Change Detection (FR-03 placeholder — Phase 2) -->
+    <!-- Tab: Change Detection -->
     <section id="tab-detect" class="dda-panel" role="tabpanel">
       <div class="card">
         <div class="card-header"><h3>Compare Images</h3></div>
-        <p class="sub">Select <strong>Base (T1)</strong> and <strong>Comparison (T2)</strong> from the library. Async job pipeline — Phase 2.</p>
+        <p class="sub">Select <strong>Base (T1)</strong> and <strong>Comparison (T2)</strong> from the library, then run detection.</p>
         <div class="dda-compare-slots">
           <div class="dda-slot" id="slot-t1" data-slot="t1">
             <span class="dda-slot-label">Base Image (T1)</span>
-            <p class="dim">Drag from library or click to pick</p>
+            <div id="slot-t1-preview" class="dda-slot-preview-wrap"></div>
+            <select id="select-t1" class="dda-image-select" aria-label="Select base image">
+              <option value="">— Choose base image —</option>
+            </select>
+            <button type="button" class="btn btn-secondary btn-sm dda-slot-pick" data-pick="t1">Browse library</button>
           </div>
           <div class="dda-slot" id="slot-t2" data-slot="t2">
             <span class="dda-slot-label">Comparison Image (T2)</span>
-            <p class="dim">Drag from library or click to pick</p>
+            <div id="slot-t2-preview" class="dda-slot-preview-wrap"></div>
+            <select id="select-t2" class="dda-image-select" aria-label="Select comparison image">
+              <option value="">— Choose comparison image —</option>
+            </select>
+            <button type="button" class="btn btn-secondary btn-sm dda-slot-pick" data-pick="t2">Browse library</button>
           </div>
         </div>
-        <button type="button" class="btn btn-primary" id="btn-run-job" disabled>Run Detection (coming Phase 2)</button>
+        <div class="dda-compare-library card">
+          <div class="card-header">
+            <h3>Pick from library</h3>
+            <button type="button" class="btn btn-secondary btn-sm" id="btn-compare-refresh">Refresh list</button>
+          </div>
+          <p class="sub dim">Click <strong>T1</strong> or <strong>T2</strong> on an image, or use the dropdowns above.</p>
+          <div id="compare-lib-grid" class="dda-grid dda-compare-grid">
+            <p class="dim">Loading library images…</p>
+          </div>
+        </div>
+        <div class="dda-detect-options">
+          <div class="form-group">
+            <label for="dda-detect-method">Method</label>
+            <select id="dda-detect-method">
+              <option value="AI-Based Deep Learning">AI-Based Deep Learning</option>
+              <option value="Hybrid AI">Hybrid AI</option>
+              <option value="Hybrid Approach">Hybrid Approach</option>
+              <option value="Image Difference">Image Difference</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="dda-detect-sensitivity">Sensitivity (0–1)</label>
+            <input type="number" id="dda-detect-sensitivity" min="0" max="1" step="0.05" value="0.45" />
+          </div>
+          <div class="form-group">
+            <label for="dda-detect-min-area">Min region area (px)</label>
+            <input type="number" id="dda-detect-min-area" min="50" max="10000" step="10" value="150" />
+          </div>
+          <label class="dda-check"><input type="checkbox" id="dda-detect-registration" checked /> Image registration</label>
+          <label class="dda-check"><input type="checkbox" id="dda-detect-normalization" checked /> Normalization</label>
+        </div>
+        <p class="dim" id="dda-detect-res-hint"></p>
+        <button type="button" class="btn btn-primary" id="btn-run-job" disabled>Run Detection</button>
+        <p id="dda-detect-loading" class="dim hidden" style="margin-top:0.75rem">Detection runs as a background job — large GeoTIFFs may take several minutes…</p>
       </div>
     </section>
 
-    <!-- Tab: Reports (FR-05 placeholder) -->
+    <!-- Tab: Reports (FR-05) -->
     <section id="tab-reports" class="dda-panel" role="tabpanel">
       <div class="card">
-        <div class="card-header"><h3>Detection Reports</h3></div>
-        <p class="dim">Completed detection reports and PDF export — Phase 4.</p>
-        <div id="reports-list"></div>
+        <div class="card-header">
+          <h3>Detection Reports</h3>
+          <button type="button" class="btn btn-secondary btn-sm" id="btn-reports-refresh">Refresh</button>
+        </div>
+        <p class="sub dim">Completed jobs and detection history. PDF export — coming in Phase 4.</p>
+        <div id="reports-list"><p class="dim">Open this tab to load reports.</p></div>
       </div>
     </section>
   </div>
 
-  <script src="/static/js/dda/app.js?v=5"></script>
+  <div id="dda-picker-modal" class="dda-modal hidden" role="dialog" aria-modal="true">
+    <div class="dda-modal-panel card">
+      <div class="card-header">
+        <h3 id="dda-picker-title">Select image</h3>
+        <button type="button" class="btn btn-secondary btn-sm" id="dda-picker-close">Close</button>
+      </div>
+      <div id="dda-picker-list" class="dda-picker-grid"></div>
+    </div>
+  </div>
+
+  <!-- Result modal — same before/changes slider as production -->
+  <div class="result-modal-backdrop hidden" id="result-modal">
+    <div class="result-modal">
+      <div class="result-modal-header">
+        <h3 id="result-modal-title">Detection Result</h3>
+        <button type="button" class="btn-close-modal" id="result-modal-close" aria-label="Close">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+      <div class="result-stats" id="result-stats"></div>
+      <div class="zoom-slider-section">
+        <div class="zoom-controls">
+          <button type="button" class="btn btn-zoom" id="zoom-out" title="Zoom out" aria-label="Zoom out">−</button>
+          <span class="zoom-level" id="zoom-level">100%</span>
+          <button type="button" class="btn btn-zoom" id="zoom-in" title="Zoom in" aria-label="Zoom in">+</button>
+        </div>
+        <div class="zoom-wrapper" id="zoom-wrapper">
+          <div class="compare-slider compare-slider-zoomed" id="compare-slider">
+            <div class="compare-before">
+              <img id="compare-before-img" alt="Before" draggable="false" />
+              <span class="compare-label compare-label-left">Before</span>
+            </div>
+            <div class="compare-after" id="compare-after-clip">
+              <img id="compare-after-img" alt="Changes detected" draggable="false" />
+              <span class="compare-label compare-label-right">Changes</span>
+            </div>
+            <div class="compare-handle" id="compare-handle">
+              <div class="compare-handle-line"></div>
+              <div class="compare-handle-knob">
+                <svg width="20" height="20" viewBox="0 0 20 20"><path d="M6 10l4-5v10z" fill="currentColor"/><path d="M14 10l-4-5v10z" fill="currentColor"/></svg>
+              </div>
+              <div class="compare-handle-line"></div>
+            </div>
+            <div class="region-highlight-overlay" id="region-highlight-overlay"></div>
+          </div>
+        </div>
+      </div>
+      <div class="regions-table-wrap">
+        <table class="regions-table" id="regions-table">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Change Type</th>
+              <th>DDA Type</th>
+              <th>Lat/Lng</th>
+              <th>Sub-Type</th>
+              <th>Severity</th>
+              <th>Confidence</th>
+              <th>Area (px)</th>
+              <th>Coordinates</th>
+              <th>Stories</th>
+              <th>Height</th>
+              <th>Stage</th>
+            </tr>
+          </thead>
+          <tbody id="regions-tbody"></tbody>
+        </table>
+        <div class="pagination" id="regions-pagination"></div>
+      </div>
+    </div>
+  </div>
+
+  <script src="/static/js/dda/app.js?v=9"></script>
   <script src="/static/js/dda/library.js?v=5"></script>
+  <script src="/static/js/dda/result.js?v=3"></script>
+  <script src="/static/js/dda/compare.js?v=6"></script>
+  <script src="/static/js/dda/reports.js?v=1"></script>
 </body>
 </html>