chore: release v0.2.4

DDC/CI writes are fire-and-forget at the protocol level: a successful send
does not mean the monitor honored the value. Many monitors (LG ultrawides
in particular) silently drop writes for VCP codes whose registers exist
but whose feature isn't really implemented in firmware.

- New _verify_after_set helper polls readback after every DDC/CI write and
  reports {success: false} when the monitor didn't apply the value. Wired
  into set_contrast, set_input_source, set_color_preset, set_picture_mode.
  Input source uses a longer settle window since switching can briefly
  disrupt the DDC/CI link.

- Picture mode (VCP 0xDC) now requires the capability string to declare
  supported codes under cmds[0xDC]. Without that declaration we treat the
  feature as unsupported even when reads succeed - the LG case where reads
  return a stuck value and every write is silently ignored.

.gitattributes

@@ -0,0 +1,16 @@
+# Normalise text files to LF in the repo so Windows checkouts stop
+# nagging "LF will be replaced by CRLF" on every git status.
+* text=auto eol=lf
+
+# Binary assets — never touch.
+*.png  binary
+*.jpg  binary
+*.jpeg binary
+*.gif  binary
+*.ico  binary
+*.svg  text
+*.woff  binary
+*.woff2 binary
+*.exe  binary
+*.dll  binary
+*.zip  binary

.gitea/workflows/test.yml

@@ -8,6 +8,7 @@ on:
 
 jobs:
   test:
+    if: "!startsWith(github.event.head_commit.message, 'chore: release')"
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

.gitignore

@@ -53,3 +53,5 @@ Thumbs.db
 # Node.js / esbuild
 node_modules/
 media_server/static/dist/
+# Added by code-review-graph
+.code-review-graph/

.mcp.json

@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "code-review-graph": {
+      "command": "uvx",
+      "args": [
+        "code-review-graph",
+        "serve"
+      ],
+      "type": "stdio"
+    }
+  }
+}

CLAUDE.md

@@ -196,3 +196,42 @@ pytest --tb=short -q
 
 - **ALWAYS ask for user approval before committing and pushing changes.**
 - When pushing, always push to all remotes: `git push origin master && git push github master`
+
+<!-- code-review-graph MCP tools -->
+## MCP Tools: code-review-graph
+
+**IMPORTANT: This project has a knowledge graph. ALWAYS use the
+code-review-graph MCP tools BEFORE using Grep/Glob/Read to explore
+the codebase.** The graph is faster, cheaper (fewer tokens), and gives
+you structural context (callers, dependents, test coverage) that file
+scanning cannot.
+
+### When to use graph tools FIRST
+
+- **Exploring code**: `semantic_search_nodes` or `query_graph` instead of Grep
+- **Understanding impact**: `get_impact_radius` instead of manually tracing imports
+- **Code review**: `detect_changes` + `get_review_context` instead of reading entire files
+- **Finding relationships**: `query_graph` with callers_of/callees_of/imports_of/tests_for
+- **Architecture questions**: `get_architecture_overview` + `list_communities`
+
+Fall back to Grep/Glob/Read **only** when the graph doesn't cover what you need.
+
+### Key Tools
+
+| Tool | Use when |
+|------|----------|
+| `detect_changes` | Reviewing code changes — gives risk-scored analysis |
+| `get_review_context` | Need source snippets for review — token-efficient |
+| `get_impact_radius` | Understanding blast radius of a change |
+| `get_affected_flows` | Finding which execution paths are impacted |
+| `query_graph` | Tracing callers, callees, imports, tests, dependencies |
+| `semantic_search_nodes` | Finding functions/classes by name or keyword |
+| `get_architecture_overview` | Understanding high-level codebase structure |
+| `refactor_tool` | Planning renames, finding dead code |
+
+### Workflow
+
+1. The graph auto-updates on file changes (via hooks).
+2. Use `detect_changes` for code review.
+3. Use `get_affected_flows` to understand impact.
+4. Use `query_graph` pattern="tests_for" to check coverage.

RELEASE_NOTES.md

@@ -1,7 +1,20 @@
-## v0.1.3 (2026-04-07)
+## v0.2.4 (2026-05-15)
+
+### Features
+
+- **Displays — DDC/CI picture controls:** Monitor cards now expose contrast (slider, same editorial copper treatment as brightness) plus a new "PICTURE TUNING" section with input source, color preset, and picture mode pickers built on the IconSelect widget — HDMI/DisplayPort/DVI/VGA/USB-C glyphs for inputs, thermometer for color temperatures, per-mode icons (movie reel, gamepad, ball, etc.) for picture modes. Backend probes DDC/CI capabilities per monitor at enumeration time and exposes `*_supported` flags so the UI hides rows the hardware doesn't advertise. New endpoints: `POST /api/display/{contrast,input_source,color_preset,picture_mode}/{id}`. Picture mode uses raw VCP `0xDC` with MCCS-spec labels and vendor-friendly fallbacks. 14 new i18n keys per locale (en/ru). ([57fdeb7](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/57fdeb7))
 
 ### Bug Fixes
-- Prevent dialog `showModal` from auto-focusing first input ([db777fa](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/db777fa))
+
+- **Displays — verify DDC/CI writes before reporting success:** DDC/CI writes are fire-and-forget at the protocol level — a successful send does not mean the monitor honored the value. A new `_verify_after_set` helper polls readback after every write and reports `{success: false}` when the monitor silently dropped it (common on LG ultrawides for VCP codes whose registers exist but whose feature isn't really implemented in firmware). Wired into `set_contrast`, `set_input_source`, `set_color_preset`, `set_picture_mode`; input source uses a longer settle window since switching can briefly disrupt the DDC/CI link. Picture mode (VCP `0xDC`) additionally requires the capability string to declare supported codes under `cmds[0xDC]` — without that declaration we treat the feature as unsupported even when reads succeed (the LG case where reads return a stuck value and every write is silently ignored). ([d1f621f](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/d1f621f))
+
+---
+
+### Development / Internal
+
+#### Chores
+
+- **`restart-server.ps1` — installer vs dev launches:** Previously only killed processes named `media-server`, silently missing the installer-bundled process (which runs as plain `python.exe` via `media-server.bat`). The script now kills whatever currently owns the listen port regardless of process name, adds `-Mode auto|dev|installer` with auto-detection based on whether the installer launcher exists in `%LOCALAPPDATA%\Media Server`, verifies the port is listening after start, and merges registry PATH so newly-installed dev tools are visible. ([6120625](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/6120625))
 
 ---
 
@@ -10,6 +23,8 @@
 
 | Hash | Message | Author |
 |------|---------|--------|
-| [db777fa](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/db777fa) | fix: prevent dialog showModal from auto-focusing first input | alexei.dolgolyov |
+| [57fdeb7](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/57fdeb7) | feat(displays): expose DDC/CI contrast, input source, color preset, picture mode | alexei.dolgolyov |
+| [6120625](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/6120625) | chore(scripts): harden restart-server.ps1 against installer vs dev launches | alexei.dolgolyov |
+| [d1f621f](https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server/commit/d1f621f) | fix(displays): verify DDC/CI writes and trust capability string for picture mode | alexei.dolgolyov |
 
 </details>

build-common.sh

@@ -91,8 +91,11 @@ cleanup_site_packages() {
     find "$sp_dir" -name "*.pyi" -delete 2>/dev/null || true
     rm -rf "$sp_dir"/{pip,setuptools,pkg_resources,_distutils_hack}* 2>/dev/null || true
 
-    # Trim numpy if present
-    for mod in polynomial linalg ma lib distutils f2py typing _pyinstaller; do
+    # Trim numpy if present.
+    # Keep only modules that numpy/__init__.py does NOT import unconditionally —
+    # lib, linalg, ma, polynomial, fft, ctypeslib, matrixlib are all required for
+    # `import numpy` to succeed, so they MUST stay.
+    for mod in distutils f2py typing _pyinstaller; do
         rm -rf "$sp_dir/numpy/$mod" 2>/dev/null || true
     done
 
@@ -109,6 +112,13 @@ cleanup_site_packages() {
     # Strip debug symbols from native extensions
     find "$sp_dir" -name "*.$ext_suffix" -exec strip --strip-debug {} \; 2>/dev/null || true
 
-    # Remove .py source files (keep .pyc only) — saves ~30-40% on pure-Python packages
-    find "$sp_dir" -name "*.py" ! -name "__init__.py" -delete 2>/dev/null || true
+    # NOTE: do NOT strip .py source files. A previous version of this function
+    # ran `find ... -name "*.py" ! -name "__init__.py" -delete` with a comment
+    # claiming "keep .pyc only" — but no compileall step exists, so the dist
+    # shipped with __init__.py + .pyd only, missing every submodule (Image.py,
+    # ImageDraw.py, _version.py, ...). Fresh installs would fail with
+    # ModuleNotFoundError; in-place upgrades over an older install produced a
+    # half-old/half-new site-packages where PIL/__init__.py was new but
+    # PIL/_version.py was stale, yielding the runtime "_imaging extension was
+    # built for another version of Pillow" import error.
 }

build-dist-linux.sh

@@ -21,7 +21,7 @@ echo "Creating virtualenv..."
 python3 -m venv "${DIST_DIR}/venv"
 source "${DIST_DIR}/venv/bin/activate"
 pip install --quiet --upgrade pip
-pip install --quiet ".[visualizer]"
+pip install --quiet "."
 
 # Remove the installed package (app source is on PYTHONPATH via launcher)
 rm -rf "${DIST_DIR}"/venv/lib/python*/site-packages/media_server*

build-dist-windows.sh

@@ -60,12 +60,18 @@ CORE_DEPS=(
 )
 
 # Windows-specific dependencies
+# NOTE: wmi is a transitive dep of screen-brightness-control gated on
+# `platform_system == "Windows"`. pip evaluates env markers against the HOST
+# (Linux in CI), so it gets skipped during cross-build. Listed explicitly here
+# so the wheel actually lands in the Windows bundle. Same gotcha as the
+# uvicorn[standard]/uvloop case documented above.
 WIN_DEPS=(
     "winsdk>=1.0.0b10"
     "pywin32>=306"
     "comtypes>=1.2.0"
     "pycaw>=20230407"
     "screen-brightness-control>=0.20.0"
+    "wmi>=1.5.1"
     "monitorcontrol>=3.0.0"
 )
 
@@ -113,6 +119,22 @@ for whl in "$WHEEL_DIR"/*.whl; do
     unzip -qo "$whl" -d "$SITE_PACKAGES"
 done
 
+# numpy wheels from PyPI don't include _distributor_init_local.py unless
+# patched by delvewheel. In embedded Python, os.add_dll_directory() is never
+# called, so libopenblas can't be found and numpy fails to import.
+# Generate the missing loader here instead.
+if [ -d "${SITE_PACKAGES}/numpy" ]; then
+    cat > "${SITE_PACKAGES}/numpy/_distributor_init_local.py" << 'EOF'
+import os
+import sys
+if sys.platform == 'win32':
+    _libs = os.path.abspath(os.path.join(os.path.dirname(__file__), '..', 'numpy.libs'))
+    if os.path.isdir(_libs):
+        os.add_dll_directory(_libs)
+EOF
+    echo "Generated numpy/_distributor_init_local.py"
+fi
+
 cleanup_site_packages "$SITE_PACKAGES" "pyd" "dll"
 verify_frontend
 copy_app_files "$DIST_DIR"

installer.nsi

@@ -70,6 +70,19 @@ Section "!Core (required)" SecCore
 
     SetOutPath "$INSTDIR"
 
+    ; Wipe previous payload before extracting so stale files from an older
+    ; version cannot survive an upgrade. Without this, in-place upgrades
+    ; produce a half-old/half-new site-packages — e.g. an old PIL/_version.py
+    ; alongside a new PIL/_imaging.pyd, which raises "_imaging extension was
+    ; built for another version of Pillow" at runtime. config.yaml lives at
+    ; $INSTDIR root and is preserved.
+    RMDir /r "$INSTDIR\python"
+    RMDir /r "$INSTDIR\app"
+    RMDir /r "$INSTDIR\scripts"
+    Delete "$INSTDIR\${EXENAME}"
+    Delete "$INSTDIR\VERSION"
+    Delete "$INSTDIR\config.example.yaml"
+
     ; Copy entire distribution
     File /r "dist\media-server\*.*"
 

media_server/routes/display.py

@@ -1,4 +1,4 @@
-"""Display brightness and power control API endpoints."""
+"""Display brightness, power, contrast, input-source, color-preset and picture-mode API."""
 
 import logging
 
@@ -9,6 +9,10 @@ from ..auth import verify_token
 from ..services.display_service import (
     list_monitors,
     set_brightness,
+    set_color_preset,
+    set_contrast,
+    set_input_source,
+    set_picture_mode,
     set_power,
 )
 
@@ -25,12 +29,35 @@ class PowerRequest(BaseModel):
     on: bool
 
 
+class ContrastRequest(BaseModel):
+    contrast: int = Field(ge=0, le=100)
+
+
+class InputSourceRequest(BaseModel):
+    source: str
+
+
+class ColorPresetRequest(BaseModel):
+    preset: str
+
+
+class PictureModeRequest(BaseModel):
+    code: int = Field(ge=0, le=255)
+
+
 @router.get("/monitors")
 async def get_monitors(
-    refresh: bool = False, _: str = Depends(verify_token)
+    refresh: bool = False,
+    rediscover: bool = False,
+    _: str = Depends(verify_token),
 ) -> list[dict]:
-    """List all connected monitors with brightness and power info."""
-    monitors = list_monitors(force_refresh=refresh)
+    """List all connected monitors with their reported DDC/CI capabilities.
+
+    - `refresh=true` bypasses the response TTL cache (re-reads current state).
+    - `rediscover=true` also drops the per-monitor capability cache, forcing
+      a full DDC/CI capability probe. Use after a monitor hot-swap.
+    """
+    monitors = list_monitors(force_refresh=refresh, rediscover=rediscover)
     logger.debug("Found %d monitors", len(monitors))
     return [m.to_dict() for m in monitors]
 
@@ -56,3 +83,47 @@ async def set_monitor_power(
     if success:
         logger.info("Set monitor %d power %s", monitor_id, action)
     return {"success": success}
+
+
+@router.post("/contrast/{monitor_id}")
+async def set_monitor_contrast(
+    monitor_id: int, request: ContrastRequest, _: str = Depends(verify_token)
+) -> dict:
+    """Set DDC/CI contrast for a specific monitor."""
+    success = set_contrast(monitor_id, request.contrast)
+    if success:
+        logger.info("Set monitor %d contrast to %d", monitor_id, request.contrast)
+    return {"success": success}
+
+
+@router.post("/input_source/{monitor_id}")
+async def set_monitor_input_source(
+    monitor_id: int, request: InputSourceRequest, _: str = Depends(verify_token)
+) -> dict:
+    """Switch a monitor's DDC/CI input source (e.g. HDMI1, DP1)."""
+    success = set_input_source(monitor_id, request.source)
+    if success:
+        logger.info("Set monitor %d input source to %s", monitor_id, request.source)
+    return {"success": success}
+
+
+@router.post("/color_preset/{monitor_id}")
+async def set_monitor_color_preset(
+    monitor_id: int, request: ColorPresetRequest, _: str = Depends(verify_token)
+) -> dict:
+    """Apply a DDC/CI color preset (color temperature) to the monitor."""
+    success = set_color_preset(monitor_id, request.preset)
+    if success:
+        logger.info("Set monitor %d color preset to %s", monitor_id, request.preset)
+    return {"success": success}
+
+
+@router.post("/picture_mode/{monitor_id}")
+async def set_monitor_picture_mode(
+    monitor_id: int, request: PictureModeRequest, _: str = Depends(verify_token)
+) -> dict:
+    """Apply a DDC/CI picture/scene mode (VCP 0xDC) by raw code."""
+    success = set_picture_mode(monitor_id, request.code)
+    if success:
+        logger.info("Set monitor %d picture mode to code %d", monitor_id, request.code)
+    return {"success": success}

media_server/routes/media.py

@@ -323,7 +323,7 @@ async def set_visualizer_device(
 @router.websocket("/ws")
 async def websocket_endpoint(
     websocket: WebSocket,
-    token: str = Query(..., description="API authentication token"),
+    token: str | None = Query(None, description="API authentication token"),
 ) -> None:
     """WebSocket endpoint for real-time media status updates.
 

media_server/services/audio_analyzer.py

@@ -1,6 +1,7 @@
 """Audio spectrum analyzer service using system loopback capture."""
 
 import logging
+import math
 import platform
 import threading
 import time
@@ -15,10 +16,25 @@ def _load_numpy():
     global _np
     if _np is None:
         try:
+            import os
+            import sys
+            if sys.platform == 'win32':
+                # Embedded Python doesn't auto-load DLLs from numpy.libs;
+                # add the directory explicitly so libopenblas can be found.
+                try:
+                    import importlib.util
+                    spec = importlib.util.find_spec('numpy')
+                    if spec and spec.submodule_search_locations:
+                        numpy_dir = list(spec.submodule_search_locations)[0]
+                        libs_dir = os.path.join(os.path.dirname(numpy_dir), 'numpy.libs')
+                        if os.path.isdir(libs_dir):
+                            os.add_dll_directory(libs_dir)
+                except Exception:
+                    pass
             import numpy as np
             _np = np
-        except ImportError:
-            logger.info("numpy not installed - audio visualizer unavailable")
+        except Exception as e:
+            logger.warning("numpy unavailable - audio visualizer disabled: %s", e)
     return _np
 
 
@@ -28,8 +44,8 @@ def _load_soundcard():
         try:
             import soundcard as sc
             _sc = sc
-        except ImportError:
-            logger.info("soundcard not installed - audio visualizer unavailable")
+        except Exception as e:
+            logger.warning("soundcard unavailable - audio visualizer disabled: %s", e)
     return _sc
 
 
@@ -56,6 +72,19 @@ class AudioAnalyzer:
         self._lifecycle_lock = threading.Lock()
         self._data: dict | None = None
         self._current_device_name: str | None = None
+        # Generation counter — bumped each time _data is refreshed.
+        # Lets the broadcast loop dedupe without comparing dict identity
+        # (which is fragile because we always allocate a new dict).
+        self._data_seq = 0
+        # Threading.Event signaled when new frame data is available.
+        # The broadcast loop awaits this instead of polling on a timer,
+        # so it wakes up exactly once per produced frame.
+        self._data_event = threading.Event()
+        # Slow AGC envelope so the spectrum reflects real dynamics
+        # instead of being renormalized to peak=1.0 every frame.
+        # A loud transient (e.g. notification beep) lifts the reference
+        # for a few seconds afterwards; this is the price of real loudness.
+        self._spectrum_ref = 0.01
 
         # Pre-compute logarithmic bin edges
         self._bin_edges = self._compute_bin_edges()
@@ -95,6 +124,10 @@ class AudioAnalyzer:
             if not self.available:
                 return False
 
+            # Reset AGC envelope so a long silent gap between sessions
+            # doesn't make the first new transients clip at the ceiling.
+            self._spectrum_ref = 0.01
+
             self._running = True
             self._thread = threading.Thread(target=self._capture_loop, daemon=True)
             self._thread.start()
@@ -104,17 +137,30 @@ class AudioAnalyzer:
         """Stop audio capture and cleanup."""
         with self._lifecycle_lock:
             self._running = False
+            # Wake any waiter so it can observe _running and exit cleanly.
+            self._data_event.set()
             if self._thread:
                 self._thread.join(timeout=3.0)
                 self._thread = None
             with self._lock:
                 self._data = None
+            self._data_event.clear()
 
     def get_frequency_data(self) -> dict | None:
         """Return latest frequency data (thread-safe). None if not running."""
         with self._lock:
             return self._data
 
+    def get_frequency_data_versioned(self) -> tuple[dict | None, int]:
+        """Return (data, seq) so callers can dedupe without identity tricks."""
+        with self._lock:
+            return self._data, self._data_seq
+
+    @property
+    def data_event(self) -> threading.Event:
+        """Event signaled when a fresh frame is ready. Caller must clear()."""
+        return self._data_event
+
     @staticmethod
     def list_loopback_devices() -> list[dict[str, str]]:
         """List all available loopback audio devices."""
@@ -226,12 +272,24 @@ class AudioAnalyzer:
             return
 
         interval = 1.0 / self.target_fps
-        window = np.hanning(self.chunk_size)
+        # Float32 window — matches soundcard's typical buffer dtype and
+        # halves FFT memory traffic vs. the default float64.
+        window = np.hanning(self.chunk_size).astype(np.float32)
 
         # Pre-compute bin edge pairs for vectorized grouping
         edges = self._bin_edges
         bin_starts = np.array([edges[i] for i in range(self.num_bins)], dtype=np.intp)
         bin_ends = np.array([max(edges[i + 1], edges[i] + 1) for i in range(self.num_bins)], dtype=np.intp)
+        # Counts are constant — compute once.
+        bin_counts = (bin_ends - bin_starts).astype(np.float32)
+
+        # Pre-allocate working buffers so the per-frame allocator churn
+        # on the capture thread (which runs at target_fps Hz, hours on
+        # end) drops to zero copies for these arrays.
+        fft_size = self.chunk_size // 2 + 1
+        windowed = np.empty(self.chunk_size, dtype=np.float32)
+        cumsum = np.empty(fft_size + 1, dtype=np.float32)
+        cumsum[0] = 0.0
 
         try:
             with device.recorder(
@@ -260,29 +318,65 @@ class AudioAnalyzer:
                         time.sleep(interval)
                         continue
 
-                    # Apply window and compute FFT
-                    windowed = mono[:self.chunk_size] * window
+                    # Apply window in-place into the pre-allocated buffer.
+                    np.multiply(mono[:self.chunk_size], window, out=windowed)
                     fft_mag = np.abs(np.fft.rfft(windowed))
 
-                    # Group into logarithmic bins (vectorized via cumsum)
-                    cumsum = np.concatenate(([0.0], np.cumsum(fft_mag)))
-                    counts = bin_ends - bin_starts
-                    bins = (cumsum[bin_ends] - cumsum[bin_starts]) / counts
+                    # Group into logarithmic bins (vectorized via cumsum).
+                    # Write into the pre-allocated [1:] slice so cumsum[0]
+                    # stays 0.0 and we never allocate a new array.
+                    np.cumsum(fft_mag, out=cumsum[1:])
+                    bins = (cumsum[bin_ends] - cumsum[bin_starts]) / bin_counts
 
-                    # Normalize to 0-1
-                    max_val = bins.max()
-                    if max_val > 0:
-                        bins *= (1.0 / max_val)
+                    # True loudness from time-domain RMS via single BLAS
+                    # dot — avoids astype() and ** allocations.
+                    mono32 = mono if mono.dtype == np.float32 else mono.astype(np.float32, copy=False)
+                    energy = float(np.dot(mono32, mono32))
+                    if energy > 1e-12:
+                        rms = (energy / mono32.size) ** 0.5
+                        db = 20.0 * math.log10(rms)
+                        # Map -60 dB..-6 dB to 0..1 (typical music range)
+                        level = max(0.0, min(1.0, (db + 60.0) / 54.0))
+                    else:
+                        level = 0.0
+
+                    # Slow auto-gain: envelope follower with fast attack,
+                    # slow release. Quiet music yields small bars; loud
+                    # passages reach the top; the reference adapts over
+                    # seconds instead of resetting every frame.
+                    current_peak = float(bins.max())
+                    if current_peak > self._spectrum_ref:
+                        self._spectrum_ref += (current_peak - self._spectrum_ref) * 0.05
+                    else:
+                        self._spectrum_ref += (current_peak - self._spectrum_ref) * 0.005
+                    ref = max(self._spectrum_ref, 1e-4)
+                    np.divide(bins, ref, out=bins)
+                    np.clip(bins, 0.0, 1.5, out=bins)
 
                     # Bass energy: average of first 4 bins (~20-200Hz)
                     bass = float(bins[:4].mean()) if self.num_bins >= 4 else 0.0
 
-                    # Round for compact JSON
-                    frequencies = np.round(bins, 3).tolist()
-                    bass = round(bass, 3)
+                    # Quantize to 0..1000 ints — same wire fidelity as
+                    # 3-decimal floats but smaller GC churn on both ends
+                    # (frontend smooths anyway, so quantization is
+                    # invisible). JSON encodes ints faster than floats.
+                    frequencies = (bins * 1000.0).astype(np.int16).tolist()
+                    bass_i = int(bass * 1000.0)
+                    level_i = int(level * 1000.0)
 
+                    new_data = {
+                        "frequencies": frequencies,
+                        "bass": bass_i,
+                        "level": level_i,
+                        # Wire-format flag: clients that see this know
+                        # values are 0..1000 ints, not 0..1 floats.
+                        "scale": 1000,
+                    }
                     with self._lock:
-                        self._data = {"frequencies": frequencies, "bass": bass}
+                        self._data = new_data
+                        self._data_seq += 1
+                    # Wake any broadcast loop waiting on fresh data.
+                    self._data_event.set()
 
                     # Throttle to target FPS
                     elapsed = time.monotonic() - t0

media_server/services/display_service.py

@@ -1,4 +1,4 @@
-"""Display brightness and power control service."""
+"""Display brightness, power, contrast, input-source and color-preset control."""
 
 import ctypes
 import ctypes.wintypes
@@ -6,10 +6,33 @@ import logging
 import platform
 import struct
 import time
-from dataclasses import dataclass
+from dataclasses import dataclass, field
 
 logger = logging.getLogger(__name__)
 
+# VCP 0xDC "Display Application" — picture / scene mode.
+# Vendors deviate from the MCCS spec, but these labels match the standard
+# meanings and cover what most monitors report through their capability
+# string. Unknown codes fall back to "Mode <n>".
+PICTURE_MODE_VCP = 0xDC
+PICTURE_MODE_LABELS: dict[int, str] = {
+    0x00: "Default",
+    0x01: "Standalone",
+    0x02: "Mixed",
+    0x03: "Productivity",
+    0x04: "Movie",
+    0x05: "Game",
+    0x06: "Sports",
+    0x07: "Professional",
+    0x08: "Standard",
+    0x09: "Default",
+    0x0A: "Movie (Reduced Effects)",
+    0x0B: "Movie (Enhanced)",
+    0x0C: "User 1",
+    0x0D: "User 2",
+    0x0E: "User 3",
+}
+
 _sbc = None
 _monitorcontrol = None
 
@@ -32,7 +55,7 @@ def _load_monitorcontrol():
             import monitorcontrol
             _monitorcontrol = monitorcontrol
         except ImportError:
-            logger.warning("monitorcontrol not installed - display power control unavailable")
+            logger.warning("monitorcontrol not installed - DDC/CI control unavailable")
     return _monitorcontrol
 
 
@@ -64,6 +87,18 @@ class MonitorInfo:
     manufacturer: str = ""
     resolution: str | None = None
     is_primary: bool = False
+    contrast: int | None = None
+    contrast_supported: bool = False
+    input_source: str | None = None
+    available_input_sources: list[str] = field(default_factory=list)
+    input_source_supported: bool = False
+    color_preset: str | None = None
+    available_color_presets: list[str] = field(default_factory=list)
+    color_preset_supported: bool = False
+    picture_mode: str | None = None
+    picture_mode_code: int | None = None
+    available_picture_modes: list[dict] = field(default_factory=list)
+    picture_mode_supported: bool = False
 
     def to_dict(self) -> dict:
         return {
@@ -76,6 +111,18 @@ class MonitorInfo:
             "manufacturer": self.manufacturer,
             "resolution": self.resolution,
             "is_primary": self.is_primary,
+            "contrast": self.contrast,
+            "contrast_supported": self.contrast_supported,
+            "input_source": self.input_source,
+            "available_input_sources": self.available_input_sources,
+            "input_source_supported": self.input_source_supported,
+            "color_preset": self.color_preset,
+            "available_color_presets": self.available_color_presets,
+            "color_preset_supported": self.color_preset_supported,
+            "picture_mode": self.picture_mode,
+            "picture_mode_code": self.picture_mode_code,
+            "available_picture_modes": self.available_picture_modes,
+            "picture_mode_supported": self.picture_mode_supported,
         }
 
 
@@ -137,17 +184,183 @@ def _mark_primary(monitors: list[MonitorInfo]) -> None:
     monitors[0].is_primary = True
 
 
-# Cache for monitor list
+# Short TTL cache of the assembled monitor list (full response).
 _monitor_cache: list[MonitorInfo] | None = None
 _cache_time: float = 0
 _CACHE_TTL = 5.0  # seconds
 
+# Per-monitor cache of static capabilities (option lists + support flags).
+# DDC/CI capability discovery is the slow part — it only changes when a
+# monitor is replaced or rewired, so we probe it once per monitor and reuse
+# it across refreshes. Cleared on explicit `rediscover` or when the monitor
+# count changes (cheap stale-detection for hot-plug events).
+_static_cache: dict[int, dict] = {}
+_static_cache_monitor_count: int = -1
 
-def list_monitors(force_refresh: bool = False) -> list[MonitorInfo]:
-    """List all connected monitors with their current brightness."""
-    global _monitor_cache, _cache_time
 
-    if not force_refresh and _monitor_cache is not None and (time.time() - _cache_time) < _CACHE_TTL:
+def _enum_name(value, enum_cls=None) -> str | None:
+    """Best-effort name for an enum or raw int returned by monitorcontrol.
+
+    monitorcontrol's getters sometimes hand back raw ints when the monitor
+    reports a value the library wraps incompletely. Re-map those through the
+    matching enum class so HA selects still receive symbolic option names.
+    """
+    if value is None:
+        return None
+    name = getattr(value, "name", None)
+    if name:
+        return name
+    if enum_cls is not None:
+        try:
+            return enum_cls(value).name
+        except (ValueError, KeyError):
+            pass
+    return str(value)
+
+
+def _probe_static_open(mon, mc, monitor_id: int) -> dict:
+    """Probe per-monitor static capabilities.
+
+    Must be called inside an open `with mon:` DDC/CI context. Tries each
+    feature once to confirm the monitor responds, and enumerates option
+    lists from the capability string. Heavy: this is what the cache is for.
+    """
+    static = {
+        "contrast_supported": False,
+        "input_source_supported": False,
+        "available_input_sources": [],
+        "color_preset_supported": False,
+        "available_color_presets": [],
+        "picture_mode_supported": False,
+        "available_picture_modes": [],
+    }
+
+    try:
+        caps = mon.get_vcp_capabilities() or {}
+    except Exception as e:
+        caps = {}
+        logger.debug("Monitor %d: get_vcp_capabilities failed: %s", monitor_id, e)
+
+    try:
+        mon.get_contrast()
+        static["contrast_supported"] = True
+    except Exception as e:
+        logger.debug("Monitor %d: contrast unsupported: %s", monitor_id, e)
+
+    try:
+        mon.get_input_source()
+        static["input_source_supported"] = True
+    except Exception as e:
+        logger.debug("Monitor %d: input_source unsupported: %s", monitor_id, e)
+
+    inputs = caps.get("inputs") or []
+    input_enum = mc.InputSource if mc else None
+    static["available_input_sources"] = [
+        n for n in (_enum_name(s, input_enum) for s in inputs) if n is not None
+    ]
+
+    try:
+        mon.get_color_preset()
+        static["color_preset_supported"] = True
+        if mc is not None:
+            static["available_color_presets"] = [p.name for p in mc.ColorPreset]
+    except Exception as e:
+        logger.debug("Monitor %d: color_preset unsupported: %s", monitor_id, e)
+
+    # Picture / scene mode (VCP 0xDC). Trickier than color preset because
+    # many monitors (LG ultrawides included) respond to READS but silently
+    # drop every WRITE - they implement the register but not the feature.
+    # The capability string is the most reliable signal: a monitor that
+    # really implements picture mode declares its supported codes under
+    # cmds[0xDC]. If 0xDC isn't declared, treat the feature as unsupported
+    # to avoid exposing a non-functional select.
+    cmds = caps.get("cmds") or {}
+    declared = cmds.get(PICTURE_MODE_VCP)
+    if declared:
+        try:
+            mon.vcp.get_vcp_feature(PICTURE_MODE_VCP)
+            static["picture_mode_supported"] = True
+            static["available_picture_modes"] = [
+                {"code": c, "label": PICTURE_MODE_LABELS.get(c, f"Mode {c}")}
+                for c in sorted(declared)
+            ]
+        except Exception as e:
+            logger.debug("Monitor %d: picture_mode declared but unreadable: %s", monitor_id, e)
+    else:
+        logger.debug("Monitor %d: picture_mode (VCP 0xDC) not declared in capability string", monitor_id)
+
+    return static
+
+
+def _probe_dynamic_open(mon, mc, monitor_id: int, static: dict) -> dict:
+    """Read current values for features known to be supported.
+
+    Must be called inside an open `with mon:` context. Skips reads for
+    unsupported features (saves one I2C roundtrip each), so the warm path
+    only touches features the monitor actually responds to.
+    """
+    dynamic = {
+        "power_on": True,
+        "contrast": None,
+        "input_source": None,
+        "color_preset": None,
+        "picture_mode": None,
+        "picture_mode_code": None,
+    }
+
+    try:
+        dynamic["power_on"] = mon.get_power_mode() == mc.PowerMode.on
+    except Exception as e:
+        logger.debug("Monitor %d: power readback failed: %s", monitor_id, e)
+
+    if static.get("contrast_supported"):
+        try:
+            dynamic["contrast"] = mon.get_contrast()
+        except Exception as e:
+            logger.debug("Monitor %d: contrast readback failed: %s", monitor_id, e)
+
+    if static.get("input_source_supported"):
+        try:
+            src = mon.get_input_source()
+            dynamic["input_source"] = _enum_name(src, mc.InputSource if mc else None)
+        except Exception as e:
+            logger.debug("Monitor %d: input_source readback failed: %s", monitor_id, e)
+
+    if static.get("color_preset_supported"):
+        try:
+            preset = mon.get_color_preset()
+            dynamic["color_preset"] = _enum_name(preset, mc.ColorPreset if mc else None)
+        except Exception as e:
+            logger.debug("Monitor %d: color_preset readback failed: %s", monitor_id, e)
+
+    if static.get("picture_mode_supported"):
+        try:
+            current, _maximum = mon.vcp.get_vcp_feature(PICTURE_MODE_VCP)
+            dynamic["picture_mode_code"] = current
+            dynamic["picture_mode"] = PICTURE_MODE_LABELS.get(current, f"Mode {current}")
+        except Exception as e:
+            logger.debug("Monitor %d: picture_mode readback failed: %s", monitor_id, e)
+
+    return dynamic
+
+
+def list_monitors(force_refresh: bool = False, rediscover: bool = False) -> list[MonitorInfo]:
+    """List all connected monitors with their current state.
+
+    Args:
+        force_refresh: bypass the short TTL response cache.
+        rediscover: also drop the per-monitor static capability cache, so the
+            next probe re-runs DDC/CI capability discovery. Use after hot-plug
+            or when a monitor's reported capabilities change.
+    """
+    global _monitor_cache, _cache_time, _static_cache_monitor_count
+
+    if (
+        not force_refresh
+        and not rediscover
+        and _monitor_cache is not None
+        and (time.time() - _cache_time) < _CACHE_TTL
+    ):
         return _monitor_cache
 
     sbc = _load_sbc()
@@ -159,7 +372,13 @@ def list_monitors(force_refresh: bool = False) -> list[MonitorInfo]:
         info_list = sbc.list_monitors_info()
         brightnesses = sbc.get_brightness()
 
-        # Get DDC/CI monitors for power state
+        # Invalidate the static cache on explicit rediscover OR on topology
+        # change (hot-plug / disconnect). Both indicate the cached probe is
+        # potentially stale.
+        if rediscover or len(info_list) != _static_cache_monitor_count:
+            _static_cache.clear()
+            _static_cache_monitor_count = len(info_list)
+
         mc = _load_monitorcontrol()
         ddc_monitors = []
         if mc:
@@ -181,25 +400,44 @@ def list_monitors(force_refresh: bool = False) -> list[MonitorInfo]:
             edid = info.get("edid", "")
             resolution = _parse_edid_resolution(edid) if edid else None
 
-            # Read power state via DDC/CI
-            power_on = True
+            static: dict = {}
+            dynamic: dict = {}
+
+            # Open the DDC handle ONCE; do static probe (if needed) + dynamic
+            # readback inside the same context. Opening the handle is the
+            # expensive part — keep both phases under one open.
             if power_supported and i < len(ddc_monitors):
                 try:
                     with ddc_monitors[i] as mon:
-                        power_mode = mon.get_power_mode()
-                        power_on = power_mode == mc.PowerMode.on
-                except Exception:
-                    pass
+                        if i not in _static_cache:
+                            _static_cache[i] = _probe_static_open(mon, mc, i)
+                        static = _static_cache[i]
+                        dynamic = _probe_dynamic_open(mon, mc, i, static)
+                except Exception as e:
+                    logger.debug("Monitor %d: DDC/CI session failed: %s", i, e)
+                    static = _static_cache.get(i, {})
 
             monitors.append(MonitorInfo(
                 id=i,
                 name=name,
                 brightness=brightness,
                 power_supported=power_supported,
-                power_on=power_on,
+                power_on=dynamic.get("power_on", True),
                 model=model,
                 manufacturer=manufacturer,
                 resolution=resolution,
+                contrast=dynamic.get("contrast"),
+                contrast_supported=static.get("contrast_supported", False),
+                input_source=dynamic.get("input_source"),
+                available_input_sources=static.get("available_input_sources", []),
+                input_source_supported=static.get("input_source_supported", False),
+                color_preset=dynamic.get("color_preset"),
+                available_color_presets=static.get("available_color_presets", []),
+                color_preset_supported=static.get("color_preset_supported", False),
+                picture_mode=dynamic.get("picture_mode"),
+                picture_mode_code=dynamic.get("picture_mode_code"),
+                available_picture_modes=static.get("available_picture_modes", []),
+                picture_mode_supported=static.get("picture_mode_supported", False),
             ))
     except Exception as e:
         logger.error("Failed to enumerate monitors: %s", e)
@@ -234,9 +472,7 @@ def set_brightness(monitor_id: int, value: int) -> bool:
     value = max(0, min(100, value))
     try:
         sbc.set_brightness(value, display=monitor_id)
-        # Invalidate cache
-        global _monitor_cache
-        _monitor_cache = None
+        _invalidate_cache()
         return True
     except Exception as e:
         logger.error("Failed to set brightness for monitor %d: %s", monitor_id, e)
@@ -262,10 +498,155 @@ def set_power(monitor_id: int, on: bool) -> bool:
             else:
                 monitor.set_power_mode(mc.PowerMode.off_soft)
 
-        # Invalidate cache
-        global _monitor_cache
-        _monitor_cache = None
+        _invalidate_cache()
         return True
     except Exception as e:
         logger.error("Failed to set power for monitor %d: %s", monitor_id, e)
         return False
+
+
+def _verify_after_set(getter, expected, *, retries: int = 3, delay: float = 0.1) -> bool:
+    """Poll a DDC/CI getter to confirm the monitor actually applied a write.
+
+    DDC/CI writes are fire-and-forget at the protocol level: a successful
+    send does not mean the monitor honored the value. Many monitors silently
+    drop writes for codes their firmware doesn't really implement (LG's
+    ColorPreset / Picture Mode are common offenders). Without this check the
+    API would report `success: true` while the monitor sat unchanged.
+
+    Compares both raw and `.value` forms so enum/int mismatches don't flag a
+    spurious failure.
+    """
+    expected_int = getattr(expected, "value", expected)
+    for _ in range(retries):
+        time.sleep(delay)
+        try:
+            actual = getter()
+        except Exception:
+            continue
+        actual_int = getattr(actual, "value", actual)
+        if actual == expected or actual_int == expected_int:
+            return True
+    return False
+
+
+def set_contrast(monitor_id: int, value: int) -> bool:
+    """Set contrast for a specific monitor (0-100) via DDC/CI."""
+    mc = _load_monitorcontrol()
+    if mc is None:
+        return False
+
+    value = max(0, min(100, value))
+    try:
+        ddc_monitors = mc.get_monitors()
+        if monitor_id >= len(ddc_monitors):
+            return False
+        with ddc_monitors[monitor_id] as monitor:
+            monitor.set_contrast(value)
+            if not _verify_after_set(monitor.get_contrast, value):
+                logger.warning("Monitor %d: contrast %d not applied", monitor_id, value)
+                return False
+        _invalidate_cache()
+        return True
+    except Exception as e:
+        logger.error("Failed to set contrast for monitor %d: %s", monitor_id, e)
+        return False
+
+
+def set_input_source(monitor_id: int, source: str) -> bool:
+    """Set the DDC/CI input source by enum name (e.g. 'HDMI1', 'DP1')."""
+    mc = _load_monitorcontrol()
+    if mc is None:
+        return False
+
+    try:
+        target = mc.InputSource[source]
+    except KeyError:
+        logger.error("Unknown input source: %s", source)
+        return False
+
+    try:
+        ddc_monitors = mc.get_monitors()
+        if monitor_id >= len(ddc_monitors):
+            return False
+        with ddc_monitors[monitor_id] as monitor:
+            monitor.set_input_source(target)
+            # Source switches can briefly disrupt the DDC/CI link; allow a
+            # longer settle window before declaring failure.
+            if not _verify_after_set(monitor.get_input_source, target, retries=5, delay=0.2):
+                logger.warning("Monitor %d: input source %s not applied", monitor_id, source)
+                return False
+        _invalidate_cache()
+        return True
+    except Exception as e:
+        logger.error("Failed to set input source for monitor %d: %s", monitor_id, e)
+        return False
+
+
+def set_color_preset(monitor_id: int, preset: str) -> bool:
+    """Set the DDC/CI color preset by enum name (e.g. 'COLOR_TEMP_6500K')."""
+    mc = _load_monitorcontrol()
+    if mc is None:
+        return False
+
+    try:
+        target = mc.ColorPreset[preset]
+    except KeyError:
+        logger.error("Unknown color preset: %s", preset)
+        return False
+
+    try:
+        ddc_monitors = mc.get_monitors()
+        if monitor_id >= len(ddc_monitors):
+            return False
+        with ddc_monitors[monitor_id] as monitor:
+            monitor.set_color_preset(target)
+            if not _verify_after_set(monitor.get_color_preset, target):
+                logger.warning(
+                    "Monitor %d: color preset %s not applied (monitor silently rejected)",
+                    monitor_id, preset,
+                )
+                return False
+        _invalidate_cache()
+        return True
+    except Exception as e:
+        logger.error("Failed to set color preset for monitor %d: %s", monitor_id, e)
+        return False
+
+
+def set_picture_mode(monitor_id: int, code: int) -> bool:
+    """Set the DDC/CI picture/scene mode (VCP 0xDC) by raw code."""
+    mc = _load_monitorcontrol()
+    if mc is None:
+        return False
+
+    if not 0 <= code <= 255:
+        logger.error("Picture mode code %d out of range", code)
+        return False
+
+    try:
+        ddc_monitors = mc.get_monitors()
+        if monitor_id >= len(ddc_monitors):
+            return False
+        with ddc_monitors[monitor_id] as monitor:
+            monitor.vcp.set_vcp_feature(PICTURE_MODE_VCP, code)
+            # Raw VCP read returns (current, maximum) — only compare current.
+            def _read_picture_mode():
+                current, _ = monitor.vcp.get_vcp_feature(PICTURE_MODE_VCP)
+                return current
+            if not _verify_after_set(_read_picture_mode, code):
+                logger.warning(
+                    "Monitor %d: picture mode code %d not applied (monitor silently rejected)",
+                    monitor_id, code,
+                )
+                return False
+        _invalidate_cache()
+        return True
+    except Exception as e:
+        logger.error("Failed to set picture mode for monitor %d: %s", monitor_id, e)
+        return False
+
+
+def _invalidate_cache() -> None:
+    global _monitor_cache
+    _monitor_cache = None

media_server/services/websocket_manager.py

@@ -19,6 +19,7 @@ class ConnectionManager:
         self._active_connections: set[WebSocket] = set()
         self._lock = asyncio.Lock()
         self._last_status: dict[str, Any] | None = None
+        self._get_status_func: Callable[[], Coroutine[Any, Any, Any]] | None = None
         self._broadcast_task: asyncio.Task | None = None
         self._poll_interval: float = 0.5  # Internal poll interval for change detection
         self._position_broadcast_interval: float = 5.0  # Send position updates every 5s during playback
@@ -39,9 +40,17 @@ class ConnectionManager:
         )
 
         # Send current status immediately upon connection
-        if self._last_status:
+        status = self._last_status
+        if not status and self._get_status_func:
             try:
-                await websocket.send_json({"type": "status", "data": self._last_status})
+                result = await self._get_status_func()
+                status = result.model_dump()
+                self._last_status = status
+            except Exception as e:
+                logger.debug("Failed to fetch initial status: %s", e)
+        if status:
+            try:
+                await websocket.send_json({"type": "status", "data": status})
             except Exception as e:
                 logger.debug("Failed to send initial status: %s", e)
 
@@ -152,26 +161,48 @@ class ConnectionManager:
             self._audio_task = None
 
     async def _audio_broadcast_loop(self) -> None:
-        """Background loop: read frequency data from analyzer and broadcast to subscribers."""
-        from ..config import settings
-        interval = 1.0 / settings.visualizer_fps
+        """Background loop: read frequency data from analyzer and broadcast to subscribers.
 
-        _last_data = None
+        Event-driven: blocks on the analyzer's data_event so it wakes up
+        exactly once per produced frame, instead of polling on a timer.
+        Backstop sleep applies when capture is idle / has no subscribers.
+        """
+        from ..config import settings
+        idle_interval = 1.0 / max(1, settings.visualizer_fps)
+        # Bounded wait so we still notice subscribe/unsubscribe transitions.
+        wake_timeout = max(0.05, idle_interval)
+        loop = asyncio.get_event_loop()
+
+        last_seq = -1
 
         while True:
             try:
                 async with self._lock:
                     subscribers = list(self._visualizer_subscribers)
 
-                if not subscribers or not self._audio_analyzer or not self._audio_analyzer.running:
-                    await asyncio.sleep(interval)
+                analyzer = self._audio_analyzer
+                if not subscribers or not analyzer or not analyzer.running:
+                    await asyncio.sleep(idle_interval)
                     continue
 
-                data = self._audio_analyzer.get_frequency_data()
-                if data is None or data is _last_data:
-                    await asyncio.sleep(interval)
+                # Wait off-loop for a fresh frame. The capture thread sets
+                # data_event after each FFT update; we clear it before the
+                # next wait so we never burn a wake on stale data.
+                ev = analyzer.data_event
+
+                def _wait() -> bool:
+                    return ev.wait(wake_timeout)
+
+                got = await loop.run_in_executor(None, _wait)
+                if not got:
+                    # Timeout — loop around to re-check subscriber state.
                     continue
-                _last_data = data
+                ev.clear()
+
+                data, seq = analyzer.get_frequency_data_versioned()
+                if data is None or seq == last_seq:
+                    continue
+                last_seq = seq
 
                 # Pre-serialize once for all subscribers (avoids per-client JSON encoding)
                 text = json.dumps({"type": "audio_data", "data": data}, separators=(',', ':'))
@@ -189,13 +220,11 @@ class ConnectionManager:
                 for ws in failed:
                     await self.disconnect(ws)
 
-                await asyncio.sleep(interval)
-
             except asyncio.CancelledError:
                 break
             except Exception as e:
                 logger.error("Error in audio broadcast: %s", e)
-                await asyncio.sleep(interval)
+                await asyncio.sleep(idle_interval)
 
     def status_changed(
         self, old: dict[str, Any] | None, new: dict[str, Any]
@@ -251,6 +280,7 @@ class ConnectionManager:
         if self._running:
             return
 
+        self._get_status_func = get_status_func
         self._running = True
         self._broadcast_task = asyncio.create_task(
             self._status_monitor_loop(get_status_func)

media_server/static/index.html

@@ -6,6 +6,7 @@
     <title>Media Server</title>
     <meta name="description" content="Remote media player control and file browser">
     <meta name="theme-color" content="#121212">
+    <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="Media Server">
@@ -75,17 +76,24 @@
         </div>
     </div>
 
+    <!-- Folio marks at page corners -->
+    <span class="folio tl"><span class="status-dot" id="status-dot" aria-live="polite"></span><span data-i18n="header.connected">Connected</span> · <span id="folio-host">Local 8765</span></span>
+    <span class="folio tr"><span data-i18n="header.volume">Vol. I</span> — <span data-i18n="header.edition">Studio Reference</span> · <span id="version-label"></span></span>
+
     <div class="container">
         <header>
-            <div style="display: flex; align-items: center; gap: 0.5rem;">
-                <span class="status-dot" id="status-dot" aria-live="polite"></span>
-                <span class="version-label" id="version-label"></span>
+            <div class="brand">
+                <span class="brand-name" data-i18n="app.title">Media Server</span>
+                <span class="brand-sub" data-i18n="header.edition_sub">Studio Reference Edition</span>
             </div>
             <div class="header-toolbar">
                 <div id="headerLinks" class="header-links"></div>
                 <a class="header-btn" href="/docs" target="_blank" title="API Documentation" aria-label="API Documentation">
                     <svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 2l5 5h-5V4zM6 20V4h5v7h7v9H6zm2-4h8v2H8v-2zm0-3h8v2H8v-2z"/></svg>
                 </a>
+                <button class="header-btn" onclick="showAboutDialog()" data-i18n-title="about.button_title" title="About" aria-label="About">
+                    <svg viewBox="0 0 24 24"><path fill="currentColor" d="M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+                </button>
                 <div class="accent-picker">
                     <button class="header-btn" onclick="toggleAccentPicker()" title="Accent color" aria-label="Accent color">
                         <span class="accent-dot" id="accentDot"></span>
@@ -95,6 +103,10 @@
                 <button class="header-btn" onclick="toggleDynamicBackground()" data-i18n-title="player.background" title="Dynamic background" aria-label="Dynamic background" id="bgToggle">
                     <svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z"/></svg>
                 </button>
+                <button class="header-btn" onclick="togglePlayerFullscreen()" data-i18n-title="player.fullscreen" title="Fullscreen player" aria-label="Fullscreen player" id="fullscreenToggle">
+                    <svg id="fullscreen-icon-enter" viewBox="0 0 24 24"><path fill="currentColor" d="M5 5h5v2H7v3H5V5zm9 0h5v5h-2V7h-3V5zm0 14v-2h3v-3h2v5h-5zM5 14h2v3h3v2H5v-5z"/></svg>
+                    <svg id="fullscreen-icon-exit" viewBox="0 0 24 24" style="display:none"><path fill="currentColor" d="M8 8H5v2H3V6a1 1 0 0 1 1-1h4v3zm8 0h3v2h2V6a1 1 0 0 0-1-1h-4v3zm0 8h3v-2h2v4a1 1 0 0 1-1 1h-4v-3zM8 16H5v-2H3v4a1 1 0 0 0 1 1h4v-3z"/></svg>
+                </button>
                 <button class="header-btn" onclick="toggleTheme()" data-i18n-title="player.theme" title="Toggle theme" aria-label="Toggle theme" id="theme-toggle">
                     <svg id="theme-icon-sun" viewBox="0 0 24 24" style="display: none;">
                         <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
@@ -127,103 +139,174 @@
             <button class="connection-banner-btn" id="connectionBannerBtn" onclick="manualReconnect()" style="display: none;" data-i18n="connection.reconnect">Reconnect</button>
         </div>
 
-        <!-- Tab Bar -->
+        <!-- Tab Bar (editorial: numbered, italic active) -->
         <div class="tab-bar" id="tabBar" role="tablist">
             <div class="tab-indicator" id="tabIndicator"></div>
             <button class="tab-btn active" data-tab="player" onclick="switchTab('player')" role="tab" aria-selected="true" aria-controls="panel-player" tabindex="0">
-                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
-                <span data-i18n="tab.player">Player</span>
+                <span class="tab-num">01</span>
+                <span data-i18n="tab.player">Now Spinning</span>
             </button>
             <button class="tab-btn" data-tab="display" onclick="switchTab('display')" role="tab" aria-selected="false" aria-controls="panel-display" tabindex="-1">
-                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M20 3H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h6v2H8v2h8v-2h-2v-2h6c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H4V5h16v10z"/></svg>
+                <span class="tab-num">02</span>
                 <span data-i18n="tab.display">Display</span>
             </button>
             <button class="tab-btn" data-tab="browser" onclick="switchTab('browser')" role="tab" aria-selected="false" aria-controls="panel-browser" tabindex="-1">
-                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
-                <span data-i18n="tab.browser">Browser</span>
+                <span class="tab-num">03</span>
+                <span data-i18n="tab.browser">Library</span>
             </button>
             <button class="tab-btn" data-tab="quick-actions" onclick="switchTab('quick-actions')" role="tab" aria-selected="false" aria-controls="panel-quick-actions" tabindex="-1">
-                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7 2v11h3v9l7-12h-4l4-8z"/></svg>
+                <span class="tab-num">04</span>
                 <span data-i18n="tab.quick_access">Quick Access</span>
             </button>
             <button class="tab-btn" data-tab="settings" onclick="switchTab('settings')" role="tab" aria-selected="false" aria-controls="panel-settings" tabindex="-1">
-                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
+                <span class="tab-num">05</span>
                 <span data-i18n="tab.settings">Settings</span>
             </button>
         </div>
 
         <div class="player-container" data-tab-content="player" role="tabpanel" id="panel-player">
-            <div class="player-layout">
-                <div class="album-art-container">
+            <!-- Fullscreen-only chrome: floating top strip with kicker + exit. Auto-hides on idle. -->
+            <div class="fs-chrome" id="fsChrome" aria-hidden="true">
+                <div class="fs-chrome-mark">
+                    <span class="fs-chrome-edition" data-i18n="header.edition">Studio Reference</span>
+                    <span class="fs-chrome-sep">·</span>
+                    <span class="fs-chrome-kicker" data-i18n="player.kicker">Now Playing</span>
+                </div>
+                <button class="fs-chrome-exit" onclick="togglePlayerFullscreen()" data-i18n-title="player.fullscreen.exit" title="Exit fullscreen" aria-label="Exit fullscreen">
+                    <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M8 8H5v2H3V6a1 1 0 0 1 1-1h4v3zm8 0h3v2h2V6a1 1 0 0 0-1-1h-4v3zm0 8h3v-2h2v4a1 1 0 0 1-1 1h-4v-3zM8 16H5v-2H3v4a1 1 0 0 0 1 1h4v-3z"/></svg>
+                    <span data-i18n="player.fullscreen.exit_short">Exit</span>
+                    <kbd class="fs-chrome-kbd">ESC</kbd>
+                </button>
+            </div>
+
+            <!-- Ambient album-art bloom: paints the room in the record's color while in fullscreen -->
+            <div class="fs-bloom" id="fsBloom" aria-hidden="true">
+                <img id="fs-bloom-art" src="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" alt="">
+            </div>
+
+            <section class="now-playing player-layout">
+
+                <!-- Vinyl stage: cardstock sleeve + disc peeking out, plus tonearm -->
+                <div class="vinyl-stage album-art-container">
                     <img id="album-art-glow" class="album-art-glow" src="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" alt="" aria-hidden="true">
-                    <img id="album-art" src="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%3Cpath fill='%236a6a6a' 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" alt="Album Art">
+                    <div class="sleeve">
+                        <img id="album-art" src="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" alt="Album Art">
+                        <div class="sleeve-grain" aria-hidden="true"></div>
+                        <div class="sleeve-corner" aria-hidden="true"></div>
+                    </div>
+                    <div class="vinyl-wrap">
+                        <div class="vinyl">
+                            <div class="vinyl-label">
+                                <!-- Stylised record-label catalogue mark, not user-facing
+                                     copy — intentionally not in the i18n bundle. -->
+                                <span class="vinyl-label-text">REF · 24</span>
+                            </div>
+                        </div>
+                    </div>
+                    <svg class="tonearm" viewBox="0 0 200 200" aria-hidden="true">
+                        <defs>
+                            <linearGradient id="armGrad" x1="0" x2="1">
+                                <stop offset="0" stop-color="#6d5f44"/>
+                                <stop offset="0.5" stop-color="#d8c39a"/>
+                                <stop offset="1" stop-color="#8a7a5a"/>
+                            </linearGradient>
+                        </defs>
+                        <circle cx="176" cy="24" r="14" fill="#2a241c" stroke="#9C835A" stroke-width="1.5"/>
+                        <circle cx="176" cy="24" r="6" fill="#5C5447"/>
+                        <circle cx="176" cy="24" r="2.5" fill="#E08038"/>
+                        <line x1="176" y1="24" x2="64" y2="136" stroke="url(#armGrad)" stroke-width="5" stroke-linecap="round"/>
+                        <rect x="180" y="14" width="14" height="20" fill="#3A3528" stroke="#9C835A" stroke-width="1"/>
+                        <rect x="56" y="128" width="22" height="18" rx="2" fill="#3A3528" stroke="#9C835A" stroke-width="1" transform="rotate(-45 67 137)"/>
+                        <circle cx="62" cy="138" r="3.5" fill="#E08038" opacity="0.95"/>
+                        <circle cx="62" cy="138" r="7" fill="none" stroke="#E08038" stroke-width="0.8" opacity="0.5"/>
+                    </svg>
                     <canvas id="spectrogram-canvas" class="spectrogram-canvas" width="300" height="64"></canvas>
                 </div>
 
-                <div class="player-details">
-                    <div class="track-info">
-                        <div id="track-title" data-i18n="player.no_media">No media playing</div>
-                        <div id="artist"></div>
-                        <div id="album"></div>
-                        <div class="playback-state">
-                            <svg class="state-icon" id="state-icon" viewBox="0 0 24 24">
-                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
-                            </svg>
-                            <span id="playback-state" data-i18n="state.idle">Idle</span>
+                <!-- Track masthead -->
+                <div class="track-masthead player-details">
+
+                    <div class="kicker"><span data-i18n="player.kicker">Now Playing</span></div>
+
+                    <h1 class="track-title" id="track-title" data-i18n="player.no_media">No media playing</h1>
+                    <div class="track-byline" id="artist"></div>
+                    <div class="track-album" id="album"></div>
+
+                    <!-- 2-cell metadata grid -->
+                    <div class="meta-grid meta-grid-2">
+                        <div class="meta-cell">
+                            <div class="label" data-i18n="meta.state">State</div>
+                            <div class="value">
+                                <svg class="state-icon" id="state-icon" viewBox="0 0 24 24">
+                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
+                                </svg>
+                                <span id="playback-state" data-i18n="state.idle">Idle</span>
+                            </div>
+                        </div>
+                        <div class="meta-cell">
+                            <div class="label" data-i18n="meta.source">Source</div>
+                            <div class="value source-value">
+                                <span class="source-icon" id="sourceIcon"></span>
+                                <span id="source" data-i18n="player.unknown_source">Unknown</span>
+                            </div>
                         </div>
                     </div>
 
-                    <div class="progress-container">
-                        <div class="time-display">
-                            <span id="current-time">0:00</span>
-                            <span id="total-time">0:00</span>
+                    <!-- Spectrum bars — driven by real audio when visualizer is active,
+                         CSS-animated synthetic motion otherwise. JS injects the spans. -->
+                    <div class="spectrum" id="player-spectrum" aria-hidden="true"></div>
+
+                    <!-- Transport -->
+                    <div class="transport">
+                        <div class="progress-row">
+                            <span class="timecode elapsed" id="current-time">0:00</span>
+                            <div class="progress-track progress-bar" id="progress-bar" data-duration="0" role="slider" aria-label="Playback position" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0">
+                                <div class="progress-fill" id="progress-fill"></div>
+                            </div>
+                            <span class="timecode" id="total-time">0:00</span>
                         </div>
-                        <div class="progress-bar" id="progress-bar" data-duration="0" role="slider" aria-label="Playback position" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0">
-                            <div class="progress-fill" id="progress-fill"></div>
-                        </div>
-                    </div>
 
-                    <div class="controls">
-                        <button onclick="previousTrack()" data-i18n-title="player.previous" title="Previous" id="btn-previous">
-                            <svg viewBox="0 0 24 24">
-                                <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
-                            </svg>
-                        </button>
-                        <button class="primary" onclick="togglePlayPause()" data-i18n-title="player.play" title="Play/Pause" id="btn-play-pause">
-                            <svg viewBox="0 0 24 24" id="play-pause-icon">
-                                <path d="M8 5v14l11-7z"/>
-                            </svg>
-                        </button>
-                        <button onclick="nextTrack()" data-i18n-title="player.next" title="Next" id="btn-next">
-                            <svg viewBox="0 0 24 24">
-                                <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
-                            </svg>
-                        </button>
-                    </div>
-
-                    <div class="volume-container">
-                        <button class="mute-btn" onclick="toggleMute()" data-i18n-title="player.mute" title="Mute" id="btn-mute">
-                            <svg viewBox="0 0 24 24" id="mute-icon">
-                                <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
-                            </svg>
-                        </button>
-                        <input type="range" id="volume-slider" min="0" max="100" value="50" aria-label="Volume">
-                        <div class="volume-display" id="volume-display">50%</div>
-                    </div>
-
-                    <div class="source-info">
-                        <span class="source-label"><span class="source-icon" id="sourceIcon"></span><span id="source" data-i18n="player.unknown_source">Unknown</span></span>
-                        <div class="player-toggles">
-                            <button class="vinyl-toggle-btn" onclick="toggleVinylMode()" id="vinylToggle" data-i18n-title="player.vinyl" title="Vinyl mode">
-                                <svg viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="12" cy="12" r="3" fill="currentColor"/><circle cx="12" cy="12" r="6.5" fill="none" stroke="currentColor" stroke-width="0.5" opacity="0.5"/></svg>
+                        <div class="controls">
+                            <button class="btn-trans" onclick="previousTrack()" data-i18n-title="player.previous" title="Previous" id="btn-previous">
+                                <svg viewBox="0 0 24 24"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
                             </button>
-                            <button class="vinyl-toggle-btn" onclick="toggleVisualizer()" id="visualizerToggle" data-i18n-title="player.visualizer" title="Audio visualizer" style="display:none">
-                                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M3 18h2v-8H3v8zm4 0h2V6H7v12zm4 0h2V2h-2v16zm4 0h2v-6h-2v6zm4 0h2V9h-2v9z"/></svg>
+                            <button class="btn-trans primary" onclick="togglePlayPause()" data-i18n-title="player.play" title="Play/Pause" id="btn-play-pause">
+                                <svg viewBox="0 0 24 24" id="play-pause-icon"><path d="M8 5v14l11-7z"/></svg>
                             </button>
+                            <button class="btn-trans" onclick="nextTrack()" data-i18n-title="player.next" title="Next" id="btn-next">
+                                <svg viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
+                            </button>
+
+                            <div class="vu-cluster">
+                                <div class="vu-meter" aria-hidden="true">
+                                    <div class="vu-needle" id="vuNeedle"></div>
+                                </div>
+                                <div class="vu-readout">
+                                    <span>OUT <strong id="vu-out">SYS</strong></span>
+                                    <span>VOL <strong id="vu-vol">50%</strong></span>
+                                </div>
+                                <!-- Volume control: mute + slim slider, integrated -->
+                                <div class="vu-volume">
+                                    <button class="mute-btn" onclick="toggleMute()" data-i18n-title="player.mute" title="Mute" id="btn-mute">
+                                        <svg viewBox="0 0 24 24" id="mute-icon">
+                                            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
+                                        </svg>
+                                    </button>
+                                    <input type="range" id="volume-slider" min="0" max="100" value="50" aria-label="Volume">
+                                </div>
+                            </div>
                         </div>
                     </div>
+
+                    <!-- Hidden but functional: legacy display + visualizer toggle. -->
+                    <div class="visually-hidden">
+                        <div id="volume-display">50%</div>
+                        <button onclick="toggleVisualizer()" id="visualizerToggle" data-i18n-title="player.visualizer" title="Audio visualizer" style="display:none">
+                            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M3 18h2v-8H3v8zm4 0h2V6H7v12zm4 0h2V2h-2v16zm4 0h2v-6h-2v6zm4 0h2V9h-2v9z"/></svg>
+                        </button>
+                    </div>
                 </div>
-            </div>
+            </section>
         </div>
 
         <!-- Media Browser Section -->
@@ -708,16 +791,31 @@
     <!-- Toast Notifications -->
     <div class="toast-container" id="toast-container"></div>
 
-    <!-- Footer -->
-    <footer>
-        <div>
-            <span data-i18n="footer.created_by">Created by</span> <strong>Alexei Dolgolyov</strong>
-            <span class="separator">•</span>
-            <a href="mailto:dolgolyov.alexei@gmail.com">dolgolyov.alexei@gmail.com</a>
-            <span class="separator">•</span>
-            <a href="https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server" target="_blank" rel="noopener noreferrer" data-i18n="footer.source_code">Source Code</a>
+    <!-- About Dialog -->
+    <dialog id="aboutDialog" class="about-dialog">
+        <div class="dialog-header">
+            <h3 data-i18n="about.title">About</h3>
         </div>
-    </footer>
+        <div class="dialog-body">
+            <p class="about-credit">
+                <span data-i18n="about.created_by">Created by</span>
+                <strong>Alexei Dolgolyov</strong>
+            </p>
+            <ul class="about-links">
+                <li>
+                    <span class="about-links-label" data-i18n="about.email">Email</span>
+                    <a href="mailto:dolgolyov.alexei@gmail.com">dolgolyov.alexei@gmail.com</a>
+                </li>
+                <li>
+                    <span class="about-links-label" data-i18n="about.repository">Repository</span>
+                    <a href="https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server" target="_blank" rel="noopener noreferrer" data-i18n="about.source_code">Source Code</a>
+                </li>
+            </ul>
+        </div>
+        <div class="dialog-footer">
+            <button type="button" class="btn-secondary" onclick="closeAboutDialog()" data-i18n="dialog.close">Close</button>
+        </div>
+    </dialog>
 
     <script src="/static/dist/app.bundle.js"></script>
 </body>

media_server/static/js/app.js

@@ -14,6 +14,7 @@ import {
     VOLUME_THROTTLE_MS, VOLUME_RELEASE_DELAY_MS,
     changeLocale, t,
     setAuthRequired,
+    showAboutDialog, closeAboutDialog,
 } from './core.js';
 
 // Layer 1: Player (tabs, theme, accent, vinyl, visualizer, UI)
@@ -21,11 +22,11 @@ import {
     activeTab, switchTab, updateTabIndicator, setMiniPlayerVisible,
     initTheme, toggleTheme, initAccentColor, applyAccentColor,
     renderAccentSwatches, selectAccentColor, toggleAccentPicker, lightenColor,
-    toggleVinylMode, applyVinylMode,
-    visualizerEnabled, visualizerAvailable,
+    visualizerEnabled, visualizerAvailable, setVisualizerEnabled,
     checkVisualizerAvailability, toggleVisualizer, applyVisualizerMode,
     loadAudioDevices, onAudioDeviceChanged,
     setupProgressDrag, updateUI, updatePlaybackState, stopPositionInterpolation,
+    togglePlayerFullscreen, initPlayerFullscreen,
 } from './player.js';
 
 // Layer 2: WebSocket
@@ -62,6 +63,8 @@ import {
 
 import {
     loadDisplayMonitors, onDisplayBrightnessInput, onDisplayBrightnessChange,
+    onDisplayContrastInput, onDisplayContrastChange,
+    onDisplayInputSourceChange, onDisplayColorPresetChange, onDisplayPictureModeChange,
     toggleDisplayPower, loadHeaderLinks, loadLinksTable,
     showAddLinkDialog, showEditLinkDialog, closeLinkDialog, saveLink, deleteLinkConfirm,
     linkFormDirty, setLinkFormDirty,
@@ -96,10 +99,12 @@ Object.assign(window, {
     switchTab,
     // Theme & accent
     toggleTheme, toggleAccentPicker, selectAccentColor, lightenColor,
-    // Vinyl & visualizer
-    toggleVinylMode, toggleVisualizer,
+    // Visualizer (vinyl spin is structural CSS — no toggle)
+    toggleVisualizer,
     // Background
     toggleDynamicBackground,
+    // Fullscreen
+    togglePlayerFullscreen,
     // Auth
     authenticate, clearToken, manualReconnect,
     // Locale
@@ -124,9 +129,13 @@ Object.assign(window, {
     saveLink, deleteLinkConfirm,
     // Display
     loadDisplayMonitors, onDisplayBrightnessInput, onDisplayBrightnessChange,
+    onDisplayContrastInput, onDisplayContrastChange,
+    onDisplayInputSourceChange, onDisplayColorPresetChange, onDisplayPictureModeChange,
     toggleDisplayPower,
     // Audio device
     onAudioDeviceChanged,
+    // About
+    showAboutDialog, closeAboutDialog,
 });
 
 // ============================================================
@@ -157,18 +166,47 @@ window.addEventListener('DOMContentLoaded', async () => {
     // Initialize theme and accent color
     initTheme();
     initAccentColor();
+    initPlayerFullscreen();
 
     // Register service worker for PWA installability
     if ('serviceWorker' in navigator) {
         navigator.serviceWorker.register('/sw.js').catch(() => {});
     }
 
-    // Initialize vinyl mode
-    applyVinylMode();
+    // Build the editorial spectrum bars. Fewer, fatter bars read better
+    // than many thin ones at this column width. JS-managed so we can
+    // drive heights from real audio data when available.
+    const spectrumRoot = document.getElementById('player-spectrum');
+    if (spectrumRoot && !spectrumRoot.children.length) {
+        const SPECTRUM_BARS = 40;
+        // CSS repeat() doesn't accept a var() for its count — set the
+        // grid column template from JS so it always matches the bar
+        // count and stretches each bar to claim 1fr of the row.
+        spectrumRoot.style.gridTemplateColumns =
+            `repeat(${SPECTRUM_BARS}, minmax(0, 1fr))`;
+        const frag = document.createDocumentFragment();
+        for (let i = 0; i < SPECTRUM_BARS; i++) {
+            const s = document.createElement('span');
+            // Pseudo-random initial scaleY for the synthetic CSS-only
+            // animation (used while no real audio is flowing).
+            const scale = (0.25 + Math.abs(Math.sin(i * 0.7)) * 0.70).toFixed(2);
+            s.style.setProperty('--bar-h-scale', scale);
+            s.style.setProperty('--bar-delay', (-Math.random() * 1.1).toFixed(2) + 's');
+            frag.appendChild(s);
+        }
+        spectrumRoot.appendChild(frag);
+    }
 
-    // Initialize audio visualizer
+    // Initialize audio visualizer — auto-enable when supported so the
+    // spectrum shows real audio out of the box.
     checkVisualizerAvailability().then(() => {
-        if (visualizerEnabled && visualizerAvailable) {
+        if (!visualizerAvailable) return;
+        // First install: opt the user in by default since the spectrum
+        // is the centerpiece of the player view.
+        const stored = localStorage.getItem('visualizerEnabled');
+        const shouldEnable = stored === null ? true : stored === 'true';
+        if (shouldEnable) {
+            setVisualizerEnabled(true);   // updates the let in player.js
             applyVisualizerMode();
         }
     });
@@ -368,6 +406,16 @@ window.addEventListener('DOMContentLoaded', async () => {
         }
     });
 
+    // About dialog backdrop click to close
+    const aboutDialog = document.getElementById('aboutDialog');
+    if (aboutDialog) {
+        aboutDialog.addEventListener('click', (e) => {
+            if (e.target === aboutDialog) {
+                closeAboutDialog();
+            }
+        });
+    }
+
     // Delegated click handlers for link table actions (XSS-safe)
     document.getElementById('linksTableBody').addEventListener('click', (e) => {
         const btn = e.target.closest('[data-action]');

media_server/static/js/background.js

@@ -236,27 +236,54 @@ export function updateBackgroundColors() {
 
 // ---- Render loop ----
 
+// Cached step into the bins array; recomputed only when bins.length
+// changes (which happens at most once after the first audio frame
+// arrives or when num_bins is reconfigured).
+let bgBinsLength = -1;
+let bgBinsStep = 1;
+// Last applied resolution — drawing with stale viewport is harmless,
+// but we still need to refresh the uniform after the resize listener
+// has updated the canvas.
+let bgLastResW = -1;
+let bgLastResH = -1;
+
 function renderBackgroundFrame() {
     bgAnimFrame = requestAnimationFrame(renderBackgroundFrame);
 
     const gl = bgGL;
     if (!gl || !bgUniforms) return;
 
-    resizeBackgroundCanvas();
-    gl.viewport(0, 0, bgCanvas.width, bgCanvas.height);
+    // Resize listener already keeps canvas dimensions in sync — only
+    // touch the viewport when the canvas actually changed size, so the
+    // per-frame path doesn't read window.innerWidth (a layout-flushing
+    // property).
+    if (bgCanvas.width !== bgLastResW || bgCanvas.height !== bgLastResH) {
+        bgLastResW = bgCanvas.width;
+        bgLastResH = bgCanvas.height;
+        gl.viewport(0, 0, bgLastResW, bgLastResH);
+        gl.uniform2f(bgUniforms.resolution, bgLastResW, bgLastResH);
+    }
 
     const time = performance.now() / 1000 - bgStartTime;
 
-    // Smooth audio data from the imported frequencyData (shared with visualizer)
+    // Smooth audio data from the imported frequencyData (shared with visualizer).
+    // Backend may send float bins (legacy) or int×1000 (new); .scale tells us which.
     if (frequencyData && frequencyData.frequencies) {
         const bins = frequencyData.frequencies;
-        const step = Math.max(1, Math.floor(bins.length / BG_BAND_COUNT));
+        const scale = frequencyData.scale && frequencyData.scale > 0
+            ? 1.0 / frequencyData.scale : 1.0;
+        if (bins.length !== bgBinsLength) {
+            bgBinsLength = bins.length;
+            bgBinsStep = Math.max(1, Math.floor(bgBinsLength / BG_BAND_COUNT));
+        }
+        const step = bgBinsStep;
         for (let i = 0; i < BG_BAND_COUNT; i++) {
-            const idx = Math.min(i * step, bins.length - 1);
-            const target = bins[idx] || 0;
+            let idx = i * step;
+            if (idx >= bgBinsLength) idx = bgBinsLength - 1;
+            const target = (bins[idx] || 0) * scale;
             bgSmoothedBands[i] += (target - bgSmoothedBands[i]) * (1 - BG_SMOOTHING);
         }
-        const targetBass = frequencyData.bass || 0;
+        const targetBass = (frequencyData.bass || 0) * scale;
         bgSmoothedBass += (targetBass - bgSmoothedBass) * (1 - BG_SMOOTHING);
     } else {
         // Gentle decay when no audio
@@ -267,7 +294,6 @@ function renderBackgroundFrame() {
     }
 
     // Set uniforms (locations cached at init, colors cached on change)
-    gl.uniform2f(bgUniforms.resolution, bgCanvas.width, bgCanvas.height);
     gl.uniform1f(bgUniforms.time, time);
     gl.uniform1f(bgUniforms.bass, bgSmoothedBass);
     gl.uniform1fv(bgUniforms.bands, bgSmoothedBands);

media_server/static/js/core.js

@@ -116,6 +116,8 @@ export function cacheDom() {
     dom.progressFill = document.getElementById('progress-fill');
     dom.currentTime = document.getElementById('current-time');
     dom.totalTime = document.getElementById('total-time');
+    dom.metaElapsed = document.getElementById('meta-elapsed');
+    dom.metaLength = document.getElementById('meta-length');
     dom.progressBar = document.getElementById('progress-bar');
     dom.miniProgressFill = document.getElementById('mini-progress-fill');
     dom.miniCurrentTime = document.getElementById('mini-current-time');
@@ -138,7 +140,10 @@ export function cacheDom() {
 
 // Timing constants
 export const VOLUME_THROTTLE_MS = 16;
-export const POSITION_INTERPOLATION_MS = 100;
+// 250ms is plenty for sub-second progress; the inline updateProgress
+// also short-circuits when the rounded second hasn't moved, so there's
+// no visible difference for the user.
+export const POSITION_INTERPOLATION_MS = 250;
 export const SEARCH_DEBOUNCE_MS = 200;
 export const TOAST_DURATION_MS = 3000;
 export const WS_BACKOFF_BASE_MS = 3000;
@@ -317,6 +322,8 @@ export async function fetchVersion() {
             const label = document.getElementById('version-label');
             if (data.version) {
                 label.textContent = `v${data.version}`;
+                const folioVersion = document.getElementById('folio-version');
+                if (folioVersion) folioVersion.textContent = `v${data.version}`;
             }
             if (data.update_available) {
                 showUpdateBanner(data.update_available);
@@ -390,6 +397,16 @@ export function closeDialog(dialog) {
     }, { once: true });
 }
 
+export function showAboutDialog() {
+    const dialog = document.getElementById('aboutDialog');
+    if (dialog) dialog.showModal();
+}
+
+export function closeAboutDialog() {
+    const dialog = document.getElementById('aboutDialog');
+    if (dialog) closeDialog(dialog);
+}
+
 export function showConfirm(message) {
     return new Promise((resolve) => {
         const dialog = document.getElementById('confirmDialog');

media_server/static/js/links.js

@@ -1,12 +1,107 @@
 // ============================================================
-// Display Brightness & Power Control + Links Management
+// Display Brightness, Power, Contrast, Input Source, Color Preset,
+// Picture Mode Control + Links Management
 // ============================================================
 
 import { t, showToast, escapeHtml, closeDialog, showConfirm, resolveMdiIcons, fetchMdiIcon, getAuthHeaders, hasCredentials } from './core.js';
+import { IconSelect } from './icon-select.js';
 
 let displayBrightnessTimers = {};
+let displayContrastTimers = {};
+let _displayIconSelects = [];
 const DISPLAY_THROTTLE_MS = 50;
 
+// ─── Icon palette for the tuning IconSelects ───────────────────────────
+// All SVGs are 24x24 monochrome — IconSelect's CSS fills them with currentColor.
+
+const ICON_PORT_GENERIC =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M4 8h16v8H4V8zm2 2v4h12v-4H6zm2 1h2v2H8v-2zm4 0h2v2h-2v-2zm-9 6h18v2H3v-2z"/></svg>';
+const ICON_PORT_HDMI =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M3 9l2-2h14l2 2v5l-2 2h-3l-1 1H9l-1-1H5l-2-2V9zm2.5.5v4l1 1h2l1 1h7l1-1h2l1-1v-4l-1-.5H6.5l-1 .5z"/></svg>';
+const ICON_PORT_DP =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M4 8l2-2h12l2 2v8l-2 2H6l-2-2V8zm2 .5V15l1 1h10l1-1V8.5L17 8H7l-1 .5zM8 10h2v4H8v-4zm6 0h2v4h-2v-4z"/></svg>';
+const ICON_PORT_DVI =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M3 8h18v8H3V8zm2 1.5v5h14v-5H5zM7 11h1.5v2H7v-2zm3 0h1.5v2H10v-2zm3 0h1.5v2H13v-2zm3 0h1.5v2H16v-2z"/></svg>';
+const ICON_PORT_VGA =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5 7h14a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2zm0 2v6h14V9H5zm2 1.5a.75.75 0 100 1.5.75.75 0 000-1.5zm3 0a.75.75 0 100 1.5.75.75 0 000-1.5zm3 0a.75.75 0 100 1.5.75.75 0 000-1.5zm3 0a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>';
+const ICON_PORT_USBC =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5 10a3 3 0 013-3h8a3 3 0 013 3v4a3 3 0 01-3 3H8a3 3 0 01-3-3v-4zm3-1.5A1.5 1.5 0 006.5 10v4A1.5 1.5 0 008 15.5h8a1.5 1.5 0 001.5-1.5v-4A1.5 1.5 0 0016 8.5H8zm1 2h6v3H9v-3z"/></svg>';
+
+const ICON_THERMOMETER =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 3a3 3 0 00-3 3v8.17A4 4 0 1015 14.17V6a3 3 0 00-3-3zm-1.5 3a1.5 1.5 0 113 0v8.76a2.5 2.5 0 11-3 0V6zm1.5 5a1 1 0 011 1v2.27a1.5 1.5 0 11-2 0V12a1 1 0 011-1z"/></svg>';
+
+const ICON_MODE_MOVIE =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M4 5h16v14H4V5zm2 2v2h2V7H6zm0 4v2h2v-2H6zm0 4v2h2v-2H6zm10-8v2h2V7h-2zm0 4v2h2v-2h-2zm0 4v2h2v-2h-2zm-6-7h4v8h-4V8z"/></svg>';
+const ICON_MODE_GAME =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M7 8a5 5 0 00-5 5 4 4 0 007.4 2.1L11 14h2l1.6 1.1A4 4 0 0022 13a5 5 0 00-5-5H7zm1 3v1H7v-1H6v-1h1V9h1v1h1v1H8zm7 0a1 1 0 110-2 1 1 0 010 2zm2 2a1 1 0 110-2 1 1 0 010 2z"/></svg>';
+const ICON_MODE_SPORT =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 2c1.7 0 3.3.5 4.6 1.4l-1.4 2.4L12 6.5l-3.2 1.3-1.4-2.4A8 8 0 0112 4zm-7.6 4l2.5 1.3-.5 3.5L4 16.4A8 8 0 014.4 8zm15.2 0a8 8 0 01.4 8.4l-2.4-1.6-.5-3.5L19.6 8zM12 8.7l3 1.2.6 3.2L13 15h-2l-2.6-1.9.6-3.2L12 8.7zm-5.3 8.8L9 16.5l2.4 1h1.2l2.4-1 2.3 1A8 8 0 016.7 17.5z"/></svg>';
+const ICON_MODE_PRO =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M3 4h18v12H13v2h4v2H7v-2h4v-2H3V4zm2 2v8h14V6H5zm2 2h6v2H7V8zm0 3h10v2H7v-2z"/></svg>';
+const ICON_MODE_DOCS =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M6 3h9l4 4v14H6V3zm2 2v14h10V9h-4V5H8zm2 6h6v2h-6v-2zm0 3h6v2h-6v-2z"/></svg>';
+const ICON_MODE_USER =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 3a4 4 0 100 8 4 4 0 000-8zm0 2a2 2 0 110 4 2 2 0 010-4zm0 8c-3.3 0-7 1.5-7 4.5V20h14v-2.5c0-3-3.7-4.5-7-4.5z"/></svg>';
+const ICON_MODE_DEFAULT =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M3 5h18v12H3V5zm2 2v8h14V7H5zm-2 12h18v2H3v-2z"/></svg>';
+const ICON_MODE_MIXED =
+    '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M3 5h18v14H3V5zm2 2v10h7V7H5zm9 0v10h5V7h-5z"/></svg>';
+
+function inputSourceIcon(src) {
+    const s = String(src || '').toUpperCase();
+    if (s.startsWith('HDMI'))  return ICON_PORT_HDMI;
+    if (s.startsWith('DP'))    return ICON_PORT_DP;
+    if (s.startsWith('DVI'))   return ICON_PORT_DVI;
+    if (s.startsWith('VGA'))   return ICON_PORT_VGA;
+    if (s.startsWith('USB'))   return ICON_PORT_USBC;
+    return ICON_PORT_GENERIC;
+}
+
+function pictureModeIcon(label) {
+    const k = String(label || '').toLowerCase();
+    if (k.includes('movie'))         return ICON_MODE_MOVIE;
+    if (k.includes('game'))          return ICON_MODE_GAME;
+    if (k.includes('sport'))         return ICON_MODE_SPORT;
+    if (k.includes('professional'))  return ICON_MODE_PRO;
+    if (k.includes('productivity'))  return ICON_MODE_DOCS;
+    if (k.includes('user'))          return ICON_MODE_USER;
+    if (k.includes('mixed'))         return ICON_MODE_MIXED;
+    return ICON_MODE_DEFAULT;
+}
+
+// Humanise enum-style identifiers returned by monitorcontrol so users
+// don't see SHOUT_CASE strings in the UI.
+function humanizeInputSource(raw) {
+    if (!raw) return '';
+    // OFF / RESERVED → "Off" / "Reserved"
+    // VGA1 → "VGA 1", HDMI1 → "HDMI 1", DP1 → "DisplayPort 1"
+    const map = { DP: 'DisplayPort', DVI: 'DVI', HDMI: 'HDMI', VGA: 'VGA', USBC: 'USB-C' };
+    const m = String(raw).toUpperCase().match(/^(DP|DVI|HDMI|VGA|USBC|USB_C)(\d*)$/);
+    if (m) {
+        const key = m[1] === 'USB_C' ? 'USBC' : m[1];
+        return `${map[key]}${m[2] ? ' ' + m[2] : ''}`;
+    }
+    return String(raw)
+        .replace(/_/g, ' ')
+        .toLowerCase()
+        .replace(/\b\w/g, c => c.toUpperCase());
+}
+
+function humanizeColorPreset(raw) {
+    if (!raw) return '';
+    // COLOR_TEMP_6500K → "6500 K", COLOR_TEMP_NATIVE → "Native",
+    // COLOR_TEMP_USER1 → "User 1"
+    const s = String(raw).replace(/^COLOR_TEMP_?/i, '');
+    const kelvin = s.match(/^(\d{4,5})K?$/);
+    if (kelvin) return `${kelvin[1]} K`;
+    const user = s.match(/^USER\s*_?(\d+)$/i);
+    if (user) return `User ${user[1]}`;
+    return s
+        .replace(/_/g, ' ')
+        .toLowerCase()
+        .replace(/\b\w/g, c => c.toUpperCase());
+}
+
 export async function loadDisplayMonitors() {
     if (!hasCredentials()) return;
 
@@ -14,7 +109,7 @@ export async function loadDisplayMonitors() {
     if (!container) return;
 
     try {
-        const response = await fetch('/api/display/monitors?refresh=true', {
+        const response = await fetch('/api/display/monitors', {
             headers: getAuthHeaders()
         });
 
@@ -36,7 +131,13 @@ export async function loadDisplayMonitors() {
             return;
         }
 
+        // Destroy IconSelects from a previous render so listeners + popups
+        // don't pile up.
+        _displayIconSelects.forEach(inst => { try { inst.destroy(); } catch (_) {} });
+        _displayIconSelects = [];
+
         container.innerHTML = '';
+        const pendingIconSelects = [];
         monitors.forEach(monitor => {
             const card = document.createElement('div');
             card.className = 'display-monitor-card';
@@ -57,7 +158,123 @@ export async function loadDisplayMonitors() {
 
             const details = [monitor.resolution, monitor.manufacturer].filter(Boolean).join(' \u00B7 ');
             const detailsHtml = details ? `<span class="display-monitor-details">${details}</span>` : '';
-            const primaryBadge = monitor.is_primary ? `<span class="display-primary-badge">${t('display.primary')}</span>` : '';
+            const primaryBadge = monitor.is_primary
+                ? `<span class="display-primary-badge" title="${t('display.primary')}" aria-label="${t('display.primary')}">
+                       <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
+                           <path fill="currentColor" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                       </svg>
+                   </span>`
+                : '';
+
+            // Contrast (DDC/CI) — render only if the monitor reports it.
+            let contrastRow = '';
+            if (monitor.contrast_supported) {
+                const contrastValue = monitor.contrast !== null && monitor.contrast !== undefined
+                    ? monitor.contrast : 50;
+                contrastRow = `
+                <div class="display-slider-row">
+                    <svg class="display-slider-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18V4c4.41 0 8 3.59 8 8s-3.59 8-8 8z"/>
+                    </svg>
+                    <span class="display-slider-label" data-i18n="display.contrast">${t('display.contrast')}</span>
+                    <input type="range" class="display-slider display-contrast-slider"
+                           min="0" max="100" value="${contrastValue}"
+                           oninput="onDisplayContrastInput(${monitor.id}, this.value)"
+                           onchange="onDisplayContrastChange(${monitor.id}, this.value)">
+                    <span class="display-slider-value" id="contrast-val-${monitor.id}">${contrastValue}%</span>
+                </div>`;
+            }
+
+            // Build the picture-tuning selects (input source / color preset / picture mode).
+            const tuningRows = [];
+
+            // Each tuning field renders a hidden <select> (state holder)
+            // which IconSelect then enhances after the card lands in the DOM.
+            const tuningTargets = [];
+
+            if (monitor.input_source_supported && monitor.available_input_sources.length > 0) {
+                const current = monitor.input_source;
+                const options = monitor.available_input_sources.map(src => {
+                    const selected = src === current ? 'selected' : '';
+                    return `<option value="${escapeHtml(src)}" ${selected}>${escapeHtml(humanizeInputSource(src))}</option>`;
+                }).join('');
+                tuningRows.push(`
+                <div class="display-tuning-field">
+                    <span class="display-tuning-label" data-i18n="display.input_source">${t('display.input_source')}</span>
+                    <select data-display-select="input" data-monitor-id="${monitor.id}"
+                            aria-label="${t('display.input_source')}">
+                        ${options}
+                    </select>
+                </div>`);
+                tuningTargets.push({
+                    kind: 'input',
+                    monitorId: monitor.id,
+                    items: monitor.available_input_sources.map(src => ({
+                        value: src,
+                        icon: inputSourceIcon(src),
+                        label: humanizeInputSource(src),
+                    })),
+                });
+            }
+
+            if (monitor.color_preset_supported && monitor.available_color_presets.length > 0) {
+                const current = monitor.color_preset;
+                const options = monitor.available_color_presets.map(p => {
+                    const selected = p === current ? 'selected' : '';
+                    return `<option value="${escapeHtml(p)}" ${selected}>${escapeHtml(humanizeColorPreset(p))}</option>`;
+                }).join('');
+                tuningRows.push(`
+                <div class="display-tuning-field">
+                    <span class="display-tuning-label" data-i18n="display.color_preset">${t('display.color_preset')}</span>
+                    <select data-display-select="color" data-monitor-id="${monitor.id}"
+                            aria-label="${t('display.color_preset')}">
+                        ${options}
+                    </select>
+                </div>`);
+                tuningTargets.push({
+                    kind: 'color',
+                    monitorId: monitor.id,
+                    items: monitor.available_color_presets.map(p => ({
+                        value: p,
+                        icon: ICON_THERMOMETER,
+                        label: humanizeColorPreset(p),
+                    })),
+                });
+            }
+
+            if (monitor.picture_mode_supported && monitor.available_picture_modes.length > 0) {
+                const current = monitor.picture_mode_code;
+                const options = monitor.available_picture_modes.map(m => {
+                    const selected = m.code === current ? 'selected' : '';
+                    return `<option value="${m.code}" ${selected}>${escapeHtml(m.label)}</option>`;
+                }).join('');
+                tuningRows.push(`
+                <div class="display-tuning-field">
+                    <span class="display-tuning-label" data-i18n="display.picture_mode">${t('display.picture_mode')}</span>
+                    <select data-display-select="mode" data-monitor-id="${monitor.id}"
+                            aria-label="${t('display.picture_mode')}">
+                        ${options}
+                    </select>
+                </div>`);
+                tuningTargets.push({
+                    kind: 'mode',
+                    monitorId: monitor.id,
+                    items: monitor.available_picture_modes.map(m => ({
+                        value: String(m.code),
+                        icon: pictureModeIcon(m.label),
+                        label: m.label,
+                    })),
+                });
+            }
+
+            pendingIconSelects.push(...tuningTargets);
+
+            const tuningBlock = tuningRows.length > 0
+                ? `<div class="display-tuning">
+                       <div class="display-tuning-title" data-i18n="display.tuning">${t('display.tuning')}</div>
+                       <div class="display-tuning-grid">${tuningRows.join('')}</div>
+                   </div>`
+                : '';
 
             card.innerHTML = `
                 <div class="display-monitor-header">
@@ -65,23 +282,45 @@ export async function loadDisplayMonitors() {
                         <path fill="currentColor" d="M20 3H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h6v2H8v2h8v-2h-2v-2h6c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H4V5h16v10z"/>
                     </svg>
                     <div class="display-monitor-info">
-                        <span class="display-monitor-name">${monitor.name}${primaryBadge}</span>
+                        <span class="display-monitor-name"><span class="display-monitor-name-text">${monitor.name}</span>${primaryBadge}</span>
                         ${detailsHtml}
                     </div>
                     ${powerBtn}
                 </div>
-                <div class="display-brightness-control">
-                    <svg class="display-brightness-icon" viewBox="0 0 24 24" width="16" height="16">
+                <div class="display-slider-row display-brightness-control">
+                    <svg class="display-slider-icon display-brightness-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
                         <path fill="currentColor" d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/>
                     </svg>
-                    <input type="range" class="display-brightness-slider" min="0" max="100" value="${brightnessValue}" ${brightnessDisabled}
+                    <span class="display-slider-label" data-i18n="display.brightness">${t('display.brightness')}</span>
+                    <input type="range" class="display-slider display-brightness-slider" min="0" max="100" value="${brightnessValue}" ${brightnessDisabled}
                            oninput="onDisplayBrightnessInput(${monitor.id}, this.value)"
                            onchange="onDisplayBrightnessChange(${monitor.id}, this.value)">
-                    <span class="display-brightness-value" id="brightness-val-${monitor.id}">${brightnessValue}%</span>
-                </div>`;
+                    <span class="display-slider-value display-brightness-value" id="brightness-val-${monitor.id}">${brightnessValue}%</span>
+                </div>
+                ${contrastRow}
+                ${tuningBlock}`;
 
             container.appendChild(card);
         });
+
+        // Enhance every tuning <select> with an IconSelect now that the
+        // cards are in the DOM (IconSelect needs offsetParent + sibling).
+        pendingIconSelects.forEach(({ kind, monitorId, items }) => {
+            const sel = container.querySelector(
+                `select[data-display-select="${kind}"][data-monitor-id="${monitorId}"]`
+            );
+            if (!sel) return;
+            const handler = kind === 'input' ? onDisplayInputSourceChange
+                : kind === 'color' ? onDisplayColorPresetChange
+                : onDisplayPictureModeChange;
+            _displayIconSelects.push(new IconSelect({
+                target: sel,
+                items,
+                columns: 1,
+                horizontal: true,
+                onChange: (value) => handler(monitorId, value),
+            }));
+        });
     } catch (e) {
         console.error('Failed to load display monitors:', e);
     }
@@ -118,6 +357,90 @@ async function sendDisplayBrightness(monitorId, brightness) {
     }
 }
 
+export function onDisplayContrastInput(monitorId, value) {
+    const label = document.getElementById(`contrast-val-${monitorId}`);
+    if (label) label.textContent = `${value}%`;
+
+    if (displayContrastTimers[monitorId]) clearTimeout(displayContrastTimers[monitorId]);
+    displayContrastTimers[monitorId] = setTimeout(() => {
+        sendDisplayContrast(monitorId, parseInt(value));
+        displayContrastTimers[monitorId] = null;
+    }, DISPLAY_THROTTLE_MS);
+}
+
+export function onDisplayContrastChange(monitorId, value) {
+    if (displayContrastTimers[monitorId]) {
+        clearTimeout(displayContrastTimers[monitorId]);
+        displayContrastTimers[monitorId] = null;
+    }
+    sendDisplayContrast(monitorId, parseInt(value));
+}
+
+async function sendDisplayContrast(monitorId, contrast) {
+    try {
+        const r = await fetch(`/api/display/contrast/${monitorId}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+            body: JSON.stringify({ contrast })
+        });
+        const data = await r.json().catch(() => ({}));
+        if (!data.success) showToast(t('display.msg.contrast_failed'), 'error');
+    } catch (e) {
+        console.error('Failed to set contrast:', e);
+        showToast(t('display.msg.contrast_failed'), 'error');
+    }
+}
+
+export async function onDisplayInputSourceChange(monitorId, source) {
+    try {
+        const r = await fetch(`/api/display/input_source/${monitorId}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+            body: JSON.stringify({ source })
+        });
+        const data = await r.json().catch(() => ({}));
+        if (data.success) showToast(t('display.msg.input_changed'), 'success');
+        else showToast(t('display.msg.input_failed'), 'error');
+    } catch (e) {
+        console.error('Failed to set input source:', e);
+        showToast(t('display.msg.input_failed'), 'error');
+    }
+}
+
+export async function onDisplayColorPresetChange(monitorId, preset) {
+    try {
+        const r = await fetch(`/api/display/color_preset/${monitorId}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+            body: JSON.stringify({ preset })
+        });
+        const data = await r.json().catch(() => ({}));
+        if (data.success) showToast(t('display.msg.color_changed'), 'success');
+        else showToast(t('display.msg.color_failed'), 'error');
+    } catch (e) {
+        console.error('Failed to set color preset:', e);
+        showToast(t('display.msg.color_failed'), 'error');
+    }
+}
+
+export async function onDisplayPictureModeChange(monitorId, codeRaw) {
+    const code = parseInt(codeRaw, 10);
+    if (Number.isNaN(code)) return;
+    try {
+        const r = await fetch(`/api/display/picture_mode/${monitorId}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+            body: JSON.stringify({ code })
+        });
+        const data = await r.json().catch(() => ({}));
+        if (data.success) showToast(t('display.msg.mode_changed'), 'success');
+        else showToast(t('display.msg.mode_failed'), 'error');
+    } catch (e) {
+        console.error('Failed to set picture mode:', e);
+        showToast(t('display.msg.mode_failed'), 'error');
+    }
+}
+
 export async function toggleDisplayPower(monitorId, monitorName) {
     const btn = document.getElementById(`power-btn-${monitorId}`);
     const isOn = btn && btn.classList.contains('on');

media_server/static/js/player.js

@@ -19,6 +19,8 @@ import { IconSelect } from './icon-select.js';
 export let activeTab = 'player';
 
 export function setMiniPlayerVisible(visible) {
+    // On any non-player tab the mini player must stay visible regardless of scroll.
+    if (activeTab !== 'player') visible = true;
     const miniPlayer = document.getElementById('mini-player');
     if (visible) {
         miniPlayer.classList.remove('hidden');
@@ -143,6 +145,22 @@ export function lightenColor(hex, percent) {
     return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
 }
 
+function darkenColor(hex, percent) {
+    const num = parseInt(hex.replace('#', ''), 16);
+    const r = Math.max(0, (num >> 16) - Math.round(255 * percent / 100));
+    const g = Math.max(0, ((num >> 8) & 0xff) - Math.round(255 * percent / 100));
+    const b = Math.max(0, (num & 0xff) - Math.round(255 * percent / 100));
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+}
+
+function hexToRgbTriple(hex) {
+    const num = parseInt(hex.replace('#', ''), 16);
+    const r = (num >> 16) & 0xff;
+    const g = (num >> 8) & 0xff;
+    const b = num & 0xff;
+    return `${r}, ${g}, ${b}`;
+}
+
 export function initAccentColor() {
     const saved = localStorage.getItem('accentColor');
     if (saved) {
@@ -157,12 +175,25 @@ export function initAccentColor() {
 }
 
 export function applyAccentColor(color, hover) {
-    document.documentElement.style.setProperty('--accent', color);
-    document.documentElement.style.setProperty('--accent-hover', hover);
+    const root = document.documentElement.style;
+    root.setProperty('--accent', color);
+    root.setProperty('--accent-hover', hover);
+    // Editorial palette tokens — the redesign reads these directly,
+    // so the picker must drive them too (the --accent alias alone has
+    // no effect once components moved off it).
+    root.setProperty('--copper', color);
+    root.setProperty('--copper-hi', hover);
+    root.setProperty('--copper-lo', darkenColor(color, 12));
+    root.setProperty('--copper-rgb', hexToRgbTriple(color));
+    // --copper-glow inherits the rgba(var(--copper-rgb), 0.35) formula
+    // declared in styles.css, so it picks up the new RGB automatically.
     localStorage.setItem('accentColor', color);
     const dot = document.getElementById('accentDot');
     if (dot) dot.style.background = color;
     updateBackgroundColors();
+    // Refresh the cached accent in the visualizer so the gradient
+    // rebuilds on its next frame instead of querying CSS every frame.
+    refreshVisualizerAccent();
 }
 
 export function renderAccentSwatches() {
@@ -206,81 +237,56 @@ document.addEventListener('click', (e) => {
     }
 });
 
-// Vinyl mode
-let vinylMode = localStorage.getItem('vinylMode') === 'true';
-
-function getVinylAngle() {
-    const art = document.getElementById('album-art');
-    if (!art) return 0;
-    const st = getComputedStyle(art);
-    const tr = st.transform;
-    if (!tr || tr === 'none') return 0;
-    const m = tr.match(/matrix\((.+)\)/);
-    if (!m) return 0;
-    const vals = m[1].split(',').map(Number);
-    const angle = Math.round(Math.atan2(vals[1], vals[0]) * (180 / Math.PI));
-    return ((angle % 360) + 360) % 360;
-}
-
-function saveVinylAngle() {
-    if (!vinylMode) return;
-    localStorage.setItem('vinylAngle', getVinylAngle());
-}
-
-function restoreVinylAngle() {
-    const saved = localStorage.getItem('vinylAngle');
-    if (saved) {
-        const art = document.getElementById('album-art');
-        if (art) art.style.setProperty('--vinyl-offset', `${saved}deg`);
-    }
-}
-
-setInterval(saveVinylAngle, 2000);
-window.addEventListener('beforeunload', saveVinylAngle);
-
-export function toggleVinylMode() {
-    if (vinylMode) saveVinylAngle();
-    vinylMode = !vinylMode;
-    localStorage.setItem('vinylMode', vinylMode);
-    applyVinylMode();
-}
-
-export function applyVinylMode() {
-    const container = document.querySelector('.album-art-container');
-    const btn = document.getElementById('vinylToggle');
-    if (!container) return;
-    if (vinylMode) {
-        container.classList.add('vinyl');
-        if (btn) btn.classList.add('active');
-        restoreVinylAngle();
-        updateVinylSpin();
-    } else {
-        saveVinylAngle();
-        container.classList.remove('vinyl', 'spinning', 'paused');
-        if (btn) btn.classList.remove('active');
-    }
-}
-
-function updateVinylSpin() {
-    const container = document.querySelector('.album-art-container');
-    if (!container || !vinylMode) return;
-    container.classList.remove('spinning', 'paused');
-    if (currentPlayState === 'playing') {
-        container.classList.add('spinning');
-    } else if (currentPlayState === 'paused') {
-        container.classList.add('paused');
-    }
-}
-
 // Audio Visualizer
 export let visualizerEnabled = localStorage.getItem('visualizerEnabled') === 'true';
 export let visualizerAvailable = false;
+export function setVisualizerEnabled(value) {
+    visualizerEnabled = !!value;
+    localStorage.setItem('visualizerEnabled', visualizerEnabled);
+}
+let visualizerCanvas = null;       // Cached canvas DOM ref
 let visualizerCtx = null;
+let visualizerGradient = null;     // Pre-built gradient (rebuilt on accent change / resize)
 let visualizerAnimFrame = null;
-export let frequencyData = null;
-export function setFrequencyData(value) { frequencyData = value; }
+export let frequencyData = null;   // Latest payload from backend (int-scaled or float-scaled)
+let frequencyDataVersion = 0;       // Bumped on every setFrequencyData
+let lastRenderedVersion = -1;       // Last version rendered in renderVisualizerFrame
+let frequenciesScale = 1.0;         // Backend scale factor (1000 → ints, 1 → floats)
+export function setFrequencyData(value) {
+    frequencyData = value;
+    frequencyDataVersion++;
+    // Backend may send integer-quantized bins (scale=1000) or legacy floats (no scale).
+    if (value && typeof value.scale === 'number' && value.scale > 0) {
+        frequenciesScale = 1.0 / value.scale;
+    } else {
+        frequenciesScale = 1.0;
+    }
+}
 let smoothedFrequencies = null;
 const VISUALIZER_SMOOTHING = 0.15;
+// Cached accent — refreshed by applyAccentColor() rather than on every frame.
+let cachedAccentHex = '#1db954';
+let cachedAccentRGB = '29,185,84';
+function parseAccentHex(hex) {
+    const h = (hex || '').trim().replace('#', '');
+    if (h.length < 6) return null;
+    const r = parseInt(h.slice(0, 2), 16);
+    const g = parseInt(h.slice(2, 4), 16);
+    const b = parseInt(h.slice(4, 6), 16);
+    if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return null;
+    return `${r},${g},${b}`;
+}
+export function refreshVisualizerAccent() {
+    const accentHex = getComputedStyle(document.documentElement)
+        .getPropertyValue('--accent').trim();
+    if (accentHex) {
+        cachedAccentHex = accentHex;
+        const rgb = parseAccentHex(accentHex);
+        if (rgb) cachedAccentRGB = rgb;
+    }
+    // Force gradient rebuild on next frame.
+    visualizerGradient = null;
+}
 
 export async function checkVisualizerAvailability() {
     try {
@@ -334,15 +340,28 @@ export function applyVisualizerMode() {
 }
 
 function initVisualizerCanvas() {
-    const canvas = document.getElementById('spectrogram-canvas');
-    if (!canvas) return;
-    visualizerCtx = canvas.getContext('2d');
-    canvas.width = 300;
-    canvas.height = 64;
+    visualizerCanvas = document.getElementById('spectrogram-canvas');
+    if (!visualizerCanvas) return;
+    visualizerCtx = visualizerCanvas.getContext('2d');
+    visualizerCanvas.width = 300;
+    visualizerCanvas.height = 64;
+    visualizerGradient = null;  // Force rebuild
+    refreshVisualizerAccent();
+}
+
+function buildVisualizerGradient() {
+    if (!visualizerCtx || !visualizerCanvas) return null;
+    const h = visualizerCanvas.height;
+    const grad = visualizerCtx.createLinearGradient(0, 0, 0, h);
+    grad.addColorStop(0, `rgba(${cachedAccentRGB},1)`);
+    grad.addColorStop(1, `rgba(${cachedAccentRGB},0.19)`);
+    return grad;
 }
 
 function startVisualizerRender() {
     if (visualizerAnimFrame) return;
+    // Cache editorial spectrum bar refs once per start.
+    cacheEditorialSpectrumBars();
     renderVisualizerFrame();
 }
 
@@ -351,74 +370,153 @@ export function stopVisualizerRender() {
         cancelAnimationFrame(visualizerAnimFrame);
         visualizerAnimFrame = null;
     }
-    const canvas = document.getElementById('spectrogram-canvas');
-    if (visualizerCtx && canvas) {
-        visualizerCtx.clearRect(0, 0, canvas.width, canvas.height);
+    if (visualizerCtx && visualizerCanvas) {
+        visualizerCtx.clearRect(0, 0, visualizerCanvas.width, visualizerCanvas.height);
     }
-    const art = document.getElementById('album-art');
-    if (art) {
-        art.style.transform = '';
-        art.style.removeProperty('--vinyl-scale');
-    }
-    const glow = document.getElementById('album-art-glow');
-    if (glow) glow.style.opacity = '';
     frequencyData = null;
+    frequencyDataVersion++;     // Force next render to redraw cleared state
+    lastRenderedVersion = -1;
     smoothedFrequencies = null;
+    document.body.classList.remove('audio-spectrum-live');
+    // Reset spectrum bar transforms so the synthetic CSS animation takes back over.
+    if (editorialSpectrumBars) {
+        for (let i = 0; i < editorialSpectrumBars.length; i++) {
+            editorialSpectrumBars[i].style.transform = '';
+        }
+    }
+    // Drop cached bars so next start re-queries.
+    editorialSpectrumBars = null;
+    editorialSpectrumLastScale = null;
 }
 
 function renderVisualizerFrame() {
     visualizerAnimFrame = requestAnimationFrame(renderVisualizerFrame);
 
-    const canvas = document.getElementById('spectrogram-canvas');
-    if (!frequencyData || !visualizerCtx || !canvas) return;
+    // VU needle + position progress always tick — they read live state
+    // not bound to spectrum payloads. Keeping them in this single rAF
+    // is cheaper than running a second rAF loop just for the needle.
+    tickVuNeedle();
+
+    if (!frequencyData || !visualizerCtx || !visualizerCanvas) return;
+
+    // FPS gate: backend pushes ~visualizer_fps Hz; the monitor refreshes
+    // at 60-144 Hz. Re-rendering an unchanged frame is wasted work, so
+    // bail when no new payload has arrived since the last draw.
+    if (frequencyDataVersion === lastRenderedVersion) return;
+    lastRenderedVersion = frequencyDataVersion;
 
     const bins = frequencyData.frequencies;
     const numBins = bins.length;
-    const w = canvas.width;
-    const h = canvas.height;
+    const w = visualizerCanvas.width;
+    const h = visualizerCanvas.height;
     const gap = 2;
     const barWidth = (w / numBins) - gap;
-    const accent = getComputedStyle(document.documentElement)
-        .getPropertyValue('--accent').trim();
+    const scale = frequenciesScale;
 
     if (!smoothedFrequencies || smoothedFrequencies.length !== numBins) {
-        smoothedFrequencies = new Array(numBins).fill(0);
+        smoothedFrequencies = new Float32Array(numBins);
     }
     for (let i = 0; i < numBins; i++) {
+        const v = bins[i] * scale;
         smoothedFrequencies[i] = smoothedFrequencies[i] * VISUALIZER_SMOOTHING
-            + bins[i] * (1 - VISUALIZER_SMOOTHING);
+            + v * (1 - VISUALIZER_SMOOTHING);
     }
 
-    visualizerCtx.clearRect(0, 0, w, h);
+    if (!visualizerGradient) visualizerGradient = buildVisualizerGradient();
 
+    visualizerCtx.clearRect(0, 0, w, h);
+    visualizerCtx.fillStyle = visualizerGradient;
+    visualizerCtx.beginPath();
     for (let i = 0; i < numBins; i++) {
         const barHeight = Math.max(1, smoothedFrequencies[i] * h);
         const x = i * (barWidth + gap) + gap / 2;
         const y = h - barHeight;
-
-        const grad = visualizerCtx.createLinearGradient(x, y, x, h);
-        grad.addColorStop(0, accent);
-        grad.addColorStop(1, accent + '30');
-
-        visualizerCtx.fillStyle = grad;
-        visualizerCtx.beginPath();
         visualizerCtx.roundRect(x, y, barWidth, barHeight, 1.5);
-        visualizerCtx.fill();
     }
+    visualizerCtx.fill();
 
-    const bass = frequencyData.bass || 0;
-    const scale = 1 + bass * 0.04;
-    const art = document.getElementById('album-art');
-    if (art) {
-        if (vinylMode) {
-            art.style.setProperty('--vinyl-scale', scale);
-        } else {
-            art.style.transform = `scale(${scale})`;
-        }
+    // Drive the editorial .spectrum bars from the same frequency data.
+    updateEditorialSpectrum(smoothedFrequencies, numBins);
+}
+
+// ─── Editorial spectrum (.spectrum bars) driven by audio ──────
+// The bin distribution from the FFT is heavy on lows (the bass + mids
+// dominate); a linear mapping leaves the right half of the spectrum
+// looking dead. Use a logarithmic frequency-to-bar mapping plus a
+// per-bar high-end gain so all bars carry visible motion.
+let editorialSpectrumBars = null;            // Live HTMLCollection cached at start
+let editorialSpectrumBarCount = 0;
+let editorialSpectrumLastScale = null;        // Float32Array of last applied scaleY × 1000 (int rounded)
+let editorialBarRanges = null;                // Pre-computed [startIdx,endIdx] pairs per bar
+let editorialBarGains = null;                  // Pre-computed per-bar gain
+let editorialBarRangesForBins = -1;           // numBins last used to compute ranges
+
+function cacheEditorialSpectrumBars() {
+    const root = document.querySelector('.now-playing .spectrum');
+    if (!root) {
+        editorialSpectrumBars = null;
+        editorialSpectrumBarCount = 0;
+        return;
     }
-    const glow = document.getElementById('album-art-glow');
-    if (glow) {
-        glow.style.opacity = (0.4 + bass * 0.4).toFixed(2);
+    editorialSpectrumBars = root.children;
+    editorialSpectrumBarCount = editorialSpectrumBars.length;
+    editorialSpectrumLastScale = new Int16Array(editorialSpectrumBarCount);
+    editorialSpectrumLastScale.fill(-1);
+    // Pre-compute per-bar gain (constant for the lifetime of the bar list).
+    editorialBarGains = new Float32Array(editorialSpectrumBarCount);
+    for (let i = 0; i < editorialSpectrumBarCount; i++) {
+        editorialBarGains[i] = 1 + (i / editorialSpectrumBarCount) * 0.8;
+    }
+    editorialBarRangesForBins = -1; // Force range recompute on next call
+}
+
+function recomputeEditorialBarRanges(numBins) {
+    const barCount = editorialSpectrumBarCount;
+    editorialBarRanges = new Int16Array(barCount * 2);
+    const lowBin = 1;
+    const highBin = numBins - 1;
+    const span = highBin - lowBin;
+    for (let i = 0; i < barCount; i++) {
+        const t0 = i / barCount;
+        const t1 = (i + 1) / barCount;
+        const startIdx = Math.max(lowBin, Math.floor(lowBin + t0 * t0 * span));
+        const endIdx = Math.max(startIdx + 1, Math.floor(lowBin + t1 * t1 * span));
+        editorialBarRanges[i * 2] = startIdx;
+        editorialBarRanges[i * 2 + 1] = Math.min(endIdx, numBins);
+    }
+    editorialBarRangesForBins = numBins;
+}
+
+function updateEditorialSpectrum(bins, numBins) {
+    if (!editorialSpectrumBars) cacheEditorialSpectrumBars();
+    const barCount = editorialSpectrumBarCount;
+    if (!barCount) return;
+    if (editorialBarRangesForBins !== numBins) recomputeEditorialBarRanges(numBins);
+    document.body.classList.add('audio-spectrum-live');
+
+    const ranges = editorialBarRanges;
+    const gains = editorialBarGains;
+    const lastScale = editorialSpectrumLastScale;
+    const bars = editorialSpectrumBars;
+    for (let i = 0; i < barCount; i++) {
+        const startIdx = ranges[i * 2];
+        const endIdx = ranges[i * 2 + 1];
+        let peak = 0;
+        for (let j = startIdx; j < endIdx; j++) {
+            const v = bins[j];
+            if (v > peak) peak = v;
+        }
+        // Backend ships AGC-normalized bins (peak ~1, transients up to ~1.5).
+        // Map to a 0.12..1.0 scaleY, with 0.12 floor so silent bars stay visible.
+        const raw = peak * 0.65 * gains[i];
+        const scaleY = raw < 0.12 ? 0.12 : (raw > 1 ? 1 : raw);
+        // Quantize to 1/1000 — anything finer is invisible. Skip the DOM
+        // write when the bar hasn't moved.
+        const q = (scaleY * 1000) | 0;
+        if (q === lastScale[i]) continue;
+        lastScale[i] = q;
+        // transform: scaleY runs on the compositor — no layout/paint.
+        bars[i].style.transform = `scaleY(${scaleY.toFixed(3)})`;
     }
 }
 
@@ -460,13 +558,24 @@ export async function loadAudioDevices() {
             select.appendChild(opt);
         }
 
-        if (status.current_device) {
+        // Prefer server-reported device; fall back to the last user choice
+        // saved in localStorage (so reloads persist even if the server
+        // forgets between restarts).
+        const savedDevice = localStorage.getItem('audioDevice') || '';
+        const targetDevice = status.current_device || savedDevice;
+        let pendingPushToServer = false;
+        if (targetDevice) {
             for (let i = 0; i < select.options.length; i++) {
-                if (select.options[i].value === status.current_device) {
+                if (select.options[i].value === targetDevice) {
                     select.selectedIndex = i;
                     break;
                 }
             }
+            // If the saved device wasn't on the server, push it back so
+            // capture starts on the right one.
+            if (!status.current_device && savedDevice) {
+                pendingPushToServer = true;
+            }
         }
 
         // Enhance with icon grid
@@ -485,7 +594,33 @@ export async function loadAudioDevices() {
         });
         _audioDeviceIconSelect.setValue(select.value, false);
 
+        // Sync visualizerAvailable from the fetched status so that
+        // applyVisualizerMode() and the toggle button are consistent.
+        visualizerAvailable = status.available;
+        const btn = document.getElementById('visualizerToggle');
+        if (btn) btn.style.display = visualizerAvailable ? '' : 'none';
+
         updateAudioDeviceStatus(status);
+
+        // Re-subscribe the WebSocket if the user had the visualizer enabled.
+        if (visualizerEnabled && visualizerAvailable) {
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({ type: 'enable_visualizer' }));
+            }
+        }
+
+        // If the user's previously-chosen device wasn't recognized by
+        // the server (e.g. server restart cleared in-memory state),
+        // push it back so capture lands on the right one.
+        if (pendingPushToServer && savedDevice) {
+            try {
+                await fetch('/api/media/visualizer/device', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+                    body: JSON.stringify({ device_name: savedDevice })
+                });
+            } catch (_) { /* best-effort */ }
+        }
     } catch (e) {
         section.style.display = 'none';
     }
@@ -513,6 +648,13 @@ export async function onAudioDeviceChanged() {
 
     const deviceName = select.value || null;
 
+    // Persist locally so reloads survive even if the server doesn't.
+    if (deviceName) {
+        localStorage.setItem('audioDevice', deviceName);
+    } else {
+        localStorage.removeItem('audioDevice');
+    }
+
     try {
         const resp = await fetch('/api/media/visualizer/device', {
             method: 'POST',
@@ -524,7 +666,12 @@ export async function onAudioDeviceChanged() {
             const result = await resp.json();
             updateAudioDeviceStatus({ available: result.success, ...result });
             await checkVisualizerAvailability();
-            if (visualizerEnabled) applyVisualizerMode();
+            // Picking a device is an explicit signal the user wants
+            // capture: auto-enable the visualizer if it isn't already on.
+            if (!visualizerEnabled && visualizerAvailable) {
+                setVisualizerEnabled(true);
+            }
+            applyVisualizerMode();
             showToast(t('settings.audio.device_changed'), 'success');
         } else {
             showToast(t('settings.audio.device_change_failed'), 'error');
@@ -596,9 +743,49 @@ export function setupProgressDrag(bar, fill) {
     });
 }
 
+// Replace the album-art src and replay the .is-swapping CSS animation
+// so the new artwork crossfades in instead of popping. Re-toggling the
+// class across rAF restarts the keyframes even if it was already on.
+//
+// `forceAnim=false` skips the keyframe-restart reflow when the element
+// has never run the swap animation before — saves a synchronous layout
+// flush on first paint. The reflow IS still required when the class
+// is currently applied; otherwise the browser coalesces add+remove and
+// the keyframes don't replay.
+function swapArtworkSrc(imgEl, newSrc) {
+    if (!imgEl) return;
+    if (imgEl.src === newSrc) return;
+    const wasSwapping = imgEl.classList.contains('is-swapping');
+    if (wasSwapping) {
+        imgEl.classList.remove('is-swapping');
+        // Forced reflow restarts the keyframes — only needed when we have
+        // to interrupt an in-flight animation.
+        void imgEl.offsetWidth;
+    }
+    imgEl.src = newSrc;
+    imgEl.classList.add('is-swapping');
+}
+
+// Hash of the last fully-rendered status payload — lets us skip
+// updateUI altogether when the backend re-broadcasts the same state.
+let lastStatusFingerprint = null;
+function statusFingerprint(s) {
+    return [
+        s.state, s.title, s.artist, s.album, s.volume, s.muted,
+        s.duration, s.source, s.album_art_url, s.position
+    ].join('|');
+}
+
 export function updateUI(status) {
     setLastStatus(status);
 
+    // Idempotence: if nothing meaningful changed, skip the entire DOM
+    // pass. Track switches arrive as 1-3 status_update broadcasts in
+    // quick succession; this gates the redundant ones.
+    const fingerprint = statusFingerprint(status);
+    if (fingerprint === lastStatusFingerprint) return;
+    lastStatusFingerprint = fingerprint;
+
     const fallbackTitle = status.state === 'idle' ? t('player.no_media') : t('player.title_unavailable');
     dom.trackTitle.textContent = status.title || fallbackTitle;
     dom.artist.textContent = status.artist || '';
@@ -622,10 +809,13 @@ export function updateUI(status) {
 
     if (artworkKey !== lastArtworkKey) {
         lastArtworkKey = artworkKey;
-        const placeholderArt = "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%3Cpath fill='%236a6a6a' 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 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";
         if (artworkSource) {
-            fetch(`/api/media/artwork?_=${Date.now()}`, {
+            // 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()
             })
             .then(r => r.ok ? r.blob() : null)
@@ -634,9 +824,12 @@ export function updateUI(status) {
                 const oldBlobUrl = currentArtworkBlobUrl;
                 const url = URL.createObjectURL(blob);
                 currentArtworkBlobUrl = url;
-                dom.albumArt.src = url;
-                dom.miniAlbumArt.src = url;
-                if (dom.albumArtGlow) dom.albumArtGlow.src = 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));
@@ -645,18 +838,23 @@ export function updateUI(status) {
                 URL.revokeObjectURL(currentArtworkBlobUrl);
                 currentArtworkBlobUrl = null;
             }
-            dom.albumArt.src = placeholderArt;
-            dom.miniAlbumArt.src = placeholderArt;
-            if (dom.albumArtGlow) dom.albumArtGlow.src = placeholderGlow;
+            swapArtworkSrc(dom.albumArt, placeholderArt);
+            if (dom.miniAlbumArt.src !== placeholderArt) dom.miniAlbumArt.src = placeholderArt;
+            if (dom.albumArtGlow && dom.albumArtGlow.src !== placeholderGlow) dom.albumArtGlow.src = placeholderGlow;
+            syncFullscreenBloomArt(placeholderGlow);
         }
     }
 
     if (status.duration && status.position !== null) {
+        // Only redo the progress DOM when position actually changed.
+        const positionChanged =
+            status.duration !== currentDuration ||
+            Math.abs((status.position || 0) - (lastPositionValue || 0)) > 0.05;
         setCurrentDuration(status.duration);
         setCurrentPosition(status.position);
         lastPositionUpdate = Date.now();
         lastPositionValue = status.position;
-        updateProgress(status.position, status.duration);
+        if (positionChanged) updateProgress(status.position, status.duration);
     }
 
     if (!isUserAdjustingVolume) {
@@ -664,6 +862,17 @@ export function updateUI(status) {
         dom.volumeDisplay.textContent = `${status.volume}%`;
         dom.miniVolumeSlider.value = status.volume;
         dom.miniVolumeDisplay.textContent = `${status.volume}%`;
+        // VU needle: map 0-100 volume to -22deg..+22deg rotation.
+        const needle = document.getElementById('vuNeedle');
+        if (needle) {
+            const deg = -22 + (status.volume / 100) * 44;
+            needle.style.transform = `rotate(${deg}deg)`;
+        }
+        // Editorial VU readout: VOL XX% / OUT (SYS or MUTED)
+        const vuVol = document.getElementById('vu-vol');
+        if (vuVol) vuVol.textContent = `${status.volume}%`;
+        const vuOut = document.getElementById('vu-out');
+        if (vuOut) vuOut.textContent = status.muted ? 'MUTE' : 'SYS';
     }
 
     updateMuteIcon(status.muted);
@@ -685,8 +894,101 @@ export function updateUI(status) {
     }
 }
 
+// ─── VU needle ───────────────────────────────────────────────
+// The needle reflects ACTUAL audio output level (computed from the
+// FFT data the visualizer feeds in). When audio capture isn't
+// running, fall back to a synthetic wobble bounded by the volume
+// slider position so the needle still looks alive.
+//
+// One unified rAF drives both the spectrum and the VU needle (see
+// renderVisualizerFrame → tickVuNeedle). If the visualizer isn't
+// rendering, a separate rAF takes over solely for the needle.
+let vuStandaloneHandle = null;
+let vuWobbleStart = 0;
+let vuLevelSmoothed = 0;
+let vuNeedleEl = null;          // Cached needle element
+let vuVolumeSliderEl = null;     // Cached slider element
+let vuLastAppliedDeg = -999;     // Skip DOM writes when angle unchanged
+const VU_LEVEL_ATTACK = 0.7;   // Fast climb so the needle catches musical hits
+const VU_LEVEL_RELEASE = 0.25; // Faster fall so it swings between hits, not pins
+
+function readAudioLevel() {
+    if (!frequencyData) return null;
+    // Backend sends a true loudness signal (RMS-derived dB, 0..1) —
+    // either as float (legacy) or scaled int (new format).
+    if (typeof frequencyData.level === 'number') return frequencyData.level * frequenciesScale;
+    if (!frequencyData.frequencies) return null;
+    const bins = frequencyData.frequencies;
+    if (!bins.length) return null;
+    let peak = 0;
+    for (let i = 1; i < bins.length; i++) {
+        if (bins[i] > peak) peak = bins[i];
+    }
+    return Math.min(1, peak * frequenciesScale * 1.4);
+}
+
+function tickVuNeedle() {
+    if (!vuNeedleEl) vuNeedleEl = document.getElementById('vuNeedle');
+    if (!vuNeedleEl) return;
+    const audioLevel = readAudioLevel();
+    let target;
+    if (audioLevel != null) {
+        const k = audioLevel > vuLevelSmoothed ? VU_LEVEL_ATTACK : VU_LEVEL_RELEASE;
+        vuLevelSmoothed = vuLevelSmoothed * (1 - k) + audioLevel * k;
+        target = -22 + vuLevelSmoothed * 44;
+    } else {
+        if (!vuVolumeSliderEl) vuVolumeSliderEl = document.getElementById('volume-slider');
+        const vol = vuVolumeSliderEl ? Number(vuVolumeSliderEl.value) || 0 : 0;
+        const base = -22 + (vol / 100) * 44;
+        const mag = Math.max(2, Math.min(14, vol * 0.16));
+        const t = (performance.now() - vuWobbleStart) / 1000;
+        target = base
+            + Math.sin(t * 6.3) * mag * 0.55
+            + Math.sin(t * 11.7 + 1.3) * mag * 0.30
+            + (Math.random() - 0.5) * mag * 0.30;
+    }
+    // Quantize to 0.1° — finer is invisible. Skip when unchanged.
+    const q = Math.round(target * 10) / 10;
+    if (q === vuLastAppliedDeg) return;
+    vuLastAppliedDeg = q;
+    vuNeedleEl.style.transform = `rotate(${q}deg)`;
+}
+
+function startVuWobble() {
+    vuWobbleStart = performance.now();
+    // If the visualizer rAF is already running, it ticks the needle for us.
+    if (visualizerAnimFrame) return;
+    if (vuStandaloneHandle) return;
+    const standalone = () => {
+        tickVuNeedle();
+        // Stop ourselves once the unified visualizer loop is up.
+        if (visualizerAnimFrame) {
+            vuStandaloneHandle = null;
+            return;
+        }
+        vuStandaloneHandle = requestAnimationFrame(standalone);
+    };
+    vuStandaloneHandle = requestAnimationFrame(standalone);
+}
+
+function stopVuWobble() {
+    if (vuStandaloneHandle) {
+        cancelAnimationFrame(vuStandaloneHandle);
+        vuStandaloneHandle = null;
+    }
+    vuLevelSmoothed = 0;
+    vuLastAppliedDeg = -999;
+    if (!vuNeedleEl) vuNeedleEl = document.getElementById('vuNeedle');
+    if (vuNeedleEl) vuNeedleEl.style.transform = 'rotate(-22deg)';
+}
+
 export function updatePlaybackState(state) {
     setCurrentPlayState(state);
+    // Expose state to CSS so tonearm / vinyl spin can react.
+    document.documentElement.dataset.playstate = state;
+    // Drive the VU needle wobble — running only while playing.
+    if (state === 'playing') startVuWobble();
+    else stopVuWobble();
     switch(state) {
         case 'playing':
             dom.playbackState.textContent = t('state.playing');
@@ -712,31 +1014,60 @@ export function updatePlaybackState(state) {
             dom.playPauseIcon.innerHTML = SVG_PLAY;
             dom.miniPlayPauseIcon.innerHTML = SVG_PLAY;
     }
-    updateVinylSpin();
 }
 
+// Cache last applied progress values so we can skip DOM writes when the
+// rounded second hasn't moved. Width is quantized to 0.1% — finer is
+// invisible but would still trigger compositor work.
+let lastProgressTenths = -1;       // 0..1000 (0.1% increments)
+let lastProgressSec = -1;
+let lastDurationSec = -1;
+let cachedMiniBar = null;
+
 function updateProgress(position, duration) {
     const percent = (position / duration) * 100;
-    const widthStr = `${percent}%`;
-    const currentStr = formatTime(position);
-    const totalStr = formatTime(duration);
+    const tenths = Math.round(percent * 10);   // 0..1000
     const posRound = Math.round(position);
     const durRound = Math.round(duration);
 
-    dom.progressFill.style.width = widthStr;
-    dom.currentTime.textContent = currentStr;
-    dom.totalTime.textContent = totalStr;
-    dom.progressBar.dataset.duration = duration;
-    dom.progressBar.setAttribute('aria-valuenow', posRound);
-    dom.progressBar.setAttribute('aria-valuemax', durRound);
+    const widthChanged = tenths !== lastProgressTenths;
+    const posChanged = posRound !== lastProgressSec;
+    const durChanged = durRound !== lastDurationSec;
 
-    dom.miniProgressFill.style.width = widthStr;
-    dom.miniCurrentTime.textContent = currentStr;
-    dom.miniTotalTime.textContent = totalStr;
-    if (dom.miniPlayer) dom.miniPlayer.style.setProperty('--mini-progress', widthStr);
-    const miniBar = document.getElementById('mini-progress-bar');
-    miniBar.setAttribute('aria-valuenow', posRound);
-    miniBar.setAttribute('aria-valuemax', durRound);
+    if (widthChanged) {
+        lastProgressTenths = tenths;
+        const widthStr = (tenths / 10) + '%';
+        dom.progressFill.style.width = widthStr;
+        dom.miniProgressFill.style.width = widthStr;
+        if (dom.miniPlayer) dom.miniPlayer.style.setProperty('--mini-progress', widthStr);
+    }
+
+    if (posChanged) {
+        lastProgressSec = posRound;
+        const currentStr = formatTime(position);
+        dom.currentTime.textContent = currentStr;
+        if (dom.metaElapsed) dom.metaElapsed.textContent = currentStr;
+        dom.miniCurrentTime.textContent = currentStr;
+        dom.progressBar.setAttribute('aria-valuenow', posRound);
+    }
+
+    if (durChanged) {
+        lastDurationSec = durRound;
+        const totalStr = formatTime(duration);
+        dom.totalTime.textContent = totalStr;
+        if (dom.metaLength) dom.metaLength.textContent = totalStr;
+        dom.miniTotalTime.textContent = totalStr;
+        dom.progressBar.dataset.duration = duration;
+        dom.progressBar.setAttribute('aria-valuemax', durRound);
+    }
+
+    if (posChanged || durChanged) {
+        if (!cachedMiniBar) cachedMiniBar = document.getElementById('mini-progress-bar');
+        if (cachedMiniBar) {
+            if (posChanged) cachedMiniBar.setAttribute('aria-valuenow', posRound);
+            if (durChanged) cachedMiniBar.setAttribute('aria-valuemax', durRound);
+        }
+    }
 }
 
 export function startPositionInterpolation() {
@@ -763,4 +1094,177 @@ function updateMuteIcon(muted) {
     const path = muted ? SVG_MUTED : SVG_UNMUTED;
     dom.muteIcon.innerHTML = path;
     dom.miniMuteIcon.innerHTML = path;
+    const vuOut = document.getElementById('vu-out');
+    if (vuOut) vuOut.textContent = muted ? 'MUTE' : 'SYS';
+    const cluster = document.querySelector('.now-playing .vu-cluster');
+    if (cluster) cluster.classList.toggle('muted', muted);
+}
+
+// ============================================================
+// Fullscreen player mode — Listening Room
+//
+// Two-layer model:
+//   1. CSS overlay (`body.is-fullscreen-player`) — works everywhere,
+//      reuses existing player markup, takes over the viewport via
+//      position:fixed.
+//   2. Native Fullscreen API on top — true OS-level fullscreen when
+//      the user agent allows it. The CSS class is the source of truth;
+//      the native API is best-effort sugar.
+// ============================================================
+
+let fsChromeIdleTimer = null;
+const FS_CHROME_IDLE_MS = 2500;
+let fsLastFocusedElement = null;
+
+// Mirror the album-art onto #fs-bloom-art (the fullscreen ambient
+// bloom). Called directly from the artwork-swap path — no
+// MutationObserver, so we never repaint the 110px-radius blur twice.
+function syncFullscreenBloomArt(url) {
+    const bloom = document.getElementById('fs-bloom-art');
+    if (!bloom) return;
+    const target = url || (dom && dom.albumArt && dom.albumArt.src) || '';
+    if (target && bloom.src !== target) bloom.src = target;
+}
+
+function showFsChrome() {
+    document.body.classList.remove('fs-chrome-hidden');
+    if (fsChromeIdleTimer) clearTimeout(fsChromeIdleTimer);
+    if (document.body.classList.contains('is-fullscreen-player')) {
+        fsChromeIdleTimer = setTimeout(() => {
+            document.body.classList.add('fs-chrome-hidden');
+        }, FS_CHROME_IDLE_MS);
+    }
+}
+
+function onFsMouseMove() {
+    showFsChrome();
+}
+
+function onFsKeyDown(e) {
+    // ESC exits regardless of focus location (native API also dispatches its own,
+    // but we handle the CSS-only fallback case here).
+    if (e.key === 'Escape' && document.body.classList.contains('is-fullscreen-player')) {
+        e.preventDefault();
+        exitPlayerFullscreen();
+    }
+}
+
+function onGlobalFsHotkey(e) {
+    // 'F' toggles fullscreen — but never when user is typing into a field.
+    if (e.key !== 'f' && e.key !== 'F') return;
+    const tag = (e.target && e.target.tagName) || '';
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+    if (e.target && e.target.isContentEditable) return;
+    if (e.metaKey || e.ctrlKey || e.altKey) return;
+    e.preventDefault();
+    togglePlayerFullscreen();
+}
+
+function onNativeFullscreenChange() {
+    // If the user pressed ESC at the OS level or otherwise exited native
+    // fullscreen, mirror the state in our CSS overlay.
+    const hasNative = !!document.fullscreenElement;
+    const hasOverlay = document.body.classList.contains('is-fullscreen-player');
+    if (!hasNative && hasOverlay) {
+        // User left native fullscreen — also drop the overlay so the UI
+        // returns to its normal state in one motion.
+        exitPlayerFullscreen({ skipNativeExit: true });
+    }
+}
+
+function updateFullscreenButtonIcons(active) {
+    const enter = document.getElementById('fullscreen-icon-enter');
+    const exit = document.getElementById('fullscreen-icon-exit');
+    if (enter) enter.style.display = active ? 'none' : '';
+    if (exit) exit.style.display = active ? '' : 'none';
+    const btn = document.getElementById('fullscreenToggle');
+    if (btn) {
+        btn.classList.toggle('active', active);
+        btn.setAttribute('aria-pressed', active ? 'true' : 'false');
+    }
+}
+
+export function enterPlayerFullscreen() {
+    if (document.body.classList.contains('is-fullscreen-player')) return;
+
+    // If we're not on the player tab, jump to it first so the markup is visible.
+    if (activeTab !== 'player') switchTab('player');
+
+    fsLastFocusedElement = document.activeElement;
+    document.body.classList.add('is-fullscreen-player');
+    setMiniPlayerVisible(false);
+    updateFullscreenButtonIcons(true);
+    // Initial mirror — subsequent swaps are pushed by updateUI directly,
+    // so there is no MutationObserver in the hot path.
+    syncFullscreenBloomArt();
+
+    document.addEventListener('mousemove', onFsMouseMove, { passive: true });
+    document.addEventListener('keydown', onFsKeyDown);
+    showFsChrome();
+
+    // Move keyboard focus onto the play/pause button so Space/Enter immediately
+    // controls playback once the user enters the room.
+    const playBtn = document.getElementById('btn-play-pause');
+    if (playBtn) playBtn.focus({ preventScroll: true });
+
+    // Best-effort native fullscreen. Failure is silent — the CSS overlay
+    // already gives the user the immersive view.
+    const target = document.documentElement;
+    if (target.requestFullscreen && !document.fullscreenElement) {
+        target.requestFullscreen({ navigationUI: 'hide' }).catch(() => {});
+    }
+
+    localStorage.setItem('fullscreenPlayerEnabled', 'true');
+}
+
+export function exitPlayerFullscreen({ skipNativeExit = false } = {}) {
+    if (!document.body.classList.contains('is-fullscreen-player')) return;
+
+    document.body.classList.remove('is-fullscreen-player', 'fs-chrome-hidden');
+    updateFullscreenButtonIcons(false);
+
+    if (fsChromeIdleTimer) {
+        clearTimeout(fsChromeIdleTimer);
+        fsChromeIdleTimer = null;
+    }
+
+    document.removeEventListener('mousemove', onFsMouseMove);
+    document.removeEventListener('keydown', onFsKeyDown);
+
+    if (!skipNativeExit && document.fullscreenElement && document.exitFullscreen) {
+        document.exitFullscreen().catch(() => {});
+    }
+
+    // Re-evaluate mini-player visibility against scroll position.
+    if (activeTab === 'player') {
+        const playerContainer = document.querySelector('.player-container');
+        if (playerContainer) {
+            const rect = playerContainer.getBoundingClientRect();
+            const inView = rect.top < window.innerHeight && rect.bottom > 0;
+            setMiniPlayerVisible(!inView);
+        }
+    } else {
+        setMiniPlayerVisible(true);
+    }
+
+    // Restore focus to whatever invoked the toggle.
+    if (fsLastFocusedElement && typeof fsLastFocusedElement.focus === 'function') {
+        try { fsLastFocusedElement.focus({ preventScroll: true }); } catch (_) {}
+    }
+    fsLastFocusedElement = null;
+
+    localStorage.removeItem('fullscreenPlayerEnabled');
+}
+
+export function togglePlayerFullscreen() {
+    if (document.body.classList.contains('is-fullscreen-player')) {
+        exitPlayerFullscreen();
+    } else {
+        enterPlayerFullscreen();
+    }
+}
+
+export function initPlayerFullscreen() {
+    document.addEventListener('keydown', onGlobalFsHotkey);
+    document.addEventListener('fullscreenchange', onNativeFullscreenChange);
 }

media_server/static/js/websocket.js

@@ -8,7 +8,7 @@ import {
     WS_MAX_RECONNECT_ATTEMPTS, WS_PING_INTERVAL_MS,
     authRequired, showUpdateBanner,
 } from './core.js';
-import { updateUI, visualizerEnabled, visualizerAvailable, setFrequencyData, stopPositionInterpolation, loadAudioDevices } from './player.js';
+import { updateUI, setFrequencyData, stopPositionInterpolation, loadAudioDevices } from './player.js';
 import { loadScripts, loadScriptsTable, displayQuickAccess } from './scripts.js';
 import { loadCallbacksTable } from './callbacks.js';
 import { loadHeaderLinks, loadLinksTable } from './links.js';
@@ -81,9 +81,6 @@ export function connectWebSocket(token) {
         loadLinksTable();
         loadHeaderLinks();
         loadAudioDevices();
-        if (visualizerEnabled && visualizerAvailable) {
-            newWs.send(JSON.stringify({ type: 'enable_visualizer' }));
-        }
     };
 
     newWs.onmessage = (event) => {

media_server/static/locales/en.json

@@ -19,12 +19,23 @@
   "player.status.connected": "Connected",
   "player.status.disconnected": "Disconnected",
   "player.no_media": "No media playing",
+  "player.kicker": "Now Playing",
+  "player.modes": "Modes",
+  "header.connected": "Connected",
+  "header.volume": "Vol. I",
+  "header.edition": "Studio Reference",
+  "header.edition_sub": "Studio Reference Edition",
+  "meta.state": "State",
+  "meta.source": "Source",
   "player.title_unavailable": "Title unavailable",
   "player.source": "Source:",
   "player.unknown_source": "Unknown",
   "player.vinyl": "Vinyl mode",
   "player.visualizer": "Audio visualizer",
   "player.background": "Dynamic background",
+  "player.fullscreen": "Fullscreen player",
+  "player.fullscreen.exit": "Exit fullscreen",
+  "player.fullscreen.exit_short": "Exit",
   "state.playing": "Playing",
   "state.paused": "Paused",
   "state.stopped": "Stopped",
@@ -126,8 +137,8 @@
   "callbacks.msg.list_failed": "Failed to load callbacks",
   "callbacks.confirm.delete": "Are you sure you want to delete the callback \"{name}\"?",
   "callbacks.confirm.unsaved": "You have unsaved changes. Are you sure you want to discard them?",
-  "tab.player": "Player",
-  "tab.browser": "Browser",
+  "tab.player": "Now Spinning",
+  "tab.browser": "Library",
   "tab.quick_access": "Quick Access",
   "tab.settings": "Settings",
   "tab.display": "Display",
@@ -150,6 +161,19 @@
   "display.power_on": "Turn on",
   "display.power_off": "Turn off",
   "display.primary": "Primary",
+  "display.brightness": "Brightness",
+  "display.contrast": "Contrast",
+  "display.tuning": "Picture tuning",
+  "display.input_source": "Input",
+  "display.color_preset": "Color temp",
+  "display.picture_mode": "Picture mode",
+  "display.msg.contrast_failed": "Failed to set contrast",
+  "display.msg.input_changed": "Input source switched",
+  "display.msg.input_failed": "Failed to switch input source",
+  "display.msg.color_changed": "Color preset applied",
+  "display.msg.color_failed": "Failed to apply color preset",
+  "display.msg.mode_changed": "Picture mode applied",
+  "display.msg.mode_failed": "Failed to apply picture mode",
   "browser.title": "Media Browser",
   "browser.home": "Home",
   "browser.manage_folders": "Manage Folders",
@@ -248,8 +272,13 @@
   "links.msg.load_failed": "Failed to load link details",
   "links.confirm.delete": "Are you sure you want to delete the link \"{name}\"?",
   "links.confirm.unsaved": "You have unsaved changes. Are you sure you want to discard them?",
-  "footer.created_by": "Created by",
-  "footer.source_code": "Source Code",
+  "about.button_title": "About",
+  "about.title": "About",
+  "about.created_by": "Created by",
+  "about.email": "Email",
+  "about.repository": "Repository",
+  "about.source_code": "Source Code",
+  "dialog.close": "Close",
   "update.available": "Update available: v{version}",
   "update.view_release": "View Release"
 }

media_server/static/locales/ru.json

@@ -19,12 +19,23 @@
   "player.status.connected": "Подключено",
   "player.status.disconnected": "Отключено",
   "player.no_media": "Медиа не воспроизводится",
+  "player.kicker": "Сейчас играет",
+  "player.modes": "Режимы",
+  "header.connected": "Подключено",
+  "header.volume": "Том I",
+  "header.edition": "Studio Reference",
+  "header.edition_sub": "Studio Reference Edition",
+  "meta.state": "Состояние",
+  "meta.source": "Источник",
   "player.title_unavailable": "Название недоступно",
   "player.source": "Источник:",
   "player.unknown_source": "Неизвестно",
   "player.vinyl": "Режим винила",
   "player.visualizer": "Аудио визуализатор",
   "player.background": "Динамический фон",
+  "player.fullscreen": "Полноэкранный режим",
+  "player.fullscreen.exit": "Выйти из полного экрана",
+  "player.fullscreen.exit_short": "Выйти",
   "state.playing": "Воспроизведение",
   "state.paused": "Пауза",
   "state.stopped": "Остановлено",
@@ -126,8 +137,8 @@
   "callbacks.msg.list_failed": "Не удалось загрузить обратные вызовы",
   "callbacks.confirm.delete": "Вы уверены, что хотите удалить обратный вызов \"{name}\"?",
   "callbacks.confirm.unsaved": "У вас есть несохраненные изменения. Вы уверены, что хотите отменить их?",
-  "tab.player": "Плеер",
-  "tab.browser": "Браузер",
+  "tab.player": "Сейчас играет",
+  "tab.browser": "Библиотека",
   "tab.quick_access": "Быстрый Доступ",
   "tab.settings": "Настройки",
   "tab.display": "Дисплей",
@@ -150,6 +161,19 @@
   "display.power_on": "Включить",
   "display.power_off": "Выключить",
   "display.primary": "Основной",
+  "display.brightness": "Яркость",
+  "display.contrast": "Контраст",
+  "display.tuning": "Настройка изображения",
+  "display.input_source": "Вход",
+  "display.color_preset": "Цветовая температура",
+  "display.picture_mode": "Режим изображения",
+  "display.msg.contrast_failed": "Не удалось установить контраст",
+  "display.msg.input_changed": "Источник входа переключён",
+  "display.msg.input_failed": "Не удалось переключить источник",
+  "display.msg.color_changed": "Цветовая температура применена",
+  "display.msg.color_failed": "Не удалось применить цветовую температуру",
+  "display.msg.mode_changed": "Режим изображения применён",
+  "display.msg.mode_failed": "Не удалось применить режим изображения",
   "browser.title": "Медиа Браузер",
   "browser.home": "Главная",
   "browser.manage_folders": "Управление папками",
@@ -248,8 +272,13 @@
   "links.msg.load_failed": "Не удалось загрузить данные ссылки",
   "links.confirm.delete": "Вы уверены, что хотите удалить ссылку \"{name}\"?",
   "links.confirm.unsaved": "У вас есть несохраненные изменения. Вы уверены, что хотите отменить их?",
-  "footer.created_by": "Создано",
-  "footer.source_code": "Исходный код",
+  "about.button_title": "О программе",
+  "about.title": "О программе",
+  "about.created_by": "Создано",
+  "about.email": "Эл. почта",
+  "about.repository": "Репозиторий",
+  "about.source_code": "Исходный код",
+  "dialog.close": "Закрыть",
   "update.available": "Доступно обновление: v{version}",
   "update.view_release": "Перейти к релизу"
 }

media_server/static/vinyl-variants-mockup.html

@@ -0,0 +1,911 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Vinyl Variants · Studio Reference</title>
+<link rel="icon" type="image/svg+xml" href="/static/icons/icon.svg">
+
+<style>
+/* ───────── Local fonts (re-using main app's woff2 files) ───── */
+@font-face {
+  font-family: 'Fraunces';
+  font-style: italic;
+  font-weight: 300 900;
+  font-display: swap;
+  src: url('/static/fonts/Fraunces-italic-latin.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fraunces';
+  font-style: normal;
+  font-weight: 300 900;
+  font-display: swap;
+  src: url('/static/fonts/Fraunces-latin.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Geist';
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: swap;
+  src: url('/static/fonts/Geist-latin.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 300 600;
+  font-display: swap;
+  src: url('/static/fonts/GeistMono-latin.woff2') format('woff2');
+}
+
+/* ───────── Tokens (Studio Reference, dark) ───── */
+:root {
+  --bg-deep: #0E0D0B;
+  --bg-paper: #18150F;
+  --bg-card: #211E18;
+  --bg-card-2: #26211A;
+  --bg-rule: #2E2820;
+  --ink: #F2EBDC;
+  --ink-soft: #D6CDB9;
+  --ink-mute: #9C937F;
+  --ink-faint: #5C5447;
+  --ink-ghost: #3A3528;
+  --copper: #E08038;
+  --copper-hi: #F4A064;
+  --copper-lo: #B0561F;
+  --copper-glow: rgba(224, 128, 56, 0.35);
+  --rule: rgba(242, 235, 220, 0.08);
+  --rule-strong: rgba(242, 235, 220, 0.18);
+  --serif: 'Fraunces', Georgia, serif;
+  --sans: 'Geist', system-ui, sans-serif;
+  --mono: 'Geist Mono', ui-monospace, monospace;
+  --ease: cubic-bezier(.2, .7, .2, 1);
+  --ease-out: cubic-bezier(.16, 1, .3, 1);
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html { background: var(--bg-deep); }
+body {
+  font-family: var(--sans);
+  background: var(--bg-deep);
+  color: var(--ink);
+  min-height: 100vh;
+  padding: 56px 36px 80px;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* Film grain */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0.05;
+  mix-blend-mode: overlay;
+  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.86  0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+/* ───────── Page header (editorial) ───── */
+header.page-head {
+  max-width: 1320px;
+  margin: 0 auto 48px;
+  text-align: center;
+}
+.kicker {
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.32em;
+  text-transform: uppercase;
+  color: var(--copper);
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 22px;
+}
+.kicker::before, .kicker::after {
+  content: "";
+  height: 1px;
+  width: 40px;
+  background: var(--copper);
+  opacity: 0.6;
+}
+h1 {
+  font-family: var(--serif);
+  font-style: italic;
+  font-weight: 400;
+  font-size: clamp(36px, 5vw, 56px);
+  line-height: 1;
+  letter-spacing: -0.02em;
+  margin-bottom: 14px;
+  font-variation-settings: 'opsz' 144;
+}
+.subtitle {
+  font-family: var(--mono);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink-mute);
+  margin-bottom: 8px;
+}
+.return-link {
+  display: inline-block;
+  margin-top: 24px;
+  font-family: var(--mono);
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  text-decoration: none;
+  border-bottom: 1px solid var(--ink-faint);
+  padding-bottom: 2px;
+  transition: all 200ms var(--ease);
+}
+.return-link:hover { color: var(--copper); border-color: var(--copper); }
+
+/* ───────── Variant grid ───── */
+.grid {
+  max-width: 1320px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+  gap: 56px 40px;
+}
+
+article.variant {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.stage {
+  position: relative;
+  aspect-ratio: 1;
+  width: 100%;
+  background:
+    radial-gradient(ellipse at center, var(--bg-card-2) 0%, var(--bg-deep) 80%);
+  border: 1px solid var(--rule);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  margin-bottom: 22px;
+}
+
+.label-row {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  border-bottom: 1px solid var(--rule);
+  padding-bottom: 10px;
+  margin-bottom: 14px;
+}
+.label-num {
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.2em;
+  color: var(--copper);
+}
+.label-name {
+  font-family: var(--serif);
+  font-style: italic;
+  font-size: 22px;
+  font-weight: 400;
+  font-variation-settings: 'opsz' 60;
+  flex: 1;
+}
+.label-tag {
+  font-family: var(--mono);
+  font-size: 9px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  padding: 3px 8px;
+  border: 1px solid var(--rule-strong);
+}
+.tag-css { color: var(--jade, #7AB294); border-color: rgba(122, 178, 148, 0.3); }
+.tag-needs-js { color: var(--copper); border-color: var(--copper-lo); }
+
+p.descr {
+  font-family: var(--sans);
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--ink-soft);
+}
+p.descr strong {
+  color: var(--ink);
+  font-weight: 500;
+}
+
+/* ───────── Shared vinyl base ───── */
+.vinyl {
+  position: relative;
+  width: 86%;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 50% 50%,
+      #0a0907 0%, #0a0907 18%,
+      #1a1611 18.3%, #0a0907 18.6%,
+      #14110c 22%, #0a0907 22.3%,
+      #14110c 26%, #0a0907 26.3%,
+      #14110c 30%, #0a0907 30.3%,
+      #14110c 34%, #0a0907 34.3%,
+      #14110c 38%, #0a0907 38.3%,
+      #14110c 42%, #0a0907 42.3%,
+      #14110c 46%, #0a0907 46.3%,
+      #1c1812 47%, #0a0907 100%);
+  box-shadow:
+    inset 0 0 60px rgba(0, 0, 0, 0.7),
+    0 30px 80px rgba(0, 0, 0, 0.6),
+    0 6px 20px rgba(0, 0, 0, 0.5);
+  animation: spin 14s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.vinyl::before {
+  content: "";
+  position: absolute;
+  inset: 12%;
+  border-radius: 50%;
+  background:
+    conic-gradient(from 0deg,
+      rgba(255,255,255,0.04) 0deg,
+      transparent 30deg,
+      rgba(255,255,255,0.06) 90deg,
+      transparent 150deg,
+      rgba(255,255,255,0.03) 210deg,
+      transparent 270deg,
+      rgba(255,255,255,0.05) 330deg,
+      transparent 360deg);
+  mix-blend-mode: screen;
+  pointer-events: none;
+}
+
+.vinyl-label {
+  position: absolute;
+  inset: 28%;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow:
+    inset 0 0 24px rgba(0, 0, 0, 0.4),
+    0 0 0 4px var(--bg-deep),
+    0 0 0 5px var(--copper-lo);
+  background: var(--bg-card);
+  z-index: 1;
+}
+.vinyl-label::after {
+  content: "";
+  position: absolute;
+  width: 8%; height: 8%;
+  top: 46%; left: 46%;
+  border-radius: 50%;
+  background: var(--bg-deep);
+  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
+  z-index: 3;
+}
+.vinyl-label img,
+.vinyl-label svg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Album art (shared SVG used by every variant) */
+.album-art {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Tonearm (decorative, on every stage so they read as "now playing") */
+.tonearm {
+  position: absolute;
+  top: -4%;
+  right: -2%;
+  width: 50%;
+  height: 50%;
+  pointer-events: none;
+  transform-origin: 88% 12%;
+  transform: rotate(0deg);
+  z-index: 5;
+  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
+}
+
+/* ════════════════════════════════════════════════════════════════
+   ORIGINAL  —  current shipping look (control)
+   ════════════════════════════════════════════════════════════════ */
+.v0 .stage { /* nothing extra */ }
+
+/* ════════════════════════════════════════════════════════════════
+   VARIANT 1  —  Sleeve frame
+   Vinyl peeks out of a square cardstock sleeve.
+   ════════════════════════════════════════════════════════════════ */
+.v1 .stage {
+  background:
+    radial-gradient(ellipse at center, #1a1611 0%, var(--bg-deep) 80%);
+}
+.v1 .sleeve-stage {
+  position: relative;
+  width: 90%;
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.v1 .sleeve {
+  position: absolute;
+  left: 0;
+  top: 6%;
+  width: 70%;
+  aspect-ratio: 1;
+  background: var(--bg-card-2);
+  box-shadow:
+    inset 0 0 0 1px rgba(0,0,0,0.4),
+    inset 4px 4px 24px rgba(0,0,0,0.35),
+    -2px 8px 24px rgba(0,0,0,0.5),
+    -4px 16px 40px rgba(0,0,0,0.35);
+  z-index: 3;
+  /* Casually-placed tilt — like a sleeve set down on a console */
+  transform: rotate(-3.2deg);
+  transform-origin: 60% 60%;
+  /* worn-edge cardstock effect */
+  filter: contrast(1.05) brightness(0.97);
+}
+.v1 .sleeve::before {
+  /* Cardstock paper grain */
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  mix-blend-mode: multiply;
+  pointer-events: none;
+  opacity: 0.6;
+}
+.v1 .sleeve::after {
+  /* Ring-wear: faint circle from the LP rubbing the cardstock */
+  content: "";
+  position: absolute;
+  inset: 6%;
+  border-radius: 50%;
+  border: 1px solid rgba(0,0,0,0.25);
+  box-shadow:
+    inset 0 0 12px rgba(0,0,0,0.18),
+    inset 0 0 0 1px rgba(255,255,255,0.04);
+  pointer-events: none;
+}
+.v1 .sleeve-art {
+  position: absolute;
+  inset: 6%;
+  z-index: 1;
+  filter: contrast(0.88) saturate(0.6) brightness(0.88);
+  opacity: 0.85;
+}
+.v1 .sleeve-art svg { width: 100%; height: 100%; }
+/* Worn corner notch */
+.v1 .sleeve-corner {
+  position: absolute;
+  width: 14%;
+  height: 14%;
+  bottom: -1px;
+  right: -1px;
+  background: var(--bg-deep);
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+  opacity: 0.7;
+  z-index: 4;
+}
+.v1 .vinyl-wrap {
+  position: absolute;
+  right: -2%;
+  top: 16%;
+  width: 70%;
+  aspect-ratio: 1;
+  z-index: 2;
+}
+.v1 .vinyl-wrap .vinyl {
+  width: 100%;
+}
+.v1 .vinyl-label {
+  /* Smaller label since the disc here is showing; album art lives on sleeve */
+  inset: 32%;
+  background: #2E2820;
+  box-shadow:
+    inset 0 0 18px rgba(0,0,0,0.4),
+    0 0 0 3px var(--bg-deep),
+    0 0 0 4px var(--copper-lo);
+}
+.v1 .vinyl-label::before {
+  /* Plain-color label with faux pressing imprint */
+  content: "REF · 24";
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.3em;
+  color: var(--copper);
+  z-index: 2;
+}
+.v1 .tonearm {
+  right: -8%;
+  top: 8%;
+  width: 44%;
+  height: 44%;
+}
+
+/* ════════════════════════════════════════════════════════════════
+   VARIANT 2  —  Sheen + paper grain + dead-wax + off-center
+   The high-impact variant.
+   ════════════════════════════════════════════════════════════════ */
+.v2 .vinyl-label {
+  /* Slightly off-center spindle for "pressed off-axis" feel */
+  inset: 27% 27% 29% 29%;
+}
+.v2 .vinyl-label::after {
+  /* Spindle hole offset 1.5% from true center */
+  top: 47%;
+  left: 47.5%;
+}
+/* Paper grain on the label, multiplied so it sits inside the print */
+.v2 .vinyl-label .label-grain {
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.04  0 0 0 0 0.03  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  mix-blend-mode: multiply;
+  pointer-events: none;
+  z-index: 4;
+}
+/* Dead-wax: micro-text engraved between the label and the run-out groove */
+.v2 .dead-wax {
+  position: absolute;
+  inset: 21%;
+  border-radius: 50%;
+  z-index: 0;
+  pointer-events: none;
+  /* Animation OFF the disc — engraving is part of the press, so it does spin with the vinyl */
+  animation: spin 14s linear infinite;
+}
+.v2 .dead-wax svg { width: 100%; height: 100%; }
+/* Reflection sweep — fixed in viewer space, not rotating with the disc */
+.v2 .sheen {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  pointer-events: none;
+  background:
+    conic-gradient(from 110deg,
+      transparent 0deg,
+      rgba(255, 245, 220, 0) 30deg,
+      rgba(255, 245, 220, 0.07) 60deg,
+      rgba(255, 245, 220, 0.14) 80deg,
+      rgba(255, 245, 220, 0.07) 100deg,
+      transparent 140deg,
+      transparent 280deg,
+      rgba(255, 245, 220, 0.04) 305deg,
+      rgba(255, 245, 220, 0.08) 320deg,
+      rgba(255, 245, 220, 0.04) 335deg,
+      transparent 360deg);
+  mix-blend-mode: screen;
+  z-index: 4;
+}
+
+/* ════════════════════════════════════════════════════════════════
+   VARIANT 3  —  Tone-graded album art (duotone)
+   ════════════════════════════════════════════════════════════════ */
+.v3 .vinyl-label .album-art {
+  filter:
+    saturate(0.35)
+    sepia(0.45)
+    hue-rotate(345deg)
+    brightness(0.85)
+    contrast(1.18);
+}
+.v3 .vinyl-label::before {
+  /* Subtle copper duotone overlay tints the highlights */
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(135deg,
+      rgba(224, 128, 56, 0.18) 0%,
+      rgba(31, 78, 61, 0.10) 50%,
+      rgba(0,0,0,0.18) 100%);
+  mix-blend-mode: overlay;
+  z-index: 2;
+  pointer-events: none;
+}
+.v3 .vinyl-label::after {
+  z-index: 4;
+}
+.v3 .vinyl-label .vignette {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 50% 45%,
+    transparent 35%,
+    rgba(0,0,0,0.45) 100%);
+  z-index: 3;
+  pointer-events: none;
+}
+
+/* ════════════════════════════════════════════════════════════════
+   VARIANT 4  —  Sleeve-to-disc reveal animation
+   (Hover the card to see the disc slide out)
+   ════════════════════════════════════════════════════════════════ */
+.v4 .sleeve-stage {
+  position: relative;
+  width: 90%;
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.v4 .sleeve {
+  position: absolute;
+  left: 14%;
+  top: 12%;
+  width: 72%;
+  aspect-ratio: 1;
+  background: var(--bg-card-2);
+  box-shadow:
+    inset 0 0 0 1px rgba(0,0,0,0.4),
+    -2px 6px 18px rgba(0,0,0,0.5);
+  z-index: 4;
+  overflow: hidden;
+}
+.v4 .sleeve::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  mix-blend-mode: multiply;
+  pointer-events: none;
+  z-index: 2;
+}
+.v4 .sleeve-art {
+  width: 100%; height: 100%;
+  filter: contrast(0.92) saturate(0.7) brightness(0.92);
+  position: relative;
+  z-index: 1;
+}
+.v4 .vinyl-slot {
+  position: absolute;
+  left: 14%;
+  top: 12%;
+  width: 72%;
+  aspect-ratio: 1;
+  z-index: 3;
+  transition: transform 1.2s var(--ease-out);
+}
+.v4 .vinyl-slot .vinyl {
+  width: 100%;
+  animation-play-state: paused;
+  transition: animation-play-state 0.4s;
+}
+.v4 .stage:hover .vinyl-slot {
+  transform: translateX(46%);
+}
+.v4 .stage:hover .vinyl-slot .vinyl {
+  animation-play-state: running;
+}
+.v4 .hover-hint {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: var(--mono);
+  font-size: 9px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  pointer-events: none;
+  z-index: 10;
+}
+.v4 .stage:hover .hover-hint { opacity: 0.4; }
+
+/* Note row at top of every variant */
+.note {
+  position: absolute;
+  top: 12px;
+  left: 14px;
+  font-family: var(--mono);
+  font-size: 9px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  z-index: 10;
+}
+
+/* ───────── Mobile ───── */
+@media (max-width: 720px) {
+  body { padding: 36px 16px 60px; }
+  .grid { gap: 36px 20px; grid-template-columns: 1fr; }
+}
+</style>
+</head>
+<body>
+
+<header class="page-head">
+  <div class="kicker">Studio Reference · Album Art Variants</div>
+  <h1>Vinyl Cover Treatments</h1>
+  <p class="subtitle">Five renderings of the same disc · Hover variant 04 for the sleeve reveal</p>
+  <a class="return-link" href="/">← Return to player</a>
+</header>
+
+<div class="grid">
+
+  <!-- ═════════ ORIGINAL ═════════ -->
+  <article class="variant v0">
+    <div class="stage">
+      <span class="note">As shipping</span>
+      <div class="vinyl">
+        <div class="vinyl-label">
+          <svg viewBox="0 0 400 400" class="album-art" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <linearGradient id="bgA" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0%" stop-color="#1F4E3D"/>
+                <stop offset="55%" stop-color="#143E2F"/>
+                <stop offset="100%" stop-color="#0a2519"/>
+              </linearGradient>
+              <radialGradient id="vigA" cx="50%" cy="50%" r="70%">
+                <stop offset="55%" stop-color="rgba(0,0,0,0)"/>
+                <stop offset="100%" stop-color="rgba(0,0,0,0.55)"/>
+              </radialGradient>
+            </defs>
+            <rect width="400" height="400" fill="url(#bgA)"/>
+            <g stroke="#e08038" stroke-width="1" fill="none" opacity="0.55">
+              <circle cx="200" cy="200" r="60"/>
+              <circle cx="200" cy="200" r="100"/>
+              <circle cx="200" cy="200" r="140"/>
+              <circle cx="200" cy="200" r="180"/>
+            </g>
+            <text x="200" y="195" text-anchor="middle" font-family="serif" font-style="italic" fill="#f2ebdc" font-size="34">Reference</text>
+            <text x="200" y="225" text-anchor="middle" font-family="monospace" fill="#e08038" font-size="11" letter-spacing="4">VOL · I</text>
+            <text x="200" y="368" text-anchor="middle" font-family="monospace" fill="#9c937f" font-size="9" letter-spacing="6" opacity="0.6">STUDIO PRESSING</text>
+            <rect width="400" height="400" fill="url(#vigA)"/>
+          </svg>
+        </div>
+      </div>
+      <svg class="tonearm" viewBox="0 0 200 200" aria-hidden="true">
+        <defs>
+          <linearGradient id="armGrad0" x1="0" x2="1">
+            <stop offset="0" stop-color="#3a3528"/>
+            <stop offset="0.5" stop-color="#9C937F"/>
+            <stop offset="1" stop-color="#5C5447"/>
+          </linearGradient>
+        </defs>
+        <circle cx="176" cy="24" r="14" fill="#1a1611" stroke="#3A3528" stroke-width="1"/>
+        <circle cx="176" cy="24" r="6" fill="#3A3528"/>
+        <circle cx="176" cy="24" r="2" fill="#E08038"/>
+        <line x1="176" y1="24" x2="64" y2="136" stroke="url(#armGrad0)" stroke-width="3.5" stroke-linecap="round"/>
+        <rect x="180" y="14" width="14" height="20" fill="#26211A" stroke="#3A3528"/>
+        <rect x="56" y="128" width="22" height="18" rx="2" fill="#26211A" stroke="#3A3528" transform="rotate(-45 67 137)"/>
+        <circle cx="62" cy="138" r="3" fill="#E08038" opacity="0.8"/>
+        <circle cx="62" cy="138" r="6" fill="none" stroke="#E08038" stroke-width="0.5" opacity="0.4"/>
+      </svg>
+    </div>
+    <div class="label-row">
+      <span class="label-num">00</span>
+      <span class="label-name">Original</span>
+      <span class="label-tag tag-css">control</span>
+    </div>
+    <p class="descr">Current shipping vinyl: pressed grooves, copper-bordered label rim, full album art on the label. Reference baseline for everything below.</p>
+  </article>
+
+  <!-- ═════════ VARIANT 1 — SLEEVE FRAME ═════════ -->
+  <article class="variant v1">
+    <div class="stage">
+      <span class="note">CSS only</span>
+      <div class="sleeve-stage">
+        <div class="sleeve">
+          <div class="sleeve-art">
+            <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+              <defs>
+                <linearGradient id="bgB" x1="0" y1="0" x2="1" y2="1">
+                  <stop offset="0%" stop-color="#1F4E3D"/>
+                  <stop offset="55%" stop-color="#143E2F"/>
+                  <stop offset="100%" stop-color="#0a2519"/>
+                </linearGradient>
+              </defs>
+              <rect width="400" height="400" fill="url(#bgB)"/>
+              <g stroke="#e08038" stroke-width="1" fill="none" opacity="0.55">
+                <circle cx="200" cy="200" r="60"/>
+                <circle cx="200" cy="200" r="100"/>
+                <circle cx="200" cy="200" r="140"/>
+                <circle cx="200" cy="200" r="180"/>
+              </g>
+              <text x="200" y="195" text-anchor="middle" font-family="serif" font-style="italic" fill="#f2ebdc" font-size="34">Reference</text>
+              <text x="200" y="225" text-anchor="middle" font-family="monospace" fill="#e08038" font-size="11" letter-spacing="4">VOL · I</text>
+              <text x="200" y="368" text-anchor="middle" font-family="monospace" fill="#9c937f" font-size="9" letter-spacing="6" opacity="0.6">STUDIO PRESSING</text>
+            </svg>
+          </div>
+          <div class="sleeve-corner"></div>
+        </div>
+        <div class="vinyl-wrap">
+          <div class="vinyl">
+            <div class="vinyl-label"></div>
+          </div>
+        </div>
+      </div>
+      <svg class="tonearm" viewBox="0 0 200 200" aria-hidden="true">
+        <use href="#armGrad0"/>
+        <circle cx="176" cy="24" r="14" fill="#1a1611" stroke="#3A3528" stroke-width="1"/>
+        <circle cx="176" cy="24" r="6" fill="#3A3528"/>
+        <circle cx="176" cy="24" r="2" fill="#E08038"/>
+        <line x1="176" y1="24" x2="80" y2="120" stroke="#9C937F" stroke-width="3.5" stroke-linecap="round"/>
+        <rect x="180" y="14" width="14" height="20" fill="#26211A" stroke="#3A3528"/>
+        <rect x="72" y="112" width="22" height="18" rx="2" fill="#26211A" stroke="#3A3528" transform="rotate(-45 83 121)"/>
+        <circle cx="78" cy="122" r="3" fill="#E08038" opacity="0.8"/>
+      </svg>
+    </div>
+    <div class="label-row">
+      <span class="label-num">01</span>
+      <span class="label-name">Sleeve Frame</span>
+      <span class="label-tag tag-css">CSS only</span>
+    </div>
+    <p class="descr">Vinyl peeks out of a square cardstock <strong>sleeve</strong> — paper grain, ring-wear circle, worn-corner notch. The album art lives on the sleeve; the disc gets a plain typographic label. Reads instantly as "record on a turntable", not "spinning disc."</p>
+  </article>
+
+  <!-- ═════════ VARIANT 2 — SHEEN + GRAIN + DEAD-WAX ═════════ -->
+  <article class="variant v2">
+    <div class="stage">
+      <span class="note">CSS only · highest ROI</span>
+      <div class="vinyl">
+        <div class="dead-wax">
+          <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <path id="dwPath" d="M 50,50 m -36,0 a 36,36 0 1,1 72,0 a 36,36 0 1,1 -72,0"/>
+            </defs>
+            <text font-family="monospace" font-size="2.4" fill="#3a3528" letter-spacing="0.45" opacity="0.85">
+              <textPath href="#dwPath">· STUDIO REFERENCE PRESSING · A-SIDE · MASTER LACQUER 24-S · DOLG.AD MASTERED · ½ SPEED</textPath>
+            </text>
+          </svg>
+        </div>
+        <div class="vinyl-label">
+          <svg viewBox="0 0 400 400" class="album-art" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <linearGradient id="bgC" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0%" stop-color="#1F4E3D"/>
+                <stop offset="55%" stop-color="#143E2F"/>
+                <stop offset="100%" stop-color="#0a2519"/>
+              </linearGradient>
+            </defs>
+            <rect width="400" height="400" fill="url(#bgC)"/>
+            <g stroke="#e08038" stroke-width="1" fill="none" opacity="0.55">
+              <circle cx="200" cy="200" r="60"/>
+              <circle cx="200" cy="200" r="100"/>
+              <circle cx="200" cy="200" r="140"/>
+              <circle cx="200" cy="200" r="180"/>
+            </g>
+            <text x="200" y="195" text-anchor="middle" font-family="serif" font-style="italic" fill="#f2ebdc" font-size="34">Reference</text>
+            <text x="200" y="225" text-anchor="middle" font-family="monospace" fill="#e08038" font-size="11" letter-spacing="4">VOL · I</text>
+            <text x="200" y="368" text-anchor="middle" font-family="monospace" fill="#9c937f" font-size="9" letter-spacing="6" opacity="0.6">STUDIO PRESSING</text>
+          </svg>
+          <div class="label-grain"></div>
+        </div>
+        <div class="sheen"></div>
+      </div>
+      <svg class="tonearm" viewBox="0 0 200 200" aria-hidden="true">
+        <circle cx="176" cy="24" r="14" fill="#1a1611" stroke="#3A3528" stroke-width="1"/>
+        <circle cx="176" cy="24" r="6" fill="#3A3528"/>
+        <circle cx="176" cy="24" r="2" fill="#E08038"/>
+        <line x1="176" y1="24" x2="64" y2="136" stroke="#9C937F" stroke-width="3.5" stroke-linecap="round"/>
+        <rect x="180" y="14" width="14" height="20" fill="#26211A" stroke="#3A3528"/>
+        <rect x="56" y="128" width="22" height="18" rx="2" fill="#26211A" stroke="#3A3528" transform="rotate(-45 67 137)"/>
+        <circle cx="62" cy="138" r="3" fill="#E08038" opacity="0.8"/>
+      </svg>
+    </div>
+    <div class="label-row">
+      <span class="label-num">02</span>
+      <span class="label-name">Sheen, Grain &amp; Dead-Wax</span>
+      <span class="label-tag tag-css">CSS only</span>
+    </div>
+    <p class="descr">Three layers added to the existing vinyl: a <strong>fixed reflection sweep</strong> (doesn't rotate with the disc — the studio-light look), <strong>paper grain</strong> on the label so the print sits in cardstock, and a <strong>dead-wax engraving</strong> of the master&#8209;lacquer code spinning with the disc. Off-center spindle by 1.5%. Highest visual ROI for the smallest amount of new code.</p>
+  </article>
+
+  <!-- ═════════ VARIANT 3 — TONE-GRADED ═════════ -->
+  <article class="variant v3">
+    <div class="stage">
+      <span class="note">CSS only</span>
+      <div class="vinyl">
+        <div class="vinyl-label">
+          <svg viewBox="0 0 400 400" class="album-art" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <linearGradient id="bgD" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0%" stop-color="#1F4E3D"/>
+                <stop offset="55%" stop-color="#143E2F"/>
+                <stop offset="100%" stop-color="#0a2519"/>
+              </linearGradient>
+            </defs>
+            <rect width="400" height="400" fill="url(#bgD)"/>
+            <g stroke="#e08038" stroke-width="1" fill="none" opacity="0.55">
+              <circle cx="200" cy="200" r="60"/>
+              <circle cx="200" cy="200" r="100"/>
+              <circle cx="200" cy="200" r="140"/>
+              <circle cx="200" cy="200" r="180"/>
+            </g>
+            <text x="200" y="195" text-anchor="middle" font-family="serif" font-style="italic" fill="#f2ebdc" font-size="34">Reference</text>
+            <text x="200" y="225" text-anchor="middle" font-family="monospace" fill="#e08038" font-size="11" letter-spacing="4">VOL · I</text>
+            <text x="200" y="368" text-anchor="middle" font-family="monospace" fill="#9c937f" font-size="9" letter-spacing="6" opacity="0.6">STUDIO PRESSING</text>
+          </svg>
+          <div class="vignette"></div>
+        </div>
+      </div>
+      <svg class="tonearm" viewBox="0 0 200 200" aria-hidden="true">
+        <circle cx="176" cy="24" r="14" fill="#1a1611" stroke="#3A3528" stroke-width="1"/>
+        <circle cx="176" cy="24" r="6" fill="#3A3528"/>
+        <circle cx="176" cy="24" r="2" fill="#E08038"/>
+        <line x1="176" y1="24" x2="64" y2="136" stroke="#9C937F" stroke-width="3.5" stroke-linecap="round"/>
+        <rect x="180" y="14" width="14" height="20" fill="#26211A" stroke="#3A3528"/>
+        <rect x="56" y="128" width="22" height="18" rx="2" fill="#26211A" stroke="#3A3528" transform="rotate(-45 67 137)"/>
+        <circle cx="62" cy="138" r="3" fill="#E08038" opacity="0.8"/>
+      </svg>
+    </div>
+    <div class="label-row">
+      <span class="label-num">03</span>
+      <span class="label-name">Tone-Graded Cover</span>
+      <span class="label-tag tag-css">CSS only</span>
+    </div>
+    <p class="descr">Same disc, but the album art on the label is <strong>color-graded</strong> — duotone copper/emerald, deeper saturation drop, vignette around the label rim. Effect: every album cover ends up looking like it came from the same pressing plant, matching the Studio Reference chrome.</p>
+  </article>
+
+  <!-- ═════════ VARIANT 4 — SLEEVE-TO-DISC REVEAL ═════════ -->
+  <article class="variant v4">
+    <div class="stage">
+      <span class="note">CSS hover · JS in production</span>
+      <div class="sleeve-stage">
+        <div class="sleeve">
+          <div class="sleeve-art">
+            <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+              <defs>
+                <linearGradient id="bgE" x1="0" y1="0" x2="1" y2="1">
+                  <stop offset="0%" stop-color="#1F4E3D"/>
+                  <stop offset="55%" stop-color="#143E2F"/>
+                  <stop offset="100%" stop-color="#0a2519"/>
+                </linearGradient>
+              </defs>
+              <rect width="400" height="400" fill="url(#bgE)"/>
+              <g stroke="#e08038" stroke-width="1" fill="none" opacity="0.55">
+                <circle cx="200" cy="200" r="60"/>
+                <circle cx="200" cy="200" r="100"/>
+                <circle cx="200" cy="200" r="140"/>
+                <circle cx="200" cy="200" r="180"/>
+              </g>
+              <text x="200" y="195" text-anchor="middle" font-family="serif" font-style="italic" fill="#f2ebdc" font-size="34">Reference</text>
+              <text x="200" y="225" text-anchor="middle" font-family="monospace" fill="#e08038" font-size="11" letter-spacing="4">VOL · I</text>
+              <text x="200" y="368" text-anchor="middle" font-family="monospace" fill="#9c937f" font-size="9" letter-spacing="6" opacity="0.6">STUDIO PRESSING</text>
+            </svg>
+          </div>
+        </div>
+        <div class="vinyl-slot">
+          <div class="vinyl">
+            <div class="vinyl-label"></div>
+          </div>
+        </div>
+        <span class="hover-hint">Hover to play</span>
+      </div>
+      <svg class="tonearm" viewBox="0 0 200 200" aria-hidden="true">
+        <circle cx="176" cy="24" r="14" fill="#1a1611" stroke="#3A3528" stroke-width="1"/>
+        <circle cx="176" cy="24" r="6" fill="#3A3528"/>
+        <circle cx="176" cy="24" r="2" fill="#E08038"/>
+        <line x1="176" y1="24" x2="64" y2="136" stroke="#9C937F" stroke-width="3.5" stroke-linecap="round"/>
+        <rect x="180" y="14" width="14" height="20" fill="#26211A" stroke="#3A3528"/>
+        <rect x="56" y="128" width="22" height="18" rx="2" fill="#26211A" stroke="#3A3528" transform="rotate(-45 67 137)"/>
+        <circle cx="62" cy="138" r="3" fill="#E08038" opacity="0.8"/>
+      </svg>
+    </div>
+    <div class="label-row">
+      <span class="label-num">04</span>
+      <span class="label-name">Sleeve-to-Disc Reveal</span>
+      <span class="label-tag tag-needs-js">needs JS</span>
+    </div>
+    <p class="descr"><strong>Hover this card</strong> — the disc slides out of the sleeve and starts spinning. In production, this would be wired to the play/pause state: paused = tucked-in sleeve view, playing = disc revealed and spinning. Most evocative, also the most code (animation choreography + state coupling).</p>
+  </article>
+
+</div>
+
+</body>
+</html>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "media-server-frontend",
-  "version": "0.1.2",
+  "version": "0.2.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "media-server-frontend",
-      "version": "0.1.2",
+      "version": "0.2.4",
       "devDependencies": {
         "esbuild": "^0.27.4"
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "media-server-frontend",
-  "version": "0.1.3",
+  "version": "0.2.4",
   "private": true,
   "description": "Frontend build tooling for media server WebUI",
   "scripts": {

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "media-server"
-version = "0.1.3"
+version = "0.2.4"
 description = "REST API server for controlling system-wide media playback"
 readme = "README.md"
 license = { text = "MIT" }
@@ -32,6 +32,8 @@ dependencies = [
     "pyyaml>=6.0",
     "mutagen>=1.47.0",
     "pillow>=10.0.0",
+    "soundcard>=0.4.0",
+    "numpy>=1.24.0,<2.0",
 ]
 
 [project.optional-dependencies]
@@ -41,13 +43,10 @@ windows = [
     "comtypes>=1.2.0",
     "pycaw>=20230407",
     "screen-brightness-control>=0.20.0",
+    "wmi>=1.5.1",
     "monitorcontrol>=3.0.0",
     "pystray>=0.19.0",
 ]
-visualizer = [
-    "soundcard>=0.4.0",
-    "numpy>=1.24.0,<2.0",
-]
 dev = [
     "pytest>=7.0",
     "pytest-asyncio>=0.21",

scripts/restart-server.ps1

@@ -1,35 +1,103 @@
-# Restart the Media Server
-# Stop any running instance
-$procs = Get-Process -Name 'media-server' -ErrorAction SilentlyContinue
-foreach ($p in $procs) {
-    Write-Host "Stopping server (PID $($p.Id))..."
-    Stop-Process -Id $p.Id -Force -ErrorAction SilentlyContinue
-}
-if ($procs) { Start-Sleep -Seconds 2 }
+# Restart the Media Server.
+#
+# Robust against the two ways the server gets started:
+#   - Installer build:   %LOCALAPPDATA%\Media Server\media-server.bat
+#                        (runs as python.exe -m media_server.main)
+#   - Dev editable install: media-server console script on PATH
+#                        (runs as media-server.exe)
+#
+# The old version of this script only killed processes named 'media-server',
+# which silently missed the installer-bundled process (named 'python').
+# This version kills whatever currently owns the listen port, so it doesn't
+# matter how the previous instance was launched.
 
-# Merge registry PATH with current PATH so newly-installed tools are visible
-$regUser = [Environment]::GetEnvironmentVariable('PATH', 'User')
-if ($regUser) {
-    $currentDirs = $env:PATH -split ';' | ForEach-Object { $_.TrimEnd('\') }
-    foreach ($dir in ($regUser -split ';')) {
-        if ($dir -and ($currentDirs -notcontains $dir.TrimEnd('\'))) {
-            $env:PATH = "$env:PATH;$dir"
-        }
+param(
+    [ValidateSet('auto', 'dev', 'installer')]
+    [string]$Mode = 'auto',
+    [int]$Port = 8765
+)
+
+$InstallerLauncher = Join-Path $env:LOCALAPPDATA 'Media Server\media-server.bat'
+$InstallerDir = Join-Path $env:LOCALAPPDATA 'Media Server'
+
+# --- Resolve launch mode -----------------------------------------------------
+if ($Mode -eq 'auto') {
+    if (Test-Path $InstallerLauncher) {
+        $Mode = 'installer'
+    } else {
+        $Mode = 'dev'
     }
 }
 
-# Start server detached
-Write-Host "Starting server..."
-Start-Process -FilePath 'media-server' `
-    -WorkingDirectory 'c:\Users\Alexei\Documents\haos-integration-media-player\media-server' `
-    -WindowStyle Hidden
+# --- Stop whatever is listening on the port ---------------------------------
+$listenerPids = @()
+try {
+    $conns = Get-NetTCPConnection -LocalPort $Port -State Listen -ErrorAction SilentlyContinue
+    if ($conns) {
+        $listenerPids = $conns | Select-Object -ExpandProperty OwningProcess -Unique
+    }
+} catch {
+    # Get-NetTCPConnection unavailable (rare); fall back to netstat parsing
+    $listenerPids = & netstat -ano | Select-String ":$Port\s+.*LISTENING" | ForEach-Object {
+        ($_ -split '\s+')[-1]
+    } | Sort-Object -Unique
+}
+
+foreach ($targetPid in $listenerPids) {
+    $proc = Get-Process -Id $targetPid -ErrorAction SilentlyContinue
+    if ($proc) {
+        Write-Host "Stopping listener PID $($proc.Id) ($($proc.ProcessName))..."
+        Stop-Process -Id $proc.Id -Force -ErrorAction SilentlyContinue
+    }
+}
+
+# Also kill any orphan media-server.exe instances that didn't bind the port.
+$orphans = Get-Process -Name 'media-server' -ErrorAction SilentlyContinue
+foreach ($p in $orphans) {
+    Write-Host "Stopping orphan media-server PID $($p.Id)..."
+    Stop-Process -Id $p.Id -Force -ErrorAction SilentlyContinue
+}
+
+if ($listenerPids -or $orphans) {
+    # Allow the OS to release the listen socket from TIME_WAIT.
+    Start-Sleep -Seconds 3
+}
+
+# --- Start the chosen flavour ------------------------------------------------
+if ($Mode -eq 'installer') {
+    if (-not (Test-Path $InstallerLauncher)) {
+        Write-Error "Installer launcher not found: $InstallerLauncher"
+        exit 1
+    }
+    Write-Host "Starting installer build: $InstallerLauncher"
+    Start-Process -FilePath $InstallerLauncher `
+        -WorkingDirectory $InstallerDir `
+        -WindowStyle Hidden
+} else {
+    # Merge registry PATH so newly-installed dev tools are visible.
+    $regUser = [Environment]::GetEnvironmentVariable('PATH', 'User')
+    if ($regUser) {
+        $currentDirs = $env:PATH -split ';' | ForEach-Object { $_.TrimEnd('\') }
+        foreach ($dir in ($regUser -split ';')) {
+            if ($dir -and ($currentDirs -notcontains $dir.TrimEnd('\'))) {
+                $env:PATH = "$env:PATH;$dir"
+            }
+        }
+    }
+    Write-Host "Starting dev install (PATH media-server)..."
+    Start-Process -FilePath 'media-server' `
+        -WorkingDirectory 'c:\Users\Alexei\Documents\haos-integration-media-player\media-server' `
+        -WindowStyle Hidden
+}
 
 Start-Sleep -Seconds 3
 
-# Verify it's running
-$check = Get-Process -Name 'media-server' -ErrorAction SilentlyContinue
-if ($check) {
-    Write-Host "Server started (PID $($check[0].Id))"
+# --- Verify it's listening ---------------------------------------------------
+$verify = Get-NetTCPConnection -LocalPort $Port -State Listen -ErrorAction SilentlyContinue
+if ($verify) {
+    $vpid = $verify[0].OwningProcess
+    $vproc = Get-Process -Id $vpid -ErrorAction SilentlyContinue
+    Write-Host "Server listening on port $Port (PID $vpid, $($vproc.ProcessName))"
 } else {
-    Write-Host "WARNING: Server does not appear to be running!"
+    Write-Warning "Server is not listening on port $Port yet - check logs."
 }

tests/test_audio_analyzer.py

@@ -0,0 +1,152 @@
+"""Tests for AudioAnalyzer.
+
+Covers the pure-Python pieces that don't need real audio hardware:
+- Logarithmic FFT bin edge layout
+- Slow-AGC envelope follower (attack vs release behaviour)
+- Lifecycle reset of the AGC reference on start()
+
+Tests are skipped when numpy isn't installed in the host environment
+so they don't block CI on a minimal interpreter.
+"""
+
+from __future__ import annotations
+
+import pytest
+
+from media_server.services.audio_analyzer import AudioAnalyzer, _load_numpy
+
+np = _load_numpy()
+needs_numpy = pytest.mark.skipif(np is None, reason="numpy not available")
+
+
+@pytest.fixture
+def analyzer() -> AudioAnalyzer:
+    return AudioAnalyzer(num_bins=16, sample_rate=44100, chunk_size=1024)
+
+
+# ── _compute_bin_edges ────────────────────────────────────────────
+
+
+@needs_numpy
+def test_bin_edges_count_matches_num_bins_plus_one(analyzer: AudioAnalyzer) -> None:
+    edges = analyzer._compute_bin_edges()
+    assert len(edges) == analyzer.num_bins + 1
+
+
+@needs_numpy
+def test_bin_edges_are_monotonic_non_decreasing(analyzer: AudioAnalyzer) -> None:
+    edges = analyzer._compute_bin_edges()
+    assert all(edges[i] <= edges[i + 1] for i in range(len(edges) - 1))
+
+
+@needs_numpy
+def test_bin_edges_stay_within_fft_size(analyzer: AudioAnalyzer) -> None:
+    edges = analyzer._compute_bin_edges()
+    fft_size = analyzer.chunk_size // 2 + 1
+    assert max(edges) <= fft_size - 1
+    assert min(edges) >= 0
+
+
+# ── AGC envelope follower (the new behaviour) ─────────────────────
+
+
+def _step_envelope(analyzer: AudioAnalyzer, peak: float) -> float:
+    """Run one frame of the AGC update with a known peak value.
+
+    Mirrors the math inside _capture_loop without spinning up a real
+    capture thread or requiring numpy: pure Python on a single float.
+    """
+    if peak > analyzer._spectrum_ref:
+        analyzer._spectrum_ref += (peak - analyzer._spectrum_ref) * 0.05
+    else:
+        analyzer._spectrum_ref += (peak - analyzer._spectrum_ref) * 0.005
+    return analyzer._spectrum_ref
+
+
+def test_agc_initial_reference_is_quiet(analyzer: AudioAnalyzer) -> None:
+    assert analyzer._spectrum_ref == pytest.approx(0.01)
+
+
+def test_agc_attacks_quickly_toward_loud_signal(analyzer: AudioAnalyzer) -> None:
+    # Drive 30 frames of a loud signal; reference should climb sharply.
+    for _ in range(30):
+        _step_envelope(analyzer, peak=1.0)
+    # 30 frames of attack=0.05 brings (1 - 0.99^30) ≈ 0.78 of the way to 1.0.
+    assert analyzer._spectrum_ref > 0.5
+    assert analyzer._spectrum_ref < 1.0
+
+
+def test_agc_releases_slowly_toward_quiet_signal(analyzer: AudioAnalyzer) -> None:
+    analyzer._spectrum_ref = 1.0
+    for _ in range(30):
+        _step_envelope(analyzer, peak=0.0)
+    # Release coefficient is 0.005 — after 30 frames we should have shed
+    # only ~14% of the headroom, not snap back to silent.
+    assert analyzer._spectrum_ref > 0.7
+    assert analyzer._spectrum_ref < 1.0
+
+
+def test_agc_is_asymmetric_attack_faster_than_release(analyzer: AudioAnalyzer) -> None:
+    a = AudioAnalyzer()
+    b = AudioAnalyzer()
+    a._spectrum_ref = 0.5
+    b._spectrum_ref = 0.5
+    # One attack frame toward 1.0
+    _step_envelope(a, peak=1.0)
+    # One release frame toward 0.0 (same magnitude of error: 0.5)
+    _step_envelope(b, peak=0.0)
+    attack_delta = a._spectrum_ref - 0.5
+    release_delta = 0.5 - b._spectrum_ref
+    # Attack coefficient (0.05) is 10× the release coefficient (0.005).
+    assert attack_delta == pytest.approx(release_delta * 10, rel=1e-6)
+
+
+# ── start() lifecycle reset ──────────────────────────────────────
+
+
+def test_start_resets_spectrum_ref_when_unavailable(
+    monkeypatch: pytest.MonkeyPatch, analyzer: AudioAnalyzer
+) -> None:
+    """Even when start() returns False (no hardware), the AGC state
+    should remain at the documented quiet baseline."""
+    # Force unavailable so start() short-circuits without spawning a thread.
+    monkeypatch.setattr(
+        AudioAnalyzer, "available", property(lambda self: False)
+    )
+    analyzer._spectrum_ref = 0.95  # leftover from prior session
+    started = analyzer.start()
+    assert started is False
+    # start() returned early before the reset — by design (no capture
+    # means no need to renormalize). Document the contract.
+    assert analyzer._spectrum_ref == 0.95
+
+
+def test_start_resets_spectrum_ref_when_available(
+    monkeypatch: pytest.MonkeyPatch, analyzer: AudioAnalyzer
+) -> None:
+    """When capture actually starts, leftover AGC state from a prior
+    session must be cleared so the first transients don't clip."""
+    monkeypatch.setattr(
+        AudioAnalyzer, "available", property(lambda self: True)
+    )
+    # Stub out the thread so we don't actually spin up a capture loop.
+    monkeypatch.setattr(
+        "media_server.services.audio_analyzer.threading.Thread",
+        lambda *a, **kw: type("T", (), {"start": lambda self: None})(),
+    )
+    analyzer._spectrum_ref = 0.95  # leftover from prior session
+    try:
+        started = analyzer.start()
+        assert started is True
+        assert analyzer._spectrum_ref == pytest.approx(0.01)
+    finally:
+        analyzer._running = False
+
+
+# ── get_frequency_data thread-safe contract ───────────────────────
+
+
+def test_get_frequency_data_returns_none_before_capture(
+    analyzer: AudioAnalyzer,
+) -> None:
+    assert analyzer.get_frequency_data() is None