Add Phase 4 reports: PDF export, browser report page, and notification bell.

ReportLab PDF download, standalone /dda/reports view, email deep links, and in-app job notifications on dev Space.

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=33
+ARG APP_BUILD=34
 ENV MAX_GEOTIFF_MB=5120
 ENV APP_BUILD=${APP_BUILD}
 ENV GDAL_CONFIG=/usr/bin/gdal-config

app/dda/bootstrap.py

@@ -8,6 +8,7 @@ from .config import IS_DDA_MODE, ensure_library_dirs, ensure_local_year_folders,
 from .jobs_routes import router as jobs_router
 from .library_routes import router as library_router
 from .local_routes import router as local_router
+from .reports_routes import router as reports_router
 from .seed import seed_delhi_hierarchy
 
 logger = logging.getLogger(__name__)
@@ -55,5 +56,6 @@ def setup_dda(app: FastAPI) -> None:
         return
     app.include_router(library_router, prefix="/api/dda", tags=["dda"])
     app.include_router(jobs_router, prefix="/api/dda", tags=["dda-jobs"])
+    app.include_router(reports_router, prefix="/api/dda", tags=["dda-reports"])
     app.include_router(local_router, prefix="/api/dda", tags=["dda-local"])
-    logger.info("APP_MODE=dda — DDA routes enabled (library, jobs, local folder)")
+    logger.info("APP_MODE=dda — DDA routes enabled (library, jobs, reports, local folder)")

app/dda/config.py

@@ -21,9 +21,20 @@ def _is_dda_mode() -> bool:
     return _SPACE_ID.endswith("/satdetect-dev")
 
 
+def get_public_base_url() -> str:
+    """Public URL for deep links (email, share). Override with PUBLIC_BASE_URL."""
+    explicit = os.environ.get("PUBLIC_BASE_URL", "").strip().rstrip("/")
+    if explicit:
+        return explicit
+    if _SPACE_ID:
+        return f"https://{_SPACE_ID.replace('/', '-')}.hf.space"
+    return "http://localhost:7860"
+
+
 IS_DDA_MODE = _is_dda_mode()
 APP_MODE = APP_MODE_RAW or ("dda" if IS_DDA_MODE else "legacy")
 
+
 # Project root: change_detection_webapp/
 PROJECT_ROOT = Path(__file__).resolve().parent.parent.parent
 

app/dda/detect_service.py

@@ -167,6 +167,8 @@ def run_detection_and_save(
     notification_sent = False
     notification_error = None
     if notify_email and notify_email.strip():
+        from .config import IS_DDA_MODE, get_public_base_url
+        report_url = f"{get_public_base_url()}/dda/reports/{run.id}" if IS_DDA_MODE else ""
         notification_sent, notification_error = send_notification(
             recipient=notify_email.strip(),
             title=title,
@@ -177,6 +179,7 @@ def run_detection_and_save(
             changed_px=changed_px,
             total_px=total_px,
             regions=regions_serializable,
+            report_url=report_url,
         )
 
     return {

app/dda/report_pdf.py

@@ -0,0 +1,135 @@
+"""PDF export for DDA detection reports (FR-05)."""
+from __future__ import annotations
+
+import json
+from io import BytesIO
+from pathlib import Path
+from typing import Any, Dict, List, Optional
+
+from ..database import DATA_DIR
+from ..models import DetectionRun
+from .detect_service import _isoformat_ist
+
+
+def _safe_filename(title: str, run_id: int) -> str:
+    base = "".join(c if c.isalnum() or c in " -_" else "_" for c in (title or "report"))
+    base = base.strip().replace(" ", "_")[:60] or "report"
+    return f"DDA_Report_{run_id}_{base}.pdf"
+
+
+def build_report_dict(run: DetectionRun, *, include_overlay_b64: bool = False) -> Dict[str, Any]:
+    regions: List[dict] = json.loads(run.regions_json or "[]")
+    payload: Dict[str, Any] = {
+        "id": run.id,
+        "title": run.title,
+        "method": run.method,
+        "zone": run.zone or "",
+        "village": run.village or "",
+        "statistics": {
+            "totalPixels": run.total_pixels,
+            "changedPixels": run.changed_pixels,
+            "unchangedPixels": run.total_pixels - run.changed_pixels,
+            "changePercentage": run.change_percentage,
+        },
+        "regions": regions,
+        "regionsCount": run.regions_count,
+        "overlayUrl": f"/api/overlay/{run.overlay_path}" if run.overlay_path else None,
+        "beforeFullUrl": f"/api/overlay/{run.before_full_path}" if run.before_full_path else None,
+        "beforeThumbUrl": f"/api/overlay/{run.before_thumb_path}" if run.before_thumb_path else None,
+        "afterThumbUrl": f"/api/overlay/{run.after_thumb_path}" if run.after_thumb_path else None,
+        "createdAt": _isoformat_ist(run.created_at),
+        "pdfUrl": f"/api/dda/reports/{run.id}/pdf",
+    }
+    if include_overlay_b64 and run.overlay_path:
+        overlay_file = DATA_DIR / run.overlay_path
+        if overlay_file.exists():
+            import base64
+            payload["overlayBase64Png"] = base64.b64encode(overlay_file.read_bytes()).decode("utf-8")
+    return payload
+
+
+def generate_report_pdf(run: DetectionRun) -> tuple[bytes, str]:
+    """Build PDF bytes and suggested download filename."""
+    from reportlab.lib import colors
+    from reportlab.lib.pagesizes import A4
+    from reportlab.lib.styles import ParagraphStyle, getSampleStyleSheet
+    from reportlab.lib.units import mm
+    from reportlab.platypus import Image as RLImage
+    from reportlab.platypus import Paragraph, SimpleDocTemplate, Spacer, Table, TableStyle
+
+    regions: List[dict] = json.loads(run.regions_json or "[]")
+    buf = BytesIO()
+    doc = SimpleDocTemplate(buf, pagesize=A4, leftMargin=18 * mm, rightMargin=18 * mm, topMargin=16 * mm, bottomMargin=16 * mm)
+    styles = getSampleStyleSheet()
+    title_style = ParagraphStyle("ReportTitle", parent=styles["Heading1"], fontSize=16, spaceAfter=8)
+    sub_style = ParagraphStyle("ReportSub", parent=styles["Normal"], fontSize=10, textColor=colors.grey)
+    body = styles["Normal"]
+
+    location = ", ".join(filter(None, [run.village, run.zone])) or "—"
+    story = [
+        Paragraph("DDA Change Detection Report", title_style),
+        Paragraph(run.title or f"Run #{run.id}", styles["Heading2"]),
+        Paragraph(f"Generated {_isoformat_ist(run.created_at)} IST", sub_style),
+        Spacer(1, 8),
+        Paragraph(f"<b>Method:</b> {run.method or '—'}", body),
+        Paragraph(f"<b>Location:</b> {location}", body),
+        Paragraph(f"<b>Change:</b> {run.change_percentage:.2f}% ({run.changed_pixels:,} / {run.total_pixels:,} px)", body),
+        Paragraph(f"<b>Regions detected:</b> {run.regions_count}", body),
+        Spacer(1, 10),
+    ]
+
+    overlay_path = run.overlay_path
+    if overlay_path:
+        overlay_file = DATA_DIR / overlay_path
+        if overlay_file.exists():
+            try:
+                from PIL import Image as PILImage
+                with PILImage.open(overlay_file) as im:
+                    im = im.convert("RGB")
+                    max_w = 160 * mm
+                    ratio = min(1.0, max_w / im.width)
+                    w, h = int(im.width * ratio), int(im.height * ratio)
+                    thumb = im.resize((w, h), PILImage.Resampling.LANCZOS)
+                    img_buf = BytesIO()
+                    thumb.save(img_buf, format="JPEG", quality=85)
+                    img_buf.seek(0)
+                    story.append(Paragraph("Change overlay", styles["Heading3"]))
+                    story.append(RLImage(img_buf, width=w, height=h))
+                    story.append(Spacer(1, 10))
+            except Exception:
+                pass
+
+    story.append(Paragraph("Detected regions", styles["Heading3"]))
+    if regions:
+        table_data = [["#", "DDA type", "Internal type", "Conf.", "Area (px)", "Lat", "Lng"]]
+        for r in regions[:50]:
+            lat = r.get("latitude") or r.get("lat")
+            lng = r.get("longitude") or r.get("lng")
+            table_data.append([
+                str(r.get("id", "")),
+                r.get("ddaChangeType") or r.get("objectType") or "—",
+                r.get("internalObjectType") or r.get("objectType") or "—",
+                f'{(r.get("confidence", 0) or 0) * 100:.0f}%',
+                f'{r.get("area", 0):,}',
+                f"{lat:.5f}" if lat is not None else "—",
+                f"{lng:.5f}" if lng is not None else "—",
+            ])
+        tbl = Table(table_data, repeatRows=1, colWidths=[22, 72, 72, 36, 52, 48, 48])
+        tbl.setStyle(TableStyle([
+            ("BACKGROUND", (0, 0), (-1, 0), colors.HexColor("#2e33c5")),
+            ("TEXTCOLOR", (0, 0), (-1, 0), colors.white),
+            ("FONTNAME", (0, 0), (-1, 0), "Helvetica-Bold"),
+            ("FONTSIZE", (0, 0), (-1, -1), 8),
+            ("GRID", (0, 0), (-1, -1), 0.25, colors.lightgrey),
+            ("ROWBACKGROUNDS", (0, 1), (-1, -1), [colors.white, colors.HexColor("#f9f9fb")]),
+            ("VALIGN", (0, 0), (-1, -1), "TOP"),
+        ]))
+        story.append(tbl)
+        if len(regions) > 50:
+            story.append(Spacer(1, 6))
+            story.append(Paragraph(f"Showing first 50 of {len(regions)} regions.", sub_style))
+    else:
+        story.append(Paragraph("No change regions detected.", body))
+
+    doc.build(story)
+    return buf.getvalue(), _safe_filename(run.title or "", run.id)

app/dda/reports_routes.py

@@ -0,0 +1,97 @@
+"""DDA report browser view, PDF export, and email notify (FR-05)."""
+from __future__ import annotations
+
+import logging
+from typing import Optional
+
+from fastapi import APIRouter, Depends, HTTPException
+from fastapi.responses import Response
+from pydantic import BaseModel, EmailStr
+from sqlalchemy.orm import Session
+
+from ..auth import get_or_create_guest_user
+from ..database import get_db
+from ..models import DetectionRun
+from ..notifier import send_notification
+from .config import get_public_base_url
+from .report_pdf import build_report_dict, generate_report_pdf
+
+logger = logging.getLogger(__name__)
+router = APIRouter()
+
+
+def _require_dda():
+    from .config import IS_DDA_MODE
+    if not IS_DDA_MODE:
+        raise HTTPException(status_code=404, detail="DDA mode is not enabled")
+
+
+def _get_user_run(db: Session, run_id: int, user_id: int) -> DetectionRun:
+    run = db.query(DetectionRun).filter(
+        DetectionRun.id == run_id,
+        DetectionRun.user_id == user_id,
+    ).first()
+    if not run:
+        raise HTTPException(status_code=404, detail="Report not found")
+    return run
+
+
+@router.get("/reports/{run_id}")
+def get_report(run_id: int, db: Session = Depends(get_db)):
+    """JSON payload for the standalone report page and API clients."""
+    _require_dda()
+    user = get_or_create_guest_user(db)
+    run = _get_user_run(db, run_id, user.id)
+    data = build_report_dict(run, include_overlay_b64=True)
+    data["reportUrl"] = f"{get_public_base_url()}/dda/reports/{run.id}"
+    return data
+
+
+@router.get("/reports/{run_id}/pdf")
+def download_report_pdf(run_id: int, db: Session = Depends(get_db)):
+    """Download detection report as PDF."""
+    _require_dda()
+    user = get_or_create_guest_user(db)
+    run = _get_user_run(db, run_id, user.id)
+    try:
+        pdf_bytes, filename = generate_report_pdf(run)
+    except ImportError as exc:
+        raise HTTPException(status_code=503, detail="PDF export is not available (reportlab missing)") from exc
+    except Exception as exc:
+        logger.exception("PDF generation failed for run %s", run_id)
+        raise HTTPException(status_code=500, detail=f"PDF generation failed: {exc}") from exc
+    return Response(
+        content=pdf_bytes,
+        media_type="application/pdf",
+        headers={"Content-Disposition": f'attachment; filename="{filename}"'},
+    )
+
+
+class ReportNotifyBody(BaseModel):
+    email: EmailStr
+
+
+@router.post("/reports/{run_id}/notify")
+def notify_report(run_id: int, body: ReportNotifyBody, db: Session = Depends(get_db)):
+    """Email report summary with link to the browser report page."""
+    _require_dda()
+    user = get_or_create_guest_user(db)
+    run = _get_user_run(db, run_id, user.id)
+    import json
+    regions = json.loads(run.regions_json or "[]")
+    report_url = f"{get_public_base_url()}/dda/reports/{run.id}"
+    sent, error = send_notification(
+        recipient=body.email.strip(),
+        title=run.title,
+        method=run.method,
+        zone=run.zone or "",
+        village=run.village or "",
+        change_pct=float(run.change_percentage),
+        changed_px=int(run.changed_pixels),
+        total_px=int(run.total_pixels),
+        regions=regions,
+        report_url=report_url,
+    )
+    if not sent:
+        raise HTTPException(status_code=400, detail=error or "Failed to send report email")
+    return {"ok": True, "message": f"Report link sent to {body.email.strip()}.", "reportUrl": report_url}

app/main.py

@@ -555,6 +555,17 @@ def delete_run(
 
 
 # --- Serve SPA ---
+@app.get("/dda/reports/{run_id}", response_class=HTMLResponse)
+def dda_report_page(run_id: int):
+    """Standalone browser report (FR-05)."""
+    if not IS_DDA_MODE:
+        raise HTTPException(status_code=404, detail="Not found")
+    report_file = TEMPLATES_DIR / "report_dda.html"
+    if not report_file.exists():
+        raise HTTPException(status_code=404, detail="Report template missing")
+    return FileResponse(report_file)
+
+
 @app.get("/", response_class=HTMLResponse)
 def index():
     if IS_DDA_MODE:

app/notifier.py

@@ -71,6 +71,18 @@ def _build_region_rows(regions: list) -> str:
     return "\n".join(rows)
 
 
+def _report_link_section(report_url: str) -> str:
+    if not report_url:
+        return ""
+    safe = report_url.replace('"', "%22")
+    return (
+        '<p style="margin:0 0 20px; text-align:center;">'
+        f'<a href="{safe}" style="display:inline-block; background:#2e33c5; color:#fff; '
+        'text-decoration:none; padding:12px 24px; border-radius:8px; font-size:14px; font-weight:600;">'
+        "View full report online</a></p>"
+    )
+
+
 def build_email_body(
     title: str,
     method: str,
@@ -80,6 +92,7 @@ def build_email_body(
     changed_px: int,
     total_px: int,
     regions: list,
+    report_url: str = "",
 ) -> str:
     """Populate the HTML template with detection results."""
     html = _load_template()
@@ -97,6 +110,7 @@ def build_email_body(
         "{{regions_count}}": str(len(regions)),
         "{{region_rows}}": region_rows,
         "{{timestamp}}": now,
+        "{{report_link_section}}": _report_link_section(report_url),
     }
     for key, val in replacements.items():
         html = html.replace(key, val)
@@ -208,10 +222,12 @@ def send_notification(
     changed_px: int,
     total_px: int,
     regions: list,
+    report_url: str = "",
 ):
     """Send a detection report email and return (success, error_message)."""
     html_body = build_email_body(
-        title, method, zone, village, change_pct, changed_px, total_px, regions
+        title, method, zone, village, change_pct, changed_px, total_px, regions,
+        report_url=report_url,
     )
     subject = f"Change Detection Report — {title or 'Untitled run'}"
     return _send_html_email(recipient, subject, html_body)

requirements.txt

@@ -18,3 +18,5 @@ requests>=2.28.0
 protobuf>=5.28.0,<6
 rasterio>=1.3.0,<1.5
 pyproj>=3.6.0
+reportlab>=4.0.0
+email-validator>=2.0.0

static/css/dda.css

@@ -347,3 +347,75 @@
 
 .regions-table tr.region-selected { background: rgba(16, 185, 129, 0.12); }
 .regions-table tr { cursor: pointer; }
+
+.dda-notify-wrap { position: relative; margin-left: auto; }
+.dda-notify-btn {
+  position: relative;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.4rem 0.55rem;
+  cursor: pointer;
+  color: inherit;
+  display: flex;
+  align-items: center;
+}
+.dda-notify-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: var(--danger, #dc2626);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+}
+.dda-notify-panel {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  width: min(320px, 90vw);
+  max-height: 360px;
+  overflow-y: auto;
+  background: var(--card, #fff);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+  z-index: 200;
+  padding: 0.35rem;
+}
+.dda-notify-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: none;
+  background: transparent;
+  padding: 0.55rem 0.65rem;
+  border-radius: 6px;
+  cursor: pointer;
+  color: inherit;
+}
+.dda-notify-item:hover { background: rgba(0,0,0,0.04); }
+.dda-notify-item.unread { background: rgba(46, 51, 197, 0.06); }
+.dda-notify-item-title { display: block; font-size: 0.85rem; font-weight: 600; }
+.dda-notify-item-meta { display: block; font-size: 0.75rem; color: var(--text-muted, #888); margin-top: 0.15rem; }
+.dda-notify-empty { padding: 0.75rem; margin: 0; font-size: 0.85rem; }
+
+.dda-notify-email { margin-top: 0.35rem; width: 100%; max-width: 280px; }
+.dda-report-actions-cell { white-space: nowrap; }
+.dda-report-actions-cell .btn, .dda-report-actions-cell a.btn { margin-right: 0.25rem; margin-bottom: 0.25rem; }
+
+.dda-report-page { max-width: 960px; margin: 0 auto; padding: 1rem; }
+.dda-report-header { justify-content: space-between; }
+.dda-report-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.dda-report-stats { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 0.75rem; }
+.dda-stat .label { display: block; font-size: 0.75rem; color: var(--text-muted, #888); }
+.dda-stat .value { font-size: 1.25rem; font-weight: 700; }
+.dda-report-overlay { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); }
+.dda-report-email-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
+.dda-report-email-row input { flex: 1; min-width: 200px; }

static/js/dda/compare.js

@@ -279,6 +279,12 @@ function setupCompareInteractions() {
   });
   document.getElementById('btn-run-job')?.addEventListener('click', runLibraryDetection);
 
+  const notifyCb = document.getElementById('dda-detect-notify');
+  const notifyEmail = document.getElementById('dda-detect-notify-email');
+  notifyCb?.addEventListener('change', () => {
+    if (notifyEmail) notifyEmail.classList.toggle('hidden', !notifyCb.checked);
+  });
+
   document.addEventListener('keydown', (e) => {
     if (e.key !== 'Escape') return;
     const picker = document.getElementById('dda-picker-modal');
@@ -304,7 +310,7 @@ async function runDetectionWithFallback(form, loadingEl) {
       loadingEl.textContent = 'Running detection (sync fallback)…';
     }
   }
-  return ddaApi('POST', '/api/dda/detect/from-library', { body: form });
+  return ddaApi('POST', '/api/dda/detect/from-library', { body: form }).then((result) => ({ result, jobId: null }));
 }
 
 async function pollJobUntilDone(jobId, loadingEl) {
@@ -315,7 +321,10 @@ async function pollJobUntilDone(jobId, loadingEl) {
     if (loadingEl) {
       loadingEl.textContent = `Detection job #${jobId} — ${status}… (${i + 1})`;
     }
-    if (status === 'completed' && job.result) return job.result;
+    if (status === 'completed' && job.result) {
+      if (typeof window.refreshDdaNotifications === 'function') window.refreshDdaNotifications();
+      return { result: job.result, jobId };
+    }
     if (status === 'failed') throw new Error(job.errorMessage || 'Detection job failed');
     await new Promise((r) => setTimeout(r, 2000));
   }
@@ -344,11 +353,21 @@ async function runLibraryDetection() {
   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)));
+  const notifyCb = document.getElementById('dda-detect-notify');
+  const notifyEmail = document.getElementById('dda-detect-notify-email');
+  if (notifyCb?.checked && notifyEmail?.value?.trim()) {
+    form.append('notify_email', notifyEmail.value.trim());
+  }
 
   try {
-    const data = await runDetectionWithFallback(form, loading);
+    const { result: data, jobId } = await runDetectionWithFallback(form, loading);
+    if (jobId && typeof window.markDdaJobSeen === 'function') window.markDdaJobSeen(jobId);
     showDetectResult(data);
-    if (typeof showDdaSuccess === 'function') showDdaSuccess('Detection complete.');
+    if (typeof showDdaSuccess === 'function') {
+      let msg = 'Detection complete.';
+      if (data.notificationSent) msg += ' Report email sent.';
+      showDdaSuccess(msg);
+    }
     if (typeof loadReportsList === 'function') loadReportsList();
   } catch (err) {
     if (typeof showDdaError === 'function') showDdaError(err.message || 'Detection failed');

static/js/dda/notifications.js

@@ -0,0 +1,149 @@
+/** In-app notification bell — polls completed detection jobs (FR-05). */
+
+const SEEN_JOBS_KEY = 'dda_seen_job_ids';
+const POLL_MS = 30000;
+
+function getSeenJobIds() {
+  try {
+    return new Set(JSON.parse(localStorage.getItem(SEEN_JOBS_KEY) || '[]'));
+  } catch (_) {
+    return new Set();
+  }
+}
+
+function saveSeenJobIds(ids) {
+  try {
+    localStorage.setItem(SEEN_JOBS_KEY, JSON.stringify([...ids].slice(-200)));
+  } catch (_) {}
+}
+
+function markJobSeen(jobId) {
+  const seen = getSeenJobIds();
+  seen.add(String(jobId));
+  saveSeenJobIds(seen);
+  refreshNotifications();
+}
+
+function formatNotifyTime(iso) {
+  if (!iso) return '';
+  try {
+    return new Date(iso).toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' });
+  } catch (_) {
+    return iso;
+  }
+}
+
+async function fetchNotifyJobs() {
+  try {
+    const data = await ddaApi('GET', '/api/dda/jobs?limit=25');
+    return data.jobs || [];
+  } catch (_) {
+    return [];
+  }
+}
+
+function updateNotifyBadge(jobs) {
+  const badge = document.getElementById('dda-notify-badge');
+  if (!badge) return;
+  const seen = getSeenJobIds();
+  const unread = jobs.filter((j) => j.status === 'completed' && j.runId && !seen.has(String(j.id)));
+  if (unread.length) {
+    badge.textContent = unread.length > 9 ? '9+' : String(unread.length);
+    badge.classList.remove('hidden');
+  } else {
+    badge.classList.add('hidden');
+  }
+  return unread;
+}
+
+function renderNotifyPanel(jobs) {
+  const panel = document.getElementById('dda-notify-panel');
+  if (!panel) return;
+  const seen = getSeenJobIds();
+  const items = jobs.filter((j) => ['completed', 'failed', 'running', 'queued'].includes(j.status));
+  if (!items.length) {
+    panel.innerHTML = '<p class="dim dda-notify-empty">No recent jobs.</p>';
+    return;
+  }
+  panel.innerHTML = items.slice(0, 12).map((j) => {
+    const unread = j.status === 'completed' && !seen.has(String(j.id));
+    const title = j.title || `${j.basePath || 'Base'} vs ${j.comparisonPath || 'Comparison'}`;
+    const pct = j.report?.changePercentage;
+    const meta = j.status === 'completed' && pct != null ? `${pct.toFixed(2)}% change` : j.status;
+    return `
+      <button type="button" class="dda-notify-item${unread ? ' unread' : ''}" data-job-id="${j.id}" data-run-id="${j.runId || ''}" data-status="${j.status}">
+        <span class="dda-notify-item-title">${title}</span>
+        <span class="dda-notify-item-meta">${formatNotifyTime(j.completedAt || j.createdAt)} · ${meta}</span>
+      </button>`;
+  }).join('');
+
+  panel.querySelectorAll('.dda-notify-item').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      markJobSeen(btn.dataset.jobId);
+      const status = btn.dataset.status;
+      const runId = btn.dataset.runId;
+      closeNotifyPanel();
+      if (status === 'completed' && runId) {
+        if (typeof showDdaResult === 'function') {
+          try {
+            const data = await ddaApi('GET', `/api/history/${runId}`);
+            showDdaResult(data);
+          } catch (_) {
+            window.open(`/dda/reports/${runId}`, '_blank');
+          }
+        } else {
+          window.open(`/dda/reports/${runId}`, '_blank');
+        }
+      } else if (status === 'failed') {
+        if (typeof showDdaError === 'function') showDdaError('Detection job failed. See Reports tab for details.');
+        document.querySelector('.dda-tab[data-tab="reports"]')?.click();
+      } else {
+        document.querySelector('.dda-tab[data-tab="reports"]')?.click();
+      }
+    });
+  });
+}
+
+function closeNotifyPanel() {
+  document.getElementById('dda-notify-panel')?.classList.add('hidden');
+}
+
+async function refreshNotifications() {
+  const jobs = await fetchNotifyJobs();
+  updateNotifyBadge(jobs);
+  const panel = document.getElementById('dda-notify-panel');
+  if (panel && !panel.classList.contains('hidden')) {
+    renderNotifyPanel(jobs);
+  }
+  return jobs;
+}
+
+function initNotifications() {
+  const btn = document.getElementById('dda-notify-btn');
+  if (!btn) return;
+
+  btn.addEventListener('click', async (e) => {
+    e.stopPropagation();
+    const panel = document.getElementById('dda-notify-panel');
+    const wasHidden = panel?.classList.contains('hidden');
+    if (wasHidden) {
+      const jobs = await fetchNotifyJobs();
+      renderNotifyPanel(jobs);
+      panel?.classList.remove('hidden');
+    } else {
+      closeNotifyPanel();
+    }
+  });
+
+  document.addEventListener('click', (e) => {
+    if (e.target.closest('.dda-notify-wrap')) return;
+    closeNotifyPanel();
+  });
+
+  refreshNotifications();
+  setInterval(refreshNotifications, POLL_MS);
+}
+
+document.addEventListener('DOMContentLoaded', initNotifications);
+window.markDdaJobSeen = markJobSeen;
+window.refreshDdaNotifications = refreshNotifications;

static/js/dda/report_page.js

@@ -0,0 +1,115 @@
+/** Standalone report page at /dda/reports/{runId} (FR-05). */
+
+function parseReportRunId() {
+  const m = window.location.pathname.match(/\/dda\/reports\/(\d+)/);
+  return m ? parseInt(m[1], 10) : null;
+}
+
+function showReportError(msg) {
+  const el = document.getElementById('report-error');
+  if (!el) return;
+  el.textContent = msg;
+  el.classList.remove('hidden');
+}
+
+function formatCoord(v) {
+  if (v == null || v === '') return '—';
+  const n = Number(v);
+  return Number.isFinite(n) ? n.toFixed(5) : '—';
+}
+
+async function loadReportPage() {
+  const runId = parseReportRunId();
+  const loading = document.getElementById('report-loading');
+  const content = document.getElementById('report-content');
+  if (!runId) {
+    if (loading) loading.innerHTML = '<p class="dim">Invalid report URL.</p>';
+    return;
+  }
+
+  try {
+    const data = await ddaApi('GET', `/api/dda/reports/${runId}`);
+    if (loading) loading.classList.add('hidden');
+    if (content) content.classList.remove('hidden');
+
+    document.getElementById('report-title').textContent = data.title || `Run #${runId}`;
+    const loc = [data.village, data.zone].filter(Boolean).join(', ') || '—';
+    document.getElementById('report-meta').textContent =
+      `${data.method || '—'} · ${loc} · ${data.createdAt || ''}`;
+
+    const stats = data.statistics || {};
+    document.getElementById('report-stats').innerHTML = `
+      <div class="dda-stat"><span class="label">Change</span><span class="value">${(stats.changePercentage ?? 0).toFixed(2)}%</span></div>
+      <div class="dda-stat"><span class="label">Changed px</span><span class="value">${(stats.changedPixels ?? 0).toLocaleString()}</span></div>
+      <div class="dda-stat"><span class="label">Regions</span><span class="value">${data.regionsCount ?? (data.regions || []).length}</span></div>`;
+
+    const overlay = document.getElementById('report-overlay');
+    if (overlay) {
+      if (data.overlayBase64Png) {
+        overlay.src = `data:image/png;base64,${data.overlayBase64Png}`;
+      } else if (data.overlayUrl) {
+        overlay.src = data.overlayUrl;
+      } else {
+        overlay.alt = 'No overlay available';
+      }
+    }
+
+    const tbody = document.getElementById('report-regions-body');
+    const regions = data.regions || [];
+    if (tbody) {
+      tbody.innerHTML = regions.length
+        ? regions.map((r) => `
+            <tr>
+              <td>${r.id ?? ''}</td>
+              <td>${r.ddaChangeType || r.objectType || '—'}</td>
+              <td>${r.internalObjectType || r.objectType || '—'}</td>
+              <td>${((r.confidence ?? 0) * 100).toFixed(0)}%</td>
+              <td>${(r.area ?? 0).toLocaleString()}</td>
+              <td>${formatCoord(r.latitude ?? r.lat)}</td>
+              <td>${formatCoord(r.longitude ?? r.lng)}</td>
+            </tr>`).join('')
+        : '<tr><td colspan="7" class="dim">No regions detected.</td></tr>';
+    }
+
+    const pdfBtn = document.getElementById('report-pdf-btn');
+    if (pdfBtn) {
+      pdfBtn.disabled = false;
+      pdfBtn.onclick = () => { window.location.href = `/api/dda/reports/${runId}/pdf`; };
+    }
+
+    const viewBtn = document.getElementById('report-view-btn');
+    if (viewBtn) {
+      viewBtn.disabled = false;
+      viewBtn.onclick = () => {
+        window.location.href = '/?tab=reports';
+        try { sessionStorage.setItem('dda_open_run', String(runId)); } catch (_) {}
+      };
+    }
+
+    window._reportPageData = data;
+  } catch (err) {
+    if (loading) loading.classList.add('hidden');
+    showReportError(err.message || 'Could not load report.');
+  }
+}
+
+document.getElementById('report-email-btn')?.addEventListener('click', async () => {
+  const runId = parseReportRunId();
+  const input = document.getElementById('report-email');
+  const msg = document.getElementById('report-email-msg');
+  const email = (input?.value || '').trim();
+  if (!email) {
+    if (msg) msg.textContent = 'Enter an email address.';
+    return;
+  }
+  try {
+    const res = await ddaApi('POST', `/api/dda/reports/${runId}/notify`, {
+      body: JSON.stringify({ email }),
+    });
+    if (msg) msg.textContent = res.message || 'Sent.';
+  } catch (err) {
+    if (msg) msg.textContent = err.message || 'Send failed.';
+  }
+});
+
+loadReportPage();

static/js/dda/reports.js

@@ -1,4 +1,4 @@
-/** Reports tab — detection jobs and history (Phase 4 foundation). */
+/** Reports tab — detection jobs, history, PDF export (FR-05). */
 
 function formatReportDate(iso) {
   if (!iso) return '—';
@@ -68,7 +68,7 @@ async function loadReportsList() {
             <th>Status</th>
             <th>Change %</th>
             <th>Regions</th>
-            <th></th>
+            <th>Actions</th>
           </tr>
         </thead>
         <tbody>
@@ -79,10 +79,12 @@ async function loadReportsList() {
               <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>
+              <td class="dda-report-actions-cell">
                 ${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>` : '—')}
+                  ? `<button type="button" class="btn btn-secondary btn-sm" data-view-run="${r.runId}">View</button>
+                     <a class="btn btn-secondary btn-sm" href="/dda/reports/${r.runId}" target="_blank" rel="noopener">Report</a>
+                     <a class="btn btn-secondary btn-sm" href="/api/dda/reports/${r.runId}/pdf" download>PDF</a>`
+                  : (r.error ? `<span class="dim" title="${String(r.error).replace(/"/g, '')}">Error</span>` : '—')}
               </td>
             </tr>`).join('')}
         </tbody>
@@ -114,6 +116,22 @@ document.querySelectorAll('.dda-tab').forEach((btn) => {
   }
 });
 
-if (document.getElementById('tab-reports')?.classList.contains('active')) {
-  loadReportsList();
-}
+document.addEventListener('DOMContentLoaded', () => {
+  try {
+    const openRun = sessionStorage.getItem('dda_open_run');
+    if (openRun) {
+      sessionStorage.removeItem('dda_open_run');
+      document.querySelector('.dda-tab[data-tab="reports"]')?.click();
+      setTimeout(async () => {
+        try {
+          const data = await ddaApi('GET', `/api/history/${openRun}`);
+          if (typeof showDdaResult === 'function') showDdaResult(data);
+        } catch (_) {}
+      }, 300);
+    }
+  } catch (_) {}
+
+  if (document.getElementById('tab-reports')?.classList.contains('active')) {
+    loadReportsList();
+  }
+});

templates/ChangeDetection.html

@@ -80,8 +80,10 @@
               </table>
               {{/regions}}
 
+              {{report_link_section}}
+
               <p style="margin:24px 0 0; color:#333; font-size:15px; line-height:1.6;">
-                You can view the full overlay image and detailed results by logging in to the application.
+                You can view the full overlay image and detailed results in the application.
               </p>
             </td>
           </tr>

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=8" />
+  <link rel="stylesheet" href="/static/css/dda.css?v=9" />
 </head>
 <body>
   <div class="app dda-app">
@@ -20,6 +20,13 @@
         <button type="button" class="dda-tab" data-tab="detect" role="tab">Change Detection</button>
         <button type="button" class="dda-tab" data-tab="reports" role="tab">Reports</button>
       </nav>
+      <div class="dda-notify-wrap">
+        <button type="button" id="dda-notify-btn" class="dda-notify-btn" title="Job notifications" aria-label="Notifications">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
+          <span id="dda-notify-badge" class="dda-notify-badge hidden">0</span>
+        </button>
+        <div id="dda-notify-panel" class="dda-notify-panel hidden" role="menu"></div>
+      </div>
     </header>
 
     <div id="dda-error" class="alert alert-error hidden"></div>
@@ -140,6 +147,8 @@
           </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>
+          <label class="dda-check"><input type="checkbox" id="dda-detect-notify" /> Email report when done</label>
+          <input type="email" id="dda-detect-notify-email" class="dda-notify-email hidden" placeholder="recipient@example.com" />
         </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>
@@ -154,7 +163,7 @@
           <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>
+        <p class="sub dim">Completed jobs and detection history. Download PDF or open the browser report.</p>
         <div id="reports-list"><p class="dim">Open this tab to load reports.</p></div>
       </div>
     </section>
@@ -232,10 +241,11 @@
     </div>
   </div>
 
-  <script src="/static/js/dda/app.js?v=10"></script>
+  <script src="/static/js/dda/app.js?v=11"></script>
   <script src="/static/js/dda/library.js?v=6"></script>
   <script src="/static/js/dda/result.js?v=4"></script>
-  <script src="/static/js/dda/compare.js?v=7"></script>
-  <script src="/static/js/dda/reports.js?v=2"></script>
+  <script src="/static/js/dda/compare.js?v=8"></script>
+  <script src="/static/js/dda/reports.js?v=3"></script>
+  <script src="/static/js/dda/notifications.js?v=1"></script>
 </body>
 </html>

templates/report_dda.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DDA Detection Report</title>
+  <link rel="stylesheet" href="/static/css/style.css?v=30" />
+  <link rel="stylesheet" href="/static/css/dda.css?v=9" />
+</head>
+<body>
+  <div class="app dda-app dda-report-page">
+    <header class="dda-header dda-report-header">
+      <div class="app-brand">
+        <span>DDA Change Detection — Report</span>
+      </div>
+      <div class="dda-report-actions">
+        <a href="/" class="btn btn-secondary btn-sm">← Back to app</a>
+        <button type="button" class="btn btn-secondary btn-sm" id="report-pdf-btn" disabled>Download PDF</button>
+        <button type="button" class="btn btn-primary btn-sm" id="report-view-btn" disabled>Interactive view</button>
+      </div>
+    </header>
+
+    <div id="report-error" class="alert alert-error hidden"></div>
+    <div id="report-loading" class="card"><p class="dim">Loading report…</p></div>
+    <div id="report-content" class="hidden">
+      <div class="card dda-report-summary">
+        <h1 id="report-title"></h1>
+        <p class="dim" id="report-meta"></p>
+        <div class="dda-report-stats" id="report-stats"></div>
+      </div>
+      <div class="card dda-report-overlay-wrap">
+        <h3>Change overlay</h3>
+        <img id="report-overlay" alt="Change overlay" class="dda-report-overlay" />
+      </div>
+      <div class="card">
+        <h3>Detected regions</h3>
+        <div class="table-wrap">
+          <table class="dda-reports-table dda-report-regions" id="report-regions-table">
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>DDA type</th>
+                <th>Internal type</th>
+                <th>Confidence</th>
+                <th>Area (px)</th>
+                <th>Lat</th>
+                <th>Lng</th>
+              </tr>
+            </thead>
+            <tbody id="report-regions-body"></tbody>
+          </table>
+        </div>
+      </div>
+      <div class="card dda-report-email">
+        <h3>Email this report</h3>
+        <div class="dda-report-email-row">
+          <input type="email" id="report-email" placeholder="recipient@example.com" />
+          <button type="button" class="btn btn-secondary" id="report-email-btn">Send link</button>
+        </div>
+        <p class="dim" id="report-email-msg"></p>
+      </div>
+    </div>
+  </div>
+  <script src="/static/js/dda/app.js?v=11"></script>
+  <script src="/static/js/dda/report_page.js?v=1"></script>
+</body>
+</html>