fix: comprehensive security, bug, performance, and UI/UX audit

Security
- Default bind 127.0.0.1; first-run bootstrap generates random api_token
  and refuses to bind non-loopback without auth unless explicitly opted in
- Path-traversal hardened: BrowserService.validate_path rejects absolute
  paths, drive letters, UNC, NUL bytes. /api/browser/{play,metadata,
  thumbnail} now require folder_id and a folder-relative path
- Pydantic validators on links: http(s) URLs only, mdi:<slug> icons only
- Scripts/callbacks/links create/update/delete gated by *_management flags
- Strict CSP, X-Frame-Options DENY, Referrer-Policy no-referrer,
  X-Content-Type-Options nosniff
- CORS locked to localhost:<port> + 127.0.0.1:<port> by default; configurable
- config.yaml writes atomic (tmp + os.replace) and 0o600 on POSIX
- Subprocesses spawned in their own process group / new session so timeout
  kills the whole tree (Windows CREATE_NEW_PROCESS_GROUP, POSIX
  start_new_session=True)
- Frontend XSS: monitor name + details escapeHtml'd; power button moved to
  delegated data-action handler; remote MDI SVGs parsed and sanitized
  (strip script/foreignObject/on*/javascript: hrefs) before innerHTML
- All dynamic URL segments now wrapped in encodeURIComponent

Bugs
- WebSocket reconnect: close previous socket before opening new, clear
  ping interval per-socket, clear reconnectTimeout up-front, retry on
  online/visibilitychange, try/catch JSON.parse
- Artwork fetch race: AbortController + generation guard
- _broadcast_after_open: initialize status, swallow per-poll errors,
  background tasks tracked in a strong-ref set with done-callback cleanup
- Audio analyzer: sticky _unavailable flag prevents infinite start/stop
  spin when no loopback device exists; cleared by set_device()
- Volume short-circuit cache invalidated when server reports remote volume
- Browser thumbnail race: per-folder generation counter + isConnected
  checks; aborts in-flight fetches on navigation
- Track-skip uses cached title instead of full WinRT status round-trip

Performance
- Linux MPRIS/pactl and /api/display DDC-CI handlers wrapped in
  asyncio.to_thread so blocking IO never stalls the event loop
- browse_directory moved off the event loop (SMB shares could freeze it)
- Windows status poll caches one asyncio loop per worker thread via
  threading.local instead of new_event_loop/close on every 0.5s tick
- broadcast() serializes JSON once and uses send_text to all clients
- Hourly thumbnail cache cleanup scheduled in lifespan (was never invoked
  — cache grew unbounded)
- Progress drag listeners attached only while dragging

Quality
- All asyncio.get_event_loop() in coroutines → get_running_loop()
- ThreadPoolExecutors shut down cleanly during lifespan teardown
- config_manager dedup: 12 near-identical methods collapsed onto generic
  _upsert/_delete helpers (~290 lines removed)
- Service worker no longer pass-throughs every fetch
- M3U playlist written via NamedTemporaryFile (no fixed-path symlink
  clobber race)
- __version__ now prefers live pyproject.toml in dev checkouts so
  pip install -e . users see the source-of-truth version, not the stale
  package-metadata version baked in at install time

UI/UX (Studio Reference)
- Green leftover focus rings (rgba(29,185,84,...)) all replaced with
  copper accent (rgba(var(--copper-rgb),...))
- Dialogs: square corners, copper top hairline, unified with editorial
  chrome
- .browser-item: transparent with copper hover border (was filled card)
- Audio device select uses var(--sans) instead of generic system font
- Mobile container padding tuned for ≤480px screens
- Breadcrumb home is a real <button> with aria-label; aria-current on root
- i18n: filled display.msg.power_*, execution.*, scripts.params.execute,
  callbacks.empty in both en + ru

media_server/static/js/player.js

@@ -8,7 +8,7 @@ import {
     ws, currentState, setCurrentState, currentDuration, setCurrentDuration,
     currentPosition, setCurrentPosition, isUserAdjustingVolume,
     lastStatus, setLastStatus, currentPlayState, setCurrentPlayState,
-    POSITION_INTERPOLATION_MS, seek,
+    POSITION_INTERPOLATION_MS, seek, notifyRemoteVolume,
     getAuthHeaders, hasCredentials,
 } from './core.js';
 import { updateBackgroundColors } from './background.js';
@@ -687,54 +687,49 @@ export async function onAudioDeviceChanged() {
 
 let lastArtworkKey = null;
 let currentArtworkBlobUrl = null;
+let artworkFetchGen = 0;
+let artworkAbort = null;
 let lastPositionUpdate = 0;
 let lastPositionValue = 0;
 let interpolationInterval = null;
 
 export function setupProgressDrag(bar, fill) {
-    let dragging = false;
-
+    // Listeners are attached on mousedown and removed on mouseup so the
+    // document doesn't carry per-progress-bar move handlers for the entire
+    // session (especially expensive on mobile).
     function getPercent(clientX) {
         const rect = bar.getBoundingClientRect();
         return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
     }
+    function updatePreview(percent) { fill.style.width = (percent * 100) + '%'; }
 
-    function updatePreview(percent) {
-        fill.style.width = (percent * 100) + '%';
-    }
-
-    function handleStart(clientX) {
+    function pointerStart(getX, moveEvent, endEvent, getMoveX, getEndX) {
         if (currentDuration <= 0) return;
-        dragging = true;
         bar.classList.add('dragging');
-        updatePreview(getPercent(clientX));
-    }
+        updatePreview(getPercent(getX));
 
-    function handleMove(clientX) {
-        if (!dragging) return;
-        updatePreview(getPercent(clientX));
-    }
-
-    function handleEnd(clientX) {
-        if (!dragging) return;
-        dragging = false;
-        bar.classList.remove('dragging');
-        const percent = getPercent(clientX);
-        seek(percent * currentDuration);
-    }
-
-    bar.addEventListener('mousedown', (e) => { e.preventDefault(); handleStart(e.clientX); });
-    document.addEventListener('mousemove', (e) => { handleMove(e.clientX); });
-    document.addEventListener('mouseup', (e) => { handleEnd(e.clientX); });
-
-    bar.addEventListener('touchstart', (e) => { handleStart(e.touches[0].clientX); }, { passive: true });
-    document.addEventListener('touchmove', (e) => { if (dragging) handleMove(e.touches[0].clientX); });
-    document.addEventListener('touchend', (e) => {
-        if (dragging) {
-            const touch = e.changedTouches[0];
-            handleEnd(touch.clientX);
+        function onMove(e) { updatePreview(getPercent(getMoveX(e))); }
+        function onEnd(e) {
+            document.removeEventListener(moveEvent, onMove);
+            document.removeEventListener(endEvent, onEnd);
+            bar.classList.remove('dragging');
+            const clientX = getEndX(e);
+            if (clientX !== undefined) seek(getPercent(clientX) * currentDuration);
         }
+        document.addEventListener(moveEvent, onMove);
+        document.addEventListener(endEvent, onEnd);
+    }
+
+    bar.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        pointerStart(e.clientX, 'mousemove', 'mouseup',
+            (ev) => ev.clientX, (ev) => ev.clientX);
     });
+    bar.addEventListener('touchstart', (e) => {
+        pointerStart(e.touches[0].clientX, 'touchmove', 'touchend',
+            (ev) => ev.touches[0].clientX,
+            (ev) => ev.changedTouches?.[0]?.clientX);
+    }, { passive: true });
 
     bar.addEventListener('click', (e) => {
         if (currentDuration > 0) {
@@ -811,28 +806,35 @@ export function updateUI(status) {
         lastArtworkKey = artworkKey;
         const placeholderArt = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath fill='%236a6a6a' opacity='0.35' d='M150 80c-38.66 0-70 31.34-70 70s31.34 70 70 70 70-31.34 70-70-31.34-70-70-70zm0 20c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50zm0 30a20 20 0 100 40 20 20 0 000-40z'/%3E%3C/svg%3E";
         const placeholderGlow = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect fill='%23282828' width='300' height='300'/%3E%3C/svg%3E";
+        // Cancel any in-flight artwork fetch and bump the generation so a
+        // late response from a previous track cannot overwrite the new one.
+        if (artworkAbort) {
+            try { artworkAbort.abort(); } catch { /* ignore */ }
+        }
+        const myGen = ++artworkFetchGen;
+        artworkAbort = new AbortController();
+
         if (artworkSource) {
-            // No cache-buster: when album_art_url is unchanged the
-            // browser can reuse the decoded bitmap. The artworkKey gate
-            // already skips fetches when the user hasn't switched tracks.
             fetch('/api/media/artwork', {
-                headers: getAuthHeaders()
+                headers: getAuthHeaders(),
+                signal: artworkAbort.signal,
             })
             .then(r => r.ok ? r.blob() : null)
             .then(blob => {
-                if (!blob) return;
+                if (!blob || myGen !== artworkFetchGen) return;
                 const oldBlobUrl = currentArtworkBlobUrl;
                 const url = URL.createObjectURL(blob);
                 currentArtworkBlobUrl = url;
                 swapArtworkSrc(dom.albumArt, url);
                 if (dom.miniAlbumArt.src !== url) dom.miniAlbumArt.src = url;
                 if (dom.albumArtGlow && dom.albumArtGlow.src !== url) dom.albumArtGlow.src = url;
-                // Mirror to fullscreen bloom directly — drops the
-                // MutationObserver fan-out path.
                 syncFullscreenBloomArt(url);
                 if (oldBlobUrl) setTimeout(() => URL.revokeObjectURL(oldBlobUrl), 1000);
             })
-            .catch(err => console.error('Artwork fetch failed:', err));
+            .catch(err => {
+                if (err && err.name === 'AbortError') return;
+                console.error('Artwork fetch failed:', err);
+            });
         } else {
             if (currentArtworkBlobUrl) {
                 URL.revokeObjectURL(currentArtworkBlobUrl);
@@ -858,6 +860,9 @@ export function updateUI(status) {
     }
 
     if (!isUserAdjustingVolume) {
+        // Re-seed the throttling cache so a future call to setVolume() with
+        // the previously-sent value still propagates after an external change.
+        notifyRemoteVolume(status.volume);
         dom.volumeSlider.value = status.volume;
         dom.volumeDisplay.textContent = `${status.volume}%`;
         dom.miniVolumeSlider.value = status.volume;