feat: web UI zone mode selector with preset dropdown

static/app.js

@@ -27,6 +27,10 @@
   var existingSection = document.getElementById('existing-videos-section');
   var videoList = document.getElementById('video-list');
   var selectedExistingVideo = null;
+  var zoneSection = document.getElementById('zone-section');
+  var zoneFixedConfig = document.getElementById('zone-fixed-config');
+  var zonePresetSelect = document.getElementById('zone-preset-select');
+  var zoneRadios = document.querySelectorAll('input[name="zone_mode"]');
 
   /* ------------------------------------------------
      Upload Zone — click, drag-drop, keyboard
@@ -115,6 +119,7 @@
     reader.readAsDataURL(file);
 
     updateSubmitState();
+    showZoneSection();
   }
 
   function formatBytes(bytes) {
@@ -229,6 +234,7 @@
               // Hide upload zone, clear file input
               fileInput.value = '';
               previewWrap.classList.remove('visible');
+              showZoneSection();
             } else {
               selectedExistingVideo = null;
               videoPathInput.value = '';
@@ -266,6 +272,47 @@
       .catch(function () {});
   }
 
+  /* ------------------------------------------------
+     Zone Mode — show/hide, fetch presets
+  ------------------------------------------------ */
+  function showZoneSection() {
+    if (zoneSection) zoneSection.style.display = '';
+  }
+
+  function initZoneMode() {
+    if (!zoneSection) return;
+
+    // Fetch presets from API
+    fetch('/api/zones')
+      .then(function (res) { return res.json(); })
+      .then(function (presets) {
+        if (!presets || presets.length === 0) {
+          var fixedRadio = zoneSection.querySelector('input[value="fixed"]');
+          if (fixedRadio) fixedRadio.closest('label').style.display = 'none';
+          return;
+        }
+        zonePresetSelect.innerHTML = '';
+        presets.forEach(function (p) {
+          var opt = document.createElement('option');
+          opt.value = p.name;
+          opt.textContent = p.name + (p.description ? ' — ' + p.description : '');
+          zonePresetSelect.appendChild(opt);
+        });
+      })
+      .catch(function () {});
+
+    zoneRadios.forEach(function (radio) {
+      radio.addEventListener('change', function () {
+        var isFixed = zoneSection.querySelector('input[value="fixed"]').checked;
+        if (isFixed) {
+          zoneFixedConfig.classList.add('visible');
+        } else {
+          zoneFixedConfig.classList.remove('visible');
+        }
+      });
+    });
+  }
+
   /* ------------------------------------------------
      Submit — enable/disable, loading state
   ------------------------------------------------ */
@@ -310,6 +357,7 @@
   initUploadZone();
   initModelCards();
   initFormSubmit();
+  initZoneMode();
   loadExistingVideos();
 
   // Poll active jobs