diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2534fd02..f0ba87e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,34 @@ accepts both, but the store flags the old spelling as deprecated
 
 ## Unreleased
 
+### Web UI: the Display tab is an ES-module page, with a page-visibility service (stage 4)
+
+- New `static/v3/js/core/visibility.js`: each page module gets
+  `ctx.visibility` with `whileVisible(start, stop)`, `every(ms, fn)` and
+  `isVisible()`. Work registered there runs only while the page's tab is the
+  active tab and the browser tab is visible, and ends when the page is
+  swapped out, with no teardown code in the page. It reads the active tab
+  from `window.LEDVisibility`, so it agrees with the classic partials that
+  still use that directly. The page registry gained a `mountContext` option
+  for services bound to one mounted page.
+- The Display tab's inline scripts are now `static/v3/js/pages/display.js`.
+  The partial has no inline script, `onclick` or `onchange` any more. The
+  multi-display sync status poll (every 5 s) runs through
+  `ctx.visibility.every`; the status and scroll-speed hint requests go
+  through `core/api.js` with the page's abort signal, and so does the Vegas
+  order widget's plugin-list request.
+- Behaviour differences: with sync on, opening the tab asks for the status
+  once instead of twice, and a Display tab loaded while not on screen waits
+  until it is. A login redirect during a poll no longer flashes "Sync status
+  unavailable". The `window.syncStatusInterval` timer id is gone (nothing
+  read it). A pending scroll-hint request or widget retry is dropped when
+  the partial is swapped out.
+- `window.updateSyncUI` keeps working as a deprecated alias through
+  `window.LEDMatrix` (one console warning).
+- New suites `test/js/dom/test_visibility_service.js` and
+  `dom/test_display_page.js`; `unit/test_display_partial_ids.js` imports the
+  module instead of slicing the template.
+
 ### Plugins ask for the screen in-process: `request_on_demand()` / `end_on_demand()`
 
 The in-process way in that stage 5 of the control socket needed
diff --git a/docs/WEB_FRONTEND_ARCHITECTURE.md b/docs/WEB_FRONTEND_ARCHITECTURE.md
index b7ae12ba..962107da 100644
--- a/docs/WEB_FRONTEND_ARCHITECTURE.md
+++ b/docs/WEB_FRONTEND_ARCHITECTURE.md
@@ -42,7 +42,8 @@ static/v3/js/
     registry.js         page lifecycle: init/destroy on htmx swaps
     api.js              fetch wrapper for /api/v3 (JSON envelope, login redirect)
     facade.js           window.LEDMatrix and deprecated aliases
-    (later) escape.js, notify.js, dialog.js, streams.js, visibility.js,
+    visibility.js       ctx.visibility: a page's timers run only while it is on screen
+    (later) escape.js, notify.js, dialog.js, streams.js,
             store.js (the one installed-plugin store), form/renderer.js
   pages/                one module per tab partial
     cache.js            export init(root, ctx), destroy(root, ctx)
@@ -81,6 +82,12 @@ The conventions the converted pages share:
   to the module's export of the same name and warns once.
 - **Timers are cleared in `destroy()`**, the one thing `ctx.signal` cannot
   undo by itself.
+- **Polling goes through `ctx.visibility`.** A refresh that repeats
+  (`ctx.visibility.every(ms, fn)`) or work that should run only while the
+  page is on screen (`ctx.visibility.whileVisible(start, stop)`) is
+  registered there, never with a bare `setInterval`. It runs only while the
+  page's tab is the active tab and the browser tab is visible, and it ends
+  when the page is destroyed, with no code in `destroy()`.
 - **A page reports its own htmx saves.** A form whose result a page module
   shows (an `htmx:afterRequest` listener on the page root, in place of an
   `hx-on` attribute naming a global) carries `data-reports-result`. `app.js`
@@ -111,6 +118,7 @@ Each mount gets a `ctx` object:
 | `ctx.state` | A per-mount object for the page's own state |
 | `ctx.api` | Shared service from `boot.js` |
 | `ctx.notify` | Shared service from `boot.js` |
+| `ctx.visibility` | This page's handle on `core/visibility.js` (below), made per mount by `boot.js` through the registry's `mountContext` option |
 
 A page that passes `{ signal: ctx.signal }` to `addEventListener` and
 `fetch` needs no teardown code. Its listeners and in-flight requests go
@@ -119,6 +127,30 @@ example: its delete buttons use one delegated listener, rows are built with
 `textContent` rather than markup strings, and a newer load supersedes an
 older one.
 
+### Page visibility
+
+`core/visibility.js` gives each mounted page `ctx.visibility`:
+
+| Member | What it does |
+|---|---|
+| `whileVisible(start, stop)` | Runs `start()` when the page comes on screen (at once, if it mounts on screen) and `stop()` when it leaves. Returns a function that ends the registration, running `stop()` first if needed |
+| `every(ms, fn)` | `fn()` at once, then every `ms` while on screen. The interval is cleared while hidden and restarted, with an immediate `fn()`, when the page is back. Returns the same kind of end function |
+| `isVisible()` | True while the page is on screen |
+| `tab` | The tab the page belongs to: its name, or `forPage(ctx, { tab })` |
+
+"On screen" means the page's tab is the active tab and the browser tab is
+visible. Everything a page registered ends when its `ctx.signal` aborts,
+after `destroy()`, so a swapped-out partial leaves no interval behind.
+
+The answer comes from `window.LEDVisibility` (`app-shell.js`), read at call
+time, so the page modules and the classic partials that still call it
+(Overview, Logs, Tools) agree on the active tab, and the SSE streams keep
+pausing with them. Each registration takes its own `LEDVisibility` key, so
+registrations never replace each other or a classic partial's. Without
+`LEDVisibility` (a page outside `base.html`), the browser tab's visibility
+alone decides. Moving the tracker itself into the module (the shell table
+below) changes only `core/visibility.js`.
+
 ### One facade
 
 `window.LEDMatrix` is the only global the module code adds:
@@ -249,7 +281,7 @@ are the inline script in each partial today.
 | 5 | Backup & Restore | 232 lines, now 0 | **Done in stage 2.** Its 5 globals (`exportBackup`, `loadBackupList`, `validateRestoreFile`, `clearRestore`, `runRestore`) are deprecated aliases; the buttons are delegated `data-action`s. Uploads go through `ctx.api.request(..., { body: formData })` (`api.js` gained a raw `body` option) |
 | 6 | Schedule | 193 lines, now 0 | **Done in stage 3.** Its 2 `hx-on` response handlers (`handleScheduleResponse`, `handleDimScheduleResponse`) are one `htmx:afterRequest` listener on the page root, and deprecated aliases. The forms are marked `data-reports-result` so `app.js` does not repeat the server's message. The saved schedules reach the module as JSON in `data-schedule-config` / `data-dim-schedule-config` instead of being templated into the script |
 | 7 | General | 153 lines, now 0 | **Done in stage 3.** The Security section's three forms and two buttons are delegated `data-action`s (one submit and one click listener); `window.webLogin` is a deprecated alias of an object with its five methods. Login requests go through `ctx.api`, so the login redirect is quiet. The settings form keeps its `hx-on` call to the shared `showSaveResult`, as Rotation's does |
-| 8 | Display | 231 | First page with `LEDVisibility` timers: those move to a `ctx.visibility` service that stops on destroy |
+| 8 | Display | 292 lines (2 scripts), now 0 | **Done in stage 4.** The first page with a timer: the 5 s multi-display sync poll is `ctx.visibility.every(5000, ...)` (above), so it runs only while the tab is on screen and stops when the partial is swapped out. Its one global, `updateSyncUI` (the Role menu's `onchange`), is a deprecated alias; the Advanced section's `onclick` is a delegated `data-action="toggle-section"` that calls the shared `toggleSection`. The status poll and the scroll-speed hint go through `ctx.api` with `ctx.signal`, as does the Vegas order widget's plugin-list request. The settings form keeps its `hx-on` call to `showSaveResult` and its `onsubmit` call to `fixInvalidNumberInputs`, as Rotation's does |
 | 9 | Overview | 410 (4 scripts) | First-run surface: Getting Started, update banner, live preview. Five globals |
 | 10 | WiFi | 364 | `x-data="wifiSetup()"` is defined by its own script. Moves to `Alpine.data()` registered from the module. AP-mode first screen, so it needs the AP-mode test on a real device |
 | 11 | Fonts | 681 | Large, but self-contained (6 globals) |
@@ -266,7 +298,7 @@ the order:
 | `showNotification` | 4 versions | `core/notify.js` |
 | The modal helper | `utils/dialog.js` | `core/dialog.js` |
 | SSE streams | `app-shell.js` | `core/streams.js` |
-| `LEDVisibility` | `app-shell.js` | `core/visibility.js` |
+| `LEDVisibility` | `app-shell.js` | `core/visibility.js` (the page-facing `ctx.visibility` is there since step 8; it reads the tracker from `app-shell.js`) |
 
 Each move leaves the old global as an alias. When the last inline script is
 gone, the script re-execution in `htmx-config.js` and the "HTMX never
@@ -286,13 +318,15 @@ Unit suites need only node. They import the shipped modules directly:
 
 | Suite | Kind | What it covers |
 |---|---|---|
-| `unit/test_page_registry.js` | Unit, minimal DOM shim | The lifecycle: one init per root, destroy on swap, a veto keeps the page, swaps elsewhere leave it alone, the sweep, lazy loading, a destroy while loading, error containment |
+| `unit/test_page_registry.js` | Unit, minimal DOM shim | The lifecycle: one init per root, destroy on swap, a veto keeps the page, swaps elsewhere leave it alone, the sweep, lazy loading, a destroy while loading, error containment, `mountContext` fields per mount |
+| `dom/test_visibility_service.js` | DOM: real `LEDVisibility` from `app-shell.js`, real registry, no server | `whileVisible` and `every` start and stop with the active tab and the browser tab's visibility; no interval runs while hidden or after a swap-out; one interval after five swaps; registrations never replace each other or a classic partial's; a destroyed page registers nothing; a throwing `start()` is contained; the no-`LEDVisibility` fallback |
 | `unit/test_core_modules.js` | Unit | `api.js` (envelope, errors, abort, login redirect, path check) and `facade.js` (facade, aliases) |
 | `dom/test_cache_page.js` | DOM: real partial, real API shape | No inline script; one request per swap and per Refresh after five swaps; a cancelled request draws nothing; hostile keys stay text; delete, empty, error, network and login states |
 | `dom/test_durations_page.js` | DOM: real partial, real widget, real API shape | One plugin-list request per swap; Move down moves one place after five swaps; the swap cancels a request in flight; a late-loading widget is waited for, and a page swapped away while waiting starts nothing; hostile names stay text |
 | `dom/test_operation_history_page.js` | DOM: real partial, real API shape | One history request per swap and per Refresh; the plugin filter filled once (from `PluginAPI`'s cache when loaded); paging, filters, debounced search, Clear (one DELETE), error/network/login states, cancel on swap; hostile ids, users and errors stay text |
 | `dom/test_raw_json_page.js` | DOM: real partial, real config | One POST per Save after five swaps, to the right file; Format and Validate act once; invalid JSON never sent and its message stays text; a save survives a swap and is still reported; the old globals' entry points |
 | `dom/test_schedule_page.js` | DOM: real partial, real widget | Both pickers drawn once per swap from the saved config; after five swaps each form's answer is one notification (message, fallback, refused, non-JSON, `null`), a request from outside the forms none; the brightness label; a late widget waited for, a page swapped away while waiting draws nothing; the old globals' entry points |
+| `dom/test_display_page.js` | DOM: real partial, real widget, real `LEDVisibility`, real API shape | After five swaps one page, one sync interval, the Vegas order drawn once and each control acting once (brightness, resolution, the two show/hide toggles, the Advanced toggle, one debounced hint request); the sync poll only while on screen and never after a swap-out; sync states and hostile peer names as text, failure and login answers; a late widget waited for; `updateSyncUI`'s entry point |
 | `dom/test_general_page.js` | DOM: real partial, real widget, real API shape | The timezone picker drawn once per swap with the saved zone; the settings form left to htmx; after five swaps each Security action makes one request (create, copy, revoke and its cancel, password and its mismatch); hostile token names stay text; refused, network and login answers; a create made before a swap is still reported and draws nothing; `webLogin`'s entry points |
 | `dom/test_backup_restore_page.js` | DOM: real partial, real API shape | One request per Refresh, Delete, Export (busy button ignores a second click), Inspect and Restore after five swaps; the upload's fields and the six restore options; reads cancelled by a swap, writes not; hostile file and host names stay text; the old globals' entry points |
 | `test/web_interface/test_es_modules.py` | pytest | MIME type; `no-cache` without `?v` and immutable with it; `boot.js` loads last; every import resolves inside `core/` and `pages/`; the converted pages are exactly the registered ones, each with its module, `init`, and one root in the rendered partial; a converted partial has no `<script>` and no `onclick`; every moved global is aliased in `boot.js` and exported by its module, and no template defines it any more |
diff --git a/test/js/README.md b/test/js/README.md
index d68e6874..1fac3eb0 100644
--- a/test/js/README.md
+++ b/test/js/README.md
@@ -59,7 +59,7 @@ server has none.
 | `unit/test_page_registry.js` | no | The page lifecycle in `js/core/registry.js` (a minimal DOM shim): one `init` per `data-page` root, `destroy` and an aborted `ctx.signal` when htmx swaps it away, a vetoed swap keeps it, lazy page modules, a root removed without htmx swept on the next swap |
 | `unit/test_core_modules.js` | no | `js/core/api.js` (JSON envelope, HTTP/`status: error`/network errors, abort passthrough, the #683 login redirect, same-server paths only) and `js/core/facade.js` (`window.LEDMatrix`, deprecated aliases) |
 | `unit/test_overview_reconciliation_poll.js` | no | The Overview's reconciliation-banner poll from `partials/overview.html`, run in a vm: it gives up after a bounded number of requests when the status never says done, runs only while the Overview is on screen (`LEDVisibility`, its own key), and stops once the banner is shown |
-| `unit/test_display_partial_ids.js` | no | `partials/display.html`: every literal `getElementById()` in its inline scripts names an id the partial renders, and moving the brightness slider (the shipped script, in a vm with a fake DOM) updates its label without throwing |
+| `unit/test_display_partial_ids.js` | no | `js/pages/display.js` started on a fake root that answers only for the ids `partials/display.html` renders: every id it looks up (with every listener and timer it set fired) exists, and moving the brightness slider updates its label without throwing |
 | `unit/test_general_web_login_token.js` | no | `createToken` from `js/pages/general.js`, imported with a fake DOM and fetch: a created API token clears the form's `data-dirty` mark (so a reload does not ask "Leave site?"), a refused one keeps it |
 | `unit/test_plugin_action_delegation.js` | no | The document-level card-action delegation and `handlePluginAction` from `plugins_manager.js`, run with the handler inside an IIFE as in the real file: each action is handled once, a Starlark app uninstall goes to `DELETE /starlark/apps/<id>`, and an uninstall is confirmed once |
 | `dom/test_installed_dom.js` | yes | The toolbar in a real DOM: pill/search/sort interaction, the HTMX partial re-swap, and a `getComputedStyle` check that `.filter-pill[data-active]` really matches the emitted markup |
@@ -70,6 +70,8 @@ server has none.
 | `dom/test_operation_history_page.js` | yes | The Operation History tab (`js/pages/operation-history.js`): one request per swap and per Refresh, the plugin filter filled once, paging, filters, search, Clear, error/login states, hostile values stay text |
 | `dom/test_raw_json_page.js` | yes | The Config Editor tab (`js/pages/raw-json.js`): one POST per Save after repeated swaps, Format/Validate, invalid JSON never sent, a save survives a swap, the old global entry points |
 | `dom/test_schedule_page.js` | yes | The Schedule tab (`js/pages/schedule.js`) with the real `schedule-picker` widget: both pickers drawn once per swap from the saved config, one notification per save answer after repeated swaps, the brightness label, a late widget waited for, the old global entry points |
+| `dom/test_visibility_service.js` | yes (no server) | `js/core/visibility.js` with the real `LEDVisibility` from `app-shell.js` and the real registry: start/stop with the active tab and the browser tab's visibility, no interval while hidden or after a swap-out, registrations independent, the no-`LEDVisibility` fallback |
+| `dom/test_display_page.js` | yes | The Display tab (`js/pages/display.js`) with the real `plugin-order-list` widget and `LEDVisibility`: one page, one sync interval and one action per control after repeated swaps, the sync poll only while on screen and never after a swap-out, sync states as text, the debounced scroll-speed hint, `updateSyncUI`'s entry point |
 | `dom/test_general_page.js` | yes | The General tab (`js/pages/general.js`) with the real `timezone-selector` widget: the picker drawn once per swap, one request per Security action after repeated swaps, hostile token names stay text, refused/network/login answers, a write survives a swap, `webLogin`'s entry points |
 | `dom/test_backup_restore_page.js` | yes | The Backup & Restore tab (`js/pages/backup-restore.js`): one request per action after repeated swaps, the upload and restore options, reads cancelled and writes not on a swap, hostile names stay text, the old global entry points |
 | `dom/test_tools_sections.js` | yes | The Tools tab's MQTT bridge and Pixlet editor sections: form prefill, the write-only password (blank means unchanged), the running-session banner and countdown, and that the editor link points at the host you loaded the page from |
diff --git a/test/js/dom/test_display_page.js b/test/js/dom/test_display_page.js
new file mode 100644
index 00000000..2cff377c
--- /dev/null
+++ b/test/js/dom/test_display_page.js
@@ -0,0 +1,325 @@
+// The Display tab as a page module (static/v3/js/pages/display.js), in a
+// real DOM (jsdom) with the real server-rendered partial, the real
+// plugin-order-list widget, the real window.LEDVisibility (app-shell.js)
+// behind ctx.visibility, and the real API's answer shapes. Built like
+// test_cache_page.js:
+//
+//   * the partial ships no <script> and no inline handlers; its root is
+//     data-page="display"
+//   * after five swaps: one mounted page, the Vegas order drawn once, each
+//     control acting once (brightness, resolution, Vegas and double-sided
+//     toggles, the Advanced section toggle, one debounced scroll-speed hint
+//     request)
+//   * the sync status is polled only while the Display tab is on screen and
+//     the browser tab visible: no interval runs while hidden, and none after
+//     the partial is swapped out
+//   * sync states drawn as text; a failed poll says "unavailable", a login
+//     redirect draws nothing
+//   * a widget that loads late is waited for, and a page swapped away while
+//     waiting starts nothing
+//   * window.updateSyncUI's entry point still works
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const { pathToFileURL } = require('url');
+const { JSDOM, VirtualConsole } = require('jsdom');
+
+const BASE = process.env.BASE || 'http://localhost:5000';
+const JS = path.resolve(__dirname, '../../../web_interface/static/v3/js');
+const get = p => new Promise((res, rej) =>
+  http.get(BASE + p, r => { let d = ''; r.on('data', c => d += c); r.on('end', () => res(d)); }).on('error', rej));
+const load = f => import(pathToFileURL(path.join(JS, f)).href);
+const tick = ms => new Promise(r => setTimeout(r, ms || 0));
+
+let pass = 0, fail = 0;
+const ok = (l, c, x) => c ? (pass++, console.log('  ok   ' + l))
+  : (fail++, console.log('  FAIL ' + l + (x !== undefined ? '  -> ' + JSON.stringify(x).slice(0, 300) : '')));
+
+(async () => {
+  const partial = await get('/partials/display');
+  const realSync = JSON.parse(await get('/api/v3/sync/status'));
+  const smooth = JSON.parse(await get('/api/v3/config/scroll-speed-advice?speed=50&min=1&max=200'));
+  const rough = JSON.parse(await get('/api/v3/config/scroll-speed-advice?speed=37&min=1&max=200'));
+  const { createRegistry } = await load('core/registry.js');
+  const { createApi } = await load('core/api.js');
+  const { createVisibility } = await load('core/visibility.js');
+  const displayPage = await load('pages/display.js');
+
+  console.log('\n── Display tab: page module (real DOM) ──');
+  ok('the partial ships no inline script', !/<script/i.test(partial));
+  ok('the partial has no inline handlers', !/\son(click|change|input)=/i.test(partial));
+  ok('the partial root is data-page="display"', /data-page="display"/.test(partial));
+  ok('the Advanced toggle names its action',
+     /data-action="toggle-section"\s+data-section="display-section-advanced-hardware"/.test(partial));
+  ok('the real sync status answers in the shape the page reads',
+     realSync.status === 'success' && realSync.data && typeof realSync.data.state === 'string', realSync);
+  ok('the real scroll-speed advice answers in the shape the page reads',
+     smooth.status === 'success' && smooth.data.applied && Array.isArray(rough.data.alternatives)
+       && rough.data.alternatives.length > 0, rough);
+
+  const errs = [];
+  const logged = [];
+  const vc = new VirtualConsole();
+  vc.on('jsdomError', e => errs.push(String(e.message || e).split('\n')[0]));
+  vc.on('error', (...a) => logged.push(a.join(' ')));
+  const dom = new JSDOM(`<!doctype html><html><body><div id="display-content">${partial}</div></body></html>`,
+    { url: BASE + '/', virtualConsole: vc, runScripts: 'outside-only' });
+  const { window } = dom;
+  const doc = window.document;
+  const panel = doc.getElementById('display-content');
+
+  // The browser tab's visibility and the app's active tab, under test control.
+  let hidden = false;
+  Object.defineProperty(doc, 'hidden', { get: () => hidden, configurable: true });
+  const setHidden = v => { hidden = v; doc.dispatchEvent(new window.Event('visibilitychange')); };
+  const setTab = tab => doc.dispatchEvent(new window.CustomEvent('ledmatrix:tab-changed', { detail: { tab } }));
+  // Intervals, counted. Timeouts (the hint's debounce, the widget retry) are real.
+  const intervals = new Map();
+  let nextInterval = 1;
+  window.setInterval = (fn, ms) => { const id = nextInterval++; intervals.set(id, { fn, ms }); return id; };
+  window.clearInterval = id => { intervals.delete(id); };
+  const fireIntervals = () => [...intervals.values()].forEach(i => i.fn());
+
+  const HOSTILE = '<img src=x onerror="window.pwned=1">';
+  const plugins = [
+    { id: 'clock', name: 'Clock', enabled: true },
+    { id: 'weather', name: HOSTILE, enabled: true },
+  ];
+  let syncAnswer = { status: 'success', data: { role: 'leader', state: 'no_peer' } };
+  let syncMode = 'ok';
+  let advice = smooth;
+  const requests = [];
+  function fakeFetch(url, init = {}) {
+    requests.push(url);
+    const respond = (status, body, headers) => Promise.resolve({
+      status, ok: status >= 200 && status < 300,
+      headers: { get: h => (headers || {})[h] || null },
+      json: () => Promise.resolve(body),
+      text: () => Promise.resolve(JSON.stringify(body)),
+    });
+    if (url === '/api/v3/plugins/installed') return respond(200, { status: 'success', data: { plugins } });
+    if (url.startsWith('/api/v3/config/scroll-speed-advice?')) return respond(200, advice);
+    if (url === '/api/v3/sync/status') {
+      if (syncMode === 'network') return Promise.reject(new TypeError('Failed to fetch'));
+      if (syncMode === 'login') return respond(401, { status: 'error' }, { 'X-LEDMatrix-Login': '/login' });
+      return respond(200, syncAnswer);
+    }
+    return respond(404, { status: 'error', message: 'unexpected ' + url });
+  }
+  window.fetch = fakeFetch;
+
+  // The shell: LEDVisibility (no Alpine here, so the active tab is the last
+  // ledmatrix:tab-changed; the SSE streams open stand-in EventSources), and
+  // the shared toggleSection the Advanced button calls.
+  window.getApp = () => null;
+  window.EventSource = class { addEventListener() {} removeEventListener() {} close() {} };
+  window.eval(fs.readFileSync(path.join(JS, 'app-shell.js'), 'utf8'));
+  const toggled = [];
+  window.toggleSection = id => toggled.push(id);
+  window.eval(fs.readFileSync(path.join(JS, 'widgets/plugin-order-list.js'), 'utf8'));
+  const widget = window.PluginOrderList;
+  ok('the widget script defines PluginOrderList', !!(widget && widget.init));
+
+  const visibility = createVisibility({ window });
+  const registry = createRegistry({
+    document: doc,
+    context: { api: createApi({ fetch: fakeFetch }), notify: () => {} },
+    mountContext: ctx => ({ visibility: visibility.forPage(ctx) }),
+  });
+  registry.register('display', displayPage);
+
+  const $ = id => doc.getElementById(id);
+  const root = () => doc.querySelector('[data-page="display"]');
+  const count = prefix => requests.filter(u => u.startsWith(prefix)).length;
+  const syncPolls = () => count('/api/v3/sync/status');
+  async function swap(html) {
+    panel.dispatchEvent(new window.CustomEvent('htmx:beforeSwap', { bubbles: true, detail: { target: panel, shouldSwap: true } }));
+    panel.innerHTML = html === undefined ? partial : html;
+    panel.dispatchEvent(new window.CustomEvent('htmx:afterSwap', { bubbles: true, detail: { target: panel } }));
+    await tick(20);
+  }
+  function fire(el, type) { el.dispatchEvent(new window.Event(type, { bubbles: true })); }
+  function setRole(role) { $('sync_role').value = role; fire($('sync_role'), 'change'); }
+
+  setTab('display');
+  await registry.start();
+  await tick(200);
+
+  // ── first load ──────────────────────────────────────────────────────────
+  ok('one plugin-list request on start', count('/api/v3/plugins/installed') === 1, requests);
+  ok('one scroll-speed hint request on start (after the debounce)', count('/api/v3/config/scroll-speed-advice') === 1, requests);
+  ok('the saved role is standalone: no sync request, no interval work',
+     $('sync_role').value === 'standalone' && syncPolls() === 0, [$('sync_role').value, syncPolls()]);
+  ok('the sync poll interval runs while the tab is on screen', intervals.size === 1
+     && [...intervals.values()][0].ms === 5000, intervals.size);
+  ok('the status bar is hidden for standalone', $('sync_status_bar').classList.contains('hidden'));
+
+  // ── five swaps ──────────────────────────────────────────────────────────
+  for (let i = 0; i < 5; i++) await swap();
+  await tick(200);
+  ok('one mounted page after five swaps', registry.list().length === 1, registry.list().length);
+  ok('one sync interval, not six', intervals.size === 1, intervals.size);
+  ok('one plugin-list request per swap', count('/api/v3/plugins/installed') === 6, count('/api/v3/plugins/installed'));
+  ok('the Vegas order drawn once, not stacked', doc.querySelectorAll('#vegas_plugin_order .plugin-order-item').length === 2,
+     doc.querySelectorAll('#vegas_plugin_order .plugin-order-item').length);
+  ok('a hostile plugin name is shown as text', $('vegas_plugin_order').textContent.includes(HOSTILE)
+     && !doc.querySelector('#vegas_plugin_order img') && !window.pwned);
+
+  // ── the controls ────────────────────────────────────────────────────────
+  $('brightness').value = '42';
+  fire($('brightness'), 'input');
+  ok('the brightness value follows the slider', $('brightness-value').textContent === '42', $('brightness-value').textContent);
+
+  $('rows').value = '32'; $('cols').value = '64'; $('chain_length').value = '3'; $('parallel').value = '2';
+  fire($('parallel'), 'input');
+  ok('the resolution readout is cols x chain by rows x parallel',
+     $('display-resolution-value').textContent === '192 × 64 pixels', $('display-resolution-value').textContent);
+  $('orientation').value = '90';
+  fire($('orientation'), 'change');
+  ok('...swapped for a 90-degree orientation', $('display-resolution-value').textContent === '64 × 192 pixels',
+     $('display-resolution-value').textContent);
+  $('rows').value = '';
+  fire($('rows'), 'input');
+  ok('...and a dash while a field is empty', $('display-resolution-value').textContent === '—');
+
+  for (const [box, settings, shown] of [['vegas_scroll_enabled', 'vegas_scroll_settings', 'block'],
+                                         ['double_sided_enabled', 'double_sided_settings', 'grid']]) {
+    $(box).checked = true; fire($(box), 'change');
+    const on = $(settings).style.display;
+    $(box).checked = false; fire($(box), 'change');
+    ok(`${box} shows and hides its settings`, on === shown && $(settings).style.display === 'none',
+       [on, $(settings).style.display]);
+  }
+
+  root().querySelector('[data-action="toggle-section"]').click();
+  ok('the Advanced button toggles its section once', toggled.join() === 'display-section-advanced-hardware', toggled);
+
+  // ── the scroll-speed hint ───────────────────────────────────────────────
+  const hints = count('/api/v3/config/scroll-speed-advice');
+  advice = rough;
+  for (const v of ['36', '37', '38']) { $('vegas_scroll_speed').value = v; fire($('vegas_scroll_speed'), 'input'); }
+  ok('the speed value follows the slider', $('vegas_scroll_speed_value').textContent === '38');
+  await tick(250);
+  ok('three quick moves make one hint request', count('/api/v3/config/scroll-speed-advice') === hints + 1,
+     count('/api/v3/config/scroll-speed-advice') - hints);
+  ok('...for the last speed', requests.filter(u => u.includes('advice')).pop().includes('speed=38'));
+  const buttons = $('vegas_scroll_speed_hint').querySelectorAll('button');
+  ok('a rough speed offers the smooth ones', buttons.length === rough.data.alternatives.length
+     && /will run as/.test($('vegas_scroll_speed_hint').textContent), $('vegas_scroll_speed_hint').textContent);
+  buttons[0].click();
+  ok('picking one sets the slider', $('vegas_scroll_speed').value === String(Math.round(rough.data.alternatives[0].pixels_per_second))
+     && $('vegas_scroll_speed_value').textContent === $('vegas_scroll_speed').value, $('vegas_scroll_speed').value);
+  advice = smooth;
+  await tick(250);
+  ok('...and asks again', count('/api/v3/config/scroll-speed-advice') === hints + 2);
+  ok('a smooth speed says so', /^Smooth on this panel/.test($('vegas_scroll_speed_hint').textContent),
+     $('vegas_scroll_speed_hint').textContent);
+
+  // ── sync: the role ──────────────────────────────────────────────────────
+  setRole('leader');
+  await tick(20);
+  ok('choosing Leader shows the status bar', !$('sync_status_bar').classList.contains('hidden'));
+  ok('...hides Position', $('setting-display-sync_follower_position').style.display === 'none');
+  ok('...and asks for the status once', syncPolls() === 1, syncPolls());
+  ok('...drawn as text', $('sync_status_content').textContent.includes('No follower detected'),
+     $('sync_status_content').textContent);
+  setRole('follower');
+  await tick(20);
+  ok('choosing Follower shows Position', $('setting-display-sync_follower_position').style.display === '');
+
+  // ── sync: the poll runs only while on screen ────────────────────────────
+  let polls = syncPolls();
+  fireIntervals();
+  await tick(20);
+  ok('each interval tick polls once', syncPolls() === polls + 1, syncPolls() - polls);
+  setTab('logs');
+  ok('switching to another tab clears the interval', intervals.size === 0, intervals.size);
+  polls = syncPolls();
+  setTab('display');
+  await tick(20);
+  ok('switching back polls at once', syncPolls() === polls + 1 && intervals.size === 1, [syncPolls() - polls, intervals.size]);
+  setHidden(true);
+  ok('hiding the browser tab clears the interval', intervals.size === 0, intervals.size);
+  polls = syncPolls();
+  setHidden(false);
+  await tick(20);
+  ok('showing it polls at once', syncPolls() === polls + 1 && intervals.size === 1, [syncPolls() - polls, intervals.size]);
+
+  // ── sync: states ────────────────────────────────────────────────────────
+  async function poll() { fireIntervals(); await tick(20); return $('sync_status_content').textContent; }
+  syncAnswer = { status: 'success', data: { role: 'leader', state: 'connected', peer_ip: HOSTILE, peer_chain: 2 } };
+  ok('a connected follower, its address as text', (await poll()).includes('Follower connected — ' + HOSTILE)
+     && !$('sync_status_content').querySelector('img'), $('sync_status_content').textContent);
+  syncAnswer = { status: 'success', data: { role: 'leader', state: 'incompatible', error: 'rows differ ' + HOSTILE } };
+  ok('incompatible panels show the reason as text', (await poll()).includes('incompatible')
+     && !$('sync_error_detail').classList.contains('hidden') && $('sync_error_text').textContent === 'rows differ ' + HOSTILE
+     && !$('sync_error_detail').querySelector('img'));
+  syncAnswer = { status: 'success', data: realSync.data };
+  ok('the real server\'s answer is drawn', (await poll()).length > 0, $('sync_status_content').textContent);
+  syncMode = 'network';
+  ok('a failed poll says unavailable', (await poll()).includes('Sync status unavailable'));
+  syncAnswer = { status: 'success', data: { role: 'follower', state: 'follower', leader_ip: '10.0.0.2' } };
+  syncMode = 'ok';
+  ok('receiving from a leader', (await poll()).includes('Receiving from leader — 10.0.0.2'));
+  syncMode = 'login';
+  ok('a login redirect draws nothing', (await poll()).includes('Receiving from leader'));
+  syncMode = 'ok';
+
+  // ── standalone stops asking ─────────────────────────────────────────────
+  setRole('standalone');
+  polls = syncPolls();
+  fireIntervals();
+  await tick(20);
+  ok('standalone hides the bar and the poll asks nothing',
+     $('sync_status_bar').classList.contains('hidden') && syncPolls() === polls, syncPolls() - polls);
+
+  // ── window.updateSyncUI ─────────────────────────────────────────────────
+  $('sync_role').value = 'leader';
+  polls = syncPolls();
+  displayPage.updateSyncUI();
+  await tick(20);
+  ok('updateSyncUI() applies the role and asks once',
+     !$('sync_status_bar').classList.contains('hidden') && syncPolls() === polls + 1, syncPolls() - polls);
+
+  // ── swapped out ─────────────────────────────────────────────────────────
+  await swap('<p>another tab</p>');
+  ok('nothing left mounted', registry.list().length === 0, registry.list().length);
+  ok('no interval left running', intervals.size === 0, intervals.size);
+  polls = syncPolls();
+  setTab('overview');
+  setTab('display');
+  setHidden(true);
+  setHidden(false);
+  await tick(20);
+  ok('a swapped-out page never polls again', syncPolls() === polls && intervals.size === 0, syncPolls() - polls);
+  const hintsGone = count('/api/v3/config/scroll-speed-advice');
+  await swap();
+  $('vegas_scroll_speed').value = '40';
+  fire($('vegas_scroll_speed'), 'input');
+  await swap('<p>another tab</p>');
+  await tick(250);
+  ok('a hint still waiting out its debounce at the swap is never asked for',
+     count('/api/v3/config/scroll-speed-advice') === hintsGone, count('/api/v3/config/scroll-speed-advice') - hintsGone);
+
+  // ── the widget loads late ───────────────────────────────────────────────
+  delete window.PluginOrderList;
+  const beforeLate = count('/api/v3/plugins/installed');
+  await swap();
+  ok('no list request while the widget is missing', count('/api/v3/plugins/installed') === beforeLate);
+  window.PluginOrderList = widget;
+  await tick(150);
+  ok('the list starts once the widget arrives', count('/api/v3/plugins/installed') === beforeLate + 1);
+  delete window.PluginOrderList;
+  await swap();
+  const beforeGone = count('/api/v3/plugins/installed');
+  await swap('<p>another tab</p>');
+  window.PluginOrderList = widget;
+  await tick(250);
+  ok('a page swapped away while waiting starts nothing', count('/api/v3/plugins/installed') === beforeGone);
+
+  ok('no console errors', logged.length === 0, logged);
+  ok('no DOM errors', errs.length === 0, errs);
+
+  console.log(`\n${pass} passed, ${fail} failed`);
+  process.exit(fail ? 1 : 0);
+})().catch(e => { console.error(e); process.exit(1); });
diff --git a/test/js/dom/test_visibility_service.js b/test/js/dom/test_visibility_service.js
new file mode 100644
index 00000000..632c3eaa
--- /dev/null
+++ b/test/js/dom/test_visibility_service.js
@@ -0,0 +1,211 @@
+// The page-visibility service (static/v3/js/core/visibility.js), in a real
+// DOM (jsdom) with the real window.LEDVisibility from app-shell.js and the
+// real page registry, wired the way core/boot.js wires them (each mount gets
+// ctx.visibility from mountContext):
+//
+//   * whileVisible(start, stop) runs start() only while the page's tab is the
+//     active tab AND the browser tab is visible, stop() when either changes
+//   * every(ms, fn) calls fn at once and then on an interval while visible;
+//     no interval is left running while hidden
+//   * everything a page registered stops when the page is swapped out, and a
+//     page that registers after it was destroyed starts nothing
+//   * registrations never replace each other (two timers on one page, two
+//     pages, or a classic partial's own LEDVisibility key)
+//   * without LEDVisibility, the browser tab's visibility alone decides
+//
+// Needs jsdom but no server.
+const fs = require('fs');
+const path = require('path');
+const { pathToFileURL } = require('url');
+const { JSDOM, VirtualConsole } = require('jsdom');
+
+const JS = path.resolve(__dirname, '../../../web_interface/static/v3/js');
+const load = f => import(pathToFileURL(path.join(JS, f)).href);
+const tick = ms => new Promise(r => setTimeout(r, ms || 0));
+
+let pass = 0, fail = 0;
+const ok = (l, c, x) => c ? (pass++, console.log('  ok   ' + l))
+  : (fail++, console.log('  FAIL ' + l + (x !== undefined ? '  -> ' + JSON.stringify(x).slice(0, 300) : '')));
+
+(async () => {
+  const { createRegistry } = await load('core/registry.js');
+  const { createVisibility } = await load('core/visibility.js');
+
+  console.log('\n── Page visibility service (real DOM, real LEDVisibility) ──');
+  const errs = [];
+  const logged = [];
+  const vc = new VirtualConsole();
+  vc.on('jsdomError', e => errs.push(String(e.message || e).split('\n')[0]));
+  vc.on('error', (...a) => logged.push(a.join(' ')));
+  const dom = new JSDOM('<!doctype html><html><body><div id="display-content"></div><div id="logs-content"></div></body></html>',
+    { url: 'http://localhost/', virtualConsole: vc, runScripts: 'outside-only' });
+  const { window } = dom;
+  const doc = window.document;
+
+  // The browser tab's visibility, under the test's control.
+  let hidden = false;
+  Object.defineProperty(doc, 'hidden', { get: () => hidden, configurable: true });
+  function setHidden(value) {
+    hidden = value;
+    doc.dispatchEvent(new window.Event('visibilitychange'));
+  }
+  function setTab(tab) {
+    doc.dispatchEvent(new window.CustomEvent('ledmatrix:tab-changed', { detail: { tab } }));
+  }
+
+  // Intervals, counted: the point is that none is left running.
+  const intervals = new Map();
+  let nextInterval = 1;
+  window.setInterval = (fn, ms) => { const id = nextInterval++; intervals.set(id, { fn, ms }); return id; };
+  window.clearInterval = id => { intervals.delete(id); };
+  const fireIntervals = () => [...intervals.values()].forEach(i => i.fn());
+
+  // The real LEDVisibility (app-shell.js). Alpine is absent, so the active
+  // tab is the last ledmatrix:tab-changed. The SSE streams are not under
+  // test: they open stand-in EventSources.
+  window.getApp = () => null;
+  window.EventSource = class { addEventListener() {} removeEventListener() {} close() {} };
+  window.eval(fs.readFileSync(path.join(JS, 'app-shell.js'), 'utf8'));
+  ok('app-shell.js defines LEDVisibility', !!(window.LEDVisibility && window.LEDVisibility.onActive));
+
+  const visibility = createVisibility({ window });
+  const registry = createRegistry({
+    document: doc,
+    context: {},
+    mountContext: ctx => ({ visibility: visibility.forPage(ctx) }),
+  });
+
+  const log = [];
+  let polls = 0;
+  const handles = [];
+  registry.register('display', {
+    init(root, ctx) {
+      handles.push(ctx.visibility);
+      ctx.visibility.whileVisible(() => log.push('start'), () => log.push('stop'));
+      ctx.visibility.every(5000, () => { polls++; });
+    },
+  });
+  let otherRuns = 0;
+  registry.register('logs', {
+    init(root, ctx) { ctx.visibility.every(1000, () => { otherRuns++; }); },
+  });
+
+  const panel = doc.getElementById('display-content');
+  async function swap(html) {
+    panel.dispatchEvent(new window.CustomEvent('htmx:beforeSwap', { bubbles: true, detail: { target: panel, shouldSwap: true } }));
+    panel.innerHTML = html;
+    panel.dispatchEvent(new window.CustomEvent('htmx:afterSwap', { bubbles: true, detail: { target: panel } }));
+    await tick(10);
+  }
+
+  // A classic partial's own registration, keyed by its tab name: the
+  // service's registrations must not replace it, nor it them.
+  let classic = 0;
+  window.LEDVisibility.onActive('display', () => { classic++; }, () => {});
+
+  setTab('overview');
+  await registry.start();
+  await swap('<div data-page="display"></div>');
+
+  // ── mounted on another tab ──────────────────────────────────────────────
+  ok('mounted while another tab is active: nothing starts', log.length === 0 && polls === 0, [log, polls]);
+  ok('...and no interval runs', intervals.size === 0, intervals.size);
+  ok('isVisible() is false', handles[0].isVisible() === false);
+  ok('the page\'s tab is its name', handles[0].tab === 'display');
+
+  // ── its tab comes on screen ─────────────────────────────────────────────
+  setTab('display');
+  ok('switching to the tab runs start()', log.join() === 'start', log);
+  ok('every() calls fn at once', polls === 1, polls);
+  ok('...and sets one interval at the asked period', intervals.size === 1 && [...intervals.values()][0].ms === 5000,
+     [...intervals.values()].map(i => i.ms));
+  ok('isVisible() is true', handles[0].isVisible() === true);
+  ok('the classic registration still runs alongside', classic === 1, classic);
+  fireIntervals();
+  fireIntervals();
+  ok('fn runs on each interval', polls === 3, polls);
+
+  // ── the browser tab is hidden, then shown ───────────────────────────────
+  setHidden(true);
+  ok('hiding the browser tab runs stop()', log.join() === 'start,stop', log);
+  ok('...and clears the interval', intervals.size === 0, intervals.size);
+  ok('isVisible() is false while hidden', handles[0].isVisible() === false);
+  setHidden(false);
+  ok('showing it again runs start()', log.join() === 'start,stop,start', log);
+  ok('...and fn at once, with one interval again', polls === 4 && intervals.size === 1, [polls, intervals.size]);
+
+  // ── another tab ─────────────────────────────────────────────────────────
+  setTab('logs');
+  ok('switching away runs stop() and clears the interval', log.join() === 'start,stop,start,stop' && intervals.size === 0,
+     [log, intervals.size]);
+  setTab('display');
+  ok('switching back restarts it', log.length === 5 && polls === 5 && intervals.size === 1, [log, polls]);
+
+  // ── the partial is swapped out while on screen ──────────────────────────
+  await swap('<p>no page here</p>');
+  ok('a swap-out stops it', log[log.length - 1] === 'stop', log);
+  ok('...and leaves no interval running', intervals.size === 0, intervals.size);
+  const before = [log.length, polls];
+  setTab('overview');
+  setTab('display');
+  setHidden(true);
+  setHidden(false);
+  ok('a destroyed page never starts again', log.length === before[0] && polls === before[1], [log, polls]);
+  ok('the classic registration keeps running after the swap', classic === 5, classic);
+
+  // ── five swaps, then one page ───────────────────────────────────────────
+  for (let i = 0; i < 5; i++) await swap('<div data-page="display"></div>');
+  ok('after five swaps one interval runs, not five', intervals.size === 1, intervals.size);
+  const pollsBefore = polls;
+  fireIntervals();
+  ok('...and one poll per tick', polls === pollsBefore + 1, polls - pollsBefore);
+
+  // ── two timers on one page, and an end function ─────────────────────────
+  const h = handles[handles.length - 1];
+  let a = 0, b = 0;
+  const endA = h.every(100, () => { a++; });
+  h.every(200, () => { b++; });
+  ok('two more timers on one page both start', a === 1 && b === 1 && intervals.size === 3, [a, b, intervals.size]);
+  endA();
+  endA();
+  ok('an end function stops just its own timer (twice is harmless)', intervals.size === 2, intervals.size);
+
+  // ── a page that registers after it was destroyed ────────────────────────
+  const gone = handles[handles.length - 1];
+  await swap('<p>gone</p>');
+  ok('the swap-out clears every timer the page had', intervals.size === 0, intervals.size);
+  let late = 0;
+  const end = gone.every(1000, () => { late++; });
+  ok('registering after destroy starts nothing', late === 0 && intervals.size === 0 && typeof end === 'function');
+
+  // ── a start() that throws ───────────────────────────────────────────────
+  await swap('<div data-page="display"></div>');
+  const h2 = handles[handles.length - 1];
+  const loggedBefore = logged.length;
+  let afterThrow = 0;
+  h2.whileVisible(() => { throw new Error('boom'); }, () => {});
+  h2.whileVisible(() => { afterThrow++; }, () => {});
+  ok('a throwing start() is logged', logged.length === loggedBefore + 1 && /boom|start failed/.test(logged.join()),
+     logged.slice(loggedBefore));
+  ok('...and the next registration still starts', afterThrow === 1);
+  await swap('<p>gone</p>');
+
+  // ── without LEDVisibility (a page outside base.html) ────────────────────
+  const bare = createVisibility({ window, tracker: () => null }).forPage({ name: 'standalone', signal: new window.AbortController().signal });
+  const seen = [];
+  bare.whileVisible(() => seen.push('start'), () => seen.push('stop'));
+  ok('without LEDVisibility, a visible document starts at once', seen.join() === 'start', seen);
+  setHidden(true);
+  ok('...and hiding it stops', seen.join() === 'start,stop', seen);
+  ok('...isVisible() follows the document', bare.isVisible() === false);
+  setHidden(false);
+  ok('...and showing it starts again', seen.join() === 'start,stop,start', seen);
+
+  ok('registrations need functions', (() => { try { h2.whileVisible(null, null); return false; } catch { return true; } })());
+  ok('every() needs a positive period', (() => { try { h2.every(0, () => {}); return false; } catch { return true; } })());
+  ok('the logs page was never on screen: it never ran', otherRuns === 0, otherRuns);
+  ok('no DOM errors', errs.length === 0, errs);
+
+  console.log(`\n${pass} passed, ${fail} failed`);
+  process.exit(fail ? 1 : 0);
+})().catch(e => { console.error(e); process.exit(1); });
diff --git a/test/js/run_all.js b/test/js/run_all.js
index 09b6e9f7..f9e9218b 100755
--- a/test/js/run_all.js
+++ b/test/js/run_all.js
@@ -37,7 +37,8 @@ const DOM = ['dom/test_installed_dom.js', 'dom/test_store_dom.js', 'dom/test_no_
              'dom/test_tools_sections.js', 'dom/test_cache_page.js',
              'dom/test_durations_page.js', 'dom/test_operation_history_page.js',
              'dom/test_raw_json_page.js', 'dom/test_backup_restore_page.js',
-             'dom/test_schedule_page.js', 'dom/test_general_page.js'];
+             'dom/test_schedule_page.js', 'dom/test_general_page.js',
+             'dom/test_visibility_service.js', 'dom/test_display_page.js'];
 
 function reachable(url) {
   return new Promise(res => {
diff --git a/test/js/unit/test_display_partial_ids.js b/test/js/unit/test_display_partial_ids.js
index 6012c5c0..0525b616 100644
--- a/test/js/unit/test_display_partial_ids.js
+++ b/test/js/unit/test_display_partial_ids.js
@@ -1,21 +1,22 @@
-// The Display tab's inline script must only look up elements the partial
+// The Display tab's page module must only look up elements the partial
 // renders.
 //
-// Its brightness slider handler also wrote to #brightness-display, a "LED
-// brightness: N%" line that #387 removed from partials/display.html. The
+// Its brightness slider handler once also wrote to #brightness-display, a
+// "LED brightness: N%" line that #387 removed from partials/display.html. The
 // lookup returned null, so every movement of the slider threw a TypeError.
-// This checks every literal getElementById() in the partial's inline scripts
-// against the ids its markup renders, and runs the shipped script in a vm
-// with a fake DOM (null for an id the markup lacks, as in a browser) to move
-// the slider.
+// This imports the shipped module (static/v3/js/pages/display.js), starts it
+// on a fake root that answers only for the ids the partial's markup renders
+// (null for any other, as in a browser), fires every listener it registered,
+// and checks that every id it asked for exists. Then it moves the slider.
 //
 // No jsdom and no server needed.
 
 const fs = require('fs');
 const path = require('path');
-const vm = require('vm');
+const { pathToFileURL } = require('url');
 
 const PARTIAL = path.resolve(__dirname, '../../../web_interface/templates/v3/partials/display.html');
+const JS = path.resolve(__dirname, '../../../web_interface/static/v3/js');
 
 let pass = 0, fail = 0;
 const ok = (label, cond, extra) => cond
@@ -23,86 +24,93 @@ const ok = (label, cond, extra) => cond
   : (fail++, console.log('  FAIL ' + label + (extra !== undefined ? '  ' + JSON.stringify(extra) : '')));
 
 const html = fs.readFileSync(PARTIAL, 'utf8');
-const blocks = [...html.matchAll(/<script\b[^>]*>([\s\S]*?)<\/script[^>]*>/gi)];
-const scripts = blocks.map(m => m[1]);
-// The markup is what lies between the script blocks (sliced around them, not
-// a replace(), which CodeQL reads as an incomplete HTML sanitizer).
-let markup = '';
-let from = 0;
-for (const m of blocks) {
-  markup += html.slice(from, m.index);
-  from = m.index + m[0].length;
-}
-markup += html.slice(from);
-const rendered = new Set([...markup.matchAll(/\bid="([^"{}]+)"/g)].map(m => m[1]));
+const rendered = new Set([...html.matchAll(/\bid="([^"{}]+)"/g)].map(m => m[1]));
 
-console.log('\n── Display partial: element lookups ──');
-
-// 1. Static: every literal lookup names an id the partial renders.
-const lookups = scripts.flatMap(s => [...s.matchAll(/getElementById\('([^']+)'\)/g)].map(m => m[1]));
-const missing = [...new Set(lookups.filter(id => !rendered.has(id)))];
-ok('the inline scripts look elements up', lookups.length > 0, lookups.length);
-ok('every looked-up id is rendered by the partial', missing.length === 0, missing);
-
-// 2. Behaviour: moving the brightness slider updates its label and throws nothing.
 function fakeElement(id) {
   const listeners = {};
   const classes = new Set();
   return {
-    id, value: '', textContent: '', min: '', max: '', checked: false,
+    id, value: '1', textContent: '', min: '', max: '', checked: false,
     style: {}, dataset: {}, className: '',
     classList: {
       add: c => classes.add(c), remove: c => classes.delete(c),
-      toggle: (c, on) => (on === undefined ? (classes.has(c) ? classes.delete(c) : classes.add(c)) : (on ? classes.add(c) : classes.delete(c))),
       contains: c => classes.has(c),
     },
     addEventListener: (type, fn) => { (listeners[type] ||= []).push(fn); },
     dispatchEvent() { return true; },
     appendChild() {},
+    getAttribute: () => null,
     listeners,
   };
 }
 
-const main = scripts.find(s => s.includes("getElementById('brightness')"));
-ok('found the script that wires the brightness slider', !!main);
-if (main) {
-  const elements = new Map();
-  const document = {
-    readyState: 'complete',
-    hidden: false,
-    getElementById: id => {
-      if (!rendered.has(id)) return null;
-      if (!elements.has(id)) elements.set(id, fakeElement(id));
-      return elements.get(id);
-    },
-    createElement: () => fakeElement(''),
-    createTextNode: () => ({}),
-    addEventListener() {},
-  };
-  const window = {
-    LEDEscape: { html: v => String(v), attr: v => String(v) },
-    LEDVisibility: { onActive() {} },
-  };
-  const context = {
-    window, document, console, URLSearchParams,
-    fetch: () => new Promise(() => {}),
-    setTimeout: () => 0, clearTimeout() {}, setInterval: () => 0, clearInterval() {},
-  };
-  vm.createContext(context);
-  let loadError = null;
-  try { vm.runInContext(main, context); } catch (e) { loadError = e; }
-  ok('the script loads', !loadError, loadError && String(loadError));
+(async () => {
+  console.log('\n── Display page module: element lookups ──');
+  const display = await import(pathToFileURL(path.join(JS, 'pages/display.js')).href);
 
-  const slider = elements.get('brightness');
-  const handlers = (slider && slider.listeners.input) || [];
-  ok('the slider has an input handler', handlers.length > 0);
+  const asked = new Set();
+  const elements = new Map();
+  const timers = [];
+  const win = {
+    setTimeout: fn => { timers.push(fn); return timers.length; },
+    clearTimeout() {},
+    URLSearchParams,
+    Event: class { constructor(type) { this.type = type; } },
+    PluginOrderList: { init() {} },
+  };
+  const doc = { defaultView: win, createElement: () => fakeElement(''), createTextNode: () => ({}) };
+  const rootListeners = {};
+  const root = {
+    ownerDocument: doc,
+    querySelector(sel) {
+      const m = /^#([\w-]+)$/.exec(sel);
+      if (!m) throw new Error('unexpected selector ' + sel);
+      asked.add(m[1]);
+      if (!rendered.has(m[1])) return null;
+      if (!elements.has(m[1])) elements.set(m[1], fakeElement(m[1]));
+      return elements.get(m[1]);
+    },
+    addEventListener: (type, fn) => { (rootListeners[type] ||= []).push(fn); },
+    contains: () => true,
+  };
+  const never = () => new Promise(() => {});
+  const polls = [];
+  const ctx = {
+    root, name: 'display', state: {}, signal: { aborted: false },
+    api: { get: never },
+    visibility: { every: (ms, fn) => { polls.push(ms); fn(); return () => {}; } },
+  };
+
+  let loadError = null;
+  try { display.init(root, ctx); } catch (e) { loadError = e; }
+  ok('init() runs', !loadError, loadError && String(loadError));
+  ok('the sync status is polled through ctx.visibility', polls.length === 1 && polls[0] === 5000, polls);
+
+  // Fire everything it wired, so every lookup it can make is made.
   let thrown = null;
+  try {
+    for (const el of elements.values()) {
+      for (const fns of Object.values(el.listeners)) fns.forEach(fn => fn.call(el, { target: el }));
+    }
+    while (timers.length) timers.shift()();
+  } catch (e) { thrown = e; }
+  ok('its listeners and timers run without throwing', !thrown, thrown && String(thrown));
+
+  const missing = [...asked].filter(id => !rendered.has(id));
+  ok('it looks elements up', asked.size > 10, asked.size);
+  ok('every looked-up id is rendered by the partial', missing.length === 0, missing);
+
+  const slider = elements.get('brightness') || fakeElement('brightness');
+  const handlers = slider.listeners.input || [];
+  ok('the slider has an input handler', handlers.length > 0);
   slider.value = '42';
+  thrown = null;
   try { handlers.forEach(fn => fn.call(slider, { target: slider })); } catch (e) { thrown = e; }
   ok('moving the slider throws nothing', !thrown, thrown && String(thrown));
-  ok('...and shows the new value', elements.get('brightness-value').textContent === '42',
-     elements.get('brightness-value').textContent);
-}
+  const label = elements.get('brightness-value');
+  ok('...and shows the new value', !!label && label.textContent === '42', label && label.textContent);
 
-console.log(`\n${pass} passed, ${fail} failed\n`);
-process.exit(fail ? 1 : 0);
+  display.destroy(root, ctx);
+  console.log(`\n${pass} passed, ${fail} failed\n`);
+  process.exit(fail ? 1 : 0);
+})().catch(e => { console.error(e); process.exit(1); });
diff --git a/test/js/unit/test_html_escaping.js b/test/js/unit/test_html_escaping.js
index 917a2fa3..cedc73ea 100644
--- a/test/js/unit/test_html_escaping.js
+++ b/test/js/unit/test_html_escaping.js
@@ -103,17 +103,16 @@ const ESCAPERS = [
    'static/v3/js/widgets/text-input.js', 'function escapeHtml(text) {', 'escapeHtml', false],
   ['slider.js (escapeAttr)',
    'static/v3/js/widgets/slider.js', 'function escapeAttr(text) {', 'escapeAttr', false],
-  ['display.html (escapeAttr)',
-   'templates/v3/partials/display.html', 'function escapeAttr(text) {', 'escapeAttr', false],
   ['tools.html (escHtml)',
    'templates/v3/partials/tools.html', 'function escHtml(s) {', 'escHtml', false],
   ['tools.html (phEscape)',
    'templates/v3/partials/tools.html', 'function phEscape(s) {', 'phEscape', false],
   ['logs.html (escapeHtml)',
    'templates/v3/partials/logs.html', 'function escapeHtml(text) {', 'escapeHtml', false],
-  // cache.html, backup_restore.html and operation_history.html have no
-  // script any more: their js/pages/ modules draw server data with
-  // textContent, and each page's suite in test/js/dom/ checks a hostile value.
+  // cache.html, backup_restore.html, operation_history.html and display.html
+  // have no script any more (display.html's two escapers were never called):
+  // their js/pages/ modules draw server data with textContent, and each
+  // page's suite in test/js/dom/ checks a hostile value.
 ];
 
 // The breakout payload: closes a double-quoted attribute and opens an event
diff --git a/test/js/unit/test_page_registry.js b/test/js/unit/test_page_registry.js
index 2eb967d5..7dd427d5 100644
--- a/test/js/unit/test_page_registry.js
+++ b/test/js/unit/test_page_registry.js
@@ -242,6 +242,46 @@ function recorder(log) {
     ok('has()', reg.has('dup') && !reg.has('nope'));
   }
 
+  console.log('\n10. mountContext adds per-mount fields, after the shared ones');
+  {
+    const doc = new Doc();
+    const panel = doc.body.appendChild(new El('div', { id: 'panel' }));
+    panel.appendChild(new El('div', { id: 'a', [PAGE_ATTRIBUTE]: 'demo' }));
+    const seen = [];
+    const made = [];
+    const reg = createRegistry({
+      document: doc, context: { api: 'shared' }, logger: quiet,
+      mountContext(ctx) {
+        made.push([ctx.name, ctx.root.getAttribute('id'), !!ctx.signal, ctx.api]);
+        return { bound: { root: ctx.root, signal: ctx.signal } };
+      },
+    });
+    reg.register('demo', { init(root, ctx) { seen.push(ctx); } });
+    await reg.start();
+    await tick();
+    ok('mountContext sees the mount\'s name, root, signal and the shared services',
+       made.length === 1 && made[0].join() === 'demo,a,true,shared', made);
+    ok('...and its fields reach init()', seen.length === 1 && seen[0].bound && seen[0].bound.root === seen[0].root, seen.length);
+    fire(panel, 'htmx:beforeSwap', { target: panel, shouldSwap: true });
+    panel.replaceChildren(new El('div', { id: 'b', [PAGE_ATTRIBUTE]: 'demo' }));
+    fire(panel, 'htmx:afterSwap', { target: panel });
+    await tick();
+    ok('called again for each new mount, with that mount\'s signal',
+       made.length === 2 && seen.length === 2 && !!seen[1].bound && seen[1].bound.signal === seen[1].signal
+         && seen[0].signal.aborted, made);
+
+    const errors = [];
+    const doc2 = new Doc();
+    doc2.body.appendChild(new El('div', { id: 'c', [PAGE_ATTRIBUTE]: 'demo' }));
+    const reg2 = createRegistry({ document: doc2, logger: { error: (...a) => errors.push(a.join(' ')) },
+                                  mountContext() { throw new Error('boom'); } });
+    let started = 0;
+    reg2.register('demo', { init() { started++; } });
+    await reg2.start();
+    await tick();
+    ok('a throwing mountContext is logged and the page still starts', started === 1 && errors.length === 1, errors);
+  }
+
   console.log(`\n${pass} passed, ${fail} failed`);
   process.exit(fail ? 1 : 0);
 })().catch(e => { console.error(e); process.exit(1); });
diff --git a/test/web_interface/test_es_modules.py b/test/web_interface/test_es_modules.py
index ec05dcb1..e5c19c7c 100644
--- a/test/web_interface/test_es_modules.py
+++ b/test/web_interface/test_es_modules.py
@@ -43,7 +43,8 @@ def _url(path):
 def test_the_module_directories_hold_modules():
     assert {p.name for p in MODULES} >= {"boot.js", "registry.js", "api.js", "facade.js", "cache.js",
                                          "durations.js", "operation-history.js", "raw-json.js",
-                                         "backup-restore.js", "schedule.js", "general.js"}
+                                         "backup-restore.js", "schedule.js", "general.js",
+                                         "visibility.js", "display.js"}
     for directory in MODULE_DIRS:
         # node needs this to import them in the JS tests; browsers ignore it.
         assert '"type": "module"' in (directory / "package.json").read_text(encoding="utf-8")
@@ -106,6 +107,7 @@ CONVERTED = {
     "backup-restore": ("backup_restore.html", "/partials/backup-restore"),
     "schedule": ("schedule.html", "/partials/schedule"),
     "general": ("general.html", "/partials/general"),
+    "display": ("display.html", "/partials/display"),
 }
 
 # Old window.* names that moved into a page module. Each stays as a
@@ -118,6 +120,7 @@ ALIASES = {
                        "clearRestore", "runRestore"],
     "schedule": ["handleScheduleResponse", "handleDimScheduleResponse"],
     "general": ["webLogin"],
+    "display": ["updateSyncUI"],
 }
 
 
diff --git a/web_interface/static/v3/js/core/boot.js b/web_interface/static/v3/js/core/boot.js
index 12beb366..06a4f493 100644
--- a/web_interface/static/v3/js/core/boot.js
+++ b/web_interface/static/v3/js/core/boot.js
@@ -11,13 +11,17 @@
 import { createApi } from './api.js';
 import { createFacade, installFacade } from './facade.js';
 import { createRegistry } from './registry.js';
+import { createVisibility } from './visibility.js';
 
 const api = createApi();
+const visibility = createVisibility({ window: window });
 const registry = createRegistry({
     context: {
         api: api,
         notify: function(message, type) { return window.LEDMatrix.notify(message, type); },
     },
+    // Bound to one mounted page: its timers stop when it is destroyed.
+    mountContext: function(ctx) { return { visibility: visibility.forPage(ctx) }; },
 });
 const facade = installFacade(window, createFacade(window, api, registry));
 
@@ -45,6 +49,7 @@ const pages = {
     'backup-restore': page(function() { return import('../pages/backup-restore.js'); }),
     'schedule': page(function() { return import('../pages/schedule.js'); }),
     'general': page(function() { return import('../pages/general.js'); }),
+    'display': page(function() { return import('../pages/display.js'); }),
 };
 Object.keys(pages).forEach(function(name) { registry.register(name, pages[name]); });
 
@@ -85,5 +90,6 @@ alias('cache', 'deleteCacheFile', "the Cache tab's Delete buttons");
 });
 aliasObject('general', 'webLogin', ['setPassword', 'disable', 'createToken', 'copyToken', 'revoke'],
             "the General tab's Security buttons");
+alias('display', 'updateSyncUI', "the Display tab's Role menu");
 
 registry.start();
diff --git a/web_interface/static/v3/js/core/registry.js b/web_interface/static/v3/js/core/registry.js
index 0c86646f..53fc67df 100644
--- a/web_interface/static/v3/js/core/registry.js
+++ b/web_interface/static/v3/js/core/registry.js
@@ -8,7 +8,9 @@
  *   destroy(root, ctx)   optional; undo anything `ctx.signal` does not.
  *
  * ctx is a per-mount object holding the shared services passed to
- * createRegistry({ context }) (boot.js passes `api` and `notify`) plus:
+ * createRegistry({ context }) (boot.js passes `api` and `notify`), the fields
+ * returned by createRegistry({ mountContext }) for this mount (boot.js adds
+ * `visibility`, core/visibility.js), plus:
  *   ctx.root     the data-page element
  *   ctx.name     the page name
  *   ctx.signal   an AbortSignal aborted on destroy. Pass it to
@@ -42,12 +44,16 @@ export const PAGE_ATTRIBUTE = 'data-page';
  * @param {object} [options]
  * @param {Document} [options.document]  the document to wire (default: globalThis.document)
  * @param {object} [options.context]     services copied onto every page's ctx
+ * @param {Function} [options.mountContext]  (ctx) => fields added to that mount's ctx;
+ *                                       for services bound to one page (they see
+ *                                       ctx.root, ctx.name and ctx.signal)
  * @param {{error: Function}} [options.logger]
  */
 export function createRegistry(options = {}) {
     const doc = options.document || globalThis.document;
     const logger = options.logger || console;
     const services = options.context || {};
+    const mountContext = options.mountContext || null;
     // The document's own AbortController: an element only accepts a signal
     // from its own realm (it matters for jsdom in the tests, not in a browser).
     const Controller = (doc && doc.defaultView && doc.defaultView.AbortController) || globalThis.AbortController;
@@ -105,6 +111,13 @@ export function createRegistry(options = {}) {
         const controller = new Controller();
         const ctx = Object.assign({}, services,
                                   { root: root, name: name, signal: controller.signal, state: {} });
+        if (mountContext) {
+            try {
+                Object.assign(ctx, mountContext(ctx));
+            } catch (error) {
+                logger.error('[LEDMatrix.pages] ' + name + ': mountContext failed:', error);
+            }
+        }
         const entry = { name: name, root: root, ctx: ctx, controller: controller,
                         module: null, initialised: false, destroyed: false, ready: null };
         mounted.set(root, entry);
diff --git a/web_interface/static/v3/js/core/visibility.js b/web_interface/static/v3/js/core/visibility.js
new file mode 100644
index 00000000..3c2fab3c
--- /dev/null
+++ b/web_interface/static/v3/js/core/visibility.js
@@ -0,0 +1,144 @@
+/*
+ * core/visibility.js -- run a page's timers and polling only while the page
+ * is on screen: its tab is the active tab AND the browser tab is visible.
+ *
+ * Each mounted page gets its own handle as ctx.visibility (the registry asks
+ * boot.js for it on every mount; see createRegistry's `mountContext`):
+ *
+ *   ctx.visibility.whileVisible(start, stop)
+ *       start() runs when the page comes on screen, stop() when it leaves.
+ *       start() should refresh at once: it also runs when the page mounts
+ *       already on screen. Returns a function that ends the registration
+ *       (running stop() first if it is running).
+ *   ctx.visibility.every(ms, fn)
+ *       fn() at once and then every `ms` while on screen; the interval is
+ *       cleared while hidden and restarted (with an immediate fn()) when the
+ *       page is back. Returns the same kind of end function.
+ *   ctx.visibility.isVisible()
+ *       true while the page is on screen.
+ *
+ * Everything a page registered ends when the page is destroyed (its
+ * ctx.signal aborts, after destroy()), so a page needs no teardown for it:
+ * a swapped-out partial leaves no interval behind.
+ *
+ * Which tab: the page's name (ctx.name), or forPage(ctx, { tab }) when a
+ * page's tab is named differently.
+ *
+ * Where the answer comes from: window.LEDVisibility (app-shell.js), read at
+ * call time. It owns the one notion of "active tab" (Alpine's activeTab plus
+ * the ledmatrix:tab-changed event) and already pauses the SSE streams, so
+ * the classic partials that still call it and the page modules agree. Each
+ * registration here takes its own LEDVisibility key, so two pages (or two
+ * timers on one page) never replace each other. Without LEDVisibility (a
+ * page outside base.html) the browser tab's visibility alone decides.
+ *
+ * No DOM globals are read at import time, so node tests can import this file
+ * and hand createVisibility() a jsdom window.
+ */
+
+/**
+ * @param {object} [options]
+ * @param {Window} [options.window]   default: globalThis
+ * @param {Function} [options.tracker]  () => an LEDVisibility-shaped object or null
+ *                                    (default: window.LEDVisibility at call time)
+ * @param {{error: Function}} [options.logger]
+ */
+export function createVisibility(options = {}) {
+    const win = options.window || globalThis;
+    const doc = win.document;
+    const logger = options.logger || win.console || console;
+    const tracker = options.tracker || function() { return win.LEDVisibility || null; };
+    let sequence = 0;
+
+    function call(fn, label) {
+        try {
+            fn();
+        } catch (error) {
+            logger.error('[LEDMatrix.visibility] ' + label + ' failed:', error);
+        }
+    }
+
+    /**
+     * Without a tracker: follow document.hidden only. Same contract as
+     * LEDVisibility.onActive: start/stop on change, returns an unregister fn.
+     */
+    function onDocumentVisible(start, stop) {
+        let running = false;
+        function evaluate() {
+            const want = !doc.hidden;
+            if (want === running) return;
+            running = want;
+            call(want ? start : stop, want ? 'start' : 'stop');
+        }
+        doc.addEventListener('visibilitychange', evaluate);
+        evaluate();
+        return function() {
+            doc.removeEventListener('visibilitychange', evaluate);
+            if (running) { running = false; call(stop, 'stop'); }
+        };
+    }
+
+    /**
+     * The handle for one mounted page. Everything it registers ends when
+     * ctx.signal aborts.
+     */
+    function forPage(ctx, pageOptions = {}) {
+        const tab = pageOptions.tab || ctx.name;
+        const signal = ctx.signal;
+        const live = new Set();
+
+        function whileVisible(start, stop) {
+            if (typeof start !== 'function' || typeof stop !== 'function') {
+                throw new TypeError('visibility.whileVisible(start, stop) needs two functions');
+            }
+            if (signal && signal.aborted) return function() {};
+            const t = tracker();
+            const key = 'page:' + ctx.name + ':' + (++sequence);
+            const unregister = t
+                ? t.onActive(tab, start, stop, key)
+                : onDocumentVisible(start, stop);
+            let ended = false;
+            const end = function() {
+                if (ended) return;
+                ended = true;
+                live.delete(end);
+                if (typeof unregister === 'function') call(unregister, key + ' stop');
+            };
+            live.add(end);
+            return end;
+        }
+
+        function every(ms, fn) {
+            if (!(ms > 0) || typeof fn !== 'function') {
+                throw new TypeError('visibility.every(ms, fn) needs a positive interval and a function');
+            }
+            let timer = null;
+            function stop() {
+                if (timer !== null) {
+                    win.clearInterval(timer);
+                    timer = null;
+                }
+            }
+            return whileVisible(function() {
+                stop();
+                timer = win.setInterval(function() { call(fn, 'every(' + ms + ')'); }, ms);
+                fn();
+            }, stop);
+        }
+
+        function isVisible() {
+            const t = tracker();
+            return t ? t.isActive(tab) : !doc.hidden;
+        }
+
+        if (signal) {
+            signal.addEventListener('abort', function() {
+                Array.from(live).forEach(function(end) { end(); });
+            }, { once: true });
+        }
+
+        return Object.freeze({ tab: tab, whileVisible: whileVisible, every: every, isVisible: isVisible });
+    }
+
+    return { forPage: forPage };
+}
diff --git a/web_interface/static/v3/js/pages/display.js b/web_interface/static/v3/js/pages/display.js
new file mode 100644
index 00000000..646841b1
--- /dev/null
+++ b/web_interface/static/v3/js/pages/display.js
@@ -0,0 +1,324 @@
+/*
+ * pages/display.js -- the Display tab (templates/v3/partials/display.html):
+ * the panel hardware, Vegas scroll mode, double-sided and multi-display
+ * sync settings.
+ *
+ * The form itself stays plain htmx (hx-post with json-enc, and its hx-on
+ * call to the shared showSaveResult, as the Rotation and General forms
+ * keep). This module does what the partial's inline scripts did:
+ *   - the brightness value next to its slider
+ *   - the live "Your display: W x H pixels" readout
+ *   - showing the Vegas and double-sided settings only while each is on
+ *   - the scroll-speed hint (what the panel really does with a speed), asked
+ *     of the server 150 ms after the slider stops; a newer answer wins
+ *   - the Vegas plugin order (the shared plugin-order-list widget, as the
+ *     Rotation tab uses; its plugin-list request carries ctx.signal)
+ *   - the Advanced section's toggle button (data-action="toggle-section",
+ *     calling the shared window.toggleSection the settings search also uses)
+ *   - the multi-display sync role, and its status, polled every 5 s through
+ *     ctx.visibility: only while the Display tab is on screen and the
+ *     browser tab is visible, and never after the partial is swapped out
+ *
+ * The old global updateSyncUI is a deprecated alias made in core/boot.js; it
+ * forwards to the export of the same name at the bottom of this file.
+ */
+
+const SYNC_POLL_MS = 5000;
+const HINT_DELAY_MS = 150;
+const RETRY_MS = 100;
+const MAX_TRIES = 50;
+const RESOLUTION_INPUTS = ['rows', 'cols', 'chain_length', 'parallel'];
+
+// The mounted page, for the deprecated alias (boot.js).
+let active = null;
+
+function quiet(error) {
+    return !!error && (error.name === 'AbortError' || error.loginRequired);
+}
+
+// ── the "Your display" readout ───────────────────────────────────────────────
+// width = cols x chain_length, height = rows x parallel (the chain-length
+// tooltip's math), swapped for a 90/270 orientation. A custom pixel mapper
+// can change it further; src/display_geometry.py models those.
+function showResolution(root) {
+    const out = root.querySelector('#display-resolution-value');
+    if (!out) return;
+    const read = function(id) {
+        const el = root.querySelector('#' + id);
+        return el ? parseInt(el.value, 10) : NaN;
+    };
+    const rows = read('rows');
+    const cols = read('cols');
+    const chain = read('chain_length');
+    const parallel = read('parallel');
+    if ([rows, cols, chain, parallel].some(function(n) { return !Number.isFinite(n) || n <= 0; })) {
+        out.textContent = '—';
+        return;
+    }
+    let w = cols * chain;
+    let h = rows * parallel;
+    const orientation = root.querySelector('#orientation');
+    if (orientation && (orientation.value === '90' || orientation.value === '270')) {
+        [w, h] = [h, w];
+    }
+    out.textContent = w + ' × ' + h + ' pixels';
+}
+
+// ── the scroll-speed hint ────────────────────────────────────────────────────
+// Only speeds that advance a whole number of pixels per refresh look smooth,
+// and which those are depends on the panel, so the server works it out.
+function refreshScrollSpeedHint(root, ctx) {
+    const win = root.ownerDocument.defaultView;
+    const slider = root.querySelector('#vegas_scroll_speed');
+    win.clearTimeout(ctx.state.hintTimer);
+    ctx.state.hintTimer = win.setTimeout(function() {
+        ctx.state.hintTimer = null;
+        const hint = root.querySelector('#vegas_scroll_speed_hint');
+        if (!hint || !slider || ctx.signal.aborted) return;
+        ctx.state.hintSeq = (ctx.state.hintSeq || 0) + 1;
+        const seq = ctx.state.hintSeq;
+        const q = new win.URLSearchParams({ speed: slider.value, min: slider.min, max: slider.max });
+        ctx.api.get('/api/v3/config/scroll-speed-advice?' + q, { signal: ctx.signal })
+            .then(function(body) {
+                if (seq !== ctx.state.hintSeq || body.status !== 'success') return;
+                renderScrollSpeedHint(root, hint, slider, body.data);
+            })
+            .catch(function(error) {
+                // A refused request keeps the last hint, as before; a failed
+                // or unreadable one clears it.
+                if (quiet(error) || error.body) return;
+                hint.textContent = '';
+            });
+    }, HINT_DELAY_MS);
+}
+
+function renderScrollSpeedHint(root, hint, slider, a) {
+    const doc = root.ownerDocument;
+    const win = doc.defaultView;
+    const ap = a.applied;
+    const motion = ap.pixels_per_frame + ' px every ' + ap.frame_hold +
+        ' refresh' + (ap.frame_hold === 1 ? '' : 'es');
+    hint.textContent = '';
+    hint.className = 'mt-1 text-xs ' + (a.smooth && a.exact ? 'text-green-700' : 'text-amber-700');
+    const line = doc.createElement('span');
+    if (a.smooth && a.exact) {
+        line.textContent = 'Smooth on this panel (' + motion + ', ' + a.refresh_hz + ' Hz).';
+    } else {
+        line.textContent = a.requested + ' px/s will run as ' + ap.pixels_per_second +
+            ' px/s (' + motion + ', ' + ap.steppiness + ') on this ' + a.refresh_hz +
+            ' Hz panel.' + (a.alternatives.length ? ' Smooth speeds: ' : '');
+    }
+    hint.appendChild(line);
+    a.alternatives.forEach(function(alt, i) {
+        if (i > 0) hint.appendChild(doc.createTextNode(' '));
+        const value = Math.round(alt.pixels_per_second);
+        const btn = doc.createElement('button');
+        btn.type = 'button';
+        btn.className = 'underline font-medium';
+        btn.textContent = value + ' px/s';
+        btn.addEventListener('click', function() {
+            slider.value = value;
+            slider.dispatchEvent(new win.Event('input', { bubbles: true }));
+        });
+        hint.appendChild(btn);
+    });
+}
+
+// ── the Vegas plugin order ───────────────────────────────────────────────────
+// The widget is a classic deferred script and normally loads before this
+// module runs; the short retry covers a page that arrives first anyway.
+function startPluginOrder(root, ctx) {
+    const container = root.querySelector('#vegas_plugin_order');
+    if (!container) return;
+    const win = root.ownerDocument.defaultView;
+    let tries = 0;
+    function attempt() {
+        ctx.state.orderTimer = null;
+        if (ctx.signal.aborted) return;
+        const widget = win.PluginOrderList;
+        if (!widget) {
+            if (++tries < MAX_TRIES) {
+                ctx.state.orderTimer = win.setTimeout(attempt, RETRY_MS);
+            } else {
+                container.textContent = 'Could not load the reorder widget — reload the page to try again.';
+                container.className = 'text-sm text-red-500';
+            }
+            return;
+        }
+        widget.init({
+            containerId: 'vegas_plugin_order',
+            orderInputId: 'vegas_plugin_order_value',
+            excludedInputId: 'vegas_excluded_plugins_value',
+            showVegasModeBadge: true,
+            signal: ctx.signal,
+        });
+    }
+    attempt();
+}
+
+// ── multi-display sync ───────────────────────────────────────────────────────
+function syncRole(root) {
+    const select = root.querySelector('#sync_role');
+    return select ? select.value : null;
+}
+
+/** Show the status bar and the follower's Position field for the chosen role. */
+function showSyncRole(root) {
+    const role = syncRole(root);
+    const bar = root.querySelector('#sync_status_bar');
+    const position = root.querySelector('#setting-display-sync_follower_position');
+    const errorDetail = root.querySelector('#sync_error_detail');
+    if (!bar || !position) return role;
+    if (role === 'standalone') {
+        bar.classList.add('hidden');
+        if (errorDetail) errorDetail.classList.add('hidden');
+        position.style.display = 'none';
+    } else {
+        bar.classList.remove('hidden');
+        position.style.display = role === 'follower' ? '' : 'none';
+    }
+    return role;
+}
+
+function pollSyncStatus(root, ctx) {
+    const role = syncRole(root);
+    if (!role || role === 'standalone' || ctx.signal.aborted) return;
+    ctx.api.get('/api/v3/sync/status', { signal: ctx.signal })
+        .then(function(body) { renderSyncStatus(root, body.data || {}); })
+        .catch(function(error) {
+            if (!quiet(error)) renderSyncStatus(root, { state: 'unknown' });
+        });
+}
+
+function renderSyncStatus(root, d) {
+    const doc = root.ownerDocument;
+    const content = root.querySelector('#sync_status_content');
+    const errorDetail = root.querySelector('#sync_error_detail');
+    const errorText = root.querySelector('#sync_error_text');
+    if (!content) return;
+
+    const state = d.state || 'unknown';
+    const role = d.role || 'unknown';
+    let icon, colorClass, text;
+
+    if (state === 'connected' || state === 'follower') {
+        icon = '●';
+        colorClass = 'bg-green-50 border-green-200 text-green-800';
+        const peer = d.peer_ip || d.leader_ip || 'peer';
+        text = role === 'leader'
+            ? 'Follower connected — ' + peer + ' (chain ' + (d.peer_chain || '?') + ')'
+            : 'Receiving from leader — ' + peer;
+        errorDetail.classList.add('hidden');
+    } else if (state === 'incompatible') {
+        icon = '⚠';
+        colorClass = 'bg-yellow-50 border-yellow-200 text-yellow-800';
+        text = 'Follower connected but incompatible panels';
+        if (d.error) {
+            errorText.textContent = d.error;
+            errorDetail.classList.remove('hidden');
+        }
+    } else if (state === 'no_peer' || state === 'standalone') {
+        icon = '○';
+        colorClass = 'bg-gray-50 border-gray-200 text-gray-600';
+        text = role === 'leader' ? 'No follower detected' : 'Searching for leader…';
+        errorDetail.classList.add('hidden');
+    } else if (state === 'starting') {
+        icon = '○';
+        colorClass = 'bg-gray-50 border-gray-200 text-gray-500';
+        text = 'Display process starting…';
+        errorDetail.classList.add('hidden');
+    } else {
+        icon = '✕';
+        colorClass = 'bg-red-50 border-red-200 text-red-700';
+        text = 'Sync status unavailable';
+        errorDetail.classList.add('hidden');
+    }
+
+    content.className = 'flex items-start space-x-2 p-3 rounded-lg border text-sm ' + colorClass;
+    content.textContent = '';
+    const iconSpan = doc.createElement('span');
+    iconSpan.className = 'font-bold text-lg leading-none';
+    iconSpan.textContent = icon;
+    const textSpan = doc.createElement('span');
+    textSpan.textContent = text;
+    content.appendChild(iconSpan);
+    content.appendChild(textSpan);
+}
+
+/** The Role menu changed: show what goes with the new role, and ask for its status now. */
+function changeSyncRole(root, ctx) {
+    if (showSyncRole(root) !== 'standalone') pollSyncStatus(root, ctx);
+}
+
+// ── lifecycle ────────────────────────────────────────────────────────────────
+export function init(root, ctx) {
+    const win = root.ownerDocument.defaultView;
+    const on = { signal: ctx.signal };
+    const $ = function(id) { return root.querySelector('#' + id); };
+
+    const brightness = $('brightness');
+    const brightnessValue = $('brightness-value');
+    if (brightness && brightnessValue) {
+        brightness.addEventListener('input', function() { brightnessValue.textContent = brightness.value; }, on);
+    }
+
+    RESOLUTION_INPUTS.forEach(function(id) {
+        const el = $(id);
+        if (el) el.addEventListener('input', function() { showResolution(root); }, on);
+    });
+    const orientation = $('orientation');
+    if (orientation) orientation.addEventListener('change', function() { showResolution(root); }, on);
+    showResolution(root);
+
+    // Hidden rather than disabled, so the fields keep submitting and the
+    // server still sees an "off" state to persist.
+    [['vegas_scroll_enabled', 'vegas_scroll_settings', 'block'],
+     ['double_sided_enabled', 'double_sided_settings', 'grid']].forEach(function(spec) {
+        const box = $(spec[0]);
+        const settings = $(spec[1]);
+        if (!box || !settings) return;
+        box.addEventListener('change', function() { settings.style.display = box.checked ? spec[2] : 'none'; }, on);
+    });
+
+    const speed = $('vegas_scroll_speed');
+    const speedValue = $('vegas_scroll_speed_value');
+    if (speed && speedValue) {
+        speed.addEventListener('input', function() {
+            speedValue.textContent = speed.value;
+            refreshScrollSpeedHint(root, ctx);
+        }, on);
+        refreshScrollSpeedHint(root, ctx);
+    }
+
+    root.addEventListener('click', function(event) {
+        const button = event.target && event.target.closest ? event.target.closest('[data-action="toggle-section"]') : null;
+        if (!button || !root.contains(button)) return;
+        if (typeof win.toggleSection === 'function') win.toggleSection(button.getAttribute('data-section'));
+    }, on);
+
+    const role = $('sync_role');
+    if (role) role.addEventListener('change', function() { changeSyncRole(root, ctx); }, on);
+    showSyncRole(root);
+    // The first request goes out as soon as the tab is on screen (at once,
+    // when it already is), then every 5 s while it stays there.
+    ctx.visibility.every(SYNC_POLL_MS, function() { pollSyncStatus(root, ctx); });
+
+    startPluginOrder(root, ctx);
+    active = ctx;
+}
+
+export function destroy(root, ctx) {
+    const win = root.ownerDocument.defaultView;
+    win.clearTimeout(ctx.state.hintTimer);
+    win.clearTimeout(ctx.state.orderTimer);
+    ctx.state.hintTimer = null;
+    ctx.state.orderTimer = null;
+    // The sync poll is ctx.visibility's: it stops when ctx.signal aborts.
+    if (active === ctx) active = null;
+}
+
+// ── the old global, kept as a deprecated alias (boot.js) ─────────────────────
+/** window.updateSyncUI(): the Role menu's old onchange handler. */
+export function updateSyncUI() {
+    if (active) changeSyncRole(active.root, active);
+}
diff --git a/web_interface/templates/v3/partials/display.html b/web_interface/templates/v3/partials/display.html
index 8cff6911..faf79ed2 100644
--- a/web_interface/templates/v3/partials/display.html
+++ b/web_interface/templates/v3/partials/display.html
@@ -1,5 +1,5 @@
 {% import 'v3/partials/_macros.html' as ui %}
-<div class="bg-white rounded-lg shadow p-6">
+<div class="bg-white rounded-lg shadow p-6" data-page="display">
     <div class="border-b border-gray-200 pb-4 mb-6">
         <h2 class="text-lg font-semibold text-gray-900">Display Settings</h2>
         <p class="mt-1 text-sm text-gray-600">Configure LED matrix hardware settings and display options.</p>
@@ -168,7 +168,8 @@
                         class="w-full bg-gray-100 hover:bg-gray-200 px-4 py-3 flex items-center justify-between text-left transition-colors rounded-t-lg"
                         aria-controls="display-section-advanced-hardware"
                         aria-expanded="false"
-                        onclick="toggleSection('display-section-advanced-hardware')">
+                        data-action="toggle-section"
+                        data-section="display-section-advanced-hardware">
                     <div class="flex-1">
                         <h4 class="font-semibold text-gray-900">
                             <i class="fas fa-sliders-h mr-1 text-gray-500"></i>Advanced Hardware &amp; Display Options (15)
@@ -394,42 +395,6 @@
         </div>
                 </div> <!-- /#display-section-advanced-hardware (nested-content) -->
             </div> <!-- /advanced hardware nested-section -->
-
-            <script>
-                // Live "Your display: W x H" readout - width = cols x chain_length,
-                // height = rows x parallel (same math as the chain-length tooltip),
-                // swapped for a 90/270 orientation. A custom pixel mapper config can
-                // change it further; src/display_geometry.py models those.
-                (function () {
-                    const ids = ['rows', 'cols', 'chain_length', 'parallel'];
-                    const out = document.getElementById('display-resolution-value');
-                    if (!out) return;
-                    function recompute() {
-                        const v = {};
-                        for (const id of ids) {
-                            const el = document.getElementById(id);
-                            v[id] = el ? parseInt(el.value, 10) : NaN;
-                        }
-                        if (Object.values(v).some(n => !Number.isFinite(n) || n <= 0)) {
-                            out.textContent = '—';
-                            return;
-                        }
-                        let w = v.cols * v.chain_length, h = v.rows * v.parallel;
-                        const orientation = document.getElementById('orientation');
-                        if (orientation && (orientation.value === '90' || orientation.value === '270')) {
-                            [w, h] = [h, w];
-                        }
-                        out.textContent = w + ' × ' + h + ' pixels';
-                    }
-                    for (const id of ids) {
-                        const el = document.getElementById(id);
-                        if (el) el.addEventListener('input', recompute);
-                    }
-                    const orientationSelect = document.getElementById('orientation');
-                    if (orientationSelect) orientationSelect.addEventListener('change', recompute);
-                    recompute();
-                })();
-            </script>
         </div>
 
         <!-- Vegas Scroll Mode Settings -->
@@ -830,7 +795,7 @@ With this off a live game takes over the whole display with the full-screen scor
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div class="form-group" id="setting-display-sync_role" data-setting-key="sync.role">
                     <label for="sync_role" class="block text-sm font-medium text-gray-700">Role{{ ui.help_tip('This unit\'s part in a two-display setup.\nStandalone = sync off. Set one Pi to Leader (drives the scroll) and the other to Follower (receives frames). Restart required after changing.', 'Sync Role') }}</label>
-                    <select id="sync_role" name="sync_role" class="form-control" onchange="updateSyncUI()">
+                    <select id="sync_role" name="sync_role" class="form-control">
                         <option value="standalone" {% if main_config.get('sync', {}).get('role', 'standalone') == 'standalone' %}selected{% endif %}>Standalone (disabled)</option>
                         <option value="leader"     {% if main_config.get('sync', {}).get('role', 'standalone') == 'leader'     %}selected{% endif %}>Leader (drives scroll)</option>
                         <option value="follower"   {% if main_config.get('sync', {}).get('role', 'standalone') == 'follower'   %}selected{% endif %}>Follower (receives frames)</option>
@@ -879,261 +844,3 @@ With this off a live game takes over the whole display with the full-screen scor
         </div>
     </form>
 </div>
-
-<script>
-// Update brightness display
-document.getElementById('brightness').addEventListener('input', function() {
-    document.getElementById('brightness-value').textContent = this.value;
-});
-
-
-// Vegas Scroll Mode Settings
-(function() {
-    function escapeHtml(text) { return window.LEDEscape.html(text); }
-
-    function escapeAttr(text) { return window.LEDEscape.attr(text); }
-
-    // Toggle settings visibility
-    const vegasEnabledCheckbox = document.getElementById('vegas_scroll_enabled');
-    const vegasSettings = document.getElementById('vegas_scroll_settings');
-
-    if (vegasEnabledCheckbox && vegasSettings) {
-        vegasEnabledCheckbox.addEventListener('change', function() {
-            vegasSettings.style.display = this.checked ? 'block' : 'none';
-        });
-    }
-
-    // Double-sided: copies/axis only mean anything while the feature is on.
-    // Hidden rather than disabled so the fields keep submitting and the server
-    // still sees an 'off' state to persist.
-    const doubleSidedCheckbox = document.getElementById('double_sided_enabled');
-    const doubleSidedSettings = document.getElementById('double_sided_settings');
-
-    if (doubleSidedCheckbox && doubleSidedSettings) {
-        doubleSidedCheckbox.addEventListener('change', function() {
-            doubleSidedSettings.style.display = this.checked ? 'grid' : 'none';
-        });
-    }
-
-    // Declared before first use: let is not hoisted usably.
-    let scrollHintTimer = null;
-    let scrollHintSeq = 0;
-
-    // Update scroll speed display
-    const scrollSpeedSlider = document.getElementById('vegas_scroll_speed');
-    const scrollSpeedValue = document.getElementById('vegas_scroll_speed_value');
-
-    if (scrollSpeedSlider && scrollSpeedValue) {
-        scrollSpeedSlider.addEventListener('input', function() {
-            scrollSpeedValue.textContent = this.value;
-            refreshScrollSpeedHint();
-        });
-        refreshScrollSpeedHint();
-    }
-
-    // Tell the user what the panel will really do with this speed. Only
-    // speeds that advance a whole number of pixels per refresh look smooth,
-    // and which those are depends on the panel, so the server works it out.
-    function refreshScrollSpeedHint() {
-        clearTimeout(scrollHintTimer);
-        scrollHintTimer = setTimeout(function() {
-            const hint = document.getElementById('vegas_scroll_speed_hint');
-            if (!hint) return;
-            const seq = ++scrollHintSeq;
-            const q = new URLSearchParams({
-                speed: scrollSpeedSlider.value,
-                min: scrollSpeedSlider.min,
-                max: scrollSpeedSlider.max
-            });
-            fetch('/api/v3/config/scroll-speed-advice?' + q)
-                .then(function(r) { return r.json(); })
-                .then(function(body) {
-                    if (seq !== scrollHintSeq || body.status !== 'success') return;
-                    renderScrollSpeedHint(hint, body.data);
-                })
-                .catch(function() { hint.textContent = ''; });
-        }, 150);
-    }
-
-    function renderScrollSpeedHint(hint, a) {
-        const ap = a.applied;
-        const motion = ap.pixels_per_frame + ' px every ' + ap.frame_hold +
-            ' refresh' + (ap.frame_hold === 1 ? '' : 'es');
-        hint.textContent = '';
-        hint.className = 'mt-1 text-xs ' + (a.smooth && a.exact ? 'text-green-700' : 'text-amber-700');
-        const line = document.createElement('span');
-        if (a.smooth && a.exact) {
-            line.textContent = 'Smooth on this panel (' + motion + ', ' + a.refresh_hz + ' Hz).';
-        } else {
-            line.textContent = a.requested + ' px/s will run as ' + ap.pixels_per_second +
-                ' px/s (' + motion + ', ' + ap.steppiness + ') on this ' + a.refresh_hz +
-                ' Hz panel.' + (a.alternatives.length ? ' Smooth speeds: ' : '');
-        }
-        hint.appendChild(line);
-        a.alternatives.forEach(function(alt, i) {
-            if (i > 0) hint.appendChild(document.createTextNode(' '));
-            const value = Math.round(alt.pixels_per_second);
-            const btn = document.createElement('button');
-            btn.type = 'button';
-            btn.className = 'underline font-medium';
-            btn.textContent = value + ' px/s';
-            btn.addEventListener('click', function() {
-                scrollSpeedSlider.value = value;
-                scrollSpeedSlider.dispatchEvent(new Event('input', {bubbles: true}));
-            });
-            hint.appendChild(btn);
-        });
-    }
-
-    // Initialize plugin order list via the shared drag-and-drop module
-    // (static/v3/js/widgets/plugin-order-list.js) — the same component the
-    // Durations tab uses for the primary rotation order.
-    function initPluginOrderList(attempt) {
-        const container = document.getElementById('vegas_plugin_order');
-        if (!container) return;
-        if (!window.PluginOrderList) {
-            // Widget script is deferred; retry briefly, then surface a real
-            // error instead of waiting forever.
-            if ((attempt || 0) < 50) {
-                setTimeout(function() { initPluginOrderList((attempt || 0) + 1); }, 100);
-            } else {
-                container.textContent = 'Could not load the reorder widget — reload the page to try again.';
-                container.className = 'text-sm text-red-500';
-            }
-            return;
-        }
-        window.PluginOrderList.init({
-            containerId: 'vegas_plugin_order',
-            orderInputId: 'vegas_plugin_order_value',
-            excludedInputId: 'vegas_excluded_plugins_value',
-            showVegasModeBadge: true
-        });
-    }
-
-
-    // Initialize on DOM ready
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initPluginOrderList);
-    } else {
-        initPluginOrderList();
-    }
-})();
-
-// Multi-Display Sync UI
-(function() {
-    function updateSyncUI() {
-        const role = document.getElementById('sync_role').value;
-        const bar = document.getElementById('sync_status_bar');
-        const posGroup = document.getElementById('setting-display-sync_follower_position');
-        if (role === 'standalone') {
-            bar.classList.add('hidden');
-            document.getElementById('sync_error_detail').classList.add('hidden');
-            posGroup.style.display = 'none';
-        } else {
-            bar.classList.remove('hidden');
-            posGroup.style.display = role === 'follower' ? '' : 'none';
-            pollSyncStatus();
-        }
-    }
-    window.updateSyncUI = updateSyncUI;
-
-    function pollSyncStatus() {
-        const role = document.getElementById('sync_role') && document.getElementById('sync_role').value;
-        if (!role || role === 'standalone') return;
-
-        fetch('/api/v3/sync/status')
-            .then(r => r.json())
-            .then(resp => {
-                const d = resp.data || {};
-                renderSyncStatus(d);
-            })
-            .catch(() => {
-                renderSyncStatus({state: 'unknown'});
-            });
-    }
-
-    function renderSyncStatus(d) {
-        const content = document.getElementById('sync_status_content');
-        const errorDetail = document.getElementById('sync_error_detail');
-        const errorText = document.getElementById('sync_error_text');
-        if (!content) return;
-
-        const state = d.state || 'unknown';
-        const role  = d.role  || 'unknown';
-
-        let icon, colorClass, text;
-
-        if (state === 'connected' || state === 'follower') {
-            icon = '●';
-            colorClass = 'bg-green-50 border-green-200 text-green-800';
-            const peer = d.peer_ip || d.leader_ip || 'peer';
-            text = role === 'leader'
-                ? `Follower connected — ${peer} (chain ${d.peer_chain || '?'})`
-                : `Receiving from leader — ${peer}`;
-            errorDetail.classList.add('hidden');
-
-        } else if (state === 'incompatible') {
-            icon = '⚠';
-            colorClass = 'bg-yellow-50 border-yellow-200 text-yellow-800';
-            text = `Follower connected but incompatible panels`;
-            if (d.error) {
-                errorText.textContent = d.error;
-                errorDetail.classList.remove('hidden');
-            }
-
-        } else if (state === 'no_peer' || state === 'standalone') {
-            icon = '○';
-            colorClass = 'bg-gray-50 border-gray-200 text-gray-600';
-            text = role === 'leader' ? 'No follower detected' : 'Searching for leader…';
-            errorDetail.classList.add('hidden');
-
-        } else if (state === 'starting') {
-            icon = '○';
-            colorClass = 'bg-gray-50 border-gray-200 text-gray-500';
-            text = 'Display process starting…';
-            errorDetail.classList.add('hidden');
-
-        } else {
-            icon = '✕';
-            colorClass = 'bg-red-50 border-red-200 text-red-700';
-            text = 'Sync status unavailable';
-            errorDetail.classList.add('hidden');
-        }
-
-        content.className = `flex items-start space-x-2 p-3 rounded-lg border text-sm ${colorClass}`;
-        content.textContent = '';
-        const iconSpan = document.createElement('span');
-        iconSpan.className = 'font-bold text-lg leading-none';
-        iconSpan.textContent = icon;
-        const textSpan = document.createElement('span');
-        textSpan.textContent = text;
-        content.appendChild(iconSpan);
-        content.appendChild(textSpan);
-    }
-
-    // Initial UI state, then the 5s sync-status poll — only while the Display
-    // tab is active and the page is visible. LEDVisibility keys the
-    // registration, so a re-run of this partial replaces the previous timer.
-    function stopSyncTimer() {
-        if (window.syncStatusInterval) {
-            clearInterval(window.syncStatusInterval);
-            window.syncStatusInterval = null;
-        }
-    }
-    function startSyncTimer() {
-        stopSyncTimer();
-        pollSyncStatus();
-        window.syncStatusInterval = setInterval(pollSyncStatus, 5000);
-    }
-    function startSyncPolling() {
-        updateSyncUI();
-        window.LEDVisibility.onActive('display', startSyncTimer, stopSyncTimer, 'display-sync-status');
-    }
-
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', startSyncPolling);
-    } else {
-        startSyncPolling();
-    }
-})();
-</script>