Add onboarding weather and template gradients

CHANGELOG.md

@@ -2,6 +2,37 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.10.1 - 2026-08-28
+
+### Added
+
+- Added linear gradient backgrounds to templates, including multiple colours and angle control.
+- Added a visual gradient stop editor with draggable stops, click-to-add support, and stop reordering.
+
+## 2.10.0 - 2026-08-28
+
+### Added
+
+- Added secure kiosk onboarding with QR-first and manual pairing flows.
+- Added browser-specific pairing sessions with expiring pairing codes.
+- Added circular QR presentation and a compatible QR scanner with decoder fallbacks.
+- Added responsive player onboarding and a post-pair option to connect another player.
+- Added stable player identity bindings for paired players and moved-client aliases.
+- Added per-tab client identities backed by browser session storage for commands, pairing, and screen moves.
+- Added RBAC protection for player pairing through the `pairing.allow` permission.
+- Added a dedicated web onboarding workflow for pairing and managing player setup.
+
+### Changed
+
+- Restricted direct screen URLs to the player configured for the requested screen.
+- Added pairing entry points to the dashboard and connected clients workflows.
+- Made pairing QR codes easier to scan by encoding only the short pairing code.
+- Added a mobile-friendly connected clients link after successful pairing.
+- Made connected-client controls and player pairing UI render independently according to their permissions.
+- Added player keyboard feedback for slide navigation, plus `P` pause/unpause and `B` blackout toggles.
+- Removed client identities from onboarding and screen-move URLs; authorized player data now loads after the tab identity handshake.
+- Updated connected-client commands and screen moves to resolve tab and registered-player identities reliably.
+
 ## 2.9.0 - 2026-08-28
 
 ### Added
@@ -17,6 +48,8 @@ All notable changes to this project will be documented in this file.
 - Weather placeholders now show all current fields, or all fields for the first daily/hourly entry before the remaining entries in a Show more section.
 - Weather previews, player playback, and slide thumbnails now use cached Weather data and consistent text/icon sizing.
 - API, RSS, and Weather lists now show enabled status and their forms provide action-oriented Enable/Disable controls.
+- Enable/Disable actions on API, RSS, and Weather forms now run asynchronously without reloading unsaved form changes.
+- Weather locations can now be duplicated from the weather list.
 - Startup data-source refreshes now respect each API, RSS, and weather source's configured repull interval.
 - RSS feeds now persist their last collection timestamp.
 - Refreshed the vendored AdminLTE assets to 4.8.5.
@@ -24,11 +57,6 @@ All notable changes to this project will be documented in this file.
 - Removed Digital Signage Subheading and top padding.
 - API and RSS source saves now preserve cached data without pulling; added explicit manual refresh actions.
 
-### Fixed
-
-- Prevented deletion of Weather locations that are referenced by slides, including locations nested in saved slide content.
-- Preserved Weather Bootstrap Icon classes through player rich-text sanitization so Weather icons render during playback.
-
 ## 2.8.7 - 2026-08-22
 
 ### Added

build/package.player.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage-player",
-  "version": "2.9.0",
+  "version": "2.10.1",
   "private": false,
   "description": "Pulse Signage player application bundle",
   "engines": {

build/package.web.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage-web",
-  "version": "2.9.0",
+  "version": "2.10.1",
   "private": false,
   "description": "Pulse Signage web and bridge application bundle",
   "engines": {
@@ -20,6 +20,7 @@
     "mysql2": "^3.23.3",
     "puppeteer-core": "^25.7.0",
     "sharp": "^0.35.3",
+    "jsqr": "^1.4.0",
     "ws": "^8.21.3"
   }
 }

docker-compose/.env.example

@@ -15,6 +15,7 @@ MYSQL_ROOT_PASSWORD="root_password"
 PLAYER_IDENTIFIER="player-local"
 PLAYER_PUBLIC_URL="http://localhost:8081"
 PLAYER_INTERNAL_URL="http://player:8081"
+WEB_PUBLIC_URL="http://localhost:8080"
 
 # Web app bootstrap settings
 DEFAULT_ADMIN_USERNAME="admin"

docker-compose/docker-compose.yml

@@ -15,6 +15,7 @@ services:
       DB_USER: ${DB_USER:-pulse-signage}
       DB_PASSWORD: ${DB_PASSWORD:-signage_password}
       PULSE_SIGNAGE_SHARED_SECRET: ${PULSE_SIGNAGE_SHARED_SECRET:-}
+      WEB_PUBLIC_URL: ${WEB_PUBLIC_URL:-http://localhost:8080}
       BRIDGE_INTERNAL_URL: ${BRIDGE_INTERNAL_URL:-http://player-bridge:8090}
       DEFAULT_ADMIN_USERNAME: ${DEFAULT_ADMIN_USERNAME:-admin}
       DEFAULT_ADMIN_NAME: ${DEFAULT_ADMIN_NAME:-Admin}
@@ -38,6 +39,7 @@ services:
       PLAYER_INTERNAL_URL: ${PLAYER_INTERNAL_URL:-http://player:8081}
       PLAYER_IDENTIFIER: ${PLAYER_IDENTIFIER:-player-local}
       PULSE_SIGNAGE_SHARED_SECRET: ${PULSE_SIGNAGE_SHARED_SECRET:-}
+      WEB_PUBLIC_URL: ${WEB_PUBLIC_URL:-http://localhost:8080}
       DB_HOST: ${DB_HOST:-mysql}
       DB_PORT: ${DB_PORT:-3306}
       DB_NAME: ${DB_NAME:-pulse-signage}
@@ -59,6 +61,7 @@ services:
       - "8090:8090"
     environment:
       WEB_INTERNAL_URL: ${WEB_INTERNAL_URL:-http://web:8080}
+      WEB_PUBLIC_URL: ${WEB_PUBLIC_URL:-http://localhost:8080}
       PULSE_SIGNAGE_SHARED_SECRET: ${PULSE_SIGNAGE_SHARED_SECRET:-}
       DB_HOST: ${DB_HOST:-mysql}
       DB_PORT: ${DB_PORT:-3306}

docs/api.md

@@ -6,7 +6,7 @@ Player service base URL: `http://localhost:8081`
 
 This document covers the player HTTP surface only. The admin dashboard exposes its own routes for screen commands and onboarding management.
 
-Access note: most player endpoints are unauthenticated because they are meant to run inside a trusted deployment network. Anything that mutates state or writes files should be treated as internal-only unless you add your own auth layer in front of it.
+Access note: most player endpoints are unauthenticated because they are meant to run inside a trusted deployment network. Anything that mutates state or writes files should be treated as internal-only unless you add your own auth layer in front of it. Pairing uses a short-lived random PIN displayed by the kiosk; the PIN is accepted only through the authenticated Web UI pairing flow.
 
 When `PULSE_SIGNAGE_SHARED_SECRET` is set, the player pages sign same-origin API fetches with `x-pulse-page-auth`, and the web app signs server-to-player requests with `x-pulse-request-timestamp` plus `x-pulse-request-signature`. Page tokens auto-renew before expiry while the page stays active, and signed server requests are only accepted when their timestamp is fresh. If the secret is unset, those checks stay disabled for compatibility.
 
@@ -17,12 +17,12 @@ Returns the player onboarding landing page.
 Access: public within the trusted player deployment.
 
 ### `GET /onboard`
-Returns the onboarding form page.
+Redirects to the authenticated Web UI pairing page for compatibility with older QR codes.
-Access: public within the trusted player deployment.
+Access: the Web UI pairing page requires a logged-in Web UI session.
 
 ### `GET /screen/{slug}`
 Returns the rendered player page for a screen.
-Access: public within the trusted player deployment.
+Access: the configured player may load only its persisted paired screen. An unpaired player is redirected to `/`; a different screen slug is rejected. The route is public within the trusted player deployment, but it no longer changes the player's binding.
 
 ### `GET /api/onboarding/status`
 Returns the persisted onboarding status for a device.
@@ -56,7 +56,7 @@ Response fields:
 
 ### `POST /api/onboarding`
 Binds a device to a screen and client name.
-Access: internal-only. Protect this endpoint if the player service is reachable outside your trusted network.
+Access: internal-only. Browser submissions must go through the authenticated Web UI pairing page. The Web UI resolves the short-lived kiosk PIN to a device ID before forwarding the signed request. Protect this endpoint if the player service is reachable outside your trusted network.
 
 Accepted request fields:
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pulse-signage",
-  "version": "2.9.0",
+  "version": "2.10.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-signage",
-      "version": "2.9.0",
+      "version": "2.10.1",
       "dependencies": {
         "@sparticuz/chromium": "^149.0.0",
         "animate.css": "^4.1.1",
@@ -16,6 +16,7 @@
         "express": "^5.2.1",
         "handlebars": "^4.7.8",
         "hls.js": "^1.7.0",
+        "jsqr": "^1.4.0",
         "multer": "^2.2.0",
         "mysql2": "^3.23.3",
         "puppeteer-core": "^25.7.0",
@@ -24,6 +25,9 @@
       },
       "devDependencies": {
         "nodemon": "^3.1.10"
+      },
+      "engines": {
+        "node": ">=26.0.0"
       }
     },
     "node_modules/@emnapi/runtime": {
@@ -1794,6 +1798,12 @@
       "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==",
       "license": "MIT"
     },
+    "node_modules/jsqr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
+      "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==",
+      "license": "Apache-2.0"
+    },
     "node_modules/long": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage",
-  "version": "2.9.0",
+  "version": "2.10.1",
   "private": false,
   "description": "Pulse Signage application with MySQL and media storage",
   "engines": {
@@ -28,6 +28,7 @@
     "express": "^5.2.1",
     "handlebars": "^4.7.8",
     "hls.js": "^1.7.0",
+    "jsqr": "^1.4.0",
     "multer": "^2.2.0",
     "mysql2": "^3.23.3",
     "puppeteer-core": "^25.7.0",

scripts/pulse-signage-kiosk.bat

@@ -53,9 +53,12 @@ if not defined BROWSER_PATH (
   exit /b 1
 )
 
+set "KIOSK_PROFILE=%LocalAppData%\PulseSignage\kiosk-browser-profile"
+if not exist "!KIOSK_PROFILE!" mkdir "!KIOSK_PROFILE!"
+
 echo Launching !BROWSER_KIND! in kiosk mode: !TARGET_URL!
 if /I "!BROWSER_KIND!"=="firefox" (
-  start "" "!BROWSER_PATH!" -kiosk "!TARGET_URL!"
+  start "" "!BROWSER_PATH!" -no-remote -profile "!KIOSK_PROFILE!" -new-window -kiosk "!TARGET_URL!"
 ) else (
-  start "" "!BROWSER_PATH!" --disable-notifications --kiosk "!TARGET_URL!"
+  start "" "!BROWSER_PATH!" --disable-notifications --no-first-run --no-default-browser-check --new-window --kiosk --user-data-dir="!KIOSK_PROFILE!" "!TARGET_URL!"
 )

scripts/pulse-signage-kiosk.sh

@@ -35,13 +35,16 @@ else
   exit 1
 fi
 
+kiosk_profile="${XDG_DATA_HOME:-$HOME/.local/share}/pulse-signage/kiosk-browser-profile"
+mkdir -p "$kiosk_profile"
+
 echo "Launching ${browser_kind} in kiosk mode: ${target_url}"
 
 case "$browser_kind" in
   firefox)
-    exec "$browser" -kiosk "$target_url"
+    exec "$browser" -no-remote -profile "$kiosk_profile" -new-window -kiosk "$target_url"
     ;;
   edge|chrome)
-    exec "$browser" --disable-notifications --kiosk "$target_url"
+    exec "$browser" --disable-notifications --no-first-run --no-default-browser-check --new-window --kiosk --user-data-dir="$kiosk_profile" "$target_url"
     ;;
 esac

src/data/admin.js

@@ -6,7 +6,7 @@ async function fetchAdminData(pool) {
   const [playlists] = await pool.query('SELECT id, name, fade_between_slides, skip_unavailable_rtmp, created_at, modified_at, created_by, modified_by FROM c_playlists ORDER BY id DESC');
   const [canvasSizes] = await pool.query('SELECT id, name, width, height, created_at, modified_at, created_by, modified_by FROM c_canvas_sizes ORDER BY width ASC, height ASC, name ASC');
   const [templates] = await pool.query(`
-    SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
+    SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.background_gradient, st.created_at, st.modified_at,
            cs.name AS canvas_size_name, cs.width AS canvas_size_width, cs.height AS canvas_size_height
     FROM c_templates st
     LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
@@ -112,7 +112,7 @@ async function fetchSlidesPage(pool, page, pageSize, searchTerm, sortKey, sortDi
 
 async function fetchTemplatesPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
-    selectSql: `SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
+    selectSql: `SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.background_gradient, st.created_at, st.modified_at,
            cs.name AS canvas_size_name, cs.width AS canvas_size_width, cs.height AS canvas_size_height,
         (SELECT COUNT(*) FROM c_template_regions str WHERE str.template_id = st.id) AS region_count,
            (SELECT COUNT(*) FROM c_slides s WHERE s.template_id = st.id) AS slide_count

src/data/templates.js

@@ -14,6 +14,39 @@ function sanitizeBackgroundColor(value) {
   return '#111111';
 }
 
+function normalizeBackgroundGradient(value) {
+  let gradient = value;
+  if (typeof gradient === 'string') {
+    try {
+      gradient = JSON.parse(gradient);
+    } catch (_error) {
+      gradient = null;
+    }
+  }
+  if (!gradient || typeof gradient !== 'object' || Array.isArray(gradient)) {
+    return null;
+  }
+  const sourceStops = Array.isArray(gradient.stops) && gradient.stops.length
+    ? gradient.stops
+    : (Array.isArray(gradient.colors) ? gradient.colors.map((color, index, colors) => ({
+      color,
+      position: colors.length > 1 ? Math.round((index / (colors.length - 1)) * 100) : 0
+    })) : []);
+  const stops = sourceStops.slice(0, 12).map((stop) => ({
+    color: sanitizeBackgroundColor(stop && stop.color),
+    position: Math.max(0, Math.min(100, Number.isFinite(Number(stop && stop.position)) ? Number(stop.position) : 0))
+  }));
+  if (stops.length < 2) {
+    return null;
+  }
+  const angle = Number(gradient.angle);
+  return JSON.stringify({
+    type: 'linear',
+    stops,
+    angle: Number.isFinite(angle) ? Math.max(0, Math.min(360, angle)) : 90
+  });
+}
+
 function normalizeTemplateRegionType(value) {
   const rawType = String(value || 'text').trim();
   return rawType || 'text';
@@ -106,7 +139,7 @@ function ensureUniqueTemplateRegionNames(regions) {
 
 async function fetchTemplateById(pool, id) {
   const [templates] = await pool.query(`
-    SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
+    SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.background_gradient, st.created_at, st.modified_at,
            cs.name AS canvas_size_name, cs.width AS canvas_size_width, cs.height AS canvas_size_height
     FROM c_templates st
     LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
@@ -123,7 +156,7 @@ async function fetchTemplateById(pool, id) {
 
 async function fetchTemplatesData(pool) {
   const [templates] = await pool.query(`
-    SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
+    SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.background_gradient, st.created_at, st.modified_at,
            cs.name AS canvas_size_name, cs.width AS canvas_size_width, cs.height AS canvas_size_height
     FROM c_templates st
     LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
@@ -212,6 +245,10 @@ async function buildTemplatePayload(pool, req, existingTemplate) {
   const backgroundImage = filesByField.background_image;
   const removeBackgroundImage = Boolean(req.body.remove_background_image);
   const backgroundColor = sanitizeBackgroundColor(req.body.background_color || (existingTemplate && existingTemplate.background_color));
+  const submittedBackgroundGradient = Object.prototype.hasOwnProperty.call(req.body, 'background_gradient')
+    ? req.body.background_gradient
+    : existingTemplate && existingTemplate.background_gradient;
+  const backgroundGradient = normalizeBackgroundGradient(submittedBackgroundGradient);
   const backgroundImagePath = backgroundImage
     ? `/media/uploads/${backgroundImage.filename}`
     : removeBackgroundImage
@@ -256,6 +293,7 @@ async function buildTemplatePayload(pool, req, existingTemplate) {
     canvasSizeHeight: canvasHeight,
     backgroundImagePath,
     backgroundColor,
+    backgroundGradient,
     regions
   };
 }
@@ -265,5 +303,6 @@ module.exports = {
   fetchTemplatesData,
   extractTemplateRegions,
   buildTemplatePayload,
+  normalizeBackgroundGradient,
   parseJsonSafe
 };

src/data/weather.js

@@ -89,7 +89,7 @@ async function fetchWeatherLocationForecast(pool, location) {
     if (!apiKey) throw new Error('Pirate Weather API key is not configured.');
     url = 'https://api.pirateweather.net/forecast/' + encodeURIComponent(apiKey) + '/' + latitude + ',' + longitude + '?units=' + (temperatureUnit === 'fahrenheit' ? 'us' : 'si');
   } else {
-    const params = new URLSearchParams({ latitude: String(latitude), longitude: String(longitude), timezone: String(source.timezone || 'auto'), forecast_days: '7', current: 'temperature_2m,relative_humidity_2m,apparent_temperature,is_day,precipitation,rain,weather_code,wind_speed_10m,wind_direction_10m,uv_index,cloud_cover', hourly: 'temperature_2m,precipitation_probability,precipitation,weather_code,wind_speed_10m,uv_index,cloud_cover', daily: 'weather_code,temperature_2m_max,temperature_2m_min,sunrise,sunset,precipitation_probability_max,precipitation_sum,wind_speed_10m_max,uv_index_max,cloud_cover_mean', temperature_unit: temperatureUnit, wind_speed_unit: windUnit, precipitation_unit: precipitationUnit });
+    const params = new URLSearchParams({ latitude: String(latitude), longitude: String(longitude), timezone: String(source.timezone || 'auto'), forecast_days: '7', forecast_hours: '24', current: 'temperature_2m,relative_humidity_2m,apparent_temperature,is_day,precipitation,rain,weather_code,wind_speed_10m,wind_direction_10m,uv_index,cloud_cover', hourly: 'temperature_2m,precipitation_probability,precipitation,weather_code,wind_speed_10m,uv_index,cloud_cover', daily: 'weather_code,temperature_2m_max,temperature_2m_min,sunrise,sunset,precipitation_probability_max,precipitation_sum,wind_speed_10m_max,uv_index_max,cloud_cover_mean', temperature_unit: temperatureUnit, wind_speed_unit: windUnit, precipitation_unit: precipitationUnit });
     const apiKey = String(settings['weather.open_meteo_api_key'] || '').trim();
     if (apiKey) params.set('apikey', apiKey);
     url = 'https://api.open-meteo.com/v1/forecast?' + params.toString();

src/db/common.js

@@ -17,7 +17,8 @@ function createPool() {
 async function pruneStaleOnboardingDevices(pool) {
   await pool.query(
     `DELETE FROM d_onboarding_devices
-     WHERE modified_at < (CURRENT_TIMESTAMP - INTERVAL 1 MINUTE)`
+     WHERE screen_id IS NULL
+       AND modified_at < (CURRENT_TIMESTAMP - INTERVAL 1 MINUTE)`
   );
 }
 

src/db/index.js

@@ -57,6 +57,7 @@ async function ensureSchema(pool, options) {
       canvas_size_id INT NULL,
       background_image_path VARCHAR(512) NULL,
       background_color VARCHAR(32) NULL,
+      background_gradient LONGTEXT NULL,
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

src/db/migrations.js

@@ -541,10 +541,17 @@ const VERSIONED_MIGRATIONS = [
     version: '2.8.9',
     label: 'v2.8.9 data source enablement schema',
     run: async function (pool) {
-      await ensureColumn(pool, 'i_api_sources', 'enabled', 'TINYINT(1) NOT NULL DEFAULT 1', 'items_path');
+      await ensureColumn(pool, 'i_api_sources', 'enabled', 'TINYINT(1) NOT NULL DEFAULT 1', 'api_url');
       await ensureColumn(pool, 'i_rss_feeds', 'enabled', 'TINYINT(1) NOT NULL DEFAULT 1', 'feed_url');
       await ensureColumn(pool, 'i_weather_locations', 'enabled', 'TINYINT(1) NOT NULL DEFAULT 1', 'precipitation_unit');
     }
+  },
+  {
+    version: '2.10.1',
+    label: 'v2.10.1 template background gradient schema',
+    run: async function (pool) {
+      await ensureColumn(pool, 'c_templates', 'background_gradient', 'LONGTEXT NULL', 'background_color');
+    }
   }
 ];
 

src/player-bridge/index.js

@@ -13,6 +13,7 @@ const { commitDeviceBinding, bindPlayerToScreen, getOnboardingStatus, getPlayerP
 const { createStyledQrCodeSvg } = require('../data/qr-code');
 const { verifyPageAuthToken } = require('#src/request-auth');
 
+
 function createThinClientConfig() {
   return {
     port: Number(process.env.THIN_CLIENT_PORT || 8090),
@@ -354,6 +355,27 @@ async function start() {
     return socket && socket.playerDeviceId ? String(socket.playerDeviceId).trim() : '';
   }
 
+  function findPlayerByPairingCode(pairingCode) {
+    const normalizedCode = String(pairingCode || '').trim().toUpperCase();
+    if (!normalizedCode) {
+      return null;
+    }
+    for (const [deviceId, socket] of playerSockets.entries()) {
+      const pairingCodes = socket && Array.isArray(socket.pairingSessions)
+        ? socket.pairingSessions.map(function (entry) { return entry.code; })
+        : (socket && Array.isArray(socket.pairingCodes) ? socket.pairingCodes : [socket && socket.pairingCode]);
+      if (socket && pairingCodes.some(function (code) {
+        return String(code || '').trim().toUpperCase() === normalizedCode;
+      })) {
+        const session = socket.pairingSessions && socket.pairingSessions.find(function (entry) {
+          return String(entry.code || '').trim().toUpperCase() === normalizedCode;
+        });
+        return { deviceId: deviceId, socket: socket, clientId: session && session.clientId ? session.clientId : null, code: normalizedCode };
+      }
+    }
+    return null;
+  }
+
   function removeConnectedPlayerSocket(socket) {
     if (!socket || !socket.playerDeviceId) {
       return false;
@@ -514,6 +536,21 @@ async function start() {
     };
   }
 
+  function requireOnboardingAuth(req, res, next) {
+    const token = String(req.headers['x-pulse-page-auth'] || '').trim();
+    const payload = verifyPageAuthToken(token);
+    if (payload && ['onboarding', 'player'].indexOf(String(payload.scope || '').trim()) !== -1) {
+      req.playerPageAuth = payload;
+      return next();
+    }
+
+    if (verifyRequestAuth(req)) {
+      return next();
+    }
+
+    return res.status(401).json({ error: 'Onboarding authentication required.' });
+  }
+
   app.get('/api/media/config', requireRequestAuth, function (_req, res) {
     res.json({
       mediaDir: config.mediaDir,
@@ -630,12 +667,45 @@ async function start() {
     }
   });
 
+  app.post('/api/screens/:slug/announcements/refresh', requireRequestAuth, function (req, res) {
+    const slug = String(req.params.slug || '').trim();
+    if (!slug) {
+      return res.status(400).json({ error: 'Screen slug is required.' });
+    }
+
+    const targetPlayers = Array.from(playerSockets.values()).filter(function (socket) {
+      return socket && socket.readyState === WebSocket.OPEN;
+    }).map(function (socket) {
+      return { socket: socket };
+    });
+    let sent = 0;
+    targetPlayers.forEach(function (target) {
+      if (!target || !target.socket || target.socket.readyState !== WebSocket.OPEN) {
+        return;
+      }
+
+      try {
+        target.socket.send(JSON.stringify({
+          type: 'command',
+          command: 'announcement-refresh',
+          screenSlug: slug,
+          sentAt: new Date().toISOString()
+        }));
+        sent += 1;
+      } catch (_error) {
+      }
+    });
+
+    return res.json({ ok: true, screenSlug: slug, sent: sent });
+  });
+
   app.get('/api/onboarding/status', async function (req, res, next) {
     try {
-      const deviceId = normalizeDeviceId(req.query.deviceId) || getConnectedPlayerDeviceId();
+      const requestedDeviceId = normalizeDeviceId(req.query.deviceId);
+      const deviceId = requestedDeviceId;
       const status = await getOnboardingStatus(pool, deviceId);
       res.json({
-        deviceId: normalizeDeviceId(deviceId),
+        deviceId: requestedDeviceId,
         onboarded: Boolean(status && status.screen_id),
         clientName: status ? status.client_name : null,
         screenId: status ? status.screen_id : null,
@@ -648,6 +718,58 @@ async function start() {
     }
   });
 
+  app.get('/api/onboarding/resolve', requireRequestAuth, function (req, res) {
+    const pairing = findPlayerByPairingCode(req.query.pairingCode);
+    if (!pairing) {
+      return res.status(401).json({ error: 'A valid kiosk pairing code is required.' });
+    }
+    res.json({
+      deviceId: pairing.deviceId,
+      clientId: pairing.clientId || null,
+    });
+  });
+
+  app.get('/api/onboarding/url', requireRequestAuth, function (req, res) {
+    const pairing = findPlayerByPairingCode(req.query.pairingCode);
+    if (!pairing) {
+      return res.status(401).json({ error: 'A valid kiosk pairing code is required.' });
+    }
+    const webBaseUrl = String(process.env.WEB_PUBLIC_URL || '').trim().replace(/\/$/, '');
+    if (!webBaseUrl) {
+      return res.status(503).json({ error: 'WEB_PUBLIC_URL is not configured on the bridge.' });
+    }
+    res.json({ url: `${webBaseUrl}/pairing?code=${encodeURIComponent(pairing.code)}` });
+  });
+
+  app.get('/api/onboarding/qr', requireRequestAuth, async function (req, res, next) {
+    try {
+      const pairing = findPlayerByPairingCode(req.query.pairingCode);
+      if (!pairing) {
+        return res.status(401).json({ error: 'A valid kiosk pairing code is required.' });
+      }
+      const webBaseUrl = String(process.env.WEB_PUBLIC_URL || '').trim().replace(/\/$/, '');
+      if (!webBaseUrl) {
+        return res.status(503).json({ error: 'WEB_PUBLIC_URL is not configured on the bridge.' });
+      }
+      const svg = await createStyledQrCodeSvg({
+        value: `${webBaseUrl}/pairing?code=${encodeURIComponent(pairing.code)}`,
+        qr_margin: 20,
+        qr_dots_type: 'dots',
+        qr_dots_color: '#f4f8f5',
+        qr_corners_square_type: 'dot',
+        qr_corners_square_color: '#f4f8f5',
+        qr_corners_dot_type: 'dot',
+        qr_corners_dot_color: '#f0bd70',
+        qr_background_transparent: true
+      });
+      res.set('Content-Type', 'image/svg+xml; charset=utf-8');
+      res.set('Cache-Control', 'no-store');
+      res.send(svg);
+    } catch (error) {
+      next(error);
+    }
+  });
+
   app.get('/api/onboarding/screens', requirePageAuth(['onboarding', 'player']), async function (_req, res, next) {
     try {
       const [rows] = await pool.query('SELECT id, name, slug FROM d_screens ORDER BY name ASC, id ASC');
@@ -657,25 +779,18 @@ async function start() {
     }
   });
 
-  app.get('/api/onboarding/qr', async function (req, res, next) {
+  app.post('/api/onboarding', express.json(), requireOnboardingAuth, async function (req, res, next) {
     try {
-      const deviceId = normalizeDeviceId(req.query.deviceId) || getConnectedPlayerDeviceId();
+      const pairingCode = String(req.body && req.body.pairingCode || '').trim().toUpperCase();
-      if (!deviceId) {
+      const pairing = findPlayerByPairingCode(pairingCode);
-        return res.status(400).json({ error: 'Device ID is required' });
+      const clientId = normalizeDeviceId(req.body && req.body.clientId);
+      if (!pairing) {
+        return res.status(401).json({ error: 'A valid kiosk pairing code is required.' });
       }
-      const onboardingUrl = `${getPlayerPublicBaseUrl(req)}/onboard?deviceId=${encodeURIComponent(deviceId)}`;
+      if (!clientId) {
-      const svg = await createStyledQrCodeSvg({ value: onboardingUrl, qr_margin: 20 });
+        return res.status(400).json({ error: 'Client ID is required.' });
-      res.set('Content-Type', 'image/svg+xml; charset=utf-8');
+      }
-      res.set('Cache-Control', 'no-store');
+      const deviceId = pairing.deviceId;
-      res.send(svg);
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  app.post('/api/onboarding', requirePageAuth(['onboarding', 'player']), express.json(), async function (req, res, next) {
-    try {
-      const deviceId = normalizeDeviceId(req.body && req.body.deviceId) || getConnectedPlayerDeviceId();
       const clientName = String((req.body && req.body.clientName) || '').trim();
       const screenSlug = String((req.body && req.body.screenSlug) || '').trim();
       if (!deviceId) {
@@ -688,8 +803,13 @@ async function start() {
         return res.status(400).json({ error: 'Screen is required' });
       }
 
-      const status = await commitDeviceBinding(pool, deviceId, clientName, screenSlug, null, []);
+      const status = await commitDeviceBinding(pool, clientId, clientName, screenSlug, null, []);
       await bindPlayerToScreen(pool, deviceId, screenSlug);
+      await sendPlayerCommandToSocket(pairing.socket, {
+        command: 'redirect',
+        url: `${String(pairing.socket.publicBaseUrl || getPlayerPublicBaseUrl(req)).replace(/\/$/, '')}/screen/${encodeURIComponent(screenSlug)}`,
+        clientId: clientId
+      });
       res.json({
         deviceId: deviceId,
         clientName: status ? status.client_name : clientName,
@@ -709,6 +829,11 @@ async function start() {
 
   app.get('/api/screens/:slug/playlist', requirePageAuth(['player']), async function (req, res, next) {
     try {
+      const clientId = String(req.headers['x-pulse-client-id'] || '').trim();
+      const status = await getOnboardingStatus(pool, clientId);
+      if (!clientId || !status || String(status.screen_slug || '').trim() !== String(req.params.slug || '').trim()) {
+        return res.status(403).json({ error: 'This browser tab is not authorized for this screen.' });
+      }
       res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
       const data = await playerPlaylistService.buildScreenPlaylist(req.params.slug);
       if (!data.screen) {
@@ -729,6 +854,11 @@ async function start() {
 
   app.get('/api/screens/:slug/announcement', requirePageAuth(['player']), async function (req, res, next) {
     try {
+      const clientId = String(req.headers['x-pulse-client-id'] || '').trim();
+      const status = await getOnboardingStatus(pool, clientId);
+      if (!clientId || !status || String(status.screen_slug || '').trim() !== String(req.params.slug || '').trim()) {
+        return res.status(403).json({ error: 'This browser tab is not authorized for this screen.' });
+      }
       res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
       const announcement = typeof common.fetchActiveAnnouncement === 'function'
         ? await common.fetchActiveAnnouncement(pool, req.params.slug)
@@ -841,6 +971,17 @@ async function start() {
     }
 
     socket.playerDeviceId = deviceId;
+    socket.pairingSessions = Array.isArray(payload.pairingSessions) ? payload.pairingSessions.map(function (entry) {
+      return {
+        deviceId: normalizeDeviceId(entry && entry.deviceId),
+        clientId: normalizeDeviceId(entry && entry.clientId),
+        code: String(entry && entry.code || '').trim().toUpperCase()
+      };
+    }).filter(function (entry) { return entry.deviceId && entry.code; }) : [];
+    socket.pairingCodes = Array.from(new Set((Array.isArray(payload.pairingCodes) ? payload.pairingCodes : [payload.pairingCode]).map(function (value) {
+      return String(value || '').trim().toUpperCase();
+    }).filter(Boolean)));
+    socket.pairingCode = socket.pairingCodes[0] || '';
 
     if (messageType === 'snapshot') {
       const slug = String(payload.slug || '').trim();
@@ -853,19 +994,28 @@ async function start() {
     }
 
     if (messageType === 'register') {
+      socket.publicBaseUrl = String(payload.publicBaseUrl || '').trim().replace(/\/$/, '');
       const player = await upsertPlayerRegistration(pool, {
         deviceId: deviceId,
         publicBaseUrl: payload.publicBaseUrl,
         internalBaseUrl: payload.internalBaseUrl
       });
 
+      const previousSocket = playerSockets.get(deviceId);
       playerSockets.set(deviceId, socket);
+      if (previousSocket && previousSocket !== socket && previousSocket.readyState !== WebSocket.CLOSED) {
+        try {
+          previousSocket.close(1000, 'Replaced by a newer player connection.');
+        } catch (_error) {
+        }
+      }
       logBridge(`Player ${formatPlayerConnectionLabel(deviceId)} has connected`);
       socket.send(JSON.stringify({ type: 'registered', ok: true, player: player }));
       return;
     }
 
     if (messageType === 'heartbeat') {
+      socket.publicBaseUrl = String(payload.publicBaseUrl || socket.publicBaseUrl || '').trim().replace(/\/$/, '');
       const player = await recordPlayerHeartbeat(pool, {
         deviceId: deviceId,
         publicBaseUrl: payload.publicBaseUrl,
@@ -928,15 +1078,15 @@ async function start() {
     });
 
     socket.on('close', function () {
-      clearPlayerSnapshotSources(socket.playerDeviceId);
       if (removeConnectedPlayerSocket(socket)) {
+        clearPlayerSnapshotSources(socket.playerDeviceId);
         logPlayerDisconnect(socket);
       }
     });
 
     socket.on('error', function () {
-      clearPlayerSnapshotSources(socket.playerDeviceId);
       if (removeConnectedPlayerSocket(socket)) {
+        clearPlayerSnapshotSources(socket.playerDeviceId);
         logPlayerDisconnect(socket);
       }
     });

src/player.js

@@ -37,6 +37,9 @@ async function start() {
   let lastDisconnectAt = 0;
   let playerPublicBaseUrl = PLAYER_PUBLIC_URL || null;
   let refreshThinClientRegistration = null;
+  let activePairingCode = '';
+  let activePairingCodes = [];
+  let activePairingSessions = [];
   const playerRuntime = createPlayerRuntime({
     pool: pool,
     normalizeDeviceId: normalizeDeviceId,
@@ -262,7 +265,7 @@ async function start() {
           }
           response.ok = true;
         }
-      } else if (['refresh', 'reload', 'redirect', 'pause', 'blackout', 'previous', 'next', 'setclientname'].indexOf(command) !== -1) {
+      } else if (['refresh', 'reload', 'redirect', 'pause', 'blackout', 'previous', 'next', 'setclientname', 'announcement-refresh'].indexOf(command) !== -1) {
         const screenSlug = String(payload.screenSlug || payload.slug || '').trim();
         if (!screenSlug) {
           response.error = 'Screen slug is required.';
@@ -305,7 +308,17 @@ async function start() {
     playerPublicBaseUrl: getPlayerPublicBaseUrl(),
     playerInternalBaseUrl: PLAYER_INTERNAL_URL,
     bridgeBaseUrl: BRIDGE_PUBLIC_URL,
-    playerDeviceId: PLAYER_DEVICE_ID
+    playerDeviceId: PLAYER_DEVICE_ID,
+    onPairingCode: function (code, codes) {
+      activePairingCode = String(code || '').trim().toUpperCase();
+      activePairingSessions = Array.isArray(codes) ? codes.map(function (entry) {
+        return { deviceId: String(entry && entry.deviceId || '').trim(), clientId: String(entry && entry.clientId || '').trim(), code: String(entry && entry.code || '').trim().toUpperCase() };
+      }).filter(function (entry) { return entry.deviceId && entry.code; }) : [];
+      activePairingCodes = activePairingSessions.map(function (entry) { return entry.code; });
+      if (typeof refreshThinClientRegistration === 'function') {
+        refreshThinClientRegistration();
+      }
+    }
   });
   registerPlayerRoutes(app, {
     pool: pool,
@@ -375,7 +388,10 @@ async function start() {
           type: 'heartbeat',
           deviceId: PLAYER_DEVICE_ID,
           publicBaseUrl: getPlayerPublicBaseUrl(),
-          internalBaseUrl: PLAYER_INTERNAL_URL
+          internalBaseUrl: PLAYER_INTERNAL_URL,
+          pairingCode: activePairingCode,
+          pairingCodes: activePairingCodes,
+          pairingSessions: activePairingSessions
         }));
       }
 
@@ -439,7 +455,10 @@ async function start() {
           type: 'register',
           deviceId: PLAYER_DEVICE_ID,
           publicBaseUrl: getPlayerPublicBaseUrl(),
-          internalBaseUrl: PLAYER_INTERNAL_URL
+          internalBaseUrl: PLAYER_INTERNAL_URL,
+          pairingCode: activePairingCode,
+          pairingCodes: activePairingCodes,
+          pairingSessions: activePairingSessions
         }));
 
         playerRuntime.snapshotSlugs().forEach(function (slug) {

src/player/onboarding/index.js

@@ -1,20 +1,44 @@
 // Player onboarding routes and signup flow helpers.
 
 const express = require('express');
+const crypto = require('crypto');
 const { isClientNameAvailable, withClientNameReservation } = require('#src/data/client-name-check');
 const { createStyledQrCodeSvg } = require('#src/data/qr-code');
-const { getSharedSecret, verifyPageAuthToken, createRequestAuthHeaders } = require('#src/request-auth');
+const { getSharedSecret, verifyPageAuthToken, verifyRequestAuth, createRequestAuthHeaders } = require('#src/request-auth');
 const { resolvePlayerRegistration, upsertPlayerRegistration: upsertPlayerRegistrationRecord } = require('#src/data/player-registry');
 const { isTransientDbError } = require('./store');
 
 const ONBOARDING_SIGNUP_LIMIT_WINDOW_MS = 5 * 60 * 1000;
 const ONBOARDING_SIGNUP_LIMIT_MAX_ATTEMPTS = 8;
+const PAIRING_CODE_LENGTH = 6;
+const PAIRING_CODE_TTL_MS = 15 * 60 * 1000;
+const PAIRING_CODE_ALPHABET = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
 const onboardingSignupAttempts = new Map();
 
 function normalizeDeviceId(value) {
   return String(value || '').trim().replace(/[^a-zA-Z0-9_-]/g, '').slice(0, 128);
 }
 
+function createPairingCode() {
+  const bytes = crypto.randomBytes(PAIRING_CODE_LENGTH);
+  let code = '';
+  for (let index = 0; index < PAIRING_CODE_LENGTH; index += 1) {
+    code += PAIRING_CODE_ALPHABET[bytes[index] % PAIRING_CODE_ALPHABET.length];
+  }
+  return code;
+}
+
+function createPairingSession(deviceId, clientId) {
+  return { deviceId: normalizeDeviceId(deviceId), clientId: normalizeDeviceId(clientId), code: createPairingCode(), expiresAt: Date.now() + PAIRING_CODE_TTL_MS };
+}
+
+function isValidOnboardingPairingCode(pairingSession, pairingCode, now) {
+  const suppliedCode = Buffer.from(String(pairingCode || '').trim().toUpperCase());
+  const expectedCode = Buffer.from(String(pairingSession && pairingSession.code || '').trim());
+  const currentTime = Number(now || Date.now());
+  return Boolean(pairingSession && pairingSession.deviceId && pairingSession.expiresAt > currentTime && suppliedCode.length === expectedCode.length && suppliedCode.length > 0 && crypto.timingSafeEqual(suppliedCode, expectedCode));
+}
+
 function getPublicBaseUrl(req, configuredUrl) {
   const forwardedProto = String(req.headers['x-forwarded-proto'] || '').trim().split(',')[0];
   const protocol = forwardedProto || (req.socket && req.socket.encrypted ? 'https' : 'http');
@@ -120,7 +144,7 @@ async function commitDeviceBinding(pool, deviceId, clientName, screenSlug, isNam
     }
     const screen = screenRows[0];
 
-    const available = await isClientNameAvailable(pool, normalizedClientName, normalizedDeviceId, liveConnections);
+    const available = await isClientNameAvailable(pool, normalizedClientName, null, liveConnections);
     if (!available) {
       const error = new Error('Client name already exists.');
       error.statusCode = 400;
@@ -217,6 +241,38 @@ function registerPlayerOnboardingRoutes(app, options) {
   const playerPublicUrl = String(options && options.playerPublicBaseUrl || process.env.PLAYER_PUBLIC_URL || process.env.PLAYER_BASE_URL || '').trim().replace(/\/$/, '');
   const bridgeBaseUrl = String(options && options.bridgeBaseUrl || process.env.BRIDGE_PUBLIC_URL || '').trim().replace(/\/$/, '');
   const playerDeviceId = normalizeDeviceId(options && options.playerDeviceId);
+  const onPairingCode = options && typeof options.onPairingCode === 'function' ? options.onPairingCode : null;
+  const pairingSessions = new Map();
+
+  function getPairingSession(deviceId, clientId) {
+    const normalizedDeviceId = normalizeDeviceId(deviceId) || playerDeviceId;
+    if (!normalizedDeviceId) {
+      return null;
+    }
+    const sessionKey = `${normalizedDeviceId}:${normalizeDeviceId(clientId) || 'default'}`;
+    let pairingSession = pairingSessions.get(sessionKey);
+    if (!isValidOnboardingPairingCode(pairingSession, pairingSession && pairingSession.code)) {
+      pairingSession = createPairingSession(normalizedDeviceId, clientId);
+      pairingSessions.set(sessionKey, pairingSession);
+    }
+    if (onPairingCode) {
+      onPairingCode(pairingSession.code, Array.from(pairingSessions.entries()).filter(function (entry) {
+        return isValidOnboardingPairingCode(entry[1], entry[1] && entry[1].code);
+      }).map(function (entry) {
+                return { deviceId: entry[1].deviceId, clientId: entry[1].clientId || null, code: entry[1].code };
+      }));
+    }
+    return pairingSession;
+  }
+
+  function findPairingSession(pairingCode) {
+    for (const [deviceId, pairingSession] of pairingSessions.entries()) {
+      if (isValidOnboardingPairingCode(pairingSession, pairingCode)) {
+        return { deviceId: pairingSession.deviceId, session: pairingSession };
+      }
+    }
+    return null;
+  }
 
   if (!app || !common) {
     throw new Error('registerPlayerOnboardingRoutes requires app and common.');
@@ -289,15 +345,71 @@ function registerPlayerOnboardingRoutes(app, options) {
     next();
   }
 
-  app.get('/', function (_req, res) {
+  function requireOnboardingAuth(req, res, next) {
+    if (!sharedSecret) {
+      return next();
+    }
+
+    const pageToken = String(req.headers['x-pulse-page-auth'] || '').trim();
+    const pagePayload = verifyPageAuthToken(pageToken);
+    if (pagePayload && String(pagePayload.scope || '').trim() === 'onboarding') {
+      req.playerPageAuth = pagePayload;
+      return next();
+    }
+
+    if (verifyRequestAuth(req)) {
+      return next();
+    }
+
+    return res.status(401).json({ error: 'Onboarding authentication required.' });
+  }
+
+  app.get('/', async function (req, res, next) {
     res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
-    res.send(common.renderPlayerOnboardingLandingPage());
+    try {
+      const deviceId = normalizeDeviceId(req.query && req.query.clientId);
+      let status = null;
+      if (deviceId) {
+        if (bridgeBaseUrl) {
+          const response = await fetchThinClient(req, '/api/onboarding/status?deviceId=' + encodeURIComponent(deviceId), {
+            method: 'GET'
+          });
+          status = await readJsonResponse(response);
+        } else {
+          status = await getOnboardingStatus(pool, deviceId);
+        }
+      }
+      const screenId = status && (status.screen_id || status.screenId);
+      const screenSlug = status && (status.screen_slug || status.screenSlug);
+      if (screenId && screenSlug) {
+        return res.redirect('/screen/' + encodeURIComponent(screenSlug));
+      }
+      res.send(common.renderPlayerOnboardingLandingPage({ pairingCode: '' }));
+    } catch (error) {
+      next(error);
+    }
   });
 
   app.get('/onboard', async function (req, res, next) {
     res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
     try {
-      res.send(common.renderPlayerOnboardingFormPage(String(req.query.deviceId || playerDeviceId || '').trim()));
+      const deviceId = playerDeviceId;
+      const onboardingBaseUrl = String(process.env.WEB_PUBLIC_URL || '').trim().replace(/\/$/, '') || getPublicBaseUrl(req, playerPublicUrl);
+      const clientId = normalizeDeviceId(req.query.clientId);
+      const pairingSession = getPairingSession(deviceId, clientId);
+      const pairingParams = [];
+      if (pairingSession && pairingSession.code) {
+        pairingParams.push(`code=${encodeURIComponent(pairingSession.code)}`);
+      }
+      const pairingQuery = pairingParams.length ? `?${pairingParams.join('&')}` : '';
+      if (bridgeBaseUrl && pairingSession && pairingSession.code) {
+        const response = await fetchThinClient(req, `/api/onboarding/url?pairingCode=${encodeURIComponent(pairingSession.code)}`);
+        const payload = await readJsonResponse(response);
+        if (payload && payload.url) {
+          return res.redirect(String(payload.url));
+        }
+      }
+      return res.redirect(`${onboardingBaseUrl}/pairing${pairingQuery}`);
     } catch (error) {
       next(error);
     }
@@ -315,7 +427,7 @@ function registerPlayerOnboardingRoutes(app, options) {
     next();
   }, async function (req, res, next) {
     try {
-      const deviceId = normalizeDeviceId(req.query.deviceId) || playerDeviceId;
+      const deviceId = normalizeDeviceId(req.query.deviceId || req.query.clientId);
       if (bridgeBaseUrl) {
         const response = await fetchThinClient(req, '/api/onboarding/status?deviceId=' + encodeURIComponent(deviceId || ''), {
           method: 'GET'
@@ -347,6 +459,26 @@ function registerPlayerOnboardingRoutes(app, options) {
     }
   });
 
+  app.get('/api/onboarding/resolve', requireOnboardingAuth, function (req, res) {
+    const pairingCode = String(req.query.pairingCode || '').trim();
+    const pairing = findPairingSession(pairingCode);
+    if (!pairing) {
+      return res.status(401).json({ error: 'A valid kiosk pairing code is required.' });
+    }
+    res.json({ deviceId: pairing.deviceId, clientId: pairing.session.clientId || null });
+  });
+
+  app.get('/api/onboarding/session', requireOnboardingPageAuth, function (req, res) {
+    const deviceId = normalizeDeviceId(req.query.deviceId) || playerDeviceId;
+    const clientId = normalizeDeviceId(req.query.clientId);
+    const pairingSession = getPairingSession(deviceId, clientId);
+    if (!pairingSession) {
+      return res.status(503).json({ error: 'Player identity is unavailable.' });
+    }
+    res.set('Cache-Control', 'no-store');
+    res.json({ deviceId: deviceId, pairingCode: pairingSession.code });
+  });
+
   app.get('/api/onboarding/screens', requireOnboardingPageAuth, async function (_req, res, next) {
     try {
       if (bridgeBaseUrl) {
@@ -366,14 +498,40 @@ function registerPlayerOnboardingRoutes(app, options) {
     }
   });
 
+
   app.get('/api/onboarding/qr', async function (req, res, next) {
     try {
       const deviceId = normalizeDeviceId(req.query.deviceId) || playerDeviceId;
+      const clientId = normalizeDeviceId(req.query.clientId);
       if (!deviceId) {
         return res.status(400).json({ error: 'Device ID is required' });
       }
-      const onboardingUrl = `${getPublicBaseUrl(req, playerPublicUrl)}/onboard?deviceId=${encodeURIComponent(deviceId)}`;
+      const pairingSession = getPairingSession(deviceId, clientId);
-      const svg = await createStyledQrCodeSvg({ value: onboardingUrl, qr_margin: 20 });
+      if (!pairingSession) {
+        return res.status(503).json({ error: 'Pairing session is unavailable.' });
+      }
+      if (bridgeBaseUrl) {
+        const response = await fetchThinClient(req, `/api/onboarding/qr?pairingCode=${encodeURIComponent(pairingSession.code)}`);
+        if (response && response.ok) {
+          const svg = await response.text();
+          res.set('Content-Type', response.headers.get('content-type') || 'image/svg+xml; charset=utf-8');
+          res.set('Cache-Control', 'no-store');
+          return res.send(svg);
+        }
+      }
+      const onboardingBaseUrl = String(process.env.WEB_PUBLIC_URL || '').trim().replace(/\/$/, '') || getPublicBaseUrl(req, playerPublicUrl);
+      const onboardingUrl = `${onboardingBaseUrl}/pairing?code=${encodeURIComponent(pairingSession.code)}`;
+      const svg = await createStyledQrCodeSvg({
+        value: onboardingUrl,
+        qr_margin: 20,
+        qr_dots_type: 'dots',
+        qr_dots_color: '#f4f8f5',
+        qr_corners_square_type: 'dot',
+        qr_corners_square_color: '#f4f8f5',
+        qr_corners_dot_type: 'dot',
+        qr_corners_dot_color: '#f0bd70',
+        qr_background_transparent: true
+      });
       res.set('Content-Type', 'image/svg+xml; charset=utf-8');
       res.set('Cache-Control', 'no-store');
       res.send(svg);
@@ -382,20 +540,28 @@ function registerPlayerOnboardingRoutes(app, options) {
     }
   });
 
-  app.post('/api/onboarding', requireOnboardingPageAuth, express.json(), async function (req, res, next) {
+  app.post('/api/onboarding', express.json(), requireOnboardingAuth, async function (req, res, next) {
     try {
-      const deviceId = normalizeDeviceId(req.body && req.body.deviceId) || playerDeviceId;
+      const deviceId = playerDeviceId;
       const clientName = String((req.body && req.body.clientName) || '').trim();
       const screenSlug = String((req.body && req.body.screenSlug) || '').trim();
+      const pairingCode = String((req.body && req.body.pairingCode) || '').trim();
+      const clientId = normalizeDeviceId(req.body && req.body.clientId);
       const retryAfterSeconds = isOnboardingSignupRateLimited(req, deviceId);
       if (retryAfterSeconds) {
         res.set('Retry-After', String(retryAfterSeconds));
         return res.status(429).json({ error: 'Too many onboarding attempts. Please try again later.' });
       }
 
+      const pairing = findPairingSession(pairingCode);
+      const pairingSession = pairing && pairing.session;
+      if (!isValidOnboardingPairingCode(pairingSession, pairingCode)) {
+        return res.status(401).json({ error: 'A valid kiosk pairing code is required.' });
+      }
+
       if (bridgeBaseUrl) {
         const forwardedBody = Object.assign({}, req.body || {}, {
-          deviceId: deviceId
+          clientId: clientId || null
         });
         const response = await fetch(new URL('/api/onboarding', bridgeBaseUrl).toString(), {
           method: 'POST',
@@ -413,6 +579,9 @@ function registerPlayerOnboardingRoutes(app, options) {
         if (!payload) {
           return res.status(502).json({ error: 'Player bridge returned an invalid response.' });
         }
+        if (response.ok) {
+          pairingSessions.delete(deviceId);
+        }
         payload.playerUrl = payload && payload.screenSlug ? `${getPublicBaseUrl(req, playerPublicUrl)}/screen/${encodeURIComponent(payload.screenSlug)}` : `${getPublicBaseUrl(req, playerPublicUrl)}/screen/${encodeURIComponent(screenSlug)}`;
         return res.json(payload);
       }
@@ -426,8 +595,11 @@ function registerPlayerOnboardingRoutes(app, options) {
         return res.status(400).json({ error: 'Screen is required' });
       }
 
-      const status = await bindDeviceToScreen(pool, deviceId, clientName, screenSlug, playerRuntime.isClientNameAvailableOnScreen, playerRuntime, onboardingStore);
+      if (!clientId) {
-      await bindPlayerToScreen(pool, deviceId, screenSlug);
+        return res.status(400).json({ error: 'Client ID is required' });
+      }
+      const status = await bindDeviceToScreen(pool, clientId, clientName, screenSlug, playerRuntime.isClientNameAvailableOnScreen, playerRuntime, onboardingStore);
+      pairingSessions.delete(deviceId);
       res.json({
         deviceId: deviceId,
         clientName: status ? status.client_name : clientName,
@@ -456,5 +628,6 @@ module.exports = {
   upsertPlayerRegistration: upsertPlayerRegistration,
   bindPlayerToScreen: bindPlayerToScreen,
   bindDeviceToScreen: bindDeviceToScreen,
+  isValidOnboardingPairingCode: isValidOnboardingPairingCode,
   registerPlayerOnboardingRoutes: registerPlayerOnboardingRoutes
 };

src/player/onboarding/player-onboarding-form.script.html

@@ -65,10 +65,11 @@
       var formData = new FormData(form);
       var clientName = String(formData.get("clientName") || "").trim();
       var screenSlug = String(formData.get("screenSlug") || "").trim();
+      var pairingCode = String(formData.get("pairingCode") || "").trim();
       if (!clientName) { setMessage("Client name is required."); return; }
       if (!screenSlug) { setMessage("Screen is required."); return; }
       setMessage("Saving client...");
-      var payload = { clientName: clientName, screenSlug: screenSlug };
+      var payload = { clientName: clientName, screenSlug: screenSlug, pairingCode: pairingCode };
       if (deviceId) {
         payload.deviceId = deviceId;
       }

src/player/onboarding/player-onboarding-landing.script.html

@@ -13,23 +13,12 @@
     }
     var screenKey = "pulse-signage-player-screen-slug";
     var qr = document.getElementById("onboarding-qr");
-    var status = document.getElementById("onboarding-status");
+    var pairingCodeElement = document.getElementById("onboarding-pairing-code");
-    var localForm = document.getElementById("onboarding-local-form");
-    var localMessage = document.getElementById("onboarding-message");
-    var localScreenSelect = document.getElementById("onboarding-screen-select");
     var qrPlaceholderSrc = "data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 320%22%3E%3Crect width=%22320%22 height=%22320%22 rx=%2224%22 fill=%22%23ffffff%22/%3E%3Crect x=%2230%22 y=%2230%22 width=%22260%22 height=%22260%22 rx=%2218%22 fill=%22%23f8fafc%22 stroke=%22%23cbd5e1%22 stroke-width=%223%22 stroke-dasharray=%2212 10%22/%3E%3Cpath d=%22M106 118h108M106 156h108M106 194h72%22 stroke=%22%2394a3b8%22 stroke-width=%2214%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22128%22 cy=%22248%22 r=%2212%22 fill=%22%2394a3b8%22/%3E%3Ctext x=%22160%22 y=%2278%22 text-anchor=%22middle%22 fill=%22%230f172a%22 font-family=%22Arial,sans-serif%22 font-size=%2224%22 font-weight=%22700%22%3EQR code loading%3C/text%3E%3Ctext x=%22160%22 y=%22266%22 text-anchor=%22middle%22 fill=%22%234b5563%22 font-family=%22Arial,sans-serif%22 font-size=%2214%22%3EPlease wait%3C/text%3E%3C/svg%3E";
-    function parseResponseError(response) {
-      return response.text().then(function (text) {
-        var fallbackMessage = text && text.trim() ? text.trim() : "Unable to save onboarding.";
-        try {
-          var payload = JSON.parse(text);
-          return payload && payload.error ? payload.error : fallbackMessage;
-        } catch (_error) {
-          return fallbackMessage;
-        }
-      });
-    }
     function getDeviceId() {
+      var configuredDeviceId = document.getElementById("onboarding-shell");
+      configuredDeviceId = configuredDeviceId ? String(configuredDeviceId.getAttribute("data-player-device-id") || "").trim() : "";
+      if (configuredDeviceId) { return configuredDeviceId; }
       var stored = "";
       try { stored = window.sessionStorage.getItem(deviceKey) || ""; } catch (_error) { stored = ""; }
       if (stored) { return stored; }
@@ -37,115 +26,57 @@
       try { window.sessionStorage.setItem(deviceKey, next); } catch (_error2) {}
       return next;
     }
-    function setStatus(message) { if (status) { status.textContent = message; } }
+    function loadQr(deviceId, clientId) {
-    function setLocalMessage(message) { if (localMessage) { localMessage.textContent = message || ""; } }
-    function setSelectOptions(select, screens, selectedSlug) {
-      if (!select) { return; }
-      while (select.firstChild) { select.removeChild(select.firstChild); }
-      var placeholder = document.createElement("option");
-      placeholder.value = "";
-      placeholder.textContent = "Select a screen";
-      select.appendChild(placeholder);
-      (Array.isArray(screens) ? screens : []).forEach(function (screen) {
-        var option = document.createElement("option");
-        option.value = String(screen && screen.slug ? screen.slug : "");
-        option.textContent = String(screen && (screen.name || screen.slug) ? (screen.name || screen.slug) : "Screen");
-        if (selectedSlug && String(option.value) === String(selectedSlug)) {
-          option.selected = true;
-        }
-        select.appendChild(option);
-      });
-    }
-    function loadScreens(selectedSlug) {
-      return fetch("/api/onboarding/screens", { cache: "no-store" })
-        .then(function (response) { return response.ok ? response.json() : null; })
-        .then(function (payload) {
-          var screens = payload && Array.isArray(payload.screens) ? payload.screens : [];
-          setSelectOptions(localScreenSelect, screens, selectedSlug);
-          return screens;
-        })
-        .catch(function () { setSelectOptions(localScreenSelect, [], selectedSlug); return []; });
-    }
-    function loadQr(deviceId) {
       if (!qr) { return; }
       qr.onerror = function () {
         qr.src = qrPlaceholderSrc;
       };
-      qr.src = "/api/onboarding/qr?deviceId=" + encodeURIComponent(deviceId);
+      qr.src = "/api/onboarding/qr?deviceId=" + encodeURIComponent(deviceId) + "&clientId=" + encodeURIComponent(clientId);
     }
-    function submitOnboarding(deviceId, clientName, screenSlug) {
+    function loadPairingSession(deviceId, clientId) {
-      return fetch("/api/onboarding", {
+      return fetch("/api/onboarding/session?deviceId=" + encodeURIComponent(deviceId) + "&clientId=" + encodeURIComponent(clientId), { cache: "no-store" })
-        method: "POST",
+        .then(function (response) { return response.ok ? response.json() : null; })
-        headers: { "Content-Type": "application/json", Accept: "application/json" },
-        body: JSON.stringify({ deviceId: deviceId, clientName: clientName, screenSlug: screenSlug })
-      })
-        .then(function (response) {
-          if (response.ok) {
-            return response.json();
-          }
-          return parseResponseError(response).then(function (messageText) {
-            throw new Error(messageText);
-          });
-        })
         .then(function (payload) {
-          if (!payload || !payload.screenSlug) { throw new Error("Unable to save onboarding."); }
+          if (payload && payload.pairingCode && pairingCodeElement) {
-          if (payload.clientName) { setSessionStorageItem(clientNameKey, payload.clientName); }
+            pairingCodeElement.textContent = payload.pairingCode;
-          if (payload.clientName && payload.screenSlug) { setSessionStorageItem(getClientNameStorageKey(payload.screenSlug), payload.clientName); }
-          try { window.localStorage.setItem(screenKey, payload.screenSlug); } catch (_error) {}
-          setLocalMessage("Onboarding complete.");
-          if (localForm) {
-            Array.prototype.slice.call(localForm.querySelectorAll("input, select, button")).forEach(function (control) {
-              control.disabled = true;
-            });
           }
-        });
+          return payload;
+        })
+        .catch(function () { return null; });
+    }
+    function getClientId() {
+      var stored = getSessionStorageItem("pulse-signage-player-client-id");
+      if (stored) { return stored; }
+      var next = (window.crypto && window.crypto.randomUUID ? window.crypto.randomUUID() : "client-" + Date.now() + "-" + Math.random().toString(16).slice(2));
+      setSessionStorageItem("pulse-signage-player-client-id", next);
+      return next;
     }
     function redirectIfOnboarded(deviceId) {
-      return fetch("/api/onboarding/status?deviceId=" + encodeURIComponent(deviceId), { cache: "no-store" })
+      var bindingId = getClientId() || deviceId;
+      return fetch("/api/onboarding/status?deviceId=" + encodeURIComponent(bindingId), { cache: "no-store" })
         .then(function (response) { return response.ok ? response.json() : null; })
         .then(function (payload) {
           if (payload && payload.onboarded && payload.screenSlug) {
             if (payload.clientName) { setSessionStorageItem(clientNameKey, payload.clientName); }
             if (payload.clientName && payload.screenSlug) { setSessionStorageItem(getClientNameStorageKey(payload.screenSlug), payload.clientName); }
             try { window.localStorage.setItem(screenKey, payload.screenSlug); } catch (_error) {}
-            window.location.replace("/screen/" + encodeURIComponent(payload.screenSlug));
+            window.location.replace("/screen/" + encodeURIComponent(payload.screenSlug) + "?clientId=" + encodeURIComponent(clientId));
             return true;
           }
           return false;
         })
         .catch(function () { return false; });
     }
+    var clientId = getClientId();
     var deviceId = getDeviceId();
-    if (localForm) {
-      localForm.addEventListener("submit", function (event) {
-        event.preventDefault();
-        var formData = new FormData(localForm);
-        var clientName = String(formData.get("clientName") || "").trim();
-        var screenSlug = String(formData.get("screenSlug") || "").trim();
-        if (!clientName) { setLocalMessage("Client name is required."); return; }
-        if (!screenSlug) { setLocalMessage("Screen is required."); return; }
-        setLocalMessage("Saving client...");
-        submitOnboarding(deviceId, clientName, screenSlug).catch(function (error) {
-          setLocalMessage(error && error.message ? error.message : "Unable to save onboarding.");
-        });
-      });
-    }
-    loadScreens().then(function () {
-      try {
-        var storedClientName = getSessionStorageItem(clientNameKey) || "";
-        if (storedClientName && localForm) {
-          var clientNameInput = localForm.querySelector("input[name=\"clientName\"]");
-          if (clientNameInput) { clientNameInput.value = storedClientName; }
-        }
-      } catch (_error) {}
-    });
     redirectIfOnboarded(deviceId).then(function (redirected) {
       if (redirected) { return; }
       if (qr && !qr.getAttribute("src")) {
         qr.src = qrPlaceholderSrc;
       }
-      loadQr(deviceId);
+      loadPairingSession(deviceId, clientId).then(function () {
-      setStatus("Waiting for onboarding to finish.");
+          loadQr(deviceId, clientId);
+      });
       window.setInterval(function () { redirectIfOnboarded(deviceId); }, 2000);
     });
   }());

src/player/player-client-name.script.html

@@ -90,7 +90,7 @@
       });
     }).then(function (payload) {
       var serverName = payload && payload.clientName ? String(payload.clientName).trim() : '';
-      if (serverName) {
+      if (serverName && !getOnboardingClientName()) {
         applyOnboardingClientName(serverName, null);
       }
       return onboardingClientName || getOnboardingClientName();

src/player/player-page-announcements.js

@@ -131,6 +131,9 @@
     if (window.__pulsePageAuthToken) {
       request.setRequestHeader('x-pulse-page-auth', window.__pulsePageAuthToken);
     }
+    if (typeof getCommandClientId === 'function') {
+      request.setRequestHeader('x-pulse-client-id', getCommandClientId());
+    }
     if (announcementEtag) {
       request.setRequestHeader('If-None-Match', announcementEtag);
     }

src/player/player-page.script.html

@@ -1,6 +1,6 @@
 <script>
   const slug = {{SLUG_JSON}};
-  const initialData = {{INITIAL_DATA_JSON}};
+  let initialData = {{INITIAL_DATA_JSON}};
   window.slug = slug;
   window.initialData = initialData;
   const app = document.getElementById('app');
@@ -73,7 +73,7 @@
   let slideExpiresAt = null;
   const slideFadeDurationMs = 560;
   const commandSocketPath = '/ws/screens/' + encodeURIComponent(slug);
-  const commandClientStorageKey = 'pulse-signage-player-client-id:' + slug;
+  const commandClientStorageKey = 'pulse-signage-player-client-id';
   const playlistSnapshotStorageKey = 'pulse-signage-player-playlist-snapshot:' + slug;
   const initialPlaylistSnapshot = loadPlaylistSnapshot();
   let offlineBanner = null;
@@ -181,10 +181,6 @@
     releaseScreenWakeLock();
   });
 
-  if (initialPlaylistSnapshot && initialPlaylistSnapshot.slides.length) {
-    applyPlaylistSnapshot(initialPlaylistSnapshot);
-  }
-
   if (slides.length) {
     if (!currentPlaylistSignature) {
       currentPlaylistSignature = getPlaylistRevision(initialData && initialData.slides ? initialData : { slides: slides });

src/player/playlist.js

@@ -223,7 +223,7 @@ function createPlayerPlaylistService(options) {
       let regionRows = [];
       if (templateIds.length) {
         [templateRows] = await pool.query(`
-                SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.created_at, st.modified_at,
+                SELECT st.id, st.name, st.canvas_size_id, st.background_image_path, st.background_color, st.background_gradient, st.created_at, st.modified_at,
                  cs.name AS canvas_size_name, cs.width AS canvas_size_width, cs.height AS canvas_size_height, cs.width AS canvas_width, cs.height AS canvas_height
           FROM c_templates st
           LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
@@ -422,6 +422,8 @@ function createPlayerPlaylistService(options) {
       updatePlaylistRevisionHash(hash, template.canvas_size_height);
       updatePlaylistRevisionHash(hash, template.background_image_path);
       updatePlaylistRevisionHash(hash, template.background_color);
+      updatePlaylistRevisionHash(hash, template.background_gradient);
+      updatePlaylistRevisionHash(hash, template.background_gradient);
       updatePlaylistRevisionHash(hash, template.modified_at);
     });
 

src/player/public/css/player.css

@@ -11,9 +11,9 @@ body {
 
 body.onboarding-page {
   background:
-    radial-gradient(circle at top, rgba(82, 144, 255, 0.28), transparent 32%),
+    radial-gradient(circle at 78% 20%, rgba(55, 195, 178, 0.16), transparent 28%),
-    radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.18), transparent 26%),
+    radial-gradient(circle at 12% 90%, rgba(237, 177, 89, 0.12), transparent 30%),
-    linear-gradient(160deg, #09111f 0%, #0b1323 52%, #111827 100%);
+    linear-gradient(145deg, #07131b 0%, #0b2028 58%, #10252a 100%);
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -48,14 +48,43 @@ body.thumbnail-preview .player-offline-banner {
 }
 
 .onboarding-shell {
-  min-height: 100vh;
+  min-height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: clamp(16px, 3vw, 40px);
+  padding: clamp(24px, 5vw, 72px);
   box-sizing: border-box;
 }
 
+.onboarding-stage {
+  width: min(100%, 1160px);
+}
+
+.onboarding-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 10px;
+}
+
+.onboarding-brand-mark {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border-radius: 13px;
+  background: #f0bd70;
+  color: #10252a;
+  font-size: 1.45rem;
+  font-weight: 800;
+}
+
+.onboarding-label {
+  margin: 3px 0 0;
+  color: #8faeb0;
+  font-size: 0.88rem;
+}
+
 .onboarding-card {
   width: min(100%, 1040px);
   padding: clamp(20px, 3vw, 40px);
@@ -73,14 +102,35 @@ body.thumbnail-preview .player-offline-banner {
   line-height: 1.05;
 }
 
+.onboarding-stage h1 {
+  max-width: 560px;
+  font-size: clamp(2.5rem, 5vw, 5rem);
+  letter-spacing: 0;
+}
+
+.onboarding-stage--landing h1 {
+  max-width: 500px;
+  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
+  line-height: 1.08;
+}
+
 .onboarding-kicker {
   margin: 0 0 12px;
   text-transform: uppercase;
   letter-spacing: 0.14em;
-  color: #8ab4ff;
+  color: #f0bd70;
   font-size: 0.82rem;
 }
 
+.onboarding-step {
+  margin: 0 0 18px;
+  color: #70d0c2;
+  font-size: 0.9rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
 .onboarding-copy {
   margin: 0 0 28px;
   color: #cbd5e1;
@@ -90,36 +140,123 @@ body.thumbnail-preview .player-offline-banner {
 
 .onboarding-layout {
   display: grid;
-  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1fr);
+  grid-template-columns: minmax(320px, 0.9fr) minmax(320px, 1.1fr);
   gap: clamp(20px, 3vw, 32px);
   align-items: stretch;
 }
 
+.onboarding-copy-panel {
+  display: flex;
+  grid-column: 1;
+  grid-row: 1;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.onboarding-instructions {
+  display: grid;
+  gap: 14px;
+  max-width: 440px;
+  margin: 18px 0 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: setup-step;
+}
+
+.onboarding-instructions li {
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  gap: 10px;
+  color: #b7cccd;
+  font-size: 0.96rem;
+  line-height: 1.35;
+  counter-increment: setup-step;
+}
+
+.onboarding-instructions li::before {
+  content: counter(setup-step);
+  width: 22px;
+  height: 22px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(112, 208, 194, 0.55);
+  border-radius: 50%;
+  color: #70d0c2;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.onboarding-pin-block {
+  margin-top: 28px;
+}
+
+.onboarding-pin-label {
+  display: block;
+  margin-bottom: 10px;
+  color: #8faeb0;
+  font-size: 0.92rem;
+}
+
+.onboarding-pin-label strong { color: #f0bd70; }
+
+.onboarding-pin {
+  display: block;
+  color: #f4f8f5;
+  font-size: clamp(1.7rem, 3vw, 2.8rem);
+  font-weight: 800;
+  letter-spacing: 0.18em;
+  line-height: 1;
+}
+
 .onboarding-qr-pane {
   display: grid;
-  gap: 16px;
+  width: min(100%, 420px);
+  grid-column: 2;
+  grid-row: 1;
+  gap: 0;
   align-content: start;
+  justify-self: center;
 }
 
 .onboarding-qr-frame {
   display: flex;
+  width: min(100%, 420px);
+  aspect-ratio: 1;
+  box-sizing: border-box;
   justify-content: center;
-  padding: 22px;
+  align-items: center;
-  border-radius: 26px;
+  justify-self: center;
-  background: rgba(255, 255, 255, 0.04);
+  padding: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 22px;
+  background: rgba(7, 19, 27, 0.7);
+  border: 1px solid rgba(244, 248, 245, 0.42);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
 }
 
 .onboarding-qr-frame img {
-  width: min(100%, 320px);
+  width: min(100%, 390px);
   aspect-ratio: 1;
   display: block;
-  background: #fff;
+  background: transparent;
-  border-radius: 18px;
+  border-radius: 16px;
-  padding: 16px;
+  padding: 12px;
   box-sizing: border-box;
 }
 
+.onboarding-qr-caption {
+  margin: 6px 0 0;
+  color: #8faeb0;
+  font-size: 0.92rem;
+  text-align: center;
+}
+
+.onboarding-brand-title {
+  margin-bottom: 10px;
+  font-size: 1.2rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+}
+
 .onboarding-form {
   display: grid;
   gap: 14px;
@@ -181,14 +318,14 @@ body.thumbnail-preview .player-offline-banner {
 }
 
 .onboarding-status {
-  margin-top: 8px;
+  margin-top: clamp(32px, 6vh, 56px);
   min-height: 1.4em;
-  color: #cbd5e1;
+  color: #8faeb0;
   font-size: 0.96rem;
 }
 
 .onboarding-card--landing .onboarding-status {
-  text-align: center;
+  text-align: left;
 }
 
 @media (max-width: 860px), (orientation: portrait) {
@@ -200,12 +337,45 @@ body.thumbnail-preview .player-offline-banner {
     grid-template-columns: 1fr;
   }
 
+  .onboarding-copy-panel,
+  .onboarding-qr-pane {
+    grid-column: 1;
+  }
+
+  .onboarding-copy-panel {
+    grid-row: 1;
+  }
+
+  .onboarding-qr-pane {
+    grid-row: 2;
+  }
+
   .onboarding-card {
     width: 100%;
   }
 
   .onboarding-qr-frame img {
-    width: min(100%, 280px);
+    width: min(100%, 390px);
+  }
+
+  .onboarding-qr-frame {
+    width: min(100%, 420px);
+  }
+
+  .onboarding-qr-pane {
+    width: min(100%, 420px);
+  }
+
+  .onboarding-stage--landing h1 {
+    font-size: clamp(2rem, 7vw, 3rem);
+  }
+
+  .onboarding-header {
+    margin-bottom: 38px;
+  }
+
+  .onboarding-pin {
+    font-size: clamp(1.7rem, 9vw, 2.8rem);
   }
 }
 
@@ -239,6 +409,29 @@ body.screen-blackout #app {
   opacity: 0;
 }
 
+.player-keyboard-feedback {
+  position: fixed;
+  top: 1.5rem;
+  left: 50%;
+  z-index: 10000;
+  padding: 0.65rem 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.32);
+  border-radius: 0.4rem;
+  background: rgba(15, 23, 42, 0.88);
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 700;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -0.5rem);
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+
+.player-keyboard-feedback.is-visible {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
 .player-announcement-layer {
   position: fixed;
   left: 50%;

src/player/public/js/player-page-commands.js

@@ -440,6 +440,34 @@ function isEditableTarget(target) {
   return ['INPUT', 'TEXTAREA', 'SELECT', 'OPTION'].indexOf(tagName) !== -1;
 }
 
+var keyboardFeedbackTimer = null;
+
+function showKeyboardFeedback(message) {
+  if (typeof document === 'undefined' || !document.body) {
+    return;
+  }
+
+  var feedback = document.querySelector('.player-keyboard-feedback');
+  if (!feedback) {
+    feedback = document.createElement('div');
+    feedback.className = 'player-keyboard-feedback';
+    feedback.setAttribute('aria-live', 'polite');
+    document.body.appendChild(feedback);
+  }
+
+  feedback.textContent = String(message || '');
+  feedback.classList.remove('is-visible');
+  void feedback.offsetWidth;
+  feedback.classList.add('is-visible');
+  if (keyboardFeedbackTimer) {
+    window.clearTimeout(keyboardFeedbackTimer);
+  }
+  keyboardFeedbackTimer = window.setTimeout(function () {
+    feedback.classList.remove('is-visible');
+    keyboardFeedbackTimer = null;
+  }, 900);
+}
+
 function handlePlayerKeydown(event) {
   if (!event || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
     return;
@@ -452,12 +480,28 @@ function handlePlayerKeydown(event) {
   if (event.key === 'ArrowLeft') {
     event.preventDefault();
     navigateSlides(-1);
+    showKeyboardFeedback('Previous slide');
     return;
   }
 
   if (event.key === 'ArrowRight') {
     event.preventDefault();
     navigateSlides(1);
+    showKeyboardFeedback('Next slide');
+    return;
+  }
+
+  if (String(event.key || '').toLowerCase() === 'p') {
+    event.preventDefault();
+    setPaused(!isPaused);
+    showKeyboardFeedback(isPaused ? 'Paused' : 'Playing');
+    return;
+  }
+
+  if (String(event.key || '').toLowerCase() === 'b') {
+    event.preventDefault();
+    setBlackout(!isBlackout);
+    showKeyboardFeedback(isBlackout ? 'Blackout on' : 'Blackout off');
   }
 }
 
@@ -489,6 +533,10 @@ function handleCommandMessage(rawMessage) {
   } catch (_error) {
     return;
   }
+  if (payload && payload.type === 'client-id-conflict') {
+    handleClientIdConflict();
+    return;
+  }
 
   if (!payload || payload.type !== 'command') {
     return;
@@ -505,7 +553,17 @@ function handleCommandMessage(rawMessage) {
       return;
     case 'redirect':
       if (payload.url) {
-        window.location.replace(String(payload.url));
+        var redirectUrl = String(payload.url);
+        var authorizeMove = payload.moveToken
+          ? fetch('/api/screen-move-authorize', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+              body: JSON.stringify({ moveToken: String(payload.moveToken) })
+            })
+          : Promise.resolve();
+        authorizeMove.finally(function () {
+          window.location.replace(redirectUrl);
+        });
       }
       return;
     case 'pause':
@@ -541,6 +599,13 @@ function handleCommandMessage(rawMessage) {
   }
 }
 
+function handleClientIdConflict() {
+  var replacementClientId = regenerateCommandClientId();
+  var onboardingUrl = new URL('/', window.location.origin);
+  onboardingUrl.searchParams.set('clientId', replacementClientId);
+  window.location.replace(onboardingUrl.toString());
+}
+
 // Retry the command websocket after a disconnect.
 function scheduleCommandReconnect() {
   if (commandReconnectTimer) {
@@ -577,8 +642,12 @@ function connectCommandSocket() {
     handleCommandMessage(event.data);
   };
 
-  socket.onclose = function () {
+  socket.onclose = function (event) {
     commandSocket = null;
+    if (event && event.code === 4009) {
+      handleClientIdConflict();
+      return;
+    }
     scheduleCommandReconnect();
   };
 

src/player/public/js/player-page-playback.js

@@ -156,6 +156,9 @@ function refresh() {
   if (window.__pulsePageAuthToken) {
     request.setRequestHeader('x-pulse-page-auth', window.__pulsePageAuthToken);
   }
+  if (typeof getCommandClientId === 'function') {
+    request.setRequestHeader('x-pulse-client-id', getCommandClientId());
+  }
   if (currentPlaylistEtag) {
     request.setRequestHeader('If-None-Match', currentPlaylistEtag);
   }
@@ -172,6 +175,10 @@ function refresh() {
       return;
     }
     if (request.status < 200 || request.status >= 300) {
+      if (request.status === 401 || request.status === 403) {
+        window.location.replace('/');
+        return;
+      }
       setOfflineBannerVisible(true);
       scheduleRefreshRetry();
       logDebug(
@@ -189,16 +196,21 @@ function refresh() {
       const nextActiveSlides = getActiveSlidesFrom(nextSlides);
       const nextFadeBetweenSlides = Boolean(data && data.playlist && data.playlist.fade_between_slides);
       const nextSkipUnavailableRtmp = Boolean(data && data.playlist && data.playlist.skip_unavailable_rtmp);
-      if (window.initialData && typeof window.initialData === 'object') {
+      var refreshedInitialData = Object.assign({},
-        window.initialData.screen = data.screen || window.initialData.screen || null;
+        typeof initialData !== 'undefined' && initialData ? initialData : (window.initialData || {}), {
-        window.initialData.playlist = data.playlist || null;
+        screen: data.screen || null,
-        window.initialData.slides = nextSlides;
+        playlist: data.playlist || null,
-        window.initialData.rssFeeds = Array.isArray(data.rssFeeds) ? data.rssFeeds : [];
+        slides: nextSlides,
-        window.initialData.apiSources = Array.isArray(data.apiSources) ? data.apiSources : [];
+        rssFeeds: Array.isArray(data.rssFeeds) ? data.rssFeeds : [],
-        window.initialData.timetableGroups = Array.isArray(data.timetableGroups) ? data.timetableGroups : [];
+        apiSources: Array.isArray(data.apiSources) ? data.apiSources : [],
-        window.initialData.weatherLocations = Array.isArray(data.weatherLocations) ? data.weatherLocations : [];
+        timetableGroups: Array.isArray(data.timetableGroups) ? data.timetableGroups : [],
-        window.initialData.revision = nextSignature;
+        weatherLocations: Array.isArray(data.weatherLocations) ? data.weatherLocations : [],
+        revision: nextSignature
+      });
+      if (typeof initialData !== 'undefined') {
+        initialData = refreshedInitialData;
       }
+      window.initialData = refreshedInitialData;
       savePlaylistSnapshot({
         slides: nextSlides,
         signature: nextSignature,

src/player/public/js/player-page-playlist.js

@@ -211,6 +211,16 @@ function getCommandClientId() {
   return commandClientId;
 }
 
+function regenerateCommandClientId() {
+  commandClientId = null;
+  try {
+    window.sessionStorage.removeItem(commandClientStorageKey);
+  } catch (_error) {
+    // ignore storage errors
+  }
+  return getCommandClientId();
+}
+
 // Load the most recent playlist snapshot from browser storage.
 function loadPlaylistSnapshot() {
   try {

src/player/public/js/player-page-rendering.js

@@ -782,6 +782,7 @@ function getTemplateLayout(template) {
     canvasHeight: canvasSize.height,
     background: template.background_image_path ? '<img class="template-background" src="' + escapeHtml(template.background_image_path) + '" alt="" />' : '',
     backgroundColor: template.background_color || '#111111',
+    backgroundGradient: template.background_gradient || '',
     regions: regions
   };
 
@@ -790,17 +791,31 @@ function getTemplateLayout(template) {
 }
 
 // Build a dark backdrop style for template and media canvases.
-function buildBackdropStyle(backgroundColor, backgroundImagePath) {
+function buildBackdropStyle(backgroundColor, backgroundImagePath, backgroundGradient) {
   var color = String(backgroundColor || '#111111').trim() || '#111111';
   var style = 'background-color:' + escapeHtml(color) + ';';
+  var gradient = '';
+  try {
+    var gradientData = typeof backgroundGradient === 'string' ? JSON.parse(backgroundGradient) : backgroundGradient;
+    if (gradientData && gradientData.type === 'linear' && Array.isArray(gradientData.colors) && gradientData.colors.length >= 2) {
+      var stops = Array.isArray(gradientData.stops) ? gradientData.stops : (gradientData.colors || []).map(function (color, index, colors) { return { color: color, position: colors.length > 1 ? Math.round(index * 100 / (colors.length - 1)) : 0 }; });
+      stops = stops.filter(function (stop) { return stop && /^#[0-9a-fA-F]{3,8}$/.test(String(stop.color || '').trim()); }).slice(0, 12);
+      if (stops.length >= 2) {
+        var angle = Number(gradientData.angle);
+        gradient = 'linear-gradient(' + (Number.isFinite(angle) ? Math.max(0, Math.min(360, angle)) : 90) + 'deg,' + stops.map(function (stop) { return stop.color + ' ' + Math.max(0, Math.min(100, Number(stop.position) || 0)) + '%'; }).join(',') + ')';
+      }
+    }
+  } catch (_error) {
+    gradient = '';
+  }
 
   if (backgroundImagePath) {
-    style += 'background-image:url("' + escapeHtml(backgroundImagePath) + '");';
+    style += 'background-image:url("' + escapeHtml(backgroundImagePath) + '")' + (gradient ? ',' + gradient : '') + ';';
-    style += 'background-position:center;background-size:contain;background-repeat:no-repeat;';
+    style += 'background-position:center,center;background-size:contain,cover;background-repeat:no-repeat,no-repeat;';
     return style;
   }
 
-  style += 'background-image:none;background-position:center;background-size:cover;background-repeat:no-repeat;';
+  style += 'background-image:' + (gradient || 'none') + ';background-position:center;background-size:cover;background-repeat:no-repeat;';
   return style;
 }
 
@@ -876,7 +891,7 @@ function renderTemplateSlideMarkup(slide) {
       animationConfig: normalizePlayerAnimationConfig(region.animationJson)
     });
   }).join('') : '';
-  const stageStyle = layout ? buildBackdropStyle(layout.backgroundColor || '#111111', template.background_image_path) : '';
+  const stageStyle = layout ? buildBackdropStyle(layout.backgroundColor || '#111111', template.background_image_path, layout.backgroundGradient) : '';
   if (layout) {
     setPlayerCanvasDimensions(layout.canvasWidth, layout.canvasHeight);
   }

src/player/render-helpers.js

@@ -427,7 +427,7 @@ function getPlayerAnnouncementTemplatesScript() {
 function getAnnouncementIconsDataScript() {
   return [
     '(function () {',
-    '  window.pulseAnnouncementIconKeys = ' + safeJsonForScript(announcementIcons.ANNOUNCEMENT_ICON_KEYS) + ';',
+    '  window.pulseAnnouncementIconKeys = ' + safeJsonForScript(announcementIcons.ANNOUNCEMENT_ICON_CATALOG_KEYS) + ';',
     '  window.pulseAnnouncementDefaultIconKey = ' + safeJsonForScript(announcementIcons.DEFAULT_ANNOUNCEMENT_ICON) + ';',
     '}());'
   ].join('\n');

src/player/render.js

@@ -36,34 +36,31 @@ function getPlayerServiceWorkerRegistrationScript() {
   ].join('');
 }
 
-function renderOnboardingLandingBody() {
+function renderOnboardingLandingBody(options) {
+  const onboardingCode = String(options && options.pairingCode || '').trim();
+  const deviceId = String(options && options.deviceId || '').trim();
   return [
-    '<main class="onboarding-shell">',
+    '    <main id="onboarding-shell" class="onboarding-shell">',
-    '  <section class="onboarding-card onboarding-card--landing">',
+    '  <section class="onboarding-stage onboarding-stage--landing">',
-    '    <p class="onboarding-kicker">Pulse Signage</p>',
-    '    <h1>Onboard this player</h1>',
-    '    <p class="onboarding-copy">Choose an existing screen, name the client, and either scan the QR code or finish right here with a keyboard and mouse.</p>',
     '    <div class="onboarding-layout">',
     '      <div class="onboarding-qr-pane">',
     '        <div class="onboarding-qr-frame">',
     '          <img id="onboarding-qr" alt="Onboarding QR code" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 320%22%3E%3Crect width=%22320%22 height=%22320%22 rx=%2224%22 fill=%22%23ffffff%22/%3E%3Crect x=%2230%22 y=%2230%22 width=%22260%22 height=%22260%22 rx=%2218%22 fill=%22%23f8fafc%22 stroke=%22%23cbd5e1%22 stroke-width=%223%22 stroke-dasharray=%2212 10%22/%3E%3Cpath d=%22M106 118h108M106 156h108M106 194h72%22 stroke=%22%2394a3b8%22 stroke-width=%2214%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22128%22 cy=%22248%22 r=%2212%22 fill=%22%2394a3b8%22/%3E%3Ctext x=%22160%22 y=%2278%22 text-anchor=%22middle%22 fill=%22%230f172a%22 font-family=%22Arial,sans-serif%22 font-size=%2224%22 font-weight=%22700%22%3EQR code loading%3C/text%3E%3Ctext x=%22160%22 y=%22266%22 text-anchor=%22middle%22 fill=%22%234b5563%22 font-family=%22Arial,sans-serif%22 font-size=%2214%22%3EPlease wait%3C/text%3E%3C/svg%3E" />',
     '        </div>',
-    '        <div id="onboarding-status" class="onboarding-status">Preparing onboarding link...</div>',
+    '        <p class="onboarding-qr-caption">Scan this QR code with your phone</p>',
+    '      </div>',
+    '      <div class="onboarding-copy-panel">',
+    '        <p class="onboarding-kicker onboarding-brand-title">Pulse Signage</p>',
+    '        <h1>Quickly set up with your phone</h1>',
+    '        <ol class="onboarding-instructions">',
+    '          <li>Open the camera and scan the QR code.</li>',
+    '          <li>Log in to Pulse Signage and choose a screen.</li>',
+    '        </ol>',
+    '        <div class="onboarding-pin-block">',
+    '          <span class="onboarding-pin-label">Pairing Code</span>',
+    '          <strong id="onboarding-pairing-code" class="onboarding-pin">' + Handlebars.escapeExpression(onboardingCode || 'Loading...') + '</strong>',
+    '        </div>',
     '      </div>',
-    '      <form id="onboarding-local-form" class="onboarding-form onboarding-form--local">',
-    '        <label>',
-    '          <span>Client name</span>',
-    '          <input name="clientName" type="text" maxlength="255" required placeholder="Lobby player" autocomplete="off" />',
-    '        </label>',
-    '        <label>',
-    '          <span>Screen</span>',
-    '          <select name="screenSlug" id="onboarding-screen-select" required>',
-    '            <option value="">Loading screens...</option>',
-    '          </select>',
-    '        </label>',
-    '        <button type="submit">Save client</button>',
-    '        <div id="onboarding-message" class="onboarding-status"></div>',
-    '      </form>',
     '    </div>',
     '  </section>',
     '</main>'
@@ -79,6 +76,10 @@ function renderOnboardingFormBody(deviceId) {
     '    <p class="onboarding-copy">Pick an existing screen and give this player a friendly name that will persist after refreshes.</p>',
     '    <form id="onboarding-form" class="onboarding-form">',
     '      <label>',
+    '        <span>Pairing code</span>',
+    '        <input name="pairingCode" type="text" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" required autocomplete="one-time-code" placeholder="Enter the code shown on the kiosk" />',
+    '      </label>',
+    '      <label>',
     '        <span>Client name</span>',
     '        <input name="clientName" type="text" maxlength="255" required placeholder="Lobby player" />',
     '      </label>',
@@ -136,13 +137,13 @@ function renderPlayerPage(slug, initialData) {
   });
 }
 
-function renderPlayerOnboardingLandingPage() {
+function renderPlayerOnboardingLandingPage(options) {
   const pageAuthToken = createPageAuthBundle({ scope: 'onboarding' });
   const fontStylesheetHref = getFontStylesheetHref(PLAYER_MEDIA_DIR);
   return renderPage(getPlayerPageTemplate(), {
     title: 'Onboard player',
     bodyClass: 'onboarding-page',
-    body: renderOnboardingLandingBody(),
+    body: renderOnboardingLandingBody(options),
     stylesheets: fontStylesheetHref ? [fontStylesheetHref] : [],
     script: createPageFetchAuthScript(pageAuthToken) + getPlayerServiceWorkerRegistrationScript() + renderOnboardingLandingScript()
   });

src/player/routes.js

@@ -62,11 +62,15 @@ function registerPlayerRoutes(app, options) {
       body: body
     }));
 
-    if (req.headers['x-pulse-page-auth']) {
+    const requestHeaders = req && req.headers ? req.headers : {};
-      headers['x-pulse-page-auth'] = String(req.headers['x-pulse-page-auth']).trim();
+    if (requestHeaders['x-pulse-page-auth']) {
+      headers['x-pulse-page-auth'] = String(requestHeaders['x-pulse-page-auth']).trim();
     }
-    if (req.headers['if-none-match']) {
+    if (requestHeaders['if-none-match']) {
-      headers['if-none-match'] = String(req.headers['if-none-match']).trim();
+      headers['if-none-match'] = String(requestHeaders['if-none-match']).trim();
+    }
+    if (requestHeaders['x-pulse-client-id']) {
+      headers['x-pulse-client-id'] = String(requestHeaders['x-pulse-client-id']).trim();
     }
     if (requestOptions.contentType) {
       headers['content-type'] = requestOptions.contentType;
@@ -96,6 +100,76 @@ function registerPlayerRoutes(app, options) {
     }
   }
 
+  async function getBoundScreenSlug(req) {
+    if (!playerDeviceId) {
+      return null;
+    }
+
+    const clientId = String(req.query && req.query.clientId || '').trim();
+    if (!clientId) {
+      return null;
+    }
+    const bindingId = clientId;
+
+    if (bridgeBaseUrl) {
+      const response = await fetchBridge(req, '/api/onboarding/status?deviceId=' + encodeURIComponent(bindingId), {
+        method: 'GET'
+      });
+      const status = await readJsonResponse(response);
+      return status && status.screenSlug ? String(status.screenSlug).trim() : null;
+    }
+
+    const [rows] = await pool.query(
+      `SELECT s.slug
+         FROM d_onboarding_devices d
+         JOIN d_screens s ON s.id = d.screen_id
+        WHERE d.device_id = ?`,
+      [bindingId]
+    );
+    return rows[0] && rows[0].slug ? String(rows[0].slug).trim() : null;
+  }
+
+  async function isClientAuthorizedForScreen(req, requestedSlug) {
+    const clientId = String(req.headers['x-pulse-client-id'] || '').trim();
+    if (!clientId) {
+      return false;
+    }
+    const boundSlug = await getBoundScreenSlug({ query: { clientId: clientId } });
+    return boundSlug === String(requestedSlug || '').trim();
+  }
+
+  function isAuthorizedScreenMove(req, requestedSlug) {
+    const queryToken = String(req.query && req.query.moveToken || '').trim();
+    const cookieHeader = String(req.headers && req.headers.cookie || '');
+    const cookieToken = cookieHeader.split(';').map(function (part) {
+      const separator = part.indexOf('=');
+      return separator === -1 ? null : [part.slice(0, separator).trim(), part.slice(separator + 1).trim()];
+    }).filter(Boolean).find(function (entry) { return entry[0] === 'pulse-screen-move'; });
+    const token = queryToken || (cookieToken ? decodeURIComponent(cookieToken[1]) : '');
+    if (!token) {
+      return false;
+    }
+
+    const payload = verifyPageAuthToken(token);
+    return Boolean(payload
+      && String(payload.scope || '').trim() === 'screen-move'
+      && String(payload.playerId || '').trim() === String(playerDeviceId || '').trim()
+      && String(payload.screenSlug || '').trim() === String(requestedSlug || '').trim());
+  }
+
+  app.post('/api/screen-move-authorize', express.json(), function (req, res) {
+    const token = String(req.body && req.body.moveToken || '').trim();
+    const payload = verifyPageAuthToken(token);
+    if (!payload
+      || String(payload.scope || '').trim() !== 'screen-move'
+      || String(payload.playerId || '').trim() !== String(playerDeviceId || '').trim()) {
+      return res.status(401).json({ error: 'Invalid screen move authorization.' });
+    }
+
+    res.setHeader('Set-Cookie', `pulse-screen-move=${encodeURIComponent(token)}; Max-Age=60; Path=/; HttpOnly; SameSite=Lax`);
+    return res.json({ ok: true });
+  });
+
   function requirePageAuth(allowedScopes) {
     return function (req, res, next) {
       if (!sharedSecret) {
@@ -296,7 +370,7 @@ function registerPlayerRoutes(app, options) {
     }
   });
 
-  app.get('/screen/:slug', function (req, res) {
+  app.get('/screen/:slug', async function (req, res, next) {
     if (onPlayerPublicBaseUrl) {
       try {
         onPlayerPublicBaseUrl(getPlayerPublicBaseUrl(req, null));
@@ -321,7 +395,7 @@ function registerPlayerRoutes(app, options) {
           res.set('X-Player-Offline', '1');
           return res.send(common.renderPlayerPage(req.params.slug, null));
         }
-        res.send(common.renderPlayerPage(req.params.slug, data));
+        res.send(common.renderPlayerPage(req.params.slug, null));
       }).catch(function (error) {
         if (!isBridgeFetchError(error)) {
           console.error(error);
@@ -332,15 +406,8 @@ function registerPlayerRoutes(app, options) {
       return;
     }
 
-    const { bindPlayerToScreen } = require('./onboarding');
-    if (playerDeviceId) {
-      void bindPlayerToScreen(pool, playerDeviceId, req.params.slug)
-        .catch(function (error) {
-          console.error(error);
-        });
-    }
     playerPlaylistService.buildScreenPlaylist(req.params.slug).then(function (data) {
-      res.send(common.renderPlayerPage(req.params.slug, data));
+      res.send(common.renderPlayerPage(req.params.slug, null));
     }).catch(function (error) {
       console.error(error);
       res.set('X-Player-Offline', '1');
@@ -405,6 +472,9 @@ function registerPlayerRoutes(app, options) {
 
   app.get('/api/screens/:slug/playlist', requirePageAuth(['player']), async function (req, res, next) {
     try {
+      if (playerDeviceId && !(await isClientAuthorizedForScreen(req, req.params.slug))) {
+        return res.status(403).json({ error: 'This browser tab is not authorized for this screen.' });
+      }
       if (bridgeBaseUrl) {
         const response = await fetchBridge(req, '/api/screens/' + encodeURIComponent(req.params.slug) + '/playlist', {
           method: 'GET'
@@ -448,6 +518,9 @@ function registerPlayerRoutes(app, options) {
 
   app.get('/api/screens/:slug/announcement', requirePageAuth(['player']), async function (req, res, next) {
     try {
+      if (playerDeviceId && !(await isClientAuthorizedForScreen(req, req.params.slug))) {
+        return res.status(403).json({ error: 'This browser tab is not authorized for this screen.' });
+      }
       if (bridgeBaseUrl) {
         const response = await fetchBridge(req, '/api/screens/' + encodeURIComponent(req.params.slug) + '/announcement', {
           method: 'GET'

src/player/runtime.js

@@ -32,6 +32,21 @@ function createPlayerRuntime(options) {
   const announcementListenersBySlug = new Map();
   const wss = new WebSocketServer({ noServer: true });
 
+  function hasActiveClientId(clientId, currentConnection) {
+    const normalizedClientId = String(clientId || '').trim();
+    if (!normalizedClientId) {
+      return false;
+    }
+    for (const connections of connectionsBySlug.values()) {
+      for (const connection of connections.values()) {
+        if (connection !== currentConnection && String(connection.clientId || '').trim() === normalizedClientId) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   function normalizeClientIp(value) {
     const ip = String(value || '').trim();
     if (!ip) {
@@ -534,7 +549,13 @@ function createPlayerRuntime(options) {
         return;
       }
 
-      connection.clientId = payload.clientId ? String(payload.clientId).trim() : connection.clientId;
+      const nextClientId = payload.clientId ? String(payload.clientId).trim() : connection.clientId;
+      if (nextClientId && hasActiveClientId(nextClientId, connection)) {
+        socket.send(JSON.stringify({ type: 'client-id-conflict' }));
+        socket.close(4009, 'Client ID is already in use.');
+        return;
+      }
+      connection.clientId = nextClientId;
       connection.clientName = payload.clientName ? String(payload.clientName).trim() : connection.clientName;
       connection.deviceId = payload.deviceId ? normalizeDeviceId(payload.deviceId) || connection.deviceId : connection.deviceId;
       if (!connection.clientName && connection.clientId) {

src/rbac.js

@@ -22,6 +22,14 @@ const PERMISSION_SECTIONS = [
           { key: 'read', name: 'Read', description: 'View connected player clients and live status.' },
           { key: 'allow', name: 'Allow', description: 'Use the connected client command buttons.' }
         ]
+      },
+      {
+        key: 'pairing',
+        order: 30,
+        name: 'Player pairing',
+        permissions: [
+          { key: 'allow', name: 'Allow', description: 'Pair players with screen groups.' }
+        ]
       }
     ]
   },

src/web.js

@@ -163,6 +163,7 @@ async function start() {
     broadcastDashboardState: broadcastDashboardState,
     dataSourceTasks: dataSourceTasks,
     playerActionService: playerActionService,
+    playerInternalBaseUrl: webConfig.playerInternalUrl,
     isClientNameAvailable: isClientNameAvailable,
     withClientNameReservation: withClientNameReservation,
     requirePermission: function (permissionKey, options) {

src/web/lib/background-tasks/tasks-scheduled/onboarding-device-prune.js

@@ -3,7 +3,7 @@ const TASK = {
   title: 'Onboarding device prune',
   category: 'cleanup',
   trigger: 'scheduled recurring task, hourly',
-  purpose: 'remove stale onboarding device bindings that have been idle for more than one minute.',
+  purpose: 'remove unbound onboarding devices that have been idle for more than one minute.',
   taskType: 'recurring-run',
   intervalMs: 60 * 60 * 1000
 };

src/web/lib/dashboard-state.js

@@ -25,7 +25,17 @@ function enrichScreensWithConnections(screens, connectionsBySlug, onboardingName
 function buildClientRows(screens, connectionsBySlug, onboardingNameBySlug, onboardingNameByDeviceId, playerIdentifierByBaseUrl, formatDashboardDate) {
   return (screens || []).flatMap(function (screen) {
     const connectionState = connectionsBySlug[screen.slug] || { count: 0, connections: [] };
-    return (connectionState.connections || []).map(function (connection) {
+    const seenClientKeys = new Set();
+    return (connectionState.connections || []).filter(function (connection) {
+      const deviceId = String(connection && connection.deviceId || '').trim();
+      const clientId = String(connection && connection.clientId || '').trim();
+      const key = deviceId && clientId ? `${deviceId}:${clientId}` : String(connection && connection.id || '').trim();
+      if (seenClientKeys.has(key)) {
+        return false;
+      }
+      seenClientKeys.add(key);
+      return true;
+    }).map(function (connection) {
       const deviceId = String(connection.deviceId || '').trim();
       const playerBaseUrl = normalizePlayerBaseUrl(connection.playerPublicBaseUrl);
       return Object.assign({}, connection, {

src/web/lib/media/slide-thumbnail-preview.js

@@ -186,6 +186,7 @@ function buildThumbnailPreviewPayload(slide, options) {
     canvasWidth: canvasSize.width,
     canvasHeight: canvasSize.height,
     backgroundColor: template && template.background_color ? String(template.background_color) : '#111111',
+    backgroundGradient: template && template.background_gradient ? String(template.background_gradient) : '',
     backgroundImagePath: template && template.background_image_path ? String(template.background_image_path) : '',
     fontStylesheetHref: String(options && options.fontStylesheetHref || '').trim(),
     html: buildThumbnailPreviewMarkup(slide, options && options.baseUrl)

src/web/lib/media/slide-thumbnails.js

@@ -311,6 +311,7 @@ function buildThumbnailPreviewPayload(slide, options) {
     canvasWidth: canvasSize.width,
     canvasHeight: canvasSize.height,
     backgroundColor: template && template.background_color ? String(template.background_color) : '#111111',
+    backgroundGradient: template && template.background_gradient ? String(template.background_gradient) : '',
     backgroundImagePath: template && template.background_image_path ? String(template.background_image_path) : '',
     fontStylesheetHref: String(options && options.fontStylesheetHref || '').trim(),
     html: buildThumbnailPreviewMarkup(slide, options && options.baseUrl, options)

src/web/lib/player-actions.js

@@ -216,35 +216,51 @@ function createPlayerActionService(options) {
   }
 
   async function forwardAnnouncementRefresh(slug) {
-    const authHeaders = createRequestAuthHeaders({
-      method: 'POST',
-      pathname: `/api/screens/${encodeURIComponent(slug)}/announcements/refresh`,
-      body: { command: 'announcement-refresh' }
-    });
     const resolvedPlayerInternalBaseUrl = await getPlayerInternalBaseUrl();
-    if (!resolvedPlayerInternalBaseUrl) {
+    const targetBaseUrls = Array.from(new Set([
+      resolvedPlayerInternalBaseUrl,
+      configuredBridgeInternalBaseUrl
+    ].map(normalizeBaseUrl).filter(Boolean)));
+    if (!targetBaseUrls.length) {
       throw new Error('Unable to resolve the player internal base URL.');
     }
 
-    const response = await fetch(`${resolvedPlayerInternalBaseUrl}/api/screens/${encodeURIComponent(slug)}/announcements/refresh`, {
+    const results = await Promise.allSettled(targetBaseUrls.map(async function (targetBaseUrl) {
-      method: 'POST',
+      const authHeaders = createRequestAuthHeaders({
-      headers: {
+        method: 'POST',
-        'Content-Type': 'application/json',
+        pathname: `/api/screens/${encodeURIComponent(slug)}/announcements/refresh`,
-        Accept: 'application/json',
+        body: { command: 'announcement-refresh' }
-        ...authHeaders
+      });
-      },
+      const response = await fetch(`${targetBaseUrl}/api/screens/${encodeURIComponent(slug)}/announcements/refresh`, {
-      body: JSON.stringify({ command: 'announcement-refresh' })
+        method: 'POST',
-    });
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+          ...authHeaders
+        },
+        body: JSON.stringify({ command: 'announcement-refresh' })
+      });
 
-    if (!response.ok) {
+      if (!response.ok) {
-      const errorText = await response.text().catch(function () { return ''; });
+        const errorText = await response.text().catch(function () { return ''; });
-      const error = new Error(errorText || `Unable to refresh announcements for player ${slug}.`);
+        const error = new Error(errorText || `Unable to refresh announcements for player ${slug}.`);
-      error.statusCode = response.status;
+        error.statusCode = response.status;
-      throw error;
+        throw error;
+      }
+
+      return response.json().catch(function () {
+        return { ok: true };
+      });
+    }));
+    const successfulResults = results.filter(function (result) {
+      return result.status === 'fulfilled';
+    });
+    if (!successfulResults.length) {
+      throw (results[0] && results[0].reason) || new Error(`Unable to refresh announcements for player ${slug}.`);
     }
 
-    return response.json().catch(function () {
+    return successfulResults.map(function (result) {
-      return { ok: true };
+      return result.value;
     });
   }
 

src/web/public/css/theme-custom.css

@@ -893,6 +893,103 @@
   background: var(--bs-tertiary-bg);
 }
 
+.onboarding-pairing-card > .card-header {
+  padding: 0.75rem 1rem;
+}
+
+.onboarding-pairing-card .card-body {
+  padding: 0.75rem 1rem;
+}
+
+.onboarding-pairing-card.is-pairing .card-body > :not(.onboarding-pairing-progress) {
+  opacity: 0.55;
+}
+
+.onboarding-pairing-progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  color: var(--bs-primary);
+}
+
+.onboarding-pairing-card > .card-footer {
+  padding: 0.5rem 1rem;
+}
+
+@media (max-width: 575.98px) {
+  .onboarding-client-list-link {
+    flex-basis: 100%;
+    text-align: center;
+  }
+}
+
+.onboarding-pin-inputs {
+  display: flex;
+  width: fit-content;
+  max-width: 100%;
+  margin-inline: auto;
+}
+
+.onboarding-pin-inputs .form-control {
+  flex: 1 1 0;
+  width: auto;
+  min-width: 0;
+  max-width: 3.5rem;
+  height: 3.5rem;
+  padding: 0.25rem;
+  text-align: center;
+  font-size: 1.5rem;
+  line-height: 1;
+  border-radius: 0;
+}
+
+.onboarding-pin-inputs .form-control + .form-control {
+  margin-left: -1px;
+}
+
+.onboarding-pin-inputs .form-control:first-child {
+  border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
+}
+
+.onboarding-pin-inputs .form-control:last-child {
+  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
+}
+
+.onboarding-pin-inputs .form-control:focus {
+  position: relative;
+  z-index: 1;
+}
+
+.onboarding-scanner {
+  position: fixed;
+  z-index: 1050;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.68);
+}
+
+.onboarding-scanner-panel {
+  width: min(100%, 32rem);
+  padding: 1rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius-lg);
+  background: var(--bs-body-bg);
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.onboarding-scanner-video {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: var(--bs-border-radius);
+  background: #000;
+}
+
 .timetable-entries-table-shell {
   overflow: hidden;
   border-bottom-left-radius: calc(var(--bs-border-radius) - 1px);
@@ -1114,11 +1211,15 @@
 
 .screen-command-panel {
   display: grid;
-  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(12rem, 0.7fr);
   gap: 1rem;
   align-items: start;
 }
 
+.screen-command-panel-pairing-only {
+  grid-template-columns: minmax(0, 1fr);
+}
+
 .screen-command-panel-left {
   display: grid;
   gap: 0.85rem;
@@ -1161,6 +1262,28 @@
   line-height: 1.35;
 }
 
+.screen-command-pairing {
+  display: grid;
+  gap: 0.65rem;
+  align-content: start;
+  padding: 0.9rem 0 0.9rem 1rem;
+  border-left: 1px solid var(--bs-border-color);
+}
+
+.screen-command-pairing > div {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.screen-command-pairing .btn {
+  justify-self: start;
+}
+
+.screen-command-panel-pairing-only .screen-command-pairing {
+  padding-left: 0;
+  border-left: 0;
+}
+
 .screen-command-pill {
   display: inline-flex;
   align-items: center;
@@ -1206,6 +1329,11 @@
     border-left: 0;
   }
 
+  .screen-command-pairing {
+    padding: 0;
+    border-left: 0;
+  }
+
   .screen-command-actions {
     justify-content: stretch;
   }
@@ -3331,3 +3459,42 @@ table.table thead th.sort-desc .table-sort-indicator {
 .weather-preview-hourly-item {
   width: 7.5rem;
 }
+
+.gradient-stop-bar {
+  position: relative;
+  height: 2.25rem;
+  padding: 0.45rem 0;
+  cursor: crosshair;
+}
+
+.gradient-stop-bar-track {
+  height: 1.35rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.35rem;
+  background: var(--bs-secondary-bg);
+}
+
+.gradient-stop-bar-handles {
+  position: absolute;
+  inset: 0 0.25rem;
+  pointer-events: none;
+}
+
+.gradient-stop-handle {
+  position: absolute;
+  top: 0.1rem;
+  width: 1rem;
+  height: 2rem;
+  padding: 0;
+  border: 2px solid var(--bs-body-bg);
+  border-radius: 0.35rem;
+  box-shadow: 0 0 0 1px var(--bs-body-color);
+  transform: translateX(-50%);
+  cursor: grab;
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.gradient-stop-handle:active {
+  cursor: grabbing;
+}

src/web/public/js/admin/admin-page.js

@@ -77,6 +77,28 @@
     });
   }
 
+  function updateDataSourceToggle(form, response) {
+    var toggleButton = document.querySelector('button[form="' + form.id + '"][data-async-data-source-toggle]');
+    if (!toggleButton) {
+      return;
+    }
+
+    var willEnable = toggleButton.getAttribute('data-enabled') !== 'true';
+    toggleButton.setAttribute('data-enabled', willEnable ? 'true' : 'false');
+    toggleButton.className = toggleButton.className.replace(/btn-(danger|success)/g, willEnable ? 'btn-danger' : 'btn-success');
+    toggleButton.innerHTML = '<i class="bi ' + (willEnable ? 'bi-pause-fill' : 'bi-play-fill') + ' me-1" aria-hidden="true"></i>' + (willEnable ? 'Disable' : 'Enable');
+
+    var message = '';
+    try {
+      message = new URL(response.url, window.location.href).searchParams.get('message') || '';
+    } catch (_error) {
+      message = '';
+    }
+    if (typeof showToast === 'function') {
+      showToast(message || (willEnable ? 'Data source enabled.' : 'Data source disabled.'), 'success');
+    }
+  }
+
   function initDeleteButtons() {
     document.addEventListener('click', function (event) {
       var deleteButton = event.target.closest('[data-delete-action-url]');
@@ -610,7 +632,7 @@
       } catch (_error) {
         actionPath = String(form.action || '');
       }
-      var shouldReloadAfterSuccess = /^\/announcements\/\d+\/(?:play|stop)$/.test(actionPath) || /^\/data-sources\/(?:api-sources|rss-feeds|weather)\/\d+$/.test(actionPath);
+      var shouldReloadAfterSuccess = /^\/announcements\/\d+\/(?:play|stop)$/.test(actionPath);
 
       event.preventDefault();
 
@@ -641,6 +663,11 @@
           return;
         }
 
+        if (/^\/data-sources\/(?:api-sources|rss-feeds|weather)\/\d+$/.test(actionPath)) {
+          updateDataSourceToggle(form, response);
+          return;
+        }
+
         if (shouldReloadAfterSuccess && response && response.ok) {
           window.location.reload();
           return;

src/web/public/js/dashboard/dashboard-page.js

@@ -7,7 +7,9 @@
   var setButtonVariant = webUiHelpers.setButtonVariant;
   var normalizeDisplayIp = webUiHelpers.normalizeDisplayIp;
   var LIST_PAGE_SIZE = 25;
+  var CLIENT_ROW_REMOVAL_DELAY_MS = 1000;
   var latestDashboardState = null;
+  var pendingClientRowRemovals = {};
 
   function getClientSearchInput() {
     var table = document.getElementById('dashboard-clients-table');
@@ -276,6 +278,21 @@
       return compareClientSortValues(leftValue, rightValue);
     }
 
+    function compareClientNames(leftValue, rightValue) {
+      var leftName = String(leftValue || '').trim();
+      var rightName = String(rightValue || '').trim();
+      if (!leftName && !rightName) {
+        return 0;
+      }
+      if (!leftName) {
+        return 1;
+      }
+      if (!rightName) {
+        return -1;
+      }
+      return leftName.localeCompare(rightName, undefined, { sensitivity: 'base', numeric: true });
+    }
+
     var sortKeys = accessors[normalizedSortKey]
       ? [normalizedSortKey]
       : ['client'];
@@ -283,7 +300,9 @@
     return (Array.isArray(clients) ? clients.slice() : []).sort(function (leftClient, rightClient) {
       for (var index = 0; index < sortKeys.length; index += 1) {
         var sortKeyName = sortKeys[index];
-        var comparison = compareValues(accessors[sortKeyName](leftClient), accessors[sortKeyName](rightClient));
+        var comparison = sortKeyName === 'client'
+          ? compareClientNames(accessors[sortKeyName](leftClient), accessors[sortKeyName](rightClient))
+          : compareValues(accessors[sortKeyName](leftClient), accessors[sortKeyName](rightClient));
 
         if (comparison !== 0) {
           return index === 0 && normalizedDirection === 'desc' ? comparison * -1 : comparison;
@@ -336,7 +355,7 @@
       form: document.getElementById('client-move-screen-form'),
       targetSelect: document.getElementById('client-move-screen-target'),
       connectionInput: document.querySelector('[data-client-move-connection-id]'),
-      deviceInput: document.querySelector('[data-client-move-device-id]'),
+      clientIdInput: document.querySelector('[data-client-move-client-id]'),
       clientNameInput: document.querySelector('[data-client-move-client-name]'),
       playerBaseUrlInput: document.querySelector('[data-client-move-player-base-url]')
     };
@@ -350,7 +369,7 @@
 
     var currentScreenSlug = String(row.getAttribute('data-client-screen-slug') || '').trim();
     var connectionId = String(row.getAttribute('data-client-id') || '').trim();
-    var deviceId = String(row.getAttribute('data-client-device-id') || '').trim();
+    var clientId = String(row.getAttribute('data-client-client-id') || '').trim();
     var playerBaseUrl = String(row.getAttribute('data-client-player-base-url') || '').trim();
     var clientNameCell = row.querySelector('td[data-label="Client"] > div');
     var clientName = String(clientNameCell && clientNameCell.textContent || '').trim();
@@ -367,8 +386,8 @@
     if (elements.connectionInput) {
       elements.connectionInput.value = connectionId;
     }
-    if (elements.deviceInput) {
+    if (elements.clientIdInput) {
-      elements.deviceInput.value = deviceId;
+      elements.clientIdInput.value = clientId;
     }
     if (elements.clientNameInput) {
       elements.clientNameInput.value = clientName;
@@ -687,11 +706,6 @@
       && typeof tbody.removeChild === 'function'
       && typeof document.createElement === 'function';
 
-    if (!visibleClients.length) {
-      tbody.innerHTML = '<tr><td colspan="' + (hasActionsColumn ? '7' : '6') + '" class="empty">No connected clients yet.</td></tr>';
-      return;
-    }
-
     if (!canPatchRows) {
       tbody.innerHTML = visibleClients.map(function (client) {
         return renderClientRow(client, hasActionsColumn);
@@ -704,8 +718,32 @@
       existingRows[String(row.getAttribute('data-client-key') || '').trim()] = row;
     });
 
+    var visibleRowKeys = {};
+    visibleClients.forEach(function (client) {
+      visibleRowKeys[String(getClientRowKey(client) || '').trim()] = true;
+    });
+
+    function getClientIdentity(client) {
+      return [
+        String(client && (client.client_name || client.name || '') || '').trim().toLowerCase(),
+        String(client && (client.player_url || client.playerPublicBaseUrl || '') || '').trim().replace(/\/$/, '').toLowerCase()
+      ].join('|');
+    }
+
+    var visibleClientIdentities = {};
+    visibleClients.forEach(function (client) {
+      var identity = getClientIdentity(client);
+      if (identity !== '|') {
+        visibleClientIdentities[identity] = true;
+      }
+    });
+
     var nextRows = visibleClients.map(function (client) {
       var rowKey = String(getClientRowKey(client) || '').trim();
+      if (pendingClientRowRemovals[rowKey]) {
+        clearTimeout(pendingClientRowRemovals[rowKey]);
+        delete pendingClientRowRemovals[rowKey];
+      }
       var row = existingRows[rowKey] || null;
 
       if (!row) {
@@ -719,6 +757,44 @@
       return Boolean(row);
     });
 
+    Object.keys(existingRows).forEach(function (rowKey) {
+      if (visibleRowKeys[rowKey]) {
+        return;
+      }
+
+      var existingRow = existingRows[rowKey];
+      var existingNameCell = existingRow.querySelector('td[data-label="Client"] > div');
+      var existingIdentity = [
+        String(existingNameCell && existingNameCell.textContent || '').trim().toLowerCase(),
+        String(existingRow.getAttribute('data-client-player-base-url') || '').trim().replace(/\/$/, '').toLowerCase()
+      ].join('|');
+      if (existingIdentity !== '|' && visibleClientIdentities[existingIdentity]) {
+        if (pendingClientRowRemovals[rowKey]) {
+          clearTimeout(pendingClientRowRemovals[rowKey]);
+          delete pendingClientRowRemovals[rowKey];
+        }
+        if (existingRow.parentNode === tbody) {
+          tbody.removeChild(existingRow);
+        }
+        return;
+      }
+
+      if (pendingClientRowRemovals[rowKey]) {
+        return;
+      }
+
+      pendingClientRowRemovals[rowKey] = setTimeout(function () {
+        delete pendingClientRowRemovals[rowKey];
+        var row = existingRows[rowKey];
+        if (row && row.parentNode === tbody && !visibleRowKeys[rowKey]) {
+          tbody.removeChild(row);
+        }
+        if (!tbody.querySelector('tr[data-client-key]')) {
+          tbody.innerHTML = '<tr><td colspan="' + (hasActionsColumn ? '7' : '6') + '" class="empty">No connected clients yet.</td></tr>';
+        }
+      }, CLIENT_ROW_REMOVAL_DELAY_MS);
+    });
+
     nextRows.forEach(function (row, index) {
       var referenceNode = tbody.children[index] || null;
       if (referenceNode !== row) {
@@ -726,8 +802,8 @@
       }
     });
 
-    while (tbody.children.length > nextRows.length) {
+    if (!visibleClients.length && !tbody.querySelector('tr[data-client-key]')) {
-      tbody.removeChild(tbody.lastElementChild);
+      tbody.innerHTML = '<tr><td colspan="' + (hasActionsColumn ? '7' : '6') + '" class="empty">No connected clients yet.</td></tr>';
     }
 
   }

src/web/public/js/onboarding/pair.js

@@ -0,0 +1,431 @@
+(function () {
+  var form = document.getElementById('onboarding-pair-form');
+  var pairingCard = document.getElementById('onboarding-pair-card');
+  var pairingProgress = document.getElementById('onboarding-pair-progress');
+  var message = document.getElementById('onboarding-pair-message');
+  var codeInputsContainer = document.getElementById('onboarding-pair-code-inputs');
+  var codeField = document.getElementById('onboarding-pair-code');
+  var clientIdField = document.getElementById('onboarding-pair-client-id');
+  var anotherButton = document.getElementById('onboarding-pair-another');
+  var anotherButtonLabel = document.getElementById('onboarding-pair-another-label');
+  var manualButton = document.getElementById('onboarding-pair-manual');
+  var connectButton = document.getElementById('onboarding-pair-connect');
+  var clientListButton = document.getElementById('onboarding-pair-client-list');
+  var scanner = document.getElementById('onboarding-scanner');
+  var scannerVideo = document.getElementById('onboarding-scanner-video');
+  var scannerCapture = document.getElementById('onboarding-scanner-capture');
+  var scannerClose = document.getElementById('onboarding-scanner-close');
+  var scannerMessage = document.getElementById('onboarding-scanner-message');
+  var scannerDebugOutput = document.getElementById('onboarding-scanner-debug');
+  var scannerDebug = new URLSearchParams(window.location.search).get('scanner-debug') === '1';
+  if (!form || !message) {
+    return;
+  }
+  function getClientId() {
+    var storageKey = 'pulse-signage-player-client-id';
+    var clientId = clientIdField ? String(clientIdField.value || '').trim() : '';
+    if (!clientId) {
+      try { clientId = String(window.sessionStorage.getItem(storageKey) || '').trim(); } catch (_error) {}
+    }
+    if (!clientId) {
+      clientId = window.crypto && typeof window.crypto.randomUUID === 'function'
+        ? window.crypto.randomUUID()
+        : 'client-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 12);
+      try { window.sessionStorage.setItem(storageKey, clientId); } catch (_error) {}
+    }
+    if (clientIdField) { clientIdField.value = clientId; }
+    return clientId;
+  }
+  getClientId();
+  function traceScanner(value) {
+    if (!scannerDebug || !scannerDebugOutput) { return; }
+    scannerDebugOutput.classList.remove('d-none');
+    var lines = (scannerDebugOutput.textContent ? scannerDebugOutput.textContent.split('\n') : []).filter(Boolean);
+    lines.push(new Date().toISOString().slice(11, 19) + ' ' + value);
+    scannerDebugOutput.textContent = lines.slice(-8).join('\n');
+  }
+
+  var codeInputs = codeInputsContainer ? Array.prototype.slice.call(codeInputsContainer.querySelectorAll('[data-pairing-code-input]')) : [];
+  function normalizeCode(value) {
+    return String(value || '').replace(/[^a-z0-9]/gi, '').toUpperCase().slice(0, codeInputs.length);
+  }
+  function syncCodeField() {
+    if (codeField) {
+      codeField.value = codeInputs.map(function (input) { return input.value; }).join('').toUpperCase();
+    }
+  }
+  function setCode(value, startIndex) {
+    var normalized = normalizeCode(value);
+    var index = startIndex || 0;
+    normalized.split('').forEach(function (character) {
+      if (index < codeInputs.length) {
+        codeInputs[index].value = character;
+        index += 1;
+      }
+    });
+    syncCodeField();
+    if (index < codeInputs.length) {
+      codeInputs[index].focus();
+    } else if (codeInputs.length) {
+      codeInputs[codeInputs.length - 1].focus();
+    }
+  }
+  var scannerStream = null;
+  var scannerFrame = null;
+  var scannerLastDecodeAt = 0;
+  var scannerCanvas = document.createElement('canvas');
+  var scannerWorkCanvas = document.createElement('canvas');
+  var scannerDecodeCanvas = document.createElement('canvas');
+
+  function decodeQrCanvas(canvas) {
+    if (typeof window.jsQR !== 'function') { return null; }
+    var workCanvas = canvas;
+    var maximumDimension = 1024;
+    if (Math.max(canvas.width, canvas.height) > maximumDimension) {
+      var scale = maximumDimension / Math.max(canvas.width, canvas.height);
+      scannerWorkCanvas.width = Math.round(canvas.width * scale);
+      scannerWorkCanvas.height = Math.round(canvas.height * scale);
+      scannerWorkCanvas.getContext('2d').drawImage(canvas, 0, 0, scannerWorkCanvas.width, scannerWorkCanvas.height);
+      workCanvas = scannerWorkCanvas;
+    }
+    var context = workCanvas.getContext('2d', { willReadFrequently: true });
+    var imageData = context.getImageData(0, 0, workCanvas.width, workCanvas.height);
+    var result = window.jsQR(imageData.data, workCanvas.width, workCanvas.height, { inversionAttempts: 'attemptBoth' });
+    if (result) { return result; }
+
+    scannerDecodeCanvas.width = workCanvas.width;
+    scannerDecodeCanvas.height = workCanvas.height;
+    var decodeContext = scannerDecodeCanvas.getContext('2d', { willReadFrequently: true });
+    var source = new Uint8ClampedArray(imageData.data);
+    var cleaned = new Uint8ClampedArray(source.length);
+    for (var cleanY = 0; cleanY < workCanvas.height; cleanY += 1) {
+      for (var cleanX = 0; cleanX < workCanvas.width; cleanX += 1) {
+        var cleanSamples = [];
+        for (var cleanOffsetY = -1; cleanOffsetY <= 1; cleanOffsetY += 1) {
+          for (var cleanOffsetX = -1; cleanOffsetX <= 1; cleanOffsetX += 1) {
+            var cleanSampleX = Math.max(0, Math.min(workCanvas.width - 1, cleanX + cleanOffsetX));
+            var cleanSampleY = Math.max(0, Math.min(workCanvas.height - 1, cleanY + cleanOffsetY));
+            cleanSamples.push(source[(cleanSampleY * workCanvas.width + cleanSampleX) * 4]);
+          }
+        }
+        cleanSamples.sort(function (left, right) { return left - right; });
+        var cleanIndex = (cleanY * workCanvas.width + cleanX) * 4;
+        cleaned[cleanIndex] = cleaned[cleanIndex + 1] = cleaned[cleanIndex + 2] = cleanSamples[4];
+        cleaned[cleanIndex + 3] = 255;
+      }
+    }
+    source = cleaned;
+    var expanded = decodeContext.createImageData(workCanvas.width, workCanvas.height);
+    var radius = Math.max(3, Math.round(workCanvas.width / 205));
+    for (var y = 0; y < workCanvas.height; y += 1) {
+      for (var x = 0; x < workCanvas.width; x += 1) {
+        var samples = [];
+        for (var offsetY = -radius; offsetY <= radius; offsetY += 2) {
+          for (var offsetX = -radius; offsetX <= radius; offsetX += 2) {
+            var sampleX = Math.max(0, Math.min(workCanvas.width - 1, x + offsetX));
+            var sampleY = Math.max(0, Math.min(workCanvas.height - 1, y + offsetY));
+            samples.push(source[(sampleY * workCanvas.width + sampleX) * 4]);
+          }
+        }
+        var maximum = Math.max.apply(null, samples);
+        var index = (y * workCanvas.width + x) * 4;
+        expanded.data[index] = maximum;
+        expanded.data[index + 1] = maximum;
+        expanded.data[index + 2] = maximum;
+        expanded.data[index + 3] = 255;
+      }
+    }
+    decodeContext.putImageData(expanded, 0, 0);
+    return window.jsQR(expanded.data, workCanvas.width, workCanvas.height, { inversionAttempts: 'attemptBoth' });
+  }
+  function closeScanner() {
+    if (scannerFrame) { window.cancelAnimationFrame(scannerFrame); scannerFrame = null; }
+    if (scannerStream) {
+      scannerStream.getTracks().forEach(function (track) { track.stop(); });
+      scannerStream = null;
+    }
+    if (scannerVideo) {
+      scannerVideo.srcObject = null;
+      scannerVideo.classList.remove('d-none');
+    }
+    if (scannerCapture) { scannerCapture.value = ''; }
+    if (scanner) {
+      scanner.classList.add('d-none');
+      scanner.setAttribute('aria-hidden', 'true');
+    }
+  }
+  function resetPairingForm() {
+    form.reset();
+    codeInputsContainer.setAttribute('data-pairing-code', '');
+    codeInputs.forEach(function (input) { input.value = ''; input.disabled = false; });
+    if (codeField) { codeField.value = ''; }
+    Array.prototype.slice.call(form.elements).forEach(function (element) {
+      if (element !== anotherButton && element !== manualButton) { element.disabled = false; }
+    });
+    if (connectButton) { connectButton.classList.remove('d-none'); }
+    if (clientListButton) { clientListButton.classList.add('d-none'); }
+    if (pairingCard) { pairingCard.classList.remove('is-pairing'); }
+    if (pairingProgress) { pairingProgress.classList.add('d-none'); }
+    message.className = 'alert d-none';
+    message.textContent = '';
+    if (anotherButton) {
+      anotherButton.classList.remove('btn-secondary');
+      anotherButton.classList.add('btn-outline-secondary');
+      anotherButton.setAttribute('aria-label', 'Scan player QR code');
+      anotherButton.setAttribute('title', 'Scan player QR code');
+    }
+    if (anotherButtonLabel) { anotherButtonLabel.classList.add('d-none'); }
+    if (manualButton) { manualButton.classList.add('d-none'); }
+  }
+  function codeFromScan(rawValue) {
+    try {
+      var scannedUrl = new URL(String(rawValue || ''), window.location.origin);
+      if (scannedUrl.pathname === '/pairing') {
+        return normalizeCode(scannedUrl.searchParams.get('code'));
+      }
+    } catch (_error) {}
+    return normalizeCode(rawValue);
+  }
+  function applyScannedCode(rawValue) {
+    var code = codeFromScan(rawValue);
+    if (code.length !== codeInputs.length) {
+      scannerMessage.textContent = 'That QR code is not a Pulse Signage pairing code.';
+      return false;
+    }
+    closeScanner();
+    resetPairingForm();
+    setCode(code, 0);
+    return true;
+  }
+  function scanFrame() {
+    if (!scannerVideo || !scannerStream) { return; }
+    if (Date.now() - scannerLastDecodeAt < 400) {
+      scannerFrame = window.requestAnimationFrame(scanFrame);
+      return;
+    }
+    scannerLastDecodeAt = Date.now();
+    if (!window.BarcodeDetector && typeof window.jsQR === 'function') {
+      var width = scannerVideo.videoWidth;
+      var height = scannerVideo.videoHeight;
+      if (width && height) {
+        traceScanner('frame ' + width + 'x' + height);
+        scannerCanvas.width = width;
+        scannerCanvas.height = height;
+        var context = scannerCanvas.getContext('2d', { willReadFrequently: true });
+        context.drawImage(scannerVideo, 0, 0, width, height);
+        var result = decodeQrCanvas(scannerCanvas);
+        traceScanner(result ? 'decoded' : 'no QR');
+        if (result && applyScannedCode(result.data)) { return; }
+        scannerFrame = window.requestAnimationFrame(scanFrame);
+        return;
+      }
+      scannerFrame = window.requestAnimationFrame(scanFrame);
+      return;
+    }
+    scannerVideo.__pairingBarcodeDetector.detect(scannerVideo).then(function (barcodes) {
+      if (barcodes.length) {
+        if (applyScannedCode(barcodes[0].rawValue)) { return; }
+      }
+      scannerFrame = window.requestAnimationFrame(scanFrame);
+    }).catch(function () {
+      scannerFrame = window.requestAnimationFrame(scanFrame);
+    });
+  }
+  function openScanner() {
+    if (!scanner || !scannerVideo || (!window.BarcodeDetector && typeof window.jsQR !== 'function')) {
+      message.className = 'alert alert-warning';
+      message.textContent = 'Camera scanning is not supported by this browser.';
+      return;
+    }
+    scannerMessage.textContent = 'Point your camera at the player QR code.';
+    traceScanner('open BarcodeDetector=' + Boolean(window.BarcodeDetector) + ' jsQR=' + (typeof window.jsQR === 'function'));
+    scannerVideo.classList.remove('d-none');
+    scanner.classList.remove('d-none');
+    scanner.setAttribute('aria-hidden', 'false');
+    if (window.BarcodeDetector) {
+      scannerVideo.__pairingBarcodeDetector = new window.BarcodeDetector({ formats: ['qr_code'] });
+    }
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+      traceScanner('getUserMedia unavailable');
+      scannerVideo.classList.add('d-none');
+      scannerMessage.textContent = 'Use the camera to capture the player QR code.';
+      if (scannerCapture) { scannerCapture.click(); }
+      return;
+    }
+    navigator.mediaDevices.getUserMedia({
+      video: {
+        facingMode: { ideal: 'environment' },
+        width: { ideal: 1280 },
+        height: { ideal: 720 },
+        focusMode: { ideal: 'continuous' }
+      },
+      audio: false
+    }).then(function (stream) {
+      scannerStream = stream;
+      traceScanner('stream opened');
+      traceScanner(JSON.stringify(stream.getVideoTracks()[0].getSettings ? stream.getVideoTracks()[0].getSettings() : {}));
+      scannerVideo.srcObject = stream;
+      return scannerVideo.play();
+    }).then(function () {
+      scannerFrame = window.requestAnimationFrame(scanFrame);
+    }).catch(function () {
+      traceScanner('stream failed');
+      scannerVideo.classList.add('d-none');
+      scannerMessage.textContent = 'Use the camera to capture the player QR code.';
+      if (scannerCapture) { scannerCapture.click(); }
+    });
+  }
+  if (codeInputs.length) {
+    setCode(codeInputsContainer.getAttribute('data-pairing-code'), 0);
+    codeInputs.forEach(function (input, index) {
+      input.addEventListener('input', function () {
+        var value = normalizeCode(input.value);
+        input.value = value.slice(0, 1);
+        if (value.length > 1) {
+          setCode(value, index);
+        } else {
+          syncCodeField();
+          if (input.value && index < codeInputs.length - 1) {
+            codeInputs[index + 1].focus();
+          }
+        }
+      });
+      input.addEventListener('paste', function (event) {
+        event.preventDefault();
+        setCode(event.clipboardData ? event.clipboardData.getData('text') : '', index);
+      });
+      input.addEventListener('keydown', function (event) {
+        if (event.key === 'Backspace' && !input.value && index > 0) {
+          codeInputs[index - 1].focus();
+          codeInputs[index - 1].value = '';
+          syncCodeField();
+        } else if (event.key === 'ArrowLeft' && index > 0) {
+          event.preventDefault();
+          codeInputs[index - 1].focus();
+        } else if (event.key === 'ArrowRight' && index < codeInputs.length - 1) {
+          event.preventDefault();
+          codeInputs[index + 1].focus();
+        }
+      });
+    });
+  }
+
+  form.addEventListener('submit', function (event) {
+    event.preventDefault();
+    getClientId();
+    syncCodeField();
+    if (!codeField || codeField.value.length !== codeInputs.length) {
+      message.className = 'alert alert-warning';
+      message.textContent = 'Enter the complete six-character pairing code.';
+      var firstEmptyInput = codeInputs.filter(function (input) { return !input.value; })[0] || codeInputs[0];
+      if (firstEmptyInput) { firstEmptyInput.focus(); }
+      return;
+    }
+    message.className = 'alert alert-info';
+    message.textContent = 'Pairing player...';
+    var pairingBody = new URLSearchParams(new FormData(form)).toString();
+    if (pairingCard) { pairingCard.classList.add('is-pairing'); }
+    if (pairingProgress) { pairingProgress.classList.remove('d-none'); }
+    Array.prototype.slice.call(form.elements).forEach(function (element) {
+      if (element !== anotherButton && element !== manualButton) { element.disabled = true; }
+    });
+    fetch(form.action, {
+      method: 'POST',
+      headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+      body: pairingBody
+    }).then(function (response) {
+      return response.text().then(function (text) {
+        var payload = null;
+        try { payload = JSON.parse(text); } catch (_error) {}
+        if (!response.ok) {
+          throw new Error(payload && payload.error ? payload.error : 'Unable to pair player.');
+        }
+        if (payload && payload.queued) {
+          message.className = 'alert alert-info';
+          message.textContent = 'Pairing is still being completed. Keep this page open and wait for confirmation.';
+          return;
+        }
+        message.className = 'alert alert-success';
+        message.textContent = 'Pairing saved. The player is loading your screen.';
+        if (pairingCard) { pairingCard.classList.remove('is-pairing'); }
+        if (pairingProgress) { pairingProgress.classList.add('d-none'); }
+        Array.prototype.slice.call(form.elements).forEach(function (element) {
+          if (element !== anotherButton && element !== manualButton) { element.disabled = true; }
+        });
+        if (connectButton) { connectButton.classList.add('d-none'); }
+        if (clientListButton) { clientListButton.classList.remove('d-none'); }
+        if (anotherButton) {
+          anotherButton.classList.remove('d-none');
+          anotherButton.classList.remove('btn-outline-secondary');
+          anotherButton.classList.add('btn-secondary');
+          anotherButton.setAttribute('aria-label', 'Pair another screen');
+          anotherButton.setAttribute('title', 'Pair another screen');
+        }
+        if (anotherButtonLabel) { anotherButtonLabel.classList.remove('d-none'); }
+        if (manualButton) { manualButton.classList.remove('d-none'); }
+      });
+    }).catch(function (error) {
+      if (pairingCard) { pairingCard.classList.remove('is-pairing'); }
+      if (pairingProgress) { pairingProgress.classList.add('d-none'); }
+      Array.prototype.slice.call(form.elements).forEach(function (element) {
+        if (element !== anotherButton && element !== manualButton) { element.disabled = false; }
+      });
+      message.className = 'alert alert-danger';
+      message.textContent = error && error.message ? error.message : 'Unable to pair player.';
+    });
+  });
+
+  if (anotherButton) { anotherButton.addEventListener('click', openScanner); }
+  if (manualButton) {
+    manualButton.addEventListener('click', function () {
+      resetPairingForm();
+      if (codeInputs[0]) { codeInputs[0].focus(); }
+    });
+  }
+  if (scannerClose) { scannerClose.addEventListener('click', closeScanner); }
+  if (scannerCapture) {
+    scannerCapture.addEventListener('change', function () {
+      var file = scannerCapture.files && scannerCapture.files[0];
+      if (!file) { return; }
+      scannerMessage.textContent = 'Reading QR code...';
+      var image = new Image();
+      image.onload = function () {
+        if (window.BarcodeDetector) {
+          new window.BarcodeDetector({ formats: ['qr_code'] }).detect(image).then(function (barcodes) {
+            if (!barcodes.length || !applyScannedCode(barcodes[0].rawValue)) {
+              scannerMessage.textContent = 'Could not find a Pulse Signage QR code in that image.';
+            }
+          }).catch(function () {
+            scannerMessage.textContent = 'Could not read that QR image. Try again.';
+          });
+          return;
+        }
+        try {
+          var canvas = document.createElement('canvas');
+          canvas.width = image.naturalWidth;
+          canvas.height = image.naturalHeight;
+          var context = canvas.getContext('2d', { willReadFrequently: true });
+          context.drawImage(image, 0, 0);
+          var result = decodeQrCanvas(canvas);
+          if (!result || !applyScannedCode(result.data)) {
+            scannerMessage.textContent = 'Could not find a Pulse Signage QR code in that image.';
+          }
+        } catch (_error) {
+          scannerMessage.textContent = 'Could not read that QR image. Try again.';
+        }
+      };
+      image.onerror = function () {
+        scannerMessage.textContent = 'Could not read that QR image. Try again.';
+      };
+      var reader = new FileReader();
+      reader.onload = function () { image.src = reader.result; };
+      reader.onerror = function () { scannerMessage.textContent = 'Could not read that QR image. Try again.'; };
+      reader.readAsDataURL(file);
+    });
+  }
+  if (scanner) {
+    scanner.addEventListener('click', function (event) {
+      if (event.target === scanner) { closeScanner(); }
+    });
+  }
+}());

src/web/public/js/slides/slide-form.js

@@ -87,7 +87,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     return templates.find(function (item) { return Number(item.id) === Number(id); }) || null;
   }
 
-  function applyBackdropStyle(element, backgroundColor, backgroundImagePath) {
+  function applyBackdropStyle(element, backgroundColor, backgroundImagePath, backgroundGradient) {
     if (!element) {
       return;
     }
@@ -107,7 +107,21 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
 
     var color = String(backgroundColor || '#111111').trim() || '#111111';
     element.style.backgroundColor = color;
-    element.style.backgroundImage = 'none';
+    var gradient = '';
+    try {
+      var gradientData = typeof backgroundGradient === 'string' ? JSON.parse(backgroundGradient) : backgroundGradient;
+      if (gradientData && gradientData.type === 'linear' && Array.isArray(gradientData.colors) && gradientData.colors.length >= 2) {
+        var stops = Array.isArray(gradientData.stops) ? gradientData.stops : (gradientData.colors || []).map(function (color, index, colors) { return { color: color, position: colors.length > 1 ? Math.round(index * 100 / (colors.length - 1)) : 0 }; });
+        stops = stops.filter(function (stop) { return stop && /^#[0-9a-fA-F]{3,8}$/.test(String(stop.color || '').trim()); }).slice(0, 12);
+        if (stops.length >= 2) {
+          var angle = Number(gradientData.angle);
+          gradient = 'linear-gradient(' + (Number.isFinite(angle) ? Math.max(0, Math.min(360, angle)) : 90) + 'deg,' + stops.map(function (stop) { return stop.color + ' ' + Math.max(0, Math.min(100, Number(stop.position) || 0)) + '%'; }).join(',') + ')';
+        }
+      }
+    } catch (_error) {
+      gradient = '';
+    }
+    element.style.backgroundImage = gradient || 'none';
     element.style.backgroundPosition = 'center';
     element.style.backgroundSize = '100% 100%';
     element.style.backgroundRepeat = 'no-repeat';
@@ -471,6 +485,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
       canvasHeight: currentPreviewCanvasHeight || Math.max(1, Number(template && template.canvas_size_height ? template.canvas_size_height : 1080)),
       backgroundColor: template && template.background_color ? String(template.background_color) : '#111111',
       backgroundImagePath: template && template.background_image_path ? String(template.background_image_path) : '',
+      backgroundGradient: template && template.background_gradient ? String(template.background_gradient) : '',
       fontStylesheetHref: fontStylesheetHref
     };
   }
@@ -591,7 +606,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     currentPreviewCanvasWidth = canvasWidth;
     currentPreviewCanvasHeight = canvasHeight;
     slidePreviewStage.style.aspectRatio = canvasWidth + ' / ' + canvasHeight;
-    applyBackdropStyle(slidePreviewStage, template.background_color || '#111111', template.background_image_path);
+    applyBackdropStyle(slidePreviewStage, template.background_color || '#111111', template.background_image_path, template.background_gradient);
     slidePreviewMeta.textContent = canvasWidth + 'x' + canvasHeight;
     if (!(template.regions || []).length) {
       slidePreviewEmpty.style.display = 'flex';

src/web/public/js/templates/template-designer.js

@@ -33,6 +33,18 @@
   var canvasHeightInput = document.getElementById('canvas-height');
   var backgroundInput = document.getElementById('background-image');
   var backgroundColorInput = document.getElementById('background-color');
+  var backgroundGradientEnabled = document.getElementById('background-gradient-enabled');
+  var backgroundGradientInput = document.getElementById('background-gradient');
+  var backgroundGradientOptions = document.getElementById('background-gradient-options');
+  var backgroundGradientAngle = document.getElementById('background-gradient-angle');
+  var backgroundGradientAngleOutput = document.getElementById('background-gradient-angle-output');
+  var backgroundGradientBar = document.getElementById('background-gradient-bar');
+  var backgroundGradientBarHandles = document.getElementById('background-gradient-bar-handles');
+  var backgroundGradientStops = document.getElementById('background-gradient-stops');
+  var backgroundGradientAddStop = document.getElementById('background-gradient-add-stop');
+  var draggedGradientStopIndex = -1;
+  var draggedGradientStopRow = null;
+  var draggedGradientStopHandle = null;
   var backgroundPreview = document.getElementById('background-preview');
   var backgroundEmpty = document.getElementById('background-empty');
   var removeBackgroundButton = document.getElementById('remove-background-image');
@@ -1117,6 +1129,65 @@
       return;
     }
     stage.style.backgroundColor = backgroundColorInput && backgroundColorInput.value ? backgroundColorInput.value : '#111111';
+    if (backgroundGradientEnabled && backgroundGradientEnabled.checked) {
+      var gradientStops = Array.prototype.map.call(backgroundGradientStops.querySelectorAll('[data-gradient-stop]'), function (stop) {
+        return { color: stop.querySelector('[data-gradient-stop-color]').value, position: Number(stop.querySelector('[data-gradient-stop-position]').value || 0) };
+      });
+      var gradient = { type: 'linear', stops: gradientStops, angle: Number(backgroundGradientAngle.value || 90) };
+      backgroundGradientInput.value = JSON.stringify(gradient);
+      stage.style.backgroundImage = 'linear-gradient(' + gradient.angle + 'deg,' + gradient.stops.map(function (stop) { return stop.color + ' ' + stop.position + '%'; }).join(',') + ')';
+      var gradientBarTrack = backgroundGradientBar && backgroundGradientBar.querySelector('.gradient-stop-bar-track');
+      if (gradientBarTrack) gradientBarTrack.style.background = stage.style.backgroundImage;
+      backgroundGradientOptions.hidden = false;
+    } else {
+      backgroundGradientInput.value = '';
+      stage.style.backgroundImage = 'none';
+      var emptyGradientBarTrack = backgroundGradientBar && backgroundGradientBar.querySelector('.gradient-stop-bar-track');
+      if (emptyGradientBarTrack) emptyGradientBarTrack.style.background = 'var(--bs-secondary-bg)';
+      backgroundGradientOptions.hidden = true;
+    }
+    if (backgroundGradientAngleOutput) backgroundGradientAngleOutput.value = String(backgroundGradientAngle.value || 90);
+  }
+
+  function renderBackgroundGradientStops(stops) {
+    if (!backgroundGradientStops) return;
+    var normalizedStops = Array.isArray(stops) && stops.length >= 2 ? stops : [{ color: '#111111', position: 0 }, { color: '#334455', position: 100 }];
+    if (backgroundGradientBarHandles) {
+      backgroundGradientBarHandles.innerHTML = normalizedStops.map(function (stop, index) {
+        return '<button type="button" class="gradient-stop-handle" data-gradient-bar-index="' + index + '" style="left:' + Math.max(0, Math.min(100, Number(stop.position) || 0)) + '%;background:' + escapeHtml(stop.color || '#111111') + ';" aria-label="Gradient stop ' + (index + 1) + '"></button>';
+      }).join('');
+      if (backgroundGradientBar) backgroundGradientBar.style.background = 'transparent';
+    }
+    backgroundGradientStops.innerHTML = normalizedStops.map(function (stop) {
+      return '<div class="d-flex align-items-end gap-2" data-gradient-stop><label class="flex-grow-1">Colour<input type="color" class="form-control form-control-color w-100" data-gradient-stop-color value="' + escapeHtml(stop.color || '#111111') + '" /></label><label style="width:6rem">Position<input type="number" class="form-control" data-gradient-stop-position min="0" max="100" value="' + Math.max(0, Math.min(100, Number(stop.position) || 0)) + '" /></label><button type="button" class="btn btn-outline-danger" data-gradient-stop-remove aria-label="Remove colour stop">&times;</button></div>';
+    }).join('');
+    updateGradientStopRemoveButtons();
+  }
+
+  function updateGradientStopRemoveButtons() {
+    if (!backgroundGradientStops) return;
+    var stops = backgroundGradientStops.querySelectorAll('[data-gradient-stop]');
+    Array.prototype.forEach.call(stops, function (stop) { stop.querySelector('[data-gradient-stop-remove]').disabled = stops.length <= 2; });
+  }
+
+  function syncBackgroundGradientBar() {
+    if (!backgroundGradientStops || !backgroundGradientBarHandles) return;
+    var rows = backgroundGradientStops.querySelectorAll('[data-gradient-stop]');
+    if (backgroundGradientBarHandles.children.length !== rows.length) {
+      backgroundGradientBarHandles.innerHTML = Array.prototype.map.call(rows, function (row, index) {
+        var color = row.querySelector('[data-gradient-stop-color]').value || '#111111';
+        var position = Math.max(0, Math.min(100, Number(row.querySelector('[data-gradient-stop-position]').value) || 0));
+        return '<button type="button" class="gradient-stop-handle" data-gradient-bar-index="' + index + '" style="left:' + position + '%;background:' + escapeHtml(color) + ';" aria-label="Gradient stop ' + (index + 1) + '"></button>';
+      }).join('');
+      return;
+    }
+    Array.prototype.forEach.call(rows, function (row, index) {
+      var handle = backgroundGradientBarHandles.children[index];
+      if (!handle) return;
+      handle.style.background = row.querySelector('[data-gradient-stop-color]').value || '#111111';
+      handle.style.left = Math.max(0, Math.min(100, Number(row.querySelector('[data-gradient-stop-position]').value) || 0)) + '%';
+      handle.setAttribute('data-gradient-bar-index', index);
+    });
   }
 
   function updateRegionLockBadge(card) {
@@ -1757,6 +1828,79 @@
   if (backgroundColorInput) {
     backgroundColorInput.addEventListener('input', updateStageBackgroundColor);
   }
+  if (backgroundGradientEnabled) backgroundGradientEnabled.addEventListener('change', updateStageBackgroundColor);
+  if (backgroundGradientAddStop) backgroundGradientAddStop.addEventListener('click', function () {
+    var stops = Array.prototype.map.call(backgroundGradientStops.querySelectorAll('[data-gradient-stop]'), function (stop) {
+      return { color: stop.querySelector('[data-gradient-stop-color]').value, position: Number(stop.querySelector('[data-gradient-stop-position]').value || 0) };
+    });
+    stops.push({ color: '#ffffff', position: 100 });
+    renderBackgroundGradientStops(stops);
+    updateStageBackgroundColor();
+  });
+  if (backgroundGradientStops) backgroundGradientStops.addEventListener('input', function () {
+    syncBackgroundGradientBar();
+    updateStageBackgroundColor();
+  });
+  if (backgroundGradientStops) backgroundGradientStops.addEventListener('click', function (event) {
+    var removeButton = event.target.closest('[data-gradient-stop-remove]');
+    if (!removeButton || removeButton.disabled) return;
+    removeButton.closest('[data-gradient-stop]').remove();
+    updateGradientStopRemoveButtons();
+    syncBackgroundGradientBar();
+    updateStageBackgroundColor();
+  });
+  if (backgroundGradientBar) backgroundGradientBar.addEventListener('click', function (event) {
+    if (event.target.closest('[data-gradient-bar-index]')) return;
+    var rect = backgroundGradientBar.getBoundingClientRect();
+    var position = Math.max(0, Math.min(100, Math.round(((event.clientX - rect.left) / rect.width) * 100)));
+    var stops = Array.prototype.map.call(backgroundGradientStops.querySelectorAll('[data-gradient-stop]'), function (stop) { return { color: stop.querySelector('[data-gradient-stop-color]').value, position: Number(stop.querySelector('[data-gradient-stop-position]').value || 0) }; });
+    stops.push({ color: '#ffffff', position: position });
+    stops.sort(function (left, right) { return left.position - right.position; });
+    renderBackgroundGradientStops(stops);
+    updateStageBackgroundColor();
+  });
+  if (backgroundGradientBarHandles) backgroundGradientBarHandles.addEventListener('pointerdown', function (event) {
+    var handle = event.target.closest('[data-gradient-bar-index]');
+    if (!handle) return;
+    draggedGradientStopIndex = Number(handle.getAttribute('data-gradient-bar-index'));
+    draggedGradientStopRow = backgroundGradientStops.querySelectorAll('[data-gradient-stop]')[draggedGradientStopIndex] || null;
+    draggedGradientStopHandle = handle;
+    handle.classList.add('is-dragging');
+    handle.setPointerCapture(event.pointerId);
+    event.preventDefault();
+  });
+  document.addEventListener('pointermove', function (event) {
+    if (draggedGradientStopIndex < 0) return;
+    var rect = backgroundGradientBar.getBoundingClientRect();
+    var position = Math.max(0, Math.min(100, Math.round(((event.clientX - rect.left) / rect.width) * 100)));
+    if (draggedGradientStopRow) draggedGradientStopRow.querySelector('[data-gradient-stop-position]').value = position;
+    if (draggedGradientStopHandle) draggedGradientStopHandle.style.left = position + '%';
+    var entries = Array.prototype.map.call(backgroundGradientStops.querySelectorAll('[data-gradient-stop]'), function (row, index) {
+      return { row: row, handle: backgroundGradientBarHandles.children[index], position: Number(row.querySelector('[data-gradient-stop-position]').value || 0), index: index };
+    });
+    entries.sort(function (left, right) { return left.position - right.position || left.index - right.index; });
+    entries.forEach(function (entry, index) {
+      backgroundGradientStops.appendChild(entry.row);
+      backgroundGradientBarHandles.appendChild(entry.handle);
+      entry.handle.setAttribute('data-gradient-bar-index', index);
+    });
+    draggedGradientStopIndex = entries.findIndex(function (entry) { return entry.row === draggedGradientStopRow; });
+    updateStageBackgroundColor();
+  });
+  document.addEventListener('pointerup', function () {
+    if (draggedGradientStopHandle) draggedGradientStopHandle.classList.remove('is-dragging');
+    draggedGradientStopIndex = -1;
+    draggedGradientStopRow = null;
+    draggedGradientStopHandle = null;
+  });
+  document.addEventListener('pointercancel', function () {
+    draggedGradientStopIndex = -1;
+    draggedGradientStopRow = null;
+    draggedGradientStopHandle = null;
+  });
+  [backgroundGradientAngle].forEach(function (input) {
+    if (input) input.addEventListener('input', updateStageBackgroundColor);
+  });
   canvasSizeSelect.addEventListener('change', function () { syncCanvasSizeSelection(); render(); });
   canvasWidthInput.addEventListener('input', render);
   canvasHeightInput.addEventListener('input', render);
@@ -1858,6 +2002,19 @@
     });
   }
 
+  if (backgroundGradientInput && backgroundGradientInput.value) {
+    try {
+      var initialGradient = JSON.parse(backgroundGradientInput.value);
+      if (initialGradient) {
+        var initialStops = Array.isArray(initialGradient.stops) ? initialGradient.stops : (initialGradient.colors || []).map(function (color, index, colors) { return { color: color, position: colors.length > 1 ? Math.round(index * 100 / (colors.length - 1)) : 0 }; });
+        renderBackgroundGradientStops(initialStops);
+        if (backgroundGradientAngle && Number.isFinite(Number(initialGradient.angle))) backgroundGradientAngle.value = String(Math.max(0, Math.min(360, Number(initialGradient.angle))));
+      }
+    } catch (_error) {
+      backgroundGradientInput.value = '';
+    }
+  }
+  if (backgroundGradientStops && !backgroundGradientStops.children.length) renderBackgroundGradientStops();
   renderRegionList(existingRegions);
   syncCanvasSizeSelection();
   updateStageBackgroundColor();

src/web/public/js/web-ui-helpers.js

@@ -133,12 +133,7 @@
   }
 
   function getClientRowKey(client) {
-    var clientName = String(client && client.client_name ? client.client_name : '').trim();
+    return String(client && client.id ? client.id : client && client.clientId ? client.clientId : client && client.screen_slug ? client.screen_slug : client && client.deviceId ? client.deviceId : '').trim();
-    if (clientName) {
-      return clientName;
-    }
-
-    return String(client && client.screen_slug ? client.screen_slug : client && client.deviceId ? client.deviceId : client && client.id ? client.id : client && client.clientId ? client.clientId : '').trim();
   }
 
   function getClientDisplayName(client) {

src/web/routes/admin/client-commands.js

@@ -1,6 +1,6 @@
 // Admin client command routes for connected screens.
 
-const { commitDeviceBinding } = require('#src/player/onboarding');
+const { createPageAuthToken } = require('#src/request-auth');
 
 module.exports = function registerScreenCommandRoutes(app, deps) {
   const pool = deps.pool;
@@ -227,7 +227,9 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
       }
 
       if (command === 'setclientname') {
-        const deviceId = String((req.body && (req.body.deviceId || req.body.clientId || req.body.connectionId)) || req.query.deviceId || req.query.clientId || req.query.connectionId || '').trim();
+        const physicalDeviceId = String((req.body && req.body.deviceId) || req.query.deviceId || '').trim();
+        const clientId = String((req.body && req.body.clientId) || req.query.clientId || '').trim();
+        const deviceId = physicalDeviceId || clientId || String((req.body && req.body.connectionId) || req.query.connectionId || '').trim();
         const clientName = String((req.body && req.body.clientName) || req.query.clientName || '').trim();
         if (!deviceId) {
           return res.status(400).json({ error: 'Device ID is required' });
@@ -236,13 +238,26 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
           return res.status(400).json({ error: 'Client name is required' });
         }
 
-        const [currentRows] = await pool.query(
+        let bindingDeviceId = deviceId;
+        let [currentRows] = await pool.query(
           `SELECT client_name
            FROM d_onboarding_devices
            WHERE device_id = ?
            LIMIT 1`,
-          [deviceId]
+          [clientId || deviceId]
         );
+        if (!currentRows.length && clientId && physicalDeviceId) {
+          bindingDeviceId = physicalDeviceId;
+          [currentRows] = await pool.query(
+            `SELECT client_name
+             FROM d_onboarding_devices
+             WHERE device_id = ?
+             LIMIT 1`,
+            [physicalDeviceId]
+          );
+        } else if (clientId) {
+          bindingDeviceId = clientId;
+        }
         const onboardingRow = currentRows[0] || null;
         const currentName = String(onboardingRow && onboardingRow.client_name ? onboardingRow.client_name : '').trim();
         if (currentName && currentName.toLowerCase() === clientName.toLowerCase()) {
@@ -282,7 +297,7 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
             liveConnections = [];
           }
 
-          const available = await isClientNameAvailable(pool, clientName, deviceId, liveConnections);
+          const available = await isClientNameAvailable(pool, clientName, bindingDeviceId, liveConnections);
           if (!available) {
             return res.status(409).json({ error: 'Client name already exists.' });
           }
@@ -321,11 +336,10 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
           }
 
           const [updateResult] = await pool.query(
-            `UPDATE d_onboarding_devices pod
+            `UPDATE d_onboarding_devices
-             JOIN d_screens s ON s.id = pod.screen_id
+             SET client_name = ?, modified_at = CURRENT_TIMESTAMP
-             SET pod.client_name = ?, pod.modified_at = CURRENT_TIMESTAMP
+             WHERE device_id = ?`,
-             WHERE s.slug = ? AND pod.device_id = ?`,
+            [clientName, bindingDeviceId]
-            [clientName, slug, deviceId]
           );
           if (!updateResult.affectedRows) {
             return res.status(404).json({ error: 'Client not found' });
@@ -344,24 +358,43 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
       }
 
       if (command === 'moveclient') {
-        const deviceId = String((req.body && (req.body.deviceId || req.body.clientId || req.body.connectionId)) || req.query.deviceId || req.query.clientId || req.query.connectionId || '').trim();
+        const legacyDeviceId = String((req.body && req.body.deviceId) || req.query.deviceId || '').trim();
+        let physicalPlayerId = '';
+        const tabClientId = String((req.body && req.body.clientId) || req.query.clientId || '').trim();
         const clientName = String((req.body && req.body.clientName) || req.query.clientName || '').trim();
         const targetScreenSlug = String((req.body && (req.body.targetScreenSlug || req.body.screenSlug)) || req.query.targetScreenSlug || req.query.screenSlug || '').trim();
+        const submittedPlayerBaseUrl = normalizeExplicitPlayerBaseUrl(playerBaseUrl);
 
-        if (!deviceId) {
+        if (!connectionId && !submittedPlayerBaseUrl && !legacyDeviceId) {
-          return res.status(400).json({ error: 'Device ID is required' });
+          return res.status(400).json({ error: 'Client connection is required' });
         }
         if (!targetScreenSlug) {
           return res.status(400).json({ error: 'Target screen is required' });
         }
 
+        if (submittedPlayerBaseUrl) {
+          const [playerRows] = await pool.query(
+            'SELECT identifier FROM d_players WHERE public_base_url = ? LIMIT 1',
+            [submittedPlayerBaseUrl]
+          );
+          const registeredPlayerId = String(playerRows[0] && playerRows[0].identifier || '').trim();
+          if (registeredPlayerId) {
+            physicalPlayerId = registeredPlayerId;
+          }
+        }
+
+        physicalPlayerId = physicalPlayerId || legacyDeviceId;
+        if (!physicalPlayerId) {
+          return res.status(400).json({ error: 'Registered player identity is required' });
+        }
+
         const [currentRows] = await pool.query(
           `SELECT d.client_name, s.slug AS current_screen_slug
            FROM d_onboarding_devices d
            LEFT JOIN d_screens s ON s.id = d.screen_id
            WHERE d.device_id = ?
            LIMIT 1`,
-          [deviceId]
+          [physicalPlayerId]
         );
         const onboardingRow = currentRows[0] || null;
         const resolvedClientName = String(clientName || onboardingRow && onboardingRow.client_name || '').trim();
@@ -371,13 +404,13 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
           return res.status(400).json({ error: 'Client name is required' });
         }
 
-        if (currentScreenSlug && currentScreenSlug === targetScreenSlug) {
+        if (!connectionId && currentScreenSlug && currentScreenSlug === targetScreenSlug) {
           return res.json({
             screen: screenRows[0],
             screenSlug: slug,
             command: command,
             connectionId: connectionId || null,
-            deviceId: deviceId,
+            deviceId: physicalPlayerId,
             clientName: resolvedClientName,
             targetScreenSlug: targetScreenSlug,
             ok: true,
@@ -385,19 +418,78 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
           });
         }
 
-        if (typeof commitDeviceBinding !== 'function') {
-          return res.status(500).json({ error: 'Client binding is unavailable.' });
-        }
-
         const liveConnections = await fetchScreenConnections(slug);
-
+        let status = null;
-        const status = await commitDeviceBinding(pool, deviceId, resolvedClientName, targetScreenSlug, isClientNameAvailable, liveConnections);
+        if (onboardingRow) {
+          const [targetRows] = await pool.query('SELECT id, name, slug FROM d_screens WHERE slug = ? LIMIT 1', [targetScreenSlug]);
+          if (!targetRows.length) {
+            return res.status(404).json({ error: 'Target screen not found' });
+          }
+          if (tabClientId) {
+            const [tabUpdateResult] = await pool.query(
+              `UPDATE d_onboarding_devices
+               SET client_name = ?, screen_id = ?, modified_at = CURRENT_TIMESTAMP
+               WHERE device_id = ?`,
+              [resolvedClientName, targetRows[0].id, tabClientId]
+            );
+            if (!tabUpdateResult.affectedRows) {
+              await pool.query(
+                `INSERT INTO d_onboarding_devices (device_id, client_name, screen_id)
+                 VALUES (?, ?, ?)`,
+                [tabClientId, resolvedClientName, targetRows[0].id]
+              );
+            }
+          } else {
+            await pool.query(
+              `UPDATE d_onboarding_devices
+               SET screen_id = ?, modified_at = CURRENT_TIMESTAMP
+               WHERE device_id = ?`,
+              [targetRows[0].id, physicalPlayerId]
+            );
+          }
+          const stablePlayerBaseUrl = normalizeExplicitPlayerBaseUrl(playerBaseUrl);
+          if (stablePlayerBaseUrl && !tabClientId) {
+            const [playerRows] = await pool.query(
+              'SELECT identifier FROM d_players WHERE public_base_url = ? LIMIT 1',
+              [stablePlayerBaseUrl]
+            );
+            const stablePlayer = playerRows[0] || null;
+            if (stablePlayer && stablePlayer.identifier) {
+              await pool.query(
+                `UPDATE d_onboarding_devices
+                    SET client_name = ?, screen_id = ?, modified_at = CURRENT_TIMESTAMP
+                  WHERE device_id = ?`,
+                [resolvedClientName, targetRows[0].id, stablePlayer.identifier]
+              );
+              await pool.query(
+                `INSERT INTO d_onboarding_devices (device_id, client_name, screen_id)
+                 SELECT ?, ?, ?
+                  WHERE NOT EXISTS (
+                    SELECT 1 FROM d_onboarding_devices WHERE device_id = ?
+                  )`,
+                [stablePlayer.identifier, resolvedClientName, targetRows[0].id, stablePlayer.identifier]
+              );
+            }
+          }
+          status = {
+            client_name: resolvedClientName,
+            screen_id: targetRows[0].id,
+            screen_slug: targetScreenSlug
+          };
+        } else {
+          status = {
+            client_name: resolvedClientName,
+            screen_id: null,
+            screen_slug: targetScreenSlug,
+            live_only: true
+          };
+        }
         let targetPlayerUrl = '';
         const liveConnection = Array.isArray(liveConnections)
           ? liveConnections.find(function (connection) {
               const candidateConnectionId = String(connection && (connection.id || connection.clientId) || '').trim();
               const candidateDeviceId = String(connection && connection.deviceId || '').trim();
-              return candidateConnectionId === connectionId || candidateConnectionId === deviceId || candidateDeviceId === deviceId;
+              return candidateConnectionId === connectionId || candidateConnectionId === physicalPlayerId || candidateDeviceId === physicalPlayerId;
             }) || liveConnections[0] || null
           : null;
         const sourcePlayerBaseUrl = normalizeExplicitPlayerBaseUrl(playerBaseUrl || (liveConnection && liveConnection.playerPublicBaseUrl) || '');
@@ -407,17 +499,24 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
         if (!targetPlayerUrl) {
           targetPlayerUrl = `/screen/${encodeURIComponent(targetScreenSlug)}`;
         }
-
+        const moveToken = createPageAuthToken({
+          scope: 'screen-move',
+          playerId: physicalPlayerId,
+          connectionId: connectionId || null,
+          screenSlug: targetScreenSlug
+        });
         if (playerBaseUrl) {
           await forwardPlayerCommandForPlayerBaseUrl(slug, playerBaseUrl, {
             command: 'redirect',
-            url: targetPlayerUrl
+            url: targetPlayerUrl,
-          }, connectionId || deviceId || undefined, deviceId || null);
+            moveToken: moveToken || null
+          }, connectionId || physicalPlayerId || undefined, physicalPlayerId || null);
         } else {
           await forwardPlayerCommandForConnections(slug, liveConnections, {
             command: 'redirect',
-            url: targetPlayerUrl
+            url: targetPlayerUrl,
-          }, connectionId || deviceId || undefined, deviceId || null);
+            moveToken: moveToken || null
+          }, connectionId || physicalPlayerId || undefined, physicalPlayerId || null);
         }
 
         if (typeof broadcastDashboardState === 'function') {
@@ -429,7 +528,7 @@ module.exports = function registerScreenCommandRoutes(app, deps) {
           screenSlug: slug,
           command: command,
           connectionId: connectionId || null,
-          deviceId: deviceId,
+          deviceId: physicalPlayerId,
           clientName: status ? status.client_name : resolvedClientName,
           targetScreenSlug: targetScreenSlug,
           playerUrl: targetPlayerUrl,

src/web/routes/admin/content.js

@@ -632,8 +632,8 @@ module.exports = function registerContentRoutes(app, deps) {
       }
       const actorId = getAuditUserId(req);
       const [result] = await pool.query(
-        'INSERT INTO c_templates (name, canvas_size_id, background_image_path, background_color, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?)',
+        'INSERT INTO c_templates (name, canvas_size_id, background_image_path, background_color, background_gradient, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?)',
-        [payload.name, payload.canvasSizeId, payload.backgroundImagePath, payload.backgroundColor, actorId, actorId]
+        [payload.name, payload.canvasSizeId, payload.backgroundImagePath, payload.backgroundColor, payload.backgroundGradient, actorId, actorId]
       );
       for (let i = 0; i < payload.regions.length; i += 1) {
         const region = payload.regions[i];
@@ -707,8 +707,8 @@ module.exports = function registerContentRoutes(app, deps) {
         regions: normalizeTemplateRegionsForAudit(payload.regions)
       });
       await pool.query(
-        'UPDATE c_templates SET name = ?, canvas_size_id = ?, background_image_path = ?, background_color = ?, modified_by = ? WHERE id = ?',
+        'UPDATE c_templates SET name = ?, canvas_size_id = ?, background_image_path = ?, background_color = ?, background_gradient = ?, modified_by = ? WHERE id = ?',
-        [payload.name, payload.canvasSizeId, payload.backgroundImagePath, payload.backgroundColor, actorId, template.id]
+        [payload.name, payload.canvasSizeId, payload.backgroundImagePath, payload.backgroundColor, payload.backgroundGradient, actorId, template.id]
       );
       await pool.query('DELETE FROM c_template_regions WHERE template_id = ?', [template.id]);
       for (let i = 0; i < payload.regions.length; i += 1) {

src/web/routes/data-sources/weather.js

@@ -4,6 +4,7 @@ const { buildPagination } = require('../../lib/pagination');
 const renderWeatherLocationsPage = require('./weather/list');
 const renderWeatherLocationAddPage = require('./weather/add');
 const renderWeatherLocationEditPage = require('./weather/edit');
+const { buildDuplicateWeatherLocationName, buildDuplicateWeatherLocation } = require('./weather/duplicate');
 const { fetchAppSettings } = require('../../../data/app-settings');
 
 async function getWeatherLocationUsageIds(pool, common) {
@@ -85,6 +86,26 @@ module.exports = function registerWeatherRoutes(app, deps) {
     } catch (error) { next(error); }
   });
 
+  app.get('/data-sources/weather/:id/duplicate', requirePermission('weather.read'), requirePermission('weather.create'), async function (req, res, next) {
+    try {
+      const location = await common.fetchWeatherLocationById(pool, Number(req.params.id));
+      if (!location) return res.status(404).send('Weather location not found');
+
+      let duplicateName = buildDuplicateWeatherLocationName(location.name);
+      let duplicateIndex = 2;
+      while (await common.fetchDuplicateName(pool, 'i_weather_locations', duplicateName)) {
+        duplicateName = buildDuplicateWeatherLocationName(location.name) + ' (' + duplicateIndex + ')';
+        duplicateIndex += 1;
+      }
+
+      res.send(renderWeatherLocationAddPage(buildDuplicateWeatherLocation(location, duplicateName), req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', req.currentUser, {
+        providerAvailability: await getProviderAvailability(),
+        messageVariant: 'info',
+        showSaveSecondaryActions: true
+      }));
+    } catch (error) { next(error); }
+  });
+
   app.post('/data-sources/weather', requirePermission('weather.create'), async function (req, res, next) {
     const connection = await pool.getConnection();
     try {

src/web/routes/data-sources/weather/duplicate.js

@@ -0,0 +1,22 @@
+// Weather location duplication helpers.
+
+function buildDuplicateWeatherLocationName(locationName) {
+  return 'Copy of ' + String(locationName || '').trim();
+}
+
+function buildDuplicateWeatherLocation(location, duplicateName) {
+  return Object.assign({}, location, {
+    id: null,
+    name: duplicateName,
+    last_pulled_at: null,
+    last_pull_error: '',
+    last_response_status: null,
+    last_response_content_type: '',
+    last_response_json: ''
+  });
+}
+
+module.exports = {
+  buildDuplicateWeatherLocationName,
+  buildDuplicateWeatherLocation
+};

src/web/routes/onboarding.js

@@ -0,0 +1,98 @@
+const { createRequestAuthHeaders } = require('#src/request-auth');
+const { fetchPlayerRegistrations } = require('#src/data/player-registry');
+const { renderView } = require('../view');
+
+module.exports = function registerOnboardingRoutes(app, deps) {
+  const pool = deps.pool;
+  const playerInternalBaseUrl = String(deps.playerInternalBaseUrl || '').replace(/\/$/, '');
+  const requirePermission = deps.requirePermission;
+
+  app.get('/pairing', requirePermission('pairing.allow'), async function (req, res, next) {
+    try {
+      const [screens] = await pool.query('SELECT id, name, slug FROM d_screens ORDER BY name ASC, id ASC');
+      res.send(renderView('onboarding/pair', {
+        title: 'Pair player',
+        active: 'pairing',
+        currentUser: req.currentUser,
+        clientId: String(req.query.clientId || '').trim(),
+        pairingCode: String(req.query.code || '').trim(),
+        screens: screens,
+        scripts: ['vendor/jsqr/jsQR.js', 'js/onboarding/pair.js?v=' + encodeURIComponent(require('#root/package.json').version)]
+      }));
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  app.post('/pairing', requirePermission('pairing.allow'), async function (req, res) {
+    const pairingCode = String(req.body && req.body.pairingCode || '').trim();
+    const clientId = String(req.body && req.body.clientId || '').trim();
+    const clientName = String(req.body && req.body.clientName || '').trim();
+    const screenSlug = String(req.body && req.body.screenSlug || '').trim();
+    if (!pairingCode || !clientName || !screenSlug) {
+      return res.status(400).json({ error: 'All pairing fields are required.' });
+    }
+
+    try {
+      let targetBaseUrl = playerInternalBaseUrl;
+      let deviceId = '';
+      let resolvedClientId = clientId;
+      {
+        const resolvePath = '/api/onboarding/resolve?pairingCode=' + encodeURIComponent(pairingCode);
+        const resolveAuthHeaders = createRequestAuthHeaders({ method: 'GET', pathname: '/api/onboarding/resolve' });
+        const resolveResponse = await fetch(`${targetBaseUrl}${resolvePath}`, {
+          method: 'GET',
+          headers: Object.assign({ Accept: 'application/json' }, resolveAuthHeaders)
+        });
+        const resolveBody = await resolveResponse.text();
+        let resolved = null;
+        try { resolved = JSON.parse(resolveBody); } catch (_error) {}
+        if (!resolveResponse.ok || !resolved || !resolved.deviceId) {
+          const registrations = await fetchPlayerRegistrations(pool);
+          const remoteRegistrations = registrations.filter(function (player) {
+            const internalUrl = String(player && player.internal_base_url || '').replace(/\/$/, '');
+            return internalUrl && internalUrl !== playerInternalBaseUrl;
+          });
+          if (!remoteRegistrations.length) {
+            return res.status(resolveResponse.status || 401).type(resolveResponse.headers.get('content-type') || 'application/json').send(resolveBody || JSON.stringify({ error: 'Unable to resolve kiosk pairing code.' }));
+          }
+          for (const remoteRegistration of remoteRegistrations) {
+            targetBaseUrl = String(remoteRegistration.internal_base_url).replace(/\/$/, '');
+            const bridgeResolveHeaders = createRequestAuthHeaders({ method: 'GET', pathname: '/api/onboarding/resolve' });
+            const bridgeResolveResponse = await fetch(`${targetBaseUrl}/api/onboarding/resolve?pairingCode=${encodeURIComponent(pairingCode)}`, {
+              method: 'GET',
+              headers: Object.assign({ Accept: 'application/json' }, bridgeResolveHeaders)
+            });
+            const bridgeResolveBody = await bridgeResolveResponse.text();
+            try { resolved = JSON.parse(bridgeResolveBody); } catch (_error) { resolved = null; }
+            if (bridgeResolveResponse.ok && resolved && resolved.deviceId) {
+              break;
+            }
+          }
+          if (!resolved || !resolved.deviceId) {
+            return res.status(401).json({ error: 'A valid kiosk pairing code is required.' });
+          }
+        }
+        if (resolved && resolved.deviceId) {
+          deviceId = String(resolved.deviceId).trim();
+          resolvedClientId = String(resolved.clientId || resolvedClientId || '').trim();
+        }
+      }
+
+      if (!resolvedClientId) {
+        return res.status(400).json({ error: 'Client ID is required.' });
+      }
+      const payload = { clientId: resolvedClientId, pairingCode: pairingCode, clientName: clientName, screenSlug: screenSlug };
+      const authHeaders = createRequestAuthHeaders({ method: 'POST', pathname: '/api/onboarding', body: payload });
+      const response = await fetch(`${targetBaseUrl}/api/onboarding`, {
+        method: 'POST',
+        headers: Object.assign({ 'Content-Type': 'application/json', Accept: 'application/json' }, authHeaders),
+        body: JSON.stringify(payload)
+      });
+      const responseBody = await response.text();
+      res.status(response.status).type(response.headers.get('content-type') || 'application/json').send(responseBody);
+    } catch (error) {
+      res.status(502).json({ error: error && error.message ? error.message : 'Player unavailable.' });
+    }
+  });
+};

src/web/routes/register.js

@@ -21,11 +21,17 @@ const registerAuditLogRoutes = require('./settings/audit-log');
 const registerAboutRoutes = require('./settings/about/routes');
 const registerInternalSyncRoutes = require('./internal/sync');
 const registerScreensRoutes = require('./signage/screens/routes');
+const registerOnboardingRoutes = require('./onboarding');
 const { PERMISSIONS, normalizePermissionKeys } = require('#src/rbac');
 
 function registerRoutes(app, deps) {
   // Group routes by the dependency bundle they need.
   registerAuthAndAccountRoutes(app, deps);
+  registerOnboardingRoutes(app, {
+    pool: deps.pool,
+    playerInternalBaseUrl: deps.playerInternalBaseUrl,
+    requirePermission: deps.requirePermission
+  });
   registerSignageRoutes(app, deps);
   registerSettingsAndContentRoutes(app, deps);
   registerSettingsPageRoutes(app, {

src/web/routes/signage/clients/routes.js

@@ -32,6 +32,21 @@ module.exports = function registerClientsRoutes(app, deps) {
       return compareSortValues(getComparableSortValue(leftValue), getComparableSortValue(rightValue));
     }
 
+    function compareClientNames(leftValue, rightValue) {
+      const leftName = String(leftValue || '').trim();
+      const rightName = String(rightValue || '').trim();
+      if (!leftName && !rightName) {
+        return 0;
+      }
+      if (!leftName) {
+        return 1;
+      }
+      if (!rightName) {
+        return -1;
+      }
+      return leftName.localeCompare(rightName, undefined, { sensitivity: 'base', numeric: true });
+    }
+
     const sortKeys = accessors[normalizedSortKey]
       ? [normalizedSortKey]
       : ['client'];
@@ -39,7 +54,9 @@ module.exports = function registerClientsRoutes(app, deps) {
     return (Array.isArray(clients) ? clients.slice() : []).sort(function (leftClient, rightClient) {
       for (let index = 0; index < sortKeys.length; index += 1) {
         const sortKeyName = sortKeys[index];
-        const comparison = compareValues(accessors[sortKeyName](leftClient), accessors[sortKeyName](rightClient));
+        const comparison = sortKeyName === 'client'
+          ? compareClientNames(accessors[sortKeyName](leftClient), accessors[sortKeyName](rightClient))
+          : compareValues(accessors[sortKeyName](leftClient), accessors[sortKeyName](rightClient));
 
         if (comparison !== 0) {
           return index === 0 && normalizedDirection === 'desc' ? comparison * -1 : comparison;

src/web/routes/signage/dashboard/index.js

@@ -2,17 +2,7 @@
 
 const { renderView } = require('../../../view');
 
-function normalizeBaseUrl(value) {
-  return String(value || '').trim().replace(/\/$/, '');
-}
-
 module.exports = function renderDashboardPage(data, message, currentUser) {
-  const primaryPlayerUrl = Array.isArray(data.screens)
-    ? String((data.screens.find(function (screen) {
-      return screen && String(screen.public_base_url || '').trim();
-    }) || {}).public_base_url || '').trim()
-    : '';
-
   return renderView('dashboard/index', {
     title: 'Dashboard',
     active: 'dashboard',
@@ -25,7 +15,6 @@ module.exports = function renderDashboardPage(data, message, currentUser) {
     slides: data.slides || [],
     connectedClientsCount: Number(data.connectedClientsCount || 0),
     connectedPlayersCount: Number(data.connectedPlayersCount || data.connectedClientsCount || 0),
-    primaryPlayerUrl: normalizeBaseUrl(primaryPlayerUrl) || null,
     scripts: ['js/dashboard/dashboard-page.js']
   });
 };

src/web/routes/signage/templates/duplicate.js

@@ -26,6 +26,7 @@ function buildDuplicateTemplate(template, duplicateName) {
     canvas_size_height: source.canvas_size_height,
     background_color: source.background_color,
     background_image_path: source.background_image_path,
+    background_gradient: source.background_gradient,
     region_usage: [],
     regions: Array.isArray(source.regions) ? source.regions.map(cloneRegion) : []
   };

src/web/views/data-sources/api-sources/form.hbs

@@ -138,7 +138,7 @@
       </div>
     </div>
     <div class="card-footer d-flex justify-content-end align-items-center">
-      <div class="me-auto">{{#if isEdit}}{{#if (hasPermission currentUser "api-sources.update")}}<button type="submit" form="api-source-toggle-form" class="btn {{#if apiSource.enabled}}btn-danger{{else}}btn-success{{/if}}"><i class="bi {{#if apiSource.enabled}}bi-pause-fill{{else}}bi-play-fill{{/if}} me-1" aria-hidden="true"></i>{{#if apiSource.enabled}}Disable{{else}}Enable{{/if}}</button>{{/if}} {{#if (hasPermission currentUser "api-sources.allow")}}<button type="button" data-manual-refresh-url="/data-sources/api-sources/{{apiSource.id}}/refresh" class="btn btn-outline-secondary"><i class="bi bi-arrow-clockwise me-1" aria-hidden="true"></i>Refresh now</button>{{/if}}{{/if}}</div>
+      <div class="me-auto">{{#if isEdit}}{{#if (hasPermission currentUser "api-sources.update")}}<button type="submit" form="api-source-toggle-form" data-async-data-source-toggle data-enabled="{{#if apiSource.enabled}}true{{else}}false{{/if}}" class="btn {{#if apiSource.enabled}}btn-danger{{else}}btn-success{{/if}}"><i class="bi {{#if apiSource.enabled}}bi-pause-fill{{else}}bi-play-fill{{/if}} me-1" aria-hidden="true"></i>{{#if apiSource.enabled}}Disable{{else}}Enable{{/if}}</button>{{/if}} {{#if (hasPermission currentUser "api-sources.allow")}}<button type="button" data-manual-refresh-url="/data-sources/api-sources/{{apiSource.id}}/refresh" class="btn btn-outline-secondary"><i class="bi bi-arrow-clockwise me-1" aria-hidden="true"></i>Refresh now</button>{{/if}}{{/if}}</div>
       {{{saveActionButtons formId="api-source-form" saveUrl=formAction cancelUrl=cancelUrl deleteUrl=deleteUrl deleteDisabled=deleteDisabled showSaveAndClose=showSaveSecondaryActions showSaveAndNew=showSaveSecondaryActions}}}
     </div>
   </div>

src/web/views/data-sources/rss-feeds/form.hbs

@@ -39,7 +39,7 @@
       </div>
     </div>
     <div class="card-footer d-flex justify-content-end align-items-center">
-      <div class="me-auto">{{#if isEdit}}{{#if (hasPermission currentUser "rss-feeds.update")}}<button type="submit" form="rss-feed-toggle-form" class="btn {{#if rssFeed.enabled}}btn-danger{{else}}btn-success{{/if}}"><i class="bi {{#if rssFeed.enabled}}bi-pause-fill{{else}}bi-play-fill{{/if}} me-1" aria-hidden="true"></i>{{#if rssFeed.enabled}}Disable{{else}}Enable{{/if}}</button>{{/if}} {{#if (hasPermission currentUser "rss-feeds.allow")}}<button type="button" data-manual-refresh-url="/data-sources/rss-feeds/{{rssFeed.id}}/refresh" class="btn btn-outline-secondary"><i class="bi bi-arrow-clockwise me-1" aria-hidden="true"></i>Refresh now</button>{{/if}}{{/if}}</div>
+      <div class="me-auto">{{#if isEdit}}{{#if (hasPermission currentUser "rss-feeds.update")}}<button type="submit" form="rss-feed-toggle-form" data-async-data-source-toggle data-enabled="{{#if rssFeed.enabled}}true{{else}}false{{/if}}" class="btn {{#if rssFeed.enabled}}btn-danger{{else}}btn-success{{/if}}"><i class="bi {{#if rssFeed.enabled}}bi-pause-fill{{else}}bi-play-fill{{/if}} me-1" aria-hidden="true"></i>{{#if rssFeed.enabled}}Disable{{else}}Enable{{/if}}</button>{{/if}} {{#if (hasPermission currentUser "rss-feeds.allow")}}<button type="button" data-manual-refresh-url="/data-sources/rss-feeds/{{rssFeed.id}}/refresh" class="btn btn-outline-secondary"><i class="bi bi-arrow-clockwise me-1" aria-hidden="true"></i>Refresh now</button>{{/if}}{{/if}}</div>
       {{{saveActionButtons formId="rss-feed-form" saveUrl=formAction cancelUrl=cancelUrl deleteUrl=deleteUrl deleteDisabled=deleteDisabled showSaveAndClose=showSaveSecondaryActions showSaveAndNew=showSaveSecondaryActions}}}
     </div>
   </div>

src/web/views/data-sources/weather/forecast-preview.hbs

@@ -1,8 +1,8 @@
 <div class="card card-outline card-secondary mt-3">
   <div class="card-header d-flex align-items-center flex-wrap"><h3 class="card-title mb-0 flex-grow-1">Forecast preview</h3><div class="btn-group btn-group-sm flex-shrink-0 ms-auto" role="group" aria-label="Forecast preview mode"><button type="button" class="btn btn-primary" data-weather-forecast-mode="daily" aria-pressed="true">Daily</button><button type="button" class="btn btn-outline-secondary" data-weather-forecast-mode="hourly" aria-pressed="false">24 hours</button></div></div>
   <div class="card-body">
-    <div class="small text-body-secondary mb-3">Daily and hourly forecasts will appear here after the first successful fetch.</div>
+    {{#unless weatherPreview.hasSnapshot}}<div class="small text-body-secondary mb-3">Daily and hourly forecasts will appear here after the first successful fetch.</div>{{/unless}}
     <div id="weather-daily-forecast" class="weather-daily-forecast">{{#each weatherPreview.forecast}}<div class="border rounded p-2 h-100 text-center"><div class="small fw-semibold">{{day}}</div><i class="bi {{icon}} weather-preview-forecast-icon" aria-hidden="true"></i><div class="small mb-2">{{condition}}</div><strong>{{high}}°</strong><span class="text-body-secondary ms-2">{{low}}°</span><div class="small text-body-secondary mt-2"><i class="bi bi-droplet me-1"></i>{{rain}} rain</div></div>{{/each}}</div>
-    <div id="weather-hourly-forecast" class="border-top mt-4 pt-3 d-none"><div class="small text-body-secondary mb-2">Hourly forecast · next 24 hours</div><div class="d-flex gap-2 overflow-auto pb-2">{{#each weatherPreview.hourly}}<div class="border rounded p-2 text-center flex-shrink-0 weather-preview-hourly-item"><div class="small fw-semibold">{{day}}</div><i class="bi {{icon}} weather-preview-forecast-icon" aria-hidden="true"></i><strong>{{temperature}}°</strong><div class="small text-body-secondary mt-1"><i class="bi bi-droplet me-1"></i>{{rain}}</div></div>{{/each}}</div></div>
+    <div id="weather-hourly-forecast"><div class="small text-body-secondary mb-2">Hourly forecast · next 24 hours</div><div class="d-flex gap-2 overflow-auto pb-2">{{#each weatherPreview.hourly}}<div class="border rounded p-2 text-center flex-shrink-0 weather-preview-hourly-item"><div class="small fw-semibold">{{day}}</div><i class="bi {{icon}} weather-preview-forecast-icon" aria-hidden="true"></i><strong>{{temperature}}°</strong><div class="small text-body-secondary mt-1"><i class="bi bi-droplet me-1"></i>{{rain}}</div></div>{{/each}}</div></div>
   </div>
 </div>

src/web/views/data-sources/weather/form.hbs

@@ -15,7 +15,7 @@
       <div class="row g-3"><div class="col-md-3"><label for="weather-provider" class="form-label">Provider</label><select id="weather-provider" name="provider" class="form-select"><option value="open-meteo" {{#if (eq weatherLocation.provider 'open-meteo')}}selected{{/if}}>Open-Meteo</option><option value="pirate-weather" {{#if (eq weatherLocation.provider 'pirate-weather')}}selected{{/if}} {{#unless providerAvailability.pirateWeather}}disabled{{/unless}}>Pirate Weather{{#unless providerAvailability.pirateWeather}} (API key not configured){{/unless}}</option></select></div><div class="col-md-3"><label for="weather-temperature-unit" class="form-label">Temperature</label><select id="weather-temperature-unit" name="temperature_unit" class="form-select"><option value="celsius" {{#if (eq weatherLocation.temperature_unit 'celsius')}}selected{{/if}}>Celsius</option><option value="fahrenheit" {{#if (eq weatherLocation.temperature_unit 'fahrenheit')}}selected{{/if}}>Fahrenheit</option></select></div><div class="col-md-3"><label for="weather-wind-unit" class="form-label">Wind</label><select id="weather-wind-unit" name="wind_unit" class="form-select"><option value="kmh" {{#if (eq weatherLocation.wind_unit 'kmh')}}selected{{/if}}>km/h</option><option value="mph" {{#if (eq weatherLocation.wind_unit 'mph')}}selected{{/if}}>mph</option><option value="ms" {{#if (eq weatherLocation.wind_unit 'ms')}}selected{{/if}}>m/s</option></select></div><div class="col-md-3"><label for="weather-precipitation-unit" class="form-label">Precipitation</label><select id="weather-precipitation-unit" name="precipitation_unit" class="form-select"><option value="mm" {{#if (eq weatherLocation.precipitation_unit 'mm')}}selected{{/if}}>Millimetres</option><option value="inch" {{#if (eq weatherLocation.precipitation_unit 'inch')}}selected{{/if}}>Inches</option></select></div></div>
       <div class="row g-3 mt-1"><div class="col-md-6"><label for="weather-interval" class="form-label">Update interval</label><input id="weather-interval" name="update_interval_value" type="number" min="1" max="1440" class="form-control" value="{{weatherLocation.update_interval_value}}" required /></div><div class="col-md-6"><label for="weather-interval-unit" class="form-label">Unit</label><select id="weather-interval-unit" name="update_interval_unit" class="form-select"><option value="minutes" {{#if (eq weatherLocation.update_interval_unit 'minutes')}}selected{{/if}}>Minutes</option><option value="hours" {{#if (eq weatherLocation.update_interval_unit 'hours')}}selected{{/if}}>Hours</option></select></div></div>
     </div>
-    <div class="card-footer d-flex justify-content-end align-items-center"><div class="me-auto">{{#if isEdit}}{{#if (hasPermission currentUser "weather.update")}}<button type="submit" form="weather-location-toggle-form" class="btn {{#if weatherLocation.enabled}}btn-danger{{else}}btn-success{{/if}}"><i class="bi {{#if weatherLocation.enabled}}bi-pause-fill{{else}}bi-play-fill{{/if}} me-1" aria-hidden="true"></i>{{#if weatherLocation.enabled}}Disable{{else}}Enable{{/if}}</button>{{/if}} {{#if (hasPermission currentUser "weather.allow")}}<button type="button" data-weather-refresh-url="/data-sources/weather/{{weatherLocation.id}}/refresh" class="btn btn-outline-secondary"><i class="bi bi-arrow-clockwise me-1" aria-hidden="true"></i>Refresh now</button>{{/if}}{{/if}}</div>{{{saveActionButtons formId="weather-location-form" saveUrl=formAction cancelUrl=cancelUrl deleteUrl=deleteUrl deleteDisabled=deleteDisabled showSaveAndClose=showSaveSecondaryActions showSaveAndNew=showSaveSecondaryActions}}}</div>
+    <div class="card-footer d-flex justify-content-end align-items-center"><div class="me-auto">{{#if isEdit}}{{#if (hasPermission currentUser "weather.update")}}<button type="submit" form="weather-location-toggle-form" data-async-data-source-toggle data-enabled="{{#if weatherLocation.enabled}}true{{else}}false{{/if}}" class="btn {{#if weatherLocation.enabled}}btn-danger{{else}}btn-success{{/if}}"><i class="bi {{#if weatherLocation.enabled}}bi-pause-fill{{else}}bi-play-fill{{/if}} me-1" aria-hidden="true"></i>{{#if weatherLocation.enabled}}Disable{{else}}Enable{{/if}}</button>{{/if}} {{#if (hasPermission currentUser "weather.allow")}}<button type="button" data-weather-refresh-url="/data-sources/weather/{{weatherLocation.id}}/refresh" class="btn btn-outline-secondary"><i class="bi bi-arrow-clockwise me-1" aria-hidden="true"></i>Refresh now</button>{{/if}}{{/if}}</div>{{{saveActionButtons formId="weather-location-form" saveUrl=formAction cancelUrl=cancelUrl deleteUrl=deleteUrl deleteDisabled=deleteDisabled showSaveAndClose=showSaveSecondaryActions showSaveAndNew=showSaveSecondaryActions}}}</div>
   </div>
 </form>
 {{#if isEdit}}<form id="weather-location-toggle-form" method="post" action="/data-sources/weather/{{weatherLocation.id}}" data-async-command><input type="hidden" name="data_source_action" value="toggle" /></form>{{/if}}

src/web/views/data-sources/weather/list.hbs

@@ -26,7 +26,8 @@
               <td data-label="Name">{{name}}</td><td data-label="Location">{{location_label}}<br><small class="text-muted">{{latitude}}, {{longitude}} · {{timezone}}</small></td><td data-label="Provider">{{provider}}</td><td data-label="Refresh interval">{{intervalLabel}}</td><td data-label="Status"><span class="badge text-bg-{{#if enabled}}success{{else}}danger{{/if}}">{{#if enabled}}Enabled{{else}}Disabled{{/if}}</span></td>
               <td data-label="Actions"><div class="actions">
                 {{#if (hasPermission ../currentUser 'weather.update')}}<a class="btn btn-sm btn-primary" href="/data-sources/weather/{{id}}/edit">Edit</a>{{/if}}
-                {{#if (hasPermission ../currentUser 'weather.delete')}}<form class="inline-form" method="post" action="/data-sources/weather/{{id}}/delete" data-confirm-message="Delete this weather location?"><button class="btn btn-sm btn-danger" type="submit">Delete</button></form>{{/if}}
+                {{#if (hasPermission ../currentUser 'weather.create')}}<a class="btn btn-sm btn-secondary" href="/data-sources/weather/{{id}}/duplicate">Dupe</a>{{/if}}
+                {{#if (hasPermission ../currentUser 'weather.delete')}}<form class="inline-form" method="post" action="/data-sources/weather/{{id}}/delete" data-confirm-message="Delete this weather location?">{{#if inUse}}<button class="btn btn-sm btn-outline-danger" type="submit" disabled>Delete</button>{{else}}<button class="btn btn-sm btn-danger" type="submit">Delete</button>{{/if}}</form>{{/if}}
               </div></td>
             </tr>
           {{/each}}

src/web/views/data-sources/weather/mock.hbs

@@ -1,117 +0,0 @@
-<div class="page-header">
-  <div>
-    <h2>Weather source</h2>
-    <p>Configure a remote weather feed once, then serve its cached snapshot to every player.</p>
-  </div>
-</div>
-
-<div class="row g-3">
-  <div class="col-12 col-xl-7">
-    <div class="card card-outline card-primary h-100 weather-mock-card">
-      <div class="card-header"><h3 class="card-title">Source configuration</h3></div>
-      <div class="card-body weather-mock-card-body">
-        <div class="row g-3">
-          <div class="col-12">
-            <label class="form-label" for="weather-name">Name</label>
-            <input id="weather-name" class="form-control" value="{{weather.name}}" />
-          </div>
-          <div class="col-12 col-md-8">
-            <label class="form-label" for="weather-location">Location</label>
-            <input id="weather-location" class="form-control" value="{{weather.location}}" />
-          </div>
-          <div class="col-12 col-md-4">
-            <label class="form-label" for="weather-provider">Provider</label>
-            <select id="weather-provider" class="form-select">
-              <option selected>{{weather.provider}} (no key)</option>
-              <option>Custom JSON endpoint</option>
-            </select>
-          </div>
-          <div class="col-12"><div class="form-text"><i class="bi bi-info-circle me-1"></i>Location is the display name. Coordinates identify the weather point and can be set from a map picker, browser location, or manual entry.</div></div>
-          <div class="col-6">
-            <label class="form-label" for="weather-latitude">Latitude</label>
-            <input id="weather-latitude" class="form-control" value="{{weather.latitude}}" />
-          </div>
-          <div class="col-6">
-            <label class="form-label" for="weather-longitude">Longitude</label>
-            <input id="weather-longitude" class="form-control" value="{{weather.longitude}}" />
-          </div>
-          <div class="col-12 col-md-4">
-            <label class="form-label" for="weather-temperature-unit">Temperature</label>
-            <select id="weather-temperature-unit" class="form-select"><option selected>{{weather.temperatureUnit}}</option><option>Fahrenheit (°F)</option></select>
-          </div>
-          <div class="col-12 col-md-4">
-            <label class="form-label" for="weather-wind-unit">Wind speed</label>
-            <select id="weather-wind-unit" class="form-select"><option selected>{{weather.windUnit}}</option><option>Miles per hour (mph)</option><option>Metres per second (m/s)</option></select>
-          </div>
-          <div class="col-12 col-md-4">
-            <label class="form-label" for="weather-precipitation-unit">Precipitation</label>
-            <select id="weather-precipitation-unit" class="form-select"><option selected>{{weather.precipitationUnit}}</option><option>Inches (in)</option></select>
-          </div>
-          <div class="col-12 col-md-6">
-            <label class="form-label" for="weather-refresh">Refresh interval</label>
-            <select id="weather-refresh" class="form-select"><option>15 minutes</option><option selected>{{weather.refreshInterval}}</option><option>1 hour</option></select>
-          </div>
-          <div class="col-12 col-md-6">
-            <label class="form-label" for="weather-forecast-mode">Forecast display</label>
-            <select id="weather-forecast-mode" class="form-select"><option selected value="daily">Daily forecast</option><option value="hourly">Hourly forecast (next 24 hours)</option></select>
-            <div class="form-text">The source can cache both datasets; this controls what the region displays.</div>
-          </div>
-        </div>
-      </div>
-      <div class="card-footer weather-mock-card-footer d-flex justify-content-between align-items-center">
-        <button type="button" class="btn btn-outline-secondary"><i class="bi bi-arrow-clockwise me-1"></i>Refresh now</button>
-        <button type="button" class="btn btn-primary"><i class="bi bi-check2 me-1"></i>Save source</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="col-12 col-xl-5">
-    <div class="card card-outline card-secondary h-100 weather-mock-card">
-      <div class="card-header d-flex align-items-center gap-2"><h3 class="card-title mb-0 flex-grow-1">Cached snapshot</h3><span class="badge text-bg-success flex-shrink-0"><i class="bi bi-check-circle me-1"></i>Last fetch succeeded</span></div>
-      <div class="card-body weather-mock-card-body">
-        <div class="d-flex align-items-start justify-content-between border-bottom pb-3 mb-3">
-          <div><div class="text-body-secondary small">{{weather.location}}</div><div class="display-4 fw-semibold">{{weather.temperature}}°</div><div class="fw-medium">{{weather.condition}}</div></div>
-          <i class="bi bi-cloud-sun weather-mock-icon" aria-hidden="true"></i>
-        </div>
-        <div class="row g-3 small">
-          <div class="col-6"><span class="text-body-secondary d-block">Feels like</span><strong>{{weather.feelsLike}}°</strong></div>
-          <div class="col-6"><span class="text-body-secondary d-block">Humidity</span><strong>{{weather.humidity}}</strong></div>
-          <div class="col-6"><span class="text-body-secondary d-block">Wind</span><strong>{{weather.wind}}</strong></div>
-          <div class="col-6"><span class="text-body-secondary d-block">UV index</span><strong>{{weather.uvIndex}}</strong></div>
-          <div class="col-6"><span class="text-body-secondary d-block">Sunrise</span><strong>{{weather.sunrise}}</strong></div>
-          <div class="col-6"><span class="text-body-secondary d-block">Sunset</span><strong>{{weather.sunset}}</strong></div>
-        </div>
-        <div class="alert alert-light border mt-4 mb-0 small"><i class="bi bi-database-check me-1"></i> Cached {{weather.cacheAge}}. Players keep using this snapshot if the next request fails.</div>
-      </div>
-      <div class="card-footer weather-mock-card-footer small text-body-secondary">Last successful fetch: {{weather.fetchedAt}}</div>
-    </div>
-  </div>
-</div>
-
-<div class="card card-outline card-secondary mt-3">
-  <div class="card-header d-flex align-items-center justify-content-between gap-2 flex-wrap"><h3 class="card-title mb-0">Forecast preview</h3><div class="btn-group btn-group-sm flex-shrink-0" role="group" aria-label="Forecast preview mode"><button type="button" class="btn btn-primary">Daily</button><button type="button" class="btn btn-outline-secondary">24 hours</button></div></div>
-  <div class="card-body">
-    <div class="small text-body-secondary mb-3">{{weather.forecastModeLabel}} · timezone {{weather.timezone}}</div>
-    <div class="row row-cols-2 row-cols-md-4 g-2">
-      {{#each weather.forecast}}
-        <div class="col"><div class="border rounded p-3 h-100 text-center"><div class="small fw-semibold">{{day}}</div><i class="bi {{icon}} weather-mock-forecast-icon" aria-hidden="true"></i><div class="small mb-2">{{condition}}</div><strong>{{high}}°</strong><span class="text-body-secondary ms-2">{{low}}°</span><div class="small text-body-secondary mt-2"><i class="bi bi-droplet me-1"></i>{{rain}} rain</div></div></div>
-      {{/each}}
-    </div>
-    <div class="border-top mt-4 pt-3">
-      <div class="small text-body-secondary mb-2">Hourly option preview · next 24 hours</div>
-      <div class="d-flex gap-2 overflow-auto pb-2">
-        {{#each weather.hourly}}
-          <div class="border rounded p-2 text-center flex-shrink-0" style="width:7.5rem"><div class="small fw-semibold">{{day}}</div><i class="bi {{icon}} weather-mock-forecast-icon" aria-hidden="true"></i><strong>{{temperature}}°</strong><div class="small text-body-secondary mt-1"><i class="bi bi-droplet me-1"></i>{{rain}}</div></div>
-        {{/each}}
-      </div>
-    </div>
-  </div>
-</div>
-
-<style>
-  .weather-mock-card { display: flex; flex-direction: column; }
-  .weather-mock-card-body { flex: 1 1 auto; }
-  .weather-mock-card-footer { min-height: 3.5rem; }
-  .weather-mock-icon { font-size: 4rem; color: #e0a11a; }
-  .weather-mock-forecast-icon { display: block; font-size: 2rem; color: #e0a11a; margin: 1rem 0 .65rem; }
-</style>

src/web/views/onboarding/pair.hbs

@@ -0,0 +1,72 @@
+<div class="page-header">
+  <div>
+    <h2>Connect a screen</h2>
+    <p>Pair a player with a screen using its six-character PIN.</p>
+  </div>
+</div>
+
+<div class="row justify-content-center">
+  <div class="col-12 col-lg-7 col-xl-6">
+    <div class="card card-outline card-primary admin-form-card onboarding-pairing-card" id="onboarding-pair-card">
+      <div class="card-header">
+        <h3 class="card-title">Screen setup</h3>
+      </div>
+      <form id="onboarding-pair-form" method="post" action="/pairing" novalidate>
+        <div class="card-body">
+          <div class="onboarding-pairing-progress d-none" id="onboarding-pair-progress" role="status" aria-live="polite">
+            <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+            <span>Completing pairing...</span>
+          </div>
+          <div id="onboarding-pair-message" class="alert d-none" role="alert"></div>
+          <input type="hidden" id="onboarding-pair-client-id" name="clientId" value="{{clientId}}">
+          <div class="mb-3">
+            <label class="form-label" for="onboarding-pair-code-1">Player PIN</label>
+              <div class="onboarding-pin-inputs" id="onboarding-pair-code-inputs" data-pairing-code="{{pairingCode}}" role="group" aria-label="Player PIN" aria-required="true">
+                <input class="form-control form-control-lg text-uppercase font-weight-bold" id="onboarding-pair-code-1" data-pairing-code-input type="text" maxlength="1" inputmode="text" autocomplete="one-time-code" aria-label="Player PIN character 1">
+                <input class="form-control form-control-lg text-uppercase font-weight-bold" id="onboarding-pair-code-2" data-pairing-code-input type="text" maxlength="1" inputmode="text" aria-label="Player PIN character 2">
+                <input class="form-control form-control-lg text-uppercase font-weight-bold" id="onboarding-pair-code-3" data-pairing-code-input type="text" maxlength="1" inputmode="text" aria-label="Player PIN character 3">
+                <input class="form-control form-control-lg text-uppercase font-weight-bold" id="onboarding-pair-code-4" data-pairing-code-input type="text" maxlength="1" inputmode="text" aria-label="Player PIN character 4">
+                <input class="form-control form-control-lg text-uppercase font-weight-bold" id="onboarding-pair-code-5" data-pairing-code-input type="text" maxlength="1" inputmode="text" aria-label="Player PIN character 5">
+                <input class="form-control form-control-lg text-uppercase font-weight-bold" id="onboarding-pair-code-6" data-pairing-code-input type="text" maxlength="1" inputmode="text" aria-label="Player PIN character 6">
+            </div>
+            <input id="onboarding-pair-code" type="hidden" name="pairingCode">
+          </div>
+          <div class="mb-4">
+            <label class="form-label" for="onboarding-pair-name">Client name</label>
+            <input class="form-control" id="onboarding-pair-name" name="clientName" maxlength="255" required placeholder="Lobby player" autocomplete="off">
+          </div>
+          <div class="mb-2">
+            <label class="form-label" for="onboarding-pair-screen">Screen</label>
+            <select class="form-select" id="onboarding-pair-screen" name="screenSlug" required>
+              <option value="">Select a screen</option>
+              {{#each screens}}
+                <option value="{{slug}}">{{name}}</option>
+              {{/each}}
+            </select>
+          </div>
+        </div>
+        <div class="card-footer d-flex flex-wrap align-items-center">
+          <button class="btn btn-outline-secondary" id="onboarding-pair-another" type="button" aria-label="Scan player QR code" title="Scan player QR code">
+            <i class="bi bi-camera" aria-hidden="true"></i>
+            <span class="d-none" id="onboarding-pair-another-label">Pair another</span>
+          </button>
+          <button class="btn btn-secondary d-none ms-auto" id="onboarding-pair-manual" type="button">Enter PIN manually</button>
+          <button class="btn btn-primary ms-auto" id="onboarding-pair-connect" type="submit">Connect</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<div class="onboarding-scanner d-none" id="onboarding-scanner" aria-hidden="true">
+  <div class="onboarding-scanner-panel" role="dialog" aria-modal="true" aria-labelledby="onboarding-scanner-title">
+    <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
+      <h2 class="h5 mb-0" id="onboarding-scanner-title">Scan player QR code</h2>
+      <button class="btn btn-sm btn-outline-secondary" id="onboarding-scanner-close" type="button">Close</button>
+    </div>
+    <video id="onboarding-scanner-video" class="onboarding-scanner-video" autoplay playsinline></video>
+    <input id="onboarding-scanner-capture" type="file" accept="image/*" capture="environment" class="d-none">
+    <p class="text-body-secondary small mb-0" id="onboarding-scanner-message">Point your camera at the player QR code.</p>
+    <pre class="d-none small mt-2 mb-0" id="onboarding-scanner-debug" aria-live="polite"></pre>
+  </div>
+</div>

src/web/views/signage/clients/list.hbs

@@ -5,7 +5,7 @@
   </div>
 </div>
 
-{{#if (hasPermission currentUser 'clients.allow')}}
+{{#if (anyPermission currentUser 'clients.allow' 'pairing.allow')}}
   <div class="card card-outline card-secondary mb-4 screen-command-card">
     <div class="card-header">
       <div class="dashboard-card-heading">
@@ -13,9 +13,10 @@
       </div>
     </div>
     <div class="card-body">
-        {{#if screens.length}}
+        <div class="screen-command-panel{{#if (hasPermission currentUser 'clients.allow')}}{{else}} screen-command-panel-pairing-only{{/if}}">
-          <div class="screen-command-panel">
+          {{#if (hasPermission currentUser 'clients.allow')}}
-            <div class="screen-command-panel-left">
+            {{#if screens.length}}
+              <div class="screen-command-panel-left">
               <div class="screen-command-selector-field">
                 <label class="screen-command-selector-label" for="screen-command-select">Target screen group</label>
                 <div class="input-group input-group-sm">
@@ -55,18 +56,28 @@
                   <button type="submit" class="btn btn-sm btn-secondary" disabled><i class="bi bi-eye-slash me-1" aria-hidden="true"></i>Blackout screen</button>
                 </form>
               </div>
-            </div>
-            <div class="screen-command-panel-right">
-              <div class="screen-command-summary">
-                <span class="screen-command-pill is-live" data-screen-command-pill>Choose a screen</span>
-                <strong data-screen-command-name>Select a target screen group</strong>
-                <span class="screen-command-summary-meta" data-screen-command-meta>Commands update automatically for the selected screen group.</span>
               </div>
+              <div class="screen-command-panel-right">
+                <div class="screen-command-summary">
+                  <span class="screen-command-pill is-live" data-screen-command-pill>Choose a screen</span>
+                  <strong data-screen-command-name>Select a target screen group</strong>
+                  <span class="screen-command-summary-meta" data-screen-command-meta>Commands update automatically for the selected screen group.</span>
+                </div>
+              </div>
+            {{else}}
+              <div class="empty">No screen groups are available to target yet.</div>
+            {{/if}}
+          {{/if}}
+          {{#if (hasPermission currentUser 'pairing.allow')}}
+            <div class="screen-command-pairing">
+              <div>
+                <strong>New player?</strong>
+                <span class="screen-command-summary-meta">Open the pairing page to connect another display.</span>
+              </div>
+              <a class="btn btn-primary btn-sm" href="/pairing"><i class="bi bi-qr-code-scan me-1" aria-hidden="true"></i>Pair a player</a>
             </div>
-          </div>
+          {{/if}}
-        {{else}}
+        </div>
-          <div class="empty">No screen groups are available to target yet.</div>
-        {{/if}}
     </div>
   </div>
 {{/if}}
@@ -96,7 +107,7 @@
       <tbody id="dashboard-clients-table-body">
         {{#if clients.length}}
           {{#each clients}}
-            <tr data-table-search-row data-client-key="{{id}}" data-client-id="{{clientId}}" data-client-device-id="{{deviceId}}" data-client-screen-slug="{{screen_slug}}" data-client-player-base-url="{{player_url}}">
+            <tr data-table-search-row data-client-key="{{id}}" data-client-id="{{id}}" data-client-client-id="{{clientId}}" data-client-device-id="{{deviceId}}" data-client-screen-slug="{{screen_slug}}" data-client-player-base-url="{{player_url}}">
               <td data-label="Client" class="client-rename-cell" title="Double-click to rename">
                 <div>{{#if client_name}}{{client_name}}{{else}}Unknown{{/if}}</div>
               </td>
@@ -186,7 +197,7 @@
     <div class="modal-body">
       <input type="hidden" name="command" value="moveclient" />
       <input type="hidden" name="connectionId" value="" data-client-move-connection-id />
-      <input type="hidden" name="deviceId" value="" data-client-move-device-id />
+      <input type="hidden" name="clientId" value="" data-client-move-client-id />
       <input type="hidden" name="clientName" value="" data-client-move-client-name />
       <input type="hidden" name="playerBaseUrl" value="" data-client-move-player-base-url />
       <label class="form-label" for="client-move-screen-target">Target screen group</label>

src/web/views/signage/dashboard/index.hbs

@@ -11,13 +11,6 @@
       <span class="dashboard-hero-kicker">Live overview</span>
       <h3 class="dashboard-hero-title">Keep the control surface focused on live state and actions.</h3>
       <p class="dashboard-hero-copy">Use the cards below for the current totals, then open the screen group snapshot when you want a quick read on playlist assignment and live connections.</p>
-      {{#if primaryPlayerUrl}}
-        <div class="alert alert-info mb-0 mt-3 py-2">
-          <strong>Begin onboarding:</strong>
-          open <a href="{{primaryPlayerUrl}}" target="_blank" rel="noreferrer">{{primaryPlayerUrl}}</a>
-          on the public display to get started.
-        </div>
-      {{/if}}
     </div>
     <div class="dashboard-hero-stats">
       {{#if (hasPermission currentUser "playlists.read")}}
@@ -194,7 +187,9 @@
             <h3 class="card-title">Screen group snapshot</h3>
             <p class="dashboard-card-subtitle">Playlist assignment and live connection state without the spreadsheet feel.</p>
           </div>
-          <a class="btn btn-sm btn-primary" href="/screens">Manage screen groups</a>
+          {{#if (hasPermission currentUser "pairing.allow")}}
+            <a class="btn btn btn-primary" href="/pairing"><i class="bi bi-qr-code-scan me-1" aria-hidden="true"></i>Pair a player</a>
+          {{/if}}
         </div>
         <div class="card-body">
           <div id="dashboard-screens-grid" class="dashboard-screen-grid">

src/web/views/signage/slides/popup-preview.hbs

@@ -180,13 +180,27 @@
 
       var backgroundColor = String(payload.backgroundColor || '#111111').trim() || '#111111';
       var backgroundImagePath = String(payload.backgroundImagePath || '').trim();
+      var backgroundGradient = '';
+      try {
+        var gradientData = typeof payload.backgroundGradient === 'string' ? JSON.parse(payload.backgroundGradient) : payload.backgroundGradient;
+        if (gradientData && gradientData.type === 'linear' && Array.isArray(gradientData.colors) && gradientData.colors.length >= 2) {
+          var gradientStops = Array.isArray(gradientData.stops) ? gradientData.stops : (gradientData.colors || []).map(function (color, index, colors) { return { color: color, position: colors.length > 1 ? Math.round(index * 100 / (colors.length - 1)) : 0 }; });
+          gradientStops = gradientStops.filter(function (stop) { return stop && /^#[0-9a-fA-F]{3,8}$/.test(String(stop.color || '').trim()); }).slice(0, 12);
+          if (gradientStops.length >= 2) {
+            var gradientAngle = Number(gradientData.angle);
+            backgroundGradient = 'linear-gradient(' + (Number.isFinite(gradientAngle) ? Math.max(0, Math.min(360, gradientAngle)) : 90) + 'deg,' + gradientStops.map(function (stop) { return stop.color + ' ' + Math.max(0, Math.min(100, Number(stop.position) || 0)) + '%'; }).join(',') + ')';
+          }
+        }
+      } catch (_error) {
+        backgroundGradient = '';
+      }
 
       var canvasWidth = Math.max(1, Number(payload.canvasWidth || 1920));
       var canvasHeight = Math.max(1, Number(payload.canvasHeight || 1080));
       canvas.style.backgroundColor = backgroundColor;
-      canvas.style.backgroundImage = backgroundImagePath ? 'url("' + encodeURI(backgroundImagePath) + '")' : 'none';
+      canvas.style.backgroundImage = [backgroundImagePath ? 'url("' + encodeURI(backgroundImagePath) + '")' : '', backgroundGradient].filter(Boolean).join(',') || 'none';
       canvas.style.backgroundPosition = 'center';
-      canvas.style.backgroundSize = '100% 100%';
+      canvas.style.backgroundSize = backgroundImagePath ? 'contain, cover' : 'cover';
       canvas.style.backgroundRepeat = 'no-repeat';
       canvas.style.transformOrigin = 'center center';
       canvas.style.width = canvasWidth + 'px';

src/web/views/signage/templates/form.hbs

@@ -110,6 +110,10 @@
               <label for="background-color" class="form-label">Background colour</label>
               <input type="color" name="background_color" id="background-color" class="form-control form-control-color w-100" value="{{#if template.background_color}}{{template.background_color}}{{else}}#111111{{/if}}" title="Choose a background colour" />
             </div>
+            <div class="col-12">
+              <input type="hidden" name="background_gradient" id="background-gradient" value="{{template.background_gradient}}" />
+              <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#background-advanced-modal"><i class="bi bi-sliders me-1" aria-hidden="true"></i>Advanced background</button>
+            </div>
           </div>
         </div>
       </div>
@@ -117,6 +121,23 @@
   </div>
 </form>
 
+{{#> modal-shell modalId="background-advanced-modal" modalLabelId="background-advanced-modal-label" modalDialogClass="modal-dialog-centered"}}
+  <div class="modal-header">
+    <h2 class="modal-title fs-5" id="background-advanced-modal-label">Advanced background</h2>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+  </div>
+  <div class="modal-body">
+    <div class="form-check mb-3">
+      <input class="form-check-input" type="checkbox" id="background-gradient-enabled" {{#if template.background_gradient}}checked{{/if}} />
+      <label class="form-check-label" for="background-gradient-enabled">Use linear gradient</label>
+    </div>
+    <div class="row g-3" id="background-gradient-options" {{#if template.background_gradient}}{{else}}hidden{{/if}}>
+      <div class="col-12"><label for="background-gradient-angle" class="form-label">Gradient angle <output id="background-gradient-angle-output">90</output>&deg;</label><input type="range" id="background-gradient-angle" class="form-range" min="0" max="360" value="90" /></div>
+      <div class="col-12"><div class="gradient-stop-bar mb-3" id="background-gradient-bar" role="slider" aria-label="Gradient colour stops" aria-valuemin="0" aria-valuemax="100"><div class="gradient-stop-bar-track"></div><div class="gradient-stop-bar-handles" id="background-gradient-bar-handles"></div></div><div class="d-flex justify-content-between align-items-center mb-2"><strong>Colour stops</strong><button type="button" class="btn btn-sm btn-outline-secondary" id="background-gradient-add-stop"><i class="bi bi-plus-lg me-1" aria-hidden="true"></i>Add stop</button></div><div class="d-grid gap-2" id="background-gradient-stops"></div></div>
+    </div>
+  </div>
+{{/modal-shell}}
+
 <script src="/assets/js/shared/qr-code-svg.js?v={{appVersion}}"></script>
 <script src="/assets/vendor/qr-code-styling/qr-code-styling-loader.js?v={{appVersion}}"></script>
 

test/admin-client-commands.test.js

@@ -32,7 +32,7 @@ test('move client rebinding redirects the live player to the target screen', asy
           return [[{ id: 12, name: 'Source Screen', slug: 'source-screen' }]];
         }
         if (sql.includes('SELECT d.client_name, s.slug AS current_screen_slug')) {
-          return [[{ client_name: 'Lobby Client', current_screen_slug: 'source-screen' }]];
+          return [[{ client_name: 'Stored Client Name', current_screen_slug: 'source-screen' }]];
         }
         if (sql.includes('SELECT id, name, slug FROM d_screens WHERE slug = ?') && params && params[0] === 'target-screen') {
           return [[{ id: 27, name: 'Target Screen', slug: 'target-screen' }]];
@@ -126,6 +126,7 @@ test('move client rebinding redirects the live player to the target screen', asy
     body: {
       command: 'moveclient',
       deviceId: 'device-123',
+          clientId: 'tab-123',
       clientName: 'Lobby Client',
       targetScreenSlug: 'target-screen',
       connectionId: 'conn-1',
@@ -136,8 +137,16 @@ test('move client rebinding redirects the live player to the target screen', asy
 
   assert.equal(response.statusCode, 200);
   assert.equal(response.body.ok, true);
-  assert.equal(response.body.targetScreenSlug, 'target-screen');
+        assert.equal(response.body.playerUrl, 'http://remote-player.example/screen/target-screen');
-  assert.equal(response.body.playerUrl, 'http://remote-player.example/screen/target-screen');
+  assert.equal(calls.some((entry) => entry.kind === 'query'
+    && entry.sql.includes('SET screen_id = ?, modified_at = CURRENT_TIMESTAMP')
+    && entry.params[0] === 27
+    && entry.params[1] === 'device-123'), false);
+  assert.equal(calls.some((entry) => entry.kind === 'query'
+    && entry.sql.includes('SET client_name = ?, screen_id = ?, modified_at = CURRENT_TIMESTAMP')
+    && entry.params[0] === 'Lobby Client'
+    && entry.params[1] === 27
+    && entry.params[2] === 'tab-123'), true);
   assert.equal(calls.some((entry) => entry.kind === 'broadcastDashboardState'), true);
   assert.equal(calls.some((entry) => entry.kind === 'forwardPlayerCommand' && entry.slug === 'source-screen' && entry.payload && entry.payload.command === 'redirect'), false);
   assert.equal(calls.some((entry) => entry.kind === 'forwardPlayerCommandToBaseUrl' && entry.baseUrl === 'http://remote-player.example'), true);

test/admin-page.test.js

@@ -16,3 +16,10 @@ test('async save runs success hooks before redirecting close or new saves', () =
   assert.ok(adminPageScript.includes('clearFormDirty(form);'));
   assert.ok(adminPageScript.includes("if (submitterValue === 'close' || submitterValue === 'new')"));
 });
+
+test('data-source toggles update in place instead of reloading the edit form', () => {
+  assert.ok(adminPageScript.includes('function updateDataSourceToggle(form, response)'));
+  assert.ok(adminPageScript.includes('data-async-data-source-toggle'));
+  assert.ok(adminPageScript.includes("showToast(message || (willEnable ? 'Data source enabled.' : 'Data source disabled.'), 'success')"));
+  assert.ok(!adminPageScript.includes("/^\\/data-sources\\/(?:api-sources|rss-feeds|weather)\\/\\d+$/.test(actionPath);"));
+});

test/onboarding-device-prune.test.js

@@ -0,0 +1,20 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const { pruneStaleOnboardingDevices } = require('../src/db/common');
+
+test('prunes old unbound onboarding devices without deleting completed bindings', async () => {
+  let queryText = '';
+  const pool = {
+    async query(sql) {
+      queryText = sql;
+      return [[]];
+    }
+  };
+
+  await pruneStaleOnboardingDevices(pool);
+
+  assert.match(queryText, /modified_at < \(CURRENT_TIMESTAMP - INTERVAL 1 MINUTE\)/);
+  assert.match(queryText, /WHERE screen_id IS NULL/);
+  assert.doesNotMatch(queryText, /d_players\.identifier = d_onboarding_devices\.device_id/);
+});

test/player-render-helpers.test.js

@@ -11,7 +11,8 @@ const {
   normalizeSlide,
   renderEditorJsContent,
   renderHtmlRegionContent,
-  sanitizeRichText
+  sanitizeRichText,
+  getAnnouncementIconsDataScript
 } = require('../src/player/render-helpers');
 
 test('mediaKind classifies player media by extension', () => {
@@ -89,6 +90,10 @@ test('timetable region registers the timetable type', () => {
   assert.ok(timetableRegionSource.includes("sanitizeRichText(substituteTimetableVariables(value"));
 });
 
+test('player announcement bootstrap includes catalog-only icons', () => {
+  assert.match(getAnnouncementIconsDataScript(), /bank/);
+});
+
 test('shared iframe renderers size preview content explicitly', () => {
   const playerHtmlRegionSource = fs.readFileSync(require.resolve('../src/player/regions/html.js'), 'utf8');
   const playerWebpageRegionSource = fs.readFileSync(require.resolve('../src/player/regions/webpage.js'), 'utf8');

test/player-routes.test.js

@@ -97,6 +97,84 @@ function createPlayerRouteOptions(overrides) {
   }, overrides);
 }
 
+test('local player serves a neutral shell for direct screen URLs', async () => {
+  const { app, handlers } = createAppAndHandlers();
+  registerPlayerRoutes(app, {
+    app,
+    pool: {
+      async query(sql) {
+        if (String(sql).includes('FROM d_onboarding_devices d')) {
+          return [[{ slug: 'target-screen' }]];
+        }
+        return [[]];
+      }
+    },
+    common: { renderPlayerPage() { return 'online'; } },
+    ...createPlayerRouteOptions({
+      playerDeviceId: 'player-local'
+    })
+  });
+
+  const movedResponse = createResponse();
+  await handlers['/screen/:slug']({ params: { slug: 'target-screen' }, query: { clientId: 'tab-local' }, headers: {} }, movedResponse);
+  assert.equal(movedResponse.statusCode, 200);
+  assert.equal(movedResponse.body, 'online');
+
+  const oldResponse = createResponse();
+  await handlers['/screen/:slug']({ params: { slug: 'old-screen' }, query: { clientId: 'tab-local' }, headers: {} }, oldResponse);
+  assert.equal(oldResponse.statusCode, 200);
+  assert.equal(oldResponse.body, 'online');
+});
+
+test('remote player serves a neutral shell for direct screen URLs', async () => {
+  const { app, handlers } = createAppAndHandlers();
+  const originalFetch = global.fetch;
+  global.fetch = async function (url) {
+    if (String(url).includes('/api/onboarding/status')) {
+      return {
+        status: 200,
+        headers: { get() { return 'application/json'; } },
+        async json() {
+          return { screenId: 27, screenSlug: 'target-screen' };
+        }
+      };
+    }
+    return {
+      status: 200,
+      headers: { get() { return 'application/json'; } },
+      async json() {
+        return { screen: { slug: 'target-screen' } };
+      }
+    };
+  };
+
+  try {
+    registerPlayerRoutes(app, {
+      app,
+      pool: null,
+      common: { renderPlayerPage() { return 'online'; } },
+      ...createPlayerRouteOptions({
+        bridgeBaseUrl: 'http://bridge.test',
+        playerDeviceId: 'player-remote'
+      })
+    });
+
+    const movedResponse = createResponse();
+    await handlers['/screen/:slug']({ params: { slug: 'target-screen' }, query: { clientId: 'tab-remote' }, headers: {} }, movedResponse);
+    await new Promise((resolve) => setImmediate(resolve));
+    assert.equal(movedResponse.statusCode, 200);
+    assert.equal(movedResponse.body, 'online');
+
+    const oldResponse = createResponse();
+    await handlers['/screen/:slug']({ params: { slug: 'old-screen' }, query: { clientId: 'tab-remote' }, headers: {} }, oldResponse);
+    await new Promise((resolve) => setImmediate(resolve));
+    assert.equal(oldResponse.statusCode, 200);
+    assert.equal(oldResponse.body, 'online');
+  } finally {
+    global.fetch = originalFetch;
+  }
+});
+
 test('screen route reports the request origin for the player public base url', async () => {
   const { app, handlers } = createAppAndHandlers();
   let reportedBaseUrl = null;
@@ -249,20 +327,7 @@ test('screen route renders the shell when playlist data is missing', async () =>
 
   assert.equal(res.statusCode, 200);
   assert.match(String(res.body), /Loading screen/);
-  assert.deepEqual(renderCalls, [
+  assert.deepEqual(renderCalls, [{ slug: 'test2', data: null }]);
-    {
-      slug: 'test2',
-      data: {
-        screen: { id: 7, slug: 'test2' },
-        playlist: null,
-        slides: [],
-        rssFeeds: [],
-        apiSources: [],
-        timetableGroups: [],
-        revision: 'abc123'
-      }
-    }
-  ]);
 });
 
 test('playlist api route returns 404, etag, and 304 responses', async () => {

test/schema-update-log.test.js

@@ -44,7 +44,7 @@ test('pending migrations are empty when the schema already matches the app versi
     }
   ]);
 
-  const pendingMigrations = await getPendingMigrations(pool, { currentVersion: '2.8.9' });
+  const pendingMigrations = await getPendingMigrations(pool, { currentVersion: '2.10.1' });
 
   assert.equal(pendingMigrations.length, 0);
 });

test/templates.test.js

@@ -6,7 +6,8 @@ require('../src/common');
 
 const {
   buildTemplatePayload,
-  extractTemplateRegions
+  extractTemplateRegions,
+  normalizeBackgroundGradient
 } = require('../src/data/templates');
 const renderTemplateAddPage = require('../src/web/routes/signage/templates/add');
 const renderTemplateEditPage = require('../src/web/routes/signage/templates/edit');
@@ -81,6 +82,7 @@ test('buildTemplatePayload resolves canvas size and rejects duplicate region nam
     canvasSizeHeight: 720,
     backgroundImagePath: null,
     backgroundColor: '#111111',
+    backgroundGradient: null,
     regions: [{
       region_key: 'Header',
       region_type: 'text',
@@ -230,3 +232,20 @@ test('template designer warns when invalid region names block save', () => {
   assert.ok(script.includes('function notifyRegionNameValidationError(message)'));
   assert.ok(script.includes('regionNameValidationToastShown = false;'));
 });
+
+test('normalizeBackgroundGradient accepts linear colors and clamps the angle', () => {
+  assert.equal(normalizeBackgroundGradient(JSON.stringify({
+    type: 'radial',
+    colors: ['#123456', '#abcdef', '#fedcba'],
+    angle: 400
+  })), JSON.stringify({
+    type: 'linear',
+    stops: [
+      { color: '#123456', position: 0 },
+      { color: '#abcdef', position: 50 },
+      { color: '#fedcba', position: 100 }
+    ],
+    angle: 360
+  }));
+  assert.equal(normalizeBackgroundGradient('{}'), null);
+});

test/weather-duplicate.test.js

@@ -0,0 +1,49 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const { buildDuplicateWeatherLocationName, buildDuplicateWeatherLocation } = require('../src/web/routes/data-sources/weather/duplicate');
+
+test('weather location duplicate helper copies settings and resets runtime state', () => {
+  const location = {
+    id: 7,
+    name: 'London',
+    location_label: 'London, UK',
+    latitude: 51.5074,
+    longitude: -0.1278,
+    timezone: 'Europe/London',
+    provider: 'open-meteo',
+    temperature_unit: 'celsius',
+    wind_unit: 'kmh',
+    precipitation_unit: 'mm',
+    update_interval_value: 30,
+    update_interval_unit: 'minutes',
+    last_pulled_at: '2026-08-28T10:00:00.000Z',
+    last_pull_error: 'Bad response',
+    last_response_status: 500,
+    last_response_content_type: 'application/json',
+    last_response_json: '{"ok":false}'
+  };
+
+  const duplicate = buildDuplicateWeatherLocation(location, buildDuplicateWeatherLocationName(location.name));
+
+  assert.equal(duplicate.id, null);
+  assert.equal(duplicate.name, 'Copy of London');
+  assert.equal(duplicate.location_label, 'London, UK');
+  assert.equal(duplicate.latitude, 51.5074);
+  assert.equal(duplicate.longitude, -0.1278);
+  assert.equal(duplicate.provider, 'open-meteo');
+  assert.equal(duplicate.update_interval_value, 30);
+  assert.equal(duplicate.last_pulled_at, null);
+  assert.equal(duplicate.last_pull_error, '');
+  assert.equal(duplicate.last_response_status, null);
+  assert.equal(duplicate.last_response_json, '');
+});
+
+test('weather list template includes duplicate action', () => {
+  const template = fs.readFileSync(path.join(__dirname, '..', 'src', 'web', 'views', 'data-sources', 'weather', 'list.hbs'), 'utf8');
+
+  assert.match(template, /\/data-sources\/weather\/{\{id\}\}\/duplicate/);
+  assert.match(template, />Dupe<\/a>/);
+});

test/weather-forecast.test.js

@@ -0,0 +1,38 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const { fetchWeatherLocationForecast } = require('../src/data/weather');
+
+test('Open-Meteo hourly forecast starts at the current hour and spans 24 hours', async () => {
+  const originalFetch = global.fetch;
+  const originalDateNow = Date.now;
+  let requestUrl;
+  global.fetch = async function (url) {
+    requestUrl = new URL(url);
+    return { ok: true, json: async function () { return { hourly: { time: [] } }; } };
+  };
+  Date.now = function () { return new Date('2026-08-28T12:34:00Z').getTime(); };
+
+  try {
+    await fetchWeatherLocationForecast({ query: async function () { return [[]]; } }, {
+      latitude: 51.5,
+      longitude: -0.1,
+      timezone: 'Europe/London',
+      provider: 'open-meteo'
+    });
+  } finally {
+    global.fetch = originalFetch;
+    Date.now = originalDateNow;
+  }
+
+  assert.equal(requestUrl.searchParams.get('forecast_hours'), '24');
+  assert.equal(requestUrl.searchParams.get('forecast_days'), '7');
+});
+
+test('weather forecast preview only shows the fetch hint without a snapshot', () => {
+  const template = fs.readFileSync(path.join(__dirname, '..', 'src', 'web', 'views', 'data-sources', 'weather', 'forecast-preview.hbs'), 'utf8');
+
+  assert.match(template, /\{\{#unless weatherPreview\.hasSnapshot\}\}.*Daily and hourly forecasts will appear here after the first successful fetch\..*\{\{\/unless\}\}/);
+});

test/web-dashboard-page.test.js

@@ -7,7 +7,7 @@ require('../src/common');
 
 const renderDashboardPage = require('../src/web/routes/signage/dashboard');
 
-test('dashboard onboarding link uses the player base url', () => {
+test('dashboard pairing link uses the clients pairing permission', () => {
   const html = renderDashboardPage(
     {
       screens: [
@@ -22,11 +22,11 @@ test('dashboard onboarding link uses the player base url', () => {
       connectedPlayersCount: 0
     },
     '',
-    { id: 1, permissions: ['screens.read', 'clients.read'] }
+    { id: 1, permissions: ['screens.read', 'clients.read', 'pairing.allow'] }
   );
 
-  assert.match(html, /href="http:\/\/player\.local"/);
+  assert.match(html, /href="\/pairing"/);
-  assert.doesNotMatch(html, /http:\/\/player\.local\//);
+  assert.doesNotMatch(html, /http:\/\/player\.local/);
 });
 
 test('dashboard screen snapshot omits player links and duplicate connection counts', () => {
@@ -200,7 +200,6 @@ test('dashboard move client button opens the move modal for the selected row', (
     addEventListener() {}
   };
   const connectionInput = { value: '' };
-  const deviceInput = { value: '' };
   const clientNameInput = { value: '' };
   const playerBaseUrlInput = { value: '' };
   const targetSelect = { value: 'alpha' };
@@ -263,9 +262,6 @@ test('dashboard move client button opens the move modal for the selected row', (
         if (selector === '[data-client-move-connection-id]') {
           return connectionInput;
         }
-        if (selector === '[data-client-move-device-id]') {
-          return deviceInput;
-        }
         if (selector === '[data-client-move-client-name]') {
           return clientNameInput;
         }
@@ -338,7 +334,6 @@ test('dashboard move client button opens the move modal for the selected row', (
   assert.equal(targetSelect.options[0].disabled, true);
   assert.equal(targetSelect.options[1].disabled, false);
   assert.equal(connectionInput.value, 'conn-123');
-  assert.equal(deviceInput.value, 'device-123');
   assert.equal(clientNameInput.value, 'Lobby Client');
   assert.equal(playerBaseUrlInput.value, 'http://player.local');
 });

test/web-ui-helpers.test.js

@@ -26,8 +26,8 @@ test('client row keys prefer the client name', () => {
   loadScript(path.join(__dirname, '..', 'src', 'web', 'public', 'js', 'web-ui-helpers.js'), sandbox);
 
   const helpers = sandbox.window.webUiHelpers;
-  assert.equal(helpers.getClientRowKey({ client_name: 'Conference Left', screen_slug: 'alpha', deviceId: 'device-123', id: 'conn-1', clientId: 'client-1' }), 'Conference Left');
+  assert.equal(helpers.getClientRowKey({ client_name: 'Conference Left', screen_slug: 'alpha', deviceId: 'device-123', id: 'conn-1', clientId: 'client-1' }), 'conn-1');
-  assert.equal(helpers.getClientRowKey({ client_name: 'Conference Right', screen_slug: 'beta', deviceId: 'device-123', id: 'conn-2', clientId: 'client-2' }), 'Conference Right');
+  assert.equal(helpers.getClientRowKey({ client_name: 'Conference Right', screen_slug: 'beta', deviceId: 'device-123', id: 'conn-2', clientId: 'client-2' }), 'conn-2');
-  assert.equal(helpers.getClientRowKey({ screen_slug: 'alpha', id: 'conn-1', clientId: 'client-1' }), 'alpha');
+  assert.equal(helpers.getClientRowKey({ screen_slug: 'alpha', id: 'conn-1', clientId: 'client-1' }), 'conn-1');
   assert.equal(helpers.getClientRowKey({ clientId: 'client-1' }), 'client-1');
 });