diff --git a/README.md b/README.md
index 23cc014..389ee36 100644
--- a/README.md
+++ b/README.md
@@ -4,89 +4,224 @@ This project lets you capture LED positions from a camera, adjust the layout, an
 
 ![showcase](https://github.com/user-attachments/assets/01fee45c-910b-40fe-9166-78a9f6adf9c2)
 
-(randomly dropped lights on floor)
+(randomly dropped lights on the floor)
+
+---
+
+## ✨ New Features
+
+* **Completely redesigned UI**
+* **Smooth live webcam feed** (also visible during scanning)
+* **Webcam mask overlay** to visualize brightness threshold detection
+* **Automatic brightness calibration** (sets a usable default automatically)
+* **Improved camera handling**
+
+  * Prevents crashes if the camera is already in use
+* **Manual LED placement**
+
+  * Click directly on the camera image if detection fails
+* **Live parameter updates**
+
+  * Adjust settings while mapping is running
+* **WLED recovery system**
+
+  * Automatically pauses if the connection is lost
+  * Resume mapping without restarting
+
+---
 
 ## Prerequisites
-- Python 3.10+
-- Camera accessible to the host machine
-- WLED controller reachable via HTTP on your network
+
+* Python 3.10+
+* Camera accessible to the host machine
+* WLED controller reachable via HTTP on your network
+
+---
 
 ## Setup
+
 ```bash
 python -m venv .venv
 .venv\\Scripts\\activate  # on Windows
 pip install -r requirements.txt
 ```
 
+---
+
 ## Running the app
+
 ```bash
 python server.py
 ```
-Open `http://localhost:8000/` in your browser. The UI provides:
-- Mapping controls (WLED host, LED count, segment, camera index, frames, brightness, skip-dim toggle)
-- Timing controls (prelight/capture/postlight delays) and WLED transition (`TT` in ms)
-- Live progress display while mapping runs
-- Grid preview & camera scatter plot
-- Buttons to generate/download `ledmap.json` and `2d-gaps.json` (client-side download)
+
+Open `http://localhost:8000/` in your browser.
+
+---
+
+## UI Overview
+
+The updated interface provides:
+
+* **Device**
+
+  * WLED host
+  * LED count
+  * Segment
+  * Camera
+* **Capture**
+
+  * Frames per LED
+  * Transition
+  * Brightness threshold (auto + manual adjustment)
+  * Skip-dim toggle
+  * Prelight / Capture / Postlight delays
+* **Live scan view**
+
+  * Brightness mask overlay
+  * Camera scatter plot
+* **Manual interaction**
+
+  * Click to place LEDs if detection fails
+* **Live progress display**
+* **Grid preview editor**
+* **Download tools**
+
+  * `ledmap.json`
+  * `2d-gaps.json`
+
+---
 
 ## Usage Guide
 
 ### 1) Prepare WLED
-- Ensure the controller is reachable (open its UI, e.g., `http://10.0.0.50/`).
-- Use a single segment covering the entire strip (start 0, length = LED count).
-- Use 1D LED layout in WLED (disable 2D matrix/panels). The mapper addresses LEDs linearly via `/win` using `S/S2`.
-- Disable any existing LED map in WLED. Existing remaps will break index-to-LED matching.
+
+* Ensure the controller is reachable (open its UI, e.g., `http://10.0.0.50/`).
+* Use a single segment covering the entire strip (start 0, length = LED count).
+* Use a 1D LED layout in WLED (disable 2D matrix/panels).
+* Disable any existing LED map in WLED.
+
+---
 
 ### 2) Map LEDs
+
 1. Open `http://localhost:8000/`.
-2. In Controls, set:
-   - Host (e.g., `http://10.0.0.50`)
-   - LEDs (your strip length)
-   - Segment (usually 0)
-   - Camera (index for your system)
-   - Frames/LED + Min Bright (detection tuning); enable **Skip dim LEDs** to move past LEDs that never cross the threshold
-   - Prelight/Capture/Postlight delays (stability tuning)
-   - Transition (ms) — WLED `TT`, set 0 for instant changes
-3. Click **Start Mapping**. The backend will:
-   - Turn all LEDs off → light a single LED → off (repeats for each LED)
-   - Capture camera frames and store positions in `data/mapping.csv`
-4. When done, **Reload CSV** if needed to refresh the UI camera/grid views.
+
+2. Configure:
+
+   * Host (e.g., `10.0.0.50`)
+   * LEDs (strip length)
+   * Segment (usually 0)
+   * Camera
+   * Frames per LED (2–8 recommended)
+   * Transition (usually 0)
+   * Click the "Auto" button next to the brightness slider. Make sure the mask in the preview is enabled and fully covers the image with the LEDs turned off.
+   * Enable **Skip dim LEDs** if desired (not recommended, as you'll be prompted if detection fails)
+   * Adjust timing (default is very fast— increase for more accuracy)
+
+3. Click **Start Mapping**
+
+#### During Mapping:
+
+* Live webcam feed stays visible and smooth
+* Brightness mask overlay shows detection threshold
+* You can:
+
+  * Adjust parameters live
+  * Manually click LED positions or skip if detection fails for individual LEDs (only if Auto-Skip is disabled)
+* If WLED disconnects:
+
+  * Mapping pauses automatically
+  * Fix the connection and resume without restarting
+
+4. Mapping data is saved to:
+
+```
+data/mapping.csv
+```
+
+---
 
 ### 3) Shape the grid and export
-- Adjust Step/Width/Height as needed.
-- Click **Apply** to re-compute the grid and update the preview.
-- Click **Generate ledmap.json** to download the LED map formatted for WLED (flattened `map` with `width`/`height`).
-- Click **Download 2D gaps** to download a `1/-1` grid mask.
 
-Notes:
-- `ledmap.json` and `2d-gaps.json` are not saved on the server; they download in your browser. The raw capture stays in `data/mapping.csv`.
-- The UI toggle “Wire LEDs (in order)” draws a red line connecting LEDs 0→N in camera space for quick sanity checks.
+* Adjust:
+
+  * Step
+  * Width
+  * Height
+
+Export options:
+
+* **Generate ledmap.json**
+
+  * WLED-compatible map (`map`, `width`, `height`)
+* **Download 2D gaps**
+
+  * `1/-1` grid mask
+
+> Files are downloaded in the browser (not saved server-side)
+
+---
+
+## CLI usage (UNTESTED SINCE LAST UPDATE, MIGHT BE BROKEN)
+
+Run mapping directly:
 
-## CLI usage
-You can run the mapping script directly:
 ```bash
 python scripts/map_leds.py http://wled.local 150 --camera-index 1 --output data/mapping.csv
 ```
-Add `--skip-dim-leds` to continue past LEDs that stay under the minimum brightness threshold.
 
-and convert to JSON:
+Optional:
+
+```bash
+--skip-dim-leds
+```
+
+Convert to JSON:
+
 ```bash
 python scripts/convert_mapping.py --step 15 --include-meta
 ```
 
+---
+
 ## Troubleshooting
-- **ModuleNotFoundError: fastapi** - install dependencies with `pip install -r requirements.txt`.
-- **Camera not opened** - verify the camera index and close other apps using it.
-- **WLED doesn’t light**
-  - Confirm host/IP is reachable and WLED UI opens.
-  - Verify a single segment spans the entire strip.
-  - Test manual URLs (see above) — ensure `&SS`, `&S/&S2`, `&A`, and `&TT` are present.
-  - Increase Prelight/Capture/Postlight delays if your camera needs more time.
+
+### ModuleNotFoundError: fastapi
+
+```bash
+pip install -r requirements.txt
+```
+
+### Camera not opened
+
+* Verify camera index
+* Close other apps using the camera
+
+### WLED doesn’t light
+
+* Verify host/IP is reachable
+* Ensure correct segment setup
+* Test manual `/win` calls
+* Increase timing delays if needed
+
+### WLED disconnects mid-scan
+
+* Mapping pauses automatically
+* Reconnect/reset WLED and validate connectivity by opening the WLED Web UI
+* Resume mapping without losing progress
+
+---
 
 ## Project structure
-- Backend API: `server.py`
-- Mapping logic: `scripts/map_leds.py`
-- Conversion/trimming logic: `scripts/convert_mapping.py`
-- Frontend UI: `ui/led_viewer.html`
 
-Contributions are welcome! Fork, branch, and open a PR.
+* Backend API: `server.py`
+* Mapping logic: `scripts/map_leds.py`
+* Conversion: `scripts/convert_mapping.py`
+* Frontend UI: `ui/led_viewer.html`
+
+---
+
+## Contributing
+
+Contributions are welcome!
+Fork the repo, create a branch, and open a PR 🚀
diff --git a/scripts/map_leds.py b/scripts/map_leds.py
index 18996c1..ab753db 100644
--- a/scripts/map_leds.py
+++ b/scripts/map_leds.py
@@ -49,6 +49,16 @@ class MappingConfig:
     timeout: float = 3.0
     sleep_every: int = 25
     cooldown: float = 2.0
+    # Optional shared frame source: callable () -> np.ndarray | None
+    # When provided, the mapping skips opening its own camera.
+    frame_source: Optional[Callable[[], Optional[Any]]] = None
+    # Optional callback invoked when a LED cannot be located after all retries.
+    # Receives the LED index; returns (x, y) to place manually, or None to skip.
+    # When None the mapping raises as before.
+    manual_override_fn: Optional[Callable[[int], Optional[Tuple[float, float]]]] = None
+    # Optional callback invoked when a WLED HTTP request fails (timeout/error).
+    # Called with the exception message; returns True to retry, False to abort.
+    wled_retry_fn: Optional[Callable[[str], bool]] = None
 
 
 @dataclass
@@ -229,12 +239,21 @@ def send_active_led(
 
 
 def collect_brightest_points(
-    cap: cv2.VideoCapture, camera_index: int, frames: int
-) -> Tuple[cv2.VideoCapture, List[Tuple[float, Tuple[int, int]]]]:
+    cap: Optional[cv2.VideoCapture],
+    camera_index: int,
+    frames: int,
+    frame_source: Optional[Callable[[], Optional[Any]]] = None,
+) -> Tuple[Optional[cv2.VideoCapture], List[Tuple[float, Tuple[int, int]]]]:
     readings: List[Tuple[float, Tuple[int, int]]] = []
     current_cap = cap
     for _ in range(frames):
-        current_cap, frame = _read_frame(current_cap, camera_index)
+        if frame_source is not None:
+            frame = frame_source()
+            if frame is None:
+                time.sleep(0.05)
+                continue
+        else:
+            current_cap, frame = _read_frame(current_cap, camera_index)
         gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
         blurred = cv2.GaussianBlur(gray, (9, 9), 0)
         _, max_val, _, max_loc = cv2.minMaxLoc(blurred)
@@ -304,24 +323,77 @@ def _read_frame(cap: cv2.VideoCapture, camera_index: int) -> Tuple[cv2.VideoCapt
 
 
 
+def _try_manual_override(
+    config: "MappingConfig",
+    led: int,
+    hook: Optional["ProgressHook"],
+    results: list,
+) -> bool:
+    """Call ``config.manual_override_fn`` when all retries for *led* are exhausted.
+
+    Returns True if the LED was handled (skip or manual placement) so the caller
+    can ``break`` out of the retry loop.  Returns False when no override function
+    is configured, signalling the caller should ``raise`` the original exception.
+    """
+    if config.manual_override_fn is None:
+        return False
+    override = config.manual_override_fn(led)
+    if override is None:
+        LOGGER.info("LED %s skipped via manual override", led)
+        if hook:
+            hook(led, "skipped", {"reason": "manual skip"})
+    else:
+        x_ov, y_ov = override
+        point = {
+            "led": led,
+            "x": round(float(x_ov), 2),
+            "y": round(float(y_ov), 2),
+            "brightness": 0.0,
+        }
+        results.append(point)
+        LOGGER.info("LED %s placed manually at (%s, %s)", led, x_ov, y_ov)
+        if hook:
+            hook(led, "captured", point)
+    return True
+
+
 def run_mapping(
     config: MappingConfig,
     hook: Optional[ProgressHook] = None,
     stop_event: Optional[Event] = None,
 ) -> MappingResult:
     state_url = build_state_url(config.host)
-    cap = _open_camera(config.camera_index)
+    cap = None if config.frame_source else _open_camera(config.camera_index)
     results: List[Dict[str, float]] = []
     stopped = False
+
+    def _wled_call(fn: Callable) -> None:
+        """Call fn(); on RequestException block until wled_retry_fn says retry or abort."""
+        while True:
+            try:
+                fn()
+                return
+            except requests.RequestException as exc:
+                if config.wled_retry_fn is None:
+                    raise
+                if stop_event and stop_event.is_set():
+                    raise
+                LOGGER.warning("WLED request failed: %s – waiting for retry signal", exc)
+                if hook:
+                    hook(-1, "wled_timeout", {"error": str(exc)})
+                should_retry = config.wled_retry_fn(str(exc))
+                if not should_retry:
+                    raise
+
     try:
-        initialize_segment(
+        _wled_call(lambda: initialize_segment(
             state_url,
             config.led_count,
             config.timeout,
             config.segment_index,
             hook,
-        )
-        send_active_led(
+        ))
+        _wled_call(lambda: send_active_led(
             state_url,
             config.led_count,
             None,
@@ -329,7 +401,7 @@ def run_mapping(
             "initial-strip",
             hook,
             segment_index=config.segment_index,
-        )
+        ))
         if config.prelight_delay > 0:
             time.sleep(config.prelight_delay)
         for led in range(config.led_count):
@@ -339,7 +411,7 @@ def run_mapping(
             attempt = 0
             while True:
                 attempt += 1
-                send_active_led(
+                _wled_call(lambda: send_active_led(
                     state_url,
                     config.led_count,
                     led,
@@ -347,11 +419,12 @@ def run_mapping(
                     "highlight",
                     hook,
                     segment_index=config.segment_index,
-                )
+                ))
                 time.sleep(config.capture_delay)
                 try:
                     cap, readings = collect_brightest_points(
-                        cap, config.camera_index, config.frames_per_led
+                        cap, config.camera_index, config.frames_per_led,
+                        frame_source=config.frame_source,
                     )
                     x, y, peak = compute_coordinate(
                         readings, config.top_frame_ratio, config.min_brightness
@@ -390,6 +463,8 @@ def run_mapping(
                             {"attempt": attempt, "max": LED_RETRY_ATTEMPTS, "reason": str(exc)},
                         )
                     if attempt >= LED_RETRY_ATTEMPTS:
+                        if _try_manual_override(config, led, hook, results):
+                            break
                         raise
                     time.sleep(max(config.prelight_delay, 0.05))
                     continue
@@ -408,6 +483,8 @@ def run_mapping(
                             {"attempt": attempt, "max": LED_RETRY_ATTEMPTS, "reason": str(exc)},
                         )
                     if attempt >= LED_RETRY_ATTEMPTS:
+                        if _try_manual_override(config, led, hook, results):
+                            break
                         raise
                     time.sleep(max(config.prelight_delay, 0.05))
                     continue
@@ -421,7 +498,8 @@ def run_mapping(
             if config.sleep_every and (led + 1) % config.sleep_every == 0:
                 time.sleep(config.cooldown)
     finally:
-        cap.release()
+        if cap is not None:
+            cap.release()
         try:
             send_active_led(
                 state_url,
diff --git a/server.py b/server.py
index 26b3437..302c297 100644
--- a/server.py
+++ b/server.py
@@ -1,16 +1,20 @@
 """Local web server that exposes mapping controls and conversion helpers."""
 
 import csv
+import os
 import sys
 import threading
 import time
 from pathlib import Path
 from typing import Dict, List, Optional
 
+os.environ.setdefault("OPENCV_LOG_LEVEL", "SILENT")          # suppress noisy backend probe messages
+os.environ.setdefault("OPENCV_VIDEOIO_PRIORITY_OBSENSOR", "0") # disable depth-camera plugin that errors on normal indices
+os.environ.setdefault("OPENCV_VIDEOIO_PRIORITY_FFMPEG", "0")   # disable FFMPEG for capture (avoid DSHOW enumeration warnings)
 import cv2
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import RedirectResponse, Response
+from fastapi.responses import RedirectResponse, Response, StreamingResponse
 from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel
 
@@ -78,7 +82,7 @@ class MapRequest(BaseModel):
 
     top_frame_ratio: float = 0.4
 
-    min_brightness: float = 30.0
+    min_brightness: float = 200.0
     skip_dim_leds: bool = False
 
     timeout: float = 3.0
@@ -99,6 +103,33 @@ class ConvertRequest(BaseModel):
     include_meta: bool = True
 
 
+class UpdateConfigRequest(BaseModel):
+    frames_per_led: Optional[int] = None
+    transition_ms: Optional[int] = None
+    prelight_delay: Optional[float] = None
+    capture_delay: Optional[float] = None
+    postlight_delay: Optional[float] = None
+    min_brightness: Optional[float] = None
+    skip_dim_leds: Optional[bool] = None
+
+
+class ResolveLedRequest(BaseModel):
+    """Body for POST /api/resolve_led.
+
+    Send ``skip=True`` to skip the LED, or leave skip=False and provide
+    ``norm_x`` / ``norm_y`` (0-1 normalised position inside the camera preview
+    image: norm_x = horizontal, norm_y = vertical).
+    """
+
+    skip: bool = False
+    norm_x: Optional[float] = None  # horizontal 0-1
+    norm_y: Optional[float] = None  # vertical   0-1
+
+
+# Live reference to the active MappingConfig so it can be patched mid-run
+_ACTIVE_CONFIG: Optional[MappingConfig] = None
+_ACTIVE_CONFIG_LOCK = threading.Lock()
+
 STATE = {
     "status": "idle",
     "message": "Ready",
@@ -107,6 +138,7 @@ class ConvertRequest(BaseModel):
     "started_at": None,
     "finished_at": None,
     "points_captured": 0,
+    "waiting_led": None,  # set when status == "waiting_input"
 }
 
 
@@ -116,6 +148,15 @@ class ConvertRequest(BaseModel):
 LIVE_POINTS: List[Dict[str, float]] = []
 STOP_EVENT = threading.Event()
 
+# Manual override machinery — used when skip_dim_leds is False and a LED is lost
+_OVERRIDE_LOCK = threading.Lock()
+_OVERRIDE_EVENT = threading.Event()
+_OVERRIDE_PENDING: Dict[str, object] = {}  # {"active": bool, "led": int, "decision": ...}
+
+# WLED retry machinery — used when the WLED device stops responding mid-mapping
+_WLED_RETRY_EVENT = threading.Event()
+_WLED_ABORT = False  # set True by stop_mapping while in wled_timeout state
+
 
 def _reset_mapping_csv():
 
@@ -141,11 +182,129 @@ def _append_mapping_entry(entry: Dict[str, float]):
         writer.writerow(entry)
 
 
+_CAMERA_OPEN_TIMEOUT = 3.0  # seconds per camera index before declaring it unavailable
+
+
+class CameraManager:
+    """Single shared camera instance with a background frame-pump thread.
+
+    Both the MJPEG preview stream and the mapping pipeline read from this,
+    so the physical camera is opened only once regardless of how many
+    consumers are active simultaneously.
+    """
+
+    def __init__(self, camera_index: int) -> None:
+        self.camera_index = camera_index
+        self._lock = threading.Lock()
+        self._latest: Optional[object] = None
+        self._stop = threading.Event()
+        cap = _try_open_camera_timed(camera_index)
+        if cap is None:
+            raise RuntimeError(f"Camera {camera_index} could not be opened")
+        self._cap = cap
+        self._seq: int = 0  # incremented on every new frame
+        self._thread = threading.Thread(target=self._pump, daemon=True)
+        self._thread.start()
+
+    def _pump(self) -> None:
+        fail_streak = 0
+        while not self._stop.is_set():
+            # Reopen the camera if it has been closed (e.g. by a competing probe)
+            if not self._cap.isOpened():
+                time.sleep(0.5)
+                new_cap = _try_open_camera(self.camera_index)
+                if new_cap is not None:
+                    with self._lock:
+                        self._cap = new_cap
+                    fail_streak = 0
+                else:
+                    fail_streak += 1
+                    if fail_streak >= 6:
+                        break  # camera is genuinely gone
+                continue
+            try:
+                ok, frame = self._cap.read()
+            except Exception:  # pylint: disable=broad-except
+                fail_streak += 1
+                if fail_streak >= 10:
+                    with self._lock:
+                        self._cap.release()
+                        # force reopen on next loop iteration
+                        self._cap = cv2.VideoCapture()
+                    fail_streak = 0
+                time.sleep(0.1)
+                continue
+            if ok and frame is not None:
+                with self._lock:
+                    self._latest = frame
+                    self._seq += 1
+                fail_streak = 0
+            else:
+                fail_streak += 1
+                if fail_streak >= 30:
+                    with self._lock:
+                        self._cap.release()
+                        self._cap = cv2.VideoCapture()
+                    fail_streak = 0
+                time.sleep(0.005)
+
+    def read_frame(self) -> Optional[object]:
+        with self._lock:
+            return self._latest
+
+    def get_seq(self) -> int:
+        with self._lock:
+            return self._seq
+
+    def read_frame_after(self, min_seq: int, timeout: float = 3.0):
+        """Block until a frame with seq > min_seq arrives, then return (frame, seq)."""
+        deadline = time.monotonic() + timeout
+        while time.monotonic() < deadline:
+            with self._lock:
+                if self._seq > min_seq:
+                    return self._latest, self._seq
+            time.sleep(0.005)
+        return None, min_seq
+
+    def get_frame_size(self) -> Optional[tuple]:
+        """Return (width, height) of the latest captured frame, or None."""
+        with self._lock:
+            if self._latest is not None:
+                h, w = self._latest.shape[:2]
+                return w, h
+        return None
+
+    def is_alive(self) -> bool:
+        return not self._stop.is_set() and self._cap.isOpened() and self._thread.is_alive()
+
+    def release(self) -> None:
+        self._stop.set()
+        self._thread.join(timeout=2.0)  # wait for the pump to finish its current read
+        with self._lock:
+            self._cap.release()
+
+
+_cam_mgr: Optional[CameraManager] = None
+_cam_mgr_lock = threading.Lock()
+
+
+def _get_cam_mgr(camera_index: int) -> CameraManager:
+    """Return the active CameraManager, (re)creating it if needed."""
+    global _cam_mgr
+    with _cam_mgr_lock:
+        if _cam_mgr is None or _cam_mgr.camera_index != camera_index or not _cam_mgr.is_alive():
+            if _cam_mgr is not None:
+                _cam_mgr.release()
+            _cam_mgr = CameraManager(camera_index)
+        return _cam_mgr
+
+
 def _try_open_camera(camera_index: int) -> Optional[cv2.VideoCapture]:
+    """Open a camera by index, trying each backend. Returns the cap or None."""
 
     if sys.platform.startswith("win"):
 
-        backends = [cv2.CAP_MSMF, cv2.CAP_DSHOW, cv2.CAP_ANY]
+        backends = [cv2.CAP_MSMF, cv2.CAP_DSHOW]
 
     else:
 
@@ -170,21 +329,94 @@ def _try_open_camera(camera_index: int) -> Optional[cv2.VideoCapture]:
     return None
 
 
-def _list_available_cameras(max_index: int) -> list[int]:
+def _try_open_camera_timed(camera_index: int) -> Optional[cv2.VideoCapture]:
+    """Open camera with a timeout to prevent indefinite hangs.
 
-    cameras: list[int] = []
+    Returns the opened VideoCapture, or None if unavailable/absent.
+    Sets the sentinel attribute ``timed_out`` on the returned None to distinguish
+    a hung camera from an absent one — but since we return None either way for the
+    preview endpoint, callers that need to distinguish should call
+    ``_probe_camera_status`` instead.
+    """
 
-    for idx in range(max(1, max_index)):
+    result: list = [None]
+    exc: list = [None]
 
-        cap = _try_open_camera(idx)
+    def _open():
+        try:
+            result[0] = _try_open_camera(camera_index)
+        except Exception as e:  # pylint: disable=broad-except
+            exc[0] = e
 
-        if cap is None:
+    t = threading.Thread(target=_open, daemon=True)
+    t.start()
+    t.join(_CAMERA_OPEN_TIMEOUT)
 
-            continue
+    if t.is_alive():
+        # Thread is still blocked — camera is hanging (likely in use or stalled)
+        return None
 
-        cap.release()
+    return result[0]
+
+
+def _probe_camera_status(camera_index: int) -> str:
+    """Return 'available', 'unavailable', or 'absent' for a camera index.
+
+    'available'   – opened and a frame can be read
+    'unavailable' – appeared to exist but timed out or frame read failed
+    'absent'      – failed to open quickly, almost certainly no hardware present
+
+    If the CameraManager is already streaming this index we trust it rather than
+    opening a competing handle, which would corrupt the active capture on Windows.
+    """
+
+    # Never compete with an active manager — opening a second handle on Windows
+    # (MSMF/DSHOW) corrupts the first one and causes the stream to freeze.
+    with _cam_mgr_lock:
+        if (_cam_mgr is not None
+                and _cam_mgr.camera_index == camera_index
+                and _cam_mgr.is_alive()):
+            return "available"
 
-        cameras.append(idx)
+    result: list = [None]
+
+    def _open():
+        result[0] = _try_open_camera(camera_index)
+
+    t = threading.Thread(target=_open, daemon=True)
+    t.start()
+    t.join(_CAMERA_OPEN_TIMEOUT)
+
+    if t.is_alive():
+        return "unavailable"
+
+    cap = result[0]
+
+    if cap is None:
+        return "absent"
+
+    ok, frame = cap.read()
+    cap.release()
+
+    if not ok or frame is None:
+        return "unavailable"
+
+    return "available"
+
+
+def _list_available_cameras(max_index: int) -> list[dict]:
+    """Scan camera indices and return a list of dicts with 'index' and 'available'."""
+
+    cameras: list[dict] = []
+
+    for idx in range(max(1, max_index)):
+
+        status = _probe_camera_status(idx)
+
+        if status == "absent":
+            continue
+
+        cameras.append({"index": idx, "available": status == "available"})
 
     return cameras
 
@@ -249,9 +481,66 @@ def _progress_hook(led_index: int, stage: str, payload):
     )
 
 
+def _manual_override_fn(led_index: int):
+    """Block the mapping thread and wait for the operator to resolve a lost LED.
+
+    Returns (x, y) if the operator clicked a position, or None to skip the LED.
+    Also returns None if the stop event fires while waiting.
+    """
+    with _OVERRIDE_LOCK:
+        _OVERRIDE_PENDING.clear()
+        _OVERRIDE_PENDING.update({"active": True, "led": led_index, "decision": None})
+        _OVERRIDE_EVENT.clear()
+
+    _update_state(
+        status="waiting_input",
+        message=f"LED {led_index} not detected – awaiting manual input",
+        current=led_index,
+        waiting_led=led_index,
+    )
+
+    # Block until the operator responds or mapping is stopped
+    while not _OVERRIDE_EVENT.wait(timeout=0.5):
+        if STOP_EVENT.is_set():
+            with _OVERRIDE_LOCK:
+                _OVERRIDE_PENDING["active"] = False
+            _update_state(status="running", message="Resuming...", waiting_led=None)
+            return None
+
+    with _OVERRIDE_LOCK:
+        _OVERRIDE_PENDING["active"] = False
+        decision = _OVERRIDE_PENDING.get("decision")
+
+    _update_state(status="running", message="Resuming...", waiting_led=None)
+    return decision  # None → skip, (x, y) → manual placement
+
+
+def _wled_retry_fn(error_msg: str) -> bool:
+    """Block the mapping thread when WLED becomes unresponsive.
+
+    Returns True if the operator clicked Retry, False if Stop was pressed.
+    """
+    global _WLED_ABORT
+    _WLED_ABORT = False
+    _WLED_RETRY_EVENT.clear()
+
+    _update_state(
+        status="wled_timeout",
+        message=f"WLED not responding: {error_msg}",
+    )
+
+    while not _WLED_RETRY_EVENT.wait(timeout=0.5):
+        if STOP_EVENT.is_set():
+            _update_state(status="running", message="Stopping...")
+            return False
+
+    _update_state(status="running", message="Retrying WLED request...")
+    return not _WLED_ABORT
+
+
 def _mapping_thread(config: MappingConfig, stop_event: threading.Event):
 
-    global RESULT
+    global RESULT, _ACTIVE_CONFIG
 
     try:
 
@@ -289,6 +578,8 @@ def _mapping_thread(config: MappingConfig, stop_event: threading.Event):
         _update_state(status="error", message=str(exc), finished_at=time.time())
     finally:
         stop_event.clear()
+        with _ACTIVE_CONFIG_LOCK:
+            _ACTIVE_CONFIG = None
 
 
 @app.post("/api/map")
@@ -296,7 +587,7 @@ def start_mapping(req: MapRequest):
 
     with STATE_LOCK:
 
-        if STATE["status"] == "running":
+        if STATE["status"] in {"running", "starting", "waiting_input", "wled_timeout"}:
 
             raise HTTPException(status_code=409, detail="Mapping already in progress")
 
@@ -315,8 +606,36 @@ def start_mapping(req: MapRequest):
         LIVE_POINTS.clear()
         _reset_mapping_csv()
         STOP_EVENT.clear()
+        # Reset WLED-retry state so a stale event from a previous session
+        # cannot cause _wled_retry_fn to exit immediately.
+        global _WLED_ABORT
+        _WLED_ABORT = False
+        _WLED_RETRY_EVENT.clear()
 
-    config = MappingConfig(**req.model_dump())
+    mapping_data = req.model_dump()
+    try:
+        mgr = _get_cam_mgr(mapping_data["camera_index"])
+        # Build a stateful closure that always waits for a frame newer than the
+        # last one it returned, so stale/repeated frames never reach the mapper.
+        last_seq: List[int] = [mgr.get_seq()]
+        def _fresh_frame():
+            frame, new_seq = mgr.read_frame_after(last_seq[0])
+            last_seq[0] = new_seq
+            return frame
+        mapping_data["frame_source"] = _fresh_frame
+    except RuntimeError:
+        mapping_data["frame_source"] = None  # fall back to opening own camera
+    # Attach the manual-override callback unless the user chose "skip dim LEDs"
+    # automatically (in that case, no manual intervention is desired).
+    if not req.skip_dim_leds:
+        mapping_data["manual_override_fn"] = _manual_override_fn
+    # Always attach the WLED retry callback so network errors pause gracefully.
+    mapping_data["wled_retry_fn"] = _wled_retry_fn
+    config = MappingConfig(**mapping_data)
+
+    global _ACTIVE_CONFIG
+    with _ACTIVE_CONFIG_LOCK:
+        _ACTIVE_CONFIG = config
 
     thread = threading.Thread(
         target=_mapping_thread, args=(config, STOP_EVENT), daemon=True
@@ -344,13 +663,13 @@ def get_cameras(max_index: int = CAMERA_SCAN_LIMIT):
 
     cameras = _list_available_cameras(limit)
 
-    return {"cameras": [{"index": idx} for idx in cameras], "scanned": limit}
+    return {"cameras": cameras, "scanned": limit}
 
 
 @app.get("/api/camera_preview/{camera_index}")
 def camera_preview(camera_index: int, width: int = 640):
 
-    cap = _try_open_camera(camera_index)
+    cap = _try_open_camera_timed(camera_index)
 
     if cap is None:
 
@@ -385,6 +704,135 @@ def camera_preview(camera_index: int, width: int = 640):
     return Response(content=encoded.tobytes(), media_type="image/jpeg")
 
 
+_MJPEG_BOUNDARY = b"--mjpegframe"
+_MJPEG_MAX_FPS = 30
+
+
+def _apply_brightness_mask(frame, threshold: int):
+    """Darken pixels whose brightness is below *threshold* and tint them red.
+
+    Pixels at or above the threshold are returned unchanged so the viewer can
+    see at a glance which areas will register as bright LEDs.
+    """
+    gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+    _, bright_mask = cv2.threshold(gray, max(0, threshold - 1), 255, cv2.THRESH_BINARY)
+    dim_mask = cv2.bitwise_not(bright_mask)
+    # Build a darkened + red-tinted version for dim pixels
+    dark = cv2.convertScaleAbs(frame, alpha=0.2, beta=0)
+    b, g, r = cv2.split(dark)
+    r = cv2.add(r, 80)
+    dark = cv2.merge([b, g, r])
+    # Composite: original colour where bright, dark+red where dim
+    bright_part = cv2.bitwise_and(frame, frame, mask=bright_mask)
+    dim_part = cv2.bitwise_and(dark, dark, mask=dim_mask)
+    return cv2.add(bright_part, dim_part)
+
+
+def _mjpeg_frames(mgr: "CameraManager", target_width: int, frame_processor=None):
+    """Sync generator — reads from a CameraManager, yielding MJPEG frames.
+
+    Ends the stream (causing the browser to reconnect) if the pump has been
+    dead for more than 5 seconds so _get_cam_mgr can create a fresh manager.
+    An optional *frame_processor* callable is applied to each frame before
+    encoding (used by the mask-preview stream).
+    """
+    frame_interval = 1.0 / _MJPEG_MAX_FPS
+    last_seq = -1
+    stale_since: Optional[float] = None
+    while True:
+        t0 = time.monotonic()
+
+        with mgr._lock:
+            current_seq = mgr._seq
+            frame = mgr._latest
+
+        if current_seq == last_seq or frame is None:
+            # No new frame yet — check whether the pump is still alive
+            if not mgr.is_alive():
+                if stale_since is None:
+                    stale_since = t0
+                elif t0 - stale_since > 5.0:
+                    break  # pump is gone; end stream so browser reconnects
+            time.sleep(0.01)
+            continue
+
+        last_seq = current_seq
+        stale_since = None
+
+        h, w = frame.shape[:2]
+        if w != target_width:
+            scale = target_width / max(1, w)
+            frame = cv2.resize(frame, (target_width, max(1, int(h * scale))))
+        if frame_processor is not None:
+            frame = frame_processor(frame)
+        ok, encoded = cv2.imencode(".jpg", frame, [cv2.IMWRITE_JPEG_QUALITY, 80])
+        if not ok:
+            continue
+        data = encoded.tobytes()
+        yield (
+            _MJPEG_BOUNDARY + b"\r\n"
+            + b"Content-Type: image/jpeg\r\n"
+            + b"Content-Length: " + str(len(data)).encode() + b"\r\n\r\n"
+            + data + b"\r\n"
+        )
+        elapsed = time.monotonic() - t0
+        remaining = frame_interval - elapsed
+        if remaining > 0:
+            time.sleep(remaining)
+
+
+@app.get("/api/camera_peak_brightness/{camera_index}")
+def camera_peak_brightness(camera_index: int):
+    """Return the brightest pixel value in the latest camera frame."""
+    try:
+        mgr = _get_cam_mgr(camera_index)
+    except RuntimeError as exc:
+        raise HTTPException(status_code=404, detail=str(exc))
+    frame = mgr.read_frame()
+    if frame is None:
+        raise HTTPException(status_code=503, detail="No frame available")
+    gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+    peak = int(gray.max())
+    return {"peak": peak}
+
+
+@app.get("/api/camera_stream/{camera_index}")
+def camera_stream(camera_index: int, width: int = 640):
+    try:
+        mgr = _get_cam_mgr(camera_index)
+    except RuntimeError as exc:
+        raise HTTPException(status_code=404, detail=str(exc))
+    target_width = max(160, min(width, 1280))
+    return StreamingResponse(
+        _mjpeg_frames(mgr, target_width),
+        media_type="multipart/x-mixed-replace; boundary=mjpegframe",
+        headers={"Cache-Control": "no-cache, no-store"},
+    )
+
+
+@app.get("/api/camera_mask_stream/{camera_index}")
+def camera_mask_stream(camera_index: int, width: int = 640, threshold: int = 200):
+    """MJPEG stream identical to camera_stream but with a brightness-mask overlay.
+
+    Pixels whose brightness is below *threshold* are darkened and tinted red so
+    the operator can see at a glance which areas will register as lit LEDs.
+    The underlying CameraManager frame buffer is shared with the plain stream and
+    the mapping pipeline — the mask is applied only to the encoded preview frames.
+    """
+    try:
+        mgr = _get_cam_mgr(camera_index)
+    except RuntimeError as exc:
+        raise HTTPException(status_code=404, detail=str(exc))
+    target_width = max(160, min(width, 1280))
+    thr = max(0, min(threshold, 255))
+    processor = lambda f: _apply_brightness_mask(f, thr)  # noqa: E731
+    return StreamingResponse(
+        _mjpeg_frames(mgr, target_width, frame_processor=processor),
+        media_type="multipart/x-mixed-replace; boundary=mjpegframe",
+        headers={"Cache-Control": "no-cache, no-store"},
+    )
+
+
 @app.get("/api/live_points")
 def get_live_points(after: int = -1):
 
@@ -408,15 +856,94 @@ def stop_mapping():
 
     with STATE_LOCK:
 
-        if STATE["status"] not in {"running", "starting"}:
+        if STATE["status"] not in {"running", "starting", "waiting_input", "wled_timeout"}:
 
             raise HTTPException(status_code=409, detail="No mapping in progress")
 
     STOP_EVENT.set()
+    # Unblock any blocking waits so the mapping thread can exit cleanly
+    _OVERRIDE_EVENT.set()
+    global _WLED_ABORT
+    _WLED_ABORT = True
+    _WLED_RETRY_EVENT.set()
 
     return {"ok": True}
 
 
+@app.post("/api/update_config")
+def update_config(req: UpdateConfigRequest):
+    """Patch the live MappingConfig while a capture is in progress."""
+    with _ACTIVE_CONFIG_LOCK:
+        if _ACTIVE_CONFIG is None:
+            raise HTTPException(status_code=409, detail="No mapping in progress")
+        if req.frames_per_led is not None:
+            _ACTIVE_CONFIG.frames_per_led = req.frames_per_led
+        if req.transition_ms is not None:
+            _ACTIVE_CONFIG.transition_ms = req.transition_ms
+        if req.prelight_delay is not None:
+            _ACTIVE_CONFIG.prelight_delay = req.prelight_delay
+        if req.capture_delay is not None:
+            _ACTIVE_CONFIG.capture_delay = req.capture_delay
+        if req.postlight_delay is not None:
+            _ACTIVE_CONFIG.postlight_delay = req.postlight_delay
+        if req.min_brightness is not None:
+            _ACTIVE_CONFIG.min_brightness = req.min_brightness
+        if req.skip_dim_leds is not None:
+            _ACTIVE_CONFIG.skip_dim_leds = req.skip_dim_leds
+            _ACTIVE_CONFIG.manual_override_fn = (
+                None if req.skip_dim_leds else _manual_override_fn
+            )
+    return {"ok": True}
+
+
+@app.post("/api/resolve_led")
+def resolve_led(req: ResolveLedRequest):
+    """Resolve a waiting_input pause.
+
+    Send ``{"skip": true}`` to skip the LED, or provide ``click_x``/``click_y``
+    (pixel position inside the 640-px-wide MJPEG preview image) to place it.
+    """
+    with _OVERRIDE_LOCK:
+        if not _OVERRIDE_PENDING.get("active"):
+            raise HTTPException(status_code=409, detail="No LED override pending")
+
+        if req.skip or req.norm_x is None or req.norm_y is None:
+            _OVERRIDE_PENDING["decision"] = None  # None → skip
+        else:
+            # Convert normalised 0-1 click position to the coordinate space that
+            # Camera Space renders: p.x = item.x (canvas horizontal) and
+            # p.y = item.y (canvas vertical).  The camera preview is displayed
+            # with horizontal = norm_x and vertical = norm_y, so we map directly:
+            #   item.x  ←  norm_x * frame_width
+            #   item.y  ←  norm_y * frame_height
+            native_w, native_h = 640, 480  # safe defaults
+            with _cam_mgr_lock:
+                mgr = _cam_mgr
+            if mgr is not None:
+                size = mgr.get_frame_size()
+                if size is not None:
+                    native_w, native_h = size
+            _OVERRIDE_PENDING["decision"] = (
+                req.norm_x * native_w,  # item.x  ← horizontal click * width
+                req.norm_y * native_h,  # item.y  ← vertical   click * height
+            )
+
+    _OVERRIDE_EVENT.set()
+    return {"ok": True}
+
+
+@app.post("/api/retry_wled")
+def retry_wled():
+    """Resume mapping after the operator has fixed the WLED device."""
+    with STATE_LOCK:
+        if STATE["status"] != "wled_timeout":
+            raise HTTPException(status_code=409, detail="Not in WLED timeout state")
+    global _WLED_ABORT
+    _WLED_ABORT = False
+    _WLED_RETRY_EVENT.set()
+    return {"ok": True}
+
+
 @app.get("/api/result")
 def get_result():
 
@@ -431,12 +958,15 @@ def get_result():
 def convert(req: ConvertRequest):
 
     if not MAPPING_CSV.exists():
+        raise HTTPException(status_code=404, detail="mapping.csv not found — run capture first")
 
+    try:
+        rows = load_mapping(MAPPING_CSV)
+    except Exception as exc:
         raise HTTPException(
-            status_code=404, detail="mapping.csv not found, run capture first"
-        )
-
-    rows = load_mapping(MAPPING_CSV)
+            status_code=404,
+            detail=f"mapping.csv is empty or damaged — run capture again ({exc})",
+        ) from exc
 
     if req.step is None and req.width is None and req.height is None:
 
diff --git a/ui/led_viewer.html b/ui/led_viewer.html
index 86c2904..5071fb5 100644
--- a/ui/led_viewer.html
+++ b/ui/led_viewer.html
@@ -2,110 +2,647 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>WLED Mapping Viewer</title>
-  <style>
-    body { margin: 0; font-family: Arial, sans-serif; background: #0f1115; color: #f1f1f1; }
-    #layout { display: flex; flex-direction: column; min-height: 100vh; }
-    #controls { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #151821; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
-    .control-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
-    button, .field { background: #1f2430; color: #f1f1f1; border: 1px solid #2d3240; padding: 6px 12px; cursor: pointer; font-size: 0.9rem; }
-    button:hover { background: #2b3242; }
-    .field { display: flex; align-items: center; gap: 8px; cursor: default; }
-    .field input[type=number], .field select, .field input[type=range] { width: 110px; background: #0f1115; border: 1px solid #2d3240; color: #f1f1f1; padding: 4px 6px; }
-    .field select { appearance: none; -moz-appearance: none; -webkit-appearance: none; }
-    .step-control { display: flex; align-items: center; gap: 8px; }
-    .step-control input[type=range] { width: 160px; padding: 0; }
-    .step-control input[type=number] { width: 70px; }
-    .hidden { display: none !important; }
-    #panels { display: flex; flex: 1; gap: 16px; padding: 16px; box-sizing: border-box; }
-    .panel { flex: 1; background: #11141d; border: 1px solid #1f2430; padding: 12px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
-    .panel-head { display: flex; align-items: center; gap: 12px; }
-    .panel h2 { margin: 0; font-size: 1rem; color: #dbe3ff; }
-    .canvas-wrap { flex: 1; position: relative; background: #08090d; border: 1px solid #232938; display: flex; justify-content: center; align-items: center; }
-    .camera-preview-wrap { flex: 1; position: relative; background: #08090d; border: 1px solid #232938; display: flex; justify-content: center; align-items: center; min-height: 220px; }
-    #cameraPreview { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
-    #previewStatus { font-size: 0.85rem; color: #b5bcc9; }
-    canvas { width: 100%; height: 100%; }
-    #status { font-size: 0.9rem; color: #b5bcc9; }
-    #summary { font-size: 0.9rem; color: #ced6f3; }
-    @media (max-width: 1100px) { #panels { flex-direction: column; } }
-  </style>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
   <meta http-equiv="Pragma" content="no-cache" />
   <meta http-equiv="Expires" content="0" />
-  <meta charset="utf-8" />
-  <meta name="referrer" content="same-origin" />
   <meta name="color-scheme" content="dark" />
+  <title>WLED Mapper</title>
+  <style>
+    :root {
+      --bg:           #090a0e;
+      --surface:      #0f1118;
+      --surface2:     #171a25;
+      --border:       #1e2133;
+      --border2:      #282c3f;
+      --text:         #dde2f0;
+      --text-dim:     #6e7898;
+      --text-muted:   #3a3f58;
+      --primary:      #4a5cf7;
+      --primary-h:    #5c6ef9;
+      --danger:       #e84040;
+      --danger-bg:    #1f0c0c;
+      --warn:         #f5a623;
+      --warn-bg:      #1f1408;
+      --radius:       7px;
+      --radius-sm:    4px;
+      --sidebar-w:    310px;
+    }
+
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+      font-size: 13px;
+      background: var(--bg);
+      color: var(--text);
+      height: 100vh;
+      overflow: hidden;
+    }
+
+    /* ── Root layout ─────────────────────────── */
+    #layout {
+      display: flex;
+      height: 100vh;
+      overflow: hidden;
+    }
+
+    /* ── Sidebar ────────────────────────────── */
+    #sidebar {
+      width: var(--sidebar-w);
+      min-width: var(--sidebar-w);
+      background: var(--surface);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    #sidebar-header {
+      padding: 13px 15px 11px;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    #sidebar-header h1 {
+      font-size: 0.95rem;
+      font-weight: 700;
+      color: var(--text);
+      letter-spacing: 0.03em;
+    }
+    #sidebar-header p {
+      font-size: 0.72rem;
+      color: var(--text-dim);
+      margin-top: 2px;
+    }
+
+    #sidebar-scroll {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding-bottom: 16px;
+    }
+    #sidebar-scroll::-webkit-scrollbar { width: 3px; }
+    #sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
+
+    .sb-section {
+      padding: 10px 13px;
+      border-bottom: 1px solid var(--border);
+    }
+    .sb-section:last-child { border-bottom: none; }
+
+    .sb-title {
+      font-size: 0.67rem;
+      font-weight: 700;
+      letter-spacing: 0.09em;
+      text-transform: uppercase;
+      color: var(--text-muted);
+      margin-bottom: 9px;
+    }
+
+    .sb-row {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 6px;
+    }
+    .sb-row:last-child { margin-bottom: 0; }
+
+    .sb-lbl {
+      font-size: 0.8rem;
+      color: var(--text-dim);
+      white-space: nowrap;
+      min-width: 78px;
+    }
+
+    /* ── Inputs ─────────────────────────────── */
+    input[type=text],
+    input[type=number],
+    select {
+      background: var(--surface2);
+      border: 1px solid var(--border2);
+      color: var(--text);
+      border-radius: var(--radius-sm);
+      padding: 5px 7px;
+      font-size: 0.8rem;
+      font-family: inherit;
+      outline: none;
+      width: 100%;
+      min-width: 0;
+    }
+    input[type=text]:focus,
+    input[type=number]:focus,
+    select:focus { border-color: var(--primary); }
+
+    select {
+      appearance: none;
+      -webkit-appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236e7898'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 7px center;
+      padding-right: 22px;
+    }
+
+    input[type=range] {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 100%;
+      height: 4px;
+      background: var(--border2);
+      border-radius: 2px;
+      outline: none;
+      cursor: pointer;
+      padding: 0;
+    }
+    input[type=range]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 13px;
+      height: 13px;
+      border-radius: 50%;
+      background: var(--primary);
+      cursor: pointer;
+    }
+
+    input[type=checkbox] {
+      accent-color: var(--primary);
+      width: 13px;
+      height: 13px;
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+
+    /* ── Buttons ─────────────────────────────── */
+    button {
+      font-family: inherit;
+      font-size: 0.8rem;
+      border-radius: var(--radius-sm);
+      border: 1px solid transparent;
+      padding: 5px 10px;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: background 0.1s;
+    }
+    .btn-ghost {
+      background: var(--surface2);
+      border-color: var(--border2);
+      color: var(--text-dim);
+    }
+    .btn-ghost:hover { background: var(--border2); color: var(--text); }
+
+    .btn-primary {
+      background: var(--primary);
+      border-color: var(--primary);
+      color: #fff;
+      font-weight: 600;
+    }
+    .btn-primary:hover { background: var(--primary-h); }
+
+    .btn-danger {
+      background: var(--danger-bg);
+      border-color: var(--danger);
+      color: #ffaaaa;
+    }
+    .btn-danger:hover { background: #2e0e0e; }
+
+    .btn-warn {
+      background: var(--warn-bg);
+      border-color: var(--warn);
+      color: #fde68a;
+    }
+    .btn-warn:hover { background: #2c1b0a; }
+
+    button:disabled,
+    input:disabled,
+    select:disabled { opacity: 0.38; cursor: not-allowed; }
+
+    .sb-full-btn {
+      width: 100%;
+      padding: 7px 10px;
+      font-size: 0.82rem;
+      margin-bottom: 5px;
+    }
+    .sb-full-btn:last-of-type { margin-bottom: 0; }
+
+    .sb-pair {
+      display: flex;
+      gap: 5px;
+      margin-bottom: 5px;
+    }
+    .sb-pair button { flex: 1; }
+
+    /* ── Brightness slider ───────────────────── */
+    .bright-header {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 4px;
+    }
+    .bright-header .sb-lbl { flex: 1; }
+    #minBrightVal {
+      font-size: 0.78rem;
+      color: var(--text-dim);
+      min-width: 22px;
+      text-align: right;
+    }
+    .bright-slider-row {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 6px;
+    }
+    .bright-slider-row input[type=range] { flex: 1; }
+
+    /* ── Step row ────────────────────────────── */
+    .step-wrap {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      flex: 1;
+      min-width: 0;
+    }
+    .step-wrap input[type=range] { flex: 1; }
+    .step-wrap input[type=number] { width: 50px; flex-shrink: 0; }
+    #stepValue { font-size: 0.78rem; color: var(--text-dim); min-width: 20px; text-align: right; }
+
+    /* ── Timing row ──────────────────────────── */
+    .timing-row {
+      display: flex;
+      gap: 5px;
+      margin-bottom: 6px;
+    }
+    .timing-col { flex: 1; display: flex; flex-direction: column; gap: 3px; }
+    .timing-lbl { font-size: 0.7rem; color: var(--text-dim); }
+
+    /* ── Status / summary ────────────────────── */
+    #status {
+      font-size: 0.78rem;
+      color: var(--text-dim);
+      min-height: 15px;
+      margin-top: 5px;
+      line-height: 1.4;
+    }
+    #summary {
+      font-size: 0.78rem;
+      color: #b8c4f0;
+      min-height: 15px;
+      margin-top: 5px;
+      line-height: 1.4;
+    }
+
+    /* ── Main area ───────────────────────────── */
+    #main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      min-width: 0;
+    }
+
+    #panels {
+      flex: 1;
+      display: flex;
+      gap: 8px;
+      padding: 8px;
+      overflow: hidden;
+    }
+
+    /* ── Panel ───────────────────────────────── */
+    .panel {
+      flex: 1;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      min-width: 0;
+    }
+
+    .panel-head {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 7px 11px;
+      background: var(--bg);
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    .panel-head h2 {
+      font-size: 0.72rem;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: #8090c0;
+      flex: 1;
+    }
+    .panel-head label {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 0.78rem;
+      color: var(--text-dim);
+      cursor: pointer;
+      white-space: nowrap;
+    }
+    .panel-head button {
+      font-size: 0.72rem;
+      padding: 3px 8px;
+    }
+    #previewStatus {
+      font-size: 0.75rem;
+      color: var(--text-dim);
+    }
+
+    /* ── Canvas panels ───────────────────────── */
+    .canvas-wrap {
+      flex: 1;
+      position: relative;
+      background: #05060a;
+      overflow: hidden;
+      cursor: grab;
+      user-select: none;
+    }
+    .canvas-wrap.pz-dragging { cursor: grabbing; }
+
+    canvas {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    /* ── Camera preview panel ────────────────── */
+    .camera-preview-wrap {
+      flex: 1;
+      position: relative;
+      background: #05060a;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+    }
+    #cameraPreview {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      display: block;
+    }
+    #cameraPreview.override-active { cursor: crosshair; }
+
+    /* ── LED override overlay ────────────────── */
+    #ledOverlay {
+      display: none;
+      position: absolute;
+      inset: 0;
+      z-index: 10;
+      pointer-events: none;
+    }
+    #ledOverlayBar {
+      position: absolute;
+      bottom: 0; left: 0; right: 0;
+      background: rgba(6,4,4,0.94);
+      border-top: 1px solid var(--danger);
+      padding: 7px 12px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 0.8rem;
+      pointer-events: all;
+    }
+    #ledOverlayMsg { flex: 1; color: #fca5a5; }
+    #skipOnceBtn {
+      background: #7f1d1d;
+      border: 1px solid #ef4444;
+      color: #fca5a5;
+      padding: 4px 12px;
+      cursor: pointer;
+      font-size: 0.8rem;
+      border-radius: var(--radius-sm);
+    }
+    #skipOnceBtn:hover { background: #991b1b; }
+
+    /* ── Info tooltip icon ───────────────────── */
+    .tip-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: var(--border2);
+      color: var(--text-dim);
+      font-size: 0.65rem;
+      font-weight: 700;
+      font-style: normal;
+      cursor: help;
+      flex-shrink: 0;
+      user-select: none;
+      line-height: 1;
+      vertical-align: middle;
+      transition: background 0.1s, color 0.1s;
+    }
+    .tip-icon:hover { background: var(--primary); color: #fff; }
+
+    #tipFloat {
+      position: fixed;
+      z-index: 9999;
+      background: #1b1e2e;
+      border: 1px solid var(--border2);
+      border-radius: var(--radius-sm);
+      padding: 8px 11px;
+      font-size: 0.77rem;
+      color: var(--text);
+      line-height: 1.5;
+      max-width: 250px;
+      pointer-events: none;
+      display: none;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.5);
+      white-space: normal;
+    }
+
+    /* ── Utility ─────────────────────────────── */
+    .hidden { display: none !important; }
+
+    @media (max-width: 860px) {
+      #panels { flex-direction: column; }
+    }
+  </style>
 </head>
 <body>
   <div id="layout">
-    <div id="controls">
-      <div class="control-row">
-        <label class="field">Host <input id="hostInput" type="text" placeholder="http://wled.local" style="width:200px"></label>
-        <label class="field">LEDs <input id="countInput" type="number" min="1" step="1" value="150"></label>
-        <label class="field">Camera
-          <select id="cameraSelect">
-            <option value="" disabled selected>Scanning...</option>
-          </select>
-          <input id="cameraManualInput" type="number" min="0" step="1" value="0" class="hidden" title="Enter camera index manually when scanning is unavailable">
-        </label>
-        <button id="cameraScanBtn" type="button">Scan Cameras</button>
-        <label class="field">Segment <input id="segmentInput" type="number" min="0" step="1" value="0"></label>
-        <label class="field">Frames/LED <input id="framesInput" type="number" min="1" step="1" value="5"></label>
-        <label class="field">Transition (ms) <input id="transitionInput" type="number" min="0" max="65000" step="50" value="0"></label>
-        <label class="field">Min Bright <input id="minBrightInput" type="number" min="1" step="1" value="30"></label>
-        <label class="field"><input id="skipDimToggle" type="checkbox"> Skip dim LEDs</label>
-        <label class="field">Prelight (s) <input id="prelightInput" type="number" min="0" step="0.05" value="0.3"></label>
-        <label class="field">Capture (s) <input id="captureInput" type="number" min="0" step="0.05" value="0.6"></label>
-        <label class="field">Postlight (s) <input id="postlightInput" type="number" min="0" step="0.05" value="0.2"></label>
-        <button id="startBtn">Start Mapping</button>
-        <button id="stopBtn" disabled>Stop Mapping</button>
-        <button id="reloadBtn">Reload CSV</button>
-        <span id="status"></span>
+
+    <!-- ════════════ SIDEBAR ════════════ -->
+    <div id="sidebar">
+      <div id="sidebar-header">
+        <h1>WLED Mapper</h1>
+        <p>LED position mapping tool</p>
       </div>
-      <div class="control-row">
-        <label class="field step-field">Step
-          <div class="step-control">
-            <input id="stepSlider" type="range" min="1" max="80" step="1" value="10">
-            <input id="stepNumber" type="number" min="1" max="80" step="1" value="10">
-            <span id="stepValue">10</span>
+      <div id="sidebar-scroll">
+
+        <!-- Device -->
+        <div class="sb-section">
+          <div class="sb-title">Device</div>
+          <div class="sb-row">
+            <span class="sb-lbl">Host</span>
+            <input id="hostInput" type="text" placeholder="wled.local or 192.168.x.x">
+          </div>
+          <div class="sb-row">
+            <span class="sb-lbl">LED Count</span>
+            <input id="countInput" type="number" min="1" step="1" value="150">
+          </div>
+          <div class="sb-row">
+            <span class="sb-lbl">Segment</span>
+            <input id="segmentInput" type="number" min="0" step="1" value="0">
+          </div>
+          <div class="sb-row">
+            <span class="sb-lbl">Camera</span>
+            <select id="cameraSelect" style="flex:1">
+              <option value="" disabled selected>Scanning...</option>
+            </select>
+            <input id="cameraManualInput" type="number" min="0" step="1" value="0" class="hidden" title="Enter camera index manually">
+          </div>
+          <div class="sb-row">
+            <span class="sb-lbl"></span>
+            <button id="cameraScanBtn" type="button" class="btn-ghost" style="flex:1">Scan Cameras</button>
           </div>
-        </label>
-        <label class="field">Width <input id="widthInput" type="number" min="1" step="1" placeholder="auto"></label>
-        <label class="field">Height <input id="heightInput" type="number" min="1" step="1" placeholder="auto"></label>
-        <button id="generateBtn">Generate ledmap.json</button>
-        <button id="generateGapsBtn">Download 2D gaps</button>
-      </div>
-      <div class="control-row">
-        <span id="summary"></span>
-      </div>
-    </div>
-    <div id="panels">
-      <div class="panel preview-panel">
-        <div class="panel-head">
-          <h2>Camera Preview</h2>
-          <button id="previewRefreshBtn" type="button">Refresh Preview</button>
-          <span id="previewStatus"></span>
         </div>
-        <div class="camera-preview-wrap">
-          <img id="cameraPreview" alt="Camera preview" />
+
+        <!-- Capture -->
+        <div class="sb-section">
+          <div class="sb-title">Capture</div>
+          <div class="sb-row">
+            <span class="sb-lbl">Frames / LED</span>
+            <i class="tip-icon" data-tip="Camera frames captured while each LED is lit. The brightest 40% are averaged for the final position. More frames = more stable result, but slower mapping.">i</i>
+            <input id="framesInput" type="number" min="1" step="1" value="5">
+          </div>
+          <div class="sb-row">
+            <span class="sb-lbl">Transition (ms)</span>
+            <i class="tip-icon" data-tip="WLED's built-in crossfade time when switching LEDs. Keep at 0 for instant switching. If you increase this, also increase the Capture delay so the LED is fully on before sampling.">i</i>
+            <input id="transitionInput" type="number" min="0" max="65000" step="50" value="0">
+          </div>
+
+          <div class="bright-header">
+            <span class="sb-lbl">Brightness Threshold</span>
+            <span id="minBrightVal">200</span>
+          </div>
+          <div class="bright-slider-row">
+            <input id="minBrightSlider" type="range" min="0" max="255" step="1" value="200">
+            <button id="autoBrightBtn" type="button" class="btn-ghost" title="Set to peak brightness + 10">Auto</button>
+          </div>
+
+          <div class="sb-row">
+            <label style="display:flex;align-items:center;gap:6px;color:var(--text-dim);cursor:pointer;font-size:0.8rem">
+              <input id="skipDimToggle" type="checkbox"> Auto-Skip dim LEDs
+            </label>
+          </div>
+
+          <div class="timing-row">
+            <div class="timing-col">
+              <span class="timing-lbl">Prelight (ms)<i class="tip-icon" data-tip="Wait before lighting each LED, giving the strip time to settle after the previous state change. Also used as the delay between retry attempts.">i</i></span>
+              <input id="prelightInput" type="number" min="0" step="10" value="80">
+            </div>
+            <div class="timing-col">
+              <span class="timing-lbl">Capture (ms)<i class="tip-icon" data-tip="Wait after turning on the LED, before the camera starts grabbing frames. The LED needs to reach full brightness and the camera exposure must stabilise. Increase this if detections are inconsistent.">i</i></span>
+              <input id="captureInput" type="number" min="0" step="10" value="200">
+            </div>
+            <div class="timing-col">
+              <span class="timing-lbl">Postlight (ms)<i class="tip-icon" data-tip="Short pause after capture is done, while the LED is still on. Prevents hammering WLED with the next command immediately after sampling. Can usually stay low.">i</i></span>
+              <input id="postlightInput" type="number" min="0" step="10" value="20">
+            </div>
+          </div>
         </div>
-      </div>
-      <div class="panel">
-        <div class="panel-head">
-          <h2>Camera Space</h2>
-          <label class="field"><input id="wireToggle" type="checkbox"> Wire LEDs (in order)</label>
+
+        <!-- Actions -->
+        <div class="sb-section">
+          <div class="sb-title">Actions</div>
+          <button id="startBtn" class="btn-primary sb-full-btn">▶ Start Mapping</button>
+          <button id="stopBtn" class="btn-danger sb-full-btn" disabled>■ Stop Mapping</button>
+          <button id="retryWledBtn" class="btn-warn sb-full-btn" style="display:none">⟳ Retry WLED</button>
+          <button id="reloadBtn" class="btn-ghost sb-full-btn">↺ Reload CSV</button>
+          <div id="status"></div>
+        </div>
+
+        <!-- Grid -->
+        <div class="sb-section">
+          <div class="sb-title">Grid</div>
+          <div class="sb-row">
+            <span class="sb-lbl">Step</span>
+            <i class="tip-icon" data-tip="Controls grid resolution. Camera coordinates are divided into cells of this size — smaller step = finer grid with more cells, larger step = coarser grid. Overridden per-axis when Width or Height are set explicitly.">i</i>
+            <div class="step-wrap">
+              <input id="stepSlider" type="range" min="1" max="80" step="1" value="10">
+              <input id="stepNumber" type="number" min="1" max="80" step="1" value="10">
+              <span id="stepValue">10</span>
+            </div>
+          </div>
+          <div class="sb-row">
+            <span class="sb-lbl">Width</span>
+            <input id="widthInput" type="number" min="1" step="1" placeholder="auto">
+          </div>
+          <div class="sb-row">
+            <span class="sb-lbl">Height</span>
+            <input id="heightInput" type="number" min="1" step="1" placeholder="auto">
+          </div>
+          <div class="sb-pair" style="margin-top:6px">
+            <button id="generateBtn" class="btn-ghost">Generate ledmap</button>
+            <button id="generateGapsBtn" class="btn-ghost">Download gaps</button>
+          </div>
+          <div id="summary"></div>
+        </div>
+
+      </div><!-- /sidebar-scroll -->
+    </div><!-- /sidebar -->
+
+    <!-- ════════════ MAIN PANELS ════════════ -->
+    <div id="main">
+      <div id="panels">
+
+        <!-- Camera Preview -->
+        <div class="panel preview-panel" style="flex:1.5">
+          <div class="panel-head">
+            <h2>Camera Preview</h2>
+            <label><input id="showMaskToggle" type="checkbox" checked> Show Mask</label>
+            <span id="previewStatus"></span>
+          </div>
+          <div class="camera-preview-wrap">
+            <img id="cameraPreview" alt="Camera preview" />
+            <div id="ledOverlay">
+              <div id="ledOverlayBar">
+                <span id="ledOverlayMsg">LED not detected</span>
+                <button id="skipOnceBtn" type="button">Skip Once</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Stacked: Camera Space + Grid Preview -->
+        <div style="flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;overflow:hidden">
+
+          <!-- Camera Space -->
+          <div class="panel" style="flex:1">
+            <div class="panel-head">
+              <h2>Camera Space</h2>
+              <label><input id="wireToggle" type="checkbox" checked> Wire LEDs</label>
+              <button id="resetSourceBtn" type="button" class="btn-ghost">Reset View</button>
+            </div>
+            <div class="canvas-wrap"><canvas id="sourceCanvas" width="640" height="640"></canvas></div>
+          </div>
+
+          <!-- Grid Preview -->
+          <div class="panel" style="flex:1">
+            <div class="panel-head">
+              <h2>Grid Preview</h2>
+              <button id="resetGridBtn" type="button" class="btn-ghost">Reset View</button>
+            </div>
+            <div class="canvas-wrap"><canvas id="gridCanvas" width="640" height="640"></canvas></div>
+          </div>
+
         </div>
-        <div class="canvas-wrap"><canvas id="sourceCanvas" width="640" height="640"></canvas></div>
-      </div>
-      <div class="panel">
-        <h2>Grid Preview</h2>
-        <div class="canvas-wrap"><canvas id="gridCanvas" width="640" height="640"></canvas></div>
-      </div>
-    </div>
-  </div>
+
+      </div><!-- /panels -->
+    </div><!-- /main -->
+
+  </div><!-- /layout -->
+  <div id="tipFloat"></div>
 
   <script>
     const csvCandidates = ["/data/mapping.csv", "data/mapping.csv", "../data/mapping.csv", "./data/mapping.csv"];    
@@ -119,6 +656,15 @@ <h2>Grid Preview</h2>
     const wireToggle = document.getElementById('wireToggle');
     const statusEl = document.getElementById('status');
     const summaryEl = document.getElementById('summary');
+    function normaliseHost(raw) {
+      const s = (raw || '').trim();
+      if (!s) return '';
+      // Already has a scheme
+      if (/^https?:\/\//i.test(s)) return s.replace(/\/+$/, '');
+      // Bare IP or hostname — prepend http://
+      return 'http://' + s.replace(/\/+$/, '');
+    }
+
     const hostInput = document.getElementById('hostInput');
     const countInput = document.getElementById('countInput');
     const cameraSelect = document.getElementById('cameraSelect');
@@ -130,7 +676,9 @@ <h2>Grid Preview</h2>
     const captureInput = document.getElementById('captureInput');
     const postlightInput = document.getElementById('postlightInput');
     const transitionInput = document.getElementById('transitionInput');
-    const minBrightInput = document.getElementById('minBrightInput');
+    const minBrightSlider = document.getElementById('minBrightSlider');
+    const minBrightVal = document.getElementById('minBrightVal');
+    const showMaskToggle = document.getElementById('showMaskToggle');
     const skipDimToggle = document.getElementById('skipDimToggle');
     const stepSlider = document.getElementById('stepSlider');
     const stepNumber = document.getElementById('stepNumber');
@@ -139,22 +687,88 @@ <h2>Grid Preview</h2>
     const heightInput = document.getElementById('heightInput');
     const previewImage = document.getElementById('cameraPreview');
     const previewStatus = document.getElementById('previewStatus');
-    const previewRefreshBtn = document.getElementById('previewRefreshBtn');
+    const ledOverlay = document.getElementById('ledOverlay');
+    const ledOverlayMsg = document.getElementById('ledOverlayMsg');
+    const skipOnceBtn = document.getElementById('skipOnceBtn');
     const startBtn = document.getElementById('startBtn');
     const stopBtn = document.getElementById('stopBtn');
+    const retryWledBtn = document.getElementById('retryWledBtn');
 
-    let sourcePoints = [];
+    let sourceRawPoints = [];
     let currentGrid = null;
     let liveRawPoints = [];
     let liveModeActive = false;
     let livePointsCursor = -1;
     let liveFetchPending = false;
-    const PREVIEW_REFRESH_INTERVAL = 1000;
-    let previewLoopTimer = null;
-    let previewLoading = false;
-    let previewPaused = false;
+    let previewStreamIndex = null; // camera index currently being streamed
+    let previewStreamUrl = null;   // full URL of the active stream (includes mask params)
     let conversionTimer = null;
 
+    // ── Pan / zoom ─────────────────────────────────────────────────────────────
+    // ctx-based: canvas resolution tracks container×DPR, pan/zoom applied during render
+    function makePanZoom(canvas, resetBtn, onRedraw) {
+      const dpr = window.devicePixelRatio || 1;
+      let tx = 0, ty = 0, scale = 1;
+      let logW = 0, logH = 0;
+      let dragging = false, startX = 0, startY = 0, startTx = 0, startTy = 0;
+      const wrap = canvas.parentElement;
+
+      function getTransform() { return { tx, ty, scale, logW, logH, dpr }; }
+      function reset() { tx = 0; ty = 0; scale = 1; onRedraw(); }
+
+      // Resize canvas to match container at full DPR resolution
+      const ro = new ResizeObserver(entries => {
+        for (const e of entries) {
+          const w = e.contentRect.width, h = e.contentRect.height;
+          if (!w || !h || (w === logW && h === logH)) continue;
+          logW = w; logH = h;
+          canvas.width  = Math.round(w * dpr);
+          canvas.height = Math.round(h * dpr);
+          onRedraw();
+        }
+      });
+      ro.observe(wrap);
+
+      wrap.addEventListener('wheel', e => {
+        e.preventDefault();
+        const r = wrap.getBoundingClientRect();
+        const mx = e.clientX - r.left, my = e.clientY - r.top;
+        const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+        const ns = Math.max(0.1, Math.min(30, scale * factor));
+        tx = mx - (mx - tx) * (ns / scale);
+        ty = my - (my - ty) * (ns / scale);
+        scale = ns;
+        onRedraw();
+      }, { passive: false });
+
+      wrap.addEventListener('mousedown', e => {
+        if (e.button !== 0) return;
+        dragging = true; startX = e.clientX; startY = e.clientY; startTx = tx; startTy = ty;
+        wrap.classList.add('pz-dragging');
+        e.preventDefault();
+      });
+
+      window.addEventListener('mousemove', e => {
+        if (!dragging) return;
+        tx = startTx + (e.clientX - startX);
+        ty = startTy + (e.clientY - startY);
+        onRedraw();
+      });
+
+      window.addEventListener('mouseup', () => {
+        if (!dragging) return;
+        dragging = false;
+        wrap.classList.remove('pz-dragging');
+      });
+
+      if (resetBtn) resetBtn.addEventListener('click', reset);
+      return { getTransform, reset };
+    }
+
+    const sourcePZ = makePanZoom(sourceCanvas, document.getElementById('resetSourceBtn'), () => renderSource());
+    const gridPZ   = makePanZoom(gridCanvas,   document.getElementById('resetGridBtn'),   () => renderGrid());
+    // ───────────────────────────────────────────────────────────────────────────
+
     function formatLedMapText(map, width, height) {
       const lines = ['{"map":', '  ['];
       for (let row = 0; row < height; row += 1) {
@@ -205,12 +819,14 @@ <h2>Grid Preview</h2>
 
     async function refreshCameraList() {
       if (!cameraSelect) { return; }
+      // Stop the stream first — scanning opens cameras and concurrent access crashes OpenCV
+      stopPreviewStream();
       const previousValue = cameraSelect.value;
       cameraSelect.disabled = true;
       cameraSelect.innerHTML = '<option value="" disabled>Scanning...</option>';
-      previewStatus.textContent = 'Scanning cameras...';
       cameraSelect.classList.remove('hidden');
       if (cameraManualInput) { cameraManualInput.classList.add('hidden'); }
+      previewStatus.textContent = 'Scanning cameras...';
       try {
         const res = await fetch('/api/cameras?max_index=12', { cache: 'no-store' });
         if (!res.ok) { throw new Error('Camera scan failed'); }
@@ -224,106 +840,97 @@ <h2>Grid Preview</h2>
           cameraSelect.appendChild(option);
           cameraSelect.value = '';
           cameraSelect.disabled = true;
-          previewStatus.textContent = 'No cameras detected – enter an index manually';
-          if (previewImage) { previewImage.removeAttribute('src'); }
+          cameraSelect.classList.remove('hidden');
           if (cameraManualInput) { cameraManualInput.classList.remove('hidden'); }
+          previewStatus.textContent = 'No cameras detected – enter an index manually';
           return;
         }
         const frag = document.createDocumentFragment();
         cameras.forEach(cam => {
           const option = document.createElement('option');
           option.value = String(cam.index);
-          option.textContent = `Camera ${cam.index}`;
+          if (cam.available === false) {
+            option.textContent = `Camera ${cam.index} (unavailable)`;
+            option.disabled = true;
+          } else {
+            option.textContent = `Camera ${cam.index}`;
+          }
           frag.appendChild(option);
         });
         cameraSelect.appendChild(frag);
-        const retained = cameras.find(cam => String(cam.index) === previousValue);
-        cameraSelect.value = retained ? String(retained.index) : String(cameras[0].index);
-        cameraSelect.disabled = false;
-        previewStatus.textContent = '';
+        const availableCameras = cameras.filter(cam => cam.available !== false);
+        const retained = availableCameras.find(cam => String(cam.index) === previousValue);
+        const defaultCam = retained || availableCameras[0];
+        cameraSelect.value = defaultCam ? String(defaultCam.index) : '';
+        cameraSelect.disabled = !defaultCam;
+        cameraSelect.classList.remove('hidden');
         if (cameraManualInput) {
           cameraManualInput.classList.add('hidden');
           cameraManualInput.value = cameraSelect.value || '0';
         }
-        await refreshPreview();
+        previewStatus.textContent = '';
+        previewStreamIndex = null;
+        startPreviewStream();
       } catch (err) {
-        cameraSelect.innerHTML = '';
-        const option = document.createElement('option');
-        option.value = '';
-        option.textContent = 'Scan failed';
-        cameraSelect.appendChild(option);
+        cameraSelect.innerHTML = '<option value="" disabled selected>Scan failed</option>';
         cameraSelect.value = '';
-        cameraSelect.disabled = true;
+        cameraSelect.disabled = false; // allow retry via the scan button
+        cameraSelect.classList.remove('hidden');
+        if (cameraManualInput) { cameraManualInput.classList.add('hidden'); }
         previewStatus.textContent = err && err.message ? err.message : 'Camera scan failed';
-        if (previewImage) { previewImage.removeAttribute('src'); }
-        if (cameraManualInput) { cameraManualInput.classList.remove('hidden'); }
-        cameraSelect.classList.add('hidden');
-      } finally {
-        startPreviewLoop();
       }
     }
 
-    async function refreshPreview(force = false) {
+    function buildStreamUrl(index) {
+      const threshold = minBrightSlider ? Number(minBrightSlider.value) : 200;
+      if (showMaskToggle && showMaskToggle.checked) {
+        return `/api/camera_mask_stream/${index}?width=640&threshold=${threshold}`;
+      }
+      return `/api/camera_stream/${index}?width=640`;
+    }
+
+    function startPreviewStream() {
       if (!previewImage) { return; }
       const selectVisible = cameraSelect && !cameraSelect.classList.contains('hidden');
       if (selectVisible && cameraSelect.value === '') {
         previewStatus.textContent = 'Select a camera to preview';
         previewImage.removeAttribute('src');
+        previewStreamIndex = null;
+        previewStreamUrl = null;
         return;
       }
       const manualVisible = cameraManualInput && !cameraManualInput.classList.contains('hidden');
       if (manualVisible && (!cameraManualInput.value && cameraManualInput.value !== '0')) {
         previewStatus.textContent = 'Enter a camera index';
         previewImage.removeAttribute('src');
+        previewStreamIndex = null;
+        previewStreamUrl = null;
         return;
       }
       const index = getSelectedCameraIndex();
       if (Number.isNaN(index)) { return; }
-      if (previewLoading && !force) { return; }
-      previewLoading = true;
-      previewStatus.textContent = 'Loading preview...';
-      const cacheBust = Date.now();
-      const url = `/api/camera_preview/${index}?width=640&_=${cacheBust}`;
-      return new Promise(resolve => {
-        const finish = (message) => {
-          previewLoading = false;
-          if (message !== undefined) {
-            previewStatus.textContent = message;
-          }
-          resolve();
-        };
-        previewImage.onload = () => {
-          finish('');
-        };
-        previewImage.onerror = () => {
-          finish('Preview failed');
-        };
-        previewImage.src = url;
-      });
-    }
-
-    function startPreviewLoop() {
-      if (previewLoopTimer || previewPaused) { return; }
-      previewLoopTimer = setInterval(() => { refreshPreview(); }, PREVIEW_REFRESH_INTERVAL);
-      refreshPreview();
-    }
-
-    function stopPreviewLoop() {
-      if (!previewLoopTimer) { return; }
-      clearInterval(previewLoopTimer);
-      previewLoopTimer = null;
-    }
-
-    function pausePreview(message) {
-      previewPaused = true;
-      stopPreviewLoop();
-      if (previewImage) { previewImage.removeAttribute('src'); }
-      previewStatus.textContent = message || 'Camera in use during mapping';
+      const url = buildStreamUrl(index);
+      if (previewStreamUrl === url) { return; } // already streaming this exact URL
+      previewStreamIndex = index;
+      previewStreamUrl = url;
+      previewStatus.textContent = '';
+      // Reconnect if the stream ends naturally (e.g. server-side pump recovery)
+      previewImage.onload = () => { previewStatus.textContent = ''; };
+      previewImage.onerror = () => {
+        previewStreamIndex = null;
+        previewStreamUrl = null;
+        setTimeout(() => startPreviewStream(), 1500);
+      };
+      previewImage.src = url;
     }
 
-    function resumePreview() {
-      previewPaused = false;
-      startPreviewLoop();
+    function stopPreviewStream() {
+      if (!previewImage) { return; }
+      previewImage.onload = null;
+      previewImage.onerror = null;
+      previewImage.removeAttribute('src');
+      previewStreamIndex = null;
+      previewStreamUrl = null;
     }
 
     function getStepValue() {
@@ -351,8 +958,8 @@ <h2>Grid Preview</h2>
         points.sort((a, b) => (a.led ?? 0) - (b.led ?? 0));
         liveRawPoints = liveRawPoints.concat(points);
         livePointsCursor = liveRawPoints[liveRawPoints.length - 1].led ?? livePointsCursor;
-        sourcePoints = scaleSourcePoints(liveRawPoints);
-        renderSource(sourcePoints);
+        sourceRawPoints = liveRawPoints;
+        renderSource();
         scheduleConversion(500);
       } catch (err) {
         console.warn('Live point fetch failed', err);
@@ -361,7 +968,7 @@ <h2>Grid Preview</h2>
       }
     }
 
-    function scaleSourcePoints(data) {
+    function scaleSourcePoints(data, W, H) {
       if (!data.length) return [];
       const minX = Math.min(...data.map(d => d.x));
       const maxX = Math.max(...data.map(d => d.x));
@@ -370,46 +977,43 @@ <h2>Grid Preview</h2>
       const padding = 40;
       const spanX = Math.max(maxX - minX, 1);
       const spanY = Math.max(maxY - minY, 1);
-      const scale = Math.min((sourceCanvas.width - padding * 2) / spanX, (sourceCanvas.height - padding * 2) / spanY);
-      const offsetX = padding + (sourceCanvas.width - padding * 2 - spanX * scale) / 2;
-      const offsetY = padding + (sourceCanvas.height - padding * 2 - spanY * scale) / 2;
+      const s = Math.min((W - padding * 2) / spanX, (H - padding * 2) / spanY);
+      const offsetX = padding + (W - padding * 2 - spanX * s) / 2;
+      const offsetY = padding + (H - padding * 2 - spanY * s) / 2;
       return data.map(item => ({
         led: item.led, brightness: item.brightness,
-        x: offsetX + (item.x - minX) * scale,
-        y: offsetY + (item.y - minY) * scale,
+        x: offsetX + (item.x - minX) * s,
+        y: offsetY + (item.y - minY) * s,
       }));
     }
 
-    function renderSource(points) {
+    function renderSource() {
+      const { tx, ty, scale, logW, logH, dpr } = sourcePZ.getTransform();
+      if (!logW || !logH) return;
+      sourceCtx.save();
+      sourceCtx.scale(dpr, dpr);
       sourceCtx.fillStyle = '#08090d';
-      sourceCtx.fillRect(0, 0, sourceCanvas.width, sourceCanvas.height);
-      sourceCtx.strokeStyle = '#1f2430';
-      sourceCtx.strokeRect(0, 0, sourceCanvas.width, sourceCanvas.height);
+      sourceCtx.fillRect(0, 0, logW, logH);
 
-      if (!points.length) {
+      if (!sourceRawPoints.length) {
         sourceCtx.fillStyle = '#888';
         sourceCtx.font = '14px Arial';
         sourceCtx.textAlign = 'center';
         sourceCtx.textBaseline = 'middle';
-        sourceCtx.fillText('No CSV data loaded', sourceCanvas.width / 2, sourceCanvas.height / 2);
+        sourceCtx.fillText('No CSV data loaded', logW / 2, logH / 2);
+        sourceCtx.restore();
         return;
       }
 
-      sourceCtx.font = '11px Arial';
+      const points = scaleSourcePoints(sourceRawPoints, logW, logH);
+      sourceCtx.translate(tx, ty);
+      sourceCtx.scale(scale, scale);
       sourceCtx.textAlign = 'center';
       sourceCtx.textBaseline = 'middle';
-      points.forEach(p => {
-        sourceCtx.beginPath();
-        sourceCtx.fillStyle = '#3b82f6';
-        sourceCtx.arc(p.x, p.y, pointRadius, 0, Math.PI * 2);
-        sourceCtx.fill();
-        sourceCtx.fillStyle = '#f1f1f1';
-        sourceCtx.fillText(String(p.led), p.x, p.y);
-      });
 
+      // 1. Draw wire line first (behind everything)
       if (wireToggle && wireToggle.checked && points.length > 1) {
         const ordered = points.slice().sort((a, b) => a.led - b.led);
-        sourceCtx.save();
         sourceCtx.strokeStyle = '#ef4444';
         sourceCtx.lineWidth = 2;
         sourceCtx.beginPath();
@@ -418,46 +1022,86 @@ <h2>Grid Preview</h2>
           sourceCtx.lineTo(ordered[i].x, ordered[i].y);
         }
         sourceCtx.stroke();
-        sourceCtx.restore();
       }
+
+      // 2. Draw dots and labels on top
+      sourceCtx.font = `${Math.max(6, Math.round(pointRadius * 1.2))}px Arial`;
+      points.forEach(p => {
+        sourceCtx.beginPath();
+        sourceCtx.fillStyle = '#3b82f6';
+        sourceCtx.arc(p.x, p.y, pointRadius, 0, Math.PI * 2);
+        sourceCtx.fill();
+        sourceCtx.fillStyle = '#f1f1f1';
+        sourceCtx.fillText(String(p.led), p.x, p.y);
+      });
+      sourceCtx.restore();
     }
 
-    function renderGrid(grid) {
+    function renderGrid() {
+      const { tx, ty, scale, logW, logH, dpr } = gridPZ.getTransform();
+      if (!logW || !logH) return;
+      gridCtx.save();
+      gridCtx.scale(dpr, dpr);
       gridCtx.fillStyle = '#08090d';
-      gridCtx.fillRect(0, 0, gridCanvas.width, gridCanvas.height);
-      gridCtx.strokeStyle = '#1f2430';
-      gridCtx.strokeRect(0, 0, gridCanvas.width, gridCanvas.height);
-      if (!grid) {
+      gridCtx.fillRect(0, 0, logW, logH);
+
+      if (!currentGrid) {
         gridCtx.fillStyle = '#888';
         gridCtx.font = '14px Arial';
         gridCtx.textAlign = 'center';
         gridCtx.textBaseline = 'middle';
-        gridCtx.fillText('No grid produced', gridCanvas.width / 2, gridCanvas.height / 2);
+        gridCtx.fillText('No grid produced', logW / 2, logH / 2);
+        gridCtx.restore();
         return;
       }
+
       const padding = 40;
-      const cellSize = Math.min((gridCanvas.width - padding * 2) / grid.width, (gridCanvas.height - padding * 2) / grid.height);
-      const startX = (gridCanvas.width - cellSize * grid.width) / 2;
-      const startY = (gridCanvas.height - cellSize * grid.height) / 2;
-      gridCtx.font = '11px Arial';
+      const cellSize = Math.min((logW - padding * 2) / currentGrid.width, (logH - padding * 2) / currentGrid.height);
+      const startX = (logW - cellSize * currentGrid.width) / 2;
+      const startY = (logH - cellSize * currentGrid.height) / 2;
+      gridCtx.translate(tx, ty);
+      gridCtx.scale(scale, scale);
       gridCtx.textAlign = 'center';
       gridCtx.textBaseline = 'middle';
-      for (let row = 0; row < grid.height; row += 1) {
-        for (let col = 0; col < grid.width; col += 1) {
-          const idx = row * grid.width + col;
-          const led = grid.map[idx];
+      gridCtx.font = `${Math.max(6, Math.min(Math.round(cellSize * 0.55), 11))}px Arial`;
+
+      // Pass 1: fill LED cells (full cell, no inset gap)
+      for (let row = 0; row < currentGrid.height; row += 1) {
+        for (let col = 0; col < currentGrid.width; col += 1) {
+          const led = currentGrid.map[row * currentGrid.width + col];
+          if (led !== -1) {
+            const x = startX + col * cellSize;
+            const y = startY + row * cellSize;
+            gridCtx.fillStyle = '#2563eb';
+            gridCtx.fillRect(x, y, cellSize, cellSize);
+          }
+        }
+      }
+
+      // Pass 2: grid lines on top of fills
+      gridCtx.strokeStyle = '#1f2430';
+      gridCtx.lineWidth = 1;
+      for (let row = 0; row < currentGrid.height; row += 1) {
+        for (let col = 0; col < currentGrid.width; col += 1) {
           const x = startX + col * cellSize;
           const y = startY + row * cellSize;
-          gridCtx.strokeStyle = '#1f2430';
           gridCtx.strokeRect(x, y, cellSize, cellSize);
+        }
+      }
+
+      // Pass 3: labels on top of everything
+      gridCtx.fillStyle = '#f8fafc';
+      for (let row = 0; row < currentGrid.height; row += 1) {
+        for (let col = 0; col < currentGrid.width; col += 1) {
+          const led = currentGrid.map[row * currentGrid.width + col];
           if (led !== -1) {
-            gridCtx.fillStyle = '#2563eb';
-            gridCtx.fillRect(x + 1, y + 1, cellSize - 2, cellSize - 2);
-            gridCtx.fillStyle = '#f8fafc';
+            const x = startX + col * cellSize;
+            const y = startY + row * cellSize;
             gridCtx.fillText(String(led), x + cellSize / 2, y + cellSize / 2);
           }
         }
       }
+      gridCtx.restore();
     }
 
     function updateSummary(grid) {
@@ -473,14 +1117,22 @@ <h2>Grid Preview</h2>
       try {
         const text = await fetchFirst(csvCandidates);
         const raw = parseCsv(text);
-        sourcePoints = scaleSourcePoints(raw);
-        renderSource(sourcePoints);
+        if (!raw.length) throw new Error('no-data');
+        sourceRawPoints = raw;
+        renderSource();
         statusEl.textContent = `CSV loaded (${raw.length} rows)`;
         await applyConversion();
       } catch (err) {
-        sourcePoints = [];
-        renderSource(sourcePoints);
-        statusEl.textContent = err.message || 'Failed to load CSV';
+        sourceRawPoints = [];
+        renderSource();
+        currentGrid = null;
+        renderGrid();
+        updateSummary(null);
+        if (err.message !== 'no-data' && err.message !== 'mapping.csv not found') {
+          statusEl.textContent = err.message || 'Failed to load CSV';
+        } else {
+          statusEl.textContent = 'No mapping data yet — run capture first';
+        }
       }
     }
 
@@ -494,16 +1146,21 @@ <h2>Grid Preview</h2>
       if (!silent) { statusEl.textContent = 'Converting...'; }
       try {
         const res = await fetch('/api/convert', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
+        if (res.status === 404) {
+          currentGrid = null; renderGrid(); updateSummary(null);
+          if (!silent) { statusEl.textContent = 'No mapping data yet — run capture first'; }
+          return;
+        }
         if (!res.ok) throw new Error('Convert failed');
         const data = await res.json();
         currentGrid = { map: data.map, width: data.width, height: data.height };
-        renderGrid(currentGrid);
+        renderGrid();
         updateSummary(currentGrid);
         if (!silent) { statusEl.textContent = `Ready (${currentGrid.width}x${currentGrid.height})`; }
       } catch (err) {
         if (!silent) {
           currentGrid = null;
-          renderGrid(null);
+          renderGrid();
           updateSummary(null);
           statusEl.textContent = err.message || 'Conversion failed';
         } else {
@@ -521,27 +1178,49 @@ <h2>Grid Preview</h2>
 
     // Mapping controls
     let pollTimer = null;
+    const devicePanelInputs = [
+      'hostInput', 'countInput', 'segmentInput', 'cameraSelect', 'cameraManualInput', 'cameraScanBtn',
+      'autoBrightBtn',
+    ].map(id => document.getElementById(id)).filter(Boolean);
+
+    let mappingActive = false;
+
     function setMappingRunning(running) {
+      mappingActive = running;
       if (startBtn) { startBtn.disabled = running; }
       if (stopBtn) { stopBtn.disabled = !running; }
+      if (!running && retryWledBtn) { retryWledBtn.style.display = 'none'; }
+      devicePanelInputs.forEach(el => { el.disabled = running; });
+    }
+
+    async function pushConfigUpdate(fields) {
+      if (!mappingActive) return;
+      try {
+        await fetch('/api/update_config', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(fields),
+        });
+      } catch (_) { /* best-effort, ignore network errors */ }
     }
 
     async function startMapping() {
       liveRawPoints = [];
       livePointsCursor = -1;
       liveModeActive = true;
-      renderSource([]);
+      sourceRawPoints = [];
+      renderSource();
       const payload = {
-        host: hostInput.value || 'http://wled.local',
+        host: normaliseHost(hostInput.value) || 'http://wled.local',
         led_count: Number(countInput.value) || 1,
         camera_index: getSelectedCameraIndex(),
         frames_per_led: Number(framesInput.value) || 5,
-        min_brightness: Number(minBrightInput.value) || 30,
+        min_brightness: minBrightSlider ? Number(minBrightSlider.value) : 200,
         segment_index: Number(segmentInput.value) || 0,
         transition_ms: Number(transitionInput.value) || 0,
-        prelight_delay: Number(prelightInput.value) || 0,
-        capture_delay: Number(captureInput.value) || 0,
-        postlight_delay: Number(postlightInput.value) || 0,
+        prelight_delay: (Number(prelightInput.value) || 0) / 1000,
+        capture_delay: (Number(captureInput.value) || 0) / 1000,
+        postlight_delay: (Number(postlightInput.value) || 0) / 1000,
         skip_dim_leds: !!(skipDimToggle && skipDimToggle.checked),
       };
       statusEl.textContent = 'Starting mapping...';
@@ -549,7 +1228,6 @@ <h2>Grid Preview</h2>
         setMappingRunning(true);
         const res = await fetch('/api/map', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
         if (!res.ok) throw new Error('Failed to start mapping');
-        pausePreview('Camera in use during mapping');
         fetchLivePoints().catch(() => {});
         // Poll status
         if (pollTimer) { clearInterval(pollTimer); }
@@ -560,18 +1238,34 @@ <h2>Grid Preview</h2>
             const st = await sres.json();
             const cur = st.current ?? 0;
             const tot = st.total ?? 0;
-            statusEl.textContent = `${st.message || st.status} ${cur}/${tot}`;
-            const capturing = st.status === 'running' || st.status === 'starting';
-            liveModeActive = capturing;
-            if (capturing) {
-              pausePreview('Camera in use during mapping');
-              await fetchLivePoints();
+
+            if (st.status === 'waiting_input') {
+              const led = st.waiting_led ?? cur;
+              statusEl.textContent = `Waiting for input — LED ${led} not detected`;
+              showLedOverlay(led);
+              if (retryWledBtn) { retryWledBtn.style.display = 'none'; }
+              liveModeActive = false;
+            } else if (st.status === 'wled_timeout') {
+              hideLedOverlay();
+              statusEl.textContent = st.message || 'WLED not responding – click Retry after fixing the device';
+              if (retryWledBtn) { retryWledBtn.style.display = 'inline-block'; }
+              liveModeActive = false;
+            } else {
+              hideLedOverlay();
+              if (retryWledBtn) { retryWledBtn.style.display = 'none'; }
+              statusEl.textContent = `${st.message || st.status} ${cur}/${tot}`;
+              const capturing = st.status === 'running' || st.status === 'starting';
+              liveModeActive = capturing;
+              if (capturing) {
+                await fetchLivePoints();
+              }
             }
+
             if (st.status === 'completed' || st.status === 'error' || st.status === 'stopped') {
               clearInterval(pollTimer);
               pollTimer = null;
               liveModeActive = false;
-              resumePreview();
+              hideLedOverlay();
               setMappingRunning(false);
               if (st.status === 'completed') {
                 // Auto-reload CSV once done
@@ -589,11 +1283,62 @@ <h2>Grid Preview</h2>
         liveModeActive = false;
         liveRawPoints = [];
         livePointsCursor = -1;
-        resumePreview();
         setMappingRunning(false);
       }
     }
 
+    // ── Manual override overlay ──────────────────────────────────────────────
+
+    let waitingForOverride = false;
+
+    function showLedOverlay(led) {
+      if (!ledOverlay) return;
+      if (ledOverlayMsg) ledOverlayMsg.textContent = `LED ${led} not detected – click image to place manually`;
+      ledOverlay.style.display = 'block';
+      if (previewImage) previewImage.classList.add('override-active');
+      waitingForOverride = true;
+    }
+
+    function hideLedOverlay() {
+      if (ledOverlay) ledOverlay.style.display = 'none';
+      if (previewImage) previewImage.classList.remove('override-active');
+      waitingForOverride = false;
+    }
+
+    async function resolveOverride(decision) {
+      hideLedOverlay();
+      try {
+        await fetch('/api/resolve_led', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(decision),
+        });
+      } catch (err) {
+        console.error('resolve_led failed', err);
+      }
+    }
+
+    // Click directly on the camera img — offsetX/offsetY are always relative
+    // to the element itself, so no bounding-rect math needed.
+    if (previewImage) {
+      previewImage.addEventListener('click', e => {
+        if (!waitingForOverride) return;
+        const w = previewImage.offsetWidth;
+        const h = previewImage.offsetHeight;
+        if (!w || !h) return;
+        resolveOverride({
+          norm_x: e.offsetX / w,   // horizontal 0-1
+          norm_y: e.offsetY / h,   // vertical   0-1
+        });
+      });
+    }
+    if (skipOnceBtn) {
+      skipOnceBtn.addEventListener('click', e => {
+        e.stopPropagation();
+        resolveOverride({ skip: true });
+      });
+    }
+
     async function stopMapping() {
       if (stopBtn) { stopBtn.disabled = true; }
       statusEl.textContent = 'Stopping mapping...';
@@ -652,12 +1397,73 @@ <h2>Grid Preview</h2>
       }
       downloadGaps();
     });
-    if (wireToggle) { wireToggle.addEventListener('change', () => renderSource(sourcePoints)); }
+    if (wireToggle) { wireToggle.addEventListener('change', () => renderSource()); }
     if (cameraScanBtn) { cameraScanBtn.addEventListener('click', () => { refreshCameraList(); }); }
-    if (cameraSelect) { cameraSelect.addEventListener('change', () => { refreshPreview(true); startPreviewLoop(); }); }
-    if (cameraManualInput) { cameraManualInput.addEventListener('change', () => { refreshPreview(true); startPreviewLoop(); }); }
-    if (previewRefreshBtn) { previewRefreshBtn.addEventListener('click', () => { refreshPreview(true); }); }
+    if (cameraSelect) { cameraSelect.addEventListener('change', () => { previewStreamUrl = null; previewStreamIndex = null; startPreviewStream(); }); }
+    if (cameraManualInput) { cameraManualInput.addEventListener('change', () => { previewStreamUrl = null; previewStreamIndex = null; startPreviewStream(); }); }
+
+    // Min Bright slider — update display value; reconnect mask stream after user stops dragging
+    let _maskDebounce = null;
+    if (minBrightSlider && minBrightVal) {
+      const syncMinBright = () => { minBrightVal.textContent = minBrightSlider.value; };
+      syncMinBright();
+      window.addEventListener('load', syncMinBright);
+      minBrightSlider.addEventListener('input', () => {
+        minBrightVal.textContent = minBrightSlider.value;
+        if (showMaskToggle && showMaskToggle.checked) {
+          clearTimeout(_maskDebounce);
+          _maskDebounce = setTimeout(() => { previewStreamUrl = null; startPreviewStream(); }, 400);
+        }
+      });
+    }
+    // Auto-brightness button — samples peak brightness and sets slider to peak + 2
+    const autoBrightBtn = document.getElementById('autoBrightBtn');
+    if (autoBrightBtn && minBrightSlider && minBrightVal) {
+      autoBrightBtn.addEventListener('click', async () => {
+        const idx = getSelectedCameraIndex();
+        autoBrightBtn.disabled = true;
+        autoBrightBtn.textContent = '…';
+        try {
+          const res = await fetch(`/api/camera_peak_brightness/${idx}`, { cache: 'no-store' });
+          if (!res.ok) throw new Error('No frame available');
+          const data = await res.json();
+          const newVal = data.peak + 10;
+          if (newVal > 255) {
+            alert('Image is too bright — turn down your lights or adjust camera exposure before mapping.');
+          } else {
+            minBrightSlider.value = newVal;
+            minBrightVal.textContent = newVal;
+            if (showMaskToggle && showMaskToggle.checked) {
+              previewStreamUrl = null;
+              startPreviewStream();
+            }
+          }
+        } catch (err) {
+          alert('Could not read brightness: ' + err.message);
+        } finally {
+          autoBrightBtn.disabled = false;
+          autoBrightBtn.textContent = 'Auto';
+        }
+      });
+    }
+
+    // Show Mask toggle — immediately switch stream type
+    if (showMaskToggle) {
+      showMaskToggle.addEventListener('change', () => { previewStreamUrl = null; startPreviewStream(); });
+    }
     if (stopBtn) { stopBtn.addEventListener('click', stopMapping); }
+    if (retryWledBtn) {
+      retryWledBtn.addEventListener('click', async () => {
+        retryWledBtn.disabled = true;
+        try {
+          await fetch('/api/retry_wled', { method: 'POST' });
+        } catch (err) {
+          console.error('retry_wled failed', err);
+        } finally {
+          retryWledBtn.disabled = false;
+        }
+      });
+    }
     if (stepSlider && stepNumber && stepValue) {
       const syncFromSlider = () => {
         stepNumber.value = stepSlider.value;
@@ -691,13 +1497,52 @@ <h2>Grid Preview</h2>
     if (widthInput) { widthInput.addEventListener('input', () => { scheduleConversion(400); }); }
     if (heightInput) { heightInput.addEventListener('input', () => { scheduleConversion(400); }); }
     document.addEventListener('visibilitychange', () => {
-      if (document.hidden) { stopPreviewLoop(); }
-      else { startPreviewLoop(); }
+      if (document.hidden) { stopPreviewStream(); }
+      else { startPreviewStream(); }
+    });
+
+    // ── Live config updates during mapping ───────────────────────────
+    const liveConfigFields = [
+      { el: framesInput,    key: 'frames_per_led',  parse: v => parseInt(v)   || 1   },
+      { el: transitionInput,key: 'transition_ms',   parse: v => parseInt(v)   || 0   },
+      { el: prelightInput,  key: 'prelight_delay',  parse: v => (parseFloat(v) || 0) / 1000 },
+      { el: captureInput,   key: 'capture_delay',   parse: v => (parseFloat(v) || 0) / 1000 },
+      { el: postlightInput, key: 'postlight_delay', parse: v => (parseFloat(v) || 0) / 1000 },
+      { el: minBrightSlider,key: 'min_brightness',  parse: v => parseInt(v)          },
+      { el: skipDimToggle,  key: 'skip_dim_leds',   parse: (_, el) => el.checked     },
+    ];
+    liveConfigFields.forEach(({ el, key, parse }) => {
+      if (!el) return;
+      const evt = el.type === 'checkbox' ? 'change' : 'change';
+      el.addEventListener(evt, () => pushConfigUpdate({ [key]: parse(el.value, el) }));
     });
 
+    // ── Floating info tooltips ────────────────────────────────────────
+    (function () {
+      const float = document.getElementById('tipFloat');
+      document.querySelectorAll('.tip-icon').forEach(icon => {
+        icon.addEventListener('mouseenter', () => {
+          const text = icon.dataset.tip;
+          if (!text || !float) return;
+          float.textContent = text;
+          float.style.display = 'block';
+          const r = icon.getBoundingClientRect();
+          const fw = float.offsetWidth, fh = float.offsetHeight;
+          let left = r.right + 10;
+          let top  = r.top + r.height / 2 - fh / 2;
+          if (left + fw > window.innerWidth  - 8) left = r.left - fw - 10;
+          if (top < 8) top = 8;
+          if (top + fh > window.innerHeight - 8) top = window.innerHeight - fh - 8;
+          float.style.left = left + 'px';
+          float.style.top  = top  + 'px';
+        });
+        icon.addEventListener('mouseleave', () => { if (float) float.style.display = 'none'; });
+      });
+    })();
+
     refreshCameraList();
     loadCsv();
-    renderGrid(null);
+    renderGrid();
   </script>
 </body>
 </html>