Release 2.10.2

# Conflicts:
#	CHANGELOG.md
#	build/package.player.json
#	build/package.web.json
#	package-lock.json
#	package.json

CHANGELOG.md

@@ -2,6 +2,120 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.10.2 - 2026-08-28
+
+### Fixed
+
+- Fixed the weather forecast preview to show only its first-fetch message until a successful forecast is available.
+
+## 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
+
+- API sources, RSS feeds, and weather locations can be enabled or disabled without deleting their cached data.
+- Added Weather slide regions with current, daily, and hourly placeholders, date/time transforms, and Bootstrap weather icon transforms.
+- Added multiple saved weather locations with provider, coordinate, unit, and refresh settings.
+- Added separate Allow permissions for manually refreshing API sources, RSS feeds, and weather locations.
+
+### Changed
+
+- API, RSS, and Weather refresh jobs now skip disabled sources across scheduled, startup, queued, and manual refresh paths, while re-enabling a source resumes refresh scheduling.
+- 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.
+- Added AdminLTE extended palette colours to announcement colour choices and player rendering.
+- Removed Digital Signage Subheading and top padding.
+- API and RSS source saves now preserve cached data without pulling; added explicit manual refresh actions.
+
+## 2.8.7 - 2026-08-22
+
+### Added
+
+- Added configurable JSON POST requests and two-step login-then-token authentication for API sources.
+
+## 2.8.6 - 2026-08-18
+
+### Fixed
+
+- Added live URL validation with inline feedback and explicit HTTP or HTTPS scheme enforcement for URL fields.
+- Prevented Enter in slide editor inputs from implicitly saving the slide.
+- Collapsed nested API response JSON sections by default while keeping the root response visible.
+
+## 2.8.5 - 2026-08-17
+
+### Fixed
+
+- Fixed thumbnail capture timing so video assets are ready before the preview canvas is captured.
+- Replaced unavailable webpage thumbnails with a subdued placeholder while keeping live webpage previews intact.
+
+## 2.8.4 - 2026-08-17
+
+### Added
+
+- Added local caching for API and RSS image placeholders under `player-cache/remote-images` for offline player playback.
+- Added reconciliation of cached remote images so files no longer referenced by slides are removed.
+
+### Fixed
+
+- Fixed popup preview authentication for background thumbnail capture.
+- Fixed thumbnails so they use the same popup-preview canvas and resolve API/RSS placeholders, fonts, styles, and cached images correctly.
+- Fixed manual scheduled-task run notifications so they use task-neutral wording.
+
+## 2.8.3 - 2026-08-17
+
+### Added
+
+- Added API, RSS, Timetable, and Time / Date placeholder help panels with shared transform and date-token documentation.
+- Added render-time API and RSS image placeholders with proportional sizing and preview-only bounding boxes.
+
+### Changed
+
+- API and RSS regions now preserve authored content when no data source is selected and remain blank when a selected source has no authored content.
+- Normal WYSIWYG image insertion remains upload-backed and separate from image placeholder transforms.
+
+## 2.8.2 - 2026-08-16
+
+### Changed
+
+- Standardized update audit events on from/to changes and added readable table diffs for nested JSON, arrays, null values, and empty strings.
+- Standardized internal `src/data` imports on the `#src` alias.
+
 ## 2.8.1 - 2026-08-16
 
 ### Fixed

build/package.player.json

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

build/package.web.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage-web",
-  "version": "2.8.1",
+  "version": "2.10.2",
   "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.8.1",
+  "version": "2.10.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-signage",
-      "version": "2.8.1",
+      "version": "2.10.2",
       "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.8.1",
+  "version": "2.10.2",
   "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/common.js

@@ -82,6 +82,12 @@ module.exports = {
   buildRssFeedPayload: data.buildRssFeedPayload,
   fetchRssFeedItems: data.fetchRssFeedItems,
   replaceRssFeedItems: data.replaceRssFeedItems,
+  fetchWeatherLocationsData: data.fetchWeatherLocationsData,
+  fetchWeatherLocationsPage: data.fetchWeatherLocationsPage,
+  fetchWeatherLocationById: data.fetchWeatherLocationById,
+  fetchWeatherLocationSuggestions: data.fetchWeatherLocationSuggestions,
+  fetchWeatherLocationForecast: data.fetchWeatherLocationForecast,
+  buildWeatherLocationPayload: data.buildWeatherLocationPayload,
   fetchScreenById: data.fetchScreenById,
   fetchScreenEditData: data.fetchScreenEditData,
   fetchScreenPlayerUrls: data.fetchScreenPlayerUrls,

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/announcements.js

@@ -11,7 +11,11 @@ const { validateMaxLength } = require('./utils');
 const SHORT_LABEL_MAX_LENGTH = 255;
 
 const ANNOUNCEMENT_TYPES = ['lower-third', 'fullscreen', 'top-banner'];
-const ANNOUNCEMENT_COLORS = ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light'];
+const ANNOUNCEMENT_COLORS = [
+  'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light',
+  'orange', 'amber', 'olive', 'teal', 'sky', 'indigo', 'violet', 'fuchsia', 'pink',
+  'navy', 'steel', 'slate', 'graphite', 'midnight'
+];
 
 function normalizeAnnouncementType(value) {
   const normalized = String(value || '').trim().toLowerCase();

src/data/api-sources.js

@@ -8,6 +8,11 @@ const NAME_MAX_LENGTH = 255;
 const URL_MAX_LENGTH = 1024;
 const AUTH_MAX_LENGTH = 255;
 const ITEMS_PATH_MAX_LENGTH = 255;
+const REQUEST_BODY_MAX_LENGTH = 1000000;
+const TOKEN_URL_MAX_LENGTH = 1024;
+const TOKEN_RESPONSE_PATH_MAX_LENGTH = 255;
+const TOKEN_HEADER_PREFIX_MAX_LENGTH = 64;
+const tokenCache = new Map();
 
 function normalizeUpdateIntervalUnit(value) {
   const unit = String(value || '').trim().toLowerCase();
@@ -19,7 +24,11 @@ function normalizeUpdateIntervalUnit(value) {
 
 function normalizeAuthMethod(value) {
   const method = String(value || '').trim().toLowerCase();
-  return ['basic', 'bearer', 'api_key_header'].includes(method) ? method : 'none';
+  return ['basic', 'bearer', 'api_key_header', 'token_login'].includes(method) ? method : 'none';
+}
+
+function normalizeRequestMethod(value) {
+  return String(value || '').trim().toUpperCase() === 'POST' ? 'POST' : 'GET';
 }
 
 function buildAuthHeaders(source) {
@@ -50,7 +59,7 @@ function buildAuthHeaders(source) {
 
 async function fetchApiSourcesData(pool) {
   const [apiSources] = await pool.query(
-    'SELECT id, name, api_url, auth_method, auth_username, auth_password, auth_bearer_token, auth_header_name, auth_header_value, items_path, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM i_api_sources ORDER BY modified_at DESC, id DESC'
+    'SELECT id, name, api_url, request_method, request_body_json, auth_method, auth_username, auth_password, auth_bearer_token, auth_header_name, auth_header_value, token_url, token_request_body_json, token_response_path, token_header_name, token_header_prefix, items_path, enabled, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM i_api_sources ORDER BY modified_at DESC, id DESC'
   );
 
   return { apiSources: apiSources };
@@ -58,7 +67,7 @@ async function fetchApiSourcesData(pool) {
 
 async function fetchApiSourcesPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
-    selectSql: 'SELECT id, name, api_url, auth_method, auth_username, auth_password, auth_bearer_token, auth_header_name, auth_header_value, items_path, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM i_api_sources ORDER BY modified_at DESC, id DESC',
+    selectSql: 'SELECT id, name, api_url, request_method, request_body_json, auth_method, auth_username, auth_password, auth_bearer_token, auth_header_name, auth_header_value, token_url, token_request_body_json, token_response_path, token_header_name, token_header_prefix, items_path, enabled, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM i_api_sources ORDER BY modified_at DESC, id DESC',
     countSql: 'SELECT COUNT(*) AS count FROM i_api_sources',
     searchColumns: ['name', 'api_url', 'last_pull_error'],
     searchTerm: searchTerm,
@@ -82,7 +91,7 @@ async function fetchApiSourcesPage(pool, page, pageSize, searchTerm, sortKey, so
 
 async function fetchApiSourceById(pool, id) {
   const [rows] = await pool.query(
-    'SELECT id, name, api_url, auth_method, auth_username, auth_password, auth_bearer_token, auth_header_name, auth_header_value, items_path, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM i_api_sources WHERE id = ?',
+    'SELECT id, name, api_url, request_method, request_body_json, auth_method, auth_username, auth_password, auth_bearer_token, auth_header_name, auth_header_value, token_url, token_request_body_json, token_response_path, token_header_name, token_header_prefix, items_path, enabled, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_status, last_response_content_type, last_response_json, created_at, modified_at, created_by, modified_by FROM i_api_sources WHERE id = ?',
     [id]
   );
 
@@ -91,13 +100,18 @@ async function fetchApiSourceById(pool, id) {
 
 async function loadUrlText(urlValue, requestOptions) {
   const extraHeaders = requestOptions && requestOptions.headers ? requestOptions.headers : {};
-  if (typeof fetch === 'function') {
+  const method = String(requestOptions && requestOptions.method || 'GET').toUpperCase();
-    const response = await fetch(urlValue, {
+  const body = requestOptions && requestOptions.body !== undefined ? requestOptions.body : undefined;
-      headers: Object.assign({
+  const headers = Object.assign({
     Accept: 'application/json, text/plain;q=0.9, */*;q=0.8',
     'User-Agent': 'Pulse Signage API Reader'
-      }, extraHeaders)
+  }, extraHeaders);
-    });
+  if (typeof fetch === 'function') {
+    const fetchOptions = { method: method, headers: headers };
+    if (body !== undefined && method !== 'GET' && method !== 'HEAD') {
+      fetchOptions.body = body;
+    }
+    const response = await fetch(urlValue, fetchOptions);
 
     return {
       statusCode: response.status,
@@ -110,12 +124,9 @@ async function loadUrlText(urlValue, requestOptions) {
   return await new Promise(function (resolve, reject) {
     const url = new URL(urlValue);
     const transport = url.protocol === 'https:' ? https : http;
-    const requestHeaders = Object.assign({
+    const request = transport.request(url, Object.assign({}, requestOptions || {}, {
-      Accept: 'application/json, text/plain;q=0.9, */*;q=0.8',
+      method: method,
-      'User-Agent': 'Pulse Signage API Reader'
+      headers: headers
-    }, extraHeaders);
-    const request = transport.get(url, Object.assign({}, requestOptions || {}, {
-      headers: requestHeaders
     }), function (response) {
       response.setEncoding('utf8');
       let body = '';
@@ -133,15 +144,126 @@ async function loadUrlText(urlValue, requestOptions) {
       response.on('error', reject);
     });
 
+    if (body !== undefined && method !== 'GET' && method !== 'HEAD') {
+      request.write(body);
+    }
+    request.end();
     request.on('error', reject);
   });
 }
 
+function parseJsonRequestBody(value, fieldName) {
+  const text = String(value || '').trim();
+  if (!text) {
+    return undefined;
+  }
+  try {
+    return JSON.parse(text);
+  } catch (_error) {
+    const error = new Error(fieldName + ' must contain valid JSON.');
+    error.statusCode = 400;
+    throw error;
+  }
+}
+
+function resolveResponsePath(value, responsePath) {
+  let current = value;
+  String(responsePath || '').split('.').forEach(function (segment) {
+    if (current === undefined || current === null) {
+      current = undefined;
+      return;
+    }
+    current = current[segment];
+  });
+  return current;
+}
+
+function getTokenCacheKey(source) {
+  return JSON.stringify([
+    source && source.id || '',
+    source && (source.token_url || source.tokenUrl) || '',
+    source && (source.token_request_body_json || source.tokenRequestBodyJson) || '',
+    source && (source.token_response_path || source.tokenResponsePath) || 'access_token',
+    source && (source.token_header_name || source.tokenHeaderName) || 'Authorization',
+    source && (source.token_header_prefix || source.tokenHeaderPrefix) || 'Bearer'
+  ]);
+}
+
+function clearCachedToken(source) {
+  tokenCache.delete(getTokenCacheKey(source));
+}
+
+async function fetchLoginToken(source) {
+  const cacheKey = getTokenCacheKey(source);
+  const cached = tokenCache.get(cacheKey);
+  if (cached && cached.expiresAt > Date.now()) {
+    return cached.value;
+  }
+
+  const tokenUrl = source.token_url || source.tokenUrl;
+  const tokenBody = parseJsonRequestBody(source.token_request_body_json || source.tokenRequestBodyJson, 'Login request body');
+  const tokenHeaders = { 'Content-Type': 'application/json' };
+  const response = await loadUrlText(tokenUrl, {
+    method: 'POST',
+    headers: tokenHeaders,
+    body: tokenBody === undefined ? undefined : JSON.stringify(tokenBody)
+  });
+  if (!response.ok) {
+    throw new Error(`Unable to obtain API token (${response.statusCode}).`);
+  }
+
+  let parsed;
+  try {
+    parsed = JSON.parse(String(response.bodyText || '').trim());
+  } catch (_error) {
+    throw new Error('Token response was not valid JSON.');
+  }
+
+  const tokenPath = source.token_response_path || source.tokenResponsePath || 'access_token';
+  const token = resolveResponsePath(parsed, tokenPath);
+  if (token === undefined || token === null || String(token).trim() === '') {
+    throw new Error('Token response did not contain a token at the configured path.');
+  }
+
+  const expiresIn = Number(parsed && (parsed.expires_in || parsed.expiresIn));
+  const lifetimeMs = Number.isFinite(expiresIn) && expiresIn > 0
+    ? Math.max(30000, expiresIn * 1000 - 60000)
+    : 300000;
+  tokenCache.set(cacheKey, { value: String(token), expiresAt: Date.now() + lifetimeMs });
+  return String(token);
+}
+
+async function buildRequestHeaders(source) {
+  const method = normalizeAuthMethod(source && (source.auth_method || source.authMethod));
+  if (method !== 'token_login') {
+    return buildAuthHeaders(source);
+  }
+
+  const token = await fetchLoginToken(source);
+  const headerName = String(source.token_header_name || source.tokenHeaderName || 'Authorization').trim() || 'Authorization';
+  const prefix = String(source.token_header_prefix || source.tokenHeaderPrefix || 'Bearer').trim();
+  return { [headerName]: prefix ? prefix + ' ' + token : token };
+}
+
 async function fetchApiSourceResponse(apiSource) {
   const source = apiSource && typeof apiSource === 'object' ? apiSource : { api_url: apiSource };
-  const response = await loadUrlText(source.api_url, {
+  const requestMethod = normalizeRequestMethod(source.request_method || source.requestMethod);
-    headers: buildAuthHeaders(source)
+  const requestBody = parseJsonRequestBody(source.request_body_json || source.requestBodyJson, 'API request body');
+  let response;
+  let tokenRetry = false;
+  do {
+    response = await loadUrlText(source.api_url || source.apiUrl, {
+      method: requestMethod,
+      headers: Object.assign({}, await buildRequestHeaders(source), requestBody === undefined ? {} : { 'Content-Type': 'application/json' }),
+      body: requestBody === undefined ? undefined : JSON.stringify(requestBody)
     });
+    if (response.statusCode === 401 && normalizeAuthMethod(source.auth_method || source.authMethod) === 'token_login' && !tokenRetry) {
+      clearCachedToken(source);
+      tokenRetry = true;
+    } else {
+      break;
+    }
+  } while (true);
   if (!response.ok) {
     throw new Error(`Unable to load API response (${response.statusCode}).`);
   }
@@ -178,11 +300,18 @@ function buildApiSourcePayload(req, existingApiSource) {
   const name = validateMaxLength(req.body.name || fallback.name || '', NAME_MAX_LENGTH, 'API source name');
   const apiUrl = validateMaxLength(req.body.api_url || req.body.apiUrl || fallback.api_url || '', URL_MAX_LENGTH, 'API source URL');
   const authMethod = normalizeAuthMethod(readBodyValue('auth_method', readBodyValue('authMethod', fallback.auth_method || 'none')));
+  const requestMethod = normalizeRequestMethod(readBodyValue('request_method', readBodyValue('requestMethod', fallback.request_method || 'GET')));
+  const requestBodyJson = validateMaxLength(readBodyValue('request_body_json', readBodyValue('requestBodyJson', fallback.request_body_json || '')) || '', REQUEST_BODY_MAX_LENGTH, 'API request body');
   const authUsername = validateMaxLength(readBodyValue('auth_username', readBodyValue('authUsername', fallback.auth_username || '')) || '', AUTH_MAX_LENGTH, 'API source username');
   const authPassword = validateMaxLength(readBodyValue('auth_password', readBodyValue('authPassword', fallback.auth_password || '')) || '', AUTH_MAX_LENGTH, 'API source password');
   const authBearerToken = validateMaxLength(readBodyValue('auth_bearer_token', readBodyValue('authBearerToken', fallback.auth_bearer_token || '')) || '', AUTH_MAX_LENGTH, 'API source bearer token');
   const authHeaderName = validateMaxLength(readBodyValue('auth_header_name', readBodyValue('authHeaderName', fallback.auth_header_name || 'X-API-Key')) || 'X-API-Key', AUTH_MAX_LENGTH, 'API source header name') || 'X-API-Key';
   const authHeaderValue = validateMaxLength(readBodyValue('auth_header_value', readBodyValue('authHeaderValue', fallback.auth_header_value || '')) || '', AUTH_MAX_LENGTH, 'API source header value');
+  const tokenUrl = validateMaxLength(readBodyValue('token_url', readBodyValue('tokenUrl', fallback.token_url || '')) || '', TOKEN_URL_MAX_LENGTH, 'API token URL');
+  const tokenRequestBodyJson = validateMaxLength(readBodyValue('token_request_body_json', readBodyValue('tokenRequestBodyJson', fallback.token_request_body_json || '')) || '', REQUEST_BODY_MAX_LENGTH, 'Login request body');
+  const tokenResponsePath = validateMaxLength(readBodyValue('token_response_path', readBodyValue('tokenResponsePath', fallback.token_response_path || 'access_token')) || 'access_token', TOKEN_RESPONSE_PATH_MAX_LENGTH, 'Token response path');
+  const tokenHeaderName = validateMaxLength(readBodyValue('token_header_name', readBodyValue('tokenHeaderName', fallback.token_header_name || 'Authorization')) || 'Authorization', AUTH_MAX_LENGTH, 'Token header name');
+  const tokenHeaderPrefix = validateMaxLength(readBodyValue('token_header_prefix', readBodyValue('tokenHeaderPrefix', fallback.token_header_prefix || 'Bearer')) || '', TOKEN_HEADER_PREFIX_MAX_LENGTH, 'Token prefix');
   const itemsPath = validateMaxLength(readBodyValue('items_path', readBodyValue('itemsPath', fallback.items_path || '')) || '', ITEMS_PATH_MAX_LENGTH, 'API source items path');
   const updateIntervalValue = Math.max(1, Number(req.body.update_interval_value || req.body.updateIntervalValue || fallback.update_interval_value || 60));
   const updateIntervalUnit = normalizeUpdateIntervalUnit(req.body.update_interval_unit || req.body.updateIntervalUnit || fallback.update_interval_unit || 'minutes');
@@ -238,15 +367,48 @@ function buildApiSourcePayload(req, existingApiSource) {
     throw error;
   }
 
+  parseJsonRequestBody(requestBodyJson, 'API request body');
+  parseJsonRequestBody(tokenRequestBodyJson, 'Login request body');
+
+  if (authMethod === 'token_login') {
+    if (!tokenUrl) {
+      const error = new Error('Token login requires a login URL.');
+      error.statusCode = 400;
+      throw error;
+    }
+    try {
+      const tokenParsedUrl = new URL(tokenUrl);
+      if (tokenParsedUrl.protocol !== 'http:' && tokenParsedUrl.protocol !== 'https:') {
+        throw new Error('invalid protocol');
+      }
+    } catch (_error) {
+      const error = new Error('Enter a valid API token URL.');
+      error.statusCode = 400;
+      throw error;
+    }
+    if (!tokenRequestBodyJson) {
+      const error = new Error('Token login requires a JSON request body.');
+      error.statusCode = 400;
+      throw error;
+    }
+  }
+
   return {
     name: name,
     apiUrl: parsedUrl.toString(),
+    requestMethod: requestMethod,
+    requestBodyJson: requestBodyJson,
     authMethod: authMethod,
     authUsername: authUsername,
     authPassword: authPassword,
     authBearerToken: authBearerToken,
     authHeaderName: authHeaderName,
     authHeaderValue: authHeaderValue,
+    tokenUrl: tokenUrl,
+    tokenRequestBodyJson: tokenRequestBodyJson,
+    tokenResponsePath: tokenResponsePath,
+    tokenHeaderName: tokenHeaderName,
+    tokenHeaderPrefix: tokenHeaderPrefix,
     itemsPath: itemsPath,
     updateIntervalValue: Math.floor(updateIntervalValue),
     updateIntervalUnit: updateIntervalUnit

src/data/app-settings.js

@@ -40,6 +40,8 @@ const SETTING_DEFINITIONS = [
   ,{ key: 'data-sources.rss_default_interval_unit', type: 'enum', values: ['seconds', 'minutes', 'hours'], defaultValue: 'minutes' }
   ,{ key: 'data-sources.api_default_interval_value', type: 'integer', min: 1, defaultValue: 60 }
   ,{ key: 'data-sources.api_default_interval_unit', type: 'enum', values: ['seconds', 'minutes', 'hours'], defaultValue: 'minutes' }
+  ,{ key: 'weather.open_meteo_api_key', type: 'string', defaultValue: '' }
+  ,{ key: 'weather.pirate_weather_api_key', type: 'string', defaultValue: '' }
 ];
 
 const DEFINITIONS_BY_KEY = new Map(SETTING_DEFINITIONS.map(function (definition) {

src/data/audit-log.js

@@ -42,6 +42,21 @@ function normalizeDetails(details) {
   return JSON.stringify(details);
 }
 
+function buildAuditChanges(previousValues, nextValues) {
+  const previous = previousValues && typeof previousValues === 'object' ? previousValues : {};
+  const next = nextValues && typeof nextValues === 'object' ? nextValues : {};
+  const changes = {};
+  const keys = new Set(Object.keys(previous).concat(Object.keys(next)));
+
+  keys.forEach(function (key) {
+    if (JSON.stringify(previous[key]) !== JSON.stringify(next[key])) {
+      changes[key] = { from: previous[key], to: next[key] };
+    }
+  });
+
+  return changes;
+}
+
 function getRequestMetadata(req) {
   const forwardedAddress = String(req && req.headers && req.headers['x-forwarded-for'] || '').split(',')[0].trim();
   return {
@@ -97,6 +112,7 @@ module.exports = {
   AUDIT_CATEGORY_KEYS,
   AUDIT_CATEGORY_LABELS,
   getRequestMetadata,
+  buildAuditChanges,
   recordAuditEvent,
   recordRequestAuditEvent
 };

src/data/index.js

@@ -7,6 +7,7 @@ const { fetchPlaylistById } = require('./playlists');
 const { normalizeDisplayMode, fetchTimetablesData, fetchTimetableGroupsPage, fetchTimetableGroupById, fetchTimetableEntriesByGroupId, buildTimetableGroupPayload } = require('./timetables');
 const { fetchApiSourcesData, fetchApiSourcesPage, fetchApiSourceById, fetchApiSourceResponse, buildApiSourcePayload } = require('./api-sources');
 const { fetchRssFeedsData, fetchRssFeedsPage, fetchRssFeedById, fetchRssFeedItemsByFeedId, normalizeRssFeedItem, buildRssFeedPayload, fetchRssFeedItems, replaceRssFeedItems } = require('./rss-feeds');
+const { fetchWeatherLocationsData, fetchWeatherLocationsPage, fetchWeatherLocationById, fetchWeatherLocationSuggestions, fetchWeatherLocationForecast, buildWeatherLocationPayload } = require('./weather');
 const { slugify, uniqueScreenSlug, fetchScreenById, fetchScreenEditData, fetchScreenPlayerUrls, fetchPlayerPublicBaseUrl, fetchScreenPlayerRecord, fetchPlayerRecordByIdentifier } = require('./screens');
 const { fetchPlayerRegistrations } = require('./player-registry');
 const { fetchTemplateById, fetchTemplatesData, extractTemplateRegions, buildTemplatePayload } = require('./templates');
@@ -59,6 +60,12 @@ module.exports = {
   buildRssFeedPayload,
   fetchRssFeedItems,
   replaceRssFeedItems,
+  fetchWeatherLocationsData,
+  fetchWeatherLocationsPage,
+  fetchWeatherLocationById,
+  fetchWeatherLocationSuggestions,
+  fetchWeatherLocationForecast,
+  buildWeatherLocationPayload,
   fetchScreenById,
   fetchScreenEditData,
   fetchScreenPlayerUrls,

src/data/rss-feeds.js

@@ -17,7 +17,7 @@ function normalizeUpdateIntervalUnit(value) {
 
 async function fetchRssFeedsData(pool) {
   const [rssFeeds] = await pool.query(
-    'SELECT id, name, feed_url, update_interval_value, update_interval_unit, item_limit, created_at, modified_at, created_by, modified_by FROM i_rss_feeds ORDER BY modified_at DESC, id DESC'
+    'SELECT id, name, feed_url, enabled, update_interval_value, update_interval_unit, item_limit, last_pulled_at, created_at, modified_at, created_by, modified_by FROM i_rss_feeds ORDER BY modified_at DESC, id DESC'
   );
 
   return { rssFeeds: rssFeeds };
@@ -25,7 +25,7 @@ async function fetchRssFeedsData(pool) {
 
 async function fetchRssFeedsPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
-    selectSql: 'SELECT id, name, feed_url, update_interval_value, update_interval_unit, item_limit, created_at, modified_at, created_by, modified_by FROM i_rss_feeds ORDER BY modified_at DESC, id DESC',
+    selectSql: 'SELECT id, name, feed_url, enabled, update_interval_value, update_interval_unit, item_limit, last_pulled_at, created_at, modified_at, created_by, modified_by FROM i_rss_feeds ORDER BY modified_at DESC, id DESC',
     countSql: 'SELECT COUNT(*) AS count FROM i_rss_feeds',
     searchColumns: ['name', 'feed_url'],
     searchTerm: searchTerm,
@@ -48,7 +48,7 @@ async function fetchRssFeedsPage(pool, page, pageSize, searchTerm, sortKey, sort
 
 async function fetchRssFeedById(pool, id) {
   const [rows] = await pool.query(
-    'SELECT id, name, feed_url, update_interval_value, update_interval_unit, item_limit, created_at, modified_at, created_by, modified_by FROM i_rss_feeds WHERE id = ?',
+    'SELECT id, name, feed_url, enabled, update_interval_value, update_interval_unit, item_limit, last_pulled_at, created_at, modified_at, created_by, modified_by FROM i_rss_feeds WHERE id = ?',
     [id]
   );
 

src/data/slides.js

@@ -418,7 +418,7 @@ async function buildTemplateContent(pool, template, body, filesByField, existing
       content[region.region_key] = {
         type: 'rss',
         value: stripEditorOnlyMarkup(normalizeEditorMarkup(submitted === undefined ? String(current.value || '') : String(submitted || ''))),
-        feed_id: feedId === undefined || feedId === null || feedId === '' ? (current.feed_id || null) : Number(feedId),
+        feed_id: feedId === undefined || feedId === null ? (current.feed_id || null) : (feedId === '' ? null : Number(feedId)),
         item_number: Math.min(itemCount, Number.isFinite(parsedItemNumber) && parsedItemNumber > 0 ? parsedItemNumber : 1),
         variable_name: 'item',
         font_family: style.font_family,
@@ -436,7 +436,7 @@ async function buildTemplateContent(pool, template, body, filesByField, existing
       content[region.region_key] = {
         type: 'api',
         value: stripEditorOnlyMarkup(normalizeEditorMarkup(submitted === undefined ? String(current.value || '') : String(submitted || ''))),
-        source_id: sourceId === undefined || sourceId === null || sourceId === '' ? (current.source_id || null) : Number(sourceId),
+        source_id: sourceId === undefined || sourceId === null ? (current.source_id || null) : (sourceId === '' ? null : Number(sourceId)),
         item_number: Number.isFinite(parsedItemNumber) && parsedItemNumber > 0 ? parsedItemNumber : 1,
         items_path: itemsPath === undefined || itemsPath === null ? (current.items_path === undefined || current.items_path === null ? '' : String(current.items_path)) : String(itemsPath || '').trim(),
         variable_name: 'item',
@@ -444,7 +444,22 @@ async function buildTemplateContent(pool, template, body, filesByField, existing
         font_size: style.font_size,
         font_color: style.font_color
       };
-    } else if (!['text', 'image', 'video', 'webpage', 'qr-code', 'html', 'rtmp', 'rss', 'api'].includes(String(region.region_type || '').trim())) {
+    } else if (region.region_type === 'weather') {
+      const current = existingContent && existingContent[region.region_key] ? existingContent[region.region_key] : {};
+      const locationId = body[`region_weather_location_id_${region.id}`];
+      const submittedForecastMode = body[`region_weather_forecast_mode_${region.id}`];
+      const forecastMode = ['current', 'hourly'].includes(submittedForecastMode) ? submittedForecastMode : 'daily';
+      const style = getTextRegionStyle(body, region, existingContent);
+      content[region.region_key] = {
+        type: 'weather',
+        value: body[`region_text_${region.id}`] !== undefined ? String(body[`region_text_${region.id}`] || '') : String(current.value || ''),
+        weather_location_id: locationId === undefined || locationId === null ? (current.weather_location_id || null) : (locationId === '' ? null : Number(locationId)),
+        forecast_mode: body[`region_weather_forecast_mode_${region.id}`] === undefined ? (['current', 'hourly'].includes(current.forecast_mode) ? current.forecast_mode : 'daily') : forecastMode,
+        font_family: style.font_family,
+        font_size: style.font_size,
+        font_color: style.font_color
+      };
+    } else if (!['text', 'image', 'video', 'webpage', 'qr-code', 'html', 'rtmp', 'rss', 'api', 'weather'].includes(String(region.region_type || '').trim())) {
       const current = existingContent && existingContent[region.region_key] && typeof existingContent[region.region_key] === 'object' ? existingContent[region.region_key] : {};
       const suffix = '_' + region.id;
       const generic = {};

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-units.js

@@ -0,0 +1,67 @@
+// Convert cached weather snapshots for display without refetching.
+
+function convertTemperature(value, fromUnit, toUnit) {
+  const number = Number(value);
+  if (!Number.isFinite(number) || fromUnit === toUnit) return value;
+  const converted = toUnit === 'fahrenheit' ? number * 9 / 5 + 32 : (number - 32) * 5 / 9;
+  return Math.round(converted * 10) / 10;
+}
+
+function convertWind(value, fromUnit, toUnit) {
+  const number = Number(value);
+  if (!Number.isFinite(number) || fromUnit === toUnit) return value;
+  const metresPerSecond = fromUnit === 'mph' ? number * 0.44704 : fromUnit === 'kmh' ? number / 3.6 : number;
+  const converted = toUnit === 'mph' ? metresPerSecond / 0.44704 : toUnit === 'kmh' ? metresPerSecond * 3.6 : metresPerSecond;
+  return Math.round(converted * 10) / 10;
+}
+
+function convertPrecipitation(value, fromUnit, toUnit) {
+  const number = Number(value);
+  if (!Number.isFinite(number) || fromUnit === toUnit) return value;
+  const converted = toUnit === 'inch' ? number / 25.4 : number * 25.4;
+  return Math.round(converted * 100) / 100;
+}
+
+function temperatureUnitFromLabel(label) {
+  return /f/i.test(String(label || '')) ? 'fahrenheit' : 'celsius';
+}
+
+function windUnitFromLabel(label) {
+  const value = String(label || '').toLowerCase();
+  return value.includes('mph') ? 'mph' : value.includes('m/s') ? 'ms' : 'kmh';
+}
+
+function precipitationUnitFromLabel(label) {
+  return /in/i.test(String(label || '')) ? 'inch' : 'mm';
+}
+
+function convertField(data, fields, converter, fromUnit, toUnit) {
+  fields.forEach(function (field) {
+    if (data[field] === undefined || data[field] === null) return;
+    data[field] = Array.isArray(data[field])
+      ? data[field].map(function (value) { return converter(value, fromUnit, toUnit); })
+      : converter(data[field], fromUnit, toUnit);
+  });
+}
+
+function convertWeatherSnapshot(snapshot, targetUnits) {
+  const source = snapshot && typeof snapshot === 'object' ? snapshot : {};
+  const target = Object.assign({ temperature: 'celsius', wind: 'kmh', precipitation: 'mm' }, targetUnits || {});
+  const result = JSON.parse(JSON.stringify(source));
+  const currentUnits = source.current_units || {};
+  const hourlyUnits = source.hourly_units || currentUnits;
+  const dailyUnits = source.daily_units || currentUnits;
+
+  convertField(result.current || {}, ['temperature_2m', 'apparent_temperature'], convertTemperature, temperatureUnitFromLabel(currentUnits.temperature_2m), target.temperature);
+  convertField(result.current || {}, ['wind_speed_10m'], convertWind, windUnitFromLabel(currentUnits.wind_speed_10m), target.wind);
+  convertField(result.current || {}, ['precipitation', 'rain'], convertPrecipitation, precipitationUnitFromLabel(currentUnits.precipitation), target.precipitation);
+  convertField(result.hourly || {}, ['temperature_2m'], convertTemperature, temperatureUnitFromLabel(hourlyUnits.temperature_2m), target.temperature);
+  convertField(result.hourly || {}, ['wind_speed_10m'], convertWind, windUnitFromLabel(hourlyUnits.wind_speed_10m), target.wind);
+  convertField(result.hourly || {}, ['precipitation'], convertPrecipitation, precipitationUnitFromLabel(hourlyUnits.precipitation), target.precipitation);
+  convertField(result.daily || {}, ['temperature_2m_max', 'temperature_2m_min'], convertTemperature, temperatureUnitFromLabel(dailyUnits.temperature_2m_max), target.temperature);
+  convertField(result.daily || {}, ['wind_speed_10m_max'], convertWind, windUnitFromLabel(dailyUnits.wind_speed_10m_max), target.wind);
+  convertField(result.daily || {}, ['precipitation_sum'], convertPrecipitation, precipitationUnitFromLabel(dailyUnits.precipitation_sum), target.precipitation);
+  return result;
+}
+
+module.exports = { convertWeatherSnapshot };

src/data/weather.js

@@ -0,0 +1,138 @@
+// Weather location data access and form normalization.
+
+const { fetchPagedRows, validateMaxLength } = require('./utils');
+const { fetchAppSettings } = require('./app-settings');
+
+const NAME_MAX_LENGTH = 255;
+const LOCATION_MAX_LENGTH = 255;
+const TIMEZONE_MAX_LENGTH = 128;
+const PROVIDERS = ['open-meteo', 'pirate-weather'];
+const TEMPERATURE_UNITS = ['celsius', 'fahrenheit'];
+const WIND_UNITS = ['kmh', 'mph', 'ms'];
+const PRECIPITATION_UNITS = ['mm', 'inch'];
+
+async function fetchWeatherLocationSuggestions(query) {
+  const search = validateMaxLength(query, LOCATION_MAX_LENGTH, 'Location search');
+  if (!search) {
+    return [];
+  }
+
+  const response = await fetch('https://geocoding-api.open-meteo.com/v1/search?name=' + encodeURIComponent(search) + '&count=8&language=en&format=json', {
+    headers: { Accept: 'application/json', 'User-Agent': 'Pulse Signage weather location lookup' }
+  });
+  if (!response.ok) {
+    throw new Error('Weather location lookup failed.');
+  }
+  const data = await response.json();
+  return (Array.isArray(data.results) ? data.results : []).map(function (result) {
+    return {
+      label: [result.name, result.admin1, result.country].filter(Boolean).join(', '),
+      latitude: Number(result.latitude),
+      longitude: Number(result.longitude),
+      timezone: String(result.timezone || '')
+    };
+  }).filter(function (result) {
+    return result.label && Number.isFinite(result.latitude) && Number.isFinite(result.longitude) && result.timezone;
+  });
+}
+
+function normalizeChoice(value, choices, fallback) {
+  const normalized = String(value || '').trim().toLowerCase();
+  return choices.includes(normalized) ? normalized : fallback;
+}
+
+async function fetchWeatherLocationsPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
+  const paged = await fetchPagedRows(pool, {
+    selectSql: 'SELECT id, name, location_label, latitude, longitude, timezone, provider, temperature_unit, wind_unit, precipitation_unit, enabled, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, created_at, modified_at FROM i_weather_locations ORDER BY modified_at DESC, id DESC',
+    countSql: 'SELECT COUNT(*) AS count FROM i_weather_locations',
+    searchColumns: ['name', 'location_label', 'timezone', 'provider'],
+    searchTerm: searchTerm,
+    sortColumns: {
+      name: 'name',
+      location: 'location_label',
+      provider: 'provider',
+      interval: ['update_interval_value', 'update_interval_unit'],
+      last_pulled: 'last_pulled_at',
+      modified: 'modified_at'
+    },
+    sortKey: sortKey,
+    sortDirection: sortDirection,
+    page: page,
+    pageSize: pageSize
+  });
+  return Object.assign({ weatherLocations: paged.rows }, paged);
+}
+
+async function fetchWeatherLocationsData(pool) {
+  const [rows] = await pool.query('SELECT id, name, location_label, latitude, longitude, timezone, provider, temperature_unit, wind_unit, precipitation_unit, enabled, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_json, created_at, modified_at FROM i_weather_locations ORDER BY modified_at DESC, id DESC');
+  return { weatherLocations: rows };
+}
+
+async function fetchWeatherLocationById(pool, id) {
+  const [rows] = await pool.query('SELECT id, name, location_label, latitude, longitude, timezone, provider, temperature_unit, wind_unit, precipitation_unit, enabled, update_interval_value, update_interval_unit, last_pulled_at, last_pull_error, last_response_json, created_at, modified_at, created_by, modified_by FROM i_weather_locations WHERE id = ?', [id]);
+  return rows[0] || null;
+}
+
+async function fetchWeatherLocationForecast(pool, location) {
+  const source = location || {};
+  const settings = await fetchAppSettings(pool);
+  const latitude = Number(source.latitude);
+  const longitude = Number(source.longitude);
+  const temperatureUnit = source.temperature_unit === 'fahrenheit' ? 'fahrenheit' : 'celsius';
+  const windUnit = source.wind_unit === 'mph' ? 'mph' : source.wind_unit === 'ms' ? 'ms' : 'kmh';
+  const precipitationUnit = source.precipitation_unit === 'inch' ? 'inch' : 'mm';
+  let url;
+  let headers = { Accept: 'application/json', 'User-Agent': 'Pulse Signage weather reader' };
+
+  if (source.provider === 'pirate-weather') {
+    const apiKey = String(settings['weather.pirate_weather_api_key'] || '').trim();
+    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', 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();
+  }
+
+  const response = await fetch(url, { headers: headers });
+  if (!response.ok) throw new Error('Weather provider returned HTTP ' + response.status + '.');
+  const snapshot = await response.json();
+  return { snapshot: snapshot, responseJson: JSON.stringify(snapshot), fetchedAt: new Date() };
+}
+
+function buildWeatherLocationPayload(req, existingLocation) {
+  const body = req && req.body ? req.body : {};
+  const fallback = existingLocation || {};
+  const name = validateMaxLength(body.name || fallback.name || '', NAME_MAX_LENGTH, 'Weather location name');
+  const locationLabel = validateMaxLength(body.location_label || fallback.location_label || '', LOCATION_MAX_LENGTH, 'Location label');
+  const latitude = Number(body.latitude !== undefined ? body.latitude : fallback.latitude);
+  const longitude = Number(body.longitude !== undefined ? body.longitude : fallback.longitude);
+  const timezone = validateMaxLength(body.timezone || fallback.timezone || '', TIMEZONE_MAX_LENGTH, 'Timezone');
+  const provider = normalizeChoice(body.provider || fallback.provider, PROVIDERS, 'open-meteo');
+  const temperatureUnit = normalizeChoice(body.temperature_unit || fallback.temperature_unit, TEMPERATURE_UNITS, 'celsius');
+  const windUnit = normalizeChoice(body.wind_unit || fallback.wind_unit, WIND_UNITS, 'kmh');
+  const precipitationUnit = normalizeChoice(body.precipitation_unit || fallback.precipitation_unit, PRECIPITATION_UNITS, 'mm');
+  const updateIntervalValue = Number(body.update_interval_value || fallback.update_interval_value || 30);
+  const updateIntervalUnit = normalizeChoice(body.update_interval_unit || fallback.update_interval_unit, ['minutes', 'hours'], 'minutes');
+
+  if (!name || !locationLabel || !timezone) {
+    const error = new Error('Name, location label, and timezone are required.');
+    error.statusCode = 400;
+    throw error;
+  }
+  if (!Number.isFinite(latitude) || latitude < -90 || latitude > 90 || !Number.isFinite(longitude) || longitude < -180 || longitude > 180) {
+    const error = new Error('Latitude must be between -90 and 90, and longitude must be between -180 and 180.');
+    error.statusCode = 400;
+    throw error;
+  }
+  if (!Number.isInteger(updateIntervalValue) || updateIntervalValue < 1 || updateIntervalValue > 1440) {
+    const error = new Error('Update interval must be a whole number between 1 and 1440.');
+    error.statusCode = 400;
+    throw error;
+  }
+
+  return { name, locationLabel, latitude, longitude, timezone, provider, temperatureUnit, windUnit, precipitationUnit, updateIntervalValue, updateIntervalUnit };
+}
+
+module.exports = { fetchWeatherLocationsData, fetchWeatherLocationsPage, fetchWeatherLocationById, fetchWeatherLocationSuggestions, fetchWeatherLocationForecast, buildWeatherLocationPayload, PROVIDERS, TEMPERATURE_UNITS, WIND_UNITS, PRECIPITATION_UNITS };

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,
@@ -203,9 +204,11 @@ async function ensureSchema(pool, options) {
       id INT AUTO_INCREMENT PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       feed_url VARCHAR(1024) NOT NULL,
+      enabled TINYINT(1) NOT NULL DEFAULT 1,
       update_interval_value INT NOT NULL DEFAULT 60,
       update_interval_unit VARCHAR(10) NOT NULL DEFAULT 'minutes',
       item_limit INT NOT NULL DEFAULT 1,
+      last_pulled_at DATETIME 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,
@@ -233,6 +236,21 @@ async function ensureSchema(pool, options) {
       id INT AUTO_INCREMENT PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       api_url VARCHAR(1024) NOT NULL,
+      request_method VARCHAR(10) NOT NULL DEFAULT 'GET',
+      request_body_json MEDIUMTEXT NULL,
+      auth_method VARCHAR(32) NOT NULL DEFAULT 'none',
+      auth_username VARCHAR(255) NULL,
+      auth_password MEDIUMTEXT NULL,
+      auth_bearer_token MEDIUMTEXT NULL,
+      auth_header_name VARCHAR(255) NULL,
+      auth_header_value MEDIUMTEXT NULL,
+      token_url VARCHAR(1024) NULL,
+      token_request_body_json MEDIUMTEXT NULL,
+      token_response_path VARCHAR(255) NULL DEFAULT 'access_token',
+      token_header_name VARCHAR(255) NULL DEFAULT 'Authorization',
+      token_header_prefix VARCHAR(64) NULL DEFAULT 'Bearer',
+      items_path VARCHAR(255) NULL,
+      enabled TINYINT(1) NOT NULL DEFAULT 1,
       update_interval_value INT NOT NULL DEFAULT 60,
       update_interval_unit VARCHAR(10) NOT NULL DEFAULT 'minutes',
       last_pulled_at TIMESTAMP NULL,
@@ -247,6 +265,32 @@ async function ensureSchema(pool, options) {
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
+  await pool.query(`
+    CREATE TABLE IF NOT EXISTS i_weather_locations (
+      id BIGINT AUTO_INCREMENT PRIMARY KEY,
+      name VARCHAR(255) NOT NULL UNIQUE,
+      location_label VARCHAR(255) NOT NULL,
+      latitude DECIMAL(9,6) NOT NULL,
+      longitude DECIMAL(9,6) NOT NULL,
+      timezone VARCHAR(128) NOT NULL,
+      provider VARCHAR(32) NOT NULL DEFAULT 'open-meteo',
+      temperature_unit VARCHAR(16) NOT NULL DEFAULT 'celsius',
+      wind_unit VARCHAR(16) NOT NULL DEFAULT 'kmh',
+      precipitation_unit VARCHAR(16) NOT NULL DEFAULT 'mm',
+      enabled TINYINT(1) NOT NULL DEFAULT 1,
+      update_interval_value INT NOT NULL DEFAULT 30,
+      update_interval_unit VARCHAR(16) NOT NULL DEFAULT 'minutes',
+      last_pulled_at DATETIME NULL,
+      last_pull_error VARCHAR(1024) NULL,
+      last_response_json MEDIUMTEXT 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,
+      modified_by INT NULL,
+      INDEX idx_weather_locations_modified_at (modified_at)
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+  `);
+
   await pool.query(`
     CREATE TABLE IF NOT EXISTS i_timetable_groups (
       id INT AUTO_INCREMENT PRIMARY KEY,

src/db/migrations.js

@@ -492,6 +492,66 @@ const VERSIONED_MIGRATIONS = [
             AND permissions.permission_key = 'audit-log.allow'`
       );
     }
+  },
+  {
+    version: '2.8.7',
+    label: 'v2.8.7 API request and token authentication schema',
+    run: async function (pool) {
+      await ensureColumn(pool, 'i_api_sources', 'request_method', "VARCHAR(10) NOT NULL DEFAULT 'GET'", 'api_url');
+      await ensureColumn(pool, 'i_api_sources', 'request_body_json', 'MEDIUMTEXT NULL', 'request_method');
+      await ensureColumn(pool, 'i_api_sources', 'token_url', 'VARCHAR(1024) NULL', 'auth_header_value');
+      await ensureColumn(pool, 'i_api_sources', 'token_request_body_json', 'MEDIUMTEXT NULL', 'token_url');
+      await ensureColumn(pool, 'i_api_sources', 'token_response_path', "VARCHAR(255) NULL DEFAULT 'access_token'", 'token_request_body_json');
+      await ensureColumn(pool, 'i_api_sources', 'token_header_name', "VARCHAR(255) NULL DEFAULT 'Authorization'", 'token_response_path');
+      await ensureColumn(pool, 'i_api_sources', 'token_header_prefix', "VARCHAR(64) NULL DEFAULT 'Bearer'", 'token_header_name');
+    }
+  },
+  {
+    version: '2.8.8',
+    label: 'v2.8.8 weather locations and RSS collection timestamps schema',
+    run: async function (pool) {
+      await pool.query(`
+        CREATE TABLE IF NOT EXISTS i_weather_locations (
+          id BIGINT AUTO_INCREMENT PRIMARY KEY,
+          name VARCHAR(255) NOT NULL UNIQUE,
+          location_label VARCHAR(255) NOT NULL,
+          latitude DECIMAL(9,6) NOT NULL,
+          longitude DECIMAL(9,6) NOT NULL,
+          timezone VARCHAR(128) NOT NULL,
+          provider VARCHAR(32) NOT NULL DEFAULT 'open-meteo',
+          temperature_unit VARCHAR(16) NOT NULL DEFAULT 'celsius',
+          wind_unit VARCHAR(16) NOT NULL DEFAULT 'kmh',
+          precipitation_unit VARCHAR(16) NOT NULL DEFAULT 'mm',
+          update_interval_value INT NOT NULL DEFAULT 30,
+          update_interval_unit VARCHAR(16) NOT NULL DEFAULT 'minutes',
+          last_pulled_at DATETIME NULL,
+          last_pull_error VARCHAR(1024) NULL,
+          last_response_json MEDIUMTEXT 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,
+          modified_by INT NULL,
+          INDEX idx_weather_locations_modified_at (modified_at)
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+      `);
+      await ensureColumn(pool, 'i_rss_feeds', 'last_pulled_at', 'DATETIME NULL', 'item_limit');
+    }
+  },
+  {
+    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', '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),
@@ -187,6 +188,7 @@ async function start() {
   const playerPlaylistService = createPlayerPlaylistService({
     pool: pool,
     common: common,
+    mediaDir: config.mediaDir,
     snapshotDir: path.join(config.mediaDir, 'player-cache', 'screen-playlists')
   });
   app.use(express.json());
@@ -353,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;
@@ -513,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,
@@ -629,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,
@@ -647,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');
@@ -656,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');
-      res.send(svg);
-    } catch (error) {
-      next(error);
       }
-  });
+      const deviceId = pairing.deviceId;
-
-  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) {
@@ -687,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,
@@ -708,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) {
@@ -728,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)
@@ -840,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();
@@ -852,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,
@@ -927,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,
@@ -61,6 +64,7 @@ async function start() {
     : createPlayerPlaylistService({
         pool: pool,
         common: common,
+        mediaDir: MEDIA_DIR,
         snapshotDir: path.join(MEDIA_DIR, 'player-cache', 'screen-playlists')
       });
   const rtmpStreamService = createRtmpStreamService({
@@ -261,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.';
@@ -304,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,
@@ -374,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
         }));
       }
 
@@ -438,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

@@ -1,6 +1,7 @@
 // Player playlist assembly, snapshot persistence, and playlist revision helpers.
 
 const crypto = require('crypto');
+const { convertWeatherSnapshot } = require('#src/data/weather-units');
 const fs = require('fs');
 const path = require('path');
 const { createStyledQrCodeDataUrl } = require('../data/qr-code');
@@ -9,6 +10,8 @@ function createPlayerPlaylistService(options) {
   const pool = options && options.pool ? options.pool : null;
   const common = options && options.common ? options.common : null;
   const snapshotDir = options && options.snapshotDir ? options.snapshotDir : null;
+  const mediaDir = options && options.mediaDir ? path.resolve(String(options.mediaDir)) : null;
+  const remoteImageCacheDir = mediaDir ? path.join(mediaDir, 'player-cache', 'remote-images') : null;
 
   if (!pool) {
     throw new Error('pool is required');
@@ -61,11 +64,110 @@ function createPlayerPlaylistService(options) {
     return createStyledQrCodeDataUrl(value);
   }
 
+  function getPlaceholderImageExpressions(value, output) {
+    const expressions = output || [];
+    const source = String(value || '');
+    const pattern = /\{\{\s*([^{}]*?\.image\s*\([^{}]*\)[^{}]*?)\s*\}\}/gi;
+    let match = null;
+    while ((match = pattern.exec(source))) {
+      expressions.push(String(match[1] || '').trim());
+    }
+    return expressions;
+  }
+
+  function resolvePathValue(value, expression) {
+    const parsed = String(expression || '').replace(/\.image\s*\([^)]*\)\s*$/i, '').trim();
+    return parsed.split('.').reduce(function (current, segment) {
+      return current === undefined || current === null ? '' : current[segment];
+    }, value);
+  }
+
+  function getApiItems(responseJson, itemsPath) {
+    let current = responseJson;
+    const pathValue = String(itemsPath || '').trim();
+    if (pathValue) {
+      pathValue.split('.').forEach(function (segment) {
+        current = current === undefined || current === null ? '' : current[segment];
+      });
+      return Array.isArray(current) ? current : [];
+    }
+    if (Array.isArray(responseJson)) return responseJson;
+    if (responseJson && Array.isArray(responseJson.items)) return responseJson.items;
+    if (responseJson && Array.isArray(responseJson.results)) return responseJson.results;
+    if (responseJson && Array.isArray(responseJson.data)) return responseJson.data;
+    return responseJson ? [responseJson] : [];
+  }
+
+  async function cacheRemoteImage(url) {
+    const remoteUrl = String(url || '').trim();
+    if (!remoteImageCacheDir || !/^https?:\/\//i.test(remoteUrl)) return '';
+    const hash = crypto.createHash('sha256').update(remoteUrl).digest('hex');
+    await fs.promises.mkdir(remoteImageCacheDir, { recursive: true });
+    const existing = (await fs.promises.readdir(remoteImageCacheDir)).find(function (name) { return name.startsWith(hash + '.'); });
+    if (existing) return '/media/player-cache/remote-images/' + existing;
+    try {
+      const response = await fetch(remoteUrl, { signal: AbortSignal.timeout(15000) });
+      if (!response.ok || !String(response.headers.get('content-type') || '').toLowerCase().startsWith('image/')) return '';
+      const bytes = Buffer.from(await response.arrayBuffer());
+      if (bytes.length > 10 * 1024 * 1024) return '';
+      const contentType = String(response.headers.get('content-type') || '').toLowerCase();
+      const extension = contentType.includes('svg') ? '.svg' : contentType.includes('png') ? '.png' : contentType.includes('webp') ? '.webp' : contentType.includes('gif') ? '.gif' : '.jpg';
+      const fileName = hash + extension;
+      const filePath = path.join(remoteImageCacheDir, fileName);
+      await fs.promises.writeFile(filePath, bytes);
+      return '/media/player-cache/remote-images/' + fileName;
+    } catch (_error) {
+      return '';
+    }
+  }
+
+  async function cachePlaceholderImages(slides, rssFeeds, apiSources) {
+    if (!remoteImageCacheDir) return;
+    const usedPaths = new Set();
+    const allSlideRows = await pool.query('SELECT content_json FROM c_slides').then(function (result) { return result[0] || []; });
+    const allContents = allSlideRows.map(function (row) { return common.parseJsonSafe(row.content_json) || {}; });
+    const sourceContent = allContents.concat((slides || []).map(function (slide) { return slide.content || {}; }));
+    const cacheSource = async function (source, item, expressions) {
+      if (!source || !item) return;
+      for (const expression of expressions) {
+        const remoteUrl = String(resolvePathValue(item, expression) || '').trim();
+        const localPath = await cacheRemoteImage(remoteUrl);
+        if (localPath) {
+          source.imageCache = source.imageCache || {};
+          source.imageCache[remoteUrl] = localPath;
+          usedPaths.add(localPath);
+        }
+      }
+    };
+    for (const content of sourceContent) {
+      for (const key of Object.keys(content || {})) {
+        const region = content[key];
+        if (!region || typeof region !== 'object') continue;
+        const expressions = getPlaceholderImageExpressions(region.value, []);
+        if (!expressions.length) continue;
+        const itemNumber = Math.max(1, Number(region.item_number || 1)) - 1;
+        if (String(region.type || '').toLowerCase() === 'api') {
+          const source = (apiSources || []).find(function (entry) { return Number(entry.id) === Number(region.source_id); });
+          const items = source ? getApiItems(source.responseJson, region.items_path) : [];
+          await cacheSource(source, items[itemNumber], expressions);
+        }
+        if (String(region.type || '').toLowerCase() === 'rss') {
+          const feed = (rssFeeds || []).find(function (entry) { return Number(entry.id) === Number(region.feed_id); });
+          await cacheSource(feed, feed && feed.items && feed.items[itemNumber], expressions);
+        }
+      }
+    }
+    const files = await fs.promises.readdir(remoteImageCacheDir).catch(function () { return []; });
+    await Promise.all(files.filter(function (file) { return !usedPaths.has('/media/player-cache/remote-images/' + file); }).map(function (file) {
+      return fs.promises.unlink(path.join(remoteImageCacheDir, file)).catch(function () {});
+    }));
+  }
+
   async function buildScreenPlaylist(slug) {
     try {
       const [screenRows] = await pool.query('SELECT id, name, slug, playlist_id, created_at, modified_at, created_by, modified_by FROM d_screens WHERE slug = ?', [slug]);
       if (!screenRows.length) {
-        return { screen: null, playlist: null, slides: [], rssFeeds: [], apiSources: [], timetableGroups: [] };
+        return { screen: null, playlist: null, slides: [], rssFeeds: [], apiSources: [], timetableGroups: [], weatherLocations: [] };
       }
 
       const screen = screenRows[0];
@@ -77,6 +179,7 @@ function createPlayerPlaylistService(options) {
           rssFeeds: [],
           apiSources: [],
           timetableGroups: [],
+          weatherLocations: [],
           revision: getPlaylistRevision(screen, null, [], [], [], [], [], [])
         };
         await writeSnapshot(slug, payloadWithoutPlaylist);
@@ -120,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
@@ -241,8 +344,25 @@ function createPlayerPlaylistService(options) {
         timetableGroups = Array.isArray(timetableData && timetableData.timetableGroups) ? timetableData.timetableGroups : [];
       }
 
-      const revision = getPlaylistRevision(screen, playlist, slideRows, scheduleRuleRows, templateRows, regionRows, rssFeeds, apiSources, timetableGroups);
+      let weatherLocations = [];
-      const payload = { screen: screen, playlist: playlist, slides: slides, rssFeeds: rssFeeds, apiSources: apiSources, timetableGroups: timetableGroups, revision: revision };
+      if (typeof common.fetchWeatherLocationsData === 'function') {
+        const weatherData = await common.fetchWeatherLocationsData(pool);
+        weatherLocations = (weatherData.weatherLocations || []).map(function (location) {
+          const responseJson = common.parseJsonSafe ? common.parseJsonSafe(location.last_response_json) : null;
+          return Object.assign({}, location, {
+            responseJson: convertWeatherSnapshot(responseJson, {
+              temperature: location.temperature_unit === 'fahrenheit' ? 'fahrenheit' : 'celsius',
+              wind: location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'ms' : 'kmh',
+              precipitation: location.precipitation_unit === 'inch' ? 'inch' : 'mm'
+            })
+          });
+        });
+      }
+
+      await cachePlaceholderImages(slides, rssFeeds, apiSources);
+
+      const revision = getPlaylistRevision(screen, playlist, slideRows, scheduleRuleRows, templateRows, regionRows, rssFeeds, apiSources, timetableGroups, weatherLocations);
+      const payload = { screen: screen, playlist: playlist, slides: slides, rssFeeds: rssFeeds, apiSources: apiSources, timetableGroups: timetableGroups, weatherLocations: weatherLocations, revision: revision };
       await writeSnapshot(slug, payload);
       return payload;
     } catch (error) {
@@ -259,7 +379,7 @@ function createPlayerPlaylistService(options) {
     hash.update('\0');
   }
 
-  function getPlaylistRevision(screen, playlist, slideRows, scheduleRuleRows, templateRows, regionRows, rssFeeds, apiSources, timetableGroups) {
+  function getPlaylistRevision(screen, playlist, slideRows, scheduleRuleRows, templateRows, regionRows, rssFeeds, apiSources, timetableGroups, weatherLocations) {
     const hash = crypto.createHash('sha1');
 
     updatePlaylistRevisionHash(hash, screen && screen.id);
@@ -302,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);
     });
 
@@ -323,6 +445,7 @@ function createPlayerPlaylistService(options) {
     updatePlaylistRevisionHash(hash, JSON.stringify(rssFeeds || []));
     updatePlaylistRevisionHash(hash, JSON.stringify(apiSources || []));
     updatePlaylistRevisionHash(hash, JSON.stringify(timetableGroups || []));
+    updatePlaylistRevisionHash(hash, JSON.stringify(weatherLocations || []));
 
     return hash.digest('hex');
   }

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-announcement-templates.js

@@ -22,7 +22,11 @@
 
   function normalizeAnnouncementColor(value) {
     var normalized = String(value || '').trim().toLowerCase();
-    if (['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light'].indexOf(normalized) !== -1) {
+    if ([
+      'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light',
+      'orange', 'amber', 'olive', 'teal', 'sky', 'indigo', 'violet', 'fuchsia', 'pink',
+      'navy', 'steel', 'slate', 'graphite', 'midnight'
+    ].indexOf(normalized) !== -1) {
       return normalized;
     }
     return 'primary';
@@ -42,7 +46,21 @@
       warning: { accent: '#ffc107', foreground: '#201400', glow: 'rgba(255, 193, 7, 0.30)' },
       danger: { accent: '#dc3545', foreground: '#ffffff', glow: 'rgba(220, 53, 69, 0.34)' },
       dark: { accent: '#212529', foreground: '#ffffff', glow: 'rgba(33, 37, 41, 0.34)' },
-      light: { accent: '#f8f9fa', foreground: '#1f2937', glow: 'rgba(248, 249, 250, 0.34)' }
+      light: { accent: '#f8f9fa', foreground: '#1f2937', glow: 'rgba(248, 249, 250, 0.34)' },
+      orange: { accent: '#c84e10', foreground: '#ffffff', glow: 'rgba(200, 78, 16, 0.34)' },
+      amber: { accent: '#a56710', foreground: '#ffffff', glow: 'rgba(165, 103, 16, 0.34)' },
+      olive: { accent: '#5f7f0f', foreground: '#ffffff', glow: 'rgba(95, 127, 15, 0.34)' },
+      teal: { accent: '#12827d', foreground: '#ffffff', glow: 'rgba(18, 130, 125, 0.34)' },
+      sky: { accent: '#127caf', foreground: '#ffffff', glow: 'rgba(18, 124, 175, 0.34)' },
+      indigo: { accent: '#6f60ea', foreground: '#ffffff', glow: 'rgba(111, 96, 234, 0.34)' },
+      violet: { accent: '#9553db', foreground: '#ffffff', glow: 'rgba(149, 83, 219, 0.34)' },
+      fuchsia: { accent: '#b347be', foreground: '#ffffff', glow: 'rgba(179, 71, 190, 0.34)' },
+      pink: { accent: '#cd388d', foreground: '#ffffff', glow: 'rgba(205, 56, 141, 0.34)' },
+      navy: { accent: '#1d2d4c', foreground: '#ffffff', glow: 'rgba(29, 45, 76, 0.34)' },
+      steel: { accent: '#3a4860', foreground: '#ffffff', glow: 'rgba(58, 72, 96, 0.34)' },
+      slate: { accent: '#566577', foreground: '#ffffff', glow: 'rgba(86, 101, 119, 0.34)' },
+      graphite: { accent: '#32363c', foreground: '#ffffff', glow: 'rgba(50, 54, 60, 0.34)' },
+      midnight: { accent: '#1e1d2d', foreground: '#ffffff', glow: 'rgba(30, 29, 45, 0.34)' }
     };
 
     return tokens[colorKey] || tokens.primary;

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,15 +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.revision = nextSignature;
+        timetableGroups: Array.isArray(data.timetableGroups) ? data.timetableGroups : [],
+        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

@@ -358,6 +358,7 @@ function sanitizeRichTextAttributes(tagName, attrText) {
     h5: ['class', 'style'],
     h6: ['class', 'style'],
     img: ['src', 'alt', 'title', 'width', 'height', 'class', 'style', 'loading', 'decoding'],
+    i: ['class', 'style', 'aria-hidden'],
     col: ['class', 'style', 'span', 'width'],
     colgroup: ['class', 'style', 'span'],
     li: ['class', 'style'],
@@ -781,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
   };
 
@@ -789,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;
 }
 
@@ -875,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/regions/api.js

@@ -56,7 +56,7 @@ function getApiItem(sourceId, itemNumber, itemsPathOverride) {
   return items[index] || null;
 }
 
-function substituteApiVariables(html, item) {
+function substituteApiVariables(html, item, sourceId) {
   var source = String(html || '');
   return source.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, function (_match, expression) {
     if (!item || typeof item !== 'object') {
@@ -67,7 +67,25 @@ function substituteApiVariables(html, item) {
       return '';
     }
 
-    return escapeHtml(placeholderUtils.formatPlaceholderValue(placeholderUtils.resolvePlaceholderExpression(item, expression)));
+    var resolved = placeholderUtils.resolvePlaceholderExpression(item, expression);
+    if (typeof placeholderUtils.isImagePlaceholderExpression === 'function' && placeholderUtils.isImagePlaceholderExpression(expression)) {
+      var imageSource = placeholderUtils.formatPlaceholderValue(resolved);
+      var source = getApiSourceById(sourceId);
+      imageSource = source && source.imageCache && source.imageCache[imageSource] ? source.imageCache[imageSource] : imageSource;
+      if (!/^(?:https?:\/\/|\/media\/|\/assets\/|\/[^/])/i.test(imageSource)) {
+        return '';
+      }
+      var imageConfig = typeof placeholderUtils.getImagePlaceholderConfig === 'function' ? placeholderUtils.getImagePlaceholderConfig(expression) : {};
+      var hasImageBounds = imageConfig.width && imageConfig.height;
+      var imageStyle = hasImageBounds
+        ? 'display:block;width:100%;height:100%;object-fit:contain;'
+        : 'display:block;width:auto;height:auto;' + (imageConfig.width ? 'max-width:' + imageConfig.width + 'px;' : '') + (imageConfig.height ? 'max-height:' + imageConfig.height + 'px;' : '');
+      var image = '<img src="' + escapeHtml(imageSource) + '" alt="" style="' + imageStyle + '" />';
+      return hasImageBounds
+        ? '<span style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:' + imageConfig.width + 'px;height:' + imageConfig.height + 'px;">' + image + '</span>'
+        : image;
+    }
+    return escapeHtml(placeholderUtils.formatPlaceholderValue(resolved));
   });
 }
 
@@ -120,10 +138,8 @@ function renderApiRegion(region, regionContent) {
   var fontSize = sanitizeFontSize(regionContent.font_size || region.fontSize);
   var fontColor = sanitizeTextColor(regionContent.font_color || region.fontColor);
   var item = getApiItem(sourceId, itemNumber, itemsPath);
-  var body = item ? substituteApiVariables(content, item) : '';
+  var hasSource = String(sourceId === undefined || sourceId === null ? '' : sourceId).trim() !== '';
-  if (!body && item) {
+  var body = hasSource ? (item ? substituteApiVariables(content, item, sourceId) : '') : content;
-    body = getApiPreviewFallback(item);
-  }
   var contentStyle = 'width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;transform:scale(' + region.canvasScale + ');transform-origin:top left;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';';
   if (!body) {
     return '';

src/player/regions/html.js

@@ -32,7 +32,7 @@ function buildHtmlDocument(html) {
     return raw;
   }
 
-  return '<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + raw + '</body></html>';
+  return '<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}html,body{background:transparent !important;}</style></head><body>' + raw + '</body></html>';
 }
 
 function renderHtmlRegionContent(value) {
@@ -40,7 +40,10 @@ function renderHtmlRegionContent(value) {
   if (!html) {
     return '';
   }
-  return '<iframe class="template-region-html-frame" sandbox="" scrolling="no" srcdoc="' + escapeHtml(buildHtmlDocument(html)) + '" title="HTML region" loading="eager" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe>';
+  if (/^<!doctype\b/i.test(html) || /^<html\b/i.test(html)) {
+    return '<iframe class="template-region-html-frame" sandbox="" allowtransparency="true" scrolling="no" srcdoc="' + escapeHtml(html) + '" title="HTML region" loading="eager" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe>';
+  }
+  return '<div class="template-region-html-content" style="width:100%;height:100%;overflow:hidden;background:transparent;">' + html + '</div>';
 }
 
 function renderHtmlRegion(region, regionContent) {

src/player/regions/rss.js

@@ -1,6 +1,7 @@
 // RSS region helpers for resolving feeds, items, and nested values.
 
 var registry = window.pulsePlayerRegionTypes;
+var placeholderUtils = window.placeholderUtils || {};
 
 function getDefaultStyle() {
   return {
@@ -63,14 +64,34 @@ function resolveRssPath(value, path) {
   return current === undefined || current === null ? '' : current;
 }
 
-function substituteRssVariables(html, item) {
+function substituteRssVariables(html, item, feedId) {
   var source = String(html || '');
-  return source.replace(/\{\{\s*([a-zA-Z0-9_]+)(?:\.([a-zA-Z0-9_.]+))?\s*\}\}/g, function (_match, tokenName, tokenPath) {
+  return source.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, function (_match, expression) {
     if (!item || typeof item !== 'object') {
       return '';
     }
-    var key = tokenPath ? tokenName + '.' + tokenPath : tokenName;
+    if (typeof placeholderUtils.resolvePlaceholderExpression !== 'function' || typeof placeholderUtils.formatPlaceholderValue !== 'function') {
-    return escapeHtml(resolveRssPath(item, key || ''));
+      return '';
+    }
+    var resolved = placeholderUtils.resolvePlaceholderExpression(item, expression);
+    if (typeof placeholderUtils.isImagePlaceholderExpression === 'function' && placeholderUtils.isImagePlaceholderExpression(expression)) {
+      var imageSource = placeholderUtils.formatPlaceholderValue(resolved);
+      var feed = getRssFeedById(feedId);
+      imageSource = feed && feed.imageCache && feed.imageCache[imageSource] ? feed.imageCache[imageSource] : imageSource;
+      if (!/^(?:https?:\/\/|\/media\/|\/assets\/|\/[^/])/i.test(imageSource)) {
+        return '';
+      }
+      var imageConfig = typeof placeholderUtils.getImagePlaceholderConfig === 'function' ? placeholderUtils.getImagePlaceholderConfig(expression) : {};
+      var hasImageBounds = imageConfig.width && imageConfig.height;
+      var imageStyle = hasImageBounds
+        ? 'display:block;width:100%;height:100%;object-fit:contain;'
+        : 'display:block;width:auto;height:auto;' + (imageConfig.width ? 'max-width:' + imageConfig.width + 'px;' : '') + (imageConfig.height ? 'max-height:' + imageConfig.height + 'px;' : '');
+      var image = '<img src="' + escapeHtml(imageSource) + '" alt="" style="' + imageStyle + '" />';
+      return hasImageBounds
+        ? '<span style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:' + imageConfig.width + 'px;height:' + imageConfig.height + 'px;">' + image + '</span>'
+        : image;
+    }
+    return escapeHtml(placeholderUtils.formatPlaceholderValue(resolved));
   });
 }
 
@@ -83,17 +104,8 @@ function renderRssRegion(region, regionContent) {
   var fontSize = sanitizeFontSize(regionContent.font_size || region.fontSize || defaultStyle.font_size);
   var fontColor = sanitizeTextColor(regionContent.font_color || region.fontColor || defaultStyle.font_color);
   var item = getRssFeedItem(feedId, itemNumber);
-  var body = item ? substituteRssVariables(content, item) : '';
+  var hasFeed = String(feedId === undefined || feedId === null ? '' : feedId).trim() !== '';
-  if (!body && item) {
+  var body = hasFeed ? (item ? substituteRssVariables(content, item, feedId) : '') : content;
-    var summaryParts = [];
-    if (item.title) {
-      summaryParts.push('<h3>' + escapeHtml(item.title) + '</h3>');
-    }
-    if (item.description) {
-      summaryParts.push('<div>' + sanitizeRichText(item.description) + '</div>');
-    }
-    body = summaryParts.join('');
-  }
   var contentStyle = 'width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;transform:scale(' + region.canvasScale + ');transform-origin:top left;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';';
   if (!body) {
     return '';

src/player/regions/weather.js

@@ -0,0 +1,90 @@
+// Weather region rendering for live playback.
+
+var weatherRegistry = window.pulsePlayerRegionTypes;
+var weatherPlaceholderUtils = window.placeholderUtils || {};
+
+function weatherIconForCode(code) {
+  var value = Number(code);
+  if (value === 0) return 'bi-sun';
+  if (value <= 3) return 'bi-cloud-sun';
+  if (value <= 48) return 'bi-cloud-fog';
+  if (value <= 67 || value > 77 && value <= 82) return 'bi-cloud-rain';
+  if (value <= 77) return 'bi-cloud-snow';
+  return 'bi-cloud-lightning-rain';
+}
+
+function getWeatherLocation(locationId) {
+  var locations = Array.isArray(initialData && initialData.weatherLocations) ? initialData.weatherLocations : [];
+  return locations.find(function (location) { return Number(location.id) === Number(locationId); }) || null;
+}
+
+function normalizeWeatherExpression(expression) {
+  var value = String(expression || '').trim();
+  var currentAliases = { temp: 'current.temperature_2m', temp_unit: 'current.temperature_unit', feels_like: 'current.apparent_temperature', humidity: 'current.relative_humidity_2m', code: 'current.weather_code', wind: 'current.wind_speed_10m', wind_unit: 'current.wind_speed_unit', precip: 'current.precipitation', precip_unit: 'current.precipitation_unit', uv_index: 'current.uv_index', cloud_cover: 'current.cloud_cover', icon: 'current.weather_code.icon' };
+  var globalAliases = { temp_unit: 'temperature_unit', wind_unit: 'wind_speed_unit', precip_unit: 'precipitation_unit' };
+  if (globalAliases[value]) return globalAliases[value];
+  var currentField = value.replace(/^current\./, '');
+  var currentMatch = currentField.match(/^([^.()]+)((?:\(.*\))|(?:\..*))?$/);
+  if (currentMatch && currentAliases[currentMatch[1]]) return currentAliases[currentMatch[1]] + (currentMatch[2] || '');
+  var indexed = value.match(/^(daily|hourly)\.(\d+)\.(.+)$/);
+  if (!indexed) return value;
+  var fieldMatch = indexed[3].match(/^([^.()]+)((?:\(.*\))|(?:\..*))?$/);
+  var field = fieldMatch ? fieldMatch[1] : indexed[3];
+  var aliases = indexed[1] === 'daily' ? { time: 'time', code: 'weather_code', temp_max: 'temperature_2m_max', temp_min: 'temperature_2m_min', precip: 'precipitation_sum', wind: 'wind_speed_10m_max', uv_index: 'uv_index_max', cloud_cover: 'cloud_cover_mean', sunrise: 'sunrise', sunset: 'sunset', icon: 'weather_code' } : { time: 'time', code: 'weather_code', temp: 'temperature_2m', precip: 'precipitation', wind: 'wind_speed_10m', uv_index: 'uv_index', cloud_cover: 'cloud_cover', icon: 'weather_code' };
+  if (!Object.prototype.hasOwnProperty.call(aliases, field)) return value;
+  return field === 'icon' ? indexed[1] + '.' + aliases[field] + '.' + indexed[2] + '.icon' + (fieldMatch[2] || '') : indexed[1] + '.' + aliases[field] + '.' + indexed[2] + (fieldMatch[2] || '');
+}
+
+function withWeatherUnits(snapshot, location) {
+  var data = Object.assign({}, snapshot, { location_label: location.location_label || '', name: location.name || '', timezone: location.timezone || '', temp_unit: location.temperature_unit === 'fahrenheit' ? '°F' : '°C', wind_unit: location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'm/s' : 'km/h', precip_unit: location.precipitation_unit === 'inch' ? 'in' : 'mm' });
+  var temperatureUnit = location.temperature_unit === 'fahrenheit' ? '°F' : '°C';
+  var windUnit = location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'm/s' : 'km/h';
+  var precipitationUnit = location.precipitation_unit === 'inch' ? 'in' : 'mm';
+  data.current = Object.assign({}, snapshot.current || {}, { temperature_unit: temperatureUnit, wind_speed_unit: windUnit, precipitation_unit: precipitationUnit });
+  data.daily = Object.assign({}, snapshot.daily || {}, { temperature_unit: temperatureUnit });
+  data.hourly = Object.assign({}, snapshot.hourly || {}, { temperature_unit: temperatureUnit });
+  return data;
+}
+
+function substituteWeatherVariables(html, value) {
+  return String(html || '').replace(/\{\{\s*([^{}]+?)\s*\}\}/g, function (_match, expression) {
+    if (!value || typeof value !== 'object' || typeof weatherPlaceholderUtils.resolvePlaceholderExpression !== 'function' || typeof weatherPlaceholderUtils.formatPlaceholderValue !== 'function') return '';
+    var rawExpression = String(expression).trim();
+    var normalizedExpression = normalizeWeatherExpression(rawExpression);
+    var iconMatch = normalizedExpression.match(/^(?:current\.weather_code|daily\.weather_code\.\d+|hourly\.weather_code\.\d+)\.icon(?:\((\d+)(?:\s*,\s*(\d+))?\))?$/);
+    if (iconMatch) {
+      var codeExpression = normalizedExpression.replace(/\.icon(?:\(.*\))?$/, '');
+      var width = iconMatch[1] ? Math.max(1, Math.min(1000, Number(iconMatch[1]))) : 0;
+      var height = iconMatch[2] ? Math.max(1, Math.min(1000, Number(iconMatch[2]))) : width;
+      var style = width ? ' style="display:inline-block;vertical-align:middle;font-size:' + width + 'px;line-height:' + height + 'px;width:' + width + 'px;height:' + height + 'px;"' : '';
+        var weatherCode = weatherPlaceholderUtils.resolvePlaceholderExpression(value, codeExpression, { timeZone: value.timezone });
+        var icon = '<i class="bi ' + weatherIconForCode(weatherCode) + '"' + style + ' aria-hidden="true"></i>';
+        return width ? '<span style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:' + width + 'px;height:' + height + 'px;">' + icon + '</span>' : icon;
+    }
+    return escapeHtml(weatherPlaceholderUtils.formatPlaceholderValue(weatherPlaceholderUtils.resolvePlaceholderExpression(value, normalizeWeatherExpression(expression), { timeZone: value.timezone })));
+  });
+}
+
+function renderWeatherRegion(region, regionContent) {
+  var location = getWeatherLocation(regionContent && regionContent.weather_location_id);
+  var snapshot = location && location.responseJson && typeof location.responseJson === 'object' ? location.responseJson : null;
+  var width = Math.max(1, Math.round(Number(region && region.pixelWidth) || 1));
+  var height = Math.max(1, Math.round(Number(region && region.pixelHeight) || 1));
+  var scale = Number(region && region.canvasScale) || 1;
+  var style = 'width:' + width + 'px;height:' + height + 'px;transform:scale(' + scale + ');transform-origin:top left;overflow:hidden;';
+  if (!location || !snapshot) return '<div class="template-region weather" style="' + region.baseStyle + '"><div style="' + style + '"></div></div>';
+  var current = snapshot.current || {};
+  var value = String(regionContent && regionContent.value || '');
+  if (value) {
+    var weatherData = withWeatherUnits(snapshot, location);
+    var fontSize = Math.max(8, Number(regionContent && regionContent.font_size || region && (region.font_size || region.fontSize) || 32) || 32);
+    return '<div class="template-region weather" style="' + region.baseStyle + '"><div style="' + style + 'font-family:Arial,sans-serif;font-size:' + fontSize + 'px;line-height:1.5;">' + renderEditorJsContent(substituteWeatherVariables(value, weatherData)) + '</div></div>';
+  }
+  var daily = snapshot.daily || {};
+  var days = (daily.time || []).slice(0, 7).map(function (day, index) {
+    return '<div class="weather-region-day"><strong>' + escapeHtml(index === 0 ? 'Today' : String(day).slice(5)) + '</strong><i class="bi ' + weatherIconForCode(daily.weather_code && daily.weather_code[index]) + '"></i><span>' + escapeHtml(daily.temperature_2m_max && daily.temperature_2m_max[index] !== undefined ? daily.temperature_2m_max[index] + '°' : '-') + '</span></div>';
+  }).join('');
+  return '<div class="template-region weather" style="' + region.baseStyle + '"><div style="' + style + 'padding:3%;font-family:Arial,sans-serif;"><div style="display:flex;align-items:center;justify-content:space-between;"><div><div style="font-size:.8em;opacity:.72;">' + escapeHtml(location.location_label || location.name) + '</div><strong style="font-size:2em;">' + escapeHtml(current.temperature_2m === undefined ? '-' : current.temperature_2m) + '°</strong></div><i class="bi ' + weatherIconForCode(current.weather_code) + '" style="font-size:3em;"></i></div><div style="display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35em;margin-top:1em;">' + days + '</div></div></div>';
+}
+
+weatherRegistry.register('weather', { renderRegion: renderWeatherRegion });

src/player/render-helpers.js

@@ -64,6 +64,7 @@ function sanitizeRichTextAttributes(tagName, attrText) {
     h4: ['class', 'style'],
     h5: ['class', 'style'],
     h6: ['class', 'style'],
+    i: ['class', 'style', 'aria-hidden'],
     img: ['src', 'alt', 'title', 'width', 'height', 'class', 'style', 'loading', 'decoding'],
     col: ['class', 'style', 'span', 'width'],
     colgroup: ['class', 'style', 'span'],
@@ -426,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.' }
+        ]
       }
     ]
   },
@@ -109,6 +117,7 @@ const PERMISSION_SECTIONS = [
           { key: 'read', name: 'Read', description: 'View configured RSS feeds.' },
           { key: 'create', name: 'Create', description: 'Create new RSS feeds.' },
           { key: 'update', name: 'Update', description: 'Update RSS feeds.' },
+          { key: 'allow', name: 'Allow', description: 'Manually refresh RSS feeds.' },
           { key: 'delete', name: 'Delete', description: 'Delete RSS feeds.' }
         ]
       },
@@ -120,6 +129,7 @@ const PERMISSION_SECTIONS = [
           { key: 'read', name: 'Read', description: 'View configured API sources.' },
           { key: 'create', name: 'Create', description: 'Create new API sources.' },
           { key: 'update', name: 'Update', description: 'Update API sources.' },
+          { key: 'allow', name: 'Allow', description: 'Manually refresh API sources.' },
           { key: 'delete', name: 'Delete', description: 'Delete API sources.' }
         ]
       },
@@ -133,6 +143,18 @@ const PERMISSION_SECTIONS = [
           { key: 'update', name: 'Update', description: 'Update timetable groups and entries.' },
           { key: 'delete', name: 'Delete', description: 'Delete timetable groups.' }
         ]
+      },
+      {
+        key: 'weather',
+        order: 40,
+        name: 'Weather locations',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View configured weather locations.' },
+          { key: 'create', name: 'Create', description: 'Create new weather locations.' },
+          { key: 'update', name: 'Update', description: 'Update weather locations.' },
+          { key: 'allow', name: 'Allow', description: 'Manually refresh weather locations.' },
+          { key: 'delete', name: 'Delete', description: 'Delete weather locations.' }
+        ]
       }
     ]
   },

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/handlebars.js

@@ -179,6 +179,8 @@ function registerPartials(Handlebars, viewsRoot) {
   Handlebars.registerPartial('signage/templates/animation-advanced-modal', fs.readFileSync(path.join(viewsRoot, 'signage', 'templates', 'animation-advanced-modal.hbs'), 'utf8'));
   Handlebars.registerPartial('data-sources/api-sources/form', fs.readFileSync(path.join(viewsRoot, 'data-sources', 'api-sources', 'form.hbs'), 'utf8'));
   Handlebars.registerPartial('data-sources/rss-feeds/form', fs.readFileSync(path.join(viewsRoot, 'data-sources', 'rss-feeds', 'form.hbs'), 'utf8'));
+  Handlebars.registerPartial('data-sources/weather/preview', fs.readFileSync(path.join(viewsRoot, 'data-sources', 'weather', 'preview.hbs'), 'utf8'));
+  Handlebars.registerPartial('data-sources/weather/forecast-preview', fs.readFileSync(path.join(viewsRoot, 'data-sources', 'weather', 'forecast-preview.hbs'), 'utf8'));
 }
 
 // One entry point keeps Handlebars bootstrap centralized.

src/web/lib/background-tasks/tasks-adhoc/data-source-refresh.js

@@ -1,4 +1,4 @@
-const { refreshApiSource, refreshRssFeed } = require('../../data-source-refresh');
+const { refreshApiSource, refreshRssFeed, refreshWeatherLocation } = require('../../data-source-refresh');
 
 const TASK = {
   taskType: 'data-source-refresh'
@@ -24,6 +24,7 @@ function registerDataSourceRefreshTask(options) {
       if (!apiSource) {
         throw new Error('API source not found.');
       }
+      if (apiSource.enabled === 0 || apiSource.enabled === false) return { skipped: true, reason: 'disabled' };
       return refreshApiSource(pool, common, apiSource, Number(payload.actorId) || null, options.notifyPlayerScreens);
     }
 
@@ -32,9 +33,19 @@ function registerDataSourceRefreshTask(options) {
       if (!rssFeed) {
         throw new Error('RSS feed not found.');
       }
+      if (rssFeed.enabled === 0 || rssFeed.enabled === false) return { skipped: true, reason: 'disabled' };
       return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, Number(payload.actorId) || null, options.notifyPlayerScreens);
     }
 
+    if (sourceType === 'weather-location') {
+      const location = await common.fetchWeatherLocationById(pool, sourceId);
+      if (!location) {
+        throw new Error('Weather location not found.');
+      }
+      if (location.enabled === 0 || location.enabled === false) return { skipped: true, reason: 'disabled' };
+      return refreshWeatherLocation(pool, common, location, Number(payload.actorId) || null, options.notifyPlayerScreens);
+    }
+
     throw new Error('Unsupported data source refresh task.');
   });
 }

src/web/lib/background-tasks/tasks-scheduled/data-source-refresh.js

@@ -9,7 +9,7 @@ const TASK = {
 };
 
 const { normalizeIntervalMs } = require('../queue');
-const { refreshApiSource, refreshRssFeed } = require('../../data-source-refresh');
+const { refreshApiSource, refreshRssFeed, refreshWeatherLocation } = require('../../data-source-refresh');
 
 function registerRecurringDataSourceRefreshes(options) {
   const pool = options && options.pool;
@@ -23,6 +23,7 @@ function registerRecurringDataSourceRefreshes(options) {
   return (async function () {
     const apiSourcesData = await common.fetchApiSourcesData(pool);
     (apiSourcesData.apiSources || []).forEach(function (apiSource) {
+      if (apiSource.enabled === 0 || apiSource.enabled === false) return;
       backgroundTaskQueue.registerRecurringTask({
         key: 'api-source-refresh:' + Number(apiSource.id),
         title: 'API source refresh',
@@ -41,6 +42,7 @@ function registerRecurringDataSourceRefreshes(options) {
 
     const rssFeedsData = await common.fetchRssFeedsData(pool);
     (rssFeedsData.rssFeeds || []).forEach(function (rssFeed) {
+      if (rssFeed.enabled === 0 || rssFeed.enabled === false) return;
       backgroundTaskQueue.registerRecurringTask({
         key: 'rss-feed-refresh:' + Number(rssFeed.id),
         title: 'RSS feed refresh',
@@ -56,6 +58,19 @@ function registerRecurringDataSourceRefreshes(options) {
         }
       });
     });
+
+    const weatherLocationsData = await common.fetchWeatherLocationsData(pool);
+    (weatherLocationsData.weatherLocations || []).forEach(function (location) {
+      if (location.enabled === 0 || location.enabled === false) return;
+      backgroundTaskQueue.registerRecurringTask({
+        key: 'weather-location-refresh:' + Number(location.id),
+        title: 'Weather location refresh',
+        category: TASK.category,
+        intervalMs: normalizeIntervalMs(location.update_interval_value, location.update_interval_unit),
+        metadata: { sourceType: 'weather-location', sourceId: Number(location.id), sourceName: location.name },
+        run: function () { return refreshWeatherLocation(pool, common, location, null, options.notifyPlayerScreens); }
+      });
+    });
   })();
 }
 
@@ -73,7 +88,7 @@ function createDataSourceTaskService(options) {
   }
 
   function buildRecurringTitle(sourceType) {
-    return sourceType === 'rss-feed' ? 'RSS feed refresh' : 'API source refresh';
+    return sourceType === 'rss-feed' ? 'RSS feed refresh' : sourceType === 'weather-location' ? 'Weather location refresh' : 'API source refresh';
   }
 
   function registerRecurringRefresh(sourceType, id, name, intervalValue, intervalUnit, run) {
@@ -122,6 +137,10 @@ function createDataSourceTaskService(options) {
     return refreshRssFeed(pool, common, rssFeedId, feedUrl, itemLimit, actorId, options.notifyPlayerScreens);
   }
 
+  async function refreshWeatherLocationInBackground(locationId, actorId) {
+    return refreshWeatherLocation(pool, common, locationId, actorId, options.notifyPlayerScreens);
+  }
+
   return {
     formatRecurringKey: formatRecurringKey,
     buildRecurringTitle: buildRecurringTitle,
@@ -129,7 +148,8 @@ function createDataSourceTaskService(options) {
     removeRecurringRefresh: removeRecurringRefresh,
     getTaskStatusById: getTaskStatusById,
     refreshApiSourceInBackground: refreshApiSourceInBackground,
-    refreshRssFeedInBackground: refreshRssFeedInBackground
+    refreshRssFeedInBackground: refreshRssFeedInBackground,
+    refreshWeatherLocationInBackground: refreshWeatherLocationInBackground
   };
 }
 

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/background-tasks/tasks-startup/data-source-refresh.js

@@ -1,4 +1,5 @@
-const { refreshApiSource, refreshRssFeed } = require('../../data-source-refresh');
+const { refreshApiSource, refreshRssFeed, refreshWeatherLocation } = require('../../data-source-refresh');
+const { normalizeIntervalMs } = require('../queue');
 
 const TASK = {
   key: 'startup-data-source-refresh',
@@ -26,23 +27,52 @@ function scheduleStartupDataSourceRefreshes(options) {
     };
   }
 
+  function shouldRefreshAtStartup(source) {
+    const lastPulledAt = source && source.last_pulled_at ? new Date(source.last_pulled_at).getTime() : NaN;
+    if (!Number.isFinite(lastPulledAt)) {
+      return true;
+    }
+
+    const intervalMs = normalizeIntervalMs(source.update_interval_value, source.update_interval_unit);
+    return Date.now() - lastPulledAt >= intervalMs;
+  }
+
   return (async function () {
     const apiSourcesData = await common.fetchApiSourcesData(pool);
     const rssFeedsData = await common.fetchRssFeedsData(pool);
+    const weatherLocationsData = await common.fetchWeatherLocationsData(pool);
     const startupSources = [];
 
     (apiSourcesData.apiSources || []).forEach(function (apiSource) {
+      if (apiSource.enabled === 0 || apiSource.enabled === false) return;
+      if (!shouldRefreshAtStartup(apiSource)) {
+        return;
+      }
       startupSources.push(buildStartupSource('api-source', apiSource.id, apiSource.name, function () {
         return refreshApiSource(pool, common, apiSource, null, options.notifyPlayerScreens);
       }));
     });
 
     (rssFeedsData.rssFeeds || []).forEach(function (rssFeed) {
+      if (rssFeed.enabled === 0 || rssFeed.enabled === false) return;
+      if (!shouldRefreshAtStartup(rssFeed)) {
+        return;
+      }
       startupSources.push(buildStartupSource('rss-feed', rssFeed.id, rssFeed.name, function () {
         return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, null, options.notifyPlayerScreens);
       }));
     });
 
+    (weatherLocationsData.weatherLocations || []).forEach(function (location) {
+      if (location.enabled === 0 || location.enabled === false) return;
+      if (!shouldRefreshAtStartup(location)) {
+        return;
+      }
+      startupSources.push(buildStartupSource('weather-location', location.id, location.name, function () {
+        return refreshWeatherLocation(pool, common, location, null, options.notifyPlayerScreens);
+      }));
+    });
+
     // Stagger startup refreshes to avoid a burst against the DB/player.
     startupSources.forEach(function (source, index) {
       const startupDelayMs = index * staggerMs;
@@ -50,7 +80,7 @@ function scheduleStartupDataSourceRefreshes(options) {
       setTimeout(function () {
         backgroundTaskQueue.enqueueTask({
           key: TASK.key + ':' + source.type + ':' + source.id + ':' + Date.now(),
-          title: source.type === 'rss-feed' ? 'RSS feed refresh' : 'API source refresh',
+          title: source.type === 'rss-feed' ? 'RSS feed refresh' : source.type === 'weather-location' ? 'Weather location refresh' : 'API source refresh',
           category: TASK.category,
           taskType: 'data-source-refresh',
           metadata: {

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/data-source-refresh.js

@@ -153,6 +153,46 @@ async function refreshApiSource(pool, common, apiSourceOrId, actorId, notifyPlay
   }
 }
 
+async function refreshWeatherLocation(pool, common, weatherLocationOrId, actorId, notifyPlayerScreens) {
+  const connection = await pool.getConnection();
+  try {
+    const location = weatherLocationOrId && typeof weatherLocationOrId === 'object'
+      ? weatherLocationOrId
+      : await common.fetchWeatherLocationById(pool, Number(weatherLocationOrId));
+    if (!location) throw new Error('Weather location not found.');
+
+    let result = null;
+    let pullError = '';
+    try {
+      result = await common.fetchWeatherLocationForecast(pool, location);
+    } catch (error) {
+      pullError = String(error && error.message ? error.message : 'Unable to load weather forecast.');
+    }
+
+    await connection.beginTransaction();
+    await connection.query(
+      'UPDATE i_weather_locations SET last_pulled_at = ?, last_pull_error = ?, last_response_json = COALESCE(?, last_response_json), modified_by = ? WHERE id = ?',
+      [new Date(), pullError || null, result ? result.responseJson : null, actorId, location.id]
+    );
+    await connection.commit();
+
+    if (pullError) {
+      console.error('[data-source-refresh] Weather location refresh completed with an error for location ' + location.id + ': ' + pullError);
+    } else if (typeof notifyAffectedScreens === 'function') {
+      try {
+        await notifyAffectedScreens(connection, common, notifyPlayerScreens, 'weather_location_id', location.id);
+      } catch (notifyError) {
+        console.warn('[data-source-refresh] Unable to notify players after weather refresh ' + location.id + ':', notifyError);
+      }
+    }
+  } catch (error) {
+    try { await connection.rollback(); } catch (_rollbackError) { }
+    throw error;
+  } finally {
+    connection.release();
+  }
+}
+
 async function refreshRssFeed(pool, common, rssFeedId, feedUrl, itemLimit, actorId, notifyPlayerScreens) {
   const connection = await pool.getConnection();
   try {
@@ -170,6 +210,10 @@ async function refreshRssFeed(pool, common, rssFeedId, feedUrl, itemLimit, actor
     if (typeof common.replaceRssFeedItems === 'function') {
       await common.replaceRssFeedItems(connection, rssFeedId, updatedItems);
     }
+    await connection.query(
+      'UPDATE i_rss_feeds SET last_pulled_at = ? WHERE id = ?',
+      [new Date(), rssFeedId]
+    );
     await connection.commit();
 
     if (!pullError && rssFeedChanged) {
@@ -197,5 +241,6 @@ async function refreshRssFeed(pool, common, rssFeedId, feedUrl, itemLimit, actor
 
 module.exports = {
   refreshApiSource: refreshApiSource,
-  refreshRssFeed: refreshRssFeed
+  refreshRssFeed: refreshRssFeed,
+  refreshWeatherLocation: refreshWeatherLocation
 };

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

@@ -142,9 +142,13 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
 
   if (regionType === 'html') {
     const html = String(rawValue || '').trim();
-    return html
+    if (!html) {
-      ? '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" allowtransparency="true" srcdoc="' + escapeHtml('<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + html + '</body></html>') + '" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe></div>'
+      return '';
-      : '';
+    }
+    if (/^<!doctype\b/i.test(html) || /^<html\b/i.test(html)) {
+      return '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" allowtransparency="true" srcdoc="' + escapeHtml(html) + '" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe></div>';
+    }
+    return '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><div class="slide-preview-html-content" style="width:100%;height:100%;overflow:hidden;background:transparent;">' + html + '</div></div>';
   }
 
   if (regionType === 'rtmp') {
@@ -182,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

@@ -2,6 +2,8 @@
 
 const fs = require('fs');
 const path = require('path');
+const crypto = require('crypto');
+const vm = require('vm');
 const {
   escapeHtml,
   mediaKind,
@@ -10,7 +12,14 @@ const {
   sanitizeFontSize,
   sanitizeTextColor
 } = require('#src/player/render-helpers');
-const { createRequestAuthHeaders } = require('#src/request-auth');
+const { createRequestAuthHeaders, createPageAuthToken } = require('#src/request-auth');
+const { convertWeatherSnapshot } = require('#src/data/weather-units');
+
+const placeholderUtils = (() => {
+  const sandbox = { window: {} };
+  vm.runInNewContext(fs.readFileSync(path.join(__dirname, '..', '..', 'public', 'js', 'shared', 'placeholder-utils.js'), 'utf8'), sandbox);
+  return sandbox.window.placeholderUtils || {};
+})();
 
 const SYSTEM_CHROMIUM_PATHS = [
   process.env.PUPPETEER_EXECUTABLE_PATH,
@@ -124,11 +133,86 @@ function hasVisibleContent(html) {
   return Boolean(raw.replace(/<[^>]+>/g, '').trim());
 }
 
-function buildTextRegionMarkup(region, regionContent) {
+function resolvePlaceholderPath(value, expression) {
+  const pathValue = String(expression || '').replace(/\.image\s*\([^)]*\)\s*$/i, '').trim();
+  return pathValue.split('.').reduce(function (current, segment) {
+    return current === undefined || current === null ? '' : current[segment];
+  }, value);
+}
+
+function getImagePlaceholderConfig(expression) {
+  const match = String(expression || '').match(/\.image\s*\(\s*([0-9]+)?\s*,?\s*([0-9]+)?\s*\)/i);
+  return {
+    width: match && match[1] ? Number(match[1]) : 0,
+    height: match && match[2] ? Number(match[2]) : 0
+  };
+}
+
+function normalizeWeatherExpression(expression) {
+  const value = String(expression || '').trim();
+  const currentAliases = { temp: 'current.temperature_2m', feels_like: 'current.apparent_temperature', humidity: 'current.relative_humidity_2m', wind: 'current.wind_speed_10m', precip: 'current.precipitation', uv_index: 'current.uv_index', cloud_cover: 'current.cloud_cover', icon: 'current.weather_code.icon' };
+  const globalAliases = { temp_unit: 'temperature_unit', wind_unit: 'wind_speed_unit', precip_unit: 'precipitation_unit' };
+  if (globalAliases[value]) return globalAliases[value];
+  const currentField = value.replace(/^current\./, '').match(/^([^.()]+)((?:\(.*\))|(?:\..*))?$/);
+  if (currentField && currentAliases[currentField[1]]) return currentAliases[currentField[1]] + (currentField[2] || '');
+  const indexed = value.match(/^(daily|hourly)\.(\d+)\.(.+)$/);
+  if (!indexed) return value;
+  const fieldMatch = indexed[3].match(/^([^.()]+)((?:\(.*\))|(?:\..*))?$/);
+  const field = fieldMatch ? fieldMatch[1] : indexed[3];
+  const aliases = indexed[1] === 'daily' ? { time: 'time', temp_max: 'temperature_2m_max', temp_min: 'temperature_2m_min', precip: 'precipitation_sum', wind: 'wind_speed_10m_max', uv_index: 'uv_index_max', cloud_cover: 'cloud_cover_mean', sunrise: 'sunrise', sunset: 'sunset', icon: 'weather_code' } : { time: 'time', temp: 'temperature_2m', precip: 'precipitation', wind: 'wind_speed_10m', uv_index: 'uv_index', cloud_cover: 'cloud_cover', icon: 'weather_code' };
+  if (!Object.prototype.hasOwnProperty.call(aliases, field)) return value;
+  return field === 'icon' ? indexed[1] + '.' + aliases[field] + '.' + indexed[2] + '.icon' + (fieldMatch[2] || '') : indexed[1] + '.' + aliases[field] + '.' + indexed[2] + (fieldMatch[2] || '');
+}
+
+function weatherIconForCode(code) {
+  const value = Number(code);
+  if (value === 0) return 'bi-sun';
+  if (value <= 3) return 'bi-cloud-sun';
+  if (value <= 48) return 'bi-cloud-fog';
+  if (value <= 67 || value > 77 && value <= 82) return 'bi-cloud-rain';
+  if (value <= 77) return 'bi-cloud-snow';
+  return 'bi-cloud-lightning-rain';
+}
+
+function substitutePlaceholders(html, regionContent, options) {
+  const source = String(html || '');
+  const type = String(regionContent && regionContent.type || '').trim().toLowerCase();
+  const item = options && typeof options.getItem === 'function' ? options.getItem(type, regionContent) : null;
+  if (!item) return source;
+  return source.replace(/\{\{\s*([^{}]+?)\s*\}\}/gi, function (_match, expression) {
+    const weatherExpression = type === 'weather' ? normalizeWeatherExpression(expression) : expression;
+    const resolved = typeof placeholderUtils.resolvePlaceholderExpression === 'function'
+      ? placeholderUtils.resolvePlaceholderExpression(item, weatherExpression, { timeZone: item.timezone })
+      : resolvePlaceholderPath(item, expression);
+    if (type === 'weather' && /(?:^|\.)weather_code\.\d+\.icon(?:\(|$)|^current\.weather_code\.icon/.test(weatherExpression)) {
+      const codeExpression = weatherExpression.replace(/\.icon(?:\(.*\))?$/, '');
+      const iconSize = String(expression).match(/\.icon\(\s*(\d+)(?:\s*,\s*(\d+))?\s*\)$/);
+      const width = iconSize ? Number(iconSize[1]) : 0;
+      const height = iconSize && iconSize[2] ? Number(iconSize[2]) : width;
+      const sizeStyle = width ? ' style="display:inline-block;width:' + width + 'px;height:' + height + 'px;font-size:' + width + 'px;line-height:' + height + 'px;"' : '';
+      return '<i class="bi ' + weatherIconForCode(placeholderUtils.resolvePlaceholderExpression(item, codeExpression)) + '"' + sizeStyle + ' aria-hidden="true"></i>';
+    }
+    const value = typeof placeholderUtils.formatPlaceholderValue === 'function' ? placeholderUtils.formatPlaceholderValue(resolved) : String(resolved || '');
+    if (typeof placeholderUtils.isImagePlaceholderExpression !== 'function' || !placeholderUtils.isImagePlaceholderExpression(expression)) {
+      return escapeHtml(value);
+    }
+    const remoteUrl = String(value || '').trim();
+    if (!/^https?:\/\//i.test(remoteUrl)) return '';
+    const imageConfig = typeof placeholderUtils.getImagePlaceholderConfig === 'function' ? placeholderUtils.getImagePlaceholderConfig(expression) : getImagePlaceholderConfig(expression);
+    const cacheFile = options && typeof options.getCachedImagePath === 'function' ? options.getCachedImagePath(remoteUrl) : '';
+    const imageUrl = cacheFile || remoteUrl;
+    const style = imageConfig.width && imageConfig.height
+      ? 'display:block;width:' + imageConfig.width + 'px;height:' + imageConfig.height + 'px;object-fit:contain;'
+      : 'display:block;max-width:' + (imageConfig.width || 100) + 'px;max-height:' + (imageConfig.height || 100) + 'px;width:auto;height:auto;';
+    return '<img src="' + escapeHtml(resolveAssetUrl(options && options.baseUrl, imageUrl)) + '" alt="" style="' + style + '" />';
+  });
+}
+
+function buildTextRegionMarkup(region, regionContent, options) {
   const fontFamily = sanitizeFontFamily(regionContent.font_family || region.font_family);
   const fontSize = sanitizeFontSize(regionContent.font_size || region.font_size);
   const fontColor = sanitizeTextColor(regionContent.font_color || region.font_color);
-  const renderedBody = renderEditorJsContent(regionContent.value || '');
+  const renderedBody = renderEditorJsContent(substitutePlaceholders(regionContent.value || '', regionContent, options));
   if (!hasVisibleContent(renderedBody)) {
     return '';
   }
@@ -136,7 +220,7 @@ function buildTextRegionMarkup(region, regionContent) {
   return '<div class="slide-preview-region slide-preview-text-region" style="' + region.baseStyle + '"><div class="slide-preview-text-content" style="width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;overflow:hidden;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor || '#000000') + ';">' + renderedBody + '</div></div>';
 }
 
-function buildRegionInnerHtml(region, regionContent, baseUrl) {
+function buildRegionInnerHtml(region, regionContent, baseUrl, options) {
   const regionType = String(regionContent.type || region.region_type || 'text').trim().toLowerCase();
   const rawValue = normalizeRenderableValue(regionContent && regionContent.value !== undefined ? regionContent.value : '');
 
@@ -155,10 +239,7 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
   }
 
   if (regionType === 'webpage') {
-    const src = resolveAssetUrl(baseUrl, rawValue);
+    return '<div class="slide-preview-region slide-preview-webpage-region" style="' + region.baseStyle + '"><div class="slide-preview-webpage-placeholder" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.14);box-sizing:border-box;color:rgba(255,255,255,0.72);font-size:24px;font-family:Arial,sans-serif;">Webpage preview unavailable</div></div>';
-    return src
-      ? '<div class="slide-preview-region slide-preview-webpage-region" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'webpage') + '" loading="eager" referrerpolicy="no-referrer" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:#fff;overflow:hidden;"></iframe></div>'
-      : '';
   }
 
   if (regionType === 'qr-code') {
@@ -172,9 +253,13 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
 
   if (regionType === 'html') {
     const html = String(rawValue || '').trim();
-    return html
+    if (!html) {
-      ? '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" allowtransparency="true" srcdoc="' + escapeHtml('<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + html + '</body></html>') + '" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe></div>'
+      return '';
-      : '';
+    }
+    if (/^<!doctype\b/i.test(html) || /^<html\b/i.test(html)) {
+      return '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" allowtransparency="true" srcdoc="' + escapeHtml(html) + '" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe></div>';
+    }
+    return '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><div class="slide-preview-html-content" style="width:100%;height:100%;overflow:hidden;background:transparent;">' + html + '</div></div>';
   }
 
   if (regionType === 'rtmp') {
@@ -182,7 +267,7 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
     return '<div class="slide-preview-region slide-preview-rtmp-region" style="' + region.baseStyle + '"><div class="slide-preview-rtmp-placeholder">' + escapeHtml(label) + '</div></div>';
   }
 
-  return buildTextRegionMarkup(region, regionContent);
+  return buildTextRegionMarkup(region, regionContent, Object.assign({}, options, { baseUrl: baseUrl }));
 }
 
 async function loadChromium() {
@@ -199,7 +284,7 @@ function loadSharp() {
   return require('sharp');
 }
 
-function buildThumbnailPreviewMarkup(slide, baseUrl) {
+function buildThumbnailPreviewMarkup(slide, baseUrl, options) {
   const template = slide && slide.template ? slide.template : null;
   if (!template) {
     return '';
@@ -214,7 +299,7 @@ function buildThumbnailPreviewMarkup(slide, baseUrl) {
       pixelWidth: Math.max(1, Math.round(Number(region && region.width || 0) || 1)),
       pixelHeight: Math.max(1, Math.round(Number(region && region.height || 0) || 1))
     });
-    return buildRegionInnerHtml(previewRegion, regionContent, normalizedBaseUrl);
+    return buildRegionInnerHtml(previewRegion, regionContent, normalizedBaseUrl, options);
   }).join('');
 }
 
@@ -226,9 +311,10 @@ 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)
+    html: buildThumbnailPreviewMarkup(slide, options && options.baseUrl, options)
   };
 }
 
@@ -253,8 +339,7 @@ async function launchBrowser() {
       args: [
         '--no-sandbox',
         '--disable-setuid-sandbox',
-        '--disable-dev-shm-usage',
+        '--disable-dev-shm-usage'
-        '--disable-gpu'
       ],
       defaultViewport: { width: 1920, height: 1080, deviceScaleFactor: 1 },
       executablePath: executablePath,
@@ -291,6 +376,74 @@ async function captureSlideThumbnail(options) {
     throw new Error('Slide not found.');
   }
 
+  const rssFeedsData = typeof common.fetchRssFeedsData === 'function' ? await common.fetchRssFeedsData(pool) : { rssFeeds: [] };
+  const rssFeeds = await Promise.all((rssFeedsData.rssFeeds || []).map(async function (feed) {
+    const items = typeof common.fetchRssFeedItemsByFeedId === 'function' ? await common.fetchRssFeedItemsByFeedId(pool, feed.id) : [];
+    return Object.assign({}, feed, { items: items });
+  }));
+  const apiSourcesData = typeof common.fetchApiSourcesData === 'function' ? await common.fetchApiSourcesData(pool) : { apiSources: [] };
+  const apiSources = (apiSourcesData.apiSources || []).map(function (source) {
+    return Object.assign({}, source, { responseJson: common.parseJsonSafe ? common.parseJsonSafe(source.last_response_json) : null });
+  });
+  const weatherLocationsData = typeof common.fetchWeatherLocationsData === 'function' ? await common.fetchWeatherLocationsData(pool) : { weatherLocations: [] };
+  const weatherLocations = (weatherLocationsData.weatherLocations || []).map(function (location) {
+    let snapshot = null;
+    try {
+      snapshot = JSON.parse(location.last_response_json || '');
+    } catch (_error) {
+      snapshot = null;
+    }
+    if (!snapshot || typeof snapshot !== 'object') return null;
+    const temperatureUnit = location.temperature_unit === 'fahrenheit' ? '°F' : '°C';
+    const windUnit = location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'm/s' : 'km/h';
+    const precipitationUnit = location.precipitation_unit === 'inch' ? 'in' : 'mm';
+    const data = Object.assign({}, convertWeatherSnapshot(snapshot, { temperature: location.temperature_unit === 'fahrenheit' ? 'fahrenheit' : 'celsius', wind: location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'ms' : 'kmh', precipitation: location.precipitation_unit === 'inch' ? 'inch' : 'mm' }), { location_label: location.location_label || '', name: location.name || '', timezone: location.timezone || '', temp_unit: temperatureUnit, wind_unit: windUnit, precip_unit: precipitationUnit });
+    data.current = Object.assign({}, data.current || {}, { temperature_unit: temperatureUnit, wind_speed_unit: windUnit, precipitation_unit: precipitationUnit });
+    data.daily = Object.assign({}, data.daily || {}, { temperature_unit: temperatureUnit });
+    return { id: location.id, data: data };
+  }).filter(Boolean);
+
+  function getApiItems(source) {
+    const response = source && source.responseJson;
+    const itemsPath = String(source && source.items_path || '').trim();
+    if (itemsPath) {
+      const selected = itemsPath.split('.').reduce(function (current, segment) {
+        return current === undefined || current === null ? '' : current[segment];
+      }, response);
+      return Array.isArray(selected) ? selected : [];
+    }
+    if (Array.isArray(response)) return response;
+    if (response && Array.isArray(response.items)) return response.items;
+    if (response && Array.isArray(response.results)) return response.results;
+    if (response && Array.isArray(response.data)) return response.data;
+    return response ? [response] : [];
+  }
+
+  function getThumbnailItem(type, regionContent) {
+    const index = Math.max(0, Math.max(1, Number(regionContent && regionContent.item_number || 1)) - 1);
+    if (type === 'api') {
+      const source = apiSources.find(function (entry) { return Number(entry.id) === Number(regionContent.source_id); });
+      return getApiItems(source)[index] || null;
+    }
+    if (type === 'rss') {
+      const feed = rssFeeds.find(function (entry) { return Number(entry.id) === Number(regionContent.feed_id); });
+      return feed && Array.isArray(feed.items) ? feed.items[index] || null : null;
+    }
+    if (type === 'weather') {
+      const location = weatherLocations.find(function (entry) { return Number(entry.id) === Number(regionContent.weather_location_id); });
+      return location ? location.data : null;
+    }
+    return null;
+  }
+
+  function getCachedImagePath(remoteUrl) {
+    const hash = crypto.createHash('sha256').update(String(remoteUrl || '')).digest('hex');
+    const cacheDir = path.join(mediaDir, 'player-cache', 'remote-images');
+    const candidates = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg'];
+    const candidate = candidates.map(function (extension) { return path.join(cacheDir, hash + extension); }).find(function (filePath) { return fs.existsSync(filePath); });
+    return candidate ? '/media/player-cache/remote-images/' + path.basename(candidate) : '';
+  }
+
   const thumbnailDir = path.join(mediaDir, 'thumbnails');
   const thumbnailRelativePath = String(slide.thumbnail_path || '').trim() || '/media/thumbnails/slides/slide-' + slide.id + '.png';
   const filePath = path.join(mediaDir, thumbnailRelativePath.replace(/^\/+media\//, ''));
@@ -306,14 +459,9 @@ async function captureSlideThumbnail(options) {
     }, { timeout: 30000 });
 
     await page.waitForFunction(function () {
-      var canvas = document.querySelector('#popup-preview-canvas');
+      var videos = Array.prototype.slice.call(document.querySelectorAll('#popup-preview-canvas video'));
-      if (!canvas) {
+      return videos.every(function (video) {
-        return false;
+        return video.readyState >= 2;
-      }
-
-      var images = Array.prototype.slice.call(canvas.querySelectorAll('img'));
-      return images.every(function (image) {
-        return image.complete && typeof image.naturalWidth === 'number';
       });
     }, { timeout: 30000 });
 
@@ -322,17 +470,13 @@ async function captureSlideThumbnail(options) {
         try {
           await document.fonts.ready;
         } catch (_error) {
-          // Ignore font readiness failures and fall back to the rendered frame.
+          return null;
         }
       }
     });
 
-    await page.evaluate(function () {
+    await new Promise(function (resolve) {
-      return new Promise(function (resolve) {
+      setTimeout(resolve, 1000);
-        window.requestAnimationFrame(function () {
-          window.requestAnimationFrame(resolve);
-        });
-      });
     });
   }
 
@@ -340,28 +484,49 @@ async function captureSlideThumbnail(options) {
   try {
     const page = await browser.newPage();
     try {
-      const previewPath = '/api/internal/slide-thumbnails/' + slide.id + '/popup-preview';
+      const previewPath = '/api/internal/slide-thumbnails/' + encodeURIComponent(String(slide.id)) + '/popup-preview';
       const previewUrl = baseUrl + previewPath;
-      const previewPayload = buildThumbnailPreviewPayload(slide, {
+      const canvasSize = getThumbnailCanvasSize(slide);
-        baseUrl: baseUrl,
-        fontStylesheetHref: options && options.fontStylesheetHref ? options.fontStylesheetHref : ''
-      });
       await page.setViewport({
-          width: Math.max(1, Number(previewPayload.canvasWidth || PLAYER_VIEWPORT.width)),
+        width: Math.max(1, Number(canvasSize.width || PLAYER_VIEWPORT.width)),
-          height: Math.max(1, Number(previewPayload.canvasHeight || PLAYER_VIEWPORT.height)),
+        height: Math.max(1, Number(canvasSize.height || PLAYER_VIEWPORT.height)),
         deviceScaleFactor: 1
       });
-      await page.setExtraHTTPHeaders(createRequestAuthHeaders({
+      await page.setExtraHTTPHeaders(Object.assign({}, createRequestAuthHeaders({
         method: 'GET',
         pathname: previewPath
+      }), {
+        'x-pulse-page-auth': createPageAuthToken({ scope: 'thumbnail-preview', slideId: slide.id })
       }));
-      await page.goto(previewUrl, { waitUntil: 'domcontentloaded', timeout: 30000 });
+      const previewResponse = await page.goto(previewUrl, { waitUntil: 'domcontentloaded', timeout: 30000 });
+      if (!previewResponse || previewResponse.status() >= 400) {
+        throw new Error('Popup preview returned HTTP ' + (previewResponse ? previewResponse.status() : 'no response') + '.');
+      }
       await waitForThumbnailRender(page);
       const canvas = await page.$('#popup-preview-canvas');
       if (!canvas) {
         throw new Error('Popup preview did not produce a slide canvas.');
       }
-      await canvas.screenshot({ path: fullSizePath });
+      await page.evaluate(function () {
+        var canvasElement = document.querySelector('#popup-preview-canvas');
+        if (canvasElement) {
+          canvasElement.style.transform = 'none';
+          canvasElement.style.transformOrigin = 'top left';
+        }
+      });
+      const canvasBounds = await canvas.boundingBox();
+      if (!canvasBounds) {
+        throw new Error('Popup preview canvas has no screenshot bounds.');
+      }
+      await page.screenshot({
+        path: fullSizePath,
+        clip: {
+          x: Math.max(0, canvasBounds.x),
+          y: Math.max(0, canvasBounds.y),
+          width: Math.max(1, canvasBounds.width),
+          height: Math.max(1, canvasBounds.height)
+        }
+      });
     } finally {
       await page.close().catch(function () {
         return null;

src/web/lib/media/upload-sync.js

@@ -432,6 +432,10 @@ function createUploadSyncService(options) {
         const nextRelativePath = relativeDir ? path.posix.join(relativeDir, entryName) : entryName;
         const nextAbsolutePath = path.join(currentDir, entryName);
 
+        if (!relativeDir && entryName === 'player-cache') {
+          continue;
+        }
+
         if (entry.isDirectory && entry.isDirectory()) {
           await walkDirectory(nextAbsolutePath, nextRelativePath);
           continue;

src/web/lib/player-actions.js

@@ -216,17 +216,22 @@ function createPlayerActionService(options) {
   }
 
   async function forwardAnnouncementRefresh(slug) {
+    const resolvedPlayerInternalBaseUrl = await getPlayerInternalBaseUrl();
+    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 results = await Promise.allSettled(targetBaseUrls.map(async function (targetBaseUrl) {
       const authHeaders = createRequestAuthHeaders({
         method: 'POST',
         pathname: `/api/screens/${encodeURIComponent(slug)}/announcements/refresh`,
         body: { command: 'announcement-refresh' }
       });
-    const resolvedPlayerInternalBaseUrl = await getPlayerInternalBaseUrl();
+      const response = await fetch(`${targetBaseUrl}/api/screens/${encodeURIComponent(slug)}/announcements/refresh`, {
-    if (!resolvedPlayerInternalBaseUrl) {
-      throw new Error('Unable to resolve the player internal base URL.');
-    }
-
-    const response = await fetch(`${resolvedPlayerInternalBaseUrl}/api/screens/${encodeURIComponent(slug)}/announcements/refresh`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -246,6 +251,17 @@ function createPlayerActionService(options) {
       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 successfulResults.map(function (result) {
+      return result.value;
+    });
   }
 
   async function getScreenConnections(slug) {

src/web/lib/region-scripts.js

@@ -4,7 +4,7 @@ const path = require('path');
 const PUBLIC_JS_ROOT = path.join(__dirname, '..', 'public', 'js');
 const REGION_ROOT_DIR = path.join(PUBLIC_JS_ROOT, 'regions');
 const REGION_TYPE_DIR = path.join(REGION_ROOT_DIR, 'type');
-const REGION_CORE_SCRIPTS = ['js/shared/placeholder-utils.js', 'js/shared/placeholder-chips.js', 'js/shared/time-date-placeholders.js', 'js/regions/region-utils.js', 'js/regions/region-types.js'];
+const REGION_CORE_SCRIPTS = ['js/shared/placeholder-utils.js', 'js/shared/placeholder-chips.js', 'js/shared/placeholder-info.js', 'js/shared/time-date-placeholders.js', 'js/regions/region-utils.js', 'js/regions/region-types.js'];
 
 function withAssetVersion(scriptPath, assetVersion) {
   if (!assetVersion) {

src/web/middleware.js

@@ -29,7 +29,7 @@ module.exports = function registerMiddleware(app, deps) {
   });
 
   app.use(function (req, res, next) {
-    if (req.path === '/' || req.path === '/login' || req.path === '/logout' || req.path.indexOf('/api/internal/slide-thumbnails/') === 0 || req.path === '/api/internal/sync/player-media' || req.path === '/api/internal/sync/player-font') {
+    if (req.path === '/' || req.path === '/login' || req.path === '/logout' || req.path === '/slides/popup-preview' || req.path.indexOf('/api/internal/slide-thumbnails/') === 0 || req.path === '/api/internal/sync/player-media' || req.path === '/api/internal/sync/player-font') {
       return next();
     }
 

src/web/pages/index.js

@@ -29,6 +29,9 @@ module.exports = {
   renderRssFeedsPage: require(routePath('data-sources', 'rss-feeds', 'list')),
   renderRssFeedAddPage: require(routePath('data-sources', 'rss-feeds', 'add')),
   renderRssFeedEditPage: require(routePath('data-sources', 'rss-feeds', 'edit')),
+  renderWeatherLocationsPage: require(routePath('data-sources', 'weather', 'list')),
+  renderWeatherLocationAddPage: require(routePath('data-sources', 'weather', 'add')),
+  renderWeatherLocationEditPage: require(routePath('data-sources', 'weather', 'edit')),
   renderScreensPage: require(routePath('signage', 'screens', 'list')),
   renderScreenFormPage: require(routePath('signage', 'screens', 'add')),
   renderScreenEditPage: require(routePath('signage', 'screens', 'edit')),

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

@@ -255,6 +255,39 @@
 .template-preview-card .btn-group {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
+.audit-change-list {
+  display: grid;
+  padding: 0.08rem 0.3rem;
+  border-radius: 0.2rem;
+  gap: 0.2rem;
+  min-width: 18rem;
+}
+.audit-change-row {
+  display: grid;
+  grid-template-columns: minmax(8rem, 0.7fr) minmax(5rem, 1fr) auto minmax(5rem, 1fr);
+  background: var(--bs-danger-bg-subtle);
+  gap: 0.35rem;
+  align-items: baseline;
+  font-size: 0.78rem;
+}
+  background: var(--bs-success-bg-subtle);
+.audit-change-to {
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+.audit-change-from {
+  color: var(--bs-danger-text-emphasis);
+}
+.audit-change-to {
+  color: var(--bs-success-text-emphasis);
+}
+.audit-change-from del,
+.audit-change-to ins {
+  text-decoration-thickness: 2px;
+}
+.audit-change-arrow {
+  color: var(--bs-secondary-color);
+}
   gap: 0.5rem;
 }
 
@@ -860,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);
@@ -1081,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;
@@ -1128,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;
@@ -1173,6 +1329,11 @@
     border-left: 0;
   }
 
+  .screen-command-pairing {
+    padding: 0;
+    border-left: 0;
+  }
+
   .screen-command-actions {
     justify-content: stretch;
   }
@@ -2350,6 +2511,11 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   margin-bottom: 0;
 }
 
+.template-field-card .form-label,
+.region-item .form-label {
+  margin-bottom: 0.35rem;
+}
+
 .template-field-card .form-control,
 .template-field-card .form-select,
 .template-field-card textarea,
@@ -2391,7 +2557,7 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 
 .announcement-color-picker__grid {
   display: grid;
-  grid-template-columns: repeat(8, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
   gap: 0.375rem;
 }
 
@@ -2500,6 +2666,13 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   text-transform: uppercase;
 }
 
+.api-region-placeholder-title-help {
+  font-size: 0.9rem;
+  font-weight: 800;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
 .api-region-sample-accordion {
   padding: 0.85rem 1rem 1rem;
   margin-bottom: 0.75rem;
@@ -3235,3 +3408,93 @@ table.table thead th.sort-desc .table-sort-indicator {
     position: static;
   }
 }
+
+.weather-preview-card {
+  display: flex;
+  flex-direction: column;
+}
+
+.weather-preview-card-body {
+  flex: 1 1 auto;
+}
+
+.weather-preview-card-footer {
+  min-height: 3.5rem;
+}
+
+.weather-preview-icon {
+  font-size: 4rem;
+  color: #e0a11a;
+}
+
+.weather-preview-forecast-icon {
+  display: block;
+  font-size: 2rem;
+  color: #e0a11a;
+  margin: 1rem 0 0.65rem;
+}
+
+.weather-daily-forecast {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.weather-daily-forecast > * {
+  min-width: 0;
+}
+
+@media (min-width: 768px) {
+  .weather-daily-forecast {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 992px) {
+  .weather-daily-forecast {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+}
+
+.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]');
@@ -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;
@@ -799,6 +826,28 @@
         return;
       }
 
+      var refreshButton = target.closest('[data-manual-refresh-url]');
+      if (refreshButton) {
+        event.preventDefault();
+        if (refreshButton.disabled) {
+          return;
+        }
+        refreshButton.disabled = true;
+        fetch(refreshButton.getAttribute('data-manual-refresh-url'), {
+          method: 'POST',
+          credentials: 'same-origin',
+          headers: { 'X-Requested-With': 'XMLHttpRequest' }
+        }).then(function (response) {
+          if (!response.ok) {
+            throw new Error('Refresh failed');
+          }
+          window.location.assign(response.url);
+        }).catch(function () {
+          refreshButton.disabled = false;
+        });
+        return;
+      }
+
       var button = target.closest('button[name="save_action"], button[name="action"]');
       if (!button) {
         return;
@@ -886,7 +935,7 @@
     var summaryLabel = isRoot ? (isArray ? 'Array' : 'Object') : String(key);
     var summaryMeta = isArray ? '[' + value.length + ']' : '{' + Object.keys(value).length + '}';
     return '' +
-      '<details class="json-tree-node" open>' +
+      '<details class="json-tree-node"' + (isRoot ? ' open' : '') + '>' +
         '<summary><span class="json-tree-key">' + escapeHtml(summaryLabel) + '</span><span class="mx-1">:</span><span class="text-body-secondary">' + escapeHtml(summaryMeta) + '</span></summary>' +
         '<div class="ms-3 ps-3 border-start">' + entries + '</div>' +
       '</details>';
@@ -945,26 +994,30 @@
           detail.open = expanded;
         });
 
-        if (collapseButton) {
+        syncButtons();
-          collapseButton.disabled = !details.length || !expanded;
-        }
-        if (expandButton) {
-          expandButton.disabled = !details.length || expanded;
-        }
       }
 
       function syncButtons() {
+        var details = output.querySelectorAll('details');
+        var allExpanded = details.length > 0 && Array.prototype.every.call(details, function (detail) { return detail.open; });
+        var allCollapsed = details.length > 0 && Array.prototype.every.call(details, function (detail) { return !detail.open; });
         if (collapseButton) {
-          collapseButton.setAttribute('aria-pressed', 'false');
+          collapseButton.disabled = !details.length || allCollapsed;
+          collapseButton.setAttribute('aria-pressed', String(allCollapsed));
         }
         if (expandButton) {
-          expandButton.setAttribute('aria-pressed', 'true');
+          expandButton.disabled = !details.length || allExpanded;
+          expandButton.setAttribute('aria-pressed', String(allExpanded));
         }
       }
 
       output.innerHTML = formattedTree;
+      setAllSectionsExpanded(false);
+      var rootDetails = output.querySelector('details');
+      if (rootDetails) {
+        rootDetails.open = true;
+      }
       syncButtons();
-      setAllSectionsExpanded(true);
 
       if (collapseButton) {
         collapseButton.addEventListener('click', function () {

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/data-sources/api-source-form.js

@@ -11,6 +11,9 @@
   var panels = Array.prototype.slice.call(form.querySelectorAll('[data-api-source-auth-panel]'));
   var bearerTokenInput = form.querySelector('[data-api-source-bearer-token-input]');
   var bearerTokenToggle = form.querySelector('[data-api-source-bearer-token-toggle]');
+  var requestMethodSelect = form.querySelector('[data-api-source-request-method]');
+  var requestSection = form.querySelector('[data-api-source-request-section]');
+  var requestBodyInput = form.querySelector('[data-api-source-request-body]');
 
   function updateBearerTokenToggle() {
     if (!bearerTokenInput || !bearerTokenToggle) {
@@ -47,14 +50,28 @@
     });
   }
 
+  function updateRequestBodyVisibility() {
+    if (!requestMethodSelect || !requestSection || !requestBodyInput) {
+      return;
+    }
+
+    var isPost = String(requestMethodSelect.value || 'GET').toUpperCase() === 'POST';
+    requestSection.hidden = !isPost;
+  }
+
   if (methodSelect) {
     methodSelect.addEventListener('change', updatePanels);
   }
 
+  if (requestMethodSelect) {
+    requestMethodSelect.addEventListener('change', updateRequestBodyVisibility);
+  }
+
   if (bearerTokenToggle && bearerTokenInput) {
     bearerTokenToggle.addEventListener('click', toggleBearerTokenVisibility);
     updateBearerTokenToggle();
   }
 
   updatePanels();
+  updateRequestBodyVisibility();
 }());

src/web/public/js/data-sources/weather-location-form.js

@@ -0,0 +1,126 @@
+(function () {
+  'use strict';
+
+  var label = document.getElementById('weather-label');
+  var results = document.getElementById('weather-location-results');
+  var latitude = document.getElementById('weather-latitude');
+  var longitude = document.getElementById('weather-longitude');
+  var latitudeValue = document.getElementById('weather-latitude-value');
+  var longitudeValue = document.getElementById('weather-longitude-value');
+  var timezone = document.getElementById('weather-timezone');
+  var manualCoordinates = document.getElementById('weather-manual-coordinates');
+  var timer;
+  var requestId = 0;
+
+  if (!label || !results || !latitude || !longitude || !timezone) {
+    return;
+  }
+
+  function clearResults() {
+    results.replaceChildren();
+    results.classList.add('d-none');
+  }
+
+  function selectResult(result) {
+    label.value = result.label;
+    latitude.value = result.latitude;
+    longitude.value = result.longitude;
+    timezone.value = result.timezone;
+    latitudeValue.value = result.latitude;
+    longitudeValue.value = result.longitude;
+    latitude.disabled = true;
+    longitude.disabled = true;
+    latitude.removeAttribute('name');
+    longitude.removeAttribute('name');
+    latitudeValue.name = 'latitude';
+    longitudeValue.name = 'longitude';
+    manualCoordinates.classList.remove('d-none');
+    clearResults();
+  }
+
+  function enableManualCoordinates() {
+    latitude.disabled = false;
+    longitude.disabled = false;
+    latitude.name = 'latitude';
+    longitude.name = 'longitude';
+    latitudeValue.removeAttribute('name');
+    longitudeValue.removeAttribute('name');
+    manualCoordinates.classList.add('d-none');
+  }
+
+  function renderResults(items) {
+    results.replaceChildren();
+    if (!items.length) {
+      clearResults();
+      return;
+    }
+    items.forEach(function (item) {
+      var button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'list-group-item list-group-item-action';
+      button.textContent = item.label;
+      button.addEventListener('click', function () { selectResult(item); });
+      results.appendChild(button);
+    });
+    results.classList.remove('d-none');
+  }
+
+  label.addEventListener('input', function () {
+    enableManualCoordinates();
+    window.clearTimeout(timer);
+    var query = label.value.trim();
+    if (query.length < 2) {
+      clearResults();
+      return;
+    }
+    timer = window.setTimeout(function () {
+      var currentRequestId = ++requestId;
+      fetch('/data-sources/weather/geocode?q=' + encodeURIComponent(query), { credentials: 'same-origin' })
+        .then(function (response) { if (!response.ok) throw new Error('Lookup failed'); return response.json(); })
+        .then(function (data) { if (currentRequestId === requestId) renderResults(data.results || []); })
+        .catch(function () { if (currentRequestId === requestId) clearResults(); });
+    }, 300);
+  });
+
+  manualCoordinates.addEventListener('click', enableManualCoordinates);
+
+  if (latitude.value && longitude.value) {
+    selectResult({ label: label.value, latitude: latitude.value, longitude: longitude.value, timezone: timezone.value });
+  }
+
+  var refreshButton = document.querySelector('[data-weather-refresh-url]');
+  if (refreshButton) {
+    refreshButton.addEventListener('click', function () {
+      refreshButton.disabled = true;
+      fetch(refreshButton.getAttribute('data-weather-refresh-url'), { method: 'POST', credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
+        .then(function (response) {
+          if (!response.ok) throw new Error('Refresh failed');
+          window.location.assign(response.url);
+        })
+        .catch(function () { refreshButton.disabled = false; });
+    });
+  }
+
+  var forecastButtons = document.querySelectorAll('[data-weather-forecast-mode]');
+  var dailyForecast = document.getElementById('weather-daily-forecast');
+  var hourlyForecast = document.getElementById('weather-hourly-forecast');
+  forecastButtons.forEach(function (button) {
+    button.addEventListener('click', function () {
+      var hourly = button.getAttribute('data-weather-forecast-mode') === 'hourly';
+      dailyForecast.classList.toggle('d-none', hourly);
+      hourlyForecast.classList.toggle('d-none', !hourly);
+      forecastButtons.forEach(function (item) {
+        var selected = item === button;
+        item.classList.toggle('btn-primary', selected);
+        item.classList.toggle('btn-outline-secondary', !selected);
+        item.setAttribute('aria-pressed', selected ? 'true' : 'false');
+      });
+    });
+  });
+
+  document.addEventListener('click', function (event) {
+    if (!results.contains(event.target) && event.target !== label) {
+      clearResults();
+    }
+  });
+}());

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/regions/region-utils.js

@@ -88,6 +88,7 @@
       h4: ['class', 'style'],
       h5: ['class', 'style'],
       h6: ['class', 'style'],
+      i: ['class', 'style', 'aria-hidden'],
       img: ['src', 'alt', 'title', 'width', 'height', 'class', 'style', 'loading', 'decoding'],
       col: ['class', 'style', 'span', 'width'],
       colgroup: ['class', 'style', 'span'],
@@ -159,6 +160,7 @@
       h4: ['class', 'style'],
       h5: ['class', 'style'],
       h6: ['class', 'style'],
+      i: ['class', 'style', 'aria-hidden'],
       li: ['class', 'style'],
       ol: ['class', 'style', 'start'],
       p: ['class', 'style'],

src/web/public/js/regions/type/api.js

@@ -94,7 +94,7 @@
     };
   }
 
-  function substituteVariables(html, item) {
+  function substituteVariables(html, item, options) {
     var source = String(html || '');
     return source.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, function (_match, expression) {
       if (!item || typeof item !== 'object') {
@@ -105,7 +105,23 @@
         return '';
       }
 
-      return escapeHtml(placeholderUtils.formatPlaceholderValue(placeholderUtils.resolvePlaceholderExpression(item, expression)));
+      var resolved = placeholderUtils.resolvePlaceholderExpression(item, expression);
+      if (typeof placeholderUtils.isImagePlaceholderExpression === 'function' && placeholderUtils.isImagePlaceholderExpression(expression)) {
+        var imageSource = placeholderUtils.formatPlaceholderValue(resolved);
+        if (!/^(?:https?:\/\/|\/media\/|\/assets\/|\/[^/])/i.test(imageSource)) {
+          return '';
+        }
+        var imageConfig = typeof placeholderUtils.getImagePlaceholderConfig === 'function' ? placeholderUtils.getImagePlaceholderConfig(expression) : {};
+        var imageStyle = options && options.preview && imageConfig.width && imageConfig.height
+          ? 'display:block;width:100%;height:100%;object-fit:contain;'
+          : 'display:block;width:auto;height:auto;' + (imageConfig.width ? 'max-width:' + imageConfig.width + 'px;' : '') + (imageConfig.height ? 'max-height:' + imageConfig.height + 'px;' : '');
+        var image = '<img src="' + escapeHtml(imageSource) + '" alt="" style="' + imageStyle + '" />';
+        if (options && options.preview && imageConfig.width && imageConfig.height) {
+          return '<span style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:' + imageConfig.width + 'px;height:' + imageConfig.height + 'px;border:1px dashed rgba(120,120,120,.75);">' + image + '</span>';
+        }
+        return image;
+      }
+      return escapeHtml(placeholderUtils.formatPlaceholderValue(resolved));
     });
   }
 
@@ -136,6 +152,24 @@
     return summary.join('');
   }
 
+  function renderTransformInfo(regionId) {
+    var offcanvasId = 'api-placeholder-info-' + regionId;
+    return '' +
+      '<button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" data-bs-toggle="offcanvas" data-bs-target="#' + offcanvasId + '" aria-controls="' + offcanvasId + '">More info</button>' +
+      '<div class="offcanvas offcanvas-end fw-normal" tabindex="-1" id="' + offcanvasId + '" aria-labelledby="' + offcanvasId + '-label">' +
+        '<div class="offcanvas-header">' +
+          '<h2 class="offcanvas-title fs-5" id="' + offcanvasId + '-label">API placeholder transforms</h2>' +
+          '<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>' +
+        '</div>' +
+        '<div class="offcanvas-body">' +
+          '<p class="small text-body-secondary">Placeholders read values from the selected API item. Nested fields use dots.</p>' +
+          (window.placeholderInfo ? window.placeholderInfo.renderTextTransforms() : '') +
+          (window.placeholderInfo ? window.placeholderInfo.renderDateFormatTokens() : '') +
+          (window.placeholderInfo ? window.placeholderInfo.renderImageTransform() : '') +
+        '</div>' +
+      '</div>';
+  }
+
   function normalizeRenderableValue(value) {
     if (value && typeof value === 'object') {
       if (value.value !== undefined) {
@@ -170,11 +204,8 @@
     var fontSize = sanitizeFontSize(regionContent.font_size || region.fontSize);
     var fontColor = sanitizeTextColor(regionContent.font_color || region.fontColor);
     var item = getItem(sourceId, itemNumber, sources, itemsPath);
-    var body = item ? substituteVariables(content, item) : '';
+    var hasSource = String(sourceId === undefined || sourceId === null ? '' : sourceId).trim() !== '';
-
+    var body = hasSource ? (item ? substituteVariables(content, item, { preview: true }) : '') : content;
-    if (!body && item) {
-      body = getPreviewFallback(item);
-    }
 
     body = String(body || '')
       .replace(/<pre[^>]*class="[^"]*api-region-sample-preview[^"]*"[^>]*>[\s\S]*?<\/pre>/gi, '')
@@ -239,7 +270,7 @@
           '<input type="hidden" name="region_font_size_' + region.id + '" value="' + escapeHtml(context.fontSize || '') + '" />' +
           '<input type="hidden" name="region_text_' + region.id + '" value="' + escapeHtml(current.value !== undefined ? current.value : '') + '" />' +
           '<div class="api-region-placeholder-section">' +
-            '<div class="api-region-placeholder-title">Available placeholders</div>' +
+            '<div class="api-region-placeholder-title api-region-placeholder-title-help d-flex align-items-center gap-2">Available placeholders ' + renderTransformInfo(region.id) + '</div>' +
             '<div class="d-flex flex-wrap gap-2" data-placeholder-chips>' + ((placeholderFields.length && window.placeholderChips && typeof window.placeholderChips.renderChips === 'function') ? window.placeholderChips.renderChips(placeholderFields) : placeholderChips || '<span class="muted slide-image-file">No JSON fields available.</span>') + '</div>' +
           '</div>' +
           '<details class="api-region-sample-accordion" data-api-sample-data-accordion>' +
@@ -290,7 +321,7 @@
           return fallbackValue;
         }
       }())),
-      source_id: (card.querySelector('select[name="region_api_source_id_' + region.id + '"]') || {}).value || current.source_id,
+      source_id: card.querySelector('select[name="region_api_source_id_' + region.id + '"]') ? card.querySelector('select[name="region_api_source_id_' + region.id + '"]').value : current.source_id,
       item_number: (card.querySelector('input[name="region_api_item_number_' + region.id + '"]') || {}).value || current.item_number,
       items_path: card.querySelector('input[name="region_api_items_path_' + region.id + '"]') ? (card.querySelector('input[name="region_api_items_path_' + region.id + '"]') || {}).value : current.items_path
     } : current;

src/web/public/js/regions/type/qr-code.js

@@ -1029,7 +1029,7 @@
         '</div>' +
         '<div class="card-body p-3 d-grid gap-2">' +
           '<label class="form-label mb-1" for="region_qr_code_' + region.id + '">URL</label>' +
-          '<input id="region_qr_code_' + region.id + '" type="url" name="region_qr_code_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="https://example.com" />' +
+          '<input id="region_qr_code_' + region.id + '" type="url" name="region_qr_code_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="https://example.com" required />' +
           '<textarea name="region_qr_svg_' + region.id + '" class="visually-hidden" hidden>' + escapeHtml(currentSvg) + '</textarea>' +
           '<input type="hidden" name="region_qr_preview_' + region.id + '" value="' + escapeHtml(String(context.qr_preview || '')) + '" />' +
           '<div class="card card-outline card-secondary overflow-hidden mt-2">' +

src/web/public/js/regions/type/rss.js

@@ -3,6 +3,7 @@
 (function () {
   var registry = window.pulseRegionTypes;
   var utils = window.pulseRegionUtils || {};
+  var placeholderUtils = window.placeholderUtils || {};
   var DEFAULT_STYLE = {
     font_family: 'Arial',
     font_size: 32,
@@ -114,14 +115,32 @@
     return current === undefined || current === null ? '' : current;
   }
 
-  function substituteVariables(html, item) {
+  function substituteVariables(html, item, options) {
     var source = String(html || '');
-    return source.replace(/\{\{\s*([a-zA-Z0-9_]+)(?:\.([a-zA-Z0-9_.]+))?\s*\}\}/g, function (_match, tokenName, tokenPath) {
+    return source.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, function (_match, expression) {
       if (!item || typeof item !== 'object') {
         return '';
       }
-      var key = tokenPath ? tokenName + '.' + tokenPath : tokenName;
+      if (typeof placeholderUtils.resolvePlaceholderExpression !== 'function' || typeof placeholderUtils.formatPlaceholderValue !== 'function') {
-      return escapeHtml(resolvePath(item, key || ''));
+        return '';
+      }
+      var resolved = placeholderUtils.resolvePlaceholderExpression(item, expression);
+      if (typeof placeholderUtils.isImagePlaceholderExpression === 'function' && placeholderUtils.isImagePlaceholderExpression(expression)) {
+        var imageSource = placeholderUtils.formatPlaceholderValue(resolved);
+        if (!/^(?:https?:\/\/|\/media\/|\/assets\/|\/[^/])/i.test(imageSource)) {
+          return '';
+        }
+        var imageConfig = typeof placeholderUtils.getImagePlaceholderConfig === 'function' ? placeholderUtils.getImagePlaceholderConfig(expression) : {};
+        var imageStyle = options && options.preview && imageConfig.width && imageConfig.height
+          ? 'display:block;width:100%;height:100%;object-fit:contain;'
+          : 'display:block;width:auto;height:auto;' + (imageConfig.width ? 'max-width:' + imageConfig.width + 'px;' : '') + (imageConfig.height ? 'max-height:' + imageConfig.height + 'px;' : '');
+        var image = '<img src="' + escapeHtml(imageSource) + '" alt="" style="' + imageStyle + '" />';
+        if (options && options.preview && imageConfig.width && imageConfig.height) {
+          return '<span style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:' + imageConfig.width + 'px;height:' + imageConfig.height + 'px;border:1px dashed rgba(120,120,120,.75);">' + image + '</span>';
+        }
+        return image;
+      }
+      return escapeHtml(placeholderUtils.formatPlaceholderValue(resolved));
     });
   }
 
@@ -186,18 +205,8 @@
     var fontSize = sanitizeFontSize(regionContent.font_size || region.fontSize || defaultStyle.font_size);
     var fontColor = sanitizeTextColor(regionContent.font_color || region.fontColor || defaultStyle.font_color);
     var item = getItem(feedId, itemNumber, feeds);
-    var body = item ? substituteVariables(content, item) : '';
+    var hasFeed = String(feedId === undefined || feedId === null ? '' : feedId).trim() !== '';
-
+    var body = hasFeed ? (item ? substituteVariables(content, item, { preview: true }) : '') : content;
-    if (!body && item) {
-      var summaryParts = [];
-      if (item.title) {
-        summaryParts.push('<h3>' + escapeHtml(item.title) + '</h3>');
-      }
-      if (item.description) {
-        summaryParts.push('<div>' + sanitizePreviewHtml(item.description) + '</div>');
-      }
-      body = summaryParts.join('');
-    }
 
     if (!body) {
       return '';
@@ -206,6 +215,21 @@
     return renderedBody ? '<div class="template-region rss" style="width:100%;height:100%;overflow:hidden;font-family:' + escapeHtml(fontFamily) + ';font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';"><div class="template-region-text-scale" style="width:100%;height:100%;overflow:hidden;">' + renderedBody + '</div></div>' : '';
   }
 
+  function renderPlaceholderInfo(regionId) {
+    if (!window.placeholderInfo) {
+      return '';
+    }
+    return window.placeholderInfo.render(regionId, 'RSS placeholder transforms',
+      '<p class="small text-body-secondary">Placeholders read values from the selected RSS entry. Use the available field chips as the starting point for your message.</p>' +
+      '<h3 class="fs-6 mt-4 fw-normal">Placeholder paths</h3>' +
+      '<p class="small">Nested values use dots. Missing values render as empty text.</p>' +
+      (window.placeholderInfo ? window.placeholderInfo.renderTextTransforms() : '') +
+      '<h3 class="fs-6 mt-4 fw-normal">Date formatting</h3>' +
+      '<p class="small">Use <code>format("MMM D, YYYY")</code> with date fields. Use <code>tz()</code> for a short timezone name and <code>tz_long()</code> for the full timezone name.</p>' +
+      (window.placeholderInfo ? window.placeholderInfo.renderDateFormatTokens() : '') +
+      (window.placeholderInfo ? window.placeholderInfo.renderImageTransform() : ''));
+  }
+
   function renderEditorCard(context) {
     var region = context.region;
     var current = context.current || {};
@@ -221,7 +245,7 @@
             '<span class="chip">RSS</span>' +
           '</div>' +
         '</div>' +
-        '<div class="card-body p-3 d-grid gap-3 pb-0">' +
+        '<div class="card-body p-3 d-grid gap-3">' +
           '<div class="d-flex justify-content-end">' +
             '<div class="btn-group btn-group-sm template-editor-size-controls" role="group" aria-label="Editor size controls">' +
               '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="decrease" aria-label="Decrease editor size">-</button>' +
@@ -247,9 +271,8 @@
           '<input type="hidden" name="region_font_size_' + region.id + '" value="' + escapeHtml(context.fontSize || '') + '" />' +
           '<input type="hidden" name="region_text_' + region.id + '" value="' + escapeHtml(current.value !== undefined ? current.value : '') + '" />' +
           '<div class="api-region-placeholder-section">' +
-            '<div class="api-region-placeholder-title">Available placeholders</div>' +
+            '<div class="api-region-placeholder-title api-region-placeholder-title-help d-flex align-items-center gap-2">Available placeholders ' + renderPlaceholderInfo(region.id) + '</div>' +
             '<div class="d-flex flex-wrap gap-2" data-placeholder-chips>' + (placeholderChips || '<span class="muted slide-image-file">No RSS fields available.</span>') + '</div>' +
-            '<div class="text-body-secondary small mt-1">Placeholder values support transforms, for example <code>{{title.upper()}}</code>, <code>{{title.title()}}</code>, <code>{{title.lower()}}</code>, or <code>{{publishedAt.format("MMM D, YYYY")}}</code>.</div>' +
           '</div>' +
         '</div>' +
       '</div>';
@@ -291,7 +314,7 @@
           return fallbackValue;
         }
       }())),
-      feed_id: (card.querySelector('select[name="region_rss_feed_id_' + region.id + '"]') || {}).value || current.feed_id,
+      feed_id: card.querySelector('select[name="region_rss_feed_id_' + region.id + '"]') ? card.querySelector('select[name="region_rss_feed_id_' + region.id + '"]').value : current.feed_id,
       item_number: (card.querySelector('input[name="region_rss_item_number_' + region.id + '"]') || {}).value || current.item_number
     } : current;
 

src/web/public/js/regions/type/text.js

@@ -33,9 +33,9 @@
     }
 
     var style = styleOrContext && styleOrContext.style ? styleOrContext.style : styleOrContext || {};
-    var fontFamily = style && style.font_family ? 'font-family:' + escapeHtml(style.font_family) + ';' : '';
+    var fontFamily = 'font-family:' + escapeHtml(style && style.font_family || DEFAULT_STYLE.font_family) + ';';
-    var color = style && style.font_color ? 'color:' + escapeHtml(style.font_color) + ';' : '';
+    var color = 'color:' + escapeHtml(style && style.font_color || DEFAULT_STYLE.font_color) + ';';
-    var fontSize = style && style.font_size ? 'font-size:' + Math.max(1, Math.round(Number(style.font_size))) + 'px;' : '';
+    var fontSize = 'font-size:' + Math.max(1, Math.round(Number(style && style.font_size || DEFAULT_STYLE.font_size))) + 'px;';
     var width = Math.max(1, Math.round(Number(region && region.width ? region.width : 0) || 1));
     var height = Math.max(1, Math.round(Number(region && region.height ? region.height : 0) || 1));
     var wrapperStyle = 'width:' + width + 'px;height:' + height + 'px;overflow:hidden;line-height:1.5;' + fontFamily + fontSize + color;

src/web/public/js/regions/type/time-date.js

@@ -286,6 +286,19 @@
     return renderTimeDatePlaceholderChips();
   }
 
+  function renderPlaceholderInfo(regionId) {
+    if (!window.placeholderInfo) {
+      return '';
+    }
+    var placeholders = window.timeDatePlaceholders && typeof window.timeDatePlaceholders.getTokens === 'function'
+      ? window.timeDatePlaceholders.getTokens()
+      : [];
+    var table = '<div class="table-responsive"><table class="table table-sm align-middle mb-0"><thead><tr><th>Placeholder</th><th>Output</th><th>Description</th></tr></thead><tbody>' + placeholders.map(function (item) {
+      return '<tr><td><code>{{' + escapeHtml(item.token) + '}}</code></td><td>' + escapeHtml(item.output) + '</td><td>' + escapeHtml(item.description) + '</td></tr>';
+    }).join('') + '</tbody></table></div>';
+    return window.placeholderInfo.render(regionId, 'Time and date placeholders', table);
+  }
+
   function renderEditorCard(context) {
     var region = context.region;
     var current = context.current || {};
@@ -317,9 +330,8 @@
             '<datalist id="region_time_date_timezones_' + region.id + '">' + buildTimezoneOptionsMarkup(timeZone) + '</datalist>' +
           '</div>' +
           '<div>' +
-            '<div class="api-region-placeholder-title mb-2">Available placeholders</div>' +
+            '<div class="api-region-placeholder-title api-region-placeholder-title-help d-flex align-items-center gap-2 mb-2">Available placeholders ' + renderPlaceholderInfo(region.id) + '</div>' +
             '<div class="d-flex flex-wrap gap-2">' + renderPlaceholderChips() + '</div>' +
-            '<div class="text-body-secondary small mt-1">Placeholder values support transforms, for example <code>{{title.upper()}}</code>, <code>{{title.title()}}</code>, or <code>{{title.lower()}}</code>.</div>' +
           '</div>' +
         '</div>' +
       '</div>';

src/web/public/js/regions/type/timetable.js

@@ -240,6 +240,21 @@
     };
   }
 
+  function renderPlaceholderInfo(regionId) {
+    if (!window.placeholderInfo) {
+      return '';
+    }
+    var body = '<p class="small text-body-secondary">Placeholders read fields from the selected timetable entries. The selected group and display mode determine which entries and fields are available.</p>' +
+      '<h3 class="fs-6 mt-4 fw-normal">Placeholder paths</h3>' +
+      '<p class="small">Use the available field chips. Nested values use dots, and missing values render as empty text.</p>' +
+      window.placeholderInfo.renderTextTransforms() +
+      '<h3 class="fs-6 mt-4 fw-normal">Date and time formatting</h3>' +
+      '<p class="small">Use <code>format("MMM D, YYYY h:mm A")</code> with date fields. Use <code>tz()</code> for a short timezone name and <code>tz_long()</code> for the full timezone name.</p>' +
+      window.placeholderInfo.renderDateFormatTokens() +
+      '';
+    return window.placeholderInfo.render(regionId, 'Timetable placeholder transforms', body);
+  }
+
   function renderEditorCard(context) {
     var region = context.region;
     var current = context.current || {};
@@ -298,14 +313,8 @@
           '</div>' +
           '<div class="text-body-secondary small">Use the selected group and display mode to choose which timetable entry fields are available.</div>' +
           '<div class="api-region-placeholder-section schedule-placeholder-section" data-schedule-placeholder-chips>' +
-            '<div class="api-region-placeholder-title">Available placeholders</div>' +
+            '<div class="api-region-placeholder-title api-region-placeholder-title-help d-flex align-items-center gap-2">Available placeholders ' + renderPlaceholderInfo(region.id) + '</div>' +
             '<div class="d-flex flex-wrap gap-2">' + renderSchedulePlaceholderChips(currentGroup, currentEntries) + '</div>' +
-            '<div class="text-body-secondary small mt-1">Placeholder values support transforms, for example <code>{{title.upper()}}</code>, <code>{{title.title()}}</code>, <code>{{title.lower()}}</code>, <code>{{start.format("MMM D, YYYY h:mm A")}}</code>, <code>{{start.tz()}}</code> for the short zone name, or <code>{{start.tz_long()}}</code> for the full IANA zone name.</div>' +
-            '<details class="mt-2">' +
-              '<summary class="small text-body-secondary">Supported date format tokens</summary>' +
-              '<div class="mt-2">' + renderScheduleFormatTokenTable() + '</div>' +
-              '<div class="text-body-secondary small mt-1">Use these tokens inside <code>.format(...)</code>; for example <code>{{start.format("MMM D, YYYY h:mm A")}}</code>.</div>' +
-            '</details>' +
           '</div>' +
           '</div>' +
         '</div>' +

src/web/public/js/regions/type/weather.js

@@ -0,0 +1,206 @@
+// Weather region helpers for editor previews and defaults.
+
+(function () {
+  var registry = window.pulseRegionTypes;
+  var utils = window.pulseRegionUtils || {};
+  var placeholderUtils = window.placeholderUtils || {};
+
+  function escapeHtml(value) {
+    return utils.escapeHtml ? utils.escapeHtml(value) : String(value == null ? '' : value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+  }
+
+  function getLocationById(locationId, locations) {
+    return (Array.isArray(locations) ? locations : []).find(function (location) {
+      return Number(location.id) === Number(locationId);
+    }) || null;
+  }
+
+  function iconForCode(code) {
+    var value = Number(code);
+    if (!Number.isFinite(value)) return 'bi-cloud';
+    if (value === 0) return 'bi-sun';
+    if (value <= 3) return 'bi-cloud-sun';
+    if (value <= 48) return 'bi-cloud-fog';
+    if (value <= 67 || value > 77 && value <= 82) return 'bi-cloud-rain';
+    if (value <= 77) return 'bi-cloud-snow';
+    return 'bi-cloud-lightning-rain';
+  }
+
+  function conditionForCode(code) {
+    var value = Number(code);
+    if (value === 0) return 'Clear sky';
+    if (value <= 3) return 'Partly cloudy';
+    if (value <= 48) return 'Foggy';
+    if (value <= 67) return 'Rain';
+    if (value <= 77) return 'Snow';
+    if (value <= 82) return 'Showers';
+    return 'Thunderstorm';
+  }
+
+  function getSnapshot(location) {
+    return location && location.responseJson && typeof location.responseJson === 'object' ? location.responseJson : null;
+  }
+
+  function getDefaultStyle() {
+    return { font_family: 'Arial', font_size: 32, font_color: '#000000' };
+  }
+
+  function getPlaceholderFields(forecastMode) {
+    var fields = ['location_label', 'name', 'temp_unit', 'wind_unit', 'precip_unit'];
+    if (forecastMode === 'current') {
+      return fields.concat(['current.temp', 'current.feels_like', 'current.humidity', 'current.wind', 'current.precip', 'current.uv_index', 'current.cloud_cover', 'current.icon']);
+    }
+    var prefix = forecastMode === 'hourly' ? 'hourly' : 'daily';
+    var fieldsByMode = forecastMode === 'hourly' ? ['time', 'code', 'temp', 'precip', 'wind', 'uv_index', 'cloud_cover'] : ['time', 'code', 'temp_max', 'temp_min', 'precip', 'wind', 'uv_index', 'cloud_cover', 'sunrise', 'sunset'];
+    var count = forecastMode === 'hourly' ? 24 : 7;
+    for (var index = 0; index < count; index += 1) {
+      fieldsByMode.forEach(function (field) { fields.push(prefix + '.' + index + '.' + field); });
+      fields.push(prefix + '.' + index + '.icon');
+    }
+    return fields;
+  }
+
+  function renderLimitedPlaceholderChips(fields, visibleCount) {
+    if (visibleCount >= fields.length) return fields.map(function (field) {
+      return window.placeholderChips && typeof window.placeholderChips.renderChip === 'function'
+        ? window.placeholderChips.renderChip(field)
+        : '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
+    }).join('');
+    var visibleFields = fields.slice(0, visibleCount);
+    var overflowFields = fields.slice(visibleFields.length);
+    var renderChip = function (field) {
+      return window.placeholderChips && typeof window.placeholderChips.renderChip === 'function'
+        ? window.placeholderChips.renderChip(field)
+        : '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
+    };
+    var visibleMarkup = visibleFields.map(renderChip).join('');
+    if (!overflowFields.length) return visibleMarkup;
+    return visibleMarkup + '<details class="w-100 mt-1" data-placeholder-chips-more><summary class="small text-body-secondary">Show ' + escapeHtml(overflowFields.length) + ' more fields</summary><div class="d-flex flex-wrap gap-2 mt-1">' + overflowFields.map(renderChip).join('') + '</div></details>';
+  }
+
+  function normalizeWeatherExpression(expression) {
+    var value = String(expression || '').trim();
+    var currentAliases = {
+      temp: 'current.temperature_2m', temp_unit: 'current.temperature_unit', feels_like: 'current.apparent_temperature', humidity: 'current.relative_humidity_2m', code: 'current.weather_code', wind: 'current.wind_speed_10m', wind_unit: 'current.wind_speed_unit', precip: 'current.precipitation', precip_unit: 'current.precipitation_unit', uv_index: 'current.uv_index', cloud_cover: 'current.cloud_cover', icon: 'current.weather_code.icon'
+    };
+    var globalAliases = { temp_unit: 'temperature_unit', wind_unit: 'wind_speed_unit', precip_unit: 'precipitation_unit' };
+    if (globalAliases[value]) return globalAliases[value];
+    var currentField = value.replace(/^current\./, '').match(/^([^.()]+)((?:\(.*\))|(?:\..*))?$/);
+    if (currentField && currentAliases[currentField[1]]) return currentAliases[currentField[1]] + (currentField[2] || '');
+    var indexed = value.match(/^(daily|hourly)\.(\d+)\.(.+)$/);
+    if (!indexed) return value;
+    var prefix = indexed[1];
+    var index = indexed[2];
+    var fieldMatch = indexed[3].match(/^([^.()]+)((?:\(.*\))|(?:\..*))?$/);
+    var field = fieldMatch ? fieldMatch[1] : indexed[3];
+    var aliases = prefix === 'daily' ? { time: 'time', code: 'weather_code', temp_max: 'temperature_2m_max', temp_min: 'temperature_2m_min', precip: 'precipitation_sum', wind: 'wind_speed_10m_max', uv_index: 'uv_index_max', cloud_cover: 'cloud_cover_mean', sunrise: 'sunrise', sunset: 'sunset', icon: 'weather_code' } : { time: 'time', code: 'weather_code', temp: 'temperature_2m', precip: 'precipitation', wind: 'wind_speed_10m', uv_index: 'uv_index', cloud_cover: 'cloud_cover', icon: 'weather_code' };
+    if (!Object.prototype.hasOwnProperty.call(aliases, field)) return value;
+    return field === 'icon' ? prefix + '.' + aliases[field] + '.' + index + '.icon' + (fieldMatch[2] || '') : prefix + '.' + aliases[field] + '.' + index + (fieldMatch[2] || '');
+  }
+
+  function withWeatherUnits(snapshot, location) {
+    var data = Object.assign({}, snapshot, { location_label: location.location_label || '', name: location.name || '', timezone: location.timezone || '', temp_unit: location.temperature_unit === 'fahrenheit' ? '°F' : '°C', wind_unit: location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'm/s' : 'km/h', precip_unit: location.precipitation_unit === 'inch' ? 'in' : 'mm' });
+    var temperatureUnit = location.temperature_unit === 'fahrenheit' ? '°F' : '°C';
+    var windUnit = location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'm/s' : 'km/h';
+    var precipitationUnit = location.precipitation_unit === 'inch' ? 'in' : 'mm';
+    data.current = Object.assign({}, snapshot.current || {}, { temperature_unit: temperatureUnit, wind_speed_unit: windUnit, precipitation_unit: precipitationUnit });
+    data.daily = Object.assign({}, snapshot.daily || {}, { temperature_unit: temperatureUnit });
+    data.hourly = Object.assign({}, snapshot.hourly || {}, { temperature_unit: temperatureUnit });
+    return data;
+  }
+
+  function substituteVariables(html, value) {
+    return String(html || '').replace(/\{\{\s*([^{}]+?)\s*\}\}/g, function (_match, expression) {
+      if (!value || typeof value !== 'object' || typeof placeholderUtils.resolvePlaceholderExpression !== 'function' || typeof placeholderUtils.formatPlaceholderValue !== 'function') return '';
+      var rawExpression = String(expression).trim();
+      var normalizedExpression = normalizeWeatherExpression(rawExpression);
+      var iconMatch = normalizedExpression.match(/^(?:current\.weather_code|daily\.weather_code\.\d+|hourly\.weather_code\.\d+)\.icon(?:\((\d+)(?:\s*,\s*(\d+))?\))?$/);
+      if (iconMatch) {
+        var codeExpression = normalizedExpression.replace(/\.icon(?:\(.*\))?$/, '');
+        var sizeExpression = rawExpression.match(/\.icon\((\d+)(?:\s*,\s*(\d+))?\)$/);
+        var weatherCode = placeholderUtils.resolvePlaceholderExpression(value, codeExpression, { timeZone: value.timezone });
+        var width = sizeExpression ? Math.max(1, Math.min(1000, Number(sizeExpression[1]))) : 0;
+        var height = sizeExpression && sizeExpression[2] ? Math.max(1, Math.min(1000, Number(sizeExpression[2]))) : width;
+        var style = width ? ' style="display:inline-block;vertical-align:middle;font-size:' + width + 'px;line-height:' + height + 'px;width:' + width + 'px;height:' + height + 'px;"' : '';
+        var icon = '<i class="bi ' + iconForCode(weatherCode) + '"' + style + ' aria-hidden="true"></i>';
+        return width ? '<span style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:' + width + 'px;height:' + height + 'px;border:1px dashed rgba(120,120,120,.75);">' + icon + '</span>' : icon;
+      }
+      return escapeHtml(placeholderUtils.formatPlaceholderValue(placeholderUtils.resolvePlaceholderExpression(value, normalizeWeatherExpression(expression), { timeZone: value.timezone })));
+    });
+  }
+
+  function renderTransformInfo(regionId) {
+    var offcanvasId = 'weather-placeholder-info-' + regionId;
+    return '<button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" data-bs-toggle="offcanvas" data-bs-target="#' + offcanvasId + '" aria-controls="' + offcanvasId + '">More info</button>' +
+      '<div class="offcanvas offcanvas-end fw-normal" tabindex="-1" id="' + offcanvasId + '" aria-labelledby="' + offcanvasId + '-label">' +
+        '<div class="offcanvas-header"><h2 class="offcanvas-title fs-5" id="' + offcanvasId + '-label">Weather placeholder transforms</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div>' +
+        '<div class="offcanvas-body"><p class="small text-body-secondary">Placeholders read values from the selected weather snapshot. Nested fields use dots.</p>' +
+          '<h3 class="h6 mt-3">Weather icons</h3><p class="small text-body-secondary">Use the icon property to insert a Bootstrap weather icon. Add width and height in pixels when sizing is needed.</p><ul class="small"><li><code>{{current.icon}}</code></li><li><code>{{current.icon(48,48)}}</code></li><li><code>{{daily.0.icon(32,24)}}</code></li></ul>' +
+          (window.placeholderInfo ? window.placeholderInfo.renderTextTransforms() : '') +
+          (window.placeholderInfo ? window.placeholderInfo.renderDateFormatTokens() : '') +
+        '</div>' +
+      '</div>';
+  }
+
+  function renderPreview(region, content, context) {
+    var locations = context && context.weatherLocations ? context.weatherLocations : [];
+    var location = getLocationById(content && content.weather_location_id, locations);
+    var snapshot = getSnapshot(location);
+    var value = String(content && content.value || '');
+    if (!location || !snapshot) return '<div class="template-region weather"><div class="slide-preview-placeholder">Select a weather location with cached data</div></div>';
+    var weatherData = withWeatherUnits(snapshot, location);
+    if (value) {
+      var fontSize = Math.max(8, Number(content && content.font_size || region && (region.font_size || region.fontSize) || 32) || 32);
+      return '<div class="template-region weather" style="width:100%;height:100%;overflow:hidden;font-family:Arial;font-size:' + fontSize + 'px;line-height:1.5;color:#000000;"><div class="template-region-text-scale" style="width:100%;height:100%;overflow:hidden;">' + (utils.sanitizePreviewHtml ? utils.sanitizePreviewHtml(substituteVariables(value, weatherData)) : substituteVariables(value, weatherData)) + '</div></div>';
+    }
+    var current = snapshot.current || {};
+    var daily = snapshot.daily || {};
+    var code = current.weather_code;
+    var days = (daily.time || []).slice(0, 7).map(function (day, index) {
+      return '<div class="weather-region-day"><strong>' + escapeHtml(index === 0 ? 'Today' : String(day).slice(5)) + '</strong><i class="bi ' + iconForCode(daily.weather_code && daily.weather_code[index]) + '"></i><span>' + escapeHtml(daily.temperature_2m_max && daily.temperature_2m_max[index] !== undefined ? daily.temperature_2m_max[index] + '°' : '-') + '</span></div>';
+    }).join('');
+    return '<div class="template-region weather" style="width:100%;height:100%;overflow:hidden;padding:3%;font-family:Arial,sans-serif;"><div style="display:flex;align-items:center;justify-content:space-between;"><div><div style="font-size:.8em;opacity:.72;">' + escapeHtml(location.location_label || location.name) + '</div><strong style="font-size:2em;">' + escapeHtml(current.temperature_2m === undefined ? '-' : current.temperature_2m) + '°</strong><div>' + escapeHtml(conditionForCode(code)) + '</div></div><i class="bi ' + iconForCode(code) + '" style="font-size:3em;"></i></div><div style="display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35em;margin-top:1em;">' + days + '</div></div>';
+  }
+
+  function renderEditorCard(context) {
+    var region = context.region;
+    var current = context.current || {};
+    var locations = Array.isArray(context.weatherLocations) ? context.weatherLocations : [];
+    var options = locations.map(function (location) {
+      return '<option value="' + escapeHtml(location.id) + '"' + (Number(location.id) === Number(current.weather_location_id) ? ' selected' : '') + '>' + escapeHtml(location.name || location.location_label || ('Location ' + location.id)) + '</option>';
+    }).join('');
+    var currentValue = current.value !== undefined ? current.value : current.text !== undefined ? current.text : '';
+    var forecastMode = ['current', 'hourly'].includes(current.forecast_mode) ? current.forecast_mode : 'daily';
+    var placeholderFields = getPlaceholderFields(forecastMode);
+    var visiblePlaceholderCount = forecastMode === 'current' ? placeholderFields.length : 5 + (forecastMode === 'hourly' ? 8 : 11);
+    var chips = renderLimitedPlaceholderChips(placeholderFields, visiblePlaceholderCount);
+      return '<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + escapeHtml(region.id) + '"><div class="card-header template-field-head"><strong>' + escapeHtml(region.label) + '</strong><div class="template-field-actions"><span class="chip">Weather</span></div></div><div class="card-body p-3 d-grid gap-3"><div class="d-flex justify-content-end"><div class="btn-group btn-group-sm template-editor-size-controls" role="group" aria-label="Editor size controls"><button type="button" class="btn btn-outline-secondary" data-editor-size-action="decrease" aria-label="Decrease editor size">-</button><button type="button" class="btn btn-outline-secondary" data-editor-size-action="increase" aria-label="Increase editor size">+</button></div></div><div class="editor-holder" data-region-id="' + escapeHtml(region.id) + '"><textarea class="editor-source" rows="10">' + escapeHtml(currentValue) + '</textarea></div><div class="row g-3 align-items-end"><div class="col-12 col-md-8"><label class="form-label" for="region_weather_location_id_' + escapeHtml(region.id) + '">Weather location</label><select id="region_weather_location_id_' + escapeHtml(region.id) + '" name="region_weather_location_id_' + escapeHtml(region.id) + '" class="form-select"><option value="">Select a location</option>' + options + '</select></div><div class="col-12 col-md-4"><label class="form-label" for="region_weather_forecast_mode_' + escapeHtml(region.id) + '">Forecast</label><select id="region_weather_forecast_mode_' + escapeHtml(region.id) + '" name="region_weather_forecast_mode_' + escapeHtml(region.id) + '" class="form-select"><option value="current"' + (forecastMode === 'current' ? ' selected' : '') + '>Current</option><option value="daily"' + (forecastMode === 'daily' ? ' selected' : '') + '>7 days</option><option value="hourly"' + (forecastMode === 'hourly' ? ' selected' : '') + '>24 hour</option></select></div></div><input type="hidden" name="region_text_' + escapeHtml(region.id) + '" value="' + escapeHtml(currentValue) + '" /><div class="api-region-placeholder-section"><div class="api-region-placeholder-title api-region-placeholder-title-help d-flex align-items-center gap-2">Available placeholders ' + renderTransformInfo(region.id) + '</div><div class="d-flex flex-wrap gap-2" data-placeholder-chips>' + chips + '</div></div></div></div>';
+  }
+
+  document.addEventListener('change', function (event) {
+    var target = event.target;
+    if (!target || !target.matches || !target.matches('select[name^="region_weather_forecast_mode_"]')) return;
+    var card = target.closest('[data-region-id]');
+    var chipContainer = card && card.querySelector('[data-placeholder-chips]');
+    if (!chipContainer || !window.placeholderChips || typeof window.placeholderChips.renderChips !== 'function') return;
+    var forecastMode = target.value === 'hourly' ? 'hourly' : target.value === 'current' ? 'current' : 'daily';
+    var placeholderFields = getPlaceholderFields(forecastMode);
+    var visiblePlaceholderCount = forecastMode === 'current' ? placeholderFields.length : 5 + (forecastMode === 'hourly' ? 8 : 11);
+    chipContainer.innerHTML = renderLimitedPlaceholderChips(placeholderFields, visiblePlaceholderCount);
+  });
+
+  function buildEditorCardContext(context) {
+    return { region: context.region, current: context.current || {}, weatherLocations: context.weatherLocations || [] };
+  }
+
+  function buildPreviewRenderContext(region, card, existingContent, locations) {
+    var current = existingContent[region.region_key] || {};
+    var input = card && card.querySelector('select[name="region_weather_location_id_' + region.id + '"]');
+    var modeInput = card && card.querySelector('select[name="region_weather_forecast_mode_' + region.id + '"]');
+    var textInput = card && card.querySelector('input[name="region_text_' + region.id + '"]');
+    var textArea = card && card.querySelector('textarea.editor-source');
+    return { value: textInput ? textInput.value : textArea ? textArea.value : current.value || '', weather_location_id: input ? input.value : current.weather_location_id, forecast_mode: modeInput ? modeInput.value : current.forecast_mode || 'daily', weatherLocations: locations || [] };
+  }
+
+  registry.register('weather', { label: 'Weather', getDefaultStyle: getDefaultStyle, getDefaultRegionSize: function () { return { width: 720, height: 260 }; }, renderPreview: renderPreview, renderEditorCard: renderEditorCard, buildEditorCardContext: buildEditorCardContext, buildPreviewRenderContext: buildPreviewRenderContext });
+}());

src/web/public/js/regions/type/webpage.js

@@ -50,7 +50,7 @@
       headerActions: '<span class="chip">Webpage</span>',
       bodyHtml: '' +
         '<div class="input-group flex-nowrap">' +
-          '<input type="url" name="region_webpage_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="https://example.com" />' +
+          '<input type="url" name="region_webpage_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="https://example.com" required />' +
           '<button type="button" class="btn btn-outline-secondary text-nowrap" data-webpage-preview-update data-region-id="' + region.id + '">Update</button>' +
         '</div>'
     });

src/web/public/js/settings/background-tasks.js

@@ -1,5 +1,6 @@
 (function () {
-  if (window.location.pathname.replace(/\/$/, '') !== '/settings/tasks-background' && window.location.pathname.replace(/\/$/, '') !== '/settings/tasks-scheduled') {
+  var normalizedPathname = window.location.pathname.replace(/\/$/, '');
+  if (normalizedPathname !== '/settings/tasks-background' && normalizedPathname !== '/settings/tasks-scheduled') {
     return;
   }
 

src/web/public/js/shared/placeholder-info.js

@@ -0,0 +1,67 @@
+// Shared offcanvas renderer for region placeholder documentation.
+
+(function () {
+  var root = window;
+
+  function escapeHtml(value) {
+    return String(value === undefined || value === null ? '' : value)
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  function render(regionId, title, body) {
+    var offcanvasId = String(regionId || 'region') + '-placeholder-info';
+    return '' +
+      '<button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" data-bs-toggle="offcanvas" data-bs-target="#' + offcanvasId + '" aria-controls="' + offcanvasId + '">More info</button>' +
+      '<div class="offcanvas offcanvas-end fw-normal" tabindex="-1" id="' + offcanvasId + '" aria-labelledby="' + offcanvasId + '-label">' +
+        '<div class="offcanvas-header">' +
+          '<h2 class="offcanvas-title fs-5" id="' + offcanvasId + '-label">' + escapeHtml(title) + '</h2>' +
+          '<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>' +
+        '</div>' +
+        '<div class="offcanvas-body">' + body + '</div>' +
+      '</div>';
+  }
+
+  function renderTextTransforms() {
+    return '<h3 class="fs-6 mt-4 fw-normal">Text transforms</h3>' +
+      '<dl class="small fw-normal">' +
+        '<dt class="fw-normal"><code>upper()</code></dt><dd>Converts text to uppercase.</dd>' +
+        '<dt class="fw-normal"><code>lower()</code></dt><dd>Converts text to lowercase.</dd>' +
+        '<dt class="fw-normal"><code>title()</code></dt><dd>Capitalizes each word.</dd>' +
+        '<dt class="fw-normal"><code>tz()</code></dt><dd>Returns the short timezone name for a date.</dd>' +
+        '<dt class="fw-normal"><code>tz_long()</code></dt><dd>Returns the full timezone name for a date.</dd>' +
+      '</dl>';
+  }
+
+  function renderDateFormatTokens() {
+    return '<h3 class="fs-6 mt-4 fw-normal">Date format tokens</h3>' +
+      '<p class="small">Use the <code>format("...")</code> transform with these tokens. Text inside square brackets is treated as a literal.</p>' +
+      '<div class="table-responsive small"><table class="table table-sm align-middle mb-0"><thead><tr><th>Token</th><th>Meaning</th><th>Example</th></tr></thead><tbody>' +
+        '<tr><td><code>YYYY</code></td><td>Four-digit year</td><td><code>2026</code></td></tr><tr><td><code>YY</code></td><td>Two-digit year</td><td><code>26</code></td></tr>' +
+        '<tr><td><code>MMMM</code></td><td>Full month name</td><td><code>August</code></td></tr><tr><td><code>MMM</code></td><td>Short month name</td><td><code>Aug</code></td></tr>' +
+        '<tr><td><code>MM</code></td><td>Two-digit month</td><td><code>08</code></td></tr><tr><td><code>M</code></td><td>Month number</td><td><code>8</code></td></tr>' +
+        '<tr><td><code>DD</code></td><td>Two-digit day</td><td><code>16</code></td></tr><tr><td><code>D</code></td><td>Day number</td><td><code>16</code></td></tr>' +
+        '<tr><td><code>dddd</code></td><td>Full weekday name</td><td><code>Sunday</code></td></tr><tr><td><code>ddd</code></td><td>Short weekday name</td><td><code>Sun</code></td></tr>' +
+        '<tr><td><code>HH</code> / <code>H</code></td><td>24-hour time</td><td><code>19</code> / <code>7</code></td></tr><tr><td><code>hh</code> / <code>h</code></td><td>12-hour time</td><td><code>07</code> / <code>7</code></td></tr>' +
+        '<tr><td><code>mm</code> / <code>m</code></td><td>Minutes</td><td><code>05</code> / <code>5</code></td></tr><tr><td><code>ss</code> / <code>s</code></td><td>Seconds</td><td><code>09</code> / <code>9</code></td></tr>' +
+        '<tr><td><code>A</code> / <code>a</code></td><td>AM or PM</td><td><code>PM</code> / <code>pm</code></td></tr>' +
+      '</tbody></table></div>';
+  }
+
+  function renderImageTransform() {
+    return '<h3 class="fs-6 mt-4 fw-normal">Image transform</h3>' +
+      '<p class="small">Use <code>image(width, height)</code> to render an image URL inside a proportional bounding box.</p>' +
+      '<ul class="small"><li>The preview shows the width and height boundary.</li><li>The player has no boundary.</li><li>The image keeps its original aspect ratio.</li><li>Both dimensions are required for a bounding box.</li></ul>';
+  }
+
+  root.placeholderInfo = {
+    escapeHtml: escapeHtml,
+    render: render,
+    renderTextTransforms: renderTextTransforms,
+    renderDateFormatTokens: renderDateFormatTokens,
+    renderImageTransform: renderImageTransform
+  };
+}());

src/web/public/js/shared/placeholder-utils.js

@@ -298,6 +298,27 @@
     return resolved;
   }
 
+  function isImagePlaceholderExpression(expression) {
+    var parsed = parsePlaceholderExpression(expression);
+    return parsed.transforms.some(function (transform) {
+      return transform && transform.name === 'image';
+    });
+  }
+
+  function getImagePlaceholderConfig(expression) {
+    var parsed = parsePlaceholderExpression(expression);
+    var imageTransform = parsed.transforms.find(function (transform) {
+      return transform && transform.name === 'image';
+    });
+    var args = imageTransform && Array.isArray(imageTransform.args) ? imageTransform.args : [];
+    var width = Number(args[0]);
+    var height = Number(args[1]);
+    return {
+      width: Number.isFinite(width) && width > 0 ? Math.round(width) : 0,
+      height: Number.isFinite(height) && height > 0 ? Math.round(height) : 0
+    };
+  }
+
   function formatPlaceholderValue(value) {
     if (value === undefined || value === null) {
       return '';
@@ -349,6 +370,8 @@
     resolvePath: resolvePath,
     parsePlaceholderExpression: parsePlaceholderExpression,
     resolvePlaceholderExpression: resolvePlaceholderExpression,
+    isImagePlaceholderExpression: isImagePlaceholderExpression,
+    getImagePlaceholderConfig: getImagePlaceholderConfig,
     formatPlaceholderValue: formatPlaceholderValue,
     collectPlaceholderFieldPaths: collectPlaceholderFieldPaths
   };

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

@@ -44,10 +44,6 @@ export function createSlideFormEditorController(options) {
     return String(value || '');
   }
 
-  function normalizeEditorMarkup(value) {
-    return String(value === undefined || value === null ? '' : value).trim();
-  }
-
   function isEmptyRichTextValue(value) {
     var raw = String(value === undefined || value === null ? '' : value).trim();
     if (!raw) {
@@ -575,7 +571,7 @@ export function createSlideFormEditorController(options) {
       return Promise.resolve(null);
     }
 
-    source.value = normalizeEditorMarkup(normalizeEditorData(source && source.value !== undefined && source.value !== null ? source.value : (hidden ? hidden.value : '')));
+    source.value = normalizeEditorData(source && source.value !== undefined && source.value !== null ? source.value : (hidden ? hidden.value : ''));
 
     if (!source.id) {
       source.id = 'slide-editor-region-' + regionId;
@@ -621,6 +617,8 @@ export function createSlideFormEditorController(options) {
       remove_script_host: false,
       convert_urls: true,
       paste_data_images: false,
+      paste_block_drop: true,
+      resize: false,
       automatic_uploads: true,
       images_file_types: imageUploadFileTypes,
       images_upload_handler: uploadEditorImage,

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

@@ -198,9 +198,9 @@ export function createSlideFormPreviewHelpers(options) {
       return module.renderPreview(region, value, style, scale);
     }
 
-    var fontFamily = style.font_family ? 'font-family:' + escapeHtml(style.font_family) + ';' : '';
+    var fontFamily = 'font-family:' + escapeHtml(style.font_family || 'Arial') + ';';
-    var color = style.font_color ? 'color:' + escapeHtml(style.font_color) + ';' : '';
+    var color = 'color:' + escapeHtml(style.font_color || '#000000') + ';';
-    var fontSize = style.font_size ? 'font-size:' + Math.max(1, Math.round(Number(style.font_size))) + 'px;' : '';
+    var fontSize = 'font-size:' + Math.max(1, Math.round(Number(style.font_size || 32))) + 'px;';
     var width = Math.max(1, Math.round(Number(region && region.width ? region.width : 0) || 1));
     var height = Math.max(1, Math.round(Number(region && region.height ? region.height : 0) || 1));
     var wrapperStyle = 'width:' + width + 'px;height:' + height + 'px;overflow:hidden;' + fontFamily + fontSize + color;

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

@@ -9,6 +9,7 @@ export function createSlideFormRegionHelpers(options) {
   var rssFeeds = Array.isArray(settings.rssFeeds) ? settings.rssFeeds : [];
   var apiSources = Array.isArray(settings.apiSources) ? settings.apiSources : [];
   var timetableGroups = Array.isArray(settings.timetableGroups) ? settings.timetableGroups : [];
+  var weatherLocations = Array.isArray(settings.weatherLocations) ? settings.weatherLocations : [];
   var getRegionTypeModule = typeof settings.getRegionTypeModule === 'function' ? settings.getRegionTypeModule : function () { return null; };
   var requestPreviewRender = typeof settings.requestPreviewRender === 'function' ? settings.requestPreviewRender : function () {};
   var placeholderUtils = window.placeholderUtils || {};
@@ -123,7 +124,7 @@ export function createSlideFormRegionHelpers(options) {
     return fields;
   }
 
-  function buildLimitedPlaceholderChipMarkup(fieldList, emptyLabel) {
+  function buildLimitedPlaceholderChipMarkup(fieldList, emptyLabel, includeTransformHint) {
     var fields = Array.isArray(fieldList) ? fieldList : [];
     var visibleFields = fields.slice(0, 8);
     var overflowFields = fields.slice(visibleFields.length);
@@ -137,7 +138,7 @@ export function createSlideFormRegionHelpers(options) {
         ? placeholderChips.renderChip(field)
         : '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
     }).join('');
-    var transformHint = '<div class="text-body-secondary small mt-1">Placeholder values support transforms, for example <code>{{title.upper()}}</code>, <code>{{title.title()}}</code>, <code>{{title.lower()}}</code>, <code>{{publishedAt.format("MMM D, YYYY")}}</code>.</div>';
+    var transformHint = includeTransformHint === false ? '' : '<div class="text-body-secondary small mt-1">Placeholder values support transforms, for example <code>{{title.upper()}}</code>, <code>{{title.title()}}</code>, <code>{{title.lower()}}</code>, <code>{{publishedAt.format("MMM D, YYYY")}}</code>.</div>';
 
     if (!overflowFields.length) {
       return visibleMarkup + transformHint;
@@ -417,7 +418,7 @@ export function createSlideFormRegionHelpers(options) {
       return;
     }
 
-    container.innerHTML = buildLimitedPlaceholderChipMarkup(getApiFieldList(sourceId, itemsPathOverride), 'No JSON fields available.');
+    container.innerHTML = buildLimitedPlaceholderChipMarkup(getApiFieldList(sourceId, itemsPathOverride), 'No JSON fields available.', false);
   }
 
   function updateApiSampleDataPanel(regionId, sourceId, itemNumber, itemsPathOverride) {
@@ -537,7 +538,7 @@ export function createSlideFormRegionHelpers(options) {
     if (module && typeof module.buildEditorCardContext === 'function') {
       return module.buildEditorCardContext({
         region: region,
-        current: region.region_type === 'rss' || region.region_type === 'api' || region.region_type === 'time-date' || region.region_type === 'timetable' ? (existingContent[region.region_key] || {}) : getCurrentRegionValue(region),
+        current: region.region_type === 'rss' || region.region_type === 'api' || region.region_type === 'time-date' || region.region_type === 'timetable' || region.region_type === 'weather' ? (existingContent[region.region_key] || {}) : getCurrentRegionValue(region),
         currentDuration: getCurrentRegionVideoDuration(region),
         regionRatio: reduceAspectRatio(region.width, region.height),
         uploadMaxLabel: uploadMaxLabel,
@@ -546,7 +547,7 @@ export function createSlideFormRegionHelpers(options) {
         uploadVideoMaxBytes: uploadVideoMaxBytes,
         uploadMimeTypes: uploadMimeTypes,
         disableAudio: (existingContent[region.region_key] || {}).disable_audio,
-        config: region.region_type === 'api' ? getCurrentApiConfig(region) : region.region_type === 'timetable' ? getCurrentTimetableConfig(region) : getCurrentRssConfig(region),
+        config: region.region_type === 'api' ? getCurrentApiConfig(region) : region.region_type === 'timetable' ? getCurrentTimetableConfig(region) : region.region_type === 'weather' ? { weather_location_id: (existingContent[region.region_key] || {}).weather_location_id || '' } : getCurrentRssConfig(region),
         style: getCurrentTextStyle(region),
         fontSize: getCurrentTextStyle(region).font_size,
         feedOptions: rssFeeds.map(function (feed) {
@@ -561,15 +562,16 @@ export function createSlideFormRegionHelpers(options) {
           ? getRssFieldList(getCurrentRssConfig(region).feed_id).map(function (field) {
               return '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
             }).join('')
-          : buildLimitedPlaceholderChipMarkup(getApiFieldList(getCurrentApiConfig(region).source_id, getCurrentApiConfig(region).items_path), 'No JSON fields available.'),
+          : buildLimitedPlaceholderChipMarkup(getApiFieldList(getCurrentApiConfig(region).source_id, getCurrentApiConfig(region).items_path), 'No JSON fields available.', false),
         placeholderFields: region.region_type === 'api'
           ? getApiFieldList(getCurrentApiConfig(region).source_id, getCurrentApiConfig(region).items_path)
           : region.region_type === 'rss'
             ? getRssFieldList(getCurrentRssConfig(region).feed_id)
             : [],
         sampleDataPreview: buildApiSampleDataMarkup(getCurrentApiConfig(region).source_id, getCurrentApiConfig(region).item_number, getCurrentApiConfig(region).items_path),
-        timetableGroups: timetableGroups
+        timetableGroups: timetableGroups,
-      }, existingContent, region.region_type === 'rss' ? rssFeeds : region.region_type === 'timetable' ? timetableGroups : apiSources);
+        weatherLocations: weatherLocations
+      }, existingContent, region.region_type === 'rss' ? rssFeeds : region.region_type === 'timetable' ? timetableGroups : region.region_type === 'weather' ? weatherLocations : apiSources);
     }
 
     var textStyle = getCurrentTextStyle(region);
@@ -580,7 +582,7 @@ export function createSlideFormRegionHelpers(options) {
 
     return {
       region: region,
-      current: region.region_type === 'rss' || region.region_type === 'api' ? currentContent : getCurrentRegionValue(region),
+      current: region.region_type === 'rss' || region.region_type === 'api' || region.region_type === 'weather' ? currentContent : getCurrentRegionValue(region),
       currentDuration: getCurrentRegionVideoDuration(region),
       regionRatio: reduceAspectRatio(region.width, region.height),
       uploadMaxLabel: uploadMaxLabel,
@@ -589,7 +591,7 @@ export function createSlideFormRegionHelpers(options) {
       uploadVideoMaxBytes: uploadVideoMaxBytes,
       uploadMimeTypes: uploadMimeTypes,
       disableAudio: currentContent.disable_audio,
-      config: region.region_type === 'api' ? apiConfig : region.region_type === 'timetable' ? getCurrentTimetableConfig(region) : rssConfig,
+      config: region.region_type === 'api' ? apiConfig : region.region_type === 'timetable' ? getCurrentTimetableConfig(region) : region.region_type === 'weather' ? { weather_location_id: currentContent.weather_location_id || '' } : rssConfig,
       style: textStyle,
       fontSize: textStyle.font_size,
       feedOptions: rssFeeds.map(function (feed) {
@@ -602,14 +604,15 @@ export function createSlideFormRegionHelpers(options) {
       }).join(''),
       placeholderChips: region.region_type === 'rss'
         ? buildLimitedPlaceholderChipMarkup(getRssFieldList(rssConfig.feed_id), 'No RSS fields available.')
-        : buildLimitedPlaceholderChipMarkup(getApiFieldList(apiConfig.source_id, apiItemsPath), 'No JSON fields available.'),
+        : buildLimitedPlaceholderChipMarkup(getApiFieldList(apiConfig.source_id, apiItemsPath), 'No JSON fields available.', false),
       placeholderFields: region.region_type === 'api'
         ? getApiFieldList(apiConfig.source_id, apiItemsPath)
         : region.region_type === 'rss'
           ? getRssFieldList(rssConfig.feed_id)
           : [],
       sampleDataPreview: buildApiSampleDataMarkup(apiConfig.source_id, apiConfig.item_number, apiItemsPath),
-      timetableGroups: timetableGroups
+      timetableGroups: timetableGroups,
+      weatherLocations: weatherLocations
     };
   }
 
@@ -745,7 +748,7 @@ export function createSlideFormRegionHelpers(options) {
   function getPreviewRegionContent(card, region) {
     var module = getRegionTypeModule(region.region_type);
     if (module && typeof module.buildPreviewRenderContext === 'function') {
-      return module.buildPreviewRenderContext(region, card, existingContent, region.region_type === 'rss' ? rssFeeds : region.region_type === 'timetable' ? timetableGroups : apiSources);
+      return module.buildPreviewRenderContext(region, card, existingContent, region.region_type === 'rss' ? rssFeeds : region.region_type === 'timetable' ? timetableGroups : region.region_type === 'weather' ? weatherLocations : apiSources);
     }
 
     var current = existingContent[region.region_key];
@@ -813,7 +816,7 @@ export function createSlideFormRegionHelpers(options) {
   function buildPreviewRenderContext(region, card) {
     var module = getRegionTypeModule(region.region_type);
     if (module && typeof module.buildPreviewRenderContext === 'function') {
-      return module.buildPreviewRenderContext(region, card, existingContent, region.region_type === 'rss' ? rssFeeds : region.region_type === 'timetable' ? timetableGroups : apiSources);
+      return module.buildPreviewRenderContext(region, card, existingContent, region.region_type === 'rss' ? rssFeeds : region.region_type === 'timetable' ? timetableGroups : region.region_type === 'weather' ? weatherLocations : apiSources);
     }
 
     var textStyle = getCurrentTextStyle(region);

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

@@ -30,6 +30,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
   var rssFeeds = Array.isArray(slideEditorData.rssFeeds) ? slideEditorData.rssFeeds : [];
   var apiSources = Array.isArray(slideEditorData.apiSources) ? slideEditorData.apiSources : [];
   var timetableGroups = Array.isArray(slideEditorData.timetableGroups) ? slideEditorData.timetableGroups : [];
+  var weatherLocations = Array.isArray(slideEditorData.weatherLocations) ? slideEditorData.weatherLocations : [];
   var fontStylesheetHref = String(slideEditorData.fontStylesheetHref || '').trim();
   var existingTemplateId = slideEditorData.existingTemplateId !== undefined ? slideEditorData.existingTemplateId : null;
   var existingContent = slideEditorData.existingContent || {};
@@ -86,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;
     }
@@ -106,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';
@@ -139,6 +154,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     rssFeeds: rssFeeds,
     apiSources: apiSources,
     timetableGroups: timetableGroups,
+    weatherLocations: weatherLocations,
     defaultFontSize: DEFAULT_FONT_SIZE,
     uploadMaxLabel: uploadMaxLabel,
     uploadVideoMaxLabel: uploadVideoMaxLabel,
@@ -305,31 +321,12 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     previewBox.innerHTML = value
       ? '<div class="slide-image-region-preview-shell" data-remove-' + (isVideo ? 'region-video' : isQrImage ? 'region-qr-image' : 'region-image') + '="' + escapeHtml(card.getAttribute('data-region-id') || '') + '" role="button" tabindex="0" aria-label="Remove ' + (isVideo ? 'video' : isQrImage ? 'QR image' : 'image') + '">' +
           (isVideo
-            ? '<video class="slide-image-region-preview" src="' + escapeHtml(value) + '" autoplay loop muted playsinline preload="metadata"></video>'
+            ? '<video class="slide-image-region-preview" src="' + escapeHtml(value) + '" muted playsinline preload="metadata"></video>'
             : '<img class="slide-image-region-preview" src="' + escapeHtml(value) + '" alt="' + (isQrImage ? 'Current QR image preview' : 'Current image preview') + '" />') +
           '<span class="slide-image-region-preview-remove" aria-hidden="true"><i class="bi bi-trash3" aria-hidden="true"></i></span>' +
         '</div>'
       : '<div class="slide-image-region-preview slide-image-region-preview-empty">No ' + (isVideo ? 'video' : 'image') + '</div>';
 
-    if (isVideo) {
-      window.requestAnimationFrame(function () {
-        var video = previewBox.querySelector('video.slide-image-region-preview');
-        if (!video) {
-          return;
-        }
-        try {
-          video.load();
-        } catch (_error) {
-          // Ignore load failures; play() will retry if the browser allows it.
-        }
-        var playPromise = video.play && video.play();
-        if (playPromise && typeof playPromise.catch === 'function') {
-          playPromise.catch(function () {
-            return null;
-          });
-        }
-      });
-    }
   }
 
   function loadVideoDuration(mediaPath) {
@@ -488,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
     };
   }
@@ -608,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';
@@ -654,7 +652,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
       var content = typeModule && typeof typeModule.renderPreview === 'function'
         ? typeModule.renderPreview(region, previewContext, previewContext)
         : renderPreviewTextRegion(region, previewContext.value, previewContext.style, scale);
-      if (typeModule && typeof typeModule.renderPreview === 'function') {
+      if (typeModule && typeof typeModule.renderPreview === 'function' && region.region_type !== 'api' && region.region_type !== 'rss') {
         content = content || renderPreviewTextRegion(region, previewContext.value, previewContext.style, scale);
       }
       var selected = region.region_type === 'image'
@@ -861,6 +859,15 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     requestPreviewRender();
   }
 
+  slideForm.addEventListener('keydown', function (event) {
+    var target = event.target;
+    if (event.key !== 'Enter' || !target || !target.matches || !target.matches('input:not([type="submit"]):not([type="button"]):not([type="reset"]), select')) {
+      return;
+    }
+
+    event.preventDefault();
+  });
+
   slideForm.addEventListener('submit', function (event) {
     if (!window.webAsyncSaveForm || typeof window.webAsyncSaveForm.submit !== 'function') {
       return;

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/theme-init.js

@@ -2,25 +2,26 @@
 
 (function () {
   var storageKey = 'lte-theme';
-  var theme = 'dark';
+  var root = document.documentElement;
-
+  var authoredTheme = root.getAttribute('data-bs-theme');
-  function getPreferredTheme() {
+  var theme = authoredTheme === 'light' || authoredTheme === 'dark' ? authoredTheme : 'dark';
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+  var storedTheme = null;
-      return 'dark';
-    }
-
-    return 'light';
-  }
 
   try {
-    var storedTheme = window.localStorage.getItem(storageKey);
+    storedTheme = window.localStorage.getItem(storageKey);
-    if (storedTheme === 'dark' || storedTheme === 'light' || storedTheme === 'auto') {
-      theme = storedTheme === 'auto' ? getPreferredTheme() : storedTheme;
-    }
   } catch (error) {
-    theme = 'dark';
+    storedTheme = null;
   }
 
-  document.documentElement.dataset.bsTheme = theme;
+  if (storedTheme === 'light' || storedTheme === 'dark') {
-  document.documentElement.style.colorScheme = theme;
+    theme = storedTheme;
+  } else if (storedTheme === 'auto' || (authoredTheme !== 'light' && authoredTheme !== 'dark')) {
+    theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  root.setAttribute('data-bs-theme', theme);
+  root.style.colorScheme = theme;
+  if (theme !== authoredTheme) {
+    root.setAttribute('data-lte-theme-resolved', '');
+  }
 }());

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

@@ -1,6 +1,102 @@
 // Shared browser helpers for web UI escaping and formatting.
 
 (function () {
+  var urlValidationMessage = 'Please enter a URL.';
+
+  function isUrlInput(input) {
+    return input && input.matches && input.matches('input[type="url"]');
+  }
+
+  function isValidHttpUrl(input) {
+    input.setCustomValidity('');
+    var value = String(input.value || '').trim();
+    var hasValidNativeUrl = input.validity.valid;
+    var hasExplicitHttpScheme = /^https?:\/\/[^\s]+$/i.test(value);
+    var isValid = hasValidNativeUrl && hasExplicitHttpScheme;
+    if (!isValid) {
+      input.setCustomValidity(urlValidationMessage);
+    }
+    return isValid;
+  }
+
+  function getUrlFeedback(input) {
+    if (input._urlFeedback && input._urlFeedback.parentNode) {
+      return input._urlFeedback;
+    }
+
+    var feedbackId = input.id ? input.id + '-url-feedback' : '';
+    var feedback = feedbackId ? document.getElementById(feedbackId) : null;
+    if (feedback) {
+      var inputGroup = input.closest ? input.closest('.input-group') : null;
+      var feedbackAnchor = inputGroup || input;
+      feedbackAnchor.parentNode.insertBefore(feedback, feedbackAnchor.nextSibling);
+      input._urlFeedback = feedback;
+      return feedback;
+    }
+
+    feedback = document.createElement('div');
+    if (feedbackId) {
+      feedback.id = feedbackId;
+    }
+    feedback.className = 'invalid-feedback';
+    feedback.setAttribute('role', 'alert');
+    feedback.textContent = urlValidationMessage;
+
+    var inputGroup = input.closest ? input.closest('.input-group') : null;
+    var feedbackAnchor = inputGroup || input;
+    feedbackAnchor.parentNode.insertBefore(feedback, feedbackAnchor.nextSibling);
+    if (input.id) {
+      input.setAttribute('aria-describedby', feedback.id);
+    }
+    input._urlFeedback = feedback;
+    return feedback;
+  }
+
+  function updateUrlValidation(input, showFeedback) {
+    if (!isUrlInput(input)) {
+      return true;
+    }
+
+    var isValid = isValidHttpUrl(input);
+    if (!isValid && showFeedback) {
+      var feedback = getUrlFeedback(input);
+      feedback.hidden = false;
+      feedback.classList.add('d-block');
+      input.classList.add('is-invalid');
+    } else if (isValid) {
+      if (input.id) {
+        document.querySelectorAll('[id="' + input.id + '-url-feedback"]').forEach(function (feedback) {
+          feedback.hidden = true;
+          feedback.classList.remove('d-block');
+        });
+      } else if (input._urlFeedback) {
+        input._urlFeedback.hidden = true;
+        input._urlFeedback.classList.remove('d-block');
+      }
+      input.classList.remove('is-invalid');
+    }
+
+    return isValid;
+  }
+
+  function initializeUrlValidation() {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    document.addEventListener('input', function (event) {
+      if (isUrlInput(event.target)) {
+        updateUrlValidation(event.target, true);
+      }
+    });
+    document.addEventListener('invalid', function (event) {
+      if (isUrlInput(event.target)) {
+        event.preventDefault();
+        updateUrlValidation(event.target, true);
+      }
+    }, true);
+  }
+
   function escapeHtml(value) {
     return String(value ?? '')
       .replace(/&/g, '&')
@@ -37,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) {
@@ -97,6 +188,7 @@
   }
 
   window.escapeHtml = escapeHtml;
+  initializeUrlValidation();
 
   var defaultQrOptions = window.defaultQrOptions || {
     width: 1000,

src/web/routes/admin/account.js

@@ -1,6 +1,6 @@
 // Admin account route registration and profile helpers.
 
-const { fetchAppSettings } = require('../../../data/app-settings');
+const { fetchAppSettings } = require('#src/data/app-settings');
 
 module.exports = function registerAccountRoutes(app, deps) {
   const pool = deps.pool;

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

@@ -4,6 +4,8 @@ const fs = require('fs');
 const path = require('path');
 const { loadFontLibrary } = require('#src/web/lib/media/font-library');
 const { fetchAppSettings } = require('#src/data/app-settings');
+const { convertWeatherSnapshot } = require('#src/data/weather-units');
+const { buildAuditChanges } = require('#src/data/audit-log');
 const { PERMISSION_DENIED_MESSAGE } = require('#src/rbac');
 
 module.exports = function registerContentRoutes(app, deps) {
@@ -39,11 +41,32 @@ module.exports = function registerContentRoutes(app, deps) {
   const IMAGE_UPLOAD_MAX_BYTES = 100 * 1024 * 1024;
   const VIDEO_UPLOAD_MAX_BYTES = 1024 * 1024 * 1024;
 
+  function normalizeTemplateRegionsForAudit(regions) {
+    return (Array.isArray(regions) ? regions : []).map(function (region) {
+      const animation = typeof region.animation_json === 'string'
+        ? common.parseJsonSafe(region.animation_json) || {}
+        : region.animation_json || {};
+      return {
+        region_key: region.region_key,
+        region_type: region.region_type,
+        label: region.label,
+        lock_ratio: region.lock_ratio,
+        animation_json: animation,
+        x: Number(region.x),
+        y: Number(region.y),
+        width: Number(region.width),
+        height: Number(region.height),
+        z_index: Number(region.z_index)
+      };
+    });
+  }
+
   async function fetchSlideFormData() {
     const data = await common.fetchTemplatesData(pool);
     const rssData = await common.fetchRssFeedsData(pool);
     const apiData = typeof common.fetchApiSourcesData === 'function' ? await common.fetchApiSourcesData(pool) : { apiSources: [] };
     const timetableData = typeof common.fetchTimetablesData === 'function' ? await common.fetchTimetablesData(pool) : { timetableGroups: [] };
+    const weatherData = typeof common.fetchWeatherLocationsData === 'function' ? await common.fetchWeatherLocationsData(pool) : { weatherLocations: [] };
     const appSettings = await fetchAppSettings(pool);
     const apiSources = Array.isArray(apiData.apiSources) ? apiData.apiSources.map(function (source) {
       return Object.assign({}, source, {
@@ -59,10 +82,16 @@ module.exports = function registerContentRoutes(app, deps) {
       }) });
     }));
 
-    return Object.assign(data, rssData, apiData, timetableData, {
+    const weatherLocations = Array.isArray(weatherData.weatherLocations) ? weatherData.weatherLocations.map(function (location) {
+      const responseJson = typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(location.last_response_json) : null;
+      return Object.assign({}, location, { responseJson: convertWeatherSnapshot(responseJson, { temperature: location.temperature_unit === 'fahrenheit' ? 'fahrenheit' : 'celsius', wind: location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'ms' : 'kmh', precipitation: location.precipitation_unit === 'inch' ? 'inch' : 'mm' }) });
+    }) : [];
+
+    return Object.assign(data, rssData, apiData, timetableData, weatherData, {
       rssFeeds: rssFeeds,
       apiSources: apiSources,
       timetableGroups: timetableData.timetableGroups || [],
+      weatherLocations: weatherLocations,
       fontLibrary: loadFontLibrary(deps.uploadDir),
       uploadLimits: {
         imageMaxBytes: Number(appSettings['uploads.image_max_bytes']) || IMAGE_UPLOAD_MAX_BYTES,
@@ -497,6 +526,15 @@ module.exports = function registerContentRoutes(app, deps) {
       }
       const nextUploadRefs = collectUploadReferencesFromPayload(payload);
       const actorId = getAuditUserId(req);
+      const changes = buildAuditChanges({
+        title: slide.title,
+        templateId: Number(slide.template_id),
+        content: slide.content
+      }, {
+        title: payload.title,
+        templateId: Number(payload.templateId),
+        content: common.parseJsonSafe(payload.contentJson) || {}
+      });
       await pool.query(
         'UPDATE c_slides SET title = ?, template_id = ?, content_json = ?, modified_by = ? WHERE id = ?',
         [payload.title, payload.templateId, payload.contentJson, actorId, slide.id]
@@ -512,7 +550,7 @@ module.exports = function registerContentRoutes(app, deps) {
         screenSlideCounts: screenSlideCounts
       });
       await broadcastDashboardState();
-      if (typeof recordRequestAuditEvent === 'function') await recordRequestAuditEvent(pool, req, { category: 'slides', eventType: 'slide.updated', actorUserId: actorId, targetType: 'slide', targetId: slide.id, targetLabel: payload.title });
+      if (typeof recordRequestAuditEvent === 'function') await recordRequestAuditEvent(pool, req, { category: 'slides', eventType: 'slide.updated', actorUserId: actorId, targetType: 'slide', targetId: slide.id, targetLabel: payload.title, details: { changes: changes } });
       queueSlideThumbnailRefresh(slide.id, slide.thumbnail_path).catch(function (error) {
         console.warn('Unable to queue slide thumbnail refresh:', error);
       });
@@ -594,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];
@@ -655,9 +693,22 @@ module.exports = function registerContentRoutes(app, deps) {
       const nextUploadRefs = collectUploadReferencesFromPayload(payload);
       const affectedScreens = await fetchScreensByTemplateId(pool, template.id);
       const actorId = getAuditUserId(req);
+      const changes = buildAuditChanges({
+        name: template.name,
+        canvasSizeId: Number(template.canvas_size_id),
+        backgroundImagePath: template.background_image_path,
+        backgroundColor: template.background_color,
+        regions: normalizeTemplateRegionsForAudit(template.regions)
+      }, {
+        name: payload.name,
+        canvasSizeId: Number(payload.canvasSizeId),
+        backgroundImagePath: payload.backgroundImagePath,
+        backgroundColor: payload.backgroundColor,
+        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) {
@@ -681,7 +732,7 @@ module.exports = function registerContentRoutes(app, deps) {
         });
       }
       await notifyPlayerScreens(affectedScreens, 'refresh');
-      if (typeof recordRequestAuditEvent === 'function') await recordRequestAuditEvent(pool, req, { category: 'templates', eventType: 'template.updated', actorUserId: actorId, targetType: 'template', targetId: template.id, targetLabel: payload.name });
+      if (typeof recordRequestAuditEvent === 'function') await recordRequestAuditEvent(pool, req, { category: 'templates', eventType: 'template.updated', actorUserId: actorId, targetType: 'template', targetId: template.id, targetLabel: payload.name, details: { changes: changes } });
       redirectAfterSave(req, res, '/templates/' + template.id + '/edit', {
         closeUrl: '/templates',
         newUrl: '/templates/new',
@@ -813,8 +864,17 @@ module.exports = function registerContentRoutes(app, deps) {
       if (await canvasSizeExists(payload.width, payload.height, canvasSize.id)) {
         return res.status(400).send('That canvas size already exists.');
       }
+      const changes = buildAuditChanges({
+        name: canvasSize.name,
+        width: Number(canvasSize.width),
+        height: Number(canvasSize.height)
+      }, {
+        name: payload.name,
+        width: payload.width,
+        height: payload.height
+      });
       await pool.query('UPDATE c_canvas_sizes SET name = ?, width = ?, height = ?, modified_by = ? WHERE id = ?', [payload.name, payload.width, payload.height, getAuditUserId(req), canvasSize.id]);
-      if (typeof recordRequestAuditEvent === 'function') await recordRequestAuditEvent(pool, req, { category: 'canvas-sizes', eventType: 'canvas-size.updated', actorUserId: getAuditUserId(req), targetType: 'canvas-size', targetId: canvasSize.id, targetLabel: payload.name, details: { width: payload.width, height: payload.height } });
+      if (typeof recordRequestAuditEvent === 'function') await recordRequestAuditEvent(pool, req, { category: 'canvas-sizes', eventType: 'canvas-size.updated', actorUserId: getAuditUserId(req), targetType: 'canvas-size', targetId: canvasSize.id, targetLabel: payload.name, details: { changes: changes } });
       redirectAfterSave(req, res, '/canvas-sizes', {
         closeUrl: '/canvas-sizes',
         newUrl: '/canvas-sizes/new',

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

@@ -15,13 +15,16 @@ module.exports = function registerDataSourceRoutes(app, deps) {
       return res.redirect('/login');
     }
 
-    if (hasAnyPermission(req.currentUser, ['timetables.read', 'rss-feeds.read', 'api-sources.read'])) {
+    if (hasAnyPermission(req.currentUser, ['timetables.read', 'rss-feeds.read', 'api-sources.read', 'weather.read'])) {
       if (hasAnyPermission(req.currentUser, ['timetables.read'])) {
         return res.redirect('/data-sources/timetables');
       }
       if (hasAnyPermission(req.currentUser, ['rss-feeds.read'])) {
         return res.redirect('/data-sources/rss-feeds');
       }
+      if (hasAnyPermission(req.currentUser, ['weather.read'])) {
+        return res.redirect('/data-sources/weather');
+      }
       return res.redirect('/data-sources/api-sources');
     }
 

src/web/routes/admin/manage.js

@@ -1,5 +1,7 @@
 // Admin manage routes for screens and commands.
 
+const { buildAuditChanges } = require('#src/data/audit-log');
+
 module.exports = function registerManageRoutes(app, deps) {
   const pool = deps.pool;
   const common = deps.common;
@@ -248,6 +250,15 @@ module.exports = function registerManageRoutes(app, deps) {
       const previousPlaylistId = screen.playlist_id;
       const slug = String(screen.slug || '').trim();
       const previousSlug = String(screen.slug || '').trim();
+      const changes = buildAuditChanges({
+        name: screen.name,
+        slug: previousSlug,
+        playlistId: previousPlaylistId === null ? null : Number(previousPlaylistId)
+      }, {
+        name: name,
+        slug: slug,
+        playlistId: playlistId
+      });
       await pool.query('UPDATE d_screens SET name = ?, slug = ?, playlist_id = ?, modified_by = ? WHERE id = ?', [name, slug, playlistId, getAuditUserId(req), screen.id]);
       if (previousPlaylistId !== playlistId && previousSlug) {
         await notifyPlayerScreens([previousSlug], 'refresh');
@@ -264,7 +275,7 @@ module.exports = function registerManageRoutes(app, deps) {
           await forwardPlayerCommand(previousSlug, redirectPayload);
         }
       }
-      if (typeof recordRequestAuditEvent === 'function') await recordRequestAuditEvent(pool, req, { category: 'screens', eventType: 'screen.updated', actorUserId: getAuditUserId(req), targetType: 'screen', targetId: screen.id, targetLabel: name, details: { slug: slug, playlistId: playlistId } });
+      if (typeof recordRequestAuditEvent === 'function') await recordRequestAuditEvent(pool, req, { category: 'screens', eventType: 'screen.updated', actorUserId: getAuditUserId(req), targetType: 'screen', targetId: screen.id, targetLabel: name, details: { changes: changes } });
       redirectAfterSave(req, res, '/screens?edit=' + screen.id, {
         closeUrl: '/screens',
         newUrl: '/screens/new',

src/web/routes/admin/playlists.js

@@ -1,6 +1,7 @@
 // Playlist admin routes and playlist-slide management.
 
-const { fetchAppSettings } = require('../../../data/app-settings');
+const { fetchAppSettings } = require('#src/data/app-settings');
+const { buildAuditChanges } = require('#src/data/audit-log');
 
 module.exports = function registerPlaylistRoutes(app, deps) {
   const pool = deps.pool;
@@ -356,7 +357,20 @@ module.exports = function registerPlaylistRoutes(app, deps) {
       await connection.commit();
       await notifyPlayerScreens(saveResult.affectedScreens, 'refresh');
       await broadcastDashboardState();
-      if (typeof recordRequestAuditEvent === 'function') await recordRequestAuditEvent(pool, req, { category: 'playlists', eventType: 'playlist.updated', actorUserId: actorId, targetType: 'playlist', targetId: playlist.id, targetLabel: name });
+      if (typeof recordRequestAuditEvent === 'function') {
+        const changes = buildAuditChanges({
+          name: playlist.name,
+          fadeBetweenSlides: Boolean(playlist.fade_between_slides),
+          skipUnavailableRtmp: Boolean(playlist.skip_unavailable_rtmp),
+          canvasId: playlist.canvas_id === null ? null : Number(playlist.canvas_id)
+        }, {
+          name: name,
+          fadeBetweenSlides: Boolean(fadeBetweenSlides),
+          skipUnavailableRtmp: Boolean(skipUnavailableRtmp),
+          canvasId: saveResult.nextCanvasId === null ? null : Number(saveResult.nextCanvasId)
+        });
+        await recordRequestAuditEvent(pool, req, { category: 'playlists', eventType: 'playlist.updated', actorUserId: actorId, targetType: 'playlist', targetId: playlist.id, targetLabel: name, details: { changes: changes } });
+      }
       redirectAfterSave(req, res, '/playlists/' + playlist.id + '/edit', {
         closeUrl: '/playlists',
         newUrl: '/playlists/new',