docs: implementation plan for AOI click-to-place redesign

5 tasks: HTML cleanup, CSS styles, map.js rewrite,
app.js wiring, and limit verification.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

docs/superpowers/plans/2026-04-06-aoi-click-to-place.md

@@ -0,0 +1,767 @@
+# AOI Click-to-Place Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the two-tap rectangle + MapboxDraw AOI selection with a single-click, fixed-size square placement model.
+
+**Architecture:** Remove MapboxDraw entirely. Render AOI as a plain MapLibre GeoJSON source with fill + outline layers. User clicks map → compute square bbox of selected preset size (100/250/500 km²) → update source. Geocoder auto-places AOI at geocoded center.
+
+**Tech Stack:** MapLibre GL JS (already in use), vanilla JS, no new dependencies.
+
+---
+
+## File Structure
+
+| File | Role | Action |
+|------|------|--------|
+| `frontend/index.html` | Page structure, CDN links | Modify: remove Draw CDN, remove GeoJSON upload & draw button HTML, add size toggle buttons |
+| `frontend/js/map.js` | Map logic, AOI placement | Rewrite: remove all MapboxDraw code, add click-to-place with GeoJSON source rendering |
+| `frontend/js/app.js` | SPA state, page wiring | Modify: remove Draw/upload handlers, wire size toggles, update geocode to auto-place |
+| `frontend/css/merlx.css` | Styles | Modify: replace draw-btn/upload-area styles with size-toggle styles |
+
+---
+
+### Task 1: Remove MapboxDraw from HTML and add size toggle buttons
+
+**Files:**
+- Modify: `frontend/index.html:15-17` (CDN links)
+- Modify: `frontend/index.html:209-225` (draw tools + upload sections)
+
+- [ ] **Step 1: Remove MapboxDraw CDN links**
+
+In `frontend/index.html`, delete lines 15-17:
+
+```html
+  <!-- Mapbox GL Draw 1.4.3 -->
+  <link rel="stylesheet" href="https://unpkg.com/@mapbox/mapbox-gl-draw@1.4.3/dist/mapbox-gl-draw.css" />
+  <script src="https://unpkg.com/@mapbox/mapbox-gl-draw@1.4.3/dist/mapbox-gl-draw.js"></script>
+```
+
+- [ ] **Step 2: Replace draw tools and upload sections with size toggle**
+
+Replace lines 209-225 (the "Draw tools" and "GeoJSON upload" form groups) with:
+
+```html
+      <!-- AOI size -->
+      <div class="form-group">
+        <label class="label">AOI size</label>
+        <div class="size-toggles">
+          <button class="size-toggle-btn" data-km2="100" type="button">100 km²</button>
+          <button class="size-toggle-btn" data-km2="250" type="button">250 km²</button>
+          <button class="size-toggle-btn active" data-km2="500" type="button">500 km²</button>
+        </div>
+        <div id="aoi-area-display" class="aoi-area-display" style="display:none;"></div>
+      </div>
+```
+
+- [ ] **Step 3: Update the page subtitle**
+
+On line 192, change:
+
+```html
+<p style="font-size: var(--text-xs); color: var(--ink-muted); margin-top: var(--space-2);">Draw, upload, or search for your area of interest.</p>
+```
+
+to:
+
+```html
+<p style="font-size: var(--text-xs); color: var(--ink-muted); margin-top: var(--space-2);">Click the map or search to place your area of interest.</p>
+```
+
+- [ ] **Step 4: Verify HTML loads without errors**
+
+Open the app in a browser. Confirm:
+- No console errors about missing MapboxDraw
+- Size toggle buttons appear in the sidebar
+- 500 km² button has the `active` class
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add frontend/index.html
+git commit -m "feat: replace MapboxDraw HTML with size toggle buttons"
+```
+
+---
+
+### Task 2: Replace CSS styles
+
+**Files:**
+- Modify: `frontend/css/merlx.css:549-639`
+
+- [ ] **Step 1: Replace draw and upload styles with size toggle styles**
+
+In `frontend/css/merlx.css`, replace the `.draw-tools` through `.upload-area input[type="file"]` blocks (lines 549-639) with:
+
+```css
+/* AOI size toggle buttons */
+.size-toggles {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.size-toggle-btn {
+  flex: 1;
+  height: 32px;
+  padding: 0 var(--space-3);
+  font-size: var(--text-xs);
+  background-color: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  color: var(--ink-muted);
+  font-family: var(--font-data);
+  font-weight: 500;
+  transition: all var(--motion-default) var(--ease-default);
+}
+
+.size-toggle-btn:hover {
+  background-color: var(--shell-warm);
+  color: var(--ink);
+}
+
+.size-toggle-btn.active {
+  background-color: var(--iris-dim);
+  border-color: var(--iris);
+  color: var(--iris-dark);
+  font-weight: 600;
+}
+
+/* AOI area display */
+.aoi-area-display {
+  margin-top: var(--space-3);
+  font-family: var(--font-data);
+  font-size: var(--text-xs);
+  color: var(--ink-muted);
+}
+```
+
+This removes: `.draw-tools`, `.draw-btn`, `.draw-btn:hover`, `.draw-btn.active`, `.aoi-area-over`, `.upload-area`, `.upload-area:hover`, `.upload-area input[type="file"]`.
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add frontend/css/merlx.css
+git commit -m "feat: replace draw/upload CSS with size toggle styles"
+```
+
+---
+
+### Task 3: Rewrite map.js — remove MapboxDraw, add click-to-place
+
+**Files:**
+- Rewrite: `frontend/js/map.js`
+
+- [ ] **Step 1: Rewrite map.js**
+
+Replace the entire contents of `frontend/js/map.js` with:
+
+```javascript
+/**
+ * Aperture — MapLibre GL map tools
+ * AOI click-to-place on the Define Area map + results map rendering.
+ */
+
+const POSITRON_STYLE = 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
+
+const SATELLITE_STYLE = {
+  version: 8,
+  sources: {
+    'esri-satellite': {
+      type: 'raster',
+      tiles: [
+        'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+      ],
+      tileSize: 256,
+      attribution: '&copy; Esri',
+    },
+  },
+  layers: [
+    {
+      id: 'esri-satellite-layer',
+      type: 'raster',
+      source: 'esri-satellite',
+      minzoom: 0,
+      maxzoom: 19,
+    },
+  ],
+};
+
+/* ── Basemap Toggle Control ────────────────────────────── */
+
+let _currentStyle = 'positron';
+
+class BasemapToggle {
+  onAdd(map) {
+    this._map = map;
+    this._container = document.createElement('div');
+    this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group basemap-toggle';
+
+    this._btn = document.createElement('button');
+    this._btn.type = 'button';
+    this._btn.title = 'Switch to Satellite';
+    this._btn.setAttribute('aria-label', 'Switch to Satellite');
+    this._btn.innerHTML = BasemapToggle._satelliteIcon();
+    this._btn.addEventListener('click', () => this._toggle());
+
+    this._container.appendChild(this._btn);
+    return this._container;
+  }
+
+  onRemove() {
+    this._container.remove();
+    this._map = undefined;
+  }
+
+  _toggle() {
+    const isSatellite = _currentStyle === 'satellite';
+    const newStyle = isSatellite ? POSITRON_STYLE : SATELLITE_STYLE;
+
+    _aoiMap.setStyle(newStyle);
+
+    // Re-add AOI layer after style change
+    _aoiMap.once('style.load', () => {
+      _addAoiSource();
+      if (_currentBbox) _updateAoiLayer(_currentBbox);
+    });
+
+    _currentStyle = isSatellite ? 'positron' : 'satellite';
+    const nextLabel = _currentStyle === 'positron' ? 'Switch to Satellite' : 'Switch to Map';
+    this._btn.title = nextLabel;
+    this._btn.setAttribute('aria-label', nextLabel);
+    this._btn.innerHTML = _currentStyle === 'positron'
+      ? BasemapToggle._satelliteIcon()
+      : BasemapToggle._mapIcon();
+  }
+
+  static _satelliteIcon() {
+    return `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10"/>
+      <path d="M2 12h20"/>
+      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+    </svg>`;
+  }
+
+  static _mapIcon() {
+    return `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/>
+      <line x1="8" y1="2" x2="8" y2="18"/>
+      <line x1="16" y1="6" x2="16" y2="22"/>
+    </svg>`;
+  }
+}
+
+/* ── AOI Map ─────────────────────────────────────────────── */
+
+let _aoiMap = null;
+let _onAoiChange = null;   // callback(bbox | null)
+let _currentBbox = null;   // [minLon, minLat, maxLon, maxLat]
+let _currentCenter = null;  // [lng, lat] — last click/geocode center
+let _selectedKm2 = 500;    // active preset size
+
+const AOI_SOURCE_ID = 'aoi-draw';
+const AOI_FILL_LAYER = 'aoi-draw-fill';
+const AOI_OUTLINE_LAYER = 'aoi-draw-outline';
+
+/**
+ * Compute a square bbox centered on [lng, lat] for targetKm2.
+ */
+function computeBbox(centerLng, centerLat, targetKm2) {
+  const sideKm = Math.sqrt(targetKm2);
+  const dLat = sideKm / 111.32;
+  const dLon = sideKm / (111.32 * Math.cos(centerLat * Math.PI / 180));
+  return [
+    centerLng - dLon / 2,
+    centerLat - dLat / 2,
+    centerLng + dLon / 2,
+    centerLat + dLat / 2,
+  ];
+}
+
+function _bboxToGeoJSON(bbox) {
+  const [minLon, minLat, maxLon, maxLat] = bbox;
+  return {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[
+          [minLon, minLat],
+          [maxLon, minLat],
+          [maxLon, maxLat],
+          [minLon, maxLat],
+          [minLon, minLat],
+        ]],
+      },
+      properties: {},
+    }],
+  };
+}
+
+const _emptyGeoJSON = { type: 'FeatureCollection', features: [] };
+
+function _addAoiSource() {
+  if (_aoiMap.getSource(AOI_SOURCE_ID)) return;
+  _aoiMap.addSource(AOI_SOURCE_ID, { type: 'geojson', data: _emptyGeoJSON });
+  _aoiMap.addLayer({
+    id: AOI_FILL_LAYER,
+    type: 'fill',
+    source: AOI_SOURCE_ID,
+    paint: { 'fill-color': '#1A3A34', 'fill-opacity': 0.10 },
+  });
+  _aoiMap.addLayer({
+    id: AOI_OUTLINE_LAYER,
+    type: 'line',
+    source: AOI_SOURCE_ID,
+    paint: { 'line-color': '#1A3A34', 'line-width': 2 },
+  });
+}
+
+function _updateAoiLayer(bbox) {
+  const source = _aoiMap.getSource(AOI_SOURCE_ID);
+  if (source) source.setData(_bboxToGeoJSON(bbox));
+}
+
+function _placeAoi(lng, lat) {
+  _currentCenter = [lng, lat];
+  _currentBbox = computeBbox(lng, lat, _selectedKm2);
+  _updateAoiLayer(_currentBbox);
+  if (_onAoiChange) _onAoiChange(_currentBbox);
+}
+
+/**
+ * Initialise the AOI map inside containerId.
+ * @param {string} containerId
+ * @param {function} onAoiChange - called with [minLon,minLat,maxLon,maxLat] or null
+ */
+export function initAoiMap(containerId, onAoiChange) {
+  _onAoiChange = onAoiChange;
+  _currentStyle = 'positron';
+
+  _aoiMap = new maplibregl.Map({
+    container: containerId,
+    style: POSITRON_STYLE,
+    center: [37.0, 3.0],
+    zoom: 4,
+  });
+
+  _aoiMap.addControl(new BasemapToggle(), 'top-right');
+  _aoiMap.getCanvas().style.cursor = 'crosshair';
+
+  _aoiMap.on('load', () => {
+    _addAoiSource();
+  });
+
+  _aoiMap.on('click', (e) => {
+    _placeAoi(e.lngLat.lng, e.lngLat.lat);
+  });
+}
+
+/**
+ * Change the AOI preset size. If an AOI is already placed, resize it.
+ * @param {number} km2 - target area in km²
+ */
+export function setAoiSize(km2) {
+  _selectedKm2 = km2;
+  if (_currentCenter) {
+    _currentBbox = computeBbox(_currentCenter[0], _currentCenter[1], km2);
+    _updateAoiLayer(_currentBbox);
+    if (_onAoiChange) _onAoiChange(_currentBbox);
+  }
+}
+
+/**
+ * Search for a location via Nominatim, fly there, and auto-place the AOI.
+ * @param {string} query
+ */
+export async function geocode(query) {
+  const url = `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(query)}&format=json&limit=1`;
+  const res = await fetch(url, { headers: { 'Accept-Language': 'en' } });
+  const results = await res.json();
+  if (!results.length) throw new Error('Location not found');
+  const { lon, lat } = results[0];
+  const lng = parseFloat(lon);
+  const latNum = parseFloat(lat);
+
+  _placeAoi(lng, latNum);
+
+  // Fly to fit the placed bbox
+  _aoiMap.fitBounds(
+    [[_currentBbox[0], _currentBbox[1]], [_currentBbox[2], _currentBbox[3]]],
+    { padding: 60, duration: 800 }
+  );
+}
+
+/* ── Results Map ─────────────────────────────────────────── */
+
+let _resultsMap = null;
+
+/**
+ * Initialise the results map inside containerId.
+ * @param {string} containerId
+ * @param {Array<number>} bbox - [minLon, minLat, maxLon, maxLat]
+ */
+export function initResultsMap(containerId, bbox) {
+  _resultsMap = new maplibregl.Map({
+    container: containerId,
+    style: POSITRON_STYLE,
+    bounds: [[bbox[0], bbox[1]], [bbox[2], bbox[3]]],
+    fitBoundsOptions: { padding: 60 },
+  });
+
+  _resultsMap.on('load', () => {
+    _resultsMap.addSource('aoi', {
+      type: 'geojson',
+      data: _bboxToGeoJSON(bbox),
+    });
+
+    _resultsMap.addLayer({
+      id: 'aoi-fill',
+      type: 'fill',
+      source: 'aoi',
+      paint: { 'fill-color': '#1A3A34', 'fill-opacity': 0.08 },
+    });
+
+    _resultsMap.addLayer({
+      id: 'aoi-outline',
+      type: 'line',
+      source: 'aoi',
+      paint: { 'line-color': '#1A3A34', 'line-width': 2, 'line-opacity': 0.7 },
+    });
+  });
+}
+
+const STATUS_COLORS = { green: '#3BAA7F', amber: '#CA5D0F', red: '#B83A2A' };
+const CONFIDENCE_COLORS = { high: '#B83A2A', nominal: '#CA5D0F', low: '#E8C547' };
+
+export function renderSpatialOverlay(spatialData) {
+  clearSpatialOverlay();
+  if (!_resultsMap) return;
+
+  const mapType = spatialData.map_type;
+  const status = spatialData.status;
+
+  if (mapType === 'points' && spatialData.geojson) {
+    _renderPoints(spatialData.geojson);
+  } else if (mapType === 'choropleth' && spatialData.geojson) {
+    _renderChoropleth(spatialData.geojson, spatialData.colormap);
+  } else if (mapType === 'grid' && spatialData.data) {
+    _renderGrid(spatialData);
+  } else {
+    _renderStatusOverlay(status);
+  }
+}
+
+export function clearSpatialOverlay() {
+  if (!_resultsMap) return;
+  for (const id of ['spatial-points', 'spatial-choropleth', 'spatial-grid']) {
+    if (_resultsMap.getLayer(id)) _resultsMap.removeLayer(id);
+    if (_resultsMap.getSource(id)) _resultsMap.removeSource(id);
+  }
+  if (_resultsMap.getLayer('aoi-fill')) {
+    _resultsMap.setPaintProperty('aoi-fill', 'fill-color', '#1A3A34');
+    _resultsMap.setPaintProperty('aoi-fill', 'fill-opacity', 0.08);
+  }
+  if (_resultsMap.getLayer('aoi-outline')) {
+    _resultsMap.setPaintProperty('aoi-outline', 'line-color', '#1A3A34');
+  }
+}
+
+function _renderPoints(geojson) {
+  _resultsMap.addSource('spatial-points', { type: 'geojson', data: geojson });
+  _resultsMap.addLayer({
+    id: 'spatial-points',
+    type: 'circle',
+    source: 'spatial-points',
+    paint: {
+      'circle-radius': 5,
+      'circle-color': [
+        'match', ['get', 'confidence'],
+        'high', CONFIDENCE_COLORS.high,
+        'nominal', CONFIDENCE_COLORS.nominal,
+        'low', CONFIDENCE_COLORS.low,
+        CONFIDENCE_COLORS.nominal,
+      ],
+      'circle-stroke-width': 1,
+      'circle-stroke-color': '#111',
+      'circle-opacity': 0.85,
+    },
+  }, 'aoi-fill');
+}
+
+function _renderChoropleth(geojson, colormap) {
+  _resultsMap.addSource('spatial-choropleth', { type: 'geojson', data: geojson });
+  const values = geojson.features.map(f => f.properties.value || 0);
+  const vmin = Math.min(...values);
+  const vmax = Math.max(...values);
+  const mid = (vmin + vmax) / 2;
+  _resultsMap.addLayer({
+    id: 'spatial-choropleth',
+    type: 'fill',
+    source: 'spatial-choropleth',
+    paint: {
+      'fill-color': [
+        'interpolate', ['linear'], ['get', 'value'],
+        vmin, colormap === 'Blues' ? '#deebf7' : '#f7fcb9',
+        mid, colormap === 'Blues' ? '#6baed6' : '#78c679',
+        vmax, colormap === 'Blues' ? '#08519c' : '#006837',
+      ],
+      'fill-opacity': 0.55,
+    },
+  }, 'aoi-fill');
+}
+
+function _renderGrid(spatialData) {
+  const { data, lats, lons } = spatialData;
+  const features = [];
+  for (let r = 0; r < lats.length - 1; r++) {
+    for (let c = 0; c < lons.length - 1; c++) {
+      const val = data[r][c];
+      if (val == null) continue;
+      features.push({
+        type: 'Feature',
+        geometry: {
+          type: 'Polygon',
+          coordinates: [[
+            [lons[c], lats[r]],
+            [lons[c + 1], lats[r]],
+            [lons[c + 1], lats[r + 1]],
+            [lons[c], lats[r + 1]],
+            [lons[c], lats[r]],
+          ]],
+        },
+        properties: { value: val },
+      });
+    }
+  }
+  const geojson = { type: 'FeatureCollection', features };
+  const values = features.map(f => f.properties.value);
+  const vmin = Math.min(...values);
+  const vmax = Math.max(...values);
+  const mid = (vmin + vmax) / 2;
+  const isTemp = spatialData.colormap === 'coolwarm';
+  _resultsMap.addSource('spatial-grid', { type: 'geojson', data: geojson });
+  _resultsMap.addLayer({
+    id: 'spatial-grid',
+    type: 'fill',
+    source: 'spatial-grid',
+    paint: {
+      'fill-color': [
+        'interpolate', ['linear'], ['get', 'value'],
+        vmin, isTemp ? '#3b4cc0' : '#deebf7',
+        mid, isTemp ? '#f7f7f7' : '#6baed6',
+        vmax, isTemp ? '#b40426' : '#08519c',
+      ],
+      'fill-opacity': 0.6,
+    },
+  }, 'aoi-fill');
+}
+
+function _renderStatusOverlay(status) {
+  const color = STATUS_COLORS[status] || '#1A3A34';
+  if (_resultsMap.getLayer('aoi-fill')) {
+    _resultsMap.setPaintProperty('aoi-fill', 'fill-color', color);
+    _resultsMap.setPaintProperty('aoi-fill', 'fill-opacity', 0.15);
+  }
+  if (_resultsMap.getLayer('aoi-outline')) {
+    _resultsMap.setPaintProperty('aoi-outline', 'line-color', color);
+  }
+}
+```
+
+- [ ] **Step 2: Verify the map loads**
+
+Open the app, navigate to the Define Area page. Confirm:
+- Map renders with crosshair cursor
+- No console errors about MapboxDraw
+- Basemap toggle still works
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add frontend/js/map.js
+git commit -m "feat: rewrite map.js with click-to-place AOI (no MapboxDraw)"
+```
+
+---
+
+### Task 4: Update app.js — wire size toggles, remove old handlers
+
+**Files:**
+- Modify: `frontend/js/app.js:7` (imports)
+- Modify: `frontend/js/app.js:160-265` (setupDefineArea function)
+
+- [ ] **Step 1: Update imports**
+
+In `frontend/js/app.js`, change line 7 from:
+
+```javascript
+import { initAoiMap, activateDrawRect, geocode, loadGeoJSON, initResultsMap } from './map.js';
+```
+
+to:
+
+```javascript
+import { initAoiMap, setAoiSize, geocode, initResultsMap } from './map.js';
+```
+
+- [ ] **Step 2: Rewrite setupDefineArea function**
+
+Replace the entire `setupDefineArea()` function (lines 160-266) with:
+
+```javascript
+/* Define Area ─────────────────────────────────────────────── */
+
+let _aoiMapInit = false;
+let _currentBbox = null;
+
+function setupDefineArea() {
+  updateSteps('define-area');
+
+  const continueBtn   = document.getElementById('aoi-continue-btn');
+  const geocoderInput = document.getElementById('geocoder-input');
+  const areaDisplay   = document.getElementById('aoi-area-display');
+  const sizeButtons   = document.querySelectorAll('.size-toggle-btn');
+
+  continueBtn.disabled = true;
+
+  // Size toggle buttons
+  sizeButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      sizeButtons.forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      setAoiSize(parseInt(btn.dataset.km2));
+    });
+  });
+
+  // Init map once
+  if (!_aoiMapInit) {
+    _aoiMapInit = true;
+    initAoiMap('map', (bbox) => {
+      _currentBbox = bbox;
+      if (bbox) {
+        const area = _bboxAreaKm2(bbox);
+        areaDisplay.style.display = '';
+        areaDisplay.textContent = `${Math.round(area).toLocaleString()} km²`;
+        areaDisplay.className = 'aoi-area-display';
+        continueBtn.disabled = false;
+      } else {
+        areaDisplay.style.display = 'none';
+        continueBtn.disabled = true;
+      }
+    });
+  }
+
+  // Geocoder — auto-places AOI
+  geocoderInput.addEventListener('keydown', async (e) => {
+    if (e.key !== 'Enter') return;
+    const query = geocoderInput.value.trim();
+    if (!query) return;
+    try {
+      await geocode(query);
+    } catch (err) {
+      showError('Location not found. Try a different search term.');
+    }
+  });
+
+  // Date defaults: last 12 months
+  const today = new Date();
+  const yearAgo = new Date(today);
+  yearAgo.setFullYear(today.getFullYear() - 1);
+  document.getElementById('date-start').value = _isoDate(yearAgo);
+  document.getElementById('date-end').value   = _isoDate(today);
+
+  // Season wrap hint
+  const seasonStartEl = document.getElementById('season-start');
+  const seasonEndEl = document.getElementById('season-end');
+  const wrapHint = document.getElementById('season-wrap-hint');
+  function updateWrapHint() {
+    wrapHint.style.display = (parseInt(seasonStartEl.value) > parseInt(seasonEndEl.value)) ? '' : 'none';
+  }
+  seasonStartEl.addEventListener('change', updateWrapHint);
+  seasonEndEl.addEventListener('change', updateWrapHint);
+
+  // Continue
+  continueBtn.addEventListener('click', () => {
+    const name      = document.getElementById('area-name').value.trim() || 'Unnamed area';
+    const startVal  = document.getElementById('date-start').value;
+    const endVal    = document.getElementById('date-end').value;
+
+    state.aoi = { name, bbox: _currentBbox };
+    state.timeRange = { start: startVal, end: endVal };
+    state.seasonStart = parseInt(document.getElementById('season-start').value);
+    state.seasonEnd = parseInt(document.getElementById('season-end').value);
+
+    navigate('indicators');
+  }, { once: true });
+}
+```
+
+- [ ] **Step 3: Remove unused imports from map.js**
+
+The old imports `activateDrawRect`, `loadGeoJSON` are now removed from the import line (done in step 1). Verify no other references to these functions exist in app.js:
+
+```bash
+grep -n "activateDrawRect\|loadGeoJSON\|draw-rect-btn\|geojson-upload\|upload-label\|uploadInput\|rectBtn" frontend/js/app.js
+```
+
+Expected: no matches.
+
+- [ ] **Step 4: Verify the full flow works**
+
+1. Open the app, log in, navigate to Define Area
+2. Click on the map → square AOI appears, area displays in sidebar, Continue enabled
+3. Click elsewhere → AOI moves to new location
+4. Toggle size buttons → AOI resizes around same center
+5. Type a location in search → AOI auto-places, map flies to it
+6. Click Continue → proceeds to indicators page
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add frontend/js/app.js
+git commit -m "feat: wire size toggles and click-to-place in app.js"
+```
+
+---
+
+### Task 5: Sync frontend max with backend limit
+
+**Files:**
+- Modify: `frontend/js/app.js:175` (remove old 10,000 km² constant)
+
+- [ ] **Step 1: Verify the old AOI_MAX_KM2 constant is gone**
+
+The rewritten `setupDefineArea()` in Task 4 no longer references `AOI_MAX_KM2` or the `overLimit` check. Confirm by searching:
+
+```bash
+grep -n "AOI_MAX_KM2\|overLimit\|aoi-area-over" frontend/js/app.js
+```
+
+Expected: no matches.
+
+- [ ] **Step 2: Update backend MAX_AOI_KM2 comment**
+
+In `app/config.py`, the backend limit is `MAX_AOI_KM2 = 500` and the largest preset is 500 km². No code change needed, but verify they match:
+
+```bash
+grep MAX_AOI_KM2 app/config.py
+```
+
+Expected: `MAX_AOI_KM2: int = int(os.environ.get("APERTURE_MAX_AOI_KM2", "500"))`
+
+- [ ] **Step 3: Final end-to-end check**
+
+1. Place AOI at each size (100, 250, 500)
+2. Verify area display shows correct value each time
+3. Search for "Khartoum" → AOI auto-places
+4. Toggle basemap → AOI persists
+5. Click Continue → submit a job → verify it reaches the backend without validation errors
+
+- [ ] **Step 4: Commit all remaining changes**
+
+```bash
+git add -A
+git commit -m "chore: clean up AOI click-to-place — remove unused code and verify limits"
+```