Comprehensive WebUI review: 41 UX/feature/CSS improvements

Safety & Correctness:
- Add confirmation dialogs to Stop All, turnOffDevice
- i18n confirm dialog (title, yes, no buttons)
- Fix duplicate tutorial-overlay ID
- Define missing CSS variables (--radius, --text-primary, --hover-bg, --input-bg)
- Fix toast z-index conflict with confirm dialog (2500 → 3000)

UX Consistency:
- Add backdrop-close to test modals
- Add device clone feature (only entity without it)
- Add sync clocks to command palette
- Replace 20+ hardcoded accent colors with CSS vars/color-mix()
- Remove dead .badge duplicate from components.css
- Make calibration elements keyboard-accessible (div → button)
- Add aria-labels to color picker swatches
- Fix pattern canvas mobile horizontal scroll
- Fix graph editor mobile bottom clipping

Polish:
- Add empty-state messages to all CardSection instances
- Convert 21 px font-sizes to rem
- Add scroll-behavior: smooth with reduced-motion override
- Add @media print styles
- Add :focus-visible to 4 missing interactive elements
- Fix settings modal close label (Cancel → Close)
- Fix api-key submit button i18n

New Features:
- Command palette actions: start/stop targets, activate scenes, enable/disable
- Bulk start/stop API endpoints (POST /output-targets/bulk/start|stop)
- OS notification history viewer modal
- Scene "used by" automation reference count on cards
- Clock elapsed time display on Streams tab cards
- Device "last seen" relative timestamp on cards
- Audio device refresh button in edit modal
- Composite layer drag-to-reorder
- MQTT settings panel (broker config with JSON persistence)
- WebSocket log viewer with level filtering and ring buffer
- Runtime log-level adjustment (GET/PUT endpoints + settings UI)
- Animated value source waveform canvas preview
- Gradient custom preset save/delete (localStorage)
- API key read-only display in settings
- Backup metadata (file size, auto/manual badges)
- Server restart button with confirm + overlay
- Partial config export/import per entity type
- Progressive disclosure in target editor (Advanced section)

CSS Architecture:
- Define radius scale tokens (--radius-sm/md/lg/pill)
- Scope .cs-filter selectors to remove 7 !important overrides
- Consolidate duplicate toggle switch (filter-list → settings-toggle)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

server/src/wled_controller/api/routes/output_targets.py

@@ -22,6 +22,8 @@ from wled_controller.api.dependencies import (
     get_template_store,
 )
 from wled_controller.api.schemas.output_targets import (
+    BulkTargetRequest,
+    BulkTargetResponse,
     ExtractedColorResponse,
     KCTestRectangleResponse,
     KCTestResponse,
@@ -373,6 +375,64 @@ async def delete_target(
         raise HTTPException(status_code=500, detail=str(e))
 
 
+# ===== BULK PROCESSING CONTROL ENDPOINTS =====
+
+@router.post("/api/v1/output-targets/bulk/start", response_model=BulkTargetResponse, tags=["Processing"])
+async def bulk_start_processing(
+    body: BulkTargetRequest,
+    _auth: AuthRequired,
+    target_store: OutputTargetStore = Depends(get_output_target_store),
+    manager: ProcessorManager = Depends(get_processor_manager),
+):
+    """Start processing for multiple output targets. Returns lists of started IDs and per-ID errors."""
+    started: list[str] = []
+    errors: dict[str, str] = {}
+
+    for target_id in body.ids:
+        try:
+            target_store.get_target(target_id)
+            await manager.start_processing(target_id)
+            started.append(target_id)
+            logger.info(f"Bulk start: started processing for target {target_id}")
+        except ValueError as e:
+            errors[target_id] = str(e)
+        except RuntimeError as e:
+            msg = str(e)
+            for t in target_store.get_all_targets():
+                if t.id in msg:
+                    msg = msg.replace(t.id, f"'{t.name}'")
+            errors[target_id] = msg
+        except Exception as e:
+            logger.error(f"Bulk start: failed to start target {target_id}: {e}")
+            errors[target_id] = str(e)
+
+    return BulkTargetResponse(started=started, errors=errors)
+
+
+@router.post("/api/v1/output-targets/bulk/stop", response_model=BulkTargetResponse, tags=["Processing"])
+async def bulk_stop_processing(
+    body: BulkTargetRequest,
+    _auth: AuthRequired,
+    manager: ProcessorManager = Depends(get_processor_manager),
+):
+    """Stop processing for multiple output targets. Returns lists of stopped IDs and per-ID errors."""
+    stopped: list[str] = []
+    errors: dict[str, str] = {}
+
+    for target_id in body.ids:
+        try:
+            await manager.stop_processing(target_id)
+            stopped.append(target_id)
+            logger.info(f"Bulk stop: stopped processing for target {target_id}")
+        except ValueError as e:
+            errors[target_id] = str(e)
+        except Exception as e:
+            logger.error(f"Bulk stop: failed to stop target {target_id}: {e}")
+            errors[target_id] = str(e)
+
+    return BulkTargetResponse(stopped=stopped, errors=errors)
+
+
 # ===== PROCESSING CONTROL ENDPOINTS =====
 
 @router.post("/api/v1/output-targets/{target_id}/start", tags=["Processing"])

server/src/wled_controller/api/routes/system.py

@@ -3,6 +3,7 @@
 import asyncio
 import io
 import json
+import logging
 import platform
 import subprocess
 import sys
@@ -12,7 +13,7 @@ from pathlib import Path
 from typing import Optional
 
 import psutil
-from fastapi import APIRouter, Depends, File, HTTPException, Query, UploadFile
+from fastapi import APIRouter, Depends, File, HTTPException, Query, UploadFile, WebSocket, WebSocketDisconnect
 from fastapi.responses import StreamingResponse
 from pydantic import BaseModel
 
@@ -44,6 +45,10 @@ from wled_controller.api.schemas.system import (
     DisplayListResponse,
     GpuInfo,
     HealthResponse,
+    LogLevelRequest,
+    LogLevelResponse,
+    MQTTSettingsRequest,
+    MQTTSettingsResponse,
     PerformanceResponse,
     ProcessListResponse,
     RestoreResponse,
@@ -331,6 +336,125 @@ def _schedule_restart() -> None:
     threading.Thread(target=_restart, daemon=True).start()
 
 
+@router.get("/api/v1/system/api-keys", tags=["System"])
+def list_api_keys(_: AuthRequired):
+    """List API key labels (read-only; keys are defined in the YAML config file)."""
+    config = get_config()
+    keys = [
+        {"label": label, "masked": key[:4] + "****" + key[-4:] if len(key) >= 8 else "****"}
+        for label, key in config.auth.api_keys.items()
+    ]
+    return {"keys": keys, "count": len(keys)}
+
+
+@router.get("/api/v1/system/export/{store_key}", tags=["System"])
+def export_store(store_key: str, _: AuthRequired):
+    """Download a single entity store as a JSON file."""
+    if store_key not in STORE_MAP:
+        raise HTTPException(
+            status_code=404,
+            detail=f"Unknown store '{store_key}'. Valid keys: {sorted(STORE_MAP.keys())}",
+        )
+    config = get_config()
+    file_path = Path(getattr(config.storage, STORE_MAP[store_key]))
+    if file_path.exists():
+        with open(file_path, "r", encoding="utf-8") as f:
+            data = json.load(f)
+    else:
+        data = {}
+
+    export = {
+        "meta": {
+            "format": "ledgrab-partial-export",
+            "format_version": 1,
+            "store_key": store_key,
+            "app_version": __version__,
+            "created_at": datetime.now(timezone.utc).isoformat() + "Z",
+        },
+        "store": data,
+    }
+    content = json.dumps(export, indent=2, ensure_ascii=False)
+    timestamp = datetime.now(timezone.utc).strftime("%Y-%m-%dT%H%M%S")
+    filename = f"ledgrab-{store_key}-{timestamp}.json"
+    return StreamingResponse(
+        io.BytesIO(content.encode("utf-8")),
+        media_type="application/json",
+        headers={"Content-Disposition": f'attachment; filename="{filename}"'},
+    )
+
+
+@router.post("/api/v1/system/import/{store_key}", tags=["System"])
+async def import_store(
+    store_key: str,
+    _: AuthRequired,
+    file: UploadFile = File(...),
+    merge: bool = Query(False, description="Merge into existing data instead of replacing"),
+):
+    """Upload a partial export file to replace or merge one entity store. Triggers server restart."""
+    if store_key not in STORE_MAP:
+        raise HTTPException(
+            status_code=404,
+            detail=f"Unknown store '{store_key}'. Valid keys: {sorted(STORE_MAP.keys())}",
+        )
+
+    try:
+        raw = await file.read()
+        if len(raw) > 10 * 1024 * 1024:
+            raise HTTPException(status_code=400, detail="File too large (max 10 MB)")
+        payload = json.loads(raw)
+    except json.JSONDecodeError as e:
+        raise HTTPException(status_code=400, detail=f"Invalid JSON: {e}")
+
+    # Support both full-backup format and partial-export format
+    if "stores" in payload and isinstance(payload.get("meta"), dict):
+        # Full backup: extract the specific store
+        if payload["meta"].get("format") not in ("ledgrab-backup",):
+            raise HTTPException(status_code=400, detail="Not a valid LED Grab backup or partial export file")
+        stores = payload.get("stores", {})
+        if store_key not in stores:
+            raise HTTPException(status_code=400, detail=f"Backup does not contain store '{store_key}'")
+        incoming = stores[store_key]
+    elif isinstance(payload.get("meta"), dict) and payload["meta"].get("format") == "ledgrab-partial-export":
+        # Partial export format
+        if payload["meta"].get("store_key") != store_key:
+            raise HTTPException(
+                status_code=400,
+                detail=f"File is for store '{payload['meta']['store_key']}', not '{store_key}'",
+            )
+        incoming = payload.get("store", {})
+    else:
+        raise HTTPException(status_code=400, detail="Not a valid LED Grab backup or partial export file")
+
+    if not isinstance(incoming, dict):
+        raise HTTPException(status_code=400, detail="Store data must be a JSON object")
+
+    config = get_config()
+    file_path = Path(getattr(config.storage, STORE_MAP[store_key]))
+
+    def _write():
+        if merge and file_path.exists():
+            with open(file_path, "r", encoding="utf-8") as f:
+                existing = json.load(f)
+            if isinstance(existing, dict):
+                existing.update(incoming)
+                atomic_write_json(file_path, existing)
+                return len(existing)
+        atomic_write_json(file_path, incoming)
+        return len(incoming)
+
+    count = await asyncio.to_thread(_write)
+    logger.info(f"Imported store '{store_key}' ({count} entries, merge={merge}). Scheduling restart...")
+    _schedule_restart()
+    return {
+        "status": "imported",
+        "store_key": store_key,
+        "entries": count,
+        "merge": merge,
+        "restart_scheduled": True,
+        "message": f"Imported {count} entries for '{store_key}'. Server restarting...",
+    }
+
+
 @router.get("/api/v1/system/backup", tags=["System"])
 def backup_config(_: AuthRequired):
     """Download all configuration as a single JSON backup file."""
@@ -366,6 +490,13 @@ def backup_config(_: AuthRequired):
     )
 
 
+@router.post("/api/v1/system/restart", tags=["System"])
+def restart_server(_: AuthRequired):
+    """Schedule a server restart and return immediately."""
+    _schedule_restart()
+    return {"status": "restarting"}
+
+
 @router.post("/api/v1/system/restore", response_model=RestoreResponse, tags=["System"])
 async def restore_config(
     _: AuthRequired,
@@ -532,6 +663,160 @@ async def delete_saved_backup(
     return {"status": "deleted", "filename": filename}
 
 
+# ---------------------------------------------------------------------------
+# MQTT settings
+# ---------------------------------------------------------------------------
+
+_MQTT_SETTINGS_FILE: Path | None = None
+
+
+def _get_mqtt_settings_path() -> Path:
+    global _MQTT_SETTINGS_FILE
+    if _MQTT_SETTINGS_FILE is None:
+        cfg = get_config()
+        # Derive the data directory from any known storage file path
+        data_dir = Path(cfg.storage.devices_file).parent
+        _MQTT_SETTINGS_FILE = data_dir / "mqtt_settings.json"
+    return _MQTT_SETTINGS_FILE
+
+
+def _load_mqtt_settings() -> dict:
+    """Load MQTT settings: YAML config defaults overridden by JSON overrides file."""
+    cfg = get_config()
+    defaults = {
+        "enabled": cfg.mqtt.enabled,
+        "broker_host": cfg.mqtt.broker_host,
+        "broker_port": cfg.mqtt.broker_port,
+        "username": cfg.mqtt.username,
+        "password": cfg.mqtt.password,
+        "client_id": cfg.mqtt.client_id,
+        "base_topic": cfg.mqtt.base_topic,
+    }
+    path = _get_mqtt_settings_path()
+    if path.exists():
+        try:
+            with open(path, "r", encoding="utf-8") as f:
+                overrides = json.load(f)
+            defaults.update(overrides)
+        except Exception as e:
+            logger.warning(f"Failed to load MQTT settings override file: {e}")
+    return defaults
+
+
+def _save_mqtt_settings(settings: dict) -> None:
+    """Persist MQTT settings to the JSON override file."""
+    from wled_controller.utils import atomic_write_json
+    atomic_write_json(_get_mqtt_settings_path(), settings)
+
+
+@router.get(
+    "/api/v1/system/mqtt/settings",
+    response_model=MQTTSettingsResponse,
+    tags=["System"],
+)
+async def get_mqtt_settings(_: AuthRequired):
+    """Get current MQTT broker settings. Password is masked."""
+    s = _load_mqtt_settings()
+    return MQTTSettingsResponse(
+        enabled=s["enabled"],
+        broker_host=s["broker_host"],
+        broker_port=s["broker_port"],
+        username=s["username"],
+        password_set=bool(s.get("password")),
+        client_id=s["client_id"],
+        base_topic=s["base_topic"],
+    )
+
+
+@router.put(
+    "/api/v1/system/mqtt/settings",
+    response_model=MQTTSettingsResponse,
+    tags=["System"],
+)
+async def update_mqtt_settings(_: AuthRequired, body: MQTTSettingsRequest):
+    """Update MQTT broker settings. If password is empty string, the existing password is preserved."""
+    current = _load_mqtt_settings()
+
+    # If caller sends an empty password, keep the existing one
+    password = body.password if body.password else current.get("password", "")
+
+    new_settings = {
+        "enabled": body.enabled,
+        "broker_host": body.broker_host,
+        "broker_port": body.broker_port,
+        "username": body.username,
+        "password": password,
+        "client_id": body.client_id,
+        "base_topic": body.base_topic,
+    }
+    _save_mqtt_settings(new_settings)
+    logger.info("MQTT settings updated")
+
+    return MQTTSettingsResponse(
+        enabled=new_settings["enabled"],
+        broker_host=new_settings["broker_host"],
+        broker_port=new_settings["broker_port"],
+        username=new_settings["username"],
+        password_set=bool(new_settings["password"]),
+        client_id=new_settings["client_id"],
+        base_topic=new_settings["base_topic"],
+    )
+
+
+# ---------------------------------------------------------------------------
+# Live log viewer WebSocket
+# ---------------------------------------------------------------------------
+
+
+@router.websocket("/api/v1/system/logs/ws")
+async def logs_ws(
+    websocket: WebSocket,
+    token: str = Query(""),
+):
+    """WebSocket that streams server log lines in real time.
+
+    Auth via ``?token=<api_key>``.  On connect, sends the last ~500 buffered
+    lines as individual text messages, then pushes new lines as they appear.
+    """
+    from wled_controller.api.auth import verify_ws_token
+    from wled_controller.utils import log_broadcaster
+
+    if not verify_ws_token(token):
+        await websocket.close(code=4001, reason="Unauthorized")
+        return
+
+    await websocket.accept()
+
+    # Ensure the broadcaster knows the event loop (may be first connection)
+    log_broadcaster.ensure_loop()
+
+    # Subscribe *before* reading the backlog so no lines slip through
+    queue = log_broadcaster.subscribe()
+
+    try:
+        # Send backlog first
+        for line in log_broadcaster.get_backlog():
+            await websocket.send_text(line)
+
+        # Stream new lines
+        while True:
+            try:
+                line = await asyncio.wait_for(queue.get(), timeout=30.0)
+                await websocket.send_text(line)
+            except asyncio.TimeoutError:
+                # Send a keepalive ping so the connection stays alive
+                try:
+                    await websocket.send_text("")
+                except Exception:
+                    break
+    except WebSocketDisconnect:
+        pass
+    except Exception:
+        pass
+    finally:
+        log_broadcaster.unsubscribe(queue)
+
+
 # ---------------------------------------------------------------------------
 # ADB helpers (for Android / scrcpy engine)
 # ---------------------------------------------------------------------------
@@ -601,3 +886,34 @@ async def adb_disconnect(_: AuthRequired, request: AdbConnectRequest):
         raise HTTPException(status_code=500, detail="adb not found on PATH")
     except asyncio.TimeoutError:
         raise HTTPException(status_code=504, detail="ADB disconnect timed out")
+
+
+# ─── Log level ─────────────────────────────────────────────────
+
+_VALID_LOG_LEVELS = {"DEBUG", "INFO", "WARNING", "ERROR", "CRITICAL"}
+
+
+@router.get("/api/v1/system/log-level", response_model=LogLevelResponse, tags=["System"])
+async def get_log_level(_: AuthRequired):
+    """Get the current root logger log level."""
+    level_int = logging.getLogger().getEffectiveLevel()
+    return LogLevelResponse(level=logging.getLevelName(level_int))
+
+
+@router.put("/api/v1/system/log-level", response_model=LogLevelResponse, tags=["System"])
+async def set_log_level(_: AuthRequired, body: LogLevelRequest):
+    """Change the root logger log level at runtime (no server restart required)."""
+    level_name = body.level.upper()
+    if level_name not in _VALID_LOG_LEVELS:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Invalid log level '{body.level}'. Must be one of: {', '.join(sorted(_VALID_LOG_LEVELS))}",
+        )
+    level_int = getattr(logging, level_name)
+    root = logging.getLogger()
+    root.setLevel(level_int)
+    # Also update all handlers so they actually emit at the new level
+    for handler in root.handlers:
+        handler.setLevel(level_int)
+    logger.info("Log level changed to %s", level_name)
+    return LogLevelResponse(level=level_name)

server/src/wled_controller/api/schemas/output_targets.py

@@ -177,6 +177,20 @@ class TargetMetricsResponse(BaseModel):
     last_update: Optional[datetime] = Field(None, description="Last update timestamp")
 
 
+class BulkTargetRequest(BaseModel):
+    """Request body for bulk start/stop operations."""
+
+    ids: List[str] = Field(description="List of target IDs to operate on")
+
+
+class BulkTargetResponse(BaseModel):
+    """Response for bulk start/stop operations."""
+
+    started: List[str] = Field(default_factory=list, description="IDs that were successfully started")
+    stopped: List[str] = Field(default_factory=list, description="IDs that were successfully stopped")
+    errors: Dict[str, str] = Field(default_factory=dict, description="Map of target ID to error message for failures")
+
+
 class KCTestRectangleResponse(BaseModel):
     """A rectangle with its extracted color from a KC test."""
 

server/src/wled_controller/api/schemas/system.py

@@ -115,3 +115,43 @@ class BackupListResponse(BaseModel):
 
     backups: List[BackupFileInfo]
     count: int
+
+
+# ─── MQTT schemas ──────────────────────────────────────────────
+
+class MQTTSettingsResponse(BaseModel):
+    """MQTT broker settings response (password is masked)."""
+
+    enabled: bool = Field(description="Whether MQTT is enabled")
+    broker_host: str = Field(description="MQTT broker hostname or IP")
+    broker_port: int = Field(ge=1, le=65535, description="MQTT broker port")
+    username: str = Field(description="MQTT username (empty = anonymous)")
+    password_set: bool = Field(description="Whether a password is configured")
+    client_id: str = Field(description="MQTT client ID")
+    base_topic: str = Field(description="Base topic prefix")
+
+
+class MQTTSettingsRequest(BaseModel):
+    """MQTT broker settings update request."""
+
+    enabled: bool = Field(description="Whether MQTT is enabled")
+    broker_host: str = Field(description="MQTT broker hostname or IP")
+    broker_port: int = Field(ge=1, le=65535, description="MQTT broker port")
+    username: str = Field(default="", description="MQTT username (empty = anonymous)")
+    password: str = Field(default="", description="MQTT password (empty = keep existing if omitted)")
+    client_id: str = Field(default="ledgrab", description="MQTT client ID")
+    base_topic: str = Field(default="ledgrab", description="Base topic prefix")
+
+
+# ─── Log level schemas ─────────────────────────────────────────
+
+class LogLevelResponse(BaseModel):
+    """Current log level response."""
+
+    level: str = Field(description="Current effective log level name (e.g. DEBUG, INFO, WARNING, ERROR, CRITICAL)")
+
+
+class LogLevelRequest(BaseModel):
+    """Request to change the log level."""
+
+    level: str = Field(description="New log level name (DEBUG, INFO, WARNING, ERROR, CRITICAL)")