feat: add month picker to define-area sidebar and wire up season state

Adds season-start/season-end dropdowns (Jan–Dec) to the Analysis season
form-group, a year-boundary wrap hint, and surfaces the selected season in
the confirm summary and submit payload as season_start / season_end.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/index.html

@@ -241,6 +241,53 @@
         </div>
       </div>
 
+      <!-- Analysis season -->
+      <div class="form-group">
+        <label class="label">Analysis season</label>
+        <p style="font-size: var(--text-xxs); color: var(--ink-muted); margin-bottom: var(--space-3);">
+          Select the months relevant to your analysis. For year-round monitoring, leave as Jan–Dec.
+        </p>
+        <div class="date-row">
+          <div>
+            <label class="label" for="season-start" style="font-size: var(--text-xxs);">Start month</label>
+            <select id="season-start" class="input">
+              <option value="1" selected>January</option>
+              <option value="2">February</option>
+              <option value="3">March</option>
+              <option value="4">April</option>
+              <option value="5">May</option>
+              <option value="6">June</option>
+              <option value="7">July</option>
+              <option value="8">August</option>
+              <option value="9">September</option>
+              <option value="10">October</option>
+              <option value="11">November</option>
+              <option value="12">December</option>
+            </select>
+          </div>
+          <div>
+            <label class="label" for="season-end" style="font-size: var(--text-xxs);">End month</label>
+            <select id="season-end" class="input">
+              <option value="1">January</option>
+              <option value="2">February</option>
+              <option value="3">March</option>
+              <option value="4">April</option>
+              <option value="5">May</option>
+              <option value="6">June</option>
+              <option value="7">July</option>
+              <option value="8">August</option>
+              <option value="9">September</option>
+              <option value="10">October</option>
+              <option value="11">November</option>
+              <option value="12" selected>December</option>
+            </select>
+          </div>
+        </div>
+        <p id="season-wrap-hint" style="font-size: var(--text-xxs); color: var(--iris); margin-top: var(--space-2); display: none;">
+          ↻ Season crosses year boundary
+        </p>
+      </div>
+
     </div><!-- /sidebar-body -->
 
     <div class="map-sidebar-footer">
@@ -343,6 +390,10 @@
           <span id="confirm-period-end">—</span>
         </span>
       </div>
+      <div class="confirm-row">
+        <span class="confirm-row-label">Season</span>
+        <span id="confirm-season" class="confirm-row-value">January – December</span>
+      </div>
       <div class="confirm-row">
         <span class="confirm-row-label">Indicators</span>
         <span id="confirm-indicators" class="confirm-row-value">0</span>

frontend/js/app.js

@@ -14,6 +14,8 @@ const state = {
   session: null,    // { email, token }
   aoi: null,        // { name, bbox }
   timeRange: null,  // { start, end }
+  seasonStart: 1,   // 1-12
+  seasonEnd: 12,    // 1-12
   indicators: [],   // string[]
   jobId: null,      // string
   jobData: null,    // full job response
@@ -238,6 +240,16 @@ function setupDefineArea() {
   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';
@@ -246,6 +258,8 @@ function setupDefineArea() {
 
     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 });
@@ -285,6 +299,10 @@ function setupConfirm() {
   document.getElementById('confirm-period-end').textContent   = state.timeRange?.end   || '—';
   document.getElementById('confirm-indicators').textContent   = state.indicators.length;
 
+  const monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+  const seasonText = `${monthNames[state.seasonStart - 1]} – ${monthNames[state.seasonEnd - 1]}`;
+  document.getElementById('confirm-season').textContent = seasonText;
+
   // Auto-fill email from session
   const emailInput = document.getElementById('confirm-email');
   if (state.session && state.session.email) {
@@ -315,6 +333,8 @@ function setupConfirm() {
       },
       indicator_ids: state.indicators,
       email,
+      season_start: state.seasonStart,
+      season_end: state.seasonEnd,
     };
 
     try {