Enhance camera control features and UI in app.js, index.html, and style.css

- Added support for dual camera configurations with corresponding FOV and offset controls in index.html.
- Implemented new functions in app.js to manage camera settings and synchronization.
- Updated styles in style.css to improve layout and usability of camera controls, including new button designs and responsive adjustments.
- Enhanced pan mode options with visual indicators and improved user feedback for camera settings.

app.js

@@ -37,8 +37,11 @@
   var zonesG = null
 
   var dynamicCamG = null
+  var rearCamG = null
   var coneEl = null
+  var coneRearEl = null
   var camPointer = null
+  var camPointerRear = null
   var camDot = null
   var camCorners = []
   var boatG = null
@@ -99,10 +102,11 @@
   var inpBackSpeed = null
   var inpFrontArc = null
   var inpBoatSpeed = null
+  var inpFov2 = null
+  var inpCam2Offset = null
 
-  var cachedConeFov = NaN
-  var cachedConeR = NaN
-  var cachedPtrLen = NaN
+  /** Invalidated when FOV / camera count / scale changes cone geometry. */
+  var cachedConeGeomKey = ''
 
   var lastDrawBx = NaN
   var lastDrawBy = NaN
@@ -228,17 +232,25 @@
 
   function syncConeAndPointerShape(p) {
     if (!coneEl || SCALE === 0) return
-    var fov = p ? p.fov : +inpFov.value
+    var q = p || getParams()
+    var fov1 = q.fov
+    var fov2 = q.fov2
+    var two = q.twoCam
     var R = coneRadiusWorld()
     var ptrLen = 32 / SCALE
-    if (fov === cachedConeFov && Math.abs(R - cachedConeR) < 1e-6 && Math.abs(ptrLen - cachedPtrLen) < 1e-12) return
-    cachedConeFov = fov
-    cachedConeR = R
-    cachedPtrLen = ptrLen
-    var half = fov / 2
-    coneEl.setAttribute('d', sectorPath(-half, half, R, 22))
+    var key = [fov1, fov2, two ? 1 : 0, R.toFixed(8), ptrLen.toExponential(10)].join('|')
+    if (key === cachedConeGeomKey) return
+    cachedConeGeomKey = key
+    var half1 = fov1 / 2
+    coneEl.setAttribute('d', sectorPath(-half1, half1, R, 22))
     camPointer.setAttribute('x2', 0)
     camPointer.setAttribute('y2', ptrLen)
+    if (coneRearEl && camPointerRear) {
+      var half2 = fov2 / 2
+      coneRearEl.setAttribute('d', sectorPath(-half2, half2, R, 22))
+      camPointerRear.setAttribute('x2', 0)
+      camPointerRear.setAttribute('y2', ptrLen)
+    }
   }
 
   function syncThemedSceneStrokes() {
@@ -246,6 +258,7 @@
     coneEl.setAttribute('fill', rgba(C.pr, 0.12))
     coneEl.setAttribute('stroke', rgba(C.pr, 0.6))
     camPointer.setAttribute('stroke', rgba(C.pr, 0.9))
+    /* Secondary FOV colors updated per frame in draw() for current layout. */
     camDot.setAttribute('fill', C.p)
     camDot.setAttribute('stroke', rgba(C.pr, 0.5))
     trajLine.setAttribute('stroke', rgba(C.dr, 0.25))
@@ -331,8 +344,10 @@
     var frontArc = +inpFrontArc.value
     var fh = frontArc / 2
     var R = zoneFillRadiusWorld()
+    var oscillate = isOscillatePan()
     zonesG.appendChild(svgEl('path', { d: sectorPath(-fh, fh, R), fill: rgba(C.pr, 0.07), stroke: 'none' }))
-    zonesG.appendChild(svgEl('path', { d: sectorPath(fh, 360 - fh, R), fill: rgba(C.dr, 0.06), stroke: 'none' }))
+    var backFill = oscillate ? rgba(C.dr, 0.022) : rgba(C.dr, 0.06)
+    zonesG.appendChild(svgEl('path', { d: sectorPath(fh, 360 - fh, R), fill: backFill, stroke: 'none' }))
     var e1r = (-fh) * Math.PI / 180
     var e2r = fh * Math.PI / 180
     zonesG.appendChild(buildLineZone(0, 0, Math.sin(e1r) * R, Math.cos(e1r) * R))
@@ -345,7 +360,9 @@
     zonesG.appendChild(tf)
     var tb = svgEl('text', { x: 0, y: 18 * MAP_LABEL_SCALE / SCALE, transform: 'scale(1,-1)',
       fill: C.dc, 'font-size': fs, 'font-family': FONT_SANS, 'text-anchor': 'middle' })
-    tb.textContent = 'BACK ' + (360 - frontArc) + '\u00b0'
+    tb.textContent = oscillate
+      ? ('OUTSIDE SWEEP ' + (360 - frontArc) + '\u00b0')
+      : ('BACK ' + (360 - frontArc) + '\u00b0')
     zonesG.appendChild(tb)
     var edgeTxt = '\u00b1' + fh.toFixed(0) + '\u00b0'
     for (var ei = 0; ei < 2; ei++) {
@@ -493,13 +510,113 @@
     updateZoomLabel()
   }
 
+  function isTwoCam() {
+    var el = document.querySelector('input[name="camera-count"]:checked')
+    return !!(el && el.value === '2')
+  }
+
+  function isOscillatePan() {
+    var el = document.querySelector('input[name="pan-mode"]:checked')
+    return !!(el && el.value === 'oscillate')
+  }
+
+  function normHeading180(deg) {
+    var h = ((deg % 360) + 360) % 360
+    if (h > 180) h -= 360
+    return h
+  }
+
+  /** In Front arc pan mode with two cameras: headings where both boresights lie in the front sector. */
+  function oscillationHeadingBounds(p) {
+    var fh = p.frontArc / 2
+    if (!p.panOscillate || !p.twoCam) return { lo: -fh, hi: fh }
+    var off = p.cam2Offset
+    var n = Math.max(120, Math.ceil(4 * fh))
+    var runs = []
+    var s = -1
+    for (var i = 0; i <= n; i++) {
+      var t = -fh + (2 * fh) * (i / n)
+      var ok = Math.abs(normHeading180(t)) <= fh + 1e-9 && Math.abs(normHeading180(t + off)) <= fh + 1e-9
+      if (ok && s < 0) s = i
+      if (!ok && s >= 0) {
+        runs.push({
+          lo: -fh + (2 * fh) * (s / n),
+          hi: -fh + (2 * fh) * ((i - 1) / n),
+        })
+        s = -1
+      }
+    }
+    if (s >= 0) runs.push({ lo: -fh + (2 * fh) * (s / n), hi: fh })
+    if (!runs.length) return { lo: -fh, hi: fh }
+    var h = normHeading180(camHeading)
+    var pick = null
+    for (var r = 0; r < runs.length; r++) {
+      if (h >= runs[r].lo - 1e-6 && h <= runs[r].hi + 1e-6) { pick = runs[r]; break }
+    }
+    if (!pick) {
+      pick = runs[0]
+      for (var r2 = 1; r2 < runs.length; r2++) {
+        if (runs[r2].hi - runs[r2].lo > pick.hi - pick.lo) pick = runs[r2]
+      }
+    }
+    return { lo: pick.lo, hi: pick.hi }
+  }
+
+  function clampHeadingToFrontArcIfOscillating() {
+    if (!isOscillatePan() || !inpFrontArc) return
+    var p = getParams()
+    var b = oscillationHeadingBounds(p)
+    if (camHeading > b.hi) camHeading = b.hi
+    if (camHeading < b.lo) camHeading = b.lo
+  }
+
+  function syncPanModeUi() {
+    var labels = document.querySelectorAll('.pan-mode-btn')
+    for (var i = 0; i < labels.length; i++) {
+      var inp = labels[i].querySelector('input[name="pan-mode"]')
+      labels[i].classList.toggle('cam-layout-btn--active', !!(inp && inp.checked))
+    }
+    var backWrap = $('ctrl-back-speed')
+    var backInp = $('input-back-speed')
+    var osc = isOscillatePan()
+    if (backWrap) backWrap.classList.toggle('ctrl--muted', osc)
+    if (backInp) {
+      backInp.disabled = osc
+      backInp.setAttribute('aria-disabled', osc ? 'true' : 'false')
+    }
+    buildZones()
+  }
+
+  function syncCameraCountUi() {
+    var labels = document.querySelectorAll('.cam-count-btn')
+    for (var i = 0; i < labels.length; i++) {
+      var inp = labels[i].querySelector('input[name="camera-count"]')
+      labels[i].classList.toggle('cam-layout-btn--active', !!(inp && inp.checked))
+    }
+    var two = isTwoCam()
+    var row2 = $('camera-panel-cam2-row')
+    if (row2) row2.classList.toggle('camera-panel__row--muted', !two)
+    if (inpFov2) {
+      inpFov2.disabled = !two
+      inpFov2.setAttribute('aria-disabled', two ? 'false' : 'true')
+    }
+    if (inpCam2Offset) {
+      inpCam2Offset.disabled = !two
+      inpCam2Offset.setAttribute('aria-disabled', two ? 'false' : 'true')
+    }
+  }
+
   function getParams() {
     return {
       fov: +inpFov.value,
+      fov2: inpFov2 ? +inpFov2.value : 18,
+      cam2Offset: inpCam2Offset ? +inpCam2Offset.value : 180,
+      twoCam: isTwoCam(),
       frontSpeed: +inpFrontSpeed.value,
       backSpeed: +inpBackSpeed.value,
       frontArc: +inpFrontArc.value,
       boatSpeed: +inpBoatSpeed.value,
+      panOscillate: isOscillatePan(),
     }
   }
 
@@ -512,9 +629,7 @@
   }
 
   function isFront(heading, arc) {
-    var h = ((heading % 360) + 360) % 360
-    if (h > 180) h -= 360
-    return Math.abs(h) <= arc / 2
+    return Math.abs(normHeading180(heading)) <= arc / 2
   }
 
   function setDir(d) {
@@ -525,11 +640,17 @@
     if (ccw) ccw.classList.toggle('active', d === -1)
   }
 
-  function isBoatVisible(bx, by, heading, fovVal) {
+  function isBoatVisible(bx, by, heading, p) {
+    if (by <= -0.05) return false
     var boatB = (Math.atan2(bx, by) * 180) / Math.PI
-    /* Cone uses rotate(heading) inside worldG scale(S,-S); boresight world bearing = -heading in this atan2 convention. */
-    var rel = (((boatB + heading + 540) % 360) - 180)
-    return Math.abs(rel) <= fovVal / 2 && by > -0.05
+    function inCone(hDeg, halfFovDeg) {
+      /* Cone uses rotate(hDeg) inside worldG scale(S,-S); match camera visibility. */
+      var rel = (((boatB + hDeg + 540) % 360) - 180)
+      return Math.abs(rel) <= halfFovDeg
+    }
+    if (inCone(heading, p.fov / 2)) return true
+    if (p.twoCam && inCone(heading + p.cam2Offset, p.fov2 / 2)) return true
+    return false
   }
 
   function draw(p, bx, by, inFov) {
@@ -541,6 +662,16 @@
     updateTrackSvgGeomIfNeeded()
     syncConeAndPointerShape(p)
     dynamicCamG.setAttribute('transform', 'rotate(' + camHeading + ')')
+    if (rearCamG && coneRearEl && camPointerRear) {
+      if (!p.twoCam) rearCamG.setAttribute('display', 'none')
+      else {
+        rearCamG.removeAttribute('display')
+        rearCamG.setAttribute('transform', 'rotate(' + (camHeading + p.cam2Offset) + ')')
+        coneRearEl.setAttribute('fill', rgba(C.wr, 0.1))
+        coneRearEl.setAttribute('stroke', rgba(C.wr, 0.55))
+        camPointerRear.setAttribute('stroke', rgba(C.wr, 0.85))
+      }
+    }
 
     var segX = boatEnd.x - boatStart.x
     var segY = boatEnd.y - boatStart.y
@@ -587,7 +718,9 @@
   function updateStats(p, bx, by, inFov) {
     var c = statCache
     var dist = Math.hypot(bx, by)
-    var st = p.frontArc / p.frontSpeed + (360 - p.frontArc) / p.backSpeed
+    var st = p.panOscillate
+      ? (2 * p.frontArc / p.frontSpeed)
+      : (p.frontArc / p.frontSpeed + (360 - p.frontArc) / p.backSpeed)
 
     function u(el, k, s) {
       if (el && c[k] !== s) { el.textContent = s; c[k] = s }
@@ -649,13 +782,25 @@
       if (boatT >= 1) { boatT = 1; boatDir = -1 }
       if (boatT <= 0) { boatT = 0; boatDir = 1 }
     }
-    var speed = isFront(camHeading, p.frontArc) ? p.frontSpeed : p.backSpeed
-    camHeading -= camDir * speed * dt
-    if (camHeading >= 180) camHeading -= 360
-    if (camHeading < -180) camHeading += 360
+    if (p.panOscillate) {
+      var ob = oscillationHeadingBounds(p)
+      camHeading -= camDir * p.frontSpeed * dt
+      if (camHeading > ob.hi) {
+        camHeading = ob.hi
+        camDir = 1
+      } else if (camHeading < ob.lo) {
+        camHeading = ob.lo
+        camDir = -1
+      }
+    } else {
+      var speed = isFront(camHeading, p.frontArc) ? p.frontSpeed : p.backSpeed
+      camHeading -= camDir * speed * dt
+      if (camHeading >= 180) camHeading -= 360
+      if (camHeading < -180) camHeading += 360
+    }
     var bx = boatStart.x + (boatEnd.x - boatStart.x) * boatT
     var by = boatStart.y + (boatEnd.y - boatStart.y) * boatT
-    var visible = isBoatVisible(bx, by, camHeading, p.fov)
+    var visible = isBoatVisible(bx, by, camHeading, p)
     var distThisFrame = p.boatSpeed * 0.514 * dt
     if (coneEl && SCALE > 0 && pathLen > 0.001 && !visible) appendTrail(bx, by)
 
@@ -797,11 +942,40 @@
     sync()
   }
 
-  /** VOS #1 = shipped defaults; proposal #2 uses 50° FOV (slider is degrees, not a zoom %). */
+  /**
+   * Presets: twoCam, panMode full360|oscillate, fov / fov2 / cam2Offset, front arc, speeds.
+   * Front arc and speeds are degrees; FOVs are degrees (slider scale).
+   */
   var CAMERA_PRESETS = {
-    vos1:  { fov: 18, frontSpeed: 6, backSpeed: 60, frontArc: 180 },
-    prop1: { fov: 18, frontSpeed: 7, backSpeed: 120, frontArc: 125 },
-    prop2: { fov: 50, frontSpeed: 8, backSpeed: 120, frontArc: 125 },
+    vos1: {
+      twoCam: false,
+      fov: 18, fov2: 18, cam2Offset: 180,
+      frontArc: 180, panMode: 'full360',
+      backSpeed: 60, frontSpeed: 6,
+    },
+    prop1: {
+      twoCam: false,
+      fov: 18, fov2: 18, cam2Offset: 180,
+      frontArc: 160, panMode: 'full360',
+      backSpeed: 120, frontSpeed: 7,
+    },
+    prop2: {
+      twoCam: true,
+      fov: 18, fov2: 50, cam2Offset: 0,
+      frontArc: 150, panMode: 'full360',
+      backSpeed: 120, frontSpeed: 8,
+    },
+    prop3: {
+      twoCam: true,
+      fov: 18, fov2: 18, cam2Offset: 90,
+      frontArc: 180, panMode: 'oscillate',
+      backSpeed: 120, frontSpeed: 7,
+    },
+  }
+
+  function setRadioChecked(name, value) {
+    var el = document.querySelector('input[name="' + name + '"][value="' + value + '"]')
+    if (el) el.checked = true
   }
 
   function clearPresetDropdown() {
@@ -812,15 +986,31 @@
   function applyCameraPreset(key) {
     var p = CAMERA_PRESETS[key]
     if (!p || !inpFov) return
+
     inpFov.value = String(p.fov)
+    if (inpFov2) inpFov2.value = String(p.fov2)
+    if (inpCam2Offset) inpCam2Offset.value = String(p.cam2Offset)
     inpFrontSpeed.value = String(p.frontSpeed)
     inpBackSpeed.value = String(p.backSpeed)
     inpFrontArc.value = String(p.frontArc)
+
+    setRadioChecked('camera-count', p.twoCam ? '2' : '1')
+    setRadioChecked('pan-mode', p.panMode === 'oscillate' ? 'oscillate' : 'full360')
+
+    syncCameraCountUi()
+    syncPanModeUi()
+
     $('val-fov').textContent = inpFov.value
+    var vf2 = $('val-fov-2')
+    if (vf2 && inpFov2) vf2.textContent = inpFov2.value
+    var vo = $('val-cam2-offset')
+    if (vo && inpCam2Offset) vo.textContent = inpCam2Offset.value
     $('val-front-speed').textContent = inpFrontSpeed.value
     $('val-back-speed').textContent = inpBackSpeed.value
     $('val-front-arc').textContent = inpFrontArc.value
-    cachedConeFov = cachedPtrLen = NaN
+
+    cachedConeGeomKey = ''
+    clampHeadingToFrontArcIfOscillating()
     resetStreaks()
     buildZones()
     var sel = $('camera-preset')
@@ -843,6 +1033,12 @@
     worldG.appendChild(zonesG)
     worldG.appendChild(ringsG)
 
+    rearCamG = svgEl('g', { id: 'dynamic-cam-rear', display: 'none' })
+    coneRearEl = svgEl('path', { 'stroke-linejoin': 'round', 'stroke-width': 1, 'vector-effect': 'non-scaling-stroke' })
+    camPointerRear = svgEl('line', { x1: 0, y1: 0, x2: 0, y2: 0.1, 'stroke-width': 1.5, 'vector-effect': 'non-scaling-stroke' })
+    rearCamG.appendChild(coneRearEl)
+    rearCamG.appendChild(camPointerRear)
+
     dynamicCamG = svgEl('g', { id: 'dynamic-cam' })
     coneEl = svgEl('path', { 'stroke-linejoin': 'round', 'stroke-width': 1, 'vector-effect': 'non-scaling-stroke' })
     camPointer = svgEl('line', { x1: 0, y1: 0, x2: 0, y2: 0.1, 'stroke-width': 1.5, 'vector-effect': 'non-scaling-stroke' })
@@ -889,6 +1085,7 @@
     camDot = svgEl('circle', { cx: 0, cy: 0, 'stroke-width': 1.5, 'vector-effect': 'non-scaling-stroke' })
     for (var ci = 0; ci < 4; ci++) camCorners.push(svgEl('line', { 'stroke-width': 1, 'vector-effect': 'non-scaling-stroke' }))
 
+    worldG.appendChild(rearCamG)
     worldG.appendChild(dynamicCamG)
     worldG.appendChild(trajLine)
     worldG.appendChild(boatTrail)
@@ -913,7 +1110,9 @@
     inpBackSpeed = $('input-back-speed')
     inpFrontArc = $('input-front-arc')
     inpBoatSpeed = $('input-boat-speed')
-    cachedConeFov = cachedConeR = cachedPtrLen = NaN
+    inpFov2 = $('input-fov-2')
+    inpCam2Offset = $('input-cam2-offset')
+    cachedConeGeomKey = ''
     lastDrawBx = lastDrawBy = NaN
 
     initTheme()
@@ -940,7 +1139,7 @@
     $('dir-cw').addEventListener('click', function () { setDir(1) })
     $('dir-ccw').addEventListener('click', function () { setDir(-1) })
     bindRange('input-fov', 'val-fov', function () {
-      cachedConeFov = cachedPtrLen = NaN
+      cachedConeGeomKey = ''
       clearPresetDropdown()
     })
     bindRange('input-front-speed', 'val-front-speed', clearPresetDropdown)
@@ -948,8 +1147,40 @@
     bindRange('input-front-arc', 'val-front-arc', function () {
       clearPresetDropdown()
       buildZones()
+      clampHeadingToFrontArcIfOscillating()
     })
     bindRange('input-boat-speed', 'val-boat-speed')
+    bindRange('input-fov-2', 'val-fov-2', function () {
+      cachedConeGeomKey = ''
+      clearPresetDropdown()
+    })
+    bindRange('input-cam2-offset', 'val-cam2-offset', function () {
+      cachedConeGeomKey = ''
+      clearPresetDropdown()
+      clampHeadingToFrontArcIfOscillating()
+    })
+
+    var countRadios = document.querySelectorAll('input[name="camera-count"]')
+    syncCameraCountUi()
+    for (var lr = 0; lr < countRadios.length; lr++) {
+      countRadios[lr].addEventListener('change', function () {
+        syncCameraCountUi()
+        clampHeadingToFrontArcIfOscillating()
+        resetStreaks()
+        cachedConeGeomKey = ''
+      })
+    }
+
+    var panRadios = document.querySelectorAll('input[name="pan-mode"]')
+    syncPanModeUi()
+    for (var pr = 0; pr < panRadios.length; pr++) {
+      panRadios[pr].addEventListener('change', function () {
+        syncPanModeUi()
+        clampHeadingToFrontArcIfOscillating()
+        resetStreaks()
+        cachedConeGeomKey = ''
+      })
+    }
 
     var presetSelect = $('camera-preset')
     if (presetSelect) {

index.html

@@ -66,7 +66,7 @@
           <div class="section-title">Status</div>
           <div class="stats-grid">
             <div class="stat">
-              <div class="lbl">Scan time</div>
+              <div class="lbl" id="st-scan-lbl" title="Full 360°: time for one rotation at current front/back speeds. Front arc only: time for an out-and-back sweep within the front sector.">Scan time</div>
               <div id="st-scan" class="val">—</div>
             </div>
             <div class="stat">
@@ -108,26 +108,80 @@
               <label for="camera-preset">Presets</label>
               <select id="camera-preset" class="preset-select" aria-label="Apply a camera preset">
                 <option value="" selected>—</option>
-                <option value="vos1">VOS #1 (default)</option>
+                <option value="vos1">VOS #1</option>
                 <option value="prop1">Proposal #1</option>
                 <option value="prop2">Proposal #2</option>
+                <option value="prop3">Proposal #3</option>
               </select>
             </div>
             <div class="ctrl">
-              <label for="input-fov">FOV <span id="val-fov">18</span>°</label>
-              <input id="input-fov" type="range" min="5" max="90" step="1" value="18" />
+              <label id="camera-count-label" class="cam-layout-label">Rig cameras</label>
+              <div class="cam-layout-bar" role="radiogroup" aria-labelledby="camera-count-label">
+                <label class="cam-layout-btn cam-count-btn" title="One camera on the panning rig">
+                  <input type="radio" name="camera-count" value="1" checked />
+                  <span class="cam-layout-btn__text">1 camera</span>
+                </label>
+                <label class="cam-layout-btn cam-count-btn" title="Two cameras; same pan, offset boresight">
+                  <input type="radio" name="camera-count" value="2" />
+                  <span class="cam-layout-btn__text">2 cameras</span>
+                </label>
+              </div>
+              <p class="toggle-hint">Same rig rotation (front / back arc speeds). Coverage = union of camera FOVs.</p>
+            </div>
+            <div class="camera-panel" aria-label="Camera fields of view and mounting offset">
+              <div class="camera-panel__title">Camera heads</div>
+              <div class="camera-panel__row camera-panel__row--ref">
+                <span class="camera-panel__badge" title="Reference boresight for pan">1</span>
+                <div class="camera-panel__stem">
+                  <div class="camera-panel__field camera-panel__field--cam1-fov">
+                    <label for="input-fov">Cam 1 FOV <span id="val-fov">18</span>°</label>
+                    <input id="input-fov" type="range" min="5" max="90" step="1" value="18" aria-label="Camera 1 field of view in degrees" />
+                  </div>
+                  <div class="camera-panel__field camera-panel__field--reference">
+                    <span class="camera-panel__ref-label">Offset from cam 1</span>
+                    <span class="camera-panel__ref-val" aria-label="Camera 1 offset, fixed reference">0°</span>
+                  </div>
+                </div>
+              </div>
+              <div class="camera-panel__row" id="camera-panel-cam2-row">
+                <span class="camera-panel__badge" title="Second camera boresight">2</span>
+                <div class="camera-panel__stem">
+                  <div class="camera-panel__field">
+                    <label for="input-fov-2">Cam 2 FOV <span id="val-fov-2">18</span>°</label>
+                    <input id="input-fov-2" type="range" min="5" max="90" step="1" value="18" aria-label="Camera 2 field of view in degrees" />
+                  </div>
+                  <div class="camera-panel__field">
+                    <label for="input-cam2-offset">Offset from cam 1 <span id="val-cam2-offset">180</span>°</label>
+                    <input id="input-cam2-offset" type="range" min="0" max="360" step="1" value="180" aria-label="bearing offset of camera 2 from camera 1 in degrees" />
+                  </div>
+                </div>
+              </div>
             </div>
             <div class="ctrl">
-              <label for="input-front-speed">Front speed <span id="val-front-speed">6</span>°/s</label>
-              <input id="input-front-speed" type="range" min="1" max="30" step="1" value="6" />
+              <label for="input-front-arc">Front arc <span id="val-front-arc">180</span>°</label>
+              <input id="input-front-arc" type="range" min="10" max="350" step="5" value="180" />
             </div>
             <div class="ctrl">
-              <label for="input-back-speed">Back speed <span id="val-back-speed">60</span>°/s</label>
-              <input id="input-back-speed" type="range" min="5" max="180" step="5" value="60" />
+              <label id="pan-mode-label" class="cam-layout-label">Pan mode</label>
+              <div class="cam-layout-bar" role="radiogroup" aria-labelledby="pan-mode-label">
+                <label class="cam-layout-btn pan-mode-btn" title="Continuous 360° rotation: slower in the front sector, faster in the back sector (back speed).">
+                  <input type="radio" name="pan-mode" value="full360" checked />
+                  <span class="cam-layout-btn__text">360° sweep</span>
+                </label>
+                <label class="cam-layout-btn pan-mode-btn" title="Stay inside the front arc: reverses at the sector edges. Uses front speed only.">
+                  <input type="radio" name="pan-mode" value="oscillate" />
+                  <span class="cam-layout-btn__text">Front arc</span>
+                </label>
+              </div>
+              <p class="toggle-hint">CW / CCW flips direction; in Front arc mode the rig reverses at sector limits. With 2 cameras, limits keep both boresights inside the front sector when possible.</p>
             </div>
             <div class="ctrl">
-              <label for="input-front-arc">Front arc <span id="val-front-arc">180</span>°</label>
-              <input id="input-front-arc" type="range" min="10" max="350" step="5" value="180" />
+              <label for="input-front-speed">Front speed <span id="val-front-speed">6</span>°/s</label>
+              <input id="input-front-speed" type="range" min="1" max="30" step="1" value="6" />
+            </div>
+            <div id="ctrl-back-speed" class="ctrl">
+              <label for="input-back-speed">Back speed <span id="val-back-speed">60</span>°/s</label>
+              <input id="input-back-speed" type="range" min="5" max="180" step="1" value="60" aria-label="Back sector rotation speed, degrees per second" />
             </div>
           </div>
         </div>

style.css

@@ -400,6 +400,220 @@ body {
   font-weight: 400;
 }
 
+.cam-layout-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--content-lo);
+  margin-bottom: var(--sp-xs);
+  text-transform: uppercase;
+}
+
+.cam-layout-bar {
+  display: flex;
+  gap: 1px;
+  background: var(--surface-4);
+  border-radius: var(--radious-s);
+  padding: 2px;
+}
+
+.cam-layout-btn {
+  flex: 1 1 0;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 44px;
+  padding: var(--sp-xs) 4px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  cursor: pointer;
+  font-family: var(--font);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  line-height: 1.15;
+  text-transform: uppercase;
+  color: var(--content-lo);
+  transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+}
+
+.cam-layout-btn:hover {
+  color: var(--content-hi);
+}
+
+.cam-layout-btn input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  pointer-events: none;
+}
+
+.cam-layout-btn__text {
+  pointer-events: none;
+  display: block;
+  width: 100%;
+  text-align: center;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/* .ctrl label { justify-content: space-between; font-size: 14px } must not apply to segmented bar buttons */
+.ctrl .cam-layout-bar .cam-layout-btn {
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.ctrl .cam-layout-bar .cam-layout-btn .cam-layout-btn__text {
+  flex: 0 1 auto;
+}
+
+.cam-layout-btn--active {
+  background: var(--primary-dim);
+  border-color: var(--primary);
+  color: var(--primary-content);
+}
+
+.toggle-hint {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.45;
+  color: var(--content-lo);
+  text-transform: none;
+}
+
+.cam-layout-bar + .toggle-hint {
+  margin-top: var(--sp-s);
+}
+
+/* Camera heads — fixed layout; row 2 dims when 1 camera selected */
+.camera-panel {
+  margin-bottom: var(--sp-m);
+  padding: var(--sp-m);
+  background: var(--surface-3);
+  border-radius: var(--radious-m);
+  border: var(--stroke);
+}
+
+.camera-panel__title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--content-lo);
+  margin: 0 0 var(--sp-m) 0;
+  text-transform: uppercase;
+}
+
+.camera-panel__row {
+  display: flex;
+  gap: var(--sp-s);
+  align-items: flex-start;
+  margin-bottom: var(--sp-m);
+}
+
+.camera-panel__row:last-child {
+  margin-bottom: 0;
+}
+
+.camera-panel__badge {
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  margin-top: 22px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+  background: var(--surface-4);
+  color: var(--content-mid);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.coastal-surveillance-sim[data-theme='light'] .camera-panel__badge {
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.camera-panel__stem {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-s);
+}
+
+.camera-panel__field label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--content-lo);
+  margin-bottom: var(--sp-xs);
+  text-transform: uppercase;
+}
+
+.camera-panel__row--ref .camera-panel__field--cam1-fov label {
+  color: var(--content-mid);
+}
+
+.camera-panel__field--reference {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--sp-s) var(--sp-m);
+  background: var(--surface-4);
+  border-radius: var(--radious-s);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.coastal-surveillance-sim[data-theme='light'] .camera-panel__field--reference {
+  border-color: rgba(0, 0, 0, 0.08);
+}
+
+.camera-panel__ref-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--content-lo);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.camera-panel__ref-val {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--content-mid);
+}
+
+.camera-panel__row--muted {
+  opacity: 0.48;
+  pointer-events: none;
+}
+
+.camera-panel__row--muted label {
+  color: var(--content-lo);
+}
+
+.ctrl--muted {
+  opacity: 0.48;
+  pointer-events: none;
+}
+
+.ctrl--muted label {
+  color: var(--content-lo);
+}
+
 /* Range slider */
 input[type='range'] {
   width: 100%;