diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2acd739a..d581dd30 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -64,6 +64,16 @@ accepts both, but the store flags the old spelling as deprecated
   - `/plugins/store/refresh` no longer claims a commit-metadata refresh it doesn't do.
   - The plugin-config list repair code is in one place, `src/web_interface/config_arrays.py`.
 
+- Web UI:
+  - Cache tab errors no longer show up in the Logs tab.
+  - A tab that fails to load shows "Try again" instead of a skeleton that never goes away.
+  - Plugin Store search and registry errors appear as a notification, and the Plugin Manager stays on screen.
+  - The image schedule button works on uploaded images, and the editor stays open while you edit.
+  - A failed plugin toggle moves the switch back.
+  - Each save shows one notification; a failed Durations save says it failed.
+  - Stats the server can't read show `--`.
+  - New `window.LEDEscape` (`html`, `attr`, `jsStringAttr`) replaces about 30 copied escapers. `window.escapeHtml` and `window.escapeAttribute` remain as aliases for plugin pages.
+
 - The web service (`ledmatrix-web`) logs through `src.logging_config` like the
   display service, so `journalctl -p err -u ledmatrix-web` works. Successful
   GET/HEAD/OPTIONS requests (the UI's polling) are logged at DEBUG instead of
diff --git a/test/js/dom/test_installed_dom.js b/test/js/dom/test_installed_dom.js
index 5fbee8c6..aa5f70ab 100644
--- a/test/js/dom/test_installed_dom.js
+++ b/test/js/dom/test_installed_dom.js
@@ -43,12 +43,7 @@ function get(path) {
   window.debugLog = () => {};
   window.PLUGIN_DEBUG = false;
   window.installedPlugins = installed;
-  window.escapeHtml = function (text) {
-    if (!text) return '';
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  };
+  require('../led_escape').install(window);
 
   // Load the helper as a real <script>.
   const s = document.createElement('script');
@@ -69,7 +64,8 @@ function get(path) {
   const s2 = document.createElement('script');
   s2.textContent = `
     var installedPlugins = window.installedPlugins;
-    var escapeHtml = window.escapeHtml, pluginLog = window.pluginLog, debugLog = window.debugLog;
+    var escapeHtml = window.LEDEscape.html, escapeAttribute = window.LEDEscape.attr;
+    var pluginLog = window.pluginLog, debugLog = window.debugLog;
     var PLUGIN_DEBUG = false;
     ${src.slice(a, b)}
     ${src.slice(b, c)}
diff --git a/test/js/dom/test_no_double_fetch.js b/test/js/dom/test_no_double_fetch.js
index 84007584..83357df1 100644
--- a/test/js/dom/test_no_double_fetch.js
+++ b/test/js/dom/test_no_double_fetch.js
@@ -50,6 +50,7 @@ const get = p => new Promise((res, rej) =>
   const s0 = window.document.createElement('script');
   s0.textContent = `
     window.debugLog = function () {};
+    ${require('../led_escape').source}
     window.showNotification = function () {};
     window.showError = function () {};
     window.updateSystemStatus = function () {};
diff --git a/test/js/led_escape.js b/test/js/led_escape.js
new file mode 100644
index 00000000..994dda51
--- /dev/null
+++ b/test/js/led_escape.js
@@ -0,0 +1,27 @@
+// window.LEDEscape, taken verbatim from web_interface/static/v3/js/app-early.js.
+//
+// Scripts that the suites evaluate on their own (a slice of plugins_manager.js,
+// a widget file) call window.LEDEscape, which the page defines in app-early.js
+// before anything else runs. `source` is that definition, for a jsdom <script>;
+// install(win) evaluates it onto a plain object standing in for window.
+const fs = require('fs');
+const path = require('path');
+
+const APP_EARLY = path.resolve(__dirname, '../../web_interface/static/v3/js/app-early.js');
+const text = fs.readFileSync(APP_EARLY, 'utf8');
+const start = text.indexOf('window.LEDEscape = (function() {');
+const endMark = '})();';
+const end = text.indexOf(endMark, start);
+if (start < 0 || end < 0) {
+  console.error('FAIL: cannot find the window.LEDEscape definition in app-early.js');
+  process.exit(1);
+}
+const source = text.slice(start, end + endMark.length);
+
+function install(win) {
+  // eslint-disable-next-line no-new-func
+  new Function('window', source)(win);
+  return win.LEDEscape;
+}
+
+module.exports = { source, install };
diff --git a/test/js/run_all.js b/test/js/run_all.js
index 443ded3c..bc95a3b4 100755
--- a/test/js/run_all.js
+++ b/test/js/run_all.js
@@ -19,7 +19,7 @@ const UNIT = ['unit/test_list_filter.js', 'unit/test_render_cards.js',
               'unit/test_style_editor_layout_leaf_columns.js',
               'unit/test_style_editor_layout_leaf_collision.js',
               'unit/test_update_all.js', 'unit/test_inline_handler_escaping.js',
-              'unit/test_plugin_action_delegation.js'];
+              'unit/test_plugin_action_delegation.js', 'unit/test_file_upload_widget.js'];
 const DOM = ['dom/test_installed_dom.js', 'dom/test_store_dom.js', 'dom/test_no_double_fetch.js',
              'dom/test_tools_sections.js'];
 
diff --git a/test/js/unit/test_file_upload_widget.js b/test/js/unit/test_file_upload_widget.js
new file mode 100644
index 00000000..1da932ea
--- /dev/null
+++ b/test/js/unit/test_file_upload_widget.js
@@ -0,0 +1,212 @@
+// The image list and schedule editor of the file-upload widget
+// (web_interface/static/v3/js/widgets/file-upload.js), which owns them since
+// plugins_manager.js stopped shipping its own copies.
+//
+// 1. Upload-supplied strings (file name, id) reach the page as text and data
+//    attributes only, and the delete button hands them back intact.
+// 2. Card and editor ids use the same rule as plugin_config.html
+//    (img_id|replace('.', '_')|replace('-', '_')), so the schedule button of a
+//    server-rendered card with a UUID id finds its editor.
+// 3. A schedule edit saves to the hidden input and updates the card's summary
+//    in place: the open editor is not rebuilt, so what the user just changed
+//    stays on screen and keeps focus.
+// 4. Re-rendering the list (upload, delete) keeps an open editor open.
+//
+// Plain node with a minimal DOM shim, like the other unit suites.
+
+const fs = require('fs');
+const path = require('path');
+
+const SRC = fs.readFileSync(
+  path.resolve(__dirname, '../../../web_interface/static/v3/js/widgets/file-upload.js'), 'utf8');
+
+let pass = 0, fail = 0;
+const ok = (label, cond, extra) => cond
+  ? (pass++, console.log('  ok   ' + label))
+  : (fail++, console.log('  FAIL ' + label + (extra !== undefined ? '  -> ' + JSON.stringify(extra).slice(0, 400) : '')));
+
+// ── DOM shim ───────────────────────────────────────────────────────────────
+class ClassList {
+  constructor(el) { this.el = el; }
+  get list() { return (this.el.className || '').split(/\s+/).filter(Boolean); }
+  contains(c) { return this.list.includes(c); }
+  add(...cs) { this.el.className = [...new Set([...this.list, ...cs])].join(' '); }
+  remove(...cs) { this.el.className = this.list.filter(c => !cs.includes(c)).join(' '); }
+}
+class El {
+  constructor(tag) {
+    this.tagName = String(tag).toUpperCase();
+    this.children = []; this.parent = null; this.attrs = {}; this.dataset = {}; this.style = {};
+    this.className = ''; this.id = ''; this._text = ''; this._html = null; this.listeners = {};
+    this.classList = new ClassList(this);
+  }
+  appendChild(c) { c.parent = this; this.children.push(c); return c; }
+  append(...nodes) { nodes.forEach(n => this.appendChild(typeof n === 'string' ? new TextNode(n) : n)); }
+  replaceChildren(...nodes) { this.children = []; this._text = ''; this._html = null; this.append(...nodes); }
+  setAttribute(n, v) { this.attrs[n] = String(v); }
+  getAttribute(n) { return this.attrs[n]; }
+  addEventListener(t, f) { (this.listeners[t] ||= []).push(f); }
+  click() { (this.listeners.click || []).forEach(f => f.call(this, { target: this })); }
+  set textContent(v) { this.children = []; this._html = null; this._text = String(v); }
+  get textContent() { return this._text + this.children.map(c => c.textContent).join(''); }
+  // Markup written with innerHTML is kept as a string; the shim never parses it.
+  set innerHTML(v) { this.children = []; this._text = ''; this._html = String(v); }
+  get innerHTML() {
+    if (this._html !== null) return this._html;
+    return this._text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+  *walk() { for (const c of this.children) { yield c; yield* c.walk(); } }
+  querySelector(sel) {
+    const tests = {
+      '[id^="schedule_"]:not(.hidden)': e => e instanceof El && e.id.startsWith('schedule_') && !e.classList.contains('hidden'),
+      '.image-schedule-summary': e => e instanceof El && e.classList.contains('image-schedule-summary'),
+    };
+    if (!tests[sel]) throw new Error('shim: unsupported selector ' + sel);
+    for (const e of this.walk()) if (tests[sel](e)) return e;
+    return null;
+  }
+}
+class TextNode { constructor(t) { this.textContent = String(t); } *walk() {} }
+
+const root = new El('body');
+const docListeners = {};
+global.document = {
+  createElement: t => new El(t),
+  createTextNode: t => new TextNode(t),
+  getElementById: id => {
+    if (root.id === id) return root;
+    for (const e of root.walk()) if (e.id === id) return e;
+    return null;
+  },
+  addEventListener: (t, f) => { (docListeners[t] ||= []).push(f); },
+};
+global.window = global;
+require('../led_escape').install(window);
+window.LEDMatrixWidgets = { register() {} };
+window.currentPluginConfig = null;
+window.getUploadConfig = () => ({ plugin_id: 'static-image' });
+
+// eslint-disable-next-line no-eval
+eval(SRC);
+window.getUploadConfig = () => ({ plugin_id: 'static-image' });
+
+function mount(fieldId, images) {
+  root.children = [];
+  const list = root.appendChild(new El('div')); list.id = `${fieldId}_image_list`;
+  const hidden = root.appendChild(new El('input')); hidden.id = `${fieldId}_images_data`;
+  hidden.value = JSON.stringify(images);
+  return { list, hidden };
+}
+const buttons = card => [...card.walk()].filter(e => e.tagName === 'BUTTON');
+
+const SQ = "x' onmouseover='alert(1)";
+const DQ = 'x" onmouseover="alert(1)';
+const UUID = '1b2c3d4e-aaaa-bbbb-cccc-123456789abc';
+
+console.log('\n1. upload-supplied strings stay text and data');
+{
+  const name = '<img src=x onerror=alert(1)>' + DQ + '.png';
+  const { list } = mount('f', []);
+  window.updateImageList('f', [{ id: SQ, path: 'assets/x".png', filename: DQ, original_filename: name, size: 1 }]);
+  const card = list.children[0];
+  const all = [...card.walk()];
+  ok('no element carries markup written with innerHTML', all.every(e => !(e instanceof El) || e._html === null || e._html === ''),
+     all.filter(e => e instanceof El && e._html).map(e => e._html));
+  const p = all.find(e => e.tagName === 'P');
+  ok('file name is text', p.textContent === name, p.textContent);
+  const img = all.find(e => e.tagName === 'IMG');
+  ok('alt is the stored filename', img.alt === DQ, img.alt);
+  ok('thumbnail loads lazily', img.loading === 'lazy' && img.decoding === 'async', [img.loading, img.decoding]);
+  const [sched, del] = buttons(card);
+  ok('buttons are labelled for screen readers',
+     sched.attrs['aria-label'] === 'Schedule image ' + name && del.attrs['aria-label'] === 'Delete image ' + name,
+     [sched.attrs, del.attrs]);
+  const calls = [];
+  window.deleteUploadedImage = (...a) => calls.push(a);
+  del.click();
+  ok('delete gets field, image and plugin ids intact',
+     calls.length === 1 && calls[0][0] === 'f' && calls[0][1] === SQ && calls[0][2] === 'static-image', calls);
+  sched.click();
+  const editor = card.children[1];
+  ok('editor opens for a hostile id', !editor.classList.contains('hidden'), editor.className);
+  // The editor is built with DOM calls: the id must arrive as attribute data,
+  // and no element may carry markup written with innerHTML.
+  const editorEls = [...editor.walk()].filter(e => e instanceof El);
+  const withId = editorEls.filter(e => e.attrs['data-image-id'] !== undefined);
+  ok('editor stores the id as attribute data, not markup',
+     withId.length > 0 && withId.every(e => e.attrs['data-image-id'] === SQ) && editorEls.every(e => e._html === null),
+     withId.map(e => e.attrs['data-image-id']));
+}
+
+console.log('\n2. ids match the server-rendered template');
+{
+  const { list } = mount('g', [{ id: UUID, path: 'a.png', filename: 'a.png' }]);
+  window.updateImageList('g', [{ id: UUID, path: 'a.png', filename: 'a.png' }]);
+  const want = UUID.replace(/[.-]/g, '_');
+  ok('card id replaces "-" like the template', list.children[0].id === 'img_' + want, list.children[0].id);
+  ok('editor id replaces "-" like the template', list.children[0].children[1].id === 'schedule_' + want,
+     list.children[0].children[1].id);
+
+  // A card as plugin_config.html renders it: its button passes the raw UUID.
+  root.children = [];
+  const hidden = root.appendChild(new El('input')); hidden.id = 'g_images_data';
+  hidden.value = JSON.stringify([{ id: UUID, path: 'a.png', filename: 'a.png' }]);
+  const editor = root.appendChild(new El('div'));
+  editor.id = 'schedule_' + want; editor.className = 'hidden mt-3';
+  window.openImageSchedule('g', UUID, 0);
+  ok('schedule button of a server-rendered card opens its editor',
+     !editor.classList.contains('hidden') && editor.textContent.includes('Schedule Settings'), editor.className);
+}
+
+console.log('\n3. a schedule edit saves without rebuilding the editor');
+{
+  const images = [{ id: UUID, path: 'a.png', filename: 'a.png' }];
+  const { list, hidden } = mount('h', images);
+  window.updateImageList('h', images);
+  window.openImageSchedule('h', UUID, 0);
+  const editor = list.children[0].children[1];
+  const before = editor.innerHTML;
+  // The shim does not parse the editor markup, so stand in the controls the
+  // update functions read.
+  const want = UUID.replace(/[.-]/g, '_');
+  const check = root.appendChild(new El('input')); check.id = 'schedule_enabled_' + want; check.checked = true;
+  const mode = root.appendChild(new El('select')); mode.id = 'schedule_mode_' + want; mode.value = 'time_range';
+  window.toggleImageScheduleEnabled('h', UUID, 0);
+  window.updateImageScheduleMode('h', UUID, 0);
+  const saved = JSON.parse(hidden.value)[0].schedule;
+  ok('hidden input holds the new schedule', saved.enabled === true && saved.mode === 'time_range', saved);
+  ok('editor was not rebuilt', editor.innerHTML === before && !editor.classList.contains('hidden'));
+  const summary = list.children[0].querySelector('.image-schedule-summary');
+  ok('card summary updated in place', summary.textContent === '08:00 - 18:00 (daily)', summary.textContent);
+}
+
+console.log('\n4. re-rendering the list keeps an open editor open');
+{
+  const images = [{ id: UUID, path: 'a.png', filename: 'a.png', schedule: { enabled: true, mode: 'per_day', days: {} } },
+                  { id: 'other', path: 'b.png', filename: 'b.png' }];
+  const { list } = mount('k', images);
+  window.updateImageList('k', images);
+  window.openImageSchedule('k', UUID, 0);
+  window.updateImageList('k', images.slice(0, 1));
+  const editor = list.children[0].children[1];
+  ok('editor still open after re-render', !editor.classList.contains('hidden'), editor.className);
+  const perDay = [...editor.walk()].find(e => e instanceof El && e.tagName === 'OPTION' && e.attrs.value === 'per_day');
+  ok('editor rebuilt from the saved schedule', !!perDay && 'selected' in perDay.attrs);
+}
+
+console.log('\n5. the delegated change listener routes editor controls');
+{
+  const calls = [];
+  const saved = window.updateImageScheduleDay;
+  window.updateImageScheduleDay = (...a) => calls.push(a);
+  const control = new El('input');
+  control.dataset = { scheduleControl: 'day', fieldId: SQ, imageId: DQ, imageIdx: '2', day: 'monday' };
+  control.closest = () => control;
+  (docListeners.change || []).forEach(f => f({ target: control }));
+  window.updateImageScheduleDay = saved;
+  ok('day control reaches updateImageScheduleDay with its data intact',
+     calls.length === 1 && calls[0][0] === SQ && calls[0][1] === DQ && calls[0][2] === 2 && calls[0][3] === 'monday', calls);
+}
+
+console.log(`\n${pass} passed, ${fail} failed\n`);
+process.exit(fail ? 1 : 0);
diff --git a/test/js/unit/test_html_escaping.js b/test/js/unit/test_html_escaping.js
index 7b18a8fc..852dcf45 100644
--- a/test/js/unit/test_html_escaping.js
+++ b/test/js/unit/test_html_escaping.js
@@ -11,9 +11,10 @@
 //     name" onfocus="alert(1)
 //
 // CodeQL reported 83 js/incomplete-html-attribute-sanitization alerts for
-// exactly this. This suite pins the fix at the source: it reads each real
-// implementation out of the shipped file and runs it, so an escaper that loses
-// its quote handling again fails here rather than in a scanner run weeks later.
+// exactly this. The web UI now has one implementation, window.LEDEscape in
+// app-early.js, and the old per-file escapers are one-line names for it. This
+// suite runs LEDEscape and every one of those names as shipped, and fails if a
+// hand-rolled escaper appears anywhere else in web_interface/.
 
 const fs = require('fs');
 const path = require('path');
@@ -41,6 +42,7 @@ class FakeEl {
 }
 global.document = { createElement: () => new FakeEl() };
 global.window = global;
+const LEDEscape = require('../led_escape').install(window);
 
 // ── source extraction ──────────────────────────────────────────────────────
 // Pull a function out of a real source file by its opening line and balanced
@@ -66,6 +68,7 @@ function extract(file, opener) {
 
 // Evaluate an extracted escaper and return it as a callable.
 function loadFn(file, opener, name, { method = false } = {}) {
+  if (file === null) return LEDEscape[name];
   const body = extract(file, opener);
   // Class/object methods (`escapeHtml(text) {...}`) are not valid statements on
   // their own -- wrap them in an object literal so they can be evaluated.
@@ -78,6 +81,8 @@ function loadFn(file, opener, name, { method = false } = {}) {
 
 // ── the escapers, as shipped ───────────────────────────────────────────────
 const ESCAPERS = [
+  ['app-early.js (LEDEscape.html)', null, null, 'html'],
+  ['app-early.js (LEDEscape.attr)', null, null, 'attr'],
   ['base-widget.js (BaseWidget.escapeHtml)',
    'static/v3/js/widgets/base-widget.js', 'escapeHtml(text) {', 'escapeHtml', true],
   ['plugins_manager.js (top-level escapeHtml)',
@@ -90,8 +95,26 @@ const ESCAPERS = [
    'static/v3/js/widgets/json-file-manager.js', '_esc(str) {', '_esc', true],
   ['plugin-file-manager.js (escHtml)',
    'static/v3/js/widgets/plugin-file-manager.js', 'function escHtml(s) {', 'escHtml', false],
-  ['app-shell.js (escapeHtml)',
-   'static/v3/js/app-shell.js', 'escapeHtml(text) {', 'escapeHtml', true],
+  ['plugins_manager.js (escapeAttribute)',
+   'static/v3/plugins_manager.js', 'function escapeAttribute(text) {', 'escapeAttribute', false],
+  ['notification.js (escapeHtml)',
+   'static/v3/js/widgets/notification.js', 'function escapeHtml(text) {', 'escapeHtml', false],
+  ['google-calendar-picker.js (escapeHtml)',
+   'static/v3/js/widgets/google-calendar-picker.js', 'function escapeHtml(str) {', 'escapeHtml', false],
+  ['text-input.js (escapeHtml)',
+   '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],
+  ['backup_restore.html (escapeHtml)',
+   'templates/v3/partials/backup_restore.html', 'function escapeHtml(value) {', 'escapeHtml', false],
+  ['operation_history.html (escapeHtml)',
+   'templates/v3/partials/operation_history.html', 'function escapeHtml(text) {', 'escapeHtml', 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 (escapeHtml)',
@@ -135,6 +158,51 @@ for (const [label, file, opener, name, method] of ESCAPERS) {
   ok(`${label}: &quot; input stays inert`, out === '&amp;quot;', out);
 }
 
+console.log('\n4b. LEDEscape.jsStringAttr: a JS string literal that survives an attribute');
+{
+  const decode = s => s.replace(/&(quot|#39|lt|gt|amp);/g, (m, e) =>
+    ({ quot: '"', '#39': "'", lt: '<', gt: '>', amp: '&' })[e]);
+  for (const v of ["x' onmouseover='alert(1)", 'x" onmouseover="alert(1)', '</script><b>', 'a&#39;b']) {
+    const out = LEDEscape.jsStringAttr(v);
+    ok(`${JSON.stringify(v)}: no raw quote or bracket`, !/["'<>]/.test(out), out);
+    // eslint-disable-next-line no-eval
+    ok(`${JSON.stringify(v)}: decodes back to the same string`, eval(decode(out)) === v, out);
+  }
+  ok('null and undefined become the empty string',
+     LEDEscape.html(null) === '' && LEDEscape.html(undefined) === '' && LEDEscape.jsStringAttr(null) === '&quot;&quot;');
+  ok('numbers are kept', LEDEscape.html(0) === '0', LEDEscape.html(0));
+}
+
+console.log('\n4c. no hand-rolled escaper outside app-early.js');
+{
+  const skip = new Set(['static/v3/js/app-early.js',
+                        // documentation example, kept self-contained on purpose
+                        'static/v3/js/widgets/example-color-picker.js']);
+  const found = [];
+  const walk = dir => fs.readdirSync(dir, { withFileTypes: true }).forEach(e => {
+    const p = path.join(dir, e.name);
+    const rel = path.relative(ROOT, p).split(path.sep).join('/');
+    if (e.isDirectory()) { if (e.name !== 'vendor') walk(p); return; }
+    if (!/\.(js|html)$/.test(e.name) || /\.min\.js$/.test(e.name) || skip.has(rel)) return;
+    // Writing the entity for a quote is what an escaper does; nothing else in
+    // the UI needs to.
+    let text = fs.readFileSync(p, 'utf8');
+    // In templates only the inline scripts count; Jinja's own |replace("'", "&#39;")
+    // escaping of server-rendered values is not a JS escaper.
+    if (e.name.endsWith('.html')) text = (text.match(/<script[^>]*>[\s\S]*?<\/script\s*>/gi) || []).join('\n');
+    if (/['"`]&quot;['"`]|['"`]&#39;['"`]/.test(text)) found.push(rel);
+  });
+  walk(path.join(ROOT, 'static'));
+  walk(path.join(ROOT, 'templates'));
+  ok('every escaper is window.LEDEscape', found.length === 0, found);
+  // Plugin pages may call these globals; they stay, as aliases.
+  const early = fs.readFileSync(path.join(ROOT, 'static/v3/js/app-early.js'), 'utf8');
+  ok('window.escapeHtml is kept as an alias of LEDEscape.html',
+     early.includes('window.escapeHtml = window.LEDEscape.html;'));
+  ok('window.escapeAttribute is kept as an alias of LEDEscape.attr',
+     early.includes('window.escapeAttribute = window.LEDEscape.attr;'));
+}
+
 // ── url-input scheme handling (js/xss-through-dom) ─────────────────────────
 console.log('\n5. url-input never treats a scriptable scheme as a valid URL');
 {
diff --git a/test/js/unit/test_inline_handler_escaping.js b/test/js/unit/test_inline_handler_escaping.js
index 984d4299..e32d6d8c 100644
--- a/test/js/unit/test_inline_handler_escaping.js
+++ b/test/js/unit/test_inline_handler_escaping.js
@@ -7,9 +7,8 @@
 //
 // JSON.stringify makes a valid JS string but leaves `'` alone, so an entry id
 // of  x' onmouseover='alert(1)  closed the single-quoted attribute and added a
-// handler of its own. The live window.updateImageList (plugins_manager.js loads
-// last, so its copy beats the file-upload widget's) put the uploaded file's
-// original name into the markup unescaped.
+// handler of its own. (The uploaded-image list is no longer built here: the
+// file-upload widget owns it, and test_file_upload_widget.js covers it.)
 //
 // Each case renders with the shipped function, parses the tag the way a browser
 // does (quoted attribute values, entities decoded), and checks two things: no
@@ -54,6 +53,7 @@ global.document = {
   createElement: () => new TextEl(),
 };
 global.window = global;
+require('../led_escape').install(window);
 global.pluginLog = () => {};
 global.isStorePluginInstalled = () => false;
 global.isNewPlugin = () => false;
@@ -68,8 +68,6 @@ eval([
 ].map(extract).join('\n') + '\nglobal.jsStringAttr = jsStringAttr; global.escapeHtml = escapeHtml;'
   + '\nglobal.renderPluginStore = renderPluginStore; global.renderSavedRepositories = renderSavedRepositories;'
   + '\nglobal.renderCustomRegistryPlugins = renderCustomRegistryPlugins; global.escapeAttribute = escapeAttribute;');
-// eslint-disable-next-line no-eval
-eval(extract('window.updateImageList = function(fieldId, images) {'));
 
 // ── minimal HTML start-tag tokenizer ───────────────────────────────────────
 function decodeEntities(s) {
@@ -190,26 +188,5 @@ for (const hostile of [SQ, DQ, AMP]) {
      calls.length === 1 && calls[0][0] === 'removeSavedRepository' && calls[0][1] === hostile, calls);
 }
 
-console.log('\n5. live window.updateImageList escapes the uploaded file name');
-window.getUploadConfig = () => ({ plugin_id: SQ });
-window.currentPluginConfig = null;
-{
-  const name = '<img src=x onerror=alert(1)>' + DQ + '.png';
-  window.updateImageList('f', [{ id: SQ, path: 'assets/x".png', filename: DQ, original_filename: name, size: 1 }]);
-  const html = els['f_image_list'].innerHTML;
-  ok('no raw markup from original_filename', !html.includes('<img src=x onerror'), html);
-  const imgs = tags(html, 'img');
-  ok('one <img>, only the template attributes',
-     imgs.length === 1 && names(imgs[0]).join(',') === 'src,alt,loading,decoding,class,onerror', imgs.map(names));
-  ok('alt carries the stored filename as text', attr(imgs[0], 'alt') === DQ, imgs[0]);
-  const buttons = tags(html, 'button');
-  ok('two buttons, no extra attributes',
-     buttons.length === 2 && buttons.every(b => names(b).join(',') === 'type,onclick,class,title,aria-label'),
-     buttons.map(names));
-  const del = runHandler(attr(buttons[1], 'onclick'));
-  ok('delete handler gets field, image and plugin ids intact',
-     del.length === 1 && del[0][0] === 'deleteUploadedImage' && del[0][1] === 'f' && del[0][2] === SQ && del[0][3] === SQ, del);
-}
-
 console.log(`\n${pass} passed, ${fail} failed\n`);
 process.exit(fail ? 1 : 0);
diff --git a/test/js/unit/test_plugin_action_delegation.js b/test/js/unit/test_plugin_action_delegation.js
index a65cc9ee..882a79b3 100644
--- a/test/js/unit/test_plugin_action_delegation.js
+++ b/test/js/unit/test_plugin_action_delegation.js
@@ -24,7 +24,7 @@ function slice(startMarker, endMarker) {
   return SRC.slice(a, b);
 }
 
-const GLOBAL_DELEGATION = slice('(function setupGlobalEventDelegation() {', '// Note: configurePlugin');
+const GLOBAL_DELEGATION = slice('(function setupGlobalEventDelegation() {', '// GitHub Token Collapse Handler');
 const HANDLER = slice('function handlePluginAction(event) {', 'function findInstalledPlugin(pluginId)');
 
 let pass = 0, fail = 0;
diff --git a/test/js/unit/test_render_cards.js b/test/js/unit/test_render_cards.js
index 8faae80c..741a7824 100644
--- a/test/js/unit/test_render_cards.js
+++ b/test/js/unit/test_render_cards.js
@@ -30,12 +30,13 @@ global.document = {
   createElement: () => new FakeEl(),
 };
 global.window = global;
+require('../led_escape').install(window);
 global.pluginLog = () => {};
 global.PLUGIN_DEBUG = false;
 global.debugLog = () => {};
 function setupInstalledEventDelegation() {}   // stubbed; tested separately
 
-eval(slice('function escapeHtml(text)', '\nfunction ', ));
+eval(slice('function escapeHtml(text)', '\nfunction isNewPlugin'));
 eval(slice('function renderInstalledCards(plugins, total)',
            '// Set up event delegation for plugin action buttons'));
 
diff --git a/web_interface/static/v3/app.js b/web_interface/static/v3/app.js
index 51b6f377..e683e6cd 100644
--- a/web_interface/static/v3/app.js
+++ b/web_interface/static/v3/app.js
@@ -1,6 +1,37 @@
 /* global showNotification */
-// LED Matrix v3 JavaScript
-// Additional helpers for HTMX and Alpine.js integration
+/*
+ * app.js -- page-wide behaviour that is not the Alpine app itself.
+ *
+ * Deferred, first of the scripts at the end of <body>; after app-shell.js
+ * and Alpine.
+ *
+ * Load order (templates/v3/base.html):
+ *   <head>, blocking:  debugLog and theme inline scripts; the htmx loader
+ *                      (injects htmx.min.js with a dynamic <script>);
+ *                      js/htmx-config.js; the loadPartialDirect fallback;
+ *                      js/app-early.js
+ *   <head>, defer:     js/app-shell.js, then js/alpinejs.min.js (Alpine
+ *                      starts as soon as it runs, so app-shell.js's app()
+ *                      is the one Alpine uses)
+ *   end of <body>, defer, in this order: app.js, js/tooltips.js,
+ *                      js/settings-search.js, js/utils/dialog.js,
+ *                      js/utils/error_handler.js, js/plugins/api_client.js,
+ *                      state_manager.js, install_manager.js, list_filter.js,
+ *                      the widget bundle (web_interface/widget_bundle.py),
+ *                      plugins_manager.js
+ *   Tab partials arrive later through htmx; their inline scripts run on
+ *   htmx:afterSwap (js/htmx-config.js).
+ *
+ * Owns: button loading states and the fallback result toast for htmx
+ * requests; the unsaved-changes guard for plugin config forms; the "restart
+ * the display" banner; the floating live preview; aria-current on the nav;
+ * the mobile nav drawer's keyboard handling; header widget placement.
+ *
+ * Globals: showSaveResult, showRestartPending, dismissRestartPending,
+ * restartPendingNow, toggleFloatingPreview, applyFloatingPreviewSize,
+ * cycleFloatingPreviewSize, updateFloatingPreviewVisibility,
+ * previewPluginNow, updateNavAriaCurrent, placeHeaderWidgets.
+ */
 
 // HTMX response handlers
 document.body.addEventListener('htmx:beforeRequest', function(event) {
@@ -22,9 +53,15 @@ document.body.addEventListener('htmx:afterRequest', function(event) {
         if (textEl) textEl.style.opacity = '1';
     }
 
-    // Handle response notifications
+    // Show the server's message, unless the element that made the request
+    // (or its form) has its own after-request handler: every such handler in
+    // the templates reports the result itself, and this used to repeat it,
+    // so each save showed two toasts.
     const response = event.detail.xhr;
-    if (response && response.responseText) {
+    const elt = event.detail.elt;
+    const reportsItself = elt && elt.closest &&
+        elt.closest('[hx-on\\:\\:after-request], [hx-on\\:htmx\\:after-request]');
+    if (!reportsItself && response && response.responseText) {
         try {
             const data = JSON.parse(response.responseText);
             if (data.message) {
@@ -48,6 +85,30 @@ document.body.addEventListener('htmx:afterRequest', function(event) {
     } catch { /* banner is best-effort */ }
 });
 
+/**
+ * Shows the outcome of a settings form save as one notification. Used by the
+ * hx-on:htmx:after-request of the Display, Rotation & Durations and General
+ * forms. Only a 2xx response counts as saved (a network failure is status 0);
+ * the server's message is shown when there is one, and its status can refine
+ * a success but never overturn a failure.
+ * @param {XMLHttpRequest} xhr - event.detail.xhr
+ * @param {string} savedText - message for a success without one
+ * @param {string} failedText - message for a failure without one
+ */
+window.showSaveResult = function(xhr, savedText, failedText) {
+    const httpSuccess = xhr.status >= 200 && xhr.status < 300;
+    let message = httpSuccess ? savedText : failedText;
+    let status = httpSuccess ? 'success' : 'error';
+    try {
+        const data = JSON.parse(xhr.responseText);
+        if (data.message) message = data.message;
+        if (httpSuccess && data.status) status = data.status;
+    } catch {
+        // Non-JSON body: keep the status-code verdict.
+    }
+    showNotification(message, status);
+};
+
 // ===== Unsaved-changes guard =====
 // Plugin config panels are Alpine x-if templates: navigating away DESTROYS
 // the panel and revisiting re-fetches it, silently discarding any edits.
@@ -242,9 +303,8 @@ window.updateFloatingPreviewVisibility = function(tab) {
     if (!panel || !toggle) return;
     let active = tab;
     if (!active) {
-        const el = document.querySelector('[x-data="app()"]') || document.querySelector('[x-data]');
-        const data = el && el._x_dataStack && el._x_dataStack[0];
-        active = data && data.activeTab;
+        const app = window.getApp();
+        active = app && app.activeTab;
     }
     const onOverview = active === 'overview';
     let open = false;
@@ -308,13 +368,9 @@ window.updateNavAriaCurrent = function(tab) {
 // Escape closes the mobile nav drawer and returns focus to the hamburger;
 // opening the drawer moves focus to its first tab.
 (function() {
-    function appData() {
-        const el = document.querySelector('[x-data="app()"]') || document.querySelector('[x-data]');
-        return el && el._x_dataStack && el._x_dataStack[0];
-    }
     document.addEventListener('keydown', function(e) {
         if (e.key !== 'Escape') return;
-        const data = appData();
+        const data = window.getApp();
         if (data && data.mobileNavOpen) {
             data.mobileNavOpen = false;
             const burger = document.querySelector('[aria-controls="site-nav"]');
@@ -328,7 +384,7 @@ window.updateNavAriaCurrent = function(tab) {
         // The click handler toggles mobileNavOpen; focus the first tab once
         // the drawer has slid in (matches the CSS transition timing).
         setTimeout(function() {
-            const data = appData();
+            const data = window.getApp();
             if (data && data.mobileNavOpen) {
                 const first = document.querySelector('#site-nav .nav-tab');
                 if (first) first.focus();
diff --git a/web_interface/static/v3/js/app-early.js b/web_interface/static/v3/js/app-early.js
index 2f95db38..afac862d 100644
--- a/web_interface/static/v3/js/app-early.js
+++ b/web_interface/static/v3/js/app-early.js
@@ -1,8 +1,89 @@
 /* global debugLog */
-// Early helpers and the app() stub (must run before Alpine init)
-// Extracted from templates/v3/base.html so browsers cache it as a static asset.
-        // Helper function to get installed plugins with fallback
-        // Must be defined before app() function that uses it
+/*
+ * app-early.js -- helpers every other script relies on, and the app() stub.
+ *
+ * A blocking <script> in <head>, so everything here exists before any other
+ * script, widget or partial runs.
+ *
+ * Load order (templates/v3/base.html):
+ *   <head>, blocking:  debugLog and theme inline scripts; the htmx loader
+ *                      (injects htmx.min.js with a dynamic <script>);
+ *                      js/htmx-config.js; the loadPartialDirect fallback;
+ *                      js/app-early.js
+ *   <head>, defer:     js/app-shell.js, then js/alpinejs.min.js (Alpine
+ *                      starts as soon as it runs, so app-shell.js's app()
+ *                      is the one Alpine uses)
+ *   end of <body>, defer, in this order: app.js, js/tooltips.js,
+ *                      js/settings-search.js, js/utils/dialog.js,
+ *                      js/utils/error_handler.js, js/plugins/api_client.js,
+ *                      state_manager.js, install_manager.js, list_filter.js,
+ *                      the widget bundle (web_interface/widget_bundle.py),
+ *                      plugins_manager.js
+ *   Tab partials arrive later through htmx; their inline scripts run on
+ *   htmx:afterSwap (js/htmx-config.js).
+ *
+ * Globals:
+ *   window.LEDEscape    html / attr / jsStringAttr, the only HTML escaper
+ *   window.escapeHtml / window.escapeAttribute   aliases of LEDEscape.html /
+ *                       .attr, kept for plugin pages
+ *   window.getApp()     the root Alpine component (<body x-data="app()">)
+ *   window.app          a stub app() so Alpine can start before app-shell.js
+ *                       has run; app-shell.js replaces it with the full one
+ *                       (in the normal load order Alpine only ever sees the
+ *                       full one, see the note on the stub below)
+ *   getInstalledPluginsSafe()   installed list via PluginAPI or fetch
+ *   a pluginsUpdated listener that draws the plugin tab row while the app is
+ *   not the full implementation yet
+ */
+
+        // ===== window.LEDEscape: the web UI's HTML escaping =====
+        // This file is a blocking <script> in <head>, so every later script,
+        // widget and partial can call these directly.
+        //   html(v)          text for element content or a quoted attribute
+        //                    value: & < > " ' become entities, null and
+        //                    undefined become ''. Escaping quotes is what makes
+        //                    it attribute-safe; a textContent/innerHTML round
+        //                    trip only escapes & < and >.
+        //   attr(v)          the same function, for call sites that want the
+        //                    attribute context to read explicitly.
+        //   jsStringAttr(v)  a quoted JS string literal for an inline handler
+        //                    attribute: onclick='f(${jsStringAttr(id)})'.
+        //                    JSON.stringify alone leaves ' and & untouched, so a
+        //                    value containing ' could close a single-quoted
+        //                    attribute. The browser decodes the entities before
+        //                    it parses the handler, so the JS sees the literal.
+        window.LEDEscape = (function() {
+            const ENTITIES = new Map([['&', '&amp;'], ['<', '&lt;'], ['>', '&gt;'], ['"', '&quot;'], ["'", '&#39;']]);
+            function html(value) {
+                return value == null ? '' : String(value).replace(/[&<>"']/g, c => ENTITIES.get(c));
+            }
+            function jsStringAttr(value) {
+                return html(JSON.stringify(value == null ? '' : String(value)));
+            }
+            // An attribute value needs no more than html(): it escapes both quote characters.
+            function attr(value) {
+                return html(value);
+            }
+            return Object.freeze({ html: html, attr: attr, jsStringAttr: jsStringAttr });
+        })();
+
+        // Kept for plugin web UIs and third-party plugin pages that call them.
+        window.escapeHtml = window.LEDEscape.html;
+        window.escapeAttribute = window.LEDEscape.attr;
+
+        // ===== window.getApp(): the root Alpine component =====
+        // The data of <body x-data="app()"> (activeTab, installedPlugins, ...),
+        // read through Alpine's public Alpine.$data rather than the private
+        // el._x_dataStack. Null until Alpine has initialised the app.
+        window.getApp = function() {
+            const el = document.querySelector('[x-data="app()"]');
+            if (!el || !window.Alpine) return null;
+            const data = window.Alpine.$data(el);
+            return data && 'activeTab' in data ? data : null;
+        };
+
+        // The installed-plugin list through PluginAPI, or a plain fetch if
+        // PluginAPI (loaded later, deferred) is not there yet.
         async function getInstalledPluginsSafe() {
             if (window.PluginAPI && window.PluginAPI.getInstalledPlugins) {
                 try {
@@ -20,32 +101,19 @@
             return await response.json();
         }
 
-        // Global event listener for pluginsUpdated - works even if Alpine isn't ready yet
-        // This ensures tabs update when plugins_manager.js loads plugins
+        // Builds the plugin tab row from a pluginsUpdated event while the app is
+        // not app-shell.js's full implementation (Alpine not started yet, or
+        // still on the stub below). The full app() has its own pluginsUpdated
+        // listener, registered in its init().
         document.addEventListener('pluginsUpdated', function(event) {
+            const appComponent = window.getApp();
+            if (appComponent && typeof appComponent._doUpdatePluginTabs === 'function') return;
             debugLog('[GLOBAL] Received pluginsUpdated event:', event.detail?.plugins?.length || 0, 'plugins');
             const plugins = event.detail?.plugins || [];
-            
-            // Update window.installedPlugins
-            window.installedPlugins = plugins;
-            
-            // Try to update Alpine component if it exists (only if using full implementation)
-            if (window.Alpine) {
-                const appElement = document.querySelector('[x-data="app()"]');
-                if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-                    const appComponent = appElement._x_dataStack[0];
-                    appComponent.installedPlugins = plugins;
-                    // Only call updatePluginTabs if it's the full implementation (has _doUpdatePluginTabs)
-                    if (typeof appComponent.updatePluginTabs === 'function' && 
-                        appComponent.updatePluginTabs.toString().includes('_doUpdatePluginTabs')) {
-                        debugLog('[GLOBAL] Updating plugin tabs via Alpine component (full implementation)');
-                        appComponent.updatePluginTabs();
-                        return; // Full implementation handles it, don't do direct update
-                    }
-                }
+            if (appComponent) {
+                appComponent.installedPlugins = plugins;
             }
-            
-            // Only do direct DOM update if full implementation isn't available yet
+
             const pluginTabsRow = document.getElementById('plugin-tabs-row');
             const pluginTabsNav = pluginTabsRow?.querySelector('nav');
             if (pluginTabsRow && pluginTabsNav && plugins.length > 0) {
@@ -60,15 +128,11 @@
                     tabButton.setAttribute('data-plugin-id', plugin.id);
                     tabButton.className = `plugin-tab nav-tab`;
                     tabButton.onclick = function() {
-                        // Try to set activeTab via Alpine if available
-                        if (window.Alpine) {
-                            const appElement = document.querySelector('[x-data="app()"]');
-                            if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-                                appElement._x_dataStack[0].activeTab = plugin.id;
-                                // Only call updatePluginTabStates if it exists
-                                if (typeof appElement._x_dataStack[0].updatePluginTabStates === 'function') {
-                                    appElement._x_dataStack[0].updatePluginTabStates();
-                                }
+                        const app = window.getApp();
+                        if (app) {
+                            app.activeTab = plugin.id;
+                            if (typeof app.updatePluginTabStates === 'function') {
+                                app.updatePluginTabStates();
                             }
                         }
                     };
@@ -89,8 +153,13 @@
         // Guard flag to prevent duplicate stub-to-full enhancement
         window._appEnhanced = false;
 
-        // Define app() function early so Alpine can find it when it initializes
-        // This is a complete implementation that will work immediately
+        // The stub app(). If Alpine initialises before app-shell.js has run,
+        // this object is what it gets; its init() copies the full
+        // implementation in as soon as app-shell.js has replaced window.app
+        // (the "enhancement", guarded by window._appEnhanced), and draws the
+        // plugin tabs itself until then. base.html now loads app-shell.js
+        // before Alpine, so in practice Alpine calls the full app() directly
+        // and this stub never runs.
         (function() {
             const isAPMode = window.location.hostname === '192.168.4.1' || 
                            window.location.hostname.startsWith('192.168.4.');
@@ -349,8 +418,7 @@
                             debugLog('[STUB] updatePluginTabs: Added', this.installedPlugins.length, 'plugin tabs');
                         }, 100);
                     },
-                    showNotification: function(message, type) {},
-                    escapeHtml: function(text) { return String(text || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
+                    showNotification: function(message, type) {}
                 };
             };
         })();
diff --git a/web_interface/static/v3/js/app-shell.js b/web_interface/static/v3/js/app-shell.js
index 5e815997..60937887 100644
--- a/web_interface/static/v3/js/app-shell.js
+++ b/web_interface/static/v3/js/app-shell.js
@@ -1,6 +1,54 @@
-/* global debugLog */
-// SSE wiring + full Alpine app() implementation and tab logic
-// Extracted from templates/v3/base.html so browsers cache it as a static asset.
+/* global debugLog, showNotification, htmx */
+/*
+ * app-shell.js -- the page shell: the Alpine app(), tab loading, live
+ * streams, header stats, and the handlers the plugin config tab calls.
+ *
+ * Deferred, and placed before alpinejs.min.js so window.app is the full
+ * implementation by the time Alpine starts, and the alpine:init listener
+ * (Alpine stores) is registered first.
+ *
+ * Load order (templates/v3/base.html):
+ *   <head>, blocking:  debugLog and theme inline scripts; the htmx loader
+ *                      (injects htmx.min.js with a dynamic <script>);
+ *                      js/htmx-config.js; the loadPartialDirect fallback;
+ *                      js/app-early.js
+ *   <head>, defer:     js/app-shell.js, then js/alpinejs.min.js (Alpine
+ *                      starts as soon as it runs, so app-shell.js's app()
+ *                      is the one Alpine uses)
+ *   end of <body>, defer, in this order: app.js, js/tooltips.js,
+ *                      js/settings-search.js, js/utils/dialog.js,
+ *                      js/utils/error_handler.js, js/plugins/api_client.js,
+ *                      state_manager.js, install_manager.js, list_filter.js,
+ *                      the widget bundle (web_interface/widget_bundle.py),
+ *                      plugins_manager.js
+ *   Tab partials arrive later through htmx; their inline scripts run on
+ *   htmx:afterSwap (js/htmx-config.js).
+ *
+ * Globals:
+ *   window.app                  the root component: activeTab, plugin tab
+ *                               row, loadTabContent (htmx, with a
+ *                               loadPartialDirect fallback)
+ *   window.LEDVisibility        run a partial's timers only while its tab is
+ *                               active and the page is visible
+ *   window.LEDStreams           the one owner of the stats and display SSE
+ *                               streams (window.statsSource / displaySource)
+ *   window.showNotification     a queueing stand-in until the notification
+ *                               widget loads
+ *   Alpine stores 'onDemand' and 'plugins'
+ *   Template handlers: fixInvalidNumberInputs, validatePluginConfigForm,
+ *     handleConfigSave, handleToggleResponse, handlePluginUpdate,
+ *     refreshPluginConfig, runPluginOnDemand, stopOnDemand,
+ *     dismissPowerWarningBanner, takeScreenshot
+ *   Plain functions other scripts and the Overview partial call:
+ *     updateSystemStats, updateDisplayPreview, renderLedDots, drawGrid,
+ *     updatePlugin (the plugin card's Update button)
+ */
+// htmx:responseError on a tab panel: marks the load as failed so the tab
+// is not stamped data-loaded and reloads on the next visit (see loadTabContent).
+function markPanelLoadFailed(event) {
+    event.currentTarget.setAttribute('data-load-failed', 'true');
+}
+
         function _setConnectionStatus(connected, reconnecting, paused) {
             const el = document.getElementById('connection-status');
             if (!el) return;
@@ -30,8 +78,7 @@
 
         var _statsErrorCount = 0;
 
-        // Kept on window for backward compatibility; LEDStreams attaches them
-        // to every EventSource it opens.
+        // LEDStreams attaches these to every EventSource it opens.
         window._statsOpenHandler = function() {
             _statsErrorCount = 0;
             _setConnectionStatus(true, false);
@@ -61,9 +108,8 @@
             let lastTab = null;
 
             function activeTab() {
-                const el = document.querySelector('[x-data="app()"]');
-                const data = el && el._x_dataStack && el._x_dataStack[0];
-                return (data && data.activeTab) || lastTab;
+                const app = window.getApp();
+                return (app && app.activeTab) || lastTab;
             }
             function isActive(tab) {
                 return !document.hidden && activeTab() === tab;
@@ -208,9 +254,6 @@
             return { refresh: refresh, reconnect: reconnect, isOpen: function(name) { return !!open[name]; } };
         })();
 
-        // Public helper (previously duplicated in app.js).
-        window.reconnectSSE = function() { window.LEDStreams.reconnect(); };
-
         // Header stats start immediately; the display stream opens once the
         // active tab is known (Alpine init dispatches ledmatrix:tab-changed).
         window.LEDStreams.refresh();
@@ -299,46 +342,33 @@
             }
         }
 
+        // A metric the server could not read arrives as null (off a Pi there is
+        // no CPU temperature); show the same '--' placeholder the page starts
+        // with rather than "null°C".
+        function statText(value, unit) {
+            return (value == null ? '--' : value) + unit;
+        }
+
         function updateSystemStats(data) {
-            // Update CPU in header
-            const cpuEl = document.getElementById('cpu-stat');
-            if (cpuEl && data.cpu_percent !== undefined) {
-                const spans = cpuEl.querySelectorAll('span');
-                if (spans.length > 0) spans[spans.length - 1].textContent = data.cpu_percent + '%';
-            }
+            // Header: the value is the last <span> inside each stat.
+            const header = [['cpu-stat', data.cpu_percent, '%'],
+                            ['memory-stat', data.memory_used_percent, '%'],
+                            ['temp-stat', data.cpu_temp, '°C']];
+            header.forEach(([id, value, unit]) => {
+                const spans = document.getElementById(id)?.querySelectorAll('span');
+                if (spans && spans.length > 0) spans[spans.length - 1].textContent = statText(value, unit);
+            });
 
-            // Update Memory in header
-            const memEl = document.getElementById('memory-stat');
-            if (memEl && data.memory_used_percent !== undefined) {
-                const spans = memEl.querySelectorAll('span');
-                if (spans.length > 0) spans[spans.length - 1].textContent = data.memory_used_percent + '%';
-            }
-
-            // Update Temperature in header
-            const tempEl = document.getElementById('temp-stat');
-            if (tempEl && data.cpu_temp !== undefined) {
-                const spans = tempEl.querySelectorAll('span');
-                if (spans.length > 0) spans[spans.length - 1].textContent = data.cpu_temp + '°C';
-            }
-
-            // Update Power (under-voltage / throttling) status in header + banner
             updatePowerStatus(data.power);
 
-            // Update Overview tab stats (if visible)
-            const cpuUsageEl = document.getElementById('cpu-usage');
-            if (cpuUsageEl && data.cpu_percent !== undefined) {
-                cpuUsageEl.textContent = data.cpu_percent + '%';
-            }
-
-            const memUsageEl = document.getElementById('memory-usage');
-            if (memUsageEl && data.memory_used_percent !== undefined) {
-                memUsageEl.textContent = data.memory_used_percent + '%';
-            }
-
-            const cpuTempEl = document.getElementById('cpu-temp');
-            if (cpuTempEl && data.cpu_temp !== undefined) {
-                cpuTempEl.textContent = data.cpu_temp + '°C';
-            }
+            // Overview tab (only present while it is loaded)
+            const overview = [['cpu-usage', data.cpu_percent, '%'],
+                              ['memory-usage', data.memory_used_percent, '%'],
+                              ['cpu-temp', data.cpu_temp, '°C']];
+            overview.forEach(([id, value, unit]) => {
+                const el = document.getElementById(id);
+                if (el) el.textContent = statText(value, unit);
+            });
 
             const displayStatusEl = document.getElementById('display-status');
             if (displayStatusEl) {
@@ -404,17 +434,8 @@
         });
 
 
-        // Alpine.js app function - full implementation
+        // The full app(). Alpine calls it for <body x-data="app()">.
         function app() {
-            // If Alpine is already initialized, get the current component and enhance it
-            let baseComponent = {};
-            if (window.Alpine) {
-                const appElement = document.querySelector('[x-data]');
-                if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-                    baseComponent = appElement._x_dataStack[0];
-                }
-            }
-            
             const fullImplementation = {
                 activeTab: (function() {
                     // Auto-open WiFi tab when in AP mode (192.168.4.x)
@@ -426,7 +447,6 @@
                 installedPlugins: [],
 
                 init() {
-                    // Prevent multiple initializations
                     if (this._initialized) {
                         return;
                     }
@@ -489,7 +509,6 @@
                         });
                     });
 
-                    // Load initial tab content
                     this.$nextTick(() => {
                         this.loadTabContent(this.activeTab);
                         if (typeof window.updateNavAriaCurrent === 'function') {
@@ -500,7 +519,8 @@
                         }));
                     });
 
-                    // Listen for plugin updates from pluginManager
+                    // The installed list is published by renderInstalledPlugins
+                    // (plugins_manager.js) with one pluginsUpdated event.
                     document.addEventListener('pluginsUpdated', (event) => {
                         debugLog('Received pluginsUpdated event:', event.detail.plugins.length, 'plugins');
                         this.installedPlugins = event.detail.plugins;
@@ -561,19 +581,30 @@
 
                     // htmx.ajax issues the request and swaps the response into the panel
                     // directly, so it works even before htmx has wired up the element's
-                    // hx-trigger listeners. data-loaded is stamped on success so the panel
-                    // loads once; the activeTab check drops loads for a tab the user navigated
-                    // away from while htmx was still loading (avoids fetching hidden panels).
+                    // hx-trigger listeners. The panel is the request's source as well as
+                    // its target, so htmx fires its events on the panel and the panel's
+                    // hx-on::response-error handler runs. htmx resolves the promise even on
+                    // an error status, so data-loaded is stamped only when no
+                    // htmx:responseError fired; a failed panel reloads on the next visit.
+                    // The activeTab check drops loads for a tab the user navigated away
+                    // from while htmx was still loading (avoids fetching hidden panels).
                     const swap = contentEl.getAttribute('hx-swap') || 'innerHTML';
                     const load = () => {
                         if (this.activeTab !== tab || contentEl.hasAttribute('data-loaded')) {
                             contentEl.removeAttribute('data-loading');
                             return;
                         }
-                        return htmx.ajax('GET', url, { target: contentEl, swap: swap })
-                            .then(() => contentEl.setAttribute('data-loaded', 'true'))
-                            .catch(() => {}) // leave unstamped on failure so it can retry
-                            .finally(() => contentEl.removeAttribute('data-loading'));
+                        contentEl.removeAttribute('data-load-failed');
+                        contentEl.addEventListener('htmx:responseError', markPanelLoadFailed, { once: true });
+                        return htmx.ajax('GET', url, { source: contentEl, target: contentEl, swap: swap })
+                            .then(() => {
+                                if (!contentEl.hasAttribute('data-load-failed')) contentEl.setAttribute('data-loaded', 'true');
+                            })
+                            .catch(() => {}) // network failure: leave unstamped so it can retry
+                            .finally(() => {
+                                contentEl.removeEventListener('htmx:responseError', markPanelLoadFailed);
+                                contentEl.removeAttribute('data-loading');
+                            });
                     };
 
                     if (typeof htmx !== 'undefined') {
@@ -581,8 +612,8 @@
                         return;
                     }
 
-                    // htmx is loaded from a CDN and may not be ready yet. Poll until it is,
-                    // then load; if it never arrives, fall back to a direct fetch.
+                    // base.html injects htmx with a dynamic <script>, so it can arrive
+                    // after Alpine starts. Poll for it; if it never arrives, fetch directly.
                     let tries = 0;
                     const timer = setInterval(() => {
                         if (typeof htmx !== 'undefined') {
@@ -591,25 +622,7 @@
                         } else if (++tries > 100) { // ~10s
                             clearInterval(timer);
                             contentEl.removeAttribute('data-loading');
-                            if (tab === 'overview' && typeof loadOverviewDirect === 'function') loadOverviewDirect();
-                            else if (tab === 'wifi' && typeof loadWifiDirect === 'function') loadWifiDirect();
-                            else if (tab === 'plugins' && typeof loadPluginsDirect === 'function') loadPluginsDirect();
-                            else if (tab === 'tools') {
-                                fetch('/v3/partials/tools')
-                                    .then(r => {
-                                        if (!r.ok) throw new Error(r.status + ' ' + r.statusText);
-                                        return r.text();
-                                    })
-                                    .then(html => {
-                                        contentEl.innerHTML = html;
-                                        contentEl.setAttribute('data-loaded', 'true');
-                                        if (window.Alpine) window.Alpine.initTree(contentEl);
-                                    })
-                                    .catch(err => {
-                                        console.error('Failed to load tools content:', err);
-                                        contentEl.innerHTML = '<div class="bg-red-50 border border-red-200 rounded-lg p-4"><p class="text-red-800">Failed to load Tools. Please refresh the page.</p></div>';
-                                    });
-                            }
+                            window.loadPartialDirect(contentEl.id, url);
                         }
                     }, 100);
                 },
@@ -653,25 +666,13 @@
                     }
                 },
 
+                // Rebuilds the plugin tab row now. app-early.js recognises the
+                // full implementation by the _doUpdatePluginTabs name in this
+                // method's source, so keep the call spelled out.
                 updatePluginTabs(retryCount = 0) {
-                    debugLog('[FULL] updatePluginTabs called (retryCount:', retryCount, ')');
-                    const maxRetries = 5;
-
-                    // Debounce: Clear any pending update
-                    if (this._updatePluginTabsTimeout) {
-                        clearTimeout(this._updatePluginTabsTimeout);
-                    }
-                    
-                    // For first call or retries, execute immediately to ensure tabs appear quickly
-                    if (retryCount === 0) {
-                        // First call - execute immediately, then debounce subsequent calls
-                        this._doUpdatePluginTabs(retryCount);
-                    } else {
-                        // Retry - execute immediately
-                        this._doUpdatePluginTabs(retryCount);
-                    }
+                    this._doUpdatePluginTabs(retryCount);
                 },
-                
+
                 _doUpdatePluginTabs(retryCount = 0) {
                     const maxRetries = 5;
 
@@ -709,7 +710,6 @@
                         return;
                     }
                     
-                    // Store the current plugin IDs for next comparison
                     this._lastRenderedPluginIds = currentPluginIds;
 
                     const pluginTabsRow = document.getElementById('plugin-tabs-row');
@@ -741,16 +741,13 @@
 
                     debugLog(`[FULL] Updating plugin tabs for ${pluginsToShow.length} plugins`);
 
-                    // Always show the plugin tabs row (Plugin Manager should always be available)
-                    debugLog('[FULL] Ensuring plugin tabs row is visible');
+                    // The row also holds the Plugin Manager tab, so it is always shown.
                     pluginTabsRow.style.display = 'block';
 
-                    // Clear existing plugin tabs (except the Plugin Manager tab)
                     const existingTabs = pluginTabsNav.querySelectorAll('.plugin-tab');
                     debugLog(`[FULL] Removing ${existingTabs.length} existing plugin tabs`);
                     existingTabs.forEach(tab => tab.remove());
 
-                    // Add tabs for each installed plugin
                     debugLog('[FULL] Adding tabs for plugins:', pluginsToShow.map(p => p.id));
                     pluginsToShow.forEach(plugin => {
                         const tabButton = document.createElement('button');
@@ -773,7 +770,6 @@
                         const labelNode = document.createTextNode(plugin.name || plugin.id);
                         tabButton.replaceChildren(iconEl, labelNode);
 
-                        // Insert before the closing </nav> tag
                         pluginTabsNav.appendChild(tabButton);
                         debugLog('[FULL] Added tab for plugin:', plugin.id);
                     });
@@ -782,7 +778,6 @@
                 },
 
                 updatePluginTabStates() {
-                    // Update active state of all plugin tabs when activeTab changes
                     const pluginTabsNav = document.getElementById('plugin-tabs-row')?.querySelector('nav');
                     if (!pluginTabsNav) return;
                     
@@ -798,546 +793,26 @@
                 },
 
                 showNotification(message, type = 'info') {
-                    // Use global notification widget
-                    if (typeof window.showNotification === 'function') {
-                        window.showNotification(message, type);
-                    } else {
-                        debugLog(`[${type.toUpperCase()}]`, message);
-                    }
-                },
-
-                // Quotes too, so the result is safe inside a quoted attribute
-                // value -- the textContent/innerHTML round-trip alone only
-                // escapes &, < and >.
-                escapeHtml(text) {
-                    const div = document.createElement('div');
-                    div.textContent = text;
-                    return div.innerHTML
-                        .replace(/"/g, '&quot;')
-                        .replace(/'/g, '&#39;');
-                },
-
-                async refreshPlugins() {
-                    await this.loadInstalledPlugins();
-                    await this.searchPluginStore();
-                    this.showNotification('Plugin list refreshed', 'success');
-                },
-
-
-
-                async loadPluginConfig(pluginId) {
-                    debugLog('Loading config for plugin:', pluginId);
-                    this.loading = true;
-
-                    try {
-                        // Load config, schema, and installed plugins (for web_ui_actions) in parallel
-                        // Use batched API if available for better performance
-                        let configData, schemaData, pluginsData;
-                        
-                        if (window.PluginAPI && window.PluginAPI.batch) {
-                            // PluginAPI.batch returns already-parsed JSON objects
-                            try {
-                                const results = await window.PluginAPI.batch([
-                                    {endpoint: `/plugins/config?plugin_id=${encodeURIComponent(pluginId)}`, method: 'GET'},
-                                    {endpoint: `/plugins/schema?plugin_id=${encodeURIComponent(pluginId)}`, method: 'GET'},
-                                    {endpoint: '/plugins/installed', method: 'GET'}
-                                ]);
-                                [configData, schemaData, pluginsData] = results;
-                            } catch (batchError) {
-                                console.error('Batch API request failed, falling back to individual requests:', batchError);
-                                // Fall back to individual requests
-                                const [configResponse, schemaResponse, pluginsResponse] = await Promise.all([
-                                    fetch(`/api/v3/plugins/config?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
-                                    fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
-                                    fetch(`/api/v3/plugins/installed`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message }))
-                                ]);
-                                configData = configResponse;
-                                schemaData = schemaResponse;
-                                pluginsData = pluginsResponse;
-                            }
-                        } else {
-                            // Direct fetch returns Response objects that need parsing
-                            const [configResponse, schemaResponse, pluginsResponse] = await Promise.all([
-                                fetch(`/api/v3/plugins/config?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
-                                fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message })),
-                                fetch(`/api/v3/plugins/installed`).then(r => r.json()).catch(e => ({ status: 'error', message: e.message }))
-                            ]);
-                            configData = configResponse;
-                            schemaData = schemaResponse;
-                            pluginsData = pluginsResponse;
-                        }
-
-                        if (configData && configData.status === 'success') {
-                            this.config = configData.data;
-                        } else {
-                            console.warn('Config API returned non-success status:', configData);
-                            // Set defaults if config failed to load
-                            this.config = { enabled: true, display_duration: 30 };
-                        }
-
-                        if (schemaData && schemaData.status === 'success') {
-                            this.schema = schemaData.data.schema || {};
-                        } else {
-                            console.warn('Schema API returned non-success status:', schemaData);
-                            // Set empty schema as fallback
-                            this.schema = {};
-                        }
-
-                        // Extract web_ui_actions from installed plugins and update plugin data
-                        if (pluginsData && pluginsData.status === 'success' && pluginsData.data && pluginsData.data.plugins) {
-                            // Update window.installedPlugins with fresh data (includes commit info)
-                            // The setter will check if data actually changed before updating tabs
-                            window.installedPlugins = pluginsData.data.plugins;
-                            // Update Alpine.js app data
-                            this.installedPlugins = pluginsData.data.plugins;
-                            
-                            const pluginInfo = pluginsData.data.plugins.find(p => p.id === pluginId);
-                            this.webUiActions = pluginInfo ? (pluginInfo.web_ui_actions || []) : [];
-                            debugLog('[DEBUG] Loaded web_ui_actions for', pluginId, ':', this.webUiActions.length, 'actions');
-                            debugLog('[DEBUG] Updated plugin data with commit info:', pluginInfo ? {
-                                last_commit: pluginInfo.last_commit,
-                                branch: pluginInfo.branch,
-                                last_updated: pluginInfo.last_updated
-                            } : 'plugin not found');
-                        } else {
-                            console.warn('Plugins API returned non-success status:', pluginsData);
-                            this.webUiActions = [];
-                        }
-
-                        debugLog('Loaded config, schema, and actions for', pluginId);
-                    } catch (error) {
-                        console.error('Error loading plugin config:', error);
-                        this.config = { enabled: true, display_duration: 30 };
-                        this.schema = {};
-                        this.webUiActions = [];
-                    } finally {
-                        this.loading = false;
-                    }
-                },
-
-                // Helper function to get schema property type for a field path
-                getSchemaPropertyType(schema, path) {
-                    if (!schema || !schema.properties) return null;
-                    
-                    const parts = path.split('.');
-                    let current = schema.properties;
-                    
-                    for (let i = 0; i < parts.length; i++) {
-                        const part = parts[i];
-                        if (current && current[part]) {
-                            if (i === parts.length - 1) {
-                                return current[part];
-                            } else if (current[part].properties) {
-                                current = current[part].properties;
-                            } else {
-                                return null;
-                            }
-                        } else {
-                            return null;
-                        }
-                    }
-                    return null;
-                },
-
-                // Helper function to escape CSS selector special characters
-                escapeCssSelector(str) {
-                    if (typeof str !== 'string') {
-                        str = String(str);
-                    }
-                    // Use CSS.escape() when available (handles unicode, leading digits, and edge cases)
-                    if (typeof CSS !== 'undefined' && CSS.escape) {
-                        return CSS.escape(str);
-                    }
-                    // Fallback to regex-based escaping for older browsers
-                    // First, handle leading digits and whitespace (must be done before regex)
-                    let escaped = str;
-                    let hasLeadingHexEscape = false;
-                    if (escaped.length > 0) {
-                        const firstChar = escaped[0];
-                        const firstCode = firstChar.charCodeAt(0);
-                        
-                        // Escape leading digit (0-9: U+0030-U+0039)
-                        if (firstCode >= 0x30 && firstCode <= 0x39) {
-                            const hex = firstCode.toString(16).toUpperCase().padStart(4, '0');
-                            escaped = '\\' + hex + ' ' + escaped.slice(1);
-                            hasLeadingHexEscape = true;
-                        }
-                        // Escape leading whitespace (space: U+0020, tab: U+0009, etc.)
-                        else if (/\s/.test(firstChar)) {
-                            const hex = firstCode.toString(16).toUpperCase().padStart(4, '0');
-                            escaped = '\\' + hex + ' ' + escaped.slice(1);
-                            hasLeadingHexEscape = true;
-                        }
-                    }
-                    
-                    // Escape special characters
-                    escaped = escaped.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, '\\$&');
-                    
-                    // Escape internal spaces (replace spaces with \ ), but preserve space in hex escape
-                    if (hasLeadingHexEscape) {
-                        // Skip the first 6 characters (e.g., "\0030 ") when replacing spaces
-                        escaped = escaped.slice(0, 6) + escaped.slice(6).replace(/ /g, '\\ ');
-                    } else {
-                        escaped = escaped.replace(/ /g, '\\ ');
-                    }
-                    
-                    return escaped;
-                },
-
-                async savePluginConfig(pluginId, event) {
-                    try {
-                        // Get the form element for this plugin
-                        const form = event ? event.target : null;
-                        if (!form) {
-                            throw new Error('Form element not found');
-                        }
-                        const formData = new FormData(form);
-                        const schema = this.schema || {};
-                        
-                        // First, collect all checkbox states (including unchecked ones)
-                        // Unchecked checkboxes don't appear in FormData, so we need to iterate form elements
-                        const flatConfig = {};
-                        
-                        // Process all form elements to capture all field states
-                        for (let i = 0; i < form.elements.length; i++) {
-                            const element = form.elements[i];
-                            const name = element.name;
-                            
-                            // Skip elements without names or submit buttons
-                            if (!name || element.type === 'submit' || element.type === 'button') {
-                                continue;
-                            }
-                            
-                            // Handle checkboxes explicitly (both checked and unchecked)
-                            if (element.type === 'checkbox') {
-                                // Check if this is a checkbox group (name ends with [])
-                                if (name.endsWith('[]')) {
-                                    const baseName = name.slice(0, -2); // Remove '[]' suffix
-                                    if (!flatConfig[baseName]) {
-                                        flatConfig[baseName] = [];
-                                    }
-                                    if (element.checked) {
-                                        flatConfig[baseName].push(element.value);
-                                    }
-                                } else {
-                                    // Regular checkbox (boolean)
-                                    flatConfig[name] = element.checked;
-                                }
-                            }
-                            // Handle radio buttons
-                            else if (element.type === 'radio') {
-                                if (element.checked) {
-                                    flatConfig[name] = element.value;
-                                }
-                            }
-                            // Handle select elements (including multi-select)
-                            else if (element.tagName === 'SELECT') {
-                                if (element.multiple) {
-                                    // Multi-select: get all selected options
-                                    const selectedValues = Array.from(element.selectedOptions).map(opt => opt.value);
-                                    flatConfig[name] = selectedValues;
-                                } else {
-                                    // Single select: handled by FormData, but ensure it's captured
-                                    if (!(name in flatConfig)) {
-                                        flatConfig[name] = element.value;
-                                    }
-                                }
-                            }
-                            // Handle textarea
-                            else if (element.tagName === 'TEXTAREA') {
-                                // Textarea: handled by FormData, but ensure it's captured
-                                if (!(name in flatConfig)) {
-                                    flatConfig[name] = element.value;
-                                }
-                            }
-                        }
-                        
-                        // Now process FormData for other field types
-                        for (const [key, value] of formData.entries()) {
-                            // Skip checkboxes - we already handled them above
-                            // Use querySelector to reliably find element by name (handles dot notation)
-                            const escapedKey = this.escapeCssSelector(key);
-                            const element = form.querySelector(`[name="${escapedKey}"]`);
-                            if (element && element.type === 'checkbox') {
-                                // Also skip checkbox groups (name ends with [])
-                                if (key.endsWith('[]')) {
-                                    continue; // Already processed
-                                }
-                                continue; // Already processed
-                            }
-                            // Skip multi-select - we already handled them above
-                            if (element && element.tagName === 'SELECT' && element.multiple) {
-                                continue; // Already processed
-                            }
-                            
-                            // Get schema property type if available
-                            const propSchema = this.getSchemaPropertyType(schema, key);
-                            const propType = propSchema ? propSchema.type : null;
-                            
-                            // Handle based on schema type or field name patterns
-                            if (propType === 'array') {
-                                // Check if this is a file upload widget (JSON array in hidden input)
-                                if (propSchema && propSchema['x-widget'] === 'file-upload') {
-                                    try {
-                                        // Unescape HTML entities that were escaped when setting the value
-                                        let unescapedValue = value;
-                                        if (typeof value === 'string') {
-                                            // Reverse the HTML escaping: &quot; -> ", &#39; -> ', &amp; -> &
-                                            unescapedValue = value
-                                                .replace(/&quot;/g, '"')
-                                                .replace(/&#39;/g, "'")
-                                                .replace(/&lt;/g, '<')
-                                                .replace(/&gt;/g, '>')
-                                                .replace(/&amp;/g, '&');
-                                        }
-                                        
-                                        // Try to parse as JSON
-                                        const jsonValue = JSON.parse(unescapedValue);
-                                        if (Array.isArray(jsonValue)) {
-                                            flatConfig[key] = jsonValue;
-                                            debugLog(`File upload array field ${key}: parsed JSON array with ${jsonValue.length} items`);
-                                        } else {
-                                            // Fallback to empty array
-                                            flatConfig[key] = [];
-                                        }
-                                    } catch (e) {
-                                        console.warn(`Failed to parse JSON for file upload field ${key}:`, e, 'Value:', value);
-                                        // Not valid JSON, use empty array or try comma-separated
-                                        if (value && value.trim()) {
-                                            // Try to unescape and parse again
-                                            try {
-                                                const unescaped = value
-                                                    .replace(/&quot;/g, '"')
-                                                    .replace(/&#39;/g, "'")
-                                                    .replace(/&amp;/g, '&');
-                                                const jsonValue = JSON.parse(unescaped);
-                                                if (Array.isArray(jsonValue)) {
-                                                    flatConfig[key] = jsonValue;
-                                                } else {
-                                                    flatConfig[key] = [];
-                                                }
-                                            } catch (e2) {
-                                                // If still fails, try comma-separated or empty array
-                                                const arrayValue = value.split(',').map(v => v.trim()).filter(v => v);
-                                                flatConfig[key] = arrayValue.length > 0 ? arrayValue : [];
-                                            }
-                                        } else {
-                                            flatConfig[key] = [];
-                                        }
-                                    }
-                                } else {
-                                    // Regular array: convert comma-separated string to array
-                                    const arrayValue = value ? value.split(',').map(v => v.trim()).filter(v => v) : [];
-                                    flatConfig[key] = arrayValue;
-                                }
-                            } else if (propType === 'integer' || (Array.isArray(propType) && propType.includes('integer'))) {
-                                // Handle union types - if null is allowed and value is empty, keep as empty string (backend will convert to null)
-                                if (Array.isArray(propType) && propType.includes('null') && (!value || value.trim() === '')) {
-                                    flatConfig[key] = ''; // Send empty string, backend will normalize to null
-                                } else {
-                                    const numValue = parseInt(value, 10);
-                                    flatConfig[key] = isNaN(numValue) ? (propSchema && propSchema.default !== undefined ? propSchema.default : 0) : numValue;
-                                }
-                            } else if (propType === 'number' || (Array.isArray(propType) && propType.includes('number'))) {
-                                // Handle union types - if null is allowed and value is empty, keep as empty string (backend will convert to null)
-                                if (Array.isArray(propType) && propType.includes('null') && (!value || value.trim() === '')) {
-                                    flatConfig[key] = ''; // Send empty string, backend will normalize to null
-                                } else {
-                                    const numValue = parseFloat(value);
-                                    flatConfig[key] = isNaN(numValue) ? (propSchema && propSchema.default !== undefined ? propSchema.default : 0) : numValue;
-                                }
-                            } else if (propType === 'boolean') {
-                                // Boolean from FormData (shouldn't happen for checkboxes, but handle it)
-                                flatConfig[key] = value === 'on' || value === 'true' || value === true;
-                            } else {
-                                // String or other types
-                                // Check if it's a number field by name pattern (fallback if no schema)
-                                if (!propType && (key.includes('duration') || key.includes('interval') || 
-                                    key.includes('timeout') || key.includes('teams') || key.includes('fps') ||
-                                    key.includes('bits') || key.includes('nanoseconds') || key.includes('hz'))) {
-                                    const numValue = parseFloat(value);
-                                    if (!isNaN(numValue)) {
-                                        flatConfig[key] = Number.isInteger(numValue) ? parseInt(value, 10) : numValue;
-                                    } else {
-                                        flatConfig[key] = value;
-                                    }
-                                } else {
-                                    flatConfig[key] = value;
-                                }
-                            }
-                        }
-                        
-                        // Handle unchecked checkboxes using schema (if available)
-                        if (schema && schema.properties) {
-                            const collectBooleanFields = (props, prefix = '') => {
-                                const boolFields = [];
-                                for (const [key, prop] of Object.entries(props)) {
-                                    const fullKey = prefix ? `${prefix}.${key}` : key;
-                                    if (prop.type === 'boolean') {
-                                        boolFields.push(fullKey);
-                                    } else if (prop.type === 'object' && prop.properties) {
-                                        boolFields.push(...collectBooleanFields(prop.properties, fullKey));
-                                    }
-                                }
-                                return boolFields;
-                            };
-                            
-                            const allBoolFields = collectBooleanFields(schema.properties);
-                            allBoolFields.forEach(key => {
-                                // Only set to false if the field is completely missing from flatConfig
-                                // Don't override existing false values - they're explicitly set by the user
-                                if (!(key in flatConfig)) {
-                                    flatConfig[key] = false;
-                                }
-                            });
-                        }
-                        
-                        // Convert dot notation to nested object
-                        const dotToNested = (obj) => {
-                            const result = {};
-                            for (const key in obj) {
-                                const parts = key.split('.');
-                                let current = result;
-                                for (let i = 0; i < parts.length - 1; i++) {
-                                    if (!current[parts[i]]) {
-                                        current[parts[i]] = {};
-                                    }
-                                    current = current[parts[i]];
-                                }
-                                current[parts[parts.length - 1]] = obj[key];
-                            }
-                            return result;
-                        };
-                        
-                        const config = dotToNested(flatConfig);
-                        
-                        // Save to backend
-                        const response = await fetch('/api/v3/plugins/config', {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({
-                                plugin_id: pluginId,
-                                config: config
-                            })
-                        });
-                        
-                        let data;
-                        try {
-                            data = await response.json();
-                        } catch (e) {
-                            console.error('Failed to parse JSON response:', e);
-                            console.error('Response status:', response.status, response.statusText);
-                            console.error('Response text:', await response.text());
-                            throw new Error(`Failed to parse server response: ${response.status} ${response.statusText}`);
-                        }
-                        
-                        debugLog('Response status:', response.status, 'Response OK:', response.ok);
-                        debugLog('Response data:', JSON.stringify(data, null, 2));
-                        
-                        if (!response.ok || data.status !== 'success') {
-                            let errorMessage = data.message || 'Failed to save configuration';
-                            if (data.validation_errors && Array.isArray(data.validation_errors)) {
-                                console.error('Validation errors:', data.validation_errors);
-                                errorMessage += '\n\nValidation errors:\n' + data.validation_errors.join('\n');
-                            }
-                            if (data.config_keys && data.schema_keys) {
-                                console.error('Config keys sent:', data.config_keys);
-                                console.error('Schema keys expected:', data.schema_keys);
-                                const extraKeys = data.config_keys.filter(k => !data.schema_keys.includes(k));
-                                const missingKeys = data.schema_keys.filter(k => !data.config_keys.includes(k));
-                                if (extraKeys.length > 0) {
-                                    errorMessage += '\n\nExtra keys (not in schema): ' + extraKeys.join(', ');
-                                }
-                                if (missingKeys.length > 0) {
-                                    errorMessage += '\n\nMissing keys (in schema): ' + missingKeys.join(', ');
-                                }
-                            }
-                            this.showNotification(errorMessage, 'error');
-                            console.error('Config save failed - Full error response:', JSON.stringify(data, null, 2));
-                        } else {
-                            this.showNotification('Configuration saved successfully', 'success');
-                            // Reload plugin config to reflect changes
-                            await this.loadPluginConfig(pluginId);
-                        }
-                    } catch (error) {
-                        console.error('Error saving plugin config:', error);
-                        this.showNotification('Error saving configuration: ' + error.message, 'error');
-                    }
-                },
-
-                formatCommitInfo(commit, branch) {
-                    // Handle null, undefined, or empty string
-                    const commitStr = (commit && String(commit).trim()) || '';
-                    const branchStr = (branch && String(branch).trim()) || '';
-                    
-                    if (!commitStr && !branchStr) return 'Unknown';
-                    
-                    const shortCommit = commitStr.length >= 7 ? commitStr.substring(0, 7) : commitStr;
-
-                    if (branchStr && shortCommit) {
-                        return `${branchStr} · ${shortCommit}`;
-                    }
-                    if (branchStr) {
-                        return branchStr;
-                    }
-                    if (shortCommit) {
-                        return shortCommit;
-                    }
-                    return 'Unknown';
-                },
-
-                formatDateInfo(dateString) {
-                    // Handle null, undefined, or empty string
-                    if (!dateString || !String(dateString).trim()) return 'Unknown';
-                    
-                    try {
-                        const date = new Date(dateString);
-                        // Check if date is valid
-                        if (isNaN(date.getTime())) {
-                            return 'Unknown';
-                        }
-                        
-                        const now = new Date();
-                        const diffTime = Math.abs(now - date);
-                        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-                        
-                        if (diffDays < 1) {
-                            return 'Today';
-                        } else if (diffDays < 2) {
-                            return 'Yesterday';
-                        } else if (diffDays < 7) {
-                            return `${diffDays} days ago`;
-                        } else if (diffDays < 30) {
-                            const weeks = Math.floor(diffDays / 7);
-                            return `${weeks} ${weeks === 1 ? 'week' : 'weeks'} ago`;
-                        } else {
-                            // Return formatted date for older items
-                            return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
-                        }
-                    } catch (e) {
-                        console.error('Error formatting date:', e, dateString);
-                        return 'Unknown';
-                    }
+                    window.showNotification(message, type);
                 }
             };
-            
-            // Update window.app to return full implementation
+
             window.app = function() {
                 return fullImplementation;
             };
             
-            // If Alpine is already initialized, update the existing component immediately
+            // If Alpine started on the app-early.js stub, copy the full
+            // implementation into that live component (next frame, once
+            // Alpine has finished initialising it).
             if (window.Alpine) {
-                // Use requestAnimationFrame for immediate execution without blocking
                 requestAnimationFrame(() => {
                     if (window._appEnhanced) return;
                     window._appEnhanced = true;
                     const isAPMode = window.location.hostname === '192.168.4.1' ||
                                    window.location.hostname.startsWith('192.168.4.');
                     const defaultTab = isAPMode ? 'wifi' : 'overview';
-                    const appElement = document.querySelector('[x-data]');
-                    if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-                        const existingComponent = appElement._x_dataStack[0];
+                    const existingComponent = window.getApp();
+                    if (existingComponent) {
                         // Preserve runtime state that should not be reset
                         const preservedPlugins = existingComponent.installedPlugins;
                         const preservedTab = existingComponent.activeTab;
@@ -1363,100 +838,10 @@
             return fullImplementation;
         }
         
-        // Make app() available globally
         window.app = app;
 
 
-        // ===== Nested Section Toggle =====
-        window.toggleNestedSection = function(sectionId, event) {
-            // Prevent event bubbling if event is provided
-            if (event) {
-                event.stopPropagation();
-                event.preventDefault();
-            }
-            
-            const content = document.getElementById(sectionId);
-            const icon = document.getElementById(sectionId + '-icon');
-            
-            if (!content || !icon) {
-                console.warn('[toggleNestedSection] Content or icon not found for:', sectionId);
-                return;
-            }
-            
-            // Check if content is currently collapsed (has 'collapsed' class or display:none)
-            const isCollapsed = content.classList.contains('collapsed') || 
-                                content.style.display === 'none' ||
-                                (content.style.display === '' && !content.classList.contains('expanded'));
-            
-            if (isCollapsed) {
-                // Expand the section
-                content.classList.remove('collapsed');
-                content.classList.add('expanded');
-                content.style.display = 'block';
-                content.style.overflow = 'hidden'; // Prevent content jumping during animation
-                
-                // CRITICAL FIX: Use setTimeout to ensure browser has time to layout the element
-                // When element goes from display:none to display:block, scrollHeight might be 0
-                // We need to wait for the browser to calculate the layout
-                setTimeout(() => {
-                    // Force reflow to ensure transition works
-                    void content.offsetHeight;
-                    
-                    // Now measure the actual content height after layout
-                    const scrollHeight = content.scrollHeight;
-                    if (scrollHeight > 0) {
-                        content.style.maxHeight = scrollHeight + 'px';
-                    } else {
-                        // Fallback: if scrollHeight is still 0, try measuring again after a brief delay
-                        setTimeout(() => {
-                            const retryHeight = content.scrollHeight;
-                            content.style.maxHeight = retryHeight > 0 ? retryHeight + 'px' : '500px';
-                        }, 10);
-                    }
-                }, 10);
-                
-                icon.classList.remove('fa-chevron-right');
-                icon.classList.add('fa-chevron-down');
-                
-                // After animation completes, remove max-height constraint to allow natural expansion
-                setTimeout(() => {
-                    if (content.classList.contains('expanded') && !content.classList.contains('collapsed')) {
-                        content.style.maxHeight = 'none';
-                        content.style.overflow = '';
-                    }
-                }, 320); // Slightly longer than transition duration
-            } else {
-                // Collapse the section
-                content.classList.add('collapsed');
-                content.classList.remove('expanded');
-                content.style.overflow = 'hidden'; // Prevent content jumping during animation
-                
-                // Set max-height to current scroll height first (required for smooth animation)
-                const currentHeight = content.scrollHeight;
-                content.style.maxHeight = currentHeight + 'px';
-                
-                // Force reflow to apply the height
-                void content.offsetHeight;
-                
-                // Then animate to 0
-                setTimeout(() => {
-                    content.style.maxHeight = '0';
-                }, 10);
-                
-                // Hide after transition completes
-                setTimeout(() => {
-                    if (content.classList.contains('collapsed')) {
-                        content.style.display = 'none';
-                        content.style.overflow = '';
-                    }
-                }, 320); // Match the CSS transition duration + small buffer
-                
-                icon.classList.remove('fa-chevron-down');
-                icon.classList.add('fa-chevron-right');
-            }
-        };
-
-        // ===== Display Preview Functions (from v2) =====
+        // ===== Display preview (Overview tab and the floating preview) =====
         
         function updateDisplayPreview(data) {
             const preview = document.getElementById('displayPreview');
@@ -1656,373 +1041,10 @@
             }
         }
 
-        // ===== Plugin Management Functions =====
-
-        // Make togglePluginFromTab global so Alpine.js can access it  
-        window.togglePluginFromTab = async function(pluginId, enabled) {
-            try {
-                const response = await fetch('/api/v3/plugins/toggle', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ plugin_id: pluginId, enabled })
-                });
-                const data = await response.json();
-
-                showNotification(data.message, data.status);
-
-                if (data.status === 'success') {
-                    // Update the plugin in window.installedPlugins
-                    if (window.installedPlugins) {
-                        const plugin = window.installedPlugins.find(p => p.id === pluginId);
-                        if (plugin) {
-                            plugin.enabled = enabled;
-                        }
-                    }
-                    
-                    // Refresh the plugin list to ensure both management page and config page stay in sync
-                    if (typeof loadInstalledPlugins === 'function') {
-                        loadInstalledPlugins();
-                    }
-                } else {
-                    // Revert the toggle if API call failed
-                    if (window.installedPlugins) {
-                        const plugin = window.installedPlugins.find(p => p.id === pluginId);
-                        if (plugin) {
-                            plugin.enabled = !enabled;
-                        }
-                    }
-                }
-
-            } catch (error) {
-                showNotification('Error toggling plugin: ' + error.message, 'error');
-                // Revert on error
-                if (window.installedPlugins) {
-                    const plugin = window.installedPlugins.find(p => p.id === pluginId);
-                    if (plugin) {
-                        plugin.enabled = !enabled;
-                    }
-                }
-            }
-        }
-
-        // Helper function to get schema property type for a field path
-        function getSchemaPropertyType(schema, path) {
-            if (!schema || !schema.properties) return null;
-            
-            const parts = path.split('.');
-            let current = schema.properties;
-            
-            for (let i = 0; i < parts.length; i++) {
-                const part = parts[i];
-                if (current && current[part]) {
-                    if (i === parts.length - 1) {
-                        return current[part];
-                    } else if (current[part].properties) {
-                        current = current[part].properties;
-                    } else {
-                        return null;
-                    }
-                } else {
-                    return null;
-                }
-            }
-            return null;
-        }
-
-        // Helper function to escape CSS selector special characters
-        function escapeCssSelector(str) {
-            if (typeof str !== 'string') {
-                str = String(str);
-            }
-            // Use CSS.escape() when available (handles unicode, leading digits, and edge cases)
-            if (typeof CSS !== 'undefined' && CSS.escape) {
-                return CSS.escape(str);
-            }
-            // Fallback to regex-based escaping for older browsers
-            // First, handle leading digits and whitespace (must be done before regex)
-            let escaped = str;
-            let hasLeadingHexEscape = false;
-            if (escaped.length > 0) {
-                const firstChar = escaped[0];
-                const firstCode = firstChar.charCodeAt(0);
-                
-                // Escape leading digit (0-9: U+0030-U+0039)
-                if (firstCode >= 0x30 && firstCode <= 0x39) {
-                    const hex = firstCode.toString(16).toUpperCase().padStart(4, '0');
-                    escaped = '\\' + hex + ' ' + escaped.slice(1);
-                    hasLeadingHexEscape = true;
-                }
-                // Escape leading whitespace (space: U+0020, tab: U+0009, etc.)
-                else if (/\s/.test(firstChar)) {
-                    const hex = firstCode.toString(16).toUpperCase().padStart(4, '0');
-                    escaped = '\\' + hex + ' ' + escaped.slice(1);
-                    hasLeadingHexEscape = true;
-                }
-            }
-            
-            // Escape special characters
-            escaped = escaped.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, '\\$&');
-            
-            // Escape internal spaces (replace spaces with \ ), but preserve space in hex escape
-            if (hasLeadingHexEscape) {
-                // Skip the first 6 characters (e.g., "\0030 ") when replacing spaces
-                escaped = escaped.slice(0, 6) + escaped.slice(6).replace(/ /g, '\\ ');
-            } else {
-                escaped = escaped.replace(/ /g, '\\ ');
-            }
-            
-            return escaped;
-        }
-
-        async function savePluginConfig(pluginId) {
-            try {
-                debugLog('Saving config for plugin:', pluginId);
-                
-                // Load schema for type detection
-                let schema = {};
-                try {
-                    const schemaResponse = await fetch(`/api/v3/plugins/schema?plugin_id=${pluginId}`);
-                    const schemaData = await schemaResponse.json();
-                    if (schemaData.status === 'success' && schemaData.data.schema) {
-                        schema = schemaData.data.schema;
-                    }
-                } catch (e) {
-                    console.warn('Could not load schema for type detection:', e);
-                }
-                
-                // Find the form in the active plugin tab
-                // Alpine.js hides/shows elements with display:none, so we look for the currently visible one
-                const allForms = document.querySelectorAll('form[x-on\\:submit\\.prevent]');
-                debugLog('Found forms:', allForms.length);
-                
-                let form = null;
-                for (const f of allForms) {
-                    const parent = f.closest('[x-show]');
-                    if (parent && parent.style.display !== 'none' && parent.offsetParent !== null) {
-                        form = f;
-                        debugLog('Found visible form');
-                        break;
-                    }
-                }
-                
-                if (!form) {
-                    throw new Error('Form not found for plugin ' + pluginId);
-                }
-
-                const formData = new FormData(form);
-                const flatConfig = {};
-
-                // First, collect all checkbox states (including unchecked ones)
-                // Unchecked checkboxes don't appear in FormData, so we need to iterate form elements
-                for (let i = 0; i < form.elements.length; i++) {
-                    const element = form.elements[i];
-                    const name = element.name;
-                    
-                    // Skip elements without names or submit buttons
-                    if (!name || element.type === 'submit' || element.type === 'button') {
-                        continue;
-                    }
-                    
-                    // Handle checkboxes explicitly (both checked and unchecked)
-                    if (element.type === 'checkbox') {
-                        flatConfig[name] = element.checked;
-                    }
-                    // Handle radio buttons
-                    else if (element.type === 'radio') {
-                        if (element.checked) {
-                            flatConfig[name] = element.value;
-                        }
-                    }
-                    // Handle select elements (including multi-select)
-                    else if (element.tagName === 'SELECT') {
-                        if (element.multiple) {
-                            // Multi-select: get all selected options
-                            const selectedValues = Array.from(element.selectedOptions).map(opt => opt.value);
-                            flatConfig[name] = selectedValues;
-                        } else {
-                            // Single select: handled by FormData, but ensure it's captured
-                            if (!(name in flatConfig)) {
-                                flatConfig[name] = element.value;
-                            }
-                        }
-                    }
-                    // Handle textarea
-                    else if (element.tagName === 'TEXTAREA') {
-                        // Textarea: handled by FormData, but ensure it's captured
-                        if (!(name in flatConfig)) {
-                            flatConfig[name] = element.value;
-                        }
-                    }
-                }
-
-                // Now process FormData for other field types
-                for (const [key, value] of formData.entries()) {
-                    // Skip checkboxes - we already handled them above
-                    // Use querySelector to reliably find element by name (handles dot notation)
-                    const escapedKey = escapeCssSelector(key);
-                    const element = form.querySelector(`[name="${escapedKey}"]`);
-                    if (element && element.type === 'checkbox') {
-                        continue; // Already processed
-                    }
-                    // Skip multi-select - we already handled them above
-                    if (element && element.tagName === 'SELECT' && element.multiple) {
-                        continue; // Already processed
-                    }
-                    
-                    // Get schema property type if available
-                    const propSchema = getSchemaPropertyType(schema, key);
-                    const propType = propSchema ? propSchema.type : null;
-                    
-                    // Handle based on schema type or field name patterns
-                    if (propType === 'array') {
-                        // Check if this is a file upload widget (JSON array in hidden input)
-                        if (propSchema && propSchema['x-widget'] === 'file-upload') {
-                            try {
-                                // Unescape HTML entities that were escaped when setting the value
-                                let unescapedValue = value;
-                                if (typeof value === 'string') {
-                                    // Reverse the HTML escaping: &quot; -> ", &#39; -> ', &amp; -> &
-                                    unescapedValue = value
-                                        .replace(/&quot;/g, '"')
-                                        .replace(/&#39;/g, "'")
-                                        .replace(/&lt;/g, '<')
-                                        .replace(/&gt;/g, '>')
-                                        .replace(/&amp;/g, '&');
-                                }
-                                
-                                try {
-                                    const jsonValue = JSON.parse(unescapedValue);
-                                    if (Array.isArray(jsonValue)) {
-                                        flatConfig[key] = jsonValue;
-                                        debugLog(`File upload array field ${key}: parsed JSON array with ${jsonValue.length} items`);
-                                    } else {
-                                        // Fallback to empty array
-                                        flatConfig[key] = [];
-                                    }
-                                } catch (e) {
-                                    console.warn(`Failed to parse JSON for file upload field ${key}:`, e, 'Value:', value);
-                                    // Fallback to empty array
-                                    flatConfig[key] = [];
-                                }
-                            } catch (e) {
-                                // Not valid JSON, use empty array or try comma-separated
-                                if (value && value.trim()) {
-                                    const arrayValue = value.split(',').map(v => v.trim()).filter(v => v);
-                                    flatConfig[key] = arrayValue;
-                                } else {
-                                    flatConfig[key] = [];
-                                }
-                            }
-                        } else {
-                            // Regular array: convert comma-separated string to array
-                            const arrayValue = value ? value.split(',').map(v => v.trim()).filter(v => v) : [];
-                            flatConfig[key] = arrayValue;
-                        }
-                    } else if (propType === 'integer') {
-                        const numValue = parseInt(value, 10);
-                        flatConfig[key] = isNaN(numValue) ? (propSchema && propSchema.default !== undefined ? propSchema.default : 0) : numValue;
-                    } else if (propType === 'number') {
-                        const numValue = parseFloat(value);
-                        flatConfig[key] = isNaN(numValue) ? (propSchema && propSchema.default !== undefined ? propSchema.default : 0) : numValue;
-                    } else if (propType === 'boolean') {
-                        // Boolean from FormData (shouldn't happen for checkboxes, but handle it)
-                        flatConfig[key] = value === 'on' || value === 'true' || value === true;
-                    } else {
-                        // String or other types
-                        // Check if it's a number field by name pattern (fallback if no schema)
-                        if (!propType && (key.includes('duration') || key.includes('interval') || 
-                            key.includes('timeout') || key.includes('teams') || key.includes('fps') ||
-                            key.includes('bits') || key.includes('nanoseconds') || key.includes('hz'))) {
-                            const numValue = parseFloat(value);
-                            if (!isNaN(numValue)) {
-                                flatConfig[key] = Number.isInteger(numValue) ? parseInt(value, 10) : numValue;
-                            } else {
-                                flatConfig[key] = value;
-                            }
-                        } else {
-                            flatConfig[key] = value;
-                        }
-                    }
-                }
-
-                // Handle unchecked checkboxes using schema (if available)
-                if (schema && schema.properties) {
-                    const collectBooleanFields = (props, prefix = '') => {
-                        const boolFields = [];
-                        for (const [key, prop] of Object.entries(props)) {
-                            const fullKey = prefix ? `${prefix}.${key}` : key;
-                            if (prop.type === 'boolean') {
-                                boolFields.push(fullKey);
-                            } else if (prop.type === 'object' && prop.properties) {
-                                boolFields.push(...collectBooleanFields(prop.properties, fullKey));
-                            }
-                        }
-                        return boolFields;
-                    };
-                    
-                    const allBoolFields = collectBooleanFields(schema.properties);
-                    allBoolFields.forEach(key => {
-                        if (!(key in flatConfig)) {
-                            flatConfig[key] = false;
-                        }
-                    });
-                }
-
-                // Convert dot notation to nested object
-                const dotToNested = (obj) => {
-                    const result = {};
-                    for (const key in obj) {
-                        const parts = key.split('.');
-                        let current = result;
-                        for (let i = 0; i < parts.length - 1; i++) {
-                            if (!current[parts[i]]) {
-                                current[parts[i]] = {};
-                            }
-                            current = current[parts[i]];
-                        }
-                        current[parts[parts.length - 1]] = obj[key];
-                    }
-                    return result;
-                };
-
-                const config = dotToNested(flatConfig);
-
-                debugLog('Saving config for', pluginId, ':', config);
-                debugLog('Flat config before nesting:', flatConfig);
-
-                // Save to backend
-                const response = await fetch('/api/v3/plugins/config', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ plugin_id: pluginId, config })
-                });
-
-                let data;
-                try {
-                    data = await response.json();
-                } catch (e) {
-                    throw new Error(`Failed to parse server response: ${response.status} ${response.statusText}`);
-                }
-
-                if (!response.ok || data.status !== 'success') {
-                    let errorMessage = data.message || 'Failed to save configuration';
-                    if (data.validation_errors && Array.isArray(data.validation_errors)) {
-                        errorMessage += '\n\nValidation errors:\n' + data.validation_errors.join('\n');
-                    }
-                    throw new Error(errorMessage);
-                } else {
-                    showNotification(`Configuration saved for ${pluginId}`, 'success');
-                }
-
-            } catch (error) {
-                console.error('Error saving plugin configuration:', error);
-                showNotification('Error saving plugin configuration: ' + error.message, 'error');
-            }
-        }
-        
-        // Notification helper function
-        // Fix invalid number inputs before form submission
-        // This prevents "invalid form control is not focusable" errors
+        // Clamps number inputs to their min/max before a form submits, so the
+        // browser does not block the submit with "An invalid form control is
+        // not focusable" for a field the user cannot see. Called from the
+        // Display and Durations forms' onsubmit.
         window.fixInvalidNumberInputs = function(form) {
             if (!form) return;
             const allInputs = form.querySelectorAll('input[type="number"]');
@@ -2041,9 +1063,11 @@
             });
         };
         
-        // showNotification is implemented by the notification.js widget.
-        // Until it loads, this fallback queues messages; the widget shows the
-        // queue as soon as it registers (and then replaces this function).
+        // Stand-in for window.showNotification until the notification widget
+        // (widgets/notification.js, in the widget bundle) loads: it queues
+        // messages, and the widget shows the queue and replaces this function.
+        // This script runs before every other script that notifies, so callers
+        // use showNotification without checking that it exists.
         if (typeof window.showNotification !== 'function') {
             window.showNotification = function(message, type = 'info') {
                 const registry = window.LEDMatrixWidgets;
@@ -2059,341 +1083,282 @@
             };
         }
 
-        // Section toggle function - already defined earlier, but ensure it's not overwritten
-        // (duplicate definition removed - function is defined in early script block above)
+        // Plugin ids whose config tab is reloading (see refreshPluginConfig).
+        window.pluginConfigRefreshInProgress = window.pluginConfigRefreshInProgress || new Set();
 
-        // Plugin config handler functions (idempotent initialization)
-        if (!window.__pluginConfigHandlersInitialized) {
-            window.__pluginConfigHandlersInitialized = true;
-            
-            // Initialize state on window object
-            window.pluginConfigRefreshInProgress = window.pluginConfigRefreshInProgress || new Set();
-            
-            // Validate plugin config form and show helpful error messages
-            window.validatePluginConfigForm = function(form, pluginId) {
-                // Check HTML5 validation
-                if (!form.checkValidity()) {
-                    // Find all invalid fields
-                    const invalidFields = Array.from(form.querySelectorAll(':invalid'));
-                    const errors = [];
-                    let firstInvalidField = null;
-                    
-                    invalidFields.forEach((field, index) => {
-                        // Build error message
-                        let fieldName = field.name || field.id || 'field';
-                        // Make field name more readable (remove plugin ID prefix, convert dots/underscores)
-                        fieldName = fieldName.replace(new RegExp('^' + pluginId + '-'), '')
-                                            .replace(/\./g, ' → ')
-                                            .replace(/_/g, ' ')
-                                            .replace(/\b\w/g, l => l.toUpperCase()); // Capitalize words
-                        
-                        let errorMsg = field.validationMessage || 'Invalid value';
-                        
-                        // Get more specific error message based on validation state
-                        if (field.validity.valueMissing) {
-                            errorMsg = 'This field is required';
-                        } else if (field.validity.rangeUnderflow) {
-                            errorMsg = `Value must be at least ${field.min || 'the minimum'}`;
-                        } else if (field.validity.rangeOverflow) {
-                            errorMsg = `Value must be at most ${field.max || 'the maximum'}`;
-                        } else if (field.validity.stepMismatch) {
-                            errorMsg = `Value must be a multiple of ${field.step || 1}`;
-                        } else if (field.validity.typeMismatch) {
-                            errorMsg = 'Invalid format (e.g., text in number field)';
-                        } else if (field.validity.patternMismatch) {
-                            errorMsg = 'Value does not match required pattern';
-                        } else if (field.validity.tooShort) {
-                            errorMsg = `Value must be at least ${field.minLength} characters`;
-                        } else if (field.validity.tooLong) {
-                            errorMsg = `Value must be at most ${field.maxLength} characters`;
-                        } else if (field.validity.badInput) {
-                            errorMsg = 'Invalid input type';
-                        }
-                        
-                        errors.push(`${fieldName}: ${errorMsg}`);
-                        
-                        // Track first invalid field for focusing
-                        if (index === 0) {
-                            firstInvalidField = field;
-                        }
-                        
-                        // If field is in a collapsed section, expand it
-                        const nestedContent = field.closest('.nested-content');
-                        if (nestedContent && nestedContent.classList.contains('hidden')) {
-                            // Find the toggle button for this section
-                            const sectionId = nestedContent.id;
-                            if (sectionId) {
-                                // Try multiple selectors to find the toggle button
-                                const toggleBtn = document.querySelector(`button[aria-controls="${sectionId}"], button[onclick*="${sectionId}"], [data-toggle-section="${sectionId}"]`) ||
-                                                 nestedContent.previousElementSibling?.querySelector('button');
-                                if (toggleBtn && toggleBtn.onclick) {
-                                    toggleBtn.click(); // Expand the section
-                                }
-                            }
-                        }
-                    });
-                    
-                    // Focus and scroll to first invalid field after a brief delay
-                    // (allows collapsed sections to expand first)
-                    setTimeout(() => {
-                        if (firstInvalidField) {
-                            firstInvalidField.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                            firstInvalidField.focus();
-                        }
-                    }, 200);
-                    
-                    // Show error notification with details
-                    if (errors.length > 0) {
-                        // Format error message nicely
-                        const errorList = errors.slice(0, 5).join('\n'); // Show first 5 errors
-                        const moreErrors = errors.length > 5 ? `\n... and ${errors.length - 5} more error(s)` : '';
-                        const errorMessage = `Validation failed:\n${errorList}${moreErrors}`;
-                        
-                        if (typeof showNotification === 'function') {
-                            showNotification(errorMessage, 'error');
-                        } else {
-                            alert(errorMessage); // Fallback if showNotification not available
-                        }
-                        
-                        // Also log to console for debugging
-                        console.error('Form validation errors:', errors);
-                    }
-                    
-                    // Report validation failure to browser (shows native validation tooltips)
-                    form.reportValidity();
-                    
-                    return false; // Prevent form submission
-                }
-                
-                return true; // Validation passed
-            };
-            
-            // Handle config save response with detailed error logging
-            window.handleConfigSave = function(event, pluginId) {
-                const btn = event.target.querySelector('[type=submit]');
-                if (btn) btn.disabled = false;
-                
-                const xhr = event.detail.xhr;
-                const status = xhr?.status || 0;
-                
-                // Check if request was successful (2xx status codes)
-                if (status >= 200 && status < 300) {
-                    // Try to get message from response JSON
-                    let message = 'Configuration saved successfully!';
-                    try {
-                        if (xhr?.responseJSON?.message) {
-                            message = xhr.responseJSON.message;
-                        } else if (xhr?.responseText) {
-                            const responseData = JSON.parse(xhr.responseText);
-                            message = responseData.message || message;
-                        }
-                    } catch (e) {
-                        // Use default message if parsing fails
-                    }
-                    showNotification(message, 'success');
-                } else {
-                    // Request failed - log detailed error information
-                    console.error('Config save failed:', {
-                        status: status,
-                        statusText: xhr?.statusText,
-                        responseText: xhr?.responseText
-                    });
-                    
-                    // Try to parse error response
-                    let errorMessage = 'Failed to save configuration';
-                    try {
-                        if (xhr?.responseJSON) {
-                            const errorData = xhr.responseJSON;
-                            errorMessage = errorData.message || errorData.details || errorMessage;
-                            if (errorData.validation_errors) {
-                                errorMessage += ': ' + errorData.validation_errors.join(', ');
-                            }
-                        } else if (xhr?.responseText) {
-                            const errorData = JSON.parse(xhr.responseText);
-                            errorMessage = errorData.message || errorData.details || errorMessage;
-                            if (errorData.validation_errors) {
-                                errorMessage += ': ' + errorData.validation_errors.join(', ');
-                            }
-                        }
-                    } catch (e) {
-                        // If parsing fails, use status text
-                        errorMessage = xhr?.statusText || errorMessage;
-                    }
-                    
-                    showNotification(errorMessage, 'error');
-                }
-            };
-            
-            // Handle toggle response
-            window.handleToggleResponse = function(event, pluginId) {
-                const xhr = event.detail.xhr;
-                const status = xhr?.status || 0;
-                
-                if (status >= 200 && status < 300) {
-                    // Update UI in place instead of refreshing to avoid duplication
-                    const checkbox = document.getElementById(`plugin-enabled-${pluginId}`);
-                    const label = checkbox?.nextElementSibling;
-                    
-                    if (checkbox && label) {
-                        const isEnabled = checkbox.checked;
-                        label.textContent = isEnabled ? 'Enabled' : 'Disabled';
-                        label.className = `ml-2 text-sm ${isEnabled ? 'text-green-600' : 'text-gray-500'}`;
-                    }
-                    
-                    // Try to get message from response
-                    let message = 'Plugin status updated';
-                    try {
-                        if (xhr?.responseJSON?.message) {
-                            message = xhr.responseJSON.message;
-                        } else if (xhr?.responseText) {
-                            const responseData = JSON.parse(xhr.responseText);
-                            message = responseData.message || message;
-                        }
-                    } catch (e) {
-                        // Use default message
-                    }
-                    showNotification(message, 'success');
-                } else {
-                    // Revert checkbox state on error
-                    const checkbox = document.getElementById(`plugin-enabled-${pluginId}`);
-                    if (checkbox) {
-                        checkbox.checked = !checkbox.checked;
-                    }
-                    
-                    // Try to get error message from response
-                    let errorMessage = 'Failed to update plugin status';
-                    try {
-                        if (xhr?.responseJSON?.message) {
-                            errorMessage = xhr.responseJSON.message;
-                        } else if (xhr?.responseText) {
-                            const errorData = JSON.parse(xhr.responseText);
-                            errorMessage = errorData.message || errorData.details || errorMessage;
-                        }
-                    } catch (e) {
-                        // Use default message
-                    }
-                    showNotification(errorMessage, 'error');
-                }
-            };
-            
-            // Handle plugin update response
-            window.handlePluginUpdate = function(event, pluginId) {
-                const xhr = event.detail.xhr;
-                const status = xhr?.status || 0;
-                
-                // Check if request was successful (2xx status)
-                if (status >= 200 && status < 300) {
-                    // Try to parse the response to get the actual message from server
-                    let message = 'Plugin updated successfully';
-                    
-                    if (xhr && xhr.responseText) {
-                        try {
-                            const data = JSON.parse(xhr.responseText);
-                            // Use the server's message, ensuring it says "update" not "save"
-                            message = data.message || message;
-                            // Ensure message is about updating, not saving
-                            if (message.toLowerCase().includes('save') && !message.toLowerCase().includes('update')) {
-                                message = message.replace(/save/i, 'update');
-                            }
-                        } catch (e) {
-                            // If parsing fails, use default message
-                            console.warn('Could not parse update response:', e);
-                        }
-                    }
-                    
-                    showNotification(message, 'success');
-                } else {
-                    console.error('Plugin update failed:', {
-                        status: status,
-                        statusText: xhr?.statusText,
-                        responseText: xhr?.responseText
-                    });
-                    
-                    // Try to parse error response for better error message
-                    let errorMessage = 'Failed to update plugin';
-                    if (xhr?.responseText) {
-                        try {
-                            const errorData = JSON.parse(xhr.responseText);
-                            errorMessage = errorData.message || errorMessage;
-                        } catch (e) {
-                            // If parsing fails, use default
-                        }
-                    }
-                    
-                    showNotification(errorMessage, 'error');
-                }
-            };
-            
-            // Refresh plugin config (with duplicate prevention)
-            window.refreshPluginConfig = function(pluginId) {
-                // Prevent concurrent refreshes
-                if (window.pluginConfigRefreshInProgress.has(pluginId)) {
-                    return;
-                }
-                
-                const container = document.getElementById(`plugin-config-${pluginId}`);
-                if (container && window.htmx) {
-                    window.pluginConfigRefreshInProgress.add(pluginId);
-                    
-                    // Clear container first, then reload
-                    container.innerHTML = '';
-                    window.htmx.ajax('GET', `/v3/partials/plugin-config/${pluginId}`, {
-                        target: container,
-                        swap: 'innerHTML'
-                    });
-                    
-                    // Clear flag after delay
-                    setTimeout(() => {
-                        window.pluginConfigRefreshInProgress.delete(pluginId);
-                    }, 1000);
-                }
-            };
-            
-            // Plugin action handlers
-            window.runPluginOnDemand = function(pluginId) {
-                if (typeof window.openOnDemandModal === 'function') {
-                    window.openOnDemandModal(pluginId);
-                } else {
-                    showNotification('On-demand modal not available', 'error');
-                }
-            };
-            
-            window.stopOnDemand = function() {
-                if (typeof window.requestOnDemandStop === 'function') {
-                    window.requestOnDemandStop({});
-                } else {
-                    showNotification('Stop function not available', 'error');
-                }
-            };
-            
-            window.executePluginAction = function(actionId, actionIndex, pluginId) {
-                fetch(`/api/v3/plugins/action?plugin_id=${pluginId}&action_id=${actionId}`, {
-                    method: 'POST'
-                })
-                .then(r => r.json())
-                .then(data => {
-                    if (data.status === 'success') {
-                        showNotification(data.message || 'Action executed', 'success');
-                    } else {
-                        showNotification(data.message || 'Action failed', 'error');
-                    }
-                })
-                .catch(err => {
-                    showNotification('Failed to execute action', 'error');
-                });
-            };
-        }
-
-        function getAppComponent() {
-            if (window.Alpine) {
-                const appElement = document.querySelector('[x-data="app()"]');
-                if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-                    return appElement._x_dataStack[0];
-                }
+        // The parsed JSON body of an htmx request's XMLHttpRequest, or null.
+        // (XMLHttpRequest has no responseJSON; that is a jQuery property.)
+        function xhrJson(xhr) {
+            try {
+                return xhr && xhr.responseText ? JSON.parse(xhr.responseText) : null;
+            } catch (e) {
+                return null;
             }
-            return null;
         }
 
+        /**
+         * Checks a plugin config form before htmx posts it. Called from the
+         * form's onsubmit in partials/plugin_config.html
+         * (`return validatePluginConfigForm(this, pluginId)`).
+         * On failure it expands the collapsed sections holding invalid
+         * fields, focuses the first one, and shows the errors.
+         * @returns {boolean} true to let the submit (and htmx) proceed,
+         *   false to cancel it.
+         */
+        window.validatePluginConfigForm = function(form, pluginId) {
+            // Check HTML5 validation
+            if (!form.checkValidity()) {
+                // Find all invalid fields
+                const invalidFields = Array.from(form.querySelectorAll(':invalid'));
+                const errors = [];
+                let firstInvalidField = null;
+
+                invalidFields.forEach((field, index) => {
+                    // Build error message
+                    let fieldName = field.name || field.id || 'field';
+                    // Make field name more readable (remove plugin ID prefix, convert dots/underscores)
+                    fieldName = fieldName.replace(new RegExp('^' + pluginId + '-'), '')
+                                        .replace(/\./g, ' → ')
+                                        .replace(/_/g, ' ')
+                                        .replace(/\b\w/g, l => l.toUpperCase()); // Capitalize words
+
+                    let errorMsg = field.validationMessage || 'Invalid value';
+
+                    // Get more specific error message based on validation state
+                    if (field.validity.valueMissing) {
+                        errorMsg = 'This field is required';
+                    } else if (field.validity.rangeUnderflow) {
+                        errorMsg = `Value must be at least ${field.min || 'the minimum'}`;
+                    } else if (field.validity.rangeOverflow) {
+                        errorMsg = `Value must be at most ${field.max || 'the maximum'}`;
+                    } else if (field.validity.stepMismatch) {
+                        errorMsg = `Value must be a multiple of ${field.step || 1}`;
+                    } else if (field.validity.typeMismatch) {
+                        errorMsg = 'Invalid format (e.g., text in number field)';
+                    } else if (field.validity.patternMismatch) {
+                        errorMsg = 'Value does not match required pattern';
+                    } else if (field.validity.tooShort) {
+                        errorMsg = `Value must be at least ${field.minLength} characters`;
+                    } else if (field.validity.tooLong) {
+                        errorMsg = `Value must be at most ${field.maxLength} characters`;
+                    } else if (field.validity.badInput) {
+                        errorMsg = 'Invalid input type';
+                    }
+
+                    errors.push(`${fieldName}: ${errorMsg}`);
+
+                    // Track first invalid field for focusing
+                    if (index === 0) {
+                        firstInvalidField = field;
+                    }
+
+                    // If field is in a collapsed section, expand it
+                    const nestedContent = field.closest('.nested-content');
+                    if (nestedContent && nestedContent.classList.contains('hidden')) {
+                        // Find the toggle button for this section
+                        const sectionId = nestedContent.id;
+                        if (sectionId) {
+                            // Try multiple selectors to find the toggle button
+                            const toggleBtn = document.querySelector(`button[aria-controls="${sectionId}"], button[onclick*="${sectionId}"], [data-toggle-section="${sectionId}"]`) ||
+                                             nestedContent.previousElementSibling?.querySelector('button');
+                            if (toggleBtn && toggleBtn.onclick) {
+                                toggleBtn.click(); // Expand the section
+                            }
+                        }
+                    }
+                });
+
+                // Focus and scroll to first invalid field after a brief delay
+                // (allows collapsed sections to expand first)
+                setTimeout(() => {
+                    if (firstInvalidField) {
+                        firstInvalidField.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                        firstInvalidField.focus();
+                    }
+                }, 200);
+
+                // Show error notification with details
+                if (errors.length > 0) {
+                    // Format error message nicely
+                    const errorList = errors.slice(0, 5).join('\n'); // Show first 5 errors
+                    const moreErrors = errors.length > 5 ? `\n... and ${errors.length - 5} more error(s)` : '';
+                    const errorMessage = `Validation failed:\n${errorList}${moreErrors}`;
+
+                    showNotification(errorMessage, 'error');
+
+                    // Also log to console for debugging
+                    console.error('Form validation errors:', errors);
+                }
+
+                // Report validation failure to browser (shows native validation tooltips)
+                form.reportValidity();
+
+                return false; // Prevent form submission
+            }
+
+            return true; // Validation passed
+        };
+
+        /**
+         * Reports a plugin config save. Called from the config form's
+         * hx-on::after-request in partials/plugin_config.html. Re-enables
+         * the submit button and shows the server's message as a success or
+         * error notification. Returns nothing.
+         */
+        window.handleConfigSave = function(event, pluginId) {
+            const btn = event.target.querySelector('[type=submit]');
+            if (btn) btn.disabled = false;
+
+            const xhr = event.detail.xhr;
+            const status = xhr?.status || 0;
+
+            // Check if request was successful (2xx status codes)
+            if (status >= 200 && status < 300) {
+                const data = xhrJson(xhr);
+                showNotification((data && data.message) || 'Configuration saved successfully!', 'success');
+            } else {
+                // Request failed - log detailed error information
+                console.error('Config save failed:', {
+                    status: status,
+                    statusText: xhr?.statusText,
+                    responseText: xhr?.responseText
+                });
+
+                const errorData = xhrJson(xhr);
+                let errorMessage = errorData
+                    ? (errorData.message || errorData.details || 'Failed to save configuration')
+                    : ((xhr && xhr.statusText) || 'Failed to save configuration');
+                if (errorData && errorData.validation_errors) {
+                    errorMessage += ': ' + errorData.validation_errors.join(', ');
+                }
+                showNotification(errorMessage, 'error');
+            }
+        };
+
+        /**
+         * Reports the enable/disable switch on a plugin's config tab. Called
+         * from the switch's hx-on::after-request in
+         * partials/plugin_config.html. On success it relabels the switch; on
+         * failure it flips the checkbox back. Returns nothing.
+         */
+        window.handleToggleResponse = function(event, pluginId) {
+            const xhr = event.detail.xhr;
+            const status = xhr?.status || 0;
+
+            if (status >= 200 && status < 300) {
+                // Update UI in place instead of refreshing to avoid duplication
+                const checkbox = document.getElementById(`plugin-enabled-${pluginId}`);
+                const label = checkbox?.nextElementSibling;
+
+                if (checkbox && label) {
+                    const isEnabled = checkbox.checked;
+                    label.textContent = isEnabled ? 'Enabled' : 'Disabled';
+                    label.className = `ml-2 text-sm ${isEnabled ? 'text-green-600' : 'text-gray-500'}`;
+                }
+
+                const data = xhrJson(xhr);
+                showNotification((data && data.message) || 'Plugin status updated', 'success');
+            } else {
+                // Revert checkbox state on error
+                const checkbox = document.getElementById(`plugin-enabled-${pluginId}`);
+                if (checkbox) {
+                    checkbox.checked = !checkbox.checked;
+                }
+
+                const errorData = xhrJson(xhr);
+                showNotification((errorData && (errorData.message || errorData.details)) ||
+                    'Failed to update plugin status', 'error');
+            }
+        };
+
+        /**
+         * Reports the Update button on a plugin's config tab. Called from its
+         * hx-on::after-request in partials/plugin_config.html. Shows the
+         * server's message. Returns nothing.
+         */
+        window.handlePluginUpdate = function(event, pluginId) {
+            const xhr = event.detail.xhr;
+            const status = xhr?.status || 0;
+
+            // Check if request was successful (2xx status)
+            if (status >= 200 && status < 300) {
+                // Try to parse the response to get the actual message from server
+                let message = 'Plugin updated successfully';
+
+                if (xhr && xhr.responseText) {
+                    try {
+                        const data = JSON.parse(xhr.responseText);
+                        // Use the server's message, ensuring it says "update" not "save"
+                        message = data.message || message;
+                        // Ensure message is about updating, not saving
+                        if (message.toLowerCase().includes('save') && !message.toLowerCase().includes('update')) {
+                            message = message.replace(/save/i, 'update');
+                        }
+                    } catch (e) {
+                        // If parsing fails, use default message
+                        console.warn('Could not parse update response:', e);
+                    }
+                }
+
+                showNotification(message, 'success');
+            } else {
+                console.error('Plugin update failed:', {
+                    status: status,
+                    statusText: xhr?.statusText,
+                    responseText: xhr?.responseText
+                });
+
+                // Try to parse error response for better error message
+                let errorMessage = 'Failed to update plugin';
+                if (xhr?.responseText) {
+                    try {
+                        const errorData = JSON.parse(xhr.responseText);
+                        errorMessage = errorData.message || errorMessage;
+                    } catch (e) {
+                        // If parsing fails, use default
+                    }
+                }
+
+                showNotification(errorMessage, 'error');
+            }
+        };
+
+        /**
+         * Reloads a plugin's config tab from the server. Called from the
+         * Refresh button's onclick in partials/plugin_config.html. Clicks
+         * within a second of a reload are ignored. Returns nothing.
+         */
+        window.refreshPluginConfig = function(pluginId) {
+            if (window.pluginConfigRefreshInProgress.has(pluginId)) {
+                return;
+            }
+
+            const container = document.getElementById(`plugin-config-${pluginId}`);
+            if (container && window.htmx) {
+                window.pluginConfigRefreshInProgress.add(pluginId);
+
+                container.innerHTML = '';
+                window.htmx.ajax('GET', `/v3/partials/plugin-config/${pluginId}`, {
+                    target: container,
+                    swap: 'innerHTML'
+                });
+
+                setTimeout(() => {
+                    window.pluginConfigRefreshInProgress.delete(pluginId);
+                }, 1000);
+            }
+        };
+
+        // Run / Stop on-demand buttons on a plugin's config tab (onclick in
+        // partials/plugin_config.html); plugins_manager.js implements both.
+        window.runPluginOnDemand = function(pluginId) {
+            window.openOnDemandModal(pluginId);
+        };
+
+        window.stopOnDemand = function() {
+            window.requestOnDemandStop({});
+        };
+
         async function updatePlugin(pluginId) {
             try {
                 showNotification(`Updating ${pluginId}...`, 'info');
@@ -2409,7 +1374,7 @@
 
                 if (data.status === 'success') {
                     // Refresh the plugin list
-                    const appComponent = getAppComponent();
+                    const appComponent = window.getApp();
                     if (appComponent && typeof appComponent.loadInstalledPlugins === 'function') {
                         await appComponent.loadInstalledPlugins();
                     }
@@ -2419,206 +1384,4 @@
             }
         }
 
-        async function updateAllPlugins() {
-            try {
-                // Starlark apps are listed as virtual 'starlark:<id>' entries;
-                // /plugins/update does not handle them (see install_manager.js).
-                const plugins = (Array.isArray(window.installedPlugins) ? window.installedPlugins : [])
-                    .filter(p => p && typeof p.id === 'string' && !p.is_starlark_app && !p.id.startsWith('starlark:'));
-
-                if (!plugins.length) {
-                    showNotification('No installed plugins to update.', 'warning');
-                    return;
-                }
-
-                showNotification(`Checking ${plugins.length} plugin${plugins.length === 1 ? '' : 's'} for updates...`, 'info');
-
-                let successCount = 0;
-                let failureCount = 0;
-
-                for (const plugin of plugins) {
-                    const pluginId = plugin.id;
-                    const pluginName = plugin.name || pluginId;
-
-                    try {
-                        const response = await fetch('/api/v3/plugins/update', {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ plugin_id: pluginId })
-                        });
-
-                        const data = await response.json();
-                        const status = data.status || 'info';
-                        const message = data.message || `Checked ${pluginName}`;
-
-                        showNotification(message, status);
-
-                        if (status === 'success') {
-                            successCount += 1;
-                        } else {
-                            failureCount += 1;
-                        }
-                    } catch (error) {
-                        failureCount += 1;
-                        showNotification(`Error updating ${pluginName}: ${error.message}`, 'error');
-                    }
-                }
-
-                const appComponent = getAppComponent();
-                if (appComponent && typeof appComponent.loadInstalledPlugins === 'function') {
-                    await appComponent.loadInstalledPlugins();
-                }
-
-                if (failureCount === 0) {
-                    showNotification(`Finished checking ${successCount} plugin${successCount === 1 ? '' : 's'} for updates.`, 'success');
-                } else {
-                    showNotification(`Updated ${successCount} plugin${successCount === 1 ? '' : 's'} with ${failureCount} failure${failureCount === 1 ? '' : 's'}. Check logs for details.`, 'error');
-                }
-            } catch (error) {
-                console.error('Bulk plugin update failed:', error);
-                showNotification('Failed to update all plugins: ' + error.message, 'error');
-            }
-        }
-
-        window.updateAllPlugins = updateAllPlugins;
-
-
-        async function uninstallPlugin(pluginId) {
-            try {
-                // Get plugin info from window.installedPlugins
-                const plugin = window.installedPlugins ? window.installedPlugins.find(p => p.id === pluginId) : null;
-                const pluginName = plugin ? (plugin.name || pluginId) : pluginId;
-
-                if (!confirm(`Are you sure you want to uninstall ${pluginName}?`)) {
-                    return;
-                }
-
-                showNotification(`Uninstalling ${pluginName}...`, 'info');
-
-                const response = await fetch('/api/v3/plugins/uninstall', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ plugin_id: pluginId })
-                });
-                const data = await response.json();
-
-                // Check if operation was queued
-                if (data.status === 'success' && data.data && data.data.operation_id) {
-                    // Operation was queued, poll for completion
-                    const operationId = data.data.operation_id;
-                    showNotification(`Uninstall queued for ${pluginName}...`, 'info');
-                    await pollUninstallOperation(operationId, pluginId, pluginName);
-                } else if (data.status === 'success') {
-                    // Direct uninstall completed immediately
-                    showNotification(data.message || `Plugin ${pluginName} uninstalled successfully`, 'success');
-                    // Refresh the plugin list
-                    await app.loadInstalledPlugins();
-                } else {
-                    // Error response
-                    showNotification(data.message || 'Failed to uninstall plugin', data.status || 'error');
-                }
-            } catch (error) {
-                showNotification('Error uninstalling plugin: ' + error.message, 'error');
-            }
-        }
-
-        async function pollUninstallOperation(operationId, pluginId, pluginName, maxAttempts = 60, attempt = 0) {
-            if (attempt >= maxAttempts) {
-                showNotification(`Uninstall operation timed out for ${pluginName}`, 'error');
-                // Refresh plugin list to see actual state
-                await app.loadInstalledPlugins();
-                return;
-            }
-
-            try {
-                const response = await fetch(`/api/v3/plugins/operation/${operationId}`);
-                const data = await response.json();
-                
-                if (data.status === 'success' && data.data) {
-                    const operation = data.data;
-                    const status = operation.status;
-                    
-                    if (status === 'completed') {
-                        // Operation completed successfully
-                        showNotification(`Plugin ${pluginName} uninstalled successfully`, 'success');
-                        await app.loadInstalledPlugins();
-                    } else if (status === 'failed') {
-                        // Operation failed
-                        const errorMsg = operation.error || operation.message || `Failed to uninstall ${pluginName}`;
-                        showNotification(errorMsg, 'error');
-                        // Refresh plugin list to see actual state
-                        await app.loadInstalledPlugins();
-                    } else if (status === 'pending' || status === 'in_progress') {
-                        // Still in progress, poll again
-                        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait 1 second
-                        await pollUninstallOperation(operationId, pluginId, pluginName, maxAttempts, attempt + 1);
-                    } else {
-                        // Unknown status, poll again
-                        await new Promise(resolve => setTimeout(resolve, 1000));
-                        await pollUninstallOperation(operationId, pluginId, pluginName, maxAttempts, attempt + 1);
-                    }
-                } else {
-                    // Error getting operation status, try again
-                    await new Promise(resolve => setTimeout(resolve, 1000));
-                    await pollUninstallOperation(operationId, pluginId, pluginName, maxAttempts, attempt + 1);
-                }
-            } catch (error) {
-                console.error('Error polling operation status:', error);
-                // On error, refresh plugin list to see actual state
-                await app.loadInstalledPlugins();
-            }
-        }
-
-        // Assign to window for global access
-        window.uninstallPlugin = uninstallPlugin;
-
-        // Format commit information for display
-        function formatCommitInfo(commit, branch) {
-            if (!commit && !branch) return 'Unknown';
-            const shortCommit = commit ? String(commit).substring(0, 7) : '';
-            const branchText = branch ? String(branch) : '';
-
-            if (branchText && shortCommit) {
-                return `${branchText} · ${shortCommit}`;
-            }
-            if (branchText) {
-                return branchText;
-            }
-            if (shortCommit) {
-                return shortCommit;
-            }
-            return 'Latest';
-        }
-
-        // Format date for display
-        function formatDateInfo(dateString) {
-            if (!dateString) return 'Unknown';
-            
-            try {
-                const date = new Date(dateString);
-                const now = new Date();
-                const diffTime = Math.abs(now - date);
-                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-                
-                if (diffDays < 1) {
-                    return 'Today';
-                } else if (diffDays < 2) {
-                    return 'Yesterday';
-                } else if (diffDays < 7) {
-                    return `${diffDays} days ago`;
-                } else if (diffDays < 30) {
-                    const weeks = Math.floor(diffDays / 7);
-                    return `${weeks} ${weeks === 1 ? 'week' : 'weeks'} ago`;
-                } else {
-                    // Return formatted date for older items
-                    return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
-                }
-            } catch (e) {
-                return dateString;
-            }
-        }
-
-        // Make functions available to Alpine.js
-        window.formatCommitInfo = formatCommitInfo;
-        window.formatDateInfo = formatDateInfo;
 
diff --git a/web_interface/static/v3/js/htmx-config.js b/web_interface/static/v3/js/htmx-config.js
index 9b0f16a9..883c3d46 100644
--- a/web_interface/static/v3/js/htmx-config.js
+++ b/web_interface/static/v3/js/htmx-config.js
@@ -113,12 +113,15 @@
                     // that same partial would have that script still un-run
                     // when Alpine evaluates x-data, permanently failing with
                     // "wifiSetup is not defined" (Alpine does not retry).
-                    // Disable htmx's own native script re-execution so the
-                    // same script doesn't also run a second time via settle.
-                    if (typeof htmx !== 'undefined' && htmx.config) {
-                        htmx.config.allowScriptTags = false;
-                    }
+                    // htmx's own script handling is switched off here, in the
+                    // handler, rather than once at setup: base.html injects
+                    // htmx with a dynamic <script>, so at setup htmx is usually
+                    // not defined yet and the switch never took effect. htmx
+                    // then tried to run each script again in its settle phase,
+                    // found it already replaced (no parent) and threw, which
+                    // also skipped the rest of that swap's settle tasks.
                     document.body.addEventListener('htmx:afterSwap', function(event) {
+                        htmx.config.allowScriptTags = false;
                         const target = event.detail && event.detail.target;
                         if (!target || !(target instanceof Element)) return;
                         target.querySelectorAll('script').forEach(function(oldScript) {
diff --git a/web_interface/static/v3/js/plugins/api_client.js b/web_interface/static/v3/js/plugins/api_client.js
index 67e2b905..5a30e016 100644
--- a/web_interface/static/v3/js/plugins/api_client.js
+++ b/web_interface/static/v3/js/plugins/api_client.js
@@ -1,3 +1,4 @@
+/* global debugLog */
 /**
  * API client for plugin operations.
  * 
@@ -10,7 +11,6 @@ const RequestThrottler = {
     pending: new Map(),
     cache: new Map(),
     cacheTTL: 5000, // 5 seconds cache for GET requests
-    debug: false, // Set to true to enable logging
     
     /**
      * Throttle a request to prevent rapid-fire calls
@@ -19,23 +19,17 @@ const RequestThrottler = {
         // Check cache first
         const cached = this.cache.get(key);
         if (cached && (Date.now() - cached.timestamp) < this.cacheTTL) {
-            if (this.debug) {
-                console.log('[RequestThrottler] Cache hit for:', key);
-            }
+            debugLog('[RequestThrottler] Cache hit for:', key);
             return cached.data;
         }
         
         // Check if request is already pending
         if (this.pending.has(key)) {
-            if (this.debug) {
-                console.log('[RequestThrottler] Reusing pending request for:', key);
-            }
+            debugLog('[RequestThrottler] Reusing pending request for:', key);
             return this.pending.get(key);
         }
         
-        if (this.debug) {
-            console.log('[RequestThrottler] Creating new request for:', key);
-        }
+        debugLog('[RequestThrottler] Creating new request for:', key);
         
         // Create throttled request with abort support
         let abortController = null;
@@ -49,16 +43,12 @@ const RequestThrottler = {
                             data: result,
                             timestamp: Date.now()
                         });
-                        if (this.debug) {
-                            console.log('[RequestThrottler] Cached response for:', key);
-                        }
+                        debugLog('[RequestThrottler] Cached response for:', key);
                     }
                     resolve(result);
                 } catch (error) {
                     // Don't cache errors
-                    if (this.debug) {
-                        console.error('[RequestThrottler] Request failed for:', key, error);
-                    }
+                    debugLog('[RequestThrottler] Request failed for:', key, error);
                     reject(error);
                 } finally {
                     this.pending.delete(key);
@@ -74,9 +64,7 @@ const RequestThrottler = {
         // Add abort method if available
         if (abortController) {
             promise.abort = () => {
-                if (this.debug) {
-                    console.log('[RequestThrottler] Aborting request for:', key);
-                }
+                debugLog('[RequestThrottler] Aborting request for:', key);
                 abortController.abort();
                 this.pending.delete(key);
             };
@@ -97,13 +85,6 @@ const RequestThrottler = {
         }
     },
     
-    /**
-     * Enable or disable debug logging
-     */
-    setDebug(enabled) {
-        this.debug = enabled;
-    },
-    
     /**
      * Get statistics about pending requests and cache
      */
diff --git a/web_interface/static/v3/js/settings-search.js b/web_interface/static/v3/js/settings-search.js
index 42cd4b33..7502cbad 100644
--- a/web_interface/static/v3/js/settings-search.js
+++ b/web_interface/static/v3/js/settings-search.js
@@ -1,3 +1,4 @@
+/* global debugLog */
 /*
  * settings-search.js — global settings search + per-tab filter for the v3 UI.
  *
@@ -162,11 +163,7 @@
     // --- Navigation to a setting ---------------------------------------------
 
     function getAppData() {
-        var appEl = document.querySelector('[x-data="app()"]') || document.querySelector('[x-data]');
-        if (!appEl) return null;
-        if (appEl._x_dataStack && appEl._x_dataStack[0]) return appEl._x_dataStack[0];
-        if (appEl.__x && appEl.__x.$data) return appEl.__x.$data;
-        return null;
+        return window.getApp();
     }
 
     function setActiveTab(tab) {
@@ -478,5 +475,5 @@
         navigateToSetting: navigateToSetting
     };
 
-    console.log('[SettingsSearch] registered');
+    debugLog('[SettingsSearch] registered');
 })();
diff --git a/web_interface/static/v3/js/tooltips.js b/web_interface/static/v3/js/tooltips.js
index fd81bdd9..27b55176 100644
--- a/web_interface/static/v3/js/tooltips.js
+++ b/web_interface/static/v3/js/tooltips.js
@@ -1,3 +1,4 @@
+/* global debugLog */
 /*
  * tooltips.js — accessible, delegated tooltip controller for the v3 web UI.
  *
@@ -157,5 +158,5 @@
         if (currentTrigger && !document.body.contains(currentTrigger)) hide();
     });
 
-    console.log('[Tooltips] controller registered');
+    debugLog('[Tooltips] controller registered');
 })();
diff --git a/web_interface/static/v3/js/utils/error_handler.js b/web_interface/static/v3/js/utils/error_handler.js
index c5d6dacc..5cb9a6a4 100644
--- a/web_interface/static/v3/js/utils/error_handler.js
+++ b/web_interface/static/v3/js/utils/error_handler.js
@@ -139,12 +139,7 @@ function displayError(error, context = null, options = {}) {
         showErrorModal(error, context, message, suggestions, docLink);
     } else {
         // Simple notification
-        if (typeof showNotification === 'function') {
-            showNotification(fullMessage, 'error');
-        } else {
-            console.error('Error:', fullMessage);
-            alert(fullMessage);
-        }
+        showNotification(fullMessage, 'error');
     }
 }
 
@@ -289,22 +284,7 @@ function closeErrorModal() {
     }
 }
 
-/**
- * Escape HTML to prevent XSS.
- *
- * Quotes are escaped as well so the result is safe inside a quoted attribute
- * value -- the textContent/innerHTML round-trip alone only escapes &, < and >.
- */
-function escapeHtml(text) {
-    if (typeof text !== 'string') {
-        text = String(text);
-    }
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
+function escapeHtml(text) { return window.LEDEscape.html(text); }
 
 /**
  * Copy error details to clipboard.
@@ -315,16 +295,12 @@ function copyErrorDetails(error) {
     const errorText = JSON.stringify(error, null, 2);
     function copyFailed(err) {
         console.error('Failed to copy error details:', err);
-        if (typeof showNotification === 'function') {
-            showNotification("Couldn't copy to the clipboard. Open Technical details and copy the text by hand.", 'warning');
-        }
+        showNotification("Couldn't copy to the clipboard. Open Technical details and copy the text by hand.", 'warning');
     }
 
     if (navigator.clipboard && navigator.clipboard.writeText) {
         navigator.clipboard.writeText(errorText).then(() => {
-            if (typeof showNotification === 'function') {
-                showNotification('Error details copied to clipboard', 'success');
-            }
+            showNotification('Error details copied to clipboard', 'success');
         }).catch(copyFailed);
     } else {
         // Fallback for older browsers
@@ -340,9 +316,7 @@ function copyErrorDetails(error) {
         textArea.select();
         try {
             document.execCommand('copy');
-            if (typeof showNotification === 'function') {
-                showNotification('Error details copied to clipboard', 'success');
-            }
+            showNotification('Error details copied to clipboard', 'success');
         } catch (err) {
             copyFailed(err);
         }
diff --git a/web_interface/static/v3/js/widgets/README.md b/web_interface/static/v3/js/widgets/README.md
index 36378fb5..477bfb68 100644
--- a/web_interface/static/v3/js/widgets/README.md
+++ b/web_interface/static/v3/js/widgets/README.md
@@ -227,11 +227,10 @@ directory is the only place the core serves plugin widgets from.
     }
 
     const sanitizeId = (id) => String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
-    const escapeHtml = (text) => {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    };
+    // The page's shared escaper covers HTML content and quoted attribute
+    // values. A textContent/innerHTML round trip leaves quotes alone, so it
+    // is not safe inside value="...".
+    const escapeHtml = (text) => window.LEDEscape.html(text);
 
     window.LEDMatrixWidgets.register('my-custom-widget', {
         name: 'My Custom Widget',
diff --git a/web_interface/static/v3/js/widgets/array-table.js b/web_interface/static/v3/js/widgets/array-table.js
index 629f24ee..99847cd6 100644
--- a/web_interface/static/v3/js/widgets/array-table.js
+++ b/web_interface/static/v3/js/widgets/array-table.js
@@ -806,14 +806,13 @@
         const file = event.target.files && event.target.files[0];
         if (!file) return;
 
-        const notifyFn = window.showNotification || console.log;
         const allowed  = ['image/png', 'image/jpeg', 'image/bmp', 'image/gif'];
         if (!allowed.includes(file.type)) {
-            notifyFn(`File type "${file.type}" not allowed`, 'error');
+            window.showNotification(`File type "${file.type}" not allowed`, 'error');
             return;
         }
         if (file.size > 5 * 1024 * 1024) {
-            notifyFn('File exceeds 5MB limit', 'error');
+            window.showNotification('File exceeds 5MB limit', 'error');
             return;
         }
 
@@ -829,12 +828,12 @@
                 const path = data.uploaded_files[0].path;
                 pathInput.value = path;
                 if (previewImg) { previewImg.src = '/' + path; previewImg.style.display = 'inline'; }
-                notifyFn('Image uploaded', 'success');
+                window.showNotification('Image uploaded', 'success');
             } else {
                 throw new Error(data.message || 'Upload failed');
             }
         } catch (err) {
-            notifyFn('Upload error: ' + err.message, 'error');
+            window.showNotification('Upload error: ' + err.message, 'error');
         } finally {
             event.target.value = '';
         }
@@ -853,7 +852,6 @@
         addButton.style.opacity = isAtMax ? '0.5' : '';
     }
 
-    window.updateArrayTableAddButtonState = updateAddButtonState;
 
     window.addArrayTableRow = function(button) {
         const fieldId        = button.getAttribute('data-field-id');
@@ -874,7 +872,7 @@
 
         const currentRows = tbody.querySelectorAll('.array-table-row').length;
         if (currentRows >= maxItems) {
-            (window.showNotification || alert)(`Maximum ${maxItems} items allowed`, 'error');
+            window.showNotification(`Maximum ${maxItems} items allowed`, 'error');
             return;
         }
 
diff --git a/web_interface/static/v3/js/widgets/base-widget.js b/web_interface/static/v3/js/widgets/base-widget.js
index fa9e7438..52bffa8d 100644
--- a/web_interface/static/v3/js/widgets/base-widget.js
+++ b/web_interface/static/v3/js/widgets/base-widget.js
@@ -116,29 +116,14 @@
         }
         
         /**
-         * Escape HTML to prevent XSS
-         * Always escapes the input, even for non-strings, by coercing to string first
-         *
-         * The result is safe in text content AND inside quoted attribute values.
-         * The textContent/innerHTML round-trip only escapes `&`, `<` and `>` --
-         * the HTML serializer leaves quotes alone because they are harmless in a
-         * text node. Every widget here interpolates the result into attributes
-         * (`value="${escapeHtml(v)}"`), where an unescaped `"` closes the
-         * attribute and lets the value inject its own, so the quotes have to go
-         * too. Each widget's standalone fallback already did this; the shared
-         * implementation they all prefer did not.
-         *
-         * @param {*} text - Text to escape (will be coerced to string)
+         * Escape text for HTML content or a quoted attribute value.
+         * Kept for widgets that call it as a method; it is window.LEDEscape.html
+         * (app-early.js).
+         * @param {*} text - Text to escape (null/undefined become '')
          * @returns {string} Escaped text, safe for text and attribute contexts
          */
         escapeHtml(text) {
-            // Always coerce to string first, then escape
-            const textStr = String(text);
-            const div = document.createElement('div');
-            div.textContent = textStr;
-            return div.innerHTML
-                .replace(/"/g, '&quot;')
-                .replace(/'/g, '&#39;');
+            return window.LEDEscape.html(text);
         }
         
         /**
@@ -173,9 +158,7 @@
          * @returns {Function|null} Notification function or null
          */
         getNotificationFunction() {
-            if (typeof window.showNotification === 'function') {
-                return window.showNotification;
-            }
+            return window.showNotification;
             return null;
         }
         
diff --git a/web_interface/static/v3/js/widgets/checkbox-group.js b/web_interface/static/v3/js/widgets/checkbox-group.js
index 44014d63..758ed93a 100644
--- a/web_interface/static/v3/js/widgets/checkbox-group.js
+++ b/web_interface/static/v3/js/widgets/checkbox-group.js
@@ -24,15 +24,10 @@
         version: '1.0.0',
         
         /**
-         * Render the checkbox group widget
-         * Note: This widget is currently server-side rendered via Jinja2 template.
-         * This registration ensures the handlers are available globally.
+         * No-op: plugin_config.html renders this widget server-side. The
+         * registration exists for getValue/setValue and updateCheckboxGroupData.
          */
-        render: function(container, config, value, options) {
-            // For now, widgets are server-side rendered
-            // This function is a placeholder for future client-side rendering
-            if (window.debugLog) window.debugLog('[CheckboxGroupWidget] Render called (server-side rendered)');
-        },
+        render: function() {},
         
         /**
          * Get current value from widget
diff --git a/web_interface/static/v3/js/widgets/color-picker.js b/web_interface/static/v3/js/widgets/color-picker.js
index 8802b28e..2ebf6b6c 100644
--- a/web_interface/static/v3/js/widgets/color-picker.js
+++ b/web_interface/static/v3/js/widgets/color-picker.js
@@ -25,12 +25,7 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('ColorPicker', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/custom-feeds.js b/web_interface/static/v3/js/widgets/custom-feeds.js
index 753931e5..c4e30c25 100644
--- a/web_interface/static/v3/js/widgets/custom-feeds.js
+++ b/web_interface/static/v3/js/widgets/custom-feeds.js
@@ -24,15 +24,10 @@
         version: '1.0.0',
         
         /**
-         * Render the custom feeds widget
-         * Note: This widget is currently server-side rendered via Jinja2 template.
-         * This registration ensures the handlers are available globally.
+         * No-op: plugin_config.html renders this widget server-side. The
+         * registration exists for getValue/setValue and the window.* feed-table handlers.
          */
-        render: function(container, config, value, options) {
-            // For now, widgets are server-side rendered
-            // This function is a placeholder for future client-side rendering
-            if (window.debugLog) window.debugLog('[CustomFeedsWidget] Render called (server-side rendered)');
-        },
+        render: function() {},
         
         /**
          * Get current value from widget
@@ -246,8 +241,7 @@
         
         const currentRows = tbody.querySelectorAll('.custom-feed-row');
         if (currentRows.length >= maxItems) {
-            const notifyFn = window.showNotification || alert;
-            notifyFn(`Maximum ${maxItems} feeds allowed`, 'error');
+            window.showNotification(`Maximum ${maxItems} feeds allowed`, 'error');
             return;
         }
         
@@ -507,14 +501,12 @@
                     logoCell.appendChild(container);
                 }
             } else {
-                const notifyFn = window.showNotification || alert;
-                notifyFn('Upload failed: ' + (data.message || 'Unknown error'), 'error');
+                window.showNotification('Upload failed: ' + (data.message || 'Unknown error'), 'error');
             }
         })
         .catch(error => {
             console.error('Upload error:', error);
-            const notifyFn = window.showNotification || alert;
-            notifyFn('Upload failed: ' + error.message, 'error');
+            window.showNotification('Upload failed: ' + error.message, 'error');
         })
         .finally(() => {
             // Reset regardless of outcome, so the same file can be re-selected
diff --git a/web_interface/static/v3/js/widgets/date-picker.js b/web_interface/static/v3/js/widgets/date-picker.js
index f0b4c848..d9bf36bc 100644
--- a/web_interface/static/v3/js/widgets/date-picker.js
+++ b/web_interface/static/v3/js/widgets/date-picker.js
@@ -26,12 +26,7 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('DatePicker', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/day-selector.js b/web_interface/static/v3/js/widgets/day-selector.js
index 3a14ee85..5d2cc59d 100644
--- a/web_interface/static/v3/js/widgets/day-selector.js
+++ b/web_interface/static/v3/js/widgets/day-selector.js
@@ -50,12 +50,7 @@
     // Use BaseWidget utilities if available
     const base = window.BaseWidget ? new window.BaseWidget('DaySelector', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/email-input.js b/web_interface/static/v3/js/widgets/email-input.js
index f5beed4e..c53aaff1 100644
--- a/web_interface/static/v3/js/widgets/email-input.js
+++ b/web_interface/static/v3/js/widgets/email-input.js
@@ -24,12 +24,7 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('EmailInput', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/file-upload-single.js b/web_interface/static/v3/js/widgets/file-upload-single.js
index eb487e60..1996ed1f 100644
--- a/web_interface/static/v3/js/widgets/file-upload-single.js
+++ b/web_interface/static/v3/js/widgets/file-upload-single.js
@@ -33,12 +33,7 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('FileUploadSingle', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
@@ -199,7 +194,6 @@
                 const safeId = sanitizeId(fieldId);
                 const fileInput = document.getElementById(`${safeId}_file_input`);
                 const statusDiv = document.getElementById(`${safeId}_status`);
-                const notifyFn = window.showNotification || console.log;
 
                 // Read config from the file input data attributes
                 const pluginId = (fileInput && fileInput.dataset.pluginId) || '';
@@ -208,19 +202,19 @@
                     .split(',').map(t => t.trim());
 
                 if (!pluginId) {
-                    notifyFn('Plugin ID not set — cannot upload', 'error');
+                    window.showNotification('Plugin ID not set — cannot upload', 'error');
                     return;
                 }
 
                 // Validate type
                 if (!allowedTypes.includes(file.type)) {
-                    notifyFn(`File type "${file.type}" not allowed`, 'error');
+                    window.showNotification(`File type "${file.type}" not allowed`, 'error');
                     return;
                 }
 
                 // Validate size
                 if (file.size > maxSizeMb * 1024 * 1024) {
-                    notifyFn(`File exceeds ${maxSizeMb}MB limit`, 'error');
+                    window.showNotification(`File exceeds ${maxSizeMb}MB limit`, 'error');
                     return;
                 }
 
@@ -266,7 +260,7 @@
                             statusDiv.appendChild(document.createTextNode('Uploaded successfully'));
                             setTimeout(() => { statusDiv.className = 'mt-1 text-xs hidden'; statusDiv.textContent = ''; }, 3000);
                         }
-                        notifyFn('Image uploaded successfully', 'success');
+                        window.showNotification('Image uploaded successfully', 'success');
                     } else {
                         throw new Error(data.message || 'Upload failed');
                     }
@@ -279,7 +273,7 @@
                         statusDiv.appendChild(errIcon);
                         statusDiv.appendChild(document.createTextNode(error.message || 'Upload failed'));
                     }
-                    notifyFn(`Upload error: ${error.message}`, 'error');
+                    window.showNotification(`Upload error: ${error.message}`, 'error');
                 } finally {
                     if (fileInput) fileInput.value = '';
                 }
diff --git a/web_interface/static/v3/js/widgets/file-upload.js b/web_interface/static/v3/js/widgets/file-upload.js
index 3cd026dc..791f1406 100644
--- a/web_interface/static/v3/js/widgets/file-upload.js
+++ b/web_interface/static/v3/js/widgets/file-upload.js
@@ -24,16 +24,11 @@
         version: '1.0.0',
         
         /**
-         * Render the file upload widget
-         * Note: This widget is currently server-side rendered via Jinja2 template.
-         * This registration ensures the handlers are available globally.
-         * Future enhancement: Full client-side rendering support.
+         * No-op: plugin_config.html renders this widget server-side. The
+         * registration exists for getValue/setValue and the window.* handlers
+         * below.
          */
-        render: function(container, config, value, options) {
-            // For now, widgets are server-side rendered
-            // This function is a placeholder for future client-side rendering
-            if (window.debugLog) window.debugLog('[FileUploadWidget] Render called (server-side rendered)');
-        },
+        render: function() {},
         
         /**
          * Get current value from widget
@@ -142,24 +137,23 @@
             .split(',').map(e => e.trim().toLowerCase());
 
         const statusDiv = document.getElementById(`${fieldId}_upload_status`);
-        const notifyFn = window.showNotification || console.log;
 
         // Guard: endpoint must be configured
         if (!uploadEndpoint) {
-            notifyFn('No upload endpoint configured for this field', 'error');
+            window.showNotification('No upload endpoint configured for this field', 'error');
             return;
         }
 
         // Validate extension
         const fileExt = '.' + file.name.split('.').pop().toLowerCase();
         if (!allowedExtensions.includes(fileExt)) {
-            notifyFn(`File must be one of: ${allowedExtensions.join(', ')}`, 'error');
+            window.showNotification(`File must be one of: ${allowedExtensions.join(', ')}`, 'error');
             return;
         }
 
         // Validate size
         if (file.size > maxSizeMB * 1024 * 1024) {
-            notifyFn(`File exceeds ${maxSizeMB}MB limit`, 'error');
+            window.showNotification(`File exceeds ${maxSizeMB}MB limit`, 'error');
             return;
         }
 
@@ -198,7 +192,7 @@
                 // Update hidden input with the target filename
                 const hiddenInput = document.getElementById(fieldId);
                 if (hiddenInput) hiddenInput.value = targetFilename;
-                notifyFn(`${targetFilename} uploaded successfully`, 'success');
+                window.showNotification(`${targetFilename} uploaded successfully`, 'success');
             } else {
                 if (statusDiv) {
                     statusDiv.className = 'mt-2 text-xs text-red-600';
@@ -208,7 +202,7 @@
                     statusDiv.appendChild(icon);
                     statusDiv.appendChild(document.createTextNode(`Upload failed: ${data.message}`));
                 }
-                notifyFn(`Upload failed: ${data.message}`, 'error');
+                window.showNotification(`Upload failed: ${data.message}`, 'error');
             }
         } catch (error) {
             if (statusDiv) {
@@ -219,7 +213,7 @@
                 statusDiv.appendChild(icon);
                 statusDiv.appendChild(document.createTextNode(`Upload error: ${error.message}`));
             }
-            notifyFn(`Upload error: ${error.message}`, 'error');
+            window.showNotification(`Upload error: ${error.message}`, 'error');
         } finally {
             const fileInput = document.getElementById(`${fieldId}_file_input`);
             if (fileInput) fileInput.value = '';
@@ -249,23 +243,20 @@
         const validFiles = [];
         for (const file of files) {
             if (file.size > maxSizeMB * 1024 * 1024) {
-                const notifyFn = window.showNotification || console.error;
-                notifyFn(`File ${file.name} exceeds ${maxSizeMB}MB limit`, 'error');
+                window.showNotification(`File ${file.name} exceeds ${maxSizeMB}MB limit`, 'error');
                 continue;
             }
             
             if (fileType === 'json') {
                 // Validate JSON files
                 if (!file.name.toLowerCase().endsWith('.json')) {
-                    const notifyFn = window.showNotification || console.error;
-                    notifyFn(`File ${file.name} must be a JSON file (.json)`, 'error');
+                    window.showNotification(`File ${file.name} must be a JSON file (.json)`, 'error');
                     continue;
                 }
             } else {
                 // Validate image files using allowedTypes from config
                 if (!allowedTypes.includes(file.type)) {
-                    const notifyFn = window.showNotification || console.error;
-                    notifyFn(`File ${file.name} is not a valid image type`, 'error');
+                    window.showNotification(`File ${file.name} is not a valid image type`, 'error');
                     continue;
                 }
             }
@@ -275,8 +266,7 @@
         
         // Check max files AFTER building validFiles
         if (currentFiles.length + validFiles.length > maxFiles) {
-            const notifyFn = window.showNotification || console.error;
-            notifyFn(`Maximum ${maxFiles} files allowed. You have ${currentFiles.length} and tried to add ${validFiles.length}.`, 'error');
+            window.showNotification(`Maximum ${maxFiles} files allowed. You have ${currentFiles.length} and tried to add ${validFiles.length}.`, 'error');
             return;
         }
         
@@ -317,16 +307,13 @@
                     window.updateImageList(fieldId, newFiles);
                 }
                 
-                const notifyFn = window.showNotification || console.log;
-                notifyFn(`Successfully uploaded ${data.uploaded_files?.length || data.data?.files?.length || 0} ${fileType === 'json' ? 'file(s)' : 'image(s)'}`, 'success');
+                window.showNotification(`Successfully uploaded ${data.uploaded_files?.length || data.data?.files?.length || 0} ${fileType === 'json' ? 'file(s)' : 'image(s)'}`, 'success');
             } else {
-                const notifyFn = window.showNotification || console.error;
-                notifyFn(`Upload failed: ${data.message}`, 'error');
+                window.showNotification(`Upload failed: ${data.message}`, 'error');
             }
         } catch (error) {
             console.error('Upload error:', error);
-            const notifyFn = window.showNotification || console.error;
-            notifyFn(`Upload error: ${error.message}`, 'error');
+            window.showNotification(`Upload error: ${error.message}`, 'error');
         } finally {
             if (window.hideUploadProgress) {
                 window.hideUploadProgress(fieldId);
@@ -394,16 +381,13 @@
                     window.updateImageList(fieldId, newFiles);
                 }
                 
-                const notifyFn = window.showNotification || console.log;
-                notifyFn(`${fileType === 'json' ? 'File' : 'Image'} deleted successfully`, 'success');
+                window.showNotification(`${fileType === 'json' ? 'File' : 'Image'} deleted successfully`, 'success');
             } else {
-                const notifyFn = window.showNotification || console.error;
-                notifyFn(`Delete failed: ${data.message}`, 'error');
+                window.showNotification(`Delete failed: ${data.message}`, 'error');
             }
         } catch (error) {
             console.error('Delete error:', error);
-            const notifyFn = window.showNotification || console.error;
-            notifyFn(`Delete error: ${error.message}`, 'error');
+            window.showNotification(`Delete error: ${error.message}`, 'error');
         }
     };
 
@@ -492,9 +476,18 @@
         return [];
     };
 
+    // DOM id suffix for an image's card and schedule editor. Matches the
+    // template's img_id|replace('.', '_')|replace('-', '_') in
+    // plugin_config.html, so server-rendered cards (UUID ids contain '-') and
+    // cards rendered here are found by the same lookup.
+    function imageDomId(imageId) {
+        return String(imageId).replace(/[^a-zA-Z0-9_]/g, '_');
+    }
+
     /**
-     * Update image list display and hidden input
-     * Uses DOM creation to prevent XSS and preserves open schedule editors
+     * Replace the image list: writes the hidden input the form saves and
+     * re-renders the cards. A schedule editor that was open stays open,
+     * rebuilt from the new data.
      * @param {string} fieldId - Field ID
      * @param {Array} images - Array of image objects
      */
@@ -503,64 +496,41 @@
         if (hiddenInput) {
             hiddenInput.value = JSON.stringify(images);
         }
-        
-        // Update the display
+
         const imageList = document.getElementById(`${fieldId}_image_list`);
         if (!imageList) return;
-        
+
         const uploadConfig = window.getUploadConfig(fieldId);
         const pluginId = uploadConfig.plugin_id || window.currentPluginConfig?.pluginId || 'static-image';
-        
-        // Detect which schedule is currently open (if any)
-        const openScheduleId = (() => {
-            const existingItems = imageList.querySelectorAll('[id^="img_"]');
-            for (const item of existingItems) {
-                const scheduleDiv = item.querySelector('[id^="schedule_"]');
-                if (scheduleDiv && !scheduleDiv.classList.contains('hidden')) {
-                    // Extract the ID from schedule_<id>
-                    const match = scheduleDiv.id.match(/^schedule_(.+)$/);
-                    if (match) {
-                        return match[1];
-                    }
-                }
-            }
-            return null;
-        })();
-        
-        // Preserve open schedule content if it exists
-        const preservedScheduleContent = openScheduleId ? (() => {
-            const scheduleDiv = document.getElementById(`schedule_${openScheduleId}`);
-            return scheduleDiv ? scheduleDiv.innerHTML : null;
-        })() : null;
-        
-        // Clear and rebuild using DOM creation
+
+        const openEditor = imageList.querySelector('[id^="schedule_"]:not(.hidden)');
+        const openScheduleId = openEditor ? openEditor.id.slice('schedule_'.length) : null;
+
         imageList.innerHTML = '';
-        
+
         images.forEach((img, idx) => {
             const imgId = img.id || idx;
-            const sanitizedId = String(imgId).replace(/[^a-zA-Z0-9_-]/g, '_');
-            const imgSchedule = img.schedule || {};
-            const hasSchedule = imgSchedule.enabled && imgSchedule.mode && imgSchedule.mode !== 'always';
-            const scheduleSummary = hasSchedule ? (window.getScheduleSummary ? window.getScheduleSummary(imgSchedule) : 'Scheduled') : 'Always shown';
-            
-            // Create container div
+            const domId = imageDomId(imgId);
+            const label = img.original_filename || img.filename || '';
+
             const container = document.createElement('div');
-            container.id = `img_${sanitizedId}`;
+            container.id = `img_${domId}`;
             container.className = 'bg-gray-50 p-3 rounded-lg border border-gray-200';
-            
-            // Create main content div
+
             const mainDiv = document.createElement('div');
             mainDiv.className = 'flex items-center justify-between mb-2';
-            
-            // Create left section with image and info
+
             const leftSection = document.createElement('div');
             leftSection.className = 'flex items-center space-x-3 flex-1';
-            
-            // Create image element
+
             const imgEl = document.createElement('img');
-            const imgPath = String(img.path || '').replace(/^\/+/, '');
-            imgEl.src = '/' + imgPath;
+            // A stored path names a file under the project root. Encoding each
+            // segment keeps it a same-origin path whatever characters it holds.
+            imgEl.src = '/' + String(img.path || '').replace(/^\/+/, '')
+                .split('/').map(encodeURIComponent).join('/');
             imgEl.alt = String(img.filename || '');
+            imgEl.loading = 'lazy';
+            imgEl.decoding = 'async';
             imgEl.className = 'w-16 h-16 object-cover rounded';
             imgEl.addEventListener('error', function() {
                 this.style.display = 'none';
@@ -568,104 +538,120 @@
                     this.nextElementSibling.style.display = 'block';
                 }
             });
-            
-            // Create placeholder div for broken images
+
+            // Shown in place of a thumbnail that fails to load
             const placeholderDiv = document.createElement('div');
             placeholderDiv.style.display = 'none';
             placeholderDiv.className = 'w-16 h-16 bg-gray-200 rounded flex items-center justify-center';
             const placeholderIcon = document.createElement('i');
             placeholderIcon.className = 'fas fa-image text-gray-400';
             placeholderDiv.appendChild(placeholderIcon);
-            
-            // Create info div
+
             const infoDiv = document.createElement('div');
             infoDiv.className = 'flex-1 min-w-0';
-            
-            // Filename
+
             const filenameP = document.createElement('p');
             filenameP.className = 'text-sm font-medium text-gray-900 truncate';
-            filenameP.textContent = img.original_filename || img.filename || 'Image';
-            
-            // Size and date
+            filenameP.textContent = label || 'Image';
+
             const sizeDateP = document.createElement('p');
             sizeDateP.className = 'text-xs text-gray-500';
-            const fileSize = window.formatFileSize ? window.formatFileSize(img.size || 0) : (Math.round((img.size || 0) / 1024) + ' KB');
-            const uploadedDate = window.formatDate ? window.formatDate(img.uploaded_at) : (img.uploaded_at || '');
-            sizeDateP.textContent = `${fileSize} • ${uploadedDate}`;
-            
-            // Schedule summary
+            sizeDateP.textContent = `${window.formatFileSize(img.size || 0)} • ${window.formatDate(img.uploaded_at)}`;
+
             const scheduleP = document.createElement('p');
-            scheduleP.className = 'text-xs text-blue-600 mt-1';
-            const clockIcon = document.createElement('i');
-            clockIcon.className = 'fas fa-clock mr-1';
-            scheduleP.appendChild(clockIcon);
-            scheduleP.appendChild(document.createTextNode(scheduleSummary));
-            
+            scheduleP.className = 'text-xs text-blue-600 mt-1 image-schedule-summary';
+            renderScheduleSummary(scheduleP, img.schedule);
+
             infoDiv.appendChild(filenameP);
             infoDiv.appendChild(sizeDateP);
             infoDiv.appendChild(scheduleP);
-            
+
             leftSection.appendChild(imgEl);
             leftSection.appendChild(placeholderDiv);
             leftSection.appendChild(infoDiv);
-            
-            // Create right section with buttons
+
             const rightSection = document.createElement('div');
             rightSection.className = 'flex items-center space-x-2 ml-4';
-            
-            // Schedule button
+
             const scheduleBtn = document.createElement('button');
             scheduleBtn.type = 'button';
             scheduleBtn.className = 'text-blue-600 hover:text-blue-800 p-2';
             scheduleBtn.title = 'Schedule this image';
+            scheduleBtn.setAttribute('aria-label', `Schedule image ${label}`);
             scheduleBtn.dataset.fieldId = fieldId;
             scheduleBtn.dataset.imageId = String(imgId);
             scheduleBtn.dataset.imageIdx = String(idx);
             scheduleBtn.addEventListener('click', function() {
                 window.openImageSchedule(this.dataset.fieldId, this.dataset.imageId, parseInt(this.dataset.imageIdx, 10));
             });
-            const scheduleIcon = document.createElement('i');
-            scheduleIcon.className = 'fas fa-calendar-alt';
-            scheduleBtn.appendChild(scheduleIcon);
-            
-            // Delete button
+            scheduleBtn.appendChild(iconEl('fas fa-calendar-alt'));
+
             const deleteBtn = document.createElement('button');
             deleteBtn.type = 'button';
             deleteBtn.className = 'text-red-600 hover:text-red-800 p-2';
             deleteBtn.title = 'Delete image';
+            deleteBtn.setAttribute('aria-label', `Delete image ${label}`);
             deleteBtn.dataset.fieldId = fieldId;
             deleteBtn.dataset.imageId = String(imgId);
             deleteBtn.dataset.pluginId = pluginId;
             deleteBtn.addEventListener('click', function() {
                 window.deleteUploadedImage(this.dataset.fieldId, this.dataset.imageId, this.dataset.pluginId);
             });
-            const deleteIcon = document.createElement('i');
-            deleteIcon.className = 'fas fa-trash';
-            deleteBtn.appendChild(deleteIcon);
-            
+            deleteBtn.appendChild(iconEl('fas fa-trash'));
+
             rightSection.appendChild(scheduleBtn);
             rightSection.appendChild(deleteBtn);
-            
+
             mainDiv.appendChild(leftSection);
             mainDiv.appendChild(rightSection);
-            
-            // Create schedule container
+
             const scheduleContainer = document.createElement('div');
-            scheduleContainer.id = `schedule_${sanitizedId}`;
+            scheduleContainer.id = `schedule_${domId}`;
             scheduleContainer.className = 'hidden mt-3 pt-3 border-t border-gray-300';
-            
-            // Restore preserved schedule content if this is the open one
-            if (openScheduleId === sanitizedId && preservedScheduleContent) {
-                scheduleContainer.innerHTML = preservedScheduleContent;
-                scheduleContainer.classList.remove('hidden');
-            }
-            
+
             container.appendChild(mainDiv);
             container.appendChild(scheduleContainer);
             imageList.appendChild(container);
+
+            if (openScheduleId === domId) {
+                renderScheduleEditor(scheduleContainer, fieldId, imgId, idx, img.schedule);
+                scheduleContainer.classList.remove('hidden');
+            }
         });
     };
 
+    // Decorative icon, hidden from screen readers (the button has a label)
+    function iconEl(className) {
+        const i = document.createElement('i');
+        i.className = className;
+        i.setAttribute('aria-hidden', 'true');
+        return i;
+    }
+
+    function renderScheduleSummary(el, schedule) {
+        el.textContent = '';
+        const clock = document.createElement('i');
+        clock.className = 'fas fa-clock mr-1';
+        el.appendChild(clock);
+        el.appendChild(document.createTextNode(window.getScheduleSummary(schedule || {})));
+    }
+
+    // Saves a schedule edit: writes the hidden input and refreshes that
+    // card's summary line in place. The list is not re-rendered, so the open
+    // editor keeps its state and the control being edited keeps focus.
+    function commitScheduleEdit(fieldId, images, imageId) {
+        const hiddenInput = document.getElementById(`${fieldId}_images_data`);
+        if (hiddenInput) {
+            hiddenInput.value = JSON.stringify(images);
+        }
+        const card = document.getElementById(`img_${imageDomId(imageId)}`);
+        const image = images.find((img, idx) => String(img.id || idx) === String(imageId));
+        const summary = card && card.querySelector('.image-schedule-summary');
+        if (summary && image) {
+            renderScheduleSummary(summary, image.schedule);
+        }
+    }
+
     /**
      * Show upload progress
      * @param {string} fieldId - Field ID
@@ -776,364 +762,242 @@
     };
 
     /**
-     * Open image schedule editor
+     * Show or hide an image's schedule editor.
      * @param {string} fieldId - Field ID
-     * @param {string|number} imageId - Image ID
+     * @param {string|number} imageId - Image ID (the index when the image has none)
      * @param {number} imageIdx - Image index
      */
     window.openImageSchedule = function(fieldId, imageId, imageIdx) {
-        const currentImages = window.getCurrentImages(fieldId);
-        const image = currentImages[imageIdx];
+        const idx = Number(imageIdx);
+        const image = Number.isInteger(idx) && idx >= 0 ? window.getCurrentImages(fieldId).at(idx) : undefined;
         if (!image) return;
-        
-        // Sanitize imageId to match updateImageList's sanitization
-        const sanitizedId = (imageId || imageIdx).toString().replace(/[^a-zA-Z0-9_-]/g, '_');
-        const scheduleContainer = document.getElementById(`schedule_${sanitizedId}`);
+
+        const scheduleContainer = document.getElementById(`schedule_${imageDomId(imageId || imageIdx)}`);
         if (!scheduleContainer) return;
-        
-        // Toggle visibility
-        const isVisible = !scheduleContainer.classList.contains('hidden');
-        
-        if (isVisible) {
+
+        if (!scheduleContainer.classList.contains('hidden')) {
             scheduleContainer.classList.add('hidden');
             return;
         }
-        
+        renderScheduleEditor(scheduleContainer, fieldId, imageId || imageIdx, imageIdx, image.schedule);
         scheduleContainer.classList.remove('hidden');
-        
-        const schedule = image.schedule || { enabled: false, mode: 'always', start_time: '08:00', end_time: '18:00', days: {} };
-        
-        // Escape HTML helper
-        // Quotes too: the result lands in quoted attribute values below, and the
-        // textContent/innerHTML round-trip only escapes &, < and >.
-        const escapeHtml = (text) => {
-            const div = document.createElement('div');
-            div.textContent = String(text ?? '');
-            return div.innerHTML
-                .replace(/"/g, '&quot;')
-                .replace(/'/g, '&#39;');
-        };
-        
-        // Use sanitizedId for all ID references in the schedule HTML
-        // Use data attributes instead of inline handlers to prevent JS injection
-        scheduleContainer.innerHTML = `
-            <div class="bg-white rounded-lg border border-blue-200 p-4">
-                <h4 class="text-sm font-semibold text-gray-900 mb-3">
-                    <i class="fas fa-clock mr-2"></i>Schedule Settings
-                </h4>
-                
-                <!-- Enable Schedule -->
-                <div class="mb-4">
-                    <label class="flex items-center">
-                        <input type="checkbox" 
-                               id="schedule_enabled_${sanitizedId}"
-                               data-field-id="${escapeHtml(fieldId)}"
-                               data-image-id="${sanitizedId}"
-                               data-image-idx="${imageIdx}"
-                               ${schedule.enabled ? 'checked' : ''}
-                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                        <span class="ml-2 text-sm font-medium text-gray-700">Enable schedule for this image</span>
-                    </label>
-                    <p class="ml-6 text-xs text-gray-500 mt-1">When enabled, this image will only display during scheduled times</p>
-                </div>
-                
-                <!-- Schedule Mode -->
-                <div id="schedule_options_${sanitizedId}" class="space-y-4" style="display: ${schedule.enabled ? 'block' : 'none'};">
-                    <div>
-                        <label for="schedule_mode_${sanitizedId}" class="block text-sm font-medium text-gray-700 mb-2">Schedule Type</label>
-                        <select id="schedule_mode_${sanitizedId}"
-                                data-field-id="${escapeHtml(fieldId)}"
-                                data-image-id="${sanitizedId}"
-                                data-image-idx="${imageIdx}"
-                                class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
-                            <option value="always" ${schedule.mode === 'always' ? 'selected' : ''}>Always Show (No Schedule)</option>
-                            <option value="time_range" ${schedule.mode === 'time_range' ? 'selected' : ''}>Same Time Every Day</option>
-                            <option value="per_day" ${schedule.mode === 'per_day' ? 'selected' : ''}>Different Times Per Day</option>
-                        </select>
-                    </div>
-                    
-                    <!-- Time Range Mode -->
-                    <div id="time_range_${sanitizedId}" class="grid grid-cols-2 gap-4" style="display: ${schedule.mode === 'time_range' ? 'grid' : 'none'};">
-                        <div>
-                            <label for="schedule_start_${sanitizedId}" class="block text-xs font-medium text-gray-700 mb-1">Start Time</label>
-                            <input type="time"
-                                   id="schedule_start_${sanitizedId}"
-                                   data-field-id="${escapeHtml(fieldId)}"
-                                   data-image-id="${sanitizedId}"
-                                   data-image-idx="${imageIdx}"
-                                   value="${escapeHtml(schedule.start_time || '08:00')}"
-                                   class="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md">
-                        </div>
-                        <div>
-                            <label for="schedule_end_${sanitizedId}" class="block text-xs font-medium text-gray-700 mb-1">End Time</label>
-                            <input type="time"
-                                   id="schedule_end_${sanitizedId}"
-                                   data-field-id="${escapeHtml(fieldId)}"
-                                   data-image-id="${sanitizedId}"
-                                   data-image-idx="${imageIdx}"
-                                   value="${escapeHtml(schedule.end_time || '18:00')}"
-                                   class="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md">
-                        </div>
-                    </div>
-                    
-                    <!-- Per-Day Mode -->
-                    <div id="per_day_${sanitizedId}" style="display: ${schedule.mode === 'per_day' ? 'block' : 'none'};">
-                        <label class="block text-xs font-medium text-gray-700 mb-2">Day-Specific Times</label>
-                        <div class="bg-gray-50 rounded p-3 space-y-2 max-h-64 overflow-y-auto">
-                            ${['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'].map(day => {
-                                const dayConfig = (schedule.days && schedule.days[day]) || { enabled: true, start_time: '08:00', end_time: '18:00' };
-                                return `
-                                <div class="bg-white rounded p-2 border border-gray-200">
-                                    <div class="flex items-center justify-between mb-2">
-                                        <label class="flex items-center">
-                                            <input type="checkbox"
-                                                   id="day_${day}_${sanitizedId}"
-                                                   data-field-id="${escapeHtml(fieldId)}"
-                                                   data-image-id="${sanitizedId}"
-                                                   data-image-idx="${imageIdx}"
-                                                   data-day="${day}"
-                                                   ${dayConfig.enabled ? 'checked' : ''}
-                                                   class="h-3 w-3 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                                            <span class="ml-2 text-xs font-medium text-gray-700 capitalize">${day}</span>
-                                        </label>
-                                    </div>
-                                    <div class="grid grid-cols-2 gap-2 ml-5" id="day_times_${day}_${sanitizedId}" style="display: ${dayConfig.enabled ? 'grid' : 'none'};">
-                                        <input type="time"
-                                               id="day_${day}_start_${sanitizedId}"
-                                               aria-label="${day} start time"
-                                               data-field-id="${escapeHtml(fieldId)}"
-                                               data-image-id="${sanitizedId}"
-                                               data-image-idx="${imageIdx}"
-                                               data-day="${day}"
-                                               value="${escapeHtml(dayConfig.start_time || '08:00')}"
-                                               class="text-xs px-2 py-1 border border-gray-300 rounded"
-                                               ${!dayConfig.enabled ? 'disabled' : ''}>
-                                        <input type="time"
-                                               id="day_${day}_end_${sanitizedId}"
-                                               aria-label="${day} end time"
-                                               data-field-id="${escapeHtml(fieldId)}"
-                                               data-image-id="${sanitizedId}"
-                                               data-image-idx="${imageIdx}"
-                                               data-day="${day}"
-                                               value="${escapeHtml(dayConfig.end_time || '18:00')}"
-                                               class="text-xs px-2 py-1 border border-gray-300 rounded"
-                                               ${!dayConfig.enabled ? 'disabled' : ''}>
-                                    </div>
-                                </div>
-                                `;
-                            }).join('')}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        `;
-        
-        // Attach event listeners using data attributes (prevents JS injection)
-        const enabledCheckbox = document.getElementById(`schedule_enabled_${sanitizedId}`);
-        if (enabledCheckbox) {
-            enabledCheckbox.addEventListener('change', function() {
-                const fieldId = this.dataset.fieldId;
-                const imageId = this.dataset.imageId;
-                const imageIdx = parseInt(this.dataset.imageIdx, 10);
-                window.toggleImageScheduleEnabled(fieldId, imageId, imageIdx);
-            });
-        }
-        
-        const modeSelect = document.getElementById(`schedule_mode_${sanitizedId}`);
-        if (modeSelect) {
-            modeSelect.addEventListener('change', function() {
-                const fieldId = this.dataset.fieldId;
-                const imageId = this.dataset.imageId;
-                const imageIdx = parseInt(this.dataset.imageIdx, 10);
-                window.updateImageScheduleMode(fieldId, imageId, imageIdx);
-            });
-        }
-        
-        const startInput = document.getElementById(`schedule_start_${sanitizedId}`);
-        if (startInput) {
-            startInput.addEventListener('change', function() {
-                const fieldId = this.dataset.fieldId;
-                const imageId = this.dataset.imageId;
-                const imageIdx = parseInt(this.dataset.imageIdx, 10);
-                window.updateImageScheduleTime(fieldId, imageId, imageIdx);
-            });
-        }
-        
-        const endInput = document.getElementById(`schedule_end_${sanitizedId}`);
-        if (endInput) {
-            endInput.addEventListener('change', function() {
-                const fieldId = this.dataset.fieldId;
-                const imageId = this.dataset.imageId;
-                const imageIdx = parseInt(this.dataset.imageIdx, 10);
-                window.updateImageScheduleTime(fieldId, imageId, imageIdx);
-            });
-        }
-        
-        // Attach listeners for per-day inputs
-        ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'].forEach(day => {
-            const dayCheckbox = document.getElementById(`day_${day}_${sanitizedId}`);
-            if (dayCheckbox) {
-                dayCheckbox.addEventListener('change', function() {
-                    const fieldId = this.dataset.fieldId;
-                    const imageId = this.dataset.imageId;
-                    const imageIdx = parseInt(this.dataset.imageIdx, 10);
-                    const day = this.dataset.day;
-                    window.updateImageScheduleDay(fieldId, imageId, imageIdx, day);
-                });
-            }
-            
-            const dayStartInput = document.getElementById(`day_${day}_start_${sanitizedId}`);
-            if (dayStartInput) {
-                dayStartInput.addEventListener('change', function() {
-                    const fieldId = this.dataset.fieldId;
-                    const imageId = this.dataset.imageId;
-                    const imageIdx = parseInt(this.dataset.imageIdx, 10);
-                    const day = this.dataset.day;
-                    window.updateImageScheduleDay(fieldId, imageId, imageIdx, day);
-                });
-            }
-            
-            const dayEndInput = document.getElementById(`day_${day}_end_${sanitizedId}`);
-            if (dayEndInput) {
-                dayEndInput.addEventListener('change', function() {
-                    const fieldId = this.dataset.fieldId;
-                    const imageId = this.dataset.imageId;
-                    const imageIdx = parseInt(this.dataset.imageIdx, 10);
-                    const day = this.dataset.day;
-                    window.updateImageScheduleDay(fieldId, imageId, imageIdx, day);
-                });
-            }
-        });
     };
 
-    /**
-     * Toggle image schedule enabled state
-     */
+    const DAYS = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
+
+    // Builds a DOM element. Attribute values and text children go through the
+    // DOM APIs, so nothing passed in is ever parsed as HTML. `true` sets an
+    // empty (boolean) attribute; `false`, null and undefined leave it off.
+    function h(tag, attrs, children) {
+        const node = document.createElement(tag);
+        for (const [name, value] of Object.entries(attrs || {})) {
+            if (value === false || value == null) continue;
+            node.setAttribute(name, value === true ? '' : String(value));
+        }
+        for (const child of children || []) node.append(child);
+        return node;
+    }
+
+    function displayStyle(visible, shown) {
+        return `display: ${visible ? shown : 'none'};`;
+    }
+
+    function scheduleModeOption(schedule, value, label) {
+        return h('option', { value: value, selected: schedule.mode === value }, [label]);
+    }
+
+    function scheduleRangeTime(which, label, value, domId, ids) {
+        return h('div', {}, [
+            h('label', { for: `schedule_${which}_${domId}`, class: 'block text-xs font-medium text-gray-700 mb-1' }, [label]),
+            h('input', {
+                type: 'time', id: `schedule_${which}_${domId}`, 'data-schedule-control': 'time', ...ids,
+                value: value, class: 'block w-full px-2 py-1 text-sm border border-gray-300 rounded-md',
+            }),
+        ]);
+    }
+
+    function scheduleDayTime(day, which, value, enabled, domId, dayIds) {
+        return h('input', {
+            type: 'time', id: `day_${day}_${which}_${domId}`, 'aria-label': `${day} ${which} time`, ...dayIds,
+            value: value, class: 'text-xs px-2 py-1 border border-gray-300 rounded', disabled: !enabled,
+        });
+    }
+
+    function scheduleDayRow(schedule, day, domId, ids) {
+        const dayConfig = (schedule.days && schedule.days[day]) || { enabled: true, start_time: '08:00', end_time: '18:00' };
+        const dayIds = { 'data-schedule-control': 'day', 'data-day': day, ...ids };
+        return h('div', { class: 'bg-white rounded p-2 border border-gray-200' }, [
+            h('div', { class: 'flex items-center justify-between mb-2' }, [
+                h('label', { class: 'flex items-center' }, [
+                    h('input', {
+                        type: 'checkbox', id: `day_${day}_${domId}`, ...dayIds, checked: !!dayConfig.enabled,
+                        class: 'h-3 w-3 text-blue-600 focus:ring-blue-500 border-gray-300 rounded',
+                    }),
+                    h('span', { class: 'ml-2 text-xs font-medium text-gray-700 capitalize' }, [day]),
+                ]),
+            ]),
+            h('div', { class: 'grid grid-cols-2 gap-2 ml-5', id: `day_times_${day}_${domId}`, style: displayStyle(dayConfig.enabled, 'grid') }, [
+                scheduleDayTime(day, 'start', dayConfig.start_time || '08:00', dayConfig.enabled, domId, dayIds),
+                scheduleDayTime(day, 'end', dayConfig.end_time || '18:00', dayConfig.enabled, domId, dayIds),
+            ]),
+        ]);
+    }
+
+    // Builds the schedule editor. Controls carry data-schedule-control and
+    // their ids as data attributes; one delegated change listener (below)
+    // routes them, so the editor needs no per-element listeners.
+    function renderScheduleEditor(container, fieldId, imageId, imageIdx, savedSchedule) {
+        const schedule = savedSchedule || { enabled: false, mode: 'always', start_time: '08:00', end_time: '18:00', days: {} };
+        const domId = imageDomId(imageId);
+        const ids = { 'data-field-id': fieldId, 'data-image-id': imageId, 'data-image-idx': Number(imageIdx) };
+        const dayRows = [];
+        for (const day of DAYS) dayRows.push(scheduleDayRow(schedule, day, domId, ids));
+
+        container.replaceChildren(h('div', { class: 'bg-white rounded-lg border border-blue-200 p-4' }, [
+            h('h4', { class: 'text-sm font-semibold text-gray-900 mb-3' }, [
+                h('i', { class: 'fas fa-clock mr-2' }), 'Schedule Settings',
+            ]),
+            h('div', { class: 'mb-4' }, [
+                h('label', { class: 'flex items-center' }, [
+                    h('input', {
+                        type: 'checkbox', id: `schedule_enabled_${domId}`, 'data-schedule-control': 'enabled', ...ids,
+                        checked: !!schedule.enabled, class: 'h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded',
+                    }),
+                    h('span', { class: 'ml-2 text-sm font-medium text-gray-700' }, ['Enable schedule for this image']),
+                ]),
+                h('p', { class: 'ml-6 text-xs text-gray-500 mt-1' }, ['When enabled, this image will only display during scheduled times']),
+            ]),
+            h('div', { id: `schedule_options_${domId}`, class: 'space-y-4', style: displayStyle(schedule.enabled, 'block') }, [
+                h('div', {}, [
+                    h('label', { for: `schedule_mode_${domId}`, class: 'block text-sm font-medium text-gray-700 mb-2' }, ['Schedule Type']),
+                    h('select', {
+                        id: `schedule_mode_${domId}`, 'data-schedule-control': 'mode', ...ids,
+                        class: 'block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm',
+                    }, [
+                        scheduleModeOption(schedule, 'always', 'Always Show (No Schedule)'),
+                        scheduleModeOption(schedule, 'time_range', 'Same Time Every Day'),
+                        scheduleModeOption(schedule, 'per_day', 'Different Times Per Day'),
+                    ]),
+                ]),
+                h('div', { id: `time_range_${domId}`, class: 'grid grid-cols-2 gap-4', style: displayStyle(schedule.mode === 'time_range', 'grid') }, [
+                    scheduleRangeTime('start', 'Start Time', schedule.start_time || '08:00', domId, ids),
+                    scheduleRangeTime('end', 'End Time', schedule.end_time || '18:00', domId, ids),
+                ]),
+                h('div', { id: `per_day_${domId}`, style: displayStyle(schedule.mode === 'per_day', 'block') }, [
+                    h('label', { class: 'block text-xs font-medium text-gray-700 mb-2' }, ['Day-Specific Times']),
+                    h('div', { class: 'bg-gray-50 rounded p-3 space-y-2 max-h-64 overflow-y-auto' }, dayRows),
+                ]),
+            ]),
+        ]));
+    }
+
+    document.addEventListener('change', function(event) {
+        const el = event.target && event.target.closest && event.target.closest('[data-schedule-control]');
+        if (!el) return;
+        const { fieldId, imageId, day } = el.dataset;
+        const imageIdx = parseInt(el.dataset.imageIdx, 10);
+        switch (el.dataset.scheduleControl) {
+            case 'enabled': window.toggleImageScheduleEnabled(fieldId, imageId, imageIdx); break;
+            case 'mode': window.updateImageScheduleMode(fieldId, imageId, imageIdx); break;
+            case 'time': window.updateImageScheduleTime(fieldId, imageId, imageIdx); break;
+            case 'day': window.updateImageScheduleDay(fieldId, imageId, imageIdx, day); break;
+        }
+    });
+
     window.toggleImageScheduleEnabled = function(fieldId, imageId, imageIdx) {
         const currentImages = window.getCurrentImages(fieldId);
         const image = currentImages[imageIdx];
         if (!image) return;
-        
-        // Sanitize imageId for DOM lookup
-        const sanitizedId = String(imageId).replace(/[^a-zA-Z0-9_-]/g, '_');
-        const checkbox = document.getElementById(`schedule_enabled_${sanitizedId}`);
+
+        const domId = imageDomId(imageId);
+        const checkbox = document.getElementById(`schedule_enabled_${domId}`);
         const enabled = checkbox ? checkbox.checked : false;
-        
+
         if (!image.schedule) {
             image.schedule = { enabled: false, mode: 'always', start_time: '08:00', end_time: '18:00', days: {} };
         }
-        
         image.schedule.enabled = enabled;
-        
-        const optionsDiv = document.getElementById(`schedule_options_${sanitizedId}`);
+
+        const optionsDiv = document.getElementById(`schedule_options_${domId}`);
         if (optionsDiv) {
             optionsDiv.style.display = enabled ? 'block' : 'none';
         }
-        
-        if (window.updateImageList) {
-            window.updateImageList(fieldId, currentImages);
-        }
+
+        commitScheduleEdit(fieldId, currentImages, imageId);
     };
 
-    /**
-     * Update image schedule mode
-     */
     window.updateImageScheduleMode = function(fieldId, imageId, imageIdx) {
         const currentImages = window.getCurrentImages(fieldId);
         const image = currentImages[imageIdx];
         if (!image) return;
-        
-        // Sanitize imageId for DOM lookup
-        const sanitizedId = String(imageId).replace(/[^a-zA-Z0-9_-]/g, '_');
-        
+
+        const domId = imageDomId(imageId);
         if (!image.schedule) {
             image.schedule = { enabled: true, mode: 'always', start_time: '08:00', end_time: '18:00', days: {} };
         }
-        
-        const modeSelect = document.getElementById(`schedule_mode_${sanitizedId}`);
+
+        const modeSelect = document.getElementById(`schedule_mode_${domId}`);
         const mode = modeSelect ? modeSelect.value : 'always';
-        
         image.schedule.mode = mode;
-        
-        const timeRangeDiv = document.getElementById(`time_range_${sanitizedId}`);
-        const perDayDiv = document.getElementById(`per_day_${sanitizedId}`);
-        
+
+        const timeRangeDiv = document.getElementById(`time_range_${domId}`);
+        const perDayDiv = document.getElementById(`per_day_${domId}`);
         if (timeRangeDiv) timeRangeDiv.style.display = mode === 'time_range' ? 'grid' : 'none';
         if (perDayDiv) perDayDiv.style.display = mode === 'per_day' ? 'block' : 'none';
-        
-        if (window.updateImageList) {
-            window.updateImageList(fieldId, currentImages);
-        }
+
+        commitScheduleEdit(fieldId, currentImages, imageId);
     };
 
-    /**
-     * Update image schedule time
-     */
     window.updateImageScheduleTime = function(fieldId, imageId, imageIdx) {
         const currentImages = window.getCurrentImages(fieldId);
         const image = currentImages[imageIdx];
         if (!image) return;
-        
-        // Sanitize imageId for DOM lookup
-        const sanitizedId = String(imageId).replace(/[^a-zA-Z0-9_-]/g, '_');
-        
+
+        const domId = imageDomId(imageId);
         if (!image.schedule) {
             image.schedule = { enabled: true, mode: 'time_range', start_time: '08:00', end_time: '18:00' };
         }
-        
-        const startInput = document.getElementById(`schedule_start_${sanitizedId}`);
-        const endInput = document.getElementById(`schedule_end_${sanitizedId}`);
-        
+
+        const startInput = document.getElementById(`schedule_start_${domId}`);
+        const endInput = document.getElementById(`schedule_end_${domId}`);
         if (startInput) image.schedule.start_time = startInput.value || '08:00';
         if (endInput) image.schedule.end_time = endInput.value || '18:00';
-        
-        if (window.updateImageList) {
-            window.updateImageList(fieldId, currentImages);
-        }
+
+        commitScheduleEdit(fieldId, currentImages, imageId);
     };
 
-    /**
-     * Update image schedule day
-     */
     window.updateImageScheduleDay = function(fieldId, imageId, imageIdx, day) {
         const currentImages = window.getCurrentImages(fieldId);
         const image = currentImages[imageIdx];
         if (!image) return;
-        
-        // Sanitize imageId for DOM lookup
-        const sanitizedId = String(imageId).replace(/[^a-zA-Z0-9_-]/g, '_');
-        
+
+        const domId = imageDomId(imageId);
         if (!image.schedule) {
             image.schedule = { enabled: true, mode: 'per_day', days: {} };
         }
-        
         if (!image.schedule.days) {
             image.schedule.days = {};
         }
-        
-        const checkbox = document.getElementById(`day_${day}_${sanitizedId}`);
-        const startInput = document.getElementById(`day_${day}_start_${sanitizedId}`);
-        const endInput = document.getElementById(`day_${day}_end_${sanitizedId}`);
-        
+
+        const checkbox = document.getElementById(`day_${day}_${domId}`);
+        const startInput = document.getElementById(`day_${day}_start_${domId}`);
+        const endInput = document.getElementById(`day_${day}_end_${domId}`);
         const enabled = checkbox ? checkbox.checked : true;
-        
+
         if (!image.schedule.days[day]) {
             image.schedule.days[day] = { enabled: true, start_time: '08:00', end_time: '18:00' };
         }
-        
         image.schedule.days[day].enabled = enabled;
         if (startInput) image.schedule.days[day].start_time = startInput.value || '08:00';
         if (endInput) image.schedule.days[day].end_time = endInput.value || '18:00';
-        
-        const dayTimesDiv = document.getElementById(`day_times_${day}_${sanitizedId}`);
+
+        const dayTimesDiv = document.getElementById(`day_times_${day}_${domId}`);
         if (dayTimesDiv) {
             dayTimesDiv.style.display = enabled ? 'grid' : 'none';
         }
         if (startInput) startInput.disabled = !enabled;
         if (endInput) endInput.disabled = !enabled;
-        
-        if (window.updateImageList) {
-            window.updateImageList(fieldId, currentImages);
-        }
+
+        commitScheduleEdit(fieldId, currentImages, imageId);
     };
 })();
diff --git a/web_interface/static/v3/js/widgets/font-selector.js b/web_interface/static/v3/js/widgets/font-selector.js
index f4cc4b89..bfb27730 100644
--- a/web_interface/static/v3/js/widgets/font-selector.js
+++ b/web_interface/static/v3/js/widgets/font-selector.js
@@ -31,12 +31,7 @@
     let fontCatalogCache = null;
     let fontCatalogPromise = null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/google-calendar-picker.js b/web_interface/static/v3/js/widgets/google-calendar-picker.js
index 05f32cca..24dfc4ce 100644
--- a/web_interface/static/v3/js/widgets/google-calendar-picker.js
+++ b/web_interface/static/v3/js/widgets/google-calendar-picker.js
@@ -152,9 +152,7 @@
                 if (selectedIds.length === 0) {
                     checkbox.checked = true;
                     selectedIds.push(cal.id);
-                    if (window.showNotification) {
-                        window.showNotification('At least one calendar must be selected.', 'warning');
-                    }
+                    window.showNotification('At least one calendar must be selected.', 'warning');
                 }
                 syncHiddenAndSummary();
             });
@@ -185,11 +183,5 @@
         container.appendChild(p);
     }
 
-    function escapeHtml(str) {
-        return String(str)
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;');
-    }
+    function escapeHtml(str) { return window.LEDEscape.html(str); }
 })();
diff --git a/web_interface/static/v3/js/widgets/json-file-manager.js b/web_interface/static/v3/js/widgets/json-file-manager.js
index 51aab85f..4f5f8b32 100644
--- a/web_interface/static/v3/js/widgets/json-file-manager.js
+++ b/web_interface/static/v3/js/widgets/json-file-manager.js
@@ -760,11 +760,7 @@
         }
 
         _notify(msg, type) {
-            if (typeof window.showNotification === 'function') {
-                window.showNotification(msg, type || 'info');
-            } else {
-                console.info(`[JsonFileManager] ${type || 'info'}: ${msg}`);
-            }
+            window.showNotification(msg, type || 'info');
         }
 
         _busy(btn, label) {
@@ -785,15 +781,8 @@
             delete btn._jfmOrigText;
         }
 
-        // Quotes too: the result lands in quoted attribute values (title=,
-        // data-cat=, pattern=, ...), and the textContent/innerHTML round-trip
-        // only escapes &, < and >.
         _esc(str) {
-            const d = document.createElement('div');
-            d.textContent = String(str ?? '');
-            return d.innerHTML
-                .replace(/"/g, '&quot;')
-                .replace(/'/g, '&#39;');
+            return window.LEDEscape.html(str);
         }
 
         _fmtSize(bytes) {
diff --git a/web_interface/static/v3/js/widgets/notification.js b/web_interface/static/v3/js/widgets/notification.js
index cc684b1d..a123eb1d 100644
--- a/web_interface/static/v3/js/widgets/notification.js
+++ b/web_interface/static/v3/js/widgets/notification.js
@@ -1,10 +1,13 @@
+/* global debugLog */
 /**
  * LEDMatrix Notification Widget
  *
  * Global notification/toast system for displaying messages to users.
- * This is the single implementation: the early fallbacks in app-shell.js,
- * app.js and partials/fonts.html only queue messages until this widget has
- * loaded (see window.__pendingNotifications) and then delegate to it.
+ * This is the single implementation. app-shell.js defines a stand-in first
+ * (it runs before every other script that notifies), which queues messages
+ * in window.__pendingNotifications until this widget loads, shows the queue
+ * and replaces it. So window.showNotification always exists: call it
+ * directly, without a typeof check or a fallback.
  *
  * Usage:
  *   window.showNotification('Message here', 'success');
@@ -158,16 +161,7 @@
         setTimeout(() => { region.textContent = text; }, 50);
     }
 
-    /**
-     * Escape HTML to prevent XSS
-     * @param {string} text - Text to escape
-     * @returns {string} Escaped text
-     */
-    function escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML;
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function clearTimer(notificationId) {
         const t = timers.get(notificationId);
@@ -360,8 +354,7 @@
             });
         }
 
-        // Log for debugging
-        console.log(`[${type.toUpperCase()}]`, message);
+        debugLog(`[${type.toUpperCase()}]`, message);
 
         return notificationId;
     }
diff --git a/web_interface/static/v3/js/widgets/number-input.js b/web_interface/static/v3/js/widgets/number-input.js
index 1b0cef3c..3fdd039d 100644
--- a/web_interface/static/v3/js/widgets/number-input.js
+++ b/web_interface/static/v3/js/widgets/number-input.js
@@ -28,12 +28,7 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('NumberInput', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/password-input.js b/web_interface/static/v3/js/widgets/password-input.js
index 88f0e904..4b7d051d 100644
--- a/web_interface/static/v3/js/widgets/password-input.js
+++ b/web_interface/static/v3/js/widgets/password-input.js
@@ -28,12 +28,7 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('PasswordInput', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/plugin-file-manager.js b/web_interface/static/v3/js/widgets/plugin-file-manager.js
index 7a1af3a6..8dca0ad5 100644
--- a/web_interface/static/v3/js/widgets/plugin-file-manager.js
+++ b/web_interface/static/v3/js/widgets/plugin-file-manager.js
@@ -235,20 +235,10 @@
     }
 
     function notify(msg, type) {
-        if (window.showNotification) window.showNotification(msg, type);
-        else console.log(`[PFM][${type}] ${msg}`);
+        window.showNotification(msg, type);
     }
 
-    // Quotes too: the result lands in quoted attribute values (id=, value=,
-    // data-col=), and the textContent/innerHTML round-trip only escapes
-    // &, < and >.
-    function escHtml(s) {
-        const d = document.createElement('div');
-        d.textContent = String(s ?? '');
-        return d.innerHTML
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#39;');
-    }
+    function escHtml(s) { return window.LEDEscape.html(s); }
 
     function formatSize(bytes) {
         if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
@@ -745,13 +735,12 @@
 
     window._pfmUpload = async function (fieldId, file) {
         const st = getState(fieldId);
-        const notifyFn = window.showNotification || console.log;
         if (!file.name.toLowerCase().endsWith('.json')) {
-            notifyFn('Only .json files can be uploaded', 'error'); return;
+            window.showNotification('Only .json files can be uploaded', 'error'); return;
         }
         let content;
         try { content = await file.text(); JSON.parse(content); }
-        catch { notifyFn('File contains invalid JSON', 'error'); return; }
+        catch { window.showNotification('File contains invalid JSON', 'error'); return; }
 
         const result = await callAction(st.pluginId, st.actions.upload, {
             filename: file.name, content
diff --git a/web_interface/static/v3/js/widgets/radio-group.js b/web_interface/static/v3/js/widgets/radio-group.js
index 726c7e0d..6971a859 100644
--- a/web_interface/static/v3/js/widgets/radio-group.js
+++ b/web_interface/static/v3/js/widgets/radio-group.js
@@ -33,12 +33,7 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('RadioGroup', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/registry.js b/web_interface/static/v3/js/widgets/registry.js
index 85f811b4..7c881d1d 100644
--- a/web_interface/static/v3/js/widgets/registry.js
+++ b/web_interface/static/v3/js/widgets/registry.js
@@ -1,3 +1,4 @@
+/* global debugLog */
 /**
  * LEDMatrix Widget Registry
  * 
@@ -183,7 +184,7 @@
             const removed = this._widgets.delete(widgetName);
             this._handlers.delete(widgetName);
             if (removed) {
-                console.log(`[WidgetRegistry] Unregistered widget: ${widgetName}`);
+                debugLog(`[WidgetRegistry] Unregistered widget: ${widgetName}`);
             }
             return removed;
         },
@@ -194,7 +195,7 @@
         clear: function() {
             this._widgets.clear();
             this._handlers.clear();
-            console.log('[WidgetRegistry] Cleared all widgets');
+            debugLog('[WidgetRegistry] Cleared all widgets');
         }
     };
     
diff --git a/web_interface/static/v3/js/widgets/schedule-picker.js b/web_interface/static/v3/js/widgets/schedule-picker.js
index 8f152841..69c8cab8 100644
--- a/web_interface/static/v3/js/widgets/schedule-picker.js
+++ b/web_interface/static/v3/js/widgets/schedule-picker.js
@@ -54,12 +54,7 @@
     // Use BaseWidget utilities if available
     const base = window.BaseWidget ? new window.BaseWidget('SchedulePicker', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/select-dropdown.js b/web_interface/static/v3/js/widgets/select-dropdown.js
index f8ad5f16..30aaa9c5 100644
--- a/web_interface/static/v3/js/widgets/select-dropdown.js
+++ b/web_interface/static/v3/js/widgets/select-dropdown.js
@@ -28,12 +28,7 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('SelectDropdown', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/slider.js b/web_interface/static/v3/js/widgets/slider.js
index 80135a1e..55ad5376 100644
--- a/web_interface/static/v3/js/widgets/slider.js
+++ b/web_interface/static/v3/js/widgets/slider.js
@@ -28,17 +28,9 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('Slider', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
-    // Escape for use in HTML attributes (also escapes quotes)
-    function escapeAttr(text) {
-        return escapeHtml(text).replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeAttr(text) { return window.LEDEscape.attr(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/text-input.js b/web_interface/static/v3/js/widgets/text-input.js
index a61638f9..034ce5a9 100644
--- a/web_interface/static/v3/js/widgets/text-input.js
+++ b/web_interface/static/v3/js/widgets/text-input.js
@@ -29,12 +29,7 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('TextInput', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/textarea.js b/web_interface/static/v3/js/widgets/textarea.js
index d81e7359..e4c1108b 100644
--- a/web_interface/static/v3/js/widgets/textarea.js
+++ b/web_interface/static/v3/js/widgets/textarea.js
@@ -26,12 +26,7 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('Textarea', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/time-picker.js b/web_interface/static/v3/js/widgets/time-picker.js
index 2d9bf6bf..9ae0ead4 100644
--- a/web_interface/static/v3/js/widgets/time-picker.js
+++ b/web_interface/static/v3/js/widgets/time-picker.js
@@ -25,12 +25,7 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('TimePicker', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/time-range.js b/web_interface/static/v3/js/widgets/time-range.js
index 5b6f13f9..eafded72 100644
--- a/web_interface/static/v3/js/widgets/time-range.js
+++ b/web_interface/static/v3/js/widgets/time-range.js
@@ -32,12 +32,7 @@
     // Use BaseWidget utilities if available
     const base = window.BaseWidget ? new window.BaseWidget('TimeRange', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/timezone-selector.js b/web_interface/static/v3/js/widgets/timezone-selector.js
index 1496c5dc..21cbab08 100644
--- a/web_interface/static/v3/js/widgets/timezone-selector.js
+++ b/web_interface/static/v3/js/widgets/timezone-selector.js
@@ -23,12 +23,7 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('TimezoneSelector', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/toggle-switch.js b/web_interface/static/v3/js/widgets/toggle-switch.js
index eac77b85..ad2440c7 100644
--- a/web_interface/static/v3/js/widgets/toggle-switch.js
+++ b/web_interface/static/v3/js/widgets/toggle-switch.js
@@ -26,12 +26,7 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('ToggleSwitch', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/js/widgets/url-input.js b/web_interface/static/v3/js/widgets/url-input.js
index 9931db5f..9d378c1b 100644
--- a/web_interface/static/v3/js/widgets/url-input.js
+++ b/web_interface/static/v3/js/widgets/url-input.js
@@ -26,12 +26,7 @@
 
     const base = window.BaseWidget ? new window.BaseWidget('UrlInput', '1.0.0') : null;
 
-    function escapeHtml(text) {
-        if (base) return base.escapeHtml(text);
-        const div = document.createElement('div');
-        div.textContent = String(text);
-        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function sanitizeId(id) {
         if (base) return base.sanitizeId(id);
diff --git a/web_interface/static/v3/plugins_manager.js b/web_interface/static/v3/plugins_manager.js
index 990d3e2a..5af765f2 100644
--- a/web_interface/static/v3/plugins_manager.js
+++ b/web_interface/static/v3/plugins_manager.js
@@ -1,4 +1,56 @@
 /* global debugLog */
+/*
+ * plugins_manager.js -- the Plugin Manager tab and everything that acts on
+ * installed plugins: the installed grid (toggle, configure, update,
+ * uninstall), the plugin store and custom registries, GitHub-URL installs
+ * and the GitHub token panel, on-demand runs, the array-of-objects and
+ * key/value config fields, plugin web-UI actions, and the Starlark apps
+ * section.
+ *
+ * Deferred and loaded last, after the widget bundle, so everything it uses
+ * (PluginAPI, ListFilter, LEDDialog, the widgets, app-shell.js's
+ * updatePlugin) already exists.
+ *
+ * Load order (templates/v3/base.html):
+ *   <head>, blocking:  debugLog and theme inline scripts; the htmx loader
+ *                      (injects htmx.min.js with a dynamic <script>);
+ *                      js/htmx-config.js; the loadPartialDirect fallback;
+ *                      js/app-early.js
+ *   <head>, defer:     js/app-shell.js, then js/alpinejs.min.js (Alpine
+ *                      starts as soon as it runs, so app-shell.js's app()
+ *                      is the one Alpine uses)
+ *   end of <body>, defer, in this order: app.js, js/tooltips.js,
+ *                      js/settings-search.js, js/utils/dialog.js,
+ *                      js/utils/error_handler.js, js/plugins/api_client.js,
+ *                      state_manager.js, install_manager.js, list_filter.js,
+ *                      the widget bundle (web_interface/widget_bundle.py),
+ *                      plugins_manager.js
+ *   Tab partials arrive later through htmx; their inline scripts run on
+ *   htmx:afterSwap (js/htmx-config.js).
+ *
+ * Layout: a few handlers defined up front, outside any IIFE, because the
+ * cards and other scripts call them through window (configurePlugin,
+ * togglePlugin, the GitHub token helpers, handleGitHubPluginInstall,
+ * checkGitHubAuthStatus); then the plugin-manager IIFE (private state:
+ * installedPlugins, the store cache, the on-demand poller); then the
+ * array-of-objects field helpers; then the Starlark IIFE.
+ *
+ * The installed list is published only by renderInstalledPlugins: it sets
+ * window.installedPlugins and dispatches one `pluginsUpdated` event, which
+ * app-shell.js's app() uses to draw the plugin tabs.
+ *
+ * Globals include: window.pluginManager (loadInstalledPlugins,
+ * searchPluginStore, init flags), initPluginsPage, handlePluginAction,
+ * configurePlugin, togglePlugin, uninstallPlugin, installPlugin,
+ * installFromCustomRegistry, removeSavedRepository, executePluginAction,
+ * openOnDemandModal, requestOnDemandStop, loadOnDemandStatus,
+ * renderArrayObjectItem, addArrayObjectItem, removeArrayObjectItem,
+ * updateArrayObjectData, handleArrayObjectFileUpload, removeArrayObjectFile,
+ * removeKeyValuePair, updateKeyValuePairData, getSchemaProperty,
+ * installStarlarkApp, installPixlet, the GitHub token functions,
+ * window.installedPlugins and window.currentPluginConfig.
+ */
+
 // ─── LocalStorage Safety Wrappers ────────────────────────────────────────────
 // Handles environments where localStorage is unavailable or restricted (private browsing, etc.)
 const safeLocalStorage = {
@@ -36,51 +88,34 @@ const safeLocalStorage = {
     }
 };
 
-// Define critical functions immediately so they're available before any HTML is rendered
-// Debug logging controlled by safeLocalStorage.setItem('pluginDebug', 'true')
-const _PLUGIN_DEBUG_EARLY = safeLocalStorage.getItem('pluginDebug') === 'true';
-if (_PLUGIN_DEBUG_EARLY) debugLog('[PLUGINS SCRIPT] Defining configurePlugin and togglePlugin at top level...');
-
 // Define configurePlugin early to ensure it's always available
 window.configurePlugin = window.configurePlugin || async function(pluginId) {
-    if (_PLUGIN_DEBUG_EARLY) debugLog('[PLUGINS STUB] configurePlugin called for', pluginId);
+    debugLog('[PLUGINS] configurePlugin called for', pluginId);
 
-    // Switch to the plugin's configuration tab instead of opening a modal
-    // This matches the behavior of clicking the plugin tab at the top
-    function getAppComponent() {
-        if (window.Alpine) {
-            const appElement = document.querySelector('[x-data="app()"]');
-            if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-                return appElement._x_dataStack[0];
-            }
-        }
-        return null;
-    }
-
-    const appComponent = getAppComponent();
+    // Opens the plugin's own tab, the same as clicking it in the tab row.
+    const appComponent = window.getApp();
     if (appComponent) {
         // Set the active tab to the plugin ID
         appComponent.activeTab = pluginId;
-        if (_PLUGIN_DEBUG_EARLY) debugLog('[PLUGINS STUB] Switched to plugin tab:', pluginId);
+        debugLog('[PLUGINS] Switched to plugin tab:', pluginId);
 
         // Scroll to top of page to ensure the tab is visible
         window.scrollTo({ top: 0, behavior: 'smooth' });
     } else {
         console.error('Alpine.js app instance not found');
-        if (typeof showNotification === 'function') {
-            showNotification('Unable to switch to plugin configuration. Please refresh the page.', 'error');
-        }
+        showNotification('Unable to switch to plugin configuration. Please refresh the page.', 'error');
     }
 };
 
-// Initialize per-plugin toggle request token map for race condition protection
+// Latest toggle request per plugin, so a slow response to an earlier click
+// cannot overwrite the outcome of a later one.
 if (!window._pluginToggleRequests) {
     window._pluginToggleRequests = {};
 }
 
 // Define togglePlugin early to ensure it's always available
 window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
-    if (_PLUGIN_DEBUG_EARLY) debugLog('[PLUGINS STUB] togglePlugin called for', pluginId, 'enabled:', enabled);
+    debugLog('[PLUGINS] togglePlugin called for', pluginId, 'enabled:', enabled);
 
     const plugin = (window.installedPlugins || []).find(p => p.id === pluginId);
     const pluginName = plugin ? (plugin.name || pluginId) : pluginId;
@@ -104,12 +139,10 @@ window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
         toggleCheckbox.classList.add('opacity-50', 'cursor-not-allowed');
     }
 
-    // Disable wrapper to provide visual feedback
     if (wrapperDiv) {
         wrapperDiv.classList.add('opacity-50', 'pointer-events-none');
     }
 
-    // Update wrapper background and border
     if (wrapperDiv) {
         if (enabled) {
             wrapperDiv.classList.remove('bg-gray-50', 'border-gray-300');
@@ -120,7 +153,6 @@ window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
         }
     }
 
-    // Update toggle track
     if (toggleTrack) {
         if (enabled) {
             toggleTrack.classList.remove('bg-gray-300');
@@ -131,7 +163,6 @@ window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
         }
     }
 
-    // Update toggle handle
     if (toggleHandle) {
         if (enabled) {
             toggleHandle.classList.add('translate-x-full', 'border-green-500');
@@ -144,7 +175,6 @@ window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
         }
     }
 
-    // Update label with icon and text
     if (toggleLabel) {
         if (enabled) {
             toggleLabel.className = 'text-sm font-semibold text-green-700 flex items-center gap-1.5';
@@ -155,9 +185,13 @@ window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
         }
     }
 
-    if (typeof showNotification === 'function') {
-        showNotification(`${action.charAt(0).toUpperCase() + action.slice(1)} ${pluginName}...`, 'info');
-    }
+    // The card was just edited in place, so the grid no longer matches the
+    // markup setGridHtmlIfChanged last wrote; forget that so the next render
+    // (a failed toggle's revert, below) rebuilds it instead of skipping.
+    const installedGrid = document.getElementById('installed-plugins-grid');
+    if (installedGrid) installedGrid._lastRenderedHtml = null;
+
+    showNotification(`${action.charAt(0).toUpperCase() + action.slice(1)} ${pluginName}...`, 'info');
 
     return fetch('/api/v3/plugins/toggle', {
         method: 'POST',
@@ -172,26 +206,19 @@ window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
             return;
         }
 
-        if (typeof showNotification === 'function') {
-            showNotification(data.message, data.status);
-        }
+        showNotification(data.message, data.status);
         if (data.status === 'success') {
-            // Update local state
+            // The switch was already drawn in its new state above; keep it
+            // (and keyboard focus) rather than re-rendering the grid.
             if (plugin) {
                 plugin.enabled = enabled;
             }
-            // Refresh the list to ensure consistency
-            if (typeof loadInstalledPlugins === 'function') {
-                loadInstalledPlugins();
-            }
         } else {
-            // Revert the toggle if API call failed
+            // Re-render so the switch goes back to the state the server kept.
             if (plugin) {
                 plugin.enabled = !enabled;
             }
-            if (typeof loadInstalledPlugins === 'function') {
-                loadInstalledPlugins();
-            }
+            window.pluginManager.loadInstalledPlugins();
         }
 
         // Clear token and re-enable UI
@@ -214,16 +241,12 @@ window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
             return;
         }
 
-        if (typeof showNotification === 'function') {
-            showNotification('Error toggling plugin: ' + error.message, 'error');
-        }
-        // Revert the toggle if API call failed
+        showNotification('Error toggling plugin: ' + error.message, 'error');
+        // Re-render so the switch goes back to the state the server kept.
         if (plugin) {
             plugin.enabled = !enabled;
         }
-        if (typeof loadInstalledPlugins === 'function') {
-            loadInstalledPlugins();
-        }
+        window.pluginManager.loadInstalledPlugins();
 
         // Clear token and re-enable UI
         delete window._pluginToggleRequests[pluginId];
@@ -241,15 +264,11 @@ window.togglePlugin = window.togglePlugin || function(pluginId, enabled) {
 // Track pending render data for when DOM isn't ready yet
 window.__pendingInstalledPlugins = window.__pendingInstalledPlugins || null;
 window.__pendingStorePlugins = window.__pendingStorePlugins || null;
-window.__pluginDomReady = window.__pluginDomReady || false;
 
 // Document-level delegation for plugin card actions, so a card works even if
 // it was rendered before the grid's own listener was attached. It hands the
 // event to handlePluginAction, which the plugin-manager IIFE below exposes on
-// window. (It used to test `typeof handlePluginAction`, which is IIFE-scoped
-// and so never visible here: every click took a copied fallback instead, which
-// asked to confirm an uninstall twice and sent Starlark app uninstalls to the
-// plugin endpoint.)
+// window (the function itself is IIFE-scoped and not visible from here).
 (function setupGlobalEventDelegation() {
     const handleGlobalPluginAction = function(event) {
         const target = event.target;
@@ -267,23 +286,6 @@ window.__pluginDomReady = window.__pluginDomReady || false;
     debugLog('[PLUGINS SCRIPT] Global event delegation set up');
 })();
 
-// Note: configurePlugin and togglePlugin are now defined at the top of the file (after uninstallPlugin)
-// to ensure they're available immediately when the script loads
-
-// Verify functions are defined (debug only)
-if (_PLUGIN_DEBUG_EARLY) {
-    debugLog('[PLUGINS SCRIPT] Functions defined:', {
-        configurePlugin: typeof window.configurePlugin,
-        togglePlugin: typeof window.togglePlugin
-    });
-    if (typeof window.configurePlugin === 'function') {
-        debugLog('[PLUGINS SCRIPT] ✓ configurePlugin ready');
-    }
-    if (typeof window.togglePlugin === 'function') {
-        debugLog('[PLUGINS SCRIPT] ✓ togglePlugin ready');
-    }
-}
-
 // GitHub Token Collapse Handler - Define early so it's available before IIFE
 debugLog('[DEFINE] Defining attachGithubTokenCollapseHandler function...');
 window.attachGithubTokenCollapseHandler = function() {
@@ -449,40 +451,27 @@ window.handleGitHubPluginInstall = function() {
         debugLog('[handleGitHubPluginInstall] Response data:', data);
         if (data.status === 'success') {
             if (statusDiv) {
-                statusDiv.innerHTML = `<span class="text-green-600"><i class="fas fa-check-circle mr-1"></i>Successfully installed: ${data.plugin_id}</span>`;
+                statusDiv.innerHTML = `<span class="text-green-600"><i class="fas fa-check-circle mr-1"></i>Successfully installed: ${window.LEDEscape.html(data.plugin_id)}</span>`;
             }
             urlInput.value = '';
 
             // Show notification if available
-            if (typeof showNotification === 'function') {
-                showNotification(`Plugin ${data.plugin_id} installed successfully`, 'success');
-            }
+            showNotification(`Plugin ${data.plugin_id} installed successfully`, 'success');
 
-            // Refresh installed plugins list if function available
-            setTimeout(() => {
-                if (typeof loadInstalledPlugins === 'function') {
-                    loadInstalledPlugins();
-                } else if (typeof window.loadInstalledPlugins === 'function') {
-                    window.loadInstalledPlugins();
-                }
-            }, 1000);
+            setTimeout(() => window.pluginManager.loadInstalledPlugins(true), 1000);
         } else {
             if (statusDiv) {
-                statusDiv.innerHTML = `<span class="text-red-600"><i class="fas fa-times-circle mr-1"></i>${data.message || 'Installation failed'}</span>`;
-            }
-            if (typeof showNotification === 'function') {
-                showNotification(data.message || 'Installation failed', 'error');
+                statusDiv.innerHTML = `<span class="text-red-600"><i class="fas fa-times-circle mr-1"></i>${window.LEDEscape.html(data.message || 'Installation failed')}</span>`;
             }
+            showNotification(data.message || 'Installation failed', 'error');
         }
     })
     .catch(error => {
         console.error('[handleGitHubPluginInstall] Error:', error);
         if (statusDiv) {
-            statusDiv.innerHTML = `<span class="text-red-600"><i class="fas fa-times-circle mr-1"></i>Error: ${error.message}</span>`;
-        }
-        if (typeof showNotification === 'function') {
-            showNotification('Error installing plugin: ' + error.message, 'error');
+            statusDiv.innerHTML = `<span class="text-red-600"><i class="fas fa-times-circle mr-1"></i>Error: ${window.LEDEscape.html(error.message)}</span>`;
         }
+        showNotification('Error installing plugin: ' + error.message, 'error');
     })
     .finally(() => {
         if (installBtn) {
@@ -619,7 +608,7 @@ window.checkGitHubAuthStatus = function checkGitHubAuthStatus() {
 (function() {
     'use strict';
 
-    if (_PLUGIN_DEBUG_EARLY) debugLog('Plugin manager script starting...');
+    debugLog('Plugin manager script starting...');
 
     // Local variables for this instance
 let installedPlugins = [];
@@ -729,7 +718,6 @@ window.initPluginsPage = function() {
         return;
     }
 
-    // Check if required elements exist
     const installedGrid = document.getElementById('installed-plugins-grid');
     if (!installedGrid) {
         debugLog('Plugin elements not ready yet');
@@ -737,7 +725,6 @@ window.initPluginsPage = function() {
     }
 
     window.pluginManager.initializing = true;
-    window.__pluginDomReady = true;
 
     // Check GitHub auth status immediately (don't wait for full initialization)
     // This can run in parallel with other initialization
@@ -749,8 +736,8 @@ window.initPluginsPage = function() {
     // If we fetched data before the DOM existed, render it now
     if (window.__pendingInstalledPlugins) {
         debugLog('[RENDER] Applying pending installed plugins data');
-        renderInstalledPlugins(window.__pendingInstalledPlugins);
         window.__pendingInstalledPlugins = null;
+        applyInstalledFiltersAndRender();
     }
     if (window.__pendingStorePlugins) {
         debugLog('[RENDER] Applying pending plugin store data');
@@ -803,7 +790,6 @@ window.initPluginsPage = function() {
     return true;
 }
 
-// Consolidated initialization function
 function initializePluginPageWhenReady() {
     return window.initPluginsPage();
 }
@@ -813,13 +799,11 @@ function initializePluginPageWhenReady() {
     let initTimer = null;
 
     function attemptInit() {
-        // Clear any pending timer
         if (initTimer) {
             clearTimeout(initTimer);
             initTimer = null;
         }
 
-        // Try immediate initialization
         initializePluginPageWhenReady();
     }
 
@@ -854,7 +838,6 @@ function initializePluginPageWhenReady() {
     }, { once: false }); // Allow multiple swaps
 })();
 
-// Initialization guard to prevent multiple initializations
 let pluginsInitialized = false;
 
 function initializePlugins() {
@@ -863,34 +846,16 @@ function initializePlugins() {
     if (pluginsInitialized) {
         debugLog('[initializePlugins] Already initialized, skipping (but still setting up handlers)');
         // Still set up handlers even if already initialized (in case page was HTMX swapped)
-        debugLog('[initializePlugins] Force setting up GitHub handlers anyway...');
-        if (typeof setupGitHubInstallHandlers === 'function') {
-            setupGitHubInstallHandlers();
-        } else {
-            console.error('[initializePlugins] setupGitHubInstallHandlers not found!');
-        }
+        setupGitHubInstallHandlers();
         return;
     }
     pluginsInitialized = true;
 
     debugLog('[initializePlugins] Starting initialization...');
-    pluginLog('[INIT] Initializing plugins...');
+    debugLog('[INIT] Initializing plugins...');
 
-    // Check GitHub authentication status
-    debugLog('[INIT] Checking for checkGitHubAuthStatus function...', {
-        exists: typeof window.checkGitHubAuthStatus,
-        type: typeof window.checkGitHubAuthStatus
-    });
-    if (window.checkGitHubAuthStatus) {
-        debugLog('[INIT] Calling checkGitHubAuthStatus...');
-        try {
-            window.checkGitHubAuthStatus();
-        } catch (error) {
-            console.error('[INIT] Error calling checkGitHubAuthStatus:', error);
-        }
-    } else {
-        console.warn('[INIT] checkGitHubAuthStatus not available yet');
-    }
+    // Returns a promise and handles its own errors.
+    window.checkGitHubAuthStatus();
 
     // Load both installed plugins and plugin store.
     // On HTMX re-swaps with a still-warm cache, skip GitHub metadata to avoid
@@ -909,38 +874,23 @@ function initializePlugins() {
         .then(() => {
             // Re-render store from cache to update install/update/reinstall badges now
             // that window.installedPlugins is populated. No network call — instant.
-            if (typeof applyStoreFiltersAndSort === 'function') {
-                applyStoreFiltersAndSort(true);
-            }
+            applyStoreFiltersAndSort(true);
         });
 
-    // #plugin-search and #plugin-category are wired by the store's ListFilter
-    // controller (setupStoreFilterListeners). They used to ALSO be bound here to
-    // searchPluginStore; because that binding passed the DOM event as the
-    // `fetchCommitInfo` argument, every keystroke and category change skipped the
-    // cached-filter fast path and refetched /api/v3/plugins/store/list with commit
-    // info. Filtering the cached list is the controller's job — leave it to it.
+    // #plugin-search and #plugin-category belong to the store's ListFilter
+    // controller (setupStoreFilterListeners), which filters the cached list.
+    // Do not bind searchPluginStore to them as well: it would receive the DOM
+    // event as `fetchCommitInfo` and refetch the whole store on every keystroke.
 
-    // Setup GitHub installation handlers
-    debugLog('[initializePlugins] About to call setupGitHubInstallHandlers...');
-    if (typeof setupGitHubInstallHandlers === 'function') {
-        debugLog('[initializePlugins] setupGitHubInstallHandlers is a function, calling it...');
-        setupGitHubInstallHandlers();
-        debugLog('[initializePlugins] setupGitHubInstallHandlers called');
-    } else {
-        console.error('[initializePlugins] ERROR: setupGitHubInstallHandlers is not a function! Type:', typeof setupGitHubInstallHandlers);
-    }
+    setupGitHubInstallHandlers();
 
-    // Setup collapsible section handlers
     setupCollapsibleSections();
 
-    // Load saved repositories
     loadSavedRepositories();
 
-    pluginLog('[INIT] Plugins initialized');
+    debugLog('[INIT] Plugins initialized');
 }
 
-// Track in-flight requests to prevent duplicates
 // ===== PLUGIN LOADING WITH REQUEST DEDUPLICATION & CACHING =====
 // Prevents redundant API calls by caching results for a short time
 const pluginLoadCache = {
@@ -957,35 +907,21 @@ const pluginLoadCache = {
     }
 };
 
-// Debug flag - set via safeLocalStorage.setItem('pluginDebug', 'true')
-const PLUGIN_DEBUG = typeof localStorage !== 'undefined' && safeLocalStorage.getItem('pluginDebug') === 'true';
-function pluginLog(...args) {
-    if (PLUGIN_DEBUG) debugLog(...args);
-}
-
 function loadInstalledPlugins(forceRefresh = false) {
     // Return cached data if valid and not forcing refresh
     if (!forceRefresh && pluginLoadCache.isValid()) {
-        pluginLog('[CACHE] Returning cached plugin data');
-        // Update window.installedPlugins from cache
-        window.installedPlugins = pluginLoadCache.data;
-        // Dispatch event to notify Alpine component
-        document.dispatchEvent(new CustomEvent('pluginsUpdated', {
-            detail: { plugins: pluginLoadCache.data }
-        }));
-        pluginLog('[CACHE] Dispatched pluginsUpdated event from cache');
-        // Still render to ensure UI is updated
+        debugLog('[CACHE] Returning cached plugin data');
         renderInstalledPlugins(pluginLoadCache.data);
         return Promise.resolve(pluginLoadCache.data);
     }
 
     // If a request is already in progress, return the existing promise
     if (pluginLoadCache.promise) {
-        pluginLog('[CACHE] Request in progress, returning existing promise');
+        debugLog('[CACHE] Request in progress, returning existing promise');
         return pluginLoadCache.promise;
     }
 
-    pluginLog('[FETCH] Loading installed plugins...');
+    debugLog('[FETCH] Loading installed plugins...');
 
     // Use PluginAPI if available, otherwise fall back to direct fetch
     const fetchPromise = (window.PluginAPI && window.PluginAPI.getInstalledPlugins) ?
@@ -995,56 +931,41 @@ function loadInstalledPlugins(forceRefresh = false) {
         }) :
         fetch('/api/v3/plugins/installed').then(response => response.json());
 
-    // Store the promise
     pluginLoadCache.promise = fetchPromise
         .then(data => {
             if (data.status === 'success') {
                 const pluginsData = data.data?.plugins;
                 installedPlugins = Array.isArray(pluginsData) ? pluginsData : [];
 
-                // Update cache
                 pluginLoadCache.data = installedPlugins;
                 pluginLoadCache.timestamp = Date.now();
 
-                // Always update window.installedPlugins to ensure Alpine component can detect changes
-                window.installedPlugins = installedPlugins;
-
-                // Dispatch event to notify Alpine component to update tabs
-                document.dispatchEvent(new CustomEvent('pluginsUpdated', {
-                    detail: { plugins: installedPlugins }
-                }));
-                pluginLog('[FETCH] Dispatched pluginsUpdated event with', installedPlugins.length, 'plugins');
-
-                pluginLog('[FETCH] Loaded', installedPlugins.length, 'plugins');
-
-                // Debug logging only when enabled
-                if (PLUGIN_DEBUG) {
-                    installedPlugins.forEach(plugin => {
-                        debugLog(`[DEBUG] Plugin ${plugin.id}: enabled=${plugin.enabled}`);
-                    });
-                }
+                debugLog('[FETCH] Loaded', installedPlugins.length, 'plugins');
 
                 // Also refreshes the '#installed-count' text via the filter controller.
                 renderInstalledPlugins(installedPlugins);
 
                 return installedPlugins;
             } else {
-                const errorMsg = 'Failed to load installed plugins: ' + data.message;
-                showError(errorMsg);
-                throw new Error(errorMsg);
+                throw new Error('Failed to load installed plugins: ' + data.message);
             }
         })
         .catch(error => {
             console.error('Error loading installed plugins:', error);
             let errorMsg = 'Error loading plugins: ' + error.message;
-            if (error.message && error.message.includes('Failed to Fetch')) {
+            if (isNetworkFailure(error)) {
                 errorMsg += ' - Please try refreshing your browser.';
             }
-            showError(errorMsg);
+            // Replace the whole panel only when there is nothing to show yet; a
+            // failed refresh keeps the grid and the store the user is looking at.
+            if (pluginLoadCache.data === null) {
+                showInstalledLoadError(errorMsg);
+            } else {
+                showNotification(errorMsg, 'error');
+            }
             throw error;
         })
         .finally(() => {
-            // Clear the in-flight promise (but keep cache data)
             pluginLoadCache.promise = null;
         });
 
@@ -1193,40 +1114,23 @@ function setupInstalledFilterListeners() {
     ctl.syncControls();
 }
 
-// Publishes the canonical installed-plugin list, then renders through the
-// active filters. Everything that reads window.installedPlugins (the toggle
-// handler, isStorePluginInstalled, runUpdateAllPlugins, the Alpine config tabs)
-// depends on this receiving the FULL list — never a filtered subset.
+// The one place the installed-plugin list is published, then rendered
+// through the active filters. It sets window.installedPlugins, which the
+// toggle handler, isStorePluginInstalled and runUpdateAllPlugins read, and
+// dispatches one pluginsUpdated event, on which the Alpine app (app-shell.js)
+// takes the list and rebuilds the plugin tab row. Both must get the FULL
+// list, never a filtered subset.
 function renderInstalledPlugins(plugins) {
-    const container = document.getElementById('installed-plugins-grid');
-    if (!container) {
-        console.warn('[RENDER] installed-plugins-grid not yet available, deferring render until plugin tab loads');
+    window.installedPlugins = plugins;
+    document.dispatchEvent(new CustomEvent('pluginsUpdated', { detail: { plugins: plugins } }));
+
+    // The Plugin Manager tab may not be loaded yet; initPluginsPage renders
+    // when it is.
+    if (!document.getElementById('installed-plugins-grid')) {
+        debugLog('[RENDER] installed-plugins-grid not loaded yet, rendering when the tab loads');
         window.__pendingInstalledPlugins = plugins;
         return;
     }
-
-    // Always update window.installedPlugins to ensure Alpine component reactivity
-    window.installedPlugins = plugins;
-    pluginLog('[RENDER] Set window.installedPlugins to:', plugins.length, 'plugins');
-
-    // Dispatch event to notify Alpine component to update tabs
-    document.dispatchEvent(new CustomEvent('pluginsUpdated', {
-        detail: { plugins: plugins }
-    }));
-    pluginLog('[RENDER] Dispatched pluginsUpdated event');
-
-    // Also try direct Alpine update as fallback
-    if (window.Alpine && document.querySelector('[x-data="app()"]')) {
-        const appElement = document.querySelector('[x-data="app()"]');
-        if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-            appElement._x_dataStack[0].installedPlugins = plugins;
-            if (typeof appElement._x_dataStack[0].updatePluginTabs === 'function') {
-                appElement._x_dataStack[0].updatePluginTabs();
-                pluginLog('[RENDER] Triggered Alpine.js to update plugin tabs directly');
-            }
-        }
-    }
-
     applyInstalledFiltersAndRender();
 }
 
@@ -1269,33 +1173,12 @@ function renderInstalledCards(plugins, total) {
         return;
     }
 
-    // Helper function to escape values for use in HTML attributes
-    const escapeAttr = (text) => {
-        return (text || '')
-            .replace(/&/g, '&amp;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#39;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;');
-    };
-
-    // Helper function to escape for JavaScript strings (use JSON.stringify for proper escaping)
-    // JSON.stringify returns a quoted string, so we can use it directly in JavaScript
-    const escapeJs = (text) => {
-        return JSON.stringify(text || '');
-    };
-
     setGridHtmlIfChanged(container, plugins.map(plugin => {
         // Convert enabled to boolean for consistent rendering
         const enabledBool = Boolean(plugin.enabled);
 
-        // Debug: Log enabled status during rendering (only when debug enabled)
-        if (PLUGIN_DEBUG) {
-            debugLog(`[DEBUG RENDER] Plugin ${plugin.id}: enabled=${enabledBool}`);
-        }
-
         // Escape plugin ID for use in HTML attributes and JavaScript
-        const escapedPluginId = escapeAttr(plugin.id);
+        const escapedPluginId = escapeAttribute(plugin.id);
 
         return `
         <div class="plugin-card">
@@ -1317,7 +1200,7 @@ function renderInstalledCards(plugins, total) {
                         <input type="checkbox"
                                class="sr-only peer"
                                role="switch"
-                               aria-label="Enable ${escapeAttr(plugin.name || plugin.id)}"
+                               aria-label="Enable ${escapeAttribute(plugin.name || plugin.id)}"
                                id="toggle-${escapedPluginId}"
                                ${enabledBool ? 'checked' : ''}
                                data-plugin-id="${escapedPluginId}"
@@ -1340,7 +1223,7 @@ function renderInstalledCards(plugins, total) {
                 </div>
                 <div class="text-sm text-gray-600 space-y-1.5 mb-3">
                     <p class="flex items-center"><i class="fas fa-user mr-2 text-gray-400 w-4"></i>${escapeHtml(plugin.author || 'Unknown')}</p>
-                    ${plugin.version ? `<p class="flex items-center flex-wrap gap-1.5"><i class="fas fa-tag mr-2 text-gray-400 w-4"></i>v${escapeHtml(plugin.version)}${plugin.update_available && plugin.latest_version ? `<span class="badge badge-info" title="Installed v${escapeAttr(plugin.version)} → latest v${escapeAttr(plugin.latest_version)}"><i class="fas fa-arrow-circle-up mr-1"></i>v${escapeHtml(plugin.latest_version)} available</span>` : ''}</p>` : ''}
+                    ${plugin.version ? `<p class="flex items-center flex-wrap gap-1.5"><i class="fas fa-tag mr-2 text-gray-400 w-4"></i>v${escapeHtml(plugin.version)}${plugin.update_available && plugin.latest_version ? `<span class="badge badge-info" title="Installed v${escapeAttribute(plugin.version)} → latest v${escapeAttribute(plugin.latest_version)}"><i class="fas fa-arrow-circle-up mr-1"></i>v${escapeHtml(plugin.latest_version)} available</span>` : ''}</p>` : ''}
                     <p class="flex items-center"><i class="fas fa-folder mr-2 text-gray-400 w-4"></i>${escapeHtml(plugin.category || 'General')}</p>
                 </div>
                 <p class="text-sm text-gray-700 leading-relaxed">${escapeHtml(plugin.description || 'No description available')}</p>
@@ -1366,7 +1249,7 @@ function renderInstalledCards(plugins, total) {
                             style="flex: 1;"
                             data-plugin-id="${escapedPluginId}"
                             data-action="update"
-                            title="${plugin.update_available && plugin.latest_version ? 'Update to v' + escapeAttr(plugin.latest_version) : 'Reinstall the latest published version'}">
+                            title="${plugin.update_available && plugin.latest_version ? 'Update to v' + escapeAttribute(plugin.latest_version) : 'Reinstall the latest published version'}">
                         <i class="fas ${plugin.update_available ? 'fa-arrow-circle-up' : 'fa-sync'} mr-2"></i>${plugin.update_available && plugin.latest_version ? 'Update to v' + escapeHtml(plugin.latest_version) : 'Update'}
                     </button>
                     <button class="btn bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-semibold"
@@ -1409,28 +1292,24 @@ window.__pmSetGridHtmlIfChanged = setGridHtmlIfChanged;
 function setupInstalledEventDelegation() {
     const container = document.getElementById('installed-plugins-grid');
     if (!container) {
-        pluginLog('[RENDER] installed-plugins-grid not found for event delegation');
+        debugLog('[RENDER] installed-plugins-grid not found for event delegation');
         return;
     }
 
-    // Skip if already set up (guard against multiple calls)
     if (container._eventDelegationSetup) {
         return;
     }
 
-    // Mark as set up
     container._eventDelegationSetup = true;
     container._pluginActionHandler = handlePluginAction;
 
-    // Add listeners for both click and change events
     container.addEventListener('click', handlePluginAction, true);
     container.addEventListener('change', handlePluginAction, true);
-    pluginLog('[RENDER] Event delegation set up for installed-plugins-grid');
+    debugLog('[RENDER] Event delegation set up for installed-plugins-grid');
 }
 
 
 function handlePluginAction(event) {
-    // Check for both button and input (for toggle)
     const button = event.target.closest('button[data-action]') || event.target.closest('input[data-action]');
     if (!button) return;
 
@@ -1453,24 +1332,6 @@ function handlePluginAction(event) {
 
     debugLog('[EVENT DELEGATION] Plugin action:', action, 'Plugin ID:', pluginId);
 
-    // Helper function to wait for a function to be available
-    const waitForFunction = (funcName, maxAttempts = 10, delay = 50) => {
-        return new Promise((resolve, reject) => {
-            let attempts = 0;
-            const check = () => {
-                attempts++;
-                if (window[funcName] && typeof window[funcName] === 'function') {
-                    resolve(window[funcName]);
-                } else if (attempts >= maxAttempts) {
-                    reject(new Error(`${funcName} not available after ${maxAttempts} attempts`));
-                } else {
-                    setTimeout(check, delay);
-                }
-            };
-            check();
-        });
-    };
-
     switch(action) {
         case 'toggle':
             // Toggling under an Enabled/Disabled filter would otherwise make the
@@ -1480,24 +1341,11 @@ function handlePluginAction(event) {
                 const ctl = getInstalledFilter();
                 if (ctl) ctl.sticky.add(pluginId);
             }
-            // Get the current enabled state from plugin data (source of truth)
-            // rather than from the checkbox DOM which might be out of sync
+            // The new state is the opposite of the stored one. The plugin data
+            // is the source of truth; the checkbox is only a fallback, and
+            // because the click was preventDefault()ed it still shows the old
+            // state too.
             const plugin = (window.installedPlugins || []).find(p => p.id === pluginId);
-
-            // Special handling: If plugin data isn't found or is stale, fallback to DOM but be careful
-            // If the user clicked the checkbox, the 'checked' property has *already* toggled in the DOM
-            // (even though we preventDefault later, sometimes it's too late for the property read)
-            // However, we used preventDefault() in the global handler, so the checkbox state *should* be reliable if we didn't touch it.
-
-            // BUT: The issue is that 'currentEnabled' calculation might be wrong if window.installedPlugins is outdated.
-            // If the user toggles ON, enabled becomes true. If they click again, we want enabled=false.
-
-            // Let's try a simpler approach: Use the checkbox state as the source of truth for the *desired* state
-            // Since we preventDefault(), the checkbox state reflects the *old* state (before the click)
-            // wait... if we preventDefault() on 'click', the checkbox does NOT change visually or internally.
-            // So button.checked is the OLD state.
-            // We want the NEW state to be !button.checked.
-
             let currentEnabled;
 
             if (plugin) {
@@ -1508,51 +1356,17 @@ function handlePluginAction(event) {
                 currentEnabled = false;
             }
 
-            // Toggle the state - we want the opposite of current state
             const isChecked = !currentEnabled;
 
             debugLog('[DEBUG toggle] Plugin:', pluginId, 'Current enabled (from data):', currentEnabled, 'New state:', isChecked, 'Event type:', event.type);
 
-            waitForFunction('togglePlugin', 10, 50)
-                .then(toggleFunc => {
-                    toggleFunc(pluginId, isChecked);
-                })
-                .catch(error => {
-                    console.error('[EVENT DELEGATION]', error.message);
-                    if (typeof showNotification === 'function') {
-                        showNotification('Toggle function not loaded. Please refresh the page.', 'error');
-                    } else {
-                        alert('Toggle function not loaded. Please refresh the page.');
-                    }
-                });
+            window.togglePlugin(pluginId, isChecked);
             break;
         case 'configure':
-            waitForFunction('configurePlugin', 10, 50)
-                .then(configureFunc => {
-                    configureFunc(pluginId);
-                })
-                .catch(error => {
-                    console.error('[EVENT DELEGATION]', error.message);
-                    if (typeof showNotification === 'function') {
-                        showNotification('Configure function not loaded. Please refresh the page.', 'error');
-                    } else {
-                        alert('Configure function not loaded. Please refresh the page.');
-                    }
-                });
+            window.configurePlugin(pluginId);
             break;
         case 'update':
-            waitForFunction('updatePlugin', 10, 50)
-                .then(updateFunc => {
-                    updateFunc(pluginId);
-                })
-                .catch(error => {
-                    console.error('[EVENT DELEGATION]', error.message);
-                    if (typeof showNotification === 'function') {
-                        showNotification('Update function not loaded. Please refresh the page.', 'error');
-                    } else {
-                        alert('Update function not loaded. Please refresh the page.');
-                    }
-                });
+            window.updatePlugin(pluginId);
             break;
         case 'uninstall':
             if (pluginId.startsWith('starlark:')) {
@@ -1563,28 +1377,15 @@ function handlePluginAction(event) {
                     .then(r => r.json())
                     .then(data => {
                         if (data.status === 'success') {
-                            if (typeof showNotification === 'function') showNotification('Starlark app uninstalled', 'success');
-                            else alert('Starlark app uninstalled');
-                            if (typeof loadInstalledPlugins === 'function') loadInstalledPlugins();
-                            else if (typeof window.loadInstalledPlugins === 'function') window.loadInstalledPlugins();
+                            showNotification('Starlark app uninstalled', 'success');
+                            loadInstalledPlugins(true);
                         } else {
                             alert('Uninstall failed: ' + (data.message || 'Unknown error'));
                         }
                     })
                     .catch(err => alert('Uninstall failed: ' + err.message));
             } else {
-                waitForFunction('uninstallPlugin', 10, 50)
-                    .then(uninstallFunc => {
-                        uninstallFunc(pluginId);
-                    })
-                    .catch(error => {
-                        console.error('[EVENT DELEGATION]', error.message);
-                        if (typeof showNotification === 'function') {
-                            showNotification('Uninstall function not loaded. Please refresh the page.', 'error');
-                        } else {
-                            alert('Uninstall function not loaded. Please refresh the page.');
-                        }
-                    });
+                window.uninstallPlugin(pluginId);
             }
             break;
     }
@@ -1618,23 +1419,19 @@ function loadOnDemandStatus(fromRefreshButton = false) {
             if (result.status === 'success') {
                 updateOnDemandStore(result.data);
                 hasLoadedOnDemandStatus = true;
-                if (fromRefreshButton && typeof showNotification === 'function') {
+                if (fromRefreshButton) {
                     showNotification('On-demand status refreshed', 'success');
                 }
             } else {
                 const message = result.message || 'Failed to load on-demand status';
                 setOnDemandError(message);
-                if (typeof showNotification === 'function') {
-                    showNotification(message, 'error');
-                }
+                showNotification(message, 'error');
             }
         })
         .catch(error => {
             console.error('Error fetching on-demand status:', error);
             setOnDemandError(error?.message || 'Error fetching on-demand status');
-            if (typeof showNotification === 'function') {
-                showNotification('Error fetching on-demand status: ' + error.message, 'error');
-            }
+            showNotification('Error fetching on-demand status: ' + error.message, 'error');
         });
 }
 
@@ -1761,9 +1558,7 @@ function runUpdateAllPlugins() {
         })
         .catch(error => {
             console.error('Error updating all plugins:', error);
-            if (typeof showNotification === 'function') {
-                showNotification('Error updating all plugins: ' + error.message, 'error');
-            }
+            showNotification('Error updating all plugins: ' + error.message, 'error');
         })
         .finally(() => {
             button.innerHTML = originalContent;
@@ -1817,9 +1612,7 @@ window.__openOnDemandModalImpl = function(pluginId) {
     debugLog('[__openOnDemandModalImpl] Found plugin:', plugin ? plugin.id : 'NOT FOUND');
     if (!plugin) {
         console.warn('[__openOnDemandModalImpl] Plugin not found, installedPlugins:', window.installedPlugins?.length || 0);
-        if (typeof showNotification === 'function') {
-            showNotification(`Plugin ${pluginId} not found`, 'error');
-        }
+        showNotification(`Plugin ${pluginId} not found`, 'error');
         return;
     }
 
@@ -1989,9 +1782,7 @@ function submitOnDemandRequest(event) {
 
     if (!currentOnDemandPluginId) {
         console.error('[submitOnDemandRequest] No plugin ID set');
-        if (typeof showNotification === 'function') {
-            showNotification('Select a plugin before starting on-demand mode.', 'error');
-        }
+        showNotification('Select a plugin before starting on-demand mode.', 'error');
         return;
     }
 
@@ -2040,24 +1831,18 @@ function submitOnDemandRequest(event) {
         .then(result => {
             debugLog('[submitOnDemandRequest] Response data:', result);
             if (result.status === 'success') {
-                if (typeof showNotification === 'function') {
-                    const pluginName = resolvePluginDisplayName(currentOnDemandPluginId);
-                    showNotification(`Requested on-demand mode for ${pluginName}`, 'success');
-                }
+                const pluginName = resolvePluginDisplayName(currentOnDemandPluginId);
+                showNotification(`Requested on-demand mode for ${pluginName}`, 'success');
                 closeOnDemandModal();
                 setTimeout(() => loadOnDemandStatus(true), 700);
             } else {
                 console.error('[submitOnDemandRequest] Request failed:', result);
-                if (typeof showNotification === 'function') {
-                    showNotification(result.message || 'Failed to start on-demand mode', 'error');
-                }
+                showNotification(result.message || 'Failed to start on-demand mode', 'error');
             }
         })
         .catch(error => {
             console.error('[submitOnDemandRequest] Error starting on-demand mode:', error);
-            if (typeof showNotification === 'function') {
-                showNotification('Error starting on-demand mode: ' + error.message, 'error');
-            }
+            showNotification('Error starting on-demand mode: ' + error.message, 'error');
         });
 }
 
@@ -2075,32 +1860,21 @@ function requestOnDemandStop({ stopService = false } = {}) {
         .then(response => response.json())
         .then(result => {
             if (result.status === 'success') {
-                if (typeof showNotification === 'function') {
-                    const message = stopService
-                        ? 'On-demand mode stop requested and display service will be stopped.'
-                        : 'On-demand mode stop requested';
-                    showNotification(message, 'success');
-                }
+                const message = stopService
+                    ? 'On-demand mode stop requested and display service will be stopped.'
+                    : 'On-demand mode stop requested';
+                showNotification(message, 'success');
                 setTimeout(() => loadOnDemandStatus(true), 700);
             } else {
-                if (typeof showNotification === 'function') {
-                    showNotification(result.message || 'Failed to stop on-demand mode', 'error');
-                }
+                showNotification(result.message || 'Failed to stop on-demand mode', 'error');
             }
         })
         .catch(error => {
             console.error('Error stopping on-demand mode:', error);
-            if (typeof showNotification === 'function') {
-                showNotification('Error stopping on-demand mode: ' + error.message, 'error');
-            }
+            showNotification('Error stopping on-demand mode: ' + error.message, 'error');
         });
 }
 
-function stopOnDemand(event) {
-    const stopService = event && event.shiftKey;
-    requestOnDemandStop({ stopService });
-}
-
 window.requestOnDemandStop = requestOnDemandStop;
 
 function closeOnDemandModalOnBackdrop(event) {
@@ -2109,9 +1883,6 @@ function closeOnDemandModalOnBackdrop(event) {
     }
 }
 
-// configurePlugin is already defined at the top of the script - no need to redefine
-
-
 // Helper function to get the full property object from schema
 // Uses greedy longest-match to handle schema keys containing dots (e.g., "eng.1")
 function getSchemaProperty(schema, path) {
@@ -2503,26 +2274,20 @@ window.handleArrayObjectFileUpload = async function(event, fieldId, itemIndex, p
     // Validate file type using uploadConfig
     const allowedTypes = uploadConfig.allowed_types || ['image/png', 'image/jpeg', 'image/jpg', 'image/bmp'];
     if (!allowedTypes.includes(file.type)) {
-        if (typeof showNotification === 'function') {
-            showNotification(`File ${file.name} is not a valid image type`, 'error');
-        }
+        showNotification(`File ${file.name} is not a valid image type`, 'error');
         return;
     }
 
     // Validate file size using uploadConfig
     const maxSizeMB = uploadConfig.max_size_mb || 5;
     if (file.size > maxSizeMB * 1024 * 1024) {
-        if (typeof showNotification === 'function') {
-            showNotification(`File ${file.name} exceeds ${maxSizeMB}MB limit`, 'error');
-        }
+        showNotification(`File ${file.name} exceeds ${maxSizeMB}MB limit`, 'error');
         return;
     }
 
     // Validate pluginId before upload (fail fast)
     if (!pluginId || pluginId === 'null' || pluginId === 'undefined' || (typeof pluginId === 'string' && pluginId.trim() === '')) {
-        if (typeof showNotification === 'function') {
-            showNotification('Plugin ID is required for file upload', 'error');
-        }
+        showNotification('Plugin ID is required for file upload', 'error');
         console.error('File upload failed: pluginId is required');
         return;
     }
@@ -2551,9 +2316,7 @@ window.handleArrayObjectFileUpload = async function(event, fieldId, itemIndex, p
                     errorMessage = `Upload failed: ${errorText}`;
                 }
             }
-            if (typeof showNotification === 'function') {
-                showNotification(errorMessage, 'error');
-            }
+            showNotification(errorMessage, 'error');
             return;
         }
 
@@ -2594,19 +2357,13 @@ window.handleArrayObjectFileUpload = async function(event, fieldId, itemIndex, p
             // Update the hidden input with the new file data
             updateArrayObjectData(fieldId);
 
-            if (typeof showNotification === 'function') {
-                showNotification('Logo uploaded successfully', 'success');
-            }
+            showNotification('Logo uploaded successfully', 'success');
         } else {
-            if (typeof showNotification === 'function') {
-                showNotification(`Upload failed: ${data.message || 'Unknown error'}`, 'error');
-            }
+            showNotification(`Upload failed: ${data.message || 'Unknown error'}`, 'error');
         }
     } catch (error) {
         console.error('Upload error:', error);
-        if (typeof showNotification === 'function') {
-            showNotification(`Upload error: ${error.message}`, 'error');
-        }
+        showNotification(`Upload error: ${error.message}`, 'error');
     }
 
     // Clear file input
@@ -2633,145 +2390,9 @@ window.removeArrayObjectFile = function(fieldId, itemIndex, propKey) {
     // Update the hidden input to remove the file data
     updateArrayObjectData(fieldId);
 
-    if (typeof showNotification === 'function') {
-        showNotification('Logo removed', 'success');
-    }
+    showNotification('Logo removed', 'success');
 };
 
-// Function to toggle nested sections
-window.toggleNestedSection = function(sectionId, event) {
-    // Prevent event bubbling if event is provided
-    if (event) {
-        event.stopPropagation();
-        event.preventDefault();
-    }
-
-    const content = document.getElementById(sectionId);
-    const icon = document.getElementById(sectionId + '-icon');
-
-    if (!content || !icon) return;
-
-    // Prevent multiple simultaneous toggles
-    if (content.dataset.toggling === 'true') {
-        return;
-    }
-
-    // Mark as toggling
-    content.dataset.toggling = 'true';
-
-    // Check current state before making changes
-    const hasCollapsed = content.classList.contains('collapsed');
-    const hasExpanded = content.classList.contains('expanded');
-    const displayStyle = content.style.display;
-    const computedDisplay = window.getComputedStyle(content).display;
-
-    // Check if content is currently collapsed - prioritize class over display style
-    const isCollapsed = hasCollapsed || (!hasExpanded && (displayStyle === 'none' || computedDisplay === 'none'));
-
-    if (isCollapsed) {
-        // Expand the section
-        content.classList.remove('collapsed');
-        content.classList.add('expanded');
-        content.style.display = 'block';
-        content.style.overflow = 'hidden'; // Prevent content jumping during animation
-
-        // CRITICAL FIX: Use setTimeout to ensure browser has time to layout the element
-        // When element goes from display:none to display:block, scrollHeight might be 0
-        // We need to wait for the browser to calculate the layout
-        setTimeout(() => {
-            // Force reflow to ensure transition works
-            void content.offsetHeight;
-
-            // Now measure the actual content height after layout
-            const scrollHeight = content.scrollHeight;
-            if (scrollHeight > 0) {
-                content.style.maxHeight = scrollHeight + 'px';
-            } else {
-                // Fallback: if scrollHeight is still 0, try measuring again after a brief delay
-                setTimeout(() => {
-                    const retryHeight = content.scrollHeight;
-                    content.style.maxHeight = retryHeight > 0 ? retryHeight + 'px' : '500px';
-                }, 10);
-            }
-        }, 10);
-
-        icon.classList.remove('fa-chevron-right');
-        icon.classList.add('fa-chevron-down');
-
-        // Allow parent section to show overflow when expanded
-        const sectionElement = content.closest('.nested-section');
-        if (sectionElement) {
-            sectionElement.style.overflow = 'visible';
-        }
-
-        // After animation completes, remove max-height constraint to allow natural expansion
-        // This allows parent sections to automatically expand
-        setTimeout(() => {
-            // Only set to none if still expanded (prevent race condition)
-            if (content.classList.contains('expanded') && !content.classList.contains('collapsed')) {
-                content.style.maxHeight = 'none';
-                content.style.overflow = '';
-            }
-            // Clear toggling flag
-            content.dataset.toggling = 'false';
-        }, 320); // Slightly longer than transition duration
-
-        // Scroll the expanded content into view after a short delay to allow animation
-        setTimeout(() => {
-            if (sectionElement) {
-                // Find the modal container
-                const modalContent = sectionElement.closest('.modal-content');
-                if (modalContent) {
-                    // Scroll the section header into view within the modal
-                    const headerButton = sectionElement.querySelector('button');
-                    if (headerButton) {
-                        headerButton.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
-                    }
-                } else {
-                    // If not in a modal, just scroll the section
-                    sectionElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-                }
-            }
-        }, 350); // Wait for animation to complete
-    } else {
-        // Collapse the section
-        content.classList.add('collapsed');
-        content.classList.remove('expanded');
-        content.style.overflow = 'hidden'; // Prevent content jumping during animation
-
-        // Set max-height to current scroll height first (required for smooth animation)
-        const currentHeight = content.scrollHeight;
-        content.style.maxHeight = currentHeight + 'px';
-
-        // Force reflow to apply the height
-        void content.offsetHeight;
-
-        // Then animate to 0
-        setTimeout(() => {
-            content.style.maxHeight = '0';
-        }, 10);
-
-        // Restore parent section overflow when collapsed
-        const sectionElement = content.closest('.nested-section');
-        if (sectionElement) {
-            sectionElement.style.overflow = 'hidden';
-        }
-
-        // Use setTimeout to set display:none after transition completes
-        setTimeout(() => {
-            if (content.classList.contains('collapsed')) {
-                content.style.display = 'none';
-                content.style.overflow = '';
-            }
-            // Clear toggling flag
-            content.dataset.toggling = 'false';
-        }, 320); // Match the CSS transition duration + small buffer
-        icon.classList.remove('fa-chevron-down');
-        icon.classList.add('fa-chevron-right');
-    }
-}
-
-
 // Generic Plugin Action Handler
 window.executePluginAction = function(actionId, actionIndex, pluginIdParam = null) {
     debugLog('[DEBUG] executePluginAction called - actionId:', actionId, 'actionIndex:', actionIndex, 'pluginIdParam:', pluginIdParam);
@@ -2831,19 +2452,12 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
         }
     }
 
-    // Fallback 5: Try to get from Alpine.js context (activeTab)
-    if (!pluginId && window.Alpine) {
-        try {
-            const appElement = document.querySelector('[x-data="app()"]');
-            if (appElement && appElement._x_dataStack && appElement._x_dataStack[0]) {
-                const appData = appElement._x_dataStack[0];
-                if (appData.activeTab && appData.activeTab !== 'overview' && appData.activeTab !== 'plugins' && appData.activeTab !== 'wifi') {
-                    pluginId = appData.activeTab;
-                    debugLog('[DEBUG] Got pluginId from Alpine activeTab:', pluginId);
-                }
-            }
-        } catch (e) {
-            console.warn('[DEBUG] Error accessing Alpine context:', e);
+    // Fallback 5: the active tab, when it is a plugin's tab
+    if (!pluginId) {
+        const appData = window.getApp();
+        if (appData && appData.activeTab && appData.activeTab !== 'overview' && appData.activeTab !== 'plugins' && appData.activeTab !== 'wifi') {
+            pluginId = appData.activeTab;
+            debugLog('[DEBUG] Got pluginId from Alpine activeTab:', pluginId);
         }
     }
 
@@ -2898,9 +2512,7 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
         console.error('No plugin ID available after all fallbacks. actionId:', actionId, 'actionIndex:', actionIndex);
         console.error('[DEBUG] Button found:', !!btn);
         console.error('[DEBUG] currentPluginConfig:', currentPluginConfig);
-        if (typeof showNotification === 'function') {
-            showNotification('Unable to determine plugin ID. Please refresh the page.', 'error');
-        }
+        showNotification('Unable to determine plugin ID. Please refresh the page.', 'error');
         return;
     }
 
@@ -2928,9 +2540,7 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
         console.error(`Action not found: ${actionId} for plugin ${pluginId}`);
         debugLog('[DEBUG] currentPluginConfig:', currentPluginConfig);
         debugLog('[DEBUG] installedPlugins:', window.installedPlugins);
-        if (typeof showNotification === 'function') {
-            showNotification(`Action ${actionId} not found. Please refresh the page.`, 'error');
-        }
+        showNotification(`Action ${actionId} not found. Please refresh the page.`, 'error');
         return;
     }
 
@@ -2962,13 +2572,11 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
         .then(response => response.json())
         .then(data => {
             if (data.status === 'success') {
-                statusDiv.innerHTML = `<div class="text-green-600"><i class="fas fa-check-circle mr-2"></i>${data.message}</div>`;
+                statusDiv.innerHTML = `<div class="text-green-600"><i class="fas fa-check-circle mr-2"></i>${escapeHtml(data.message || 'Action completed successfully')}</div>`;
                 btn.innerHTML = originalText;
                 btn.disabled = false;
                 delete btn.dataset.step;
-                if (typeof showNotification === 'function') {
-                    showNotification(data.message || 'Action completed successfully!', 'success');
-                }
+                showNotification(data.message || 'Action completed successfully!', 'success');
             } else {
                 statusDiv.innerHTML = `<div class="text-red-600"><i class="fas fa-exclamation-circle mr-2"></i>${escapeHtml(data.message || 'Error')}</div>`;
                 if (data.output) {
@@ -2980,7 +2588,7 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
             }
         })
         .catch(error => {
-            statusDiv.innerHTML = `<div class="text-red-600"><i class="fas fa-exclamation-circle mr-2"></i>Error: ${error.message}</div>`;
+            statusDiv.innerHTML = `<div class="text-red-600"><i class="fas fa-exclamation-circle mr-2"></i>Error: ${escapeHtml(error.message)}</div>`;
             btn.innerHTML = originalText;
             btn.disabled = false;
             delete btn.dataset.step;
@@ -3012,7 +2620,7 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
                 statusDiv.innerHTML = `
                     <div class="bg-blue-50 border border-blue-200 rounded p-3">
                         <div class="text-blue-900 font-medium mb-2">
-                            <i class="fas fa-link mr-2"></i>${data.message || 'Authorization URL Generated'}
+                            <i class="fas fa-link mr-2"></i>${escapeHtml(data.message || 'Authorization URL Generated')}
                         </div>
                         <div class="mb-3">
                             <p class="text-sm text-blue-700 mb-2">1. Click the link below to authorize:</p>
@@ -3026,27 +2634,23 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
                         </div>
                     </div>
                 `;
-                btn.innerHTML = action.step2_button_text || 'Complete Authentication';
+                btn.textContent = action.step2_button_text || 'Complete Authentication';
                 btn.dataset.step = '2';
                 btn.disabled = false;
-                if (typeof showNotification === 'function') {
-                    showNotification(data.message || 'Authorization URL generated. Please authorize and paste the redirect URL.', 'info');
-                }
+                showNotification(data.message || 'Authorization URL generated. Please authorize and paste the redirect URL.', 'info');
             } else {
                 // Simple success
                 statusDiv.innerHTML = `
                     <div class="bg-green-50 border border-green-200 rounded p-3">
                         <div class="text-green-900 font-medium mb-2">
-                            <i class="fas fa-check-circle mr-2"></i>${data.message || 'Action completed successfully'}
+                            <i class="fas fa-check-circle mr-2"></i>${escapeHtml(data.message || 'Action completed successfully')}
                         </div>
                         ${data.output ? `<pre class="mt-2 text-xs bg-green-50 p-2 rounded overflow-auto max-h-32">${escapeHtml(data.output)}</pre>` : ''}
                     </div>
                 `;
                 btn.innerHTML = originalText;
                 btn.disabled = false;
-                if (typeof showNotification === 'function') {
-                    showNotification(data.message || 'Action completed successfully!', 'success');
-                }
+                showNotification(data.message || 'Action completed successfully!', 'success');
             }
         } else {
             statusDiv.innerHTML = `
@@ -3062,14 +2666,12 @@ window.executePluginAction = function(actionId, actionIndex, pluginIdParam = nul
         }
     })
     .catch(error => {
-        statusDiv.innerHTML = `<div class="text-red-600"><i class="fas fa-exclamation-circle mr-2"></i>Error: ${error.message}</div>`;
+        statusDiv.innerHTML = `<div class="text-red-600"><i class="fas fa-exclamation-circle mr-2"></i>Error: ${escapeHtml(error.message)}</div>`;
         btn.innerHTML = originalText;
         btn.disabled = false;
     });
 }
 
-// togglePlugin is already defined at the top of the script - no need to redefine
-
 window.uninstallPlugin = function(pluginId) {
     const plugin = (window.installedPlugins || installedPlugins || []).find(p => p.id === pluginId);
     const pluginName = plugin ? (plugin.name || pluginId) : pluginId;
@@ -3164,11 +2766,7 @@ function handleUninstallSuccess(pluginId) {
     // Remove from local array immediately for better UX
     const currentPlugins = window.installedPlugins || installedPlugins || [];
     const updatedPlugins = currentPlugins.filter(p => p.id !== pluginId);
-    // Only update if list actually changed (setter will check, but we know it changed here)
-    window.installedPlugins = updatedPlugins;
-    if (typeof installedPlugins !== 'undefined') {
-        installedPlugins = updatedPlugins;
-    }
+    installedPlugins = updatedPlugins;
     renderInstalledPlugins(updatedPlugins);
     showNotification(`Plugin uninstalled successfully`, 'success');
 
@@ -3212,7 +2810,7 @@ function restartDisplay() {
 }
 
 function searchPluginStore(fetchCommitInfo = true) {
-    pluginLog('[STORE] Searching plugin store...', { fetchCommitInfo });
+    debugLog('[STORE] Searching plugin store...', { fetchCommitInfo });
 
     const now = Date.now();
     const isCacheValid = pluginStoreCache && cacheTimestamp && (now - cacheTimestamp < CACHE_DURATION);
@@ -3227,11 +2825,7 @@ function searchPluginStore(fetchCommitInfo = true) {
         }
     }
 
-    // Show loading state
-    try {
-        const countEl = document.getElementById('store-count');
-        if (countEl) countEl.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Loading...';
-    } catch (e) { /* ignore */ }
+    setStoreCount('<i class="fas fa-spinner fa-spin mr-1"></i>Loading...');
     showStoreLoading(true);
 
     let url = '/api/v3/plugins/store/list';
@@ -3255,47 +2849,39 @@ function searchPluginStore(fetchCommitInfo = true) {
 
                 const storeGrid = document.getElementById('plugin-store-grid');
                 if (!storeGrid) {
-                    pluginLog('[STORE] plugin-store-grid not ready, deferring render');
+                    debugLog('[STORE] plugin-store-grid not ready, deferring render');
                     window.__pendingStorePlugins = plugins;
                     return;
                 }
 
                 // Update total count
-                try {
-                    const countEl = document.getElementById('store-count');
-                    if (countEl) countEl.innerHTML = `${plugins.length} available`;
-                } catch (e) { /* ignore */ }
+                setStoreCount(`${plugins.length} available`);
 
                 applyStoreFiltersAndSort();
 
                 // Re-attach GitHub token collapse handler after store render
-                if (window.attachGithubTokenCollapseHandler) {
-                    requestAnimationFrame(() => {
-                        try { window.attachGithubTokenCollapseHandler(); } catch (e) { /* ignore */ }
-                        if (window.checkGitHubAuthStatus) {
-                            try { window.checkGitHubAuthStatus(); } catch (e) { /* ignore */ }
-                        }
-                    });
-                }
+                requestAnimationFrame(() => {
+                    window.attachGithubTokenCollapseHandler();
+                    window.checkGitHubAuthStatus();
+                });
             } else {
-                showError('Failed to search plugin store: ' + data.message);
-                try {
-                    const countEl = document.getElementById('store-count');
-                    if (countEl) countEl.innerHTML = 'Error loading';
-                } catch (e) { /* ignore */ }
+                showNotification('Failed to search plugin store: ' + data.message, 'error');
+                setStoreCount('Error loading');
             }
         })
         .catch(error => {
             console.error('Error searching plugin store:', error);
             showStoreLoading(false);
-            showError('Error searching plugin store: ' + error.message);
-            try {
-                const countEl = document.getElementById('store-count');
-                if (countEl) countEl.innerHTML = 'Error loading';
-            } catch (e) { /* ignore */ }
+            showNotification('Error searching plugin store: ' + error.message, 'error');
+            setStoreCount('Error loading');
         });
 }
 
+function setStoreCount(html) {
+    const countEl = document.getElementById('store-count');
+    if (countEl) countEl.innerHTML = html;
+}
+
 function showStoreLoading(show) {
     const loading = document.querySelector('.store-loading');
     if (loading) {
@@ -3319,8 +2905,7 @@ function isStorePluginInstalled(pluginIdOrPlugin) {
 }
 
 // ── Plugin Store: search / filter / sort ────────────────────────────────
-// Behaviour, element ids and localStorage keys are unchanged from the
-// hand-rolled version this replaces — only the machinery is now shared.
+// Driven by the shared ListFilter controller (js/plugins/list_filter.js).
 const STORE_COMPARATORS = {
     'a-z': (a, b) => storeSortName(a).localeCompare(storeSortName(b)),
     'z-a': (a, b) => storeSortName(b).localeCompare(storeSortName(a)),
@@ -3451,7 +3036,7 @@ window.pluginManager.searchPluginStore = searchPluginStore;
 function renderPluginStore(plugins) {
     const container = document.getElementById('plugin-store-grid');
     if (!container) {
-        pluginLog('[RENDER] plugin-store-grid not yet available, deferring render');
+        debugLog('[RENDER] plugin-store-grid not yet available, deferring render');
         window.__pendingStorePlugins = plugins;
         return;
     }
@@ -3469,10 +3054,6 @@ function renderPluginStore(plugins) {
         return;
     }
 
-    // JS string literal for an inline handler; see jsStringAttr
-    const escapeJs = (text) => {
-        return jsStringAttr(text || '');
-    };
 
     setGridHtmlIfChanged(container, plugins.map(plugin => {
         const installed = isStorePluginInstalled(plugin);
@@ -3516,10 +3097,10 @@ function renderPluginStore(plugins) {
                            class="flex-1 px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                 </div>
                 <div class="flex gap-2">
-                    <button onclick='if(window.installPlugin){const branchInput = document.getElementById("branch-input-${plugin.id.replace(/[^a-zA-Z0-9]/g, '-')}"); window.installPlugin(${escapeJs(plugin.id)}, branchInput?.value?.trim() || null)}else{console.error("installPlugin not available")}' class="btn ${installed ? 'bg-gray-500 hover:bg-gray-600' : 'bg-green-600 hover:bg-green-700'} text-white px-4 py-2 rounded-md text-sm flex-1 font-semibold">
+                    <button onclick='if(window.installPlugin){const branchInput = document.getElementById("branch-input-${plugin.id.replace(/[^a-zA-Z0-9]/g, '-')}"); window.installPlugin(${jsStringAttr(plugin.id)}, branchInput?.value?.trim() || null)}else{console.error("installPlugin not available")}' class="btn ${installed ? 'bg-gray-500 hover:bg-gray-600' : 'bg-green-600 hover:bg-green-700'} text-white px-4 py-2 rounded-md text-sm flex-1 font-semibold">
                         <i class="fas ${installed ? 'fa-redo' : 'fa-download'} mr-2"></i>${installed ? 'Reinstall' : 'Install'}
                     </button>
-                    <button onclick='${repoLink ? `window.open(${escapeJs(plugin.plugin_path ? repoLink + "/tree/" + encodeURIComponent(plugin.default_branch || plugin.branch || "main") + "/" + plugin.plugin_path.split("/").map(encodeURIComponent).join("/") : repoLink)}, "_blank")` : `void(0)`}' ${repoLink ? '' : 'disabled'} class="btn bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm flex-1 font-semibold${repoLink ? '' : ' opacity-50 cursor-not-allowed'}">
+                    <button onclick='${repoLink ? `window.open(${jsStringAttr(plugin.plugin_path ? repoLink + "/tree/" + encodeURIComponent(plugin.default_branch || plugin.branch || "main") + "/" + plugin.plugin_path.split("/").map(encodeURIComponent).join("/") : repoLink)}, "_blank")` : `void(0)`}' ${repoLink ? '' : 'disabled'} class="btn bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm flex-1 font-semibold${repoLink ? '' : ' opacity-50 cursor-not-allowed'}">
                         <i class="fas fa-external-link-alt mr-2"></i>View
                     </button>
                 </div>
@@ -3617,7 +3198,7 @@ window.installFromCustomRegistry = function(pluginId, registryUrl, pluginPath, b
     .then(response => response.json())
     .then(data => {
         if (data.status === 'success') {
-            showSuccess(`Plugin ${data.plugin_id} installed successfully`);
+            showNotification(`Plugin ${data.plugin_id} installed successfully`, 'success');
             // Refresh installed plugins and re-render custom registry
             loadInstalledPlugins();
             // Re-render custom registry to update install buttons
@@ -3626,28 +3207,23 @@ window.installFromCustomRegistry = function(pluginId, registryUrl, pluginPath, b
                 document.getElementById('load-registry-from-url').click();
             }
         } else {
-            showError(data.message || 'Installation failed');
+            showNotification(data.message || 'Installation failed', 'error');
         }
     })
     .catch(error => {
         let errorMsg = 'Error installing plugin: ' + error.message;
-        if (error.message && error.message.includes('Failed to Fetch')) {
+        if (isNetworkFailure(error)) {
             errorMsg += ' - Please try refreshing your browser.';
         }
-        showError(errorMsg);
+        showNotification(errorMsg, 'error');
     });
 }
 
 function setupCollapsibleSections() {
     debugLog('[setupCollapsibleSections] Setting up collapsible sections...');
 
-    // Installed Plugins and Plugin Store sections no longer have collapse buttons
-    // They are always visible
-
-    // Functions are now defined outside IIFE, just attach the handler
-    if (window.attachGithubTokenCollapseHandler) {
-        window.attachGithubTokenCollapseHandler();
-    }
+    // The GitHub token panel is the only collapsible section left.
+    window.attachGithubTokenCollapseHandler();
 
     debugLog('[setupCollapsibleSections] Collapsible sections setup complete');
 }
@@ -3680,10 +3256,6 @@ function renderSavedRepositories(repositories) {
         return;
     }
 
-    // JS string literal for an inline handler; see jsStringAttr
-    const escapeJs = (text) => {
-        return jsStringAttr(text || '');
-    };
 
     container.innerHTML = repositories.map(repo => {
         const repoUrl = repo.url || '';
@@ -3699,7 +3271,7 @@ function renderSavedRepositories(repositories) {
                     </div>
                     <p class="text-xs text-gray-500 truncate" title="${escapeAttribute(repoUrl)}">${escapeHtml(repoUrl)}</p>
                 </div>
-                <button onclick='if(window.removeSavedRepository){window.removeSavedRepository(${escapeJs(repoUrl)})}else{console.error("removeSavedRepository not available")}' class="ml-2 text-red-600 hover:text-red-800 text-xs px-2 py-1" title="Remove repository" aria-label="Remove saved repository ${escapeAttribute(repoName)}">
+                <button onclick='if(window.removeSavedRepository){window.removeSavedRepository(${jsStringAttr(repoUrl)})}else{console.error("removeSavedRepository not available")}' class="ml-2 text-red-600 hover:text-red-800 text-xs px-2 py-1" title="Remove repository" aria-label="Remove saved repository ${escapeAttribute(repoName)}">
                     <i class="fas fa-trash" aria-hidden="true"></i>
                 </button>
             </div>
@@ -3722,16 +3294,16 @@ window.removeSavedRepository = function(repoUrl) {
     .then(response => response.json())
     .then(data => {
         if (data.status === 'success') {
-            showSuccess('Repository removed successfully');
+            showNotification('Repository removed successfully', 'success');
             renderSavedRepositories(data.data.repositories || []);
             // Refresh plugin store to remove plugins from deleted repo
             searchPluginStore();
         } else {
-            showError(data.message || 'Failed to remove repository');
+            showNotification(data.message || 'Failed to remove repository', 'error');
         }
     })
     .catch(error => {
-        showError('Error removing repository: ' + error.message);
+        showNotification('Error removing repository: ' + error.message, 'error');
     });
 }
 
@@ -3816,7 +3388,7 @@ function attachInstallButtonHandler() {
                     debugLog('[attachInstallButtonHandler] Response data:', data);
                     if (data.status === 'success') {
                         if (pluginStatusDiv) {
-                            pluginStatusDiv.innerHTML = `<span class="text-green-600"><i class="fas fa-check-circle mr-1"></i>Successfully installed: ${data.plugin_id}</span>`;
+                            pluginStatusDiv.innerHTML = `<span class="text-green-600"><i class="fas fa-check-circle mr-1"></i>Successfully installed: ${escapeHtml(data.plugin_id)}</span>`;
                         }
                         pluginUrlInput.value = '';
 
@@ -3826,14 +3398,14 @@ function attachInstallButtonHandler() {
                         }, 1000);
                     } else {
                         if (pluginStatusDiv) {
-                            pluginStatusDiv.innerHTML = `<span class="text-red-600"><i class="fas fa-times-circle mr-1"></i>${data.message || 'Installation failed'}</span>`;
+                            pluginStatusDiv.innerHTML = `<span class="text-red-600"><i class="fas fa-times-circle mr-1"></i>${escapeHtml(data.message || 'Installation failed')}</span>`;
                         }
                     }
                 })
                 .catch(error => {
                     console.error('[attachInstallButtonHandler] Error:', error);
                     if (pluginStatusDiv) {
-                        pluginStatusDiv.innerHTML = `<span class="text-red-600"><i class="fas fa-times-circle mr-1"></i>Error: ${error.message}</span>`;
+                        pluginStatusDiv.innerHTML = `<span class="text-red-600"><i class="fas fa-times-circle mr-1"></i>Error: ${escapeHtml(error.message)}</span>`;
                     }
                 })
                 .finally(() => {
@@ -3982,7 +3554,7 @@ function setupGitHubInstallHandlers() {
                 }
             })
             .catch(error => {
-                registryStatusDiv.innerHTML = `<span class="text-red-600"><i class="fas fa-times-circle mr-1"></i>Error: ${error.message}</span>`;
+                registryStatusDiv.innerHTML = `<span class="text-red-600"><i class="fas fa-times-circle mr-1"></i>Error: ${escapeHtml(error.message)}</span>`;
                 customRegistryPlugins.classList.add('hidden');
             })
             .finally(() => {
@@ -4005,12 +3577,12 @@ function setupGitHubInstallHandlers() {
         saveRegistryBtn.addEventListener('click', function() {
             const repoUrl = registryUrlInput.value.trim();
             if (!repoUrl) {
-                showError('Please enter a repository URL first');
+                showNotification('Please enter a repository URL first', 'error');
                 return;
             }
 
             if (!isGithubUrl(repoUrl)) {
-                showError('Please enter a valid GitHub URL');
+                showNotification('Please enter a valid GitHub URL', 'error');
                 return;
             }
 
@@ -4027,16 +3599,16 @@ function setupGitHubInstallHandlers() {
             .then(response => response.json())
             .then(data => {
                 if (data.status === 'success') {
-                    showSuccess('Repository saved successfully! Its plugins will appear in the Plugin Store.');
+                    showNotification('Repository saved successfully! Its plugins will appear in the Plugin Store.', 'success');
                     renderSavedRepositories(data.data.repositories || []);
                     // Refresh plugin store to include new repo
                     searchPluginStore();
                 } else {
-                    showError(data.message || 'Failed to save repository');
+                    showNotification(data.message || 'Failed to save repository', 'error');
                 }
             })
             .catch(error => {
-                showError('Error saving repository: ' + error.message);
+                showNotification('Error saving repository: ' + error.message, 'error');
             })
             .finally(() => {
                 saveRegistryBtn.disabled = false;
@@ -4051,7 +3623,7 @@ function setupGitHubInstallHandlers() {
         refreshSavedReposBtn.addEventListener('click', function() {
             loadSavedRepositories();
             searchPluginStore(); // Also refresh plugin store
-            showSuccess('Repositories refreshed');
+            showNotification('Repositories refreshed', 'success');
         });
     }
 }
@@ -4065,27 +3637,12 @@ function renderCustomRegistryPlugins(plugins, registryUrl) {
         return;
     }
 
-    // Escape HTML helper. Quotes too: the result lands in quoted attribute
-    // values, and the textContent/innerHTML round-trip only escapes &, < and >.
-    const escapeHtml = (text) => {
-        if (!text) return '';
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#39;');
-    };
-
-    // JS string literal for an inline handler; see jsStringAttr
-    const escapeJs = (text) => {
-        return jsStringAttr(text || '');
-    };
 
     container.innerHTML = plugins.map(plugin => {
         const isInstalled = isStorePluginInstalled(plugin);
-        const pluginIdJs = escapeJs(plugin.id);
-        const escapedUrlJs = escapeJs(registryUrl);
-        const pluginPathJs = escapeJs(plugin.plugin_path || '');
+        const pluginIdJs = jsStringAttr(plugin.id);
+        const escapedUrlJs = jsStringAttr(registryUrl);
+        const pluginPathJs = jsStringAttr(plugin.plugin_path || '');
         const branchInputId = `branch-input-custom-${plugin.id.replace(/[^a-zA-Z0-9]/g, '-')}`;
 
         const installBtn = isInstalled
@@ -4119,32 +3676,13 @@ function renderCustomRegistryPlugins(plugins, registryUrl) {
     }).join('');
 }
 
-function showSuccess(message) {
-    // Try to use notification system if available, otherwise use alert
-    if (typeof showNotification === 'function') {
-        showNotification(message, 'success');
-    } else {
-        debugLog('Success: ' + message);
-        // Show a temporary success message
-        const statusDiv = document.getElementById('github-plugin-status') || document.getElementById('registry-status');
-        if (statusDiv) {
-            statusDiv.innerHTML = `<span class="text-green-600"><i class="fas fa-check-circle mr-1"></i>${message}</span>`;
-            setTimeout(() => {
-                if (statusDiv) statusDiv.innerHTML = '';
-            }, 5000);
-        }
-    }
-}
-
-function showError(message) {
+// Replaces the whole Plugin Manager panel. Only for a first load of the
+// installed list that failed, when there is nothing else worth keeping on
+// screen; every other failure is a notification.
+function showInstalledLoadError(message) {
     const content = document.getElementById('plugins-content');
     if (!content) {
-        console.error('plugins-content element not found');
-        if (typeof showNotification === 'function') {
-            showNotification(message, 'error');
-        } else {
-            console.error('Error: ' + message);
-        }
+        showNotification(message, 'error');
         return;
     }
     content.innerHTML = `
@@ -4155,6 +3693,11 @@ function showError(message) {
     `;
 }
 
+// fetch() rejects with a TypeError when no HTTP answer arrives at all
+// (connection refused, offline); PluginAPI wraps that as NETWORK_ERROR.
+function isNetworkFailure(error) {
+    return error instanceof TypeError || (error && error.error_code === 'NETWORK_ERROR');
+}
 
 // Validate that a URL's actual host is github.com (not just a substring
 // match, which 'evil.com/github.com' or 'github.com.evil.com' would pass).
@@ -4169,40 +3712,11 @@ function isGithubUrl(url) {
     }
 }
 
-// Utility function to escape HTML. Quotes too: most call sites interpolate the
-// result into a quoted attribute value, and the textContent/innerHTML
-// round-trip only escapes &, < and >.
-function escapeHtml(text) {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
-
-// Utility function to escape text for use in HTML attributes
-// Escapes quotes, ampersands, and other special characters that could break attributes
-function escapeAttribute(text) {
-    if (text == null) {
-        return '';
-    }
-    const str = String(text);
-    return str
-        .replace(/&/g, '&amp;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-}
-
-// A quoted JS string literal that is safe inside an inline handler attribute
-// (onclick='f(${jsStringAttr(id)})' or onclick="..."). JSON.stringify alone
-// makes a valid JS string but leaves ' and & untouched, so a registry entry
-// id containing ' closed a single-quoted attribute and added its own
-// handlers. The browser decodes the entities before the JS is parsed.
-function jsStringAttr(value) {
-    return escapeAttribute(JSON.stringify(value == null ? '' : String(value)));
-}
+// Short local names for window.LEDEscape (app-early.js), which says what each
+// one is for. Function declarations, so they are usable anywhere in this IIFE.
+function escapeHtml(text) { return window.LEDEscape.html(text); }
+function escapeAttribute(text) { return window.LEDEscape.attr(text); }
+function jsStringAttr(value) { return window.LEDEscape.jsStringAttr(value); }
 
 function isNewPlugin(lastUpdated) {
     if (!lastUpdated) return false;
@@ -4219,20 +3733,8 @@ function isNewPlugin(lastUpdated) {
     }
 }
 
-// Debounce utility
-function debounce(func, wait) {
-    let timeout;
-    return function executedFunction(...args) {
-        const later = () => {
-            clearTimeout(timeout);
-            func(...args);
-        };
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-    };
-}
-
-// Toggle password visibility for secret fields
+// Opens the GitHub token panel (the warning banner's "Configure Token" link),
+// expanded, and reports whether a token is saved.
 window.openGithubTokenSettings = function() {
     const settings = document.getElementById('github-token-settings');
     const warning = document.getElementById('github-auth-warning');
@@ -4476,482 +3978,19 @@ window.dismissGithubWarning = function() {
 }
 
 
-// ==================== File Upload Functions ====================
-// Note: handleFileDrop, handleFileSelect, and handleFiles are defined in
-// file-upload.js widget which loads first. We only define supplementary
-// functions here that file-upload.js doesn't provide.
-
-window.handleCredentialsUpload = async function(event, fieldId, uploadEndpoint, targetFilename) {
-    const file = event.target.files[0];
-    if (!file) {
-        return;
-    }
-
-    // Validate file extension
-    const fileExt = '.' + file.name.split('.').pop().toLowerCase();
-    if (!fileExt || fileExt === '.') {
-        showNotification('Please select a valid file', 'error');
-        return;
-    }
-
-    // Validate file size (1MB max)
-    if (file.size > 1024 * 1024) {
-        showNotification('File exceeds 1MB limit', 'error');
-        return;
-    }
-
-    // Show upload status
-    const statusEl = document.getElementById(fieldId + '_status');
-    if (statusEl) {
-        statusEl.textContent = '';
-        const spinner = document.createElement('i');
-        spinner.className = 'fas fa-spinner fa-spin mr-2';
-        statusEl.appendChild(spinner);
-        statusEl.appendChild(document.createTextNode('Uploading...'));
-    }
-
-    // Create form data
-    const formData = new FormData();
-    formData.append('file', file);
-
-    try {
-        const response = await fetch(uploadEndpoint, {
-            method: 'POST',
-            body: formData
-        });
-
-        if (!response.ok) {
-            const body = await response.text();
-            throw new Error(`Server error ${response.status}: ${body}`);
-        }
-
-        const data = await response.json();
-
-        if (data.status === 'success') {
-            // Update hidden input with filename
-            const hiddenInput = document.getElementById(fieldId + '_hidden');
-            if (hiddenInput) {
-                hiddenInput.value = targetFilename || file.name;
-            }
-
-            // Update status
-            if (statusEl) {
-                statusEl.textContent = `✓ Uploaded: ${targetFilename || file.name}`;
-                statusEl.className = 'text-sm text-green-600';
-            }
-
-            showNotification('Credentials file uploaded successfully', 'success');
-        } else {
-            if (statusEl) {
-                statusEl.textContent = 'Upload failed - click to try again';
-                statusEl.className = 'text-sm text-gray-600';
-            }
-            showNotification(data.message || 'Upload failed', 'error');
-        }
-    } catch (error) {
-        if (statusEl) {
-            statusEl.textContent = 'Upload failed - click to try again';
-            statusEl.className = 'text-sm text-gray-600';
-        }
-        showNotification('Error uploading file: ' + error.message, 'error');
-    } finally {
-        // Allow re-selecting the same file on the next attempt
-        event.target.value = '';
-    }
-}
-
-// handleFiles is now defined exclusively in file-upload.js widget
-
-window.deleteUploadedFile = async function(fieldId, fileId, pluginId, fileType, customDeleteEndpoint) {
-    const fileTypeLabel = fileType === 'json' ? 'file' : 'image';
-    if (!confirm(`Are you sure you want to delete this ${fileTypeLabel}?`)) {
-        return;
-    }
-
-    try {
-        const deleteEndpoint = customDeleteEndpoint || (fileType === 'json' ? '/api/v3/plugins/of-the-day/json/delete' : '/api/v3/plugins/assets/delete');
-        const requestBody = fileType === 'json'
-            ? { file_id: fileId }
-            : { plugin_id: pluginId, image_id: fileId };
-
-        const response = await fetch(deleteEndpoint, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(requestBody)
-        });
-
-        if (!response.ok) {
-            const body = await response.text();
-            throw new Error(`Server error ${response.status}: ${body}`);
-        }
-
-        const data = await response.json();
-
-        if (data.status === 'success') {
-            if (fileType === 'json') {
-                // For JSON files, remove the item's DOM element directly since
-                // updateImageList renders image-specific cards (thumbnails, scheduling).
-                const fileEl = document.getElementById(`file_${fileId}`);
-                if (fileEl) fileEl.remove();
-                // Update hidden data input — normalize identifiers to strings
-                // since JSON files may use id, file_id, or category_name
-                const currentFiles = window.getCurrentImages ? window.getCurrentImages(fieldId) : [];
-                const fileIdStr = String(fileId);
-                const newFiles = currentFiles.filter(f => {
-                    // Match the same identifier logic as the renderer:
-                    // file.id || file.category_name || idx (see renderArrayField)
-                    const fid = String(f.id || f.category_name || '');
-                    return fid !== fileIdStr;
-                });
-                const hiddenInput = document.getElementById(`${fieldId}_images_data`);
-                if (hiddenInput) hiddenInput.value = JSON.stringify(newFiles);
-            } else {
-                // For images, use the full image list re-renderer — normalize to strings
-                const currentFiles = window.getCurrentImages ? window.getCurrentImages(fieldId) : [];
-                const fileIdStr = String(fileId);
-                const newFiles = currentFiles.filter(file => {
-                    const fid = String(file.id || file.category_name || '');
-                    return fid !== fileIdStr;
-                });
-                window.updateImageList(fieldId, newFiles);
-            }
-
-            showNotification(`${fileType === 'json' ? 'File' : 'Image'} deleted successfully`, 'success');
-        } else {
-            showNotification(`Delete failed: ${data.message}`, 'error');
-        }
-    } catch (error) {
-        console.error('Delete error:', error);
-        showNotification(`Delete error: ${error.message}`, 'error');
-    }
-}
-
-// getUploadConfig is defined in file-upload.js widget which loads first.
-// No override needed here — file-upload.js owns this function.
-
-window.updateImageList = function(fieldId, images) {
-    const hiddenInput = document.getElementById(`${fieldId}_images_data`);
-    if (hiddenInput) {
-        hiddenInput.value = JSON.stringify(images);
-    }
-
-    // Update the display
-    const imageList = document.getElementById(`${fieldId}_image_list`);
-    if (imageList) {
-        const uploadConfig = window.getUploadConfig(fieldId);
-        const pluginId = uploadConfig.plugin_id || window.currentPluginConfig?.pluginId || 'static-image';
-
-        imageList.innerHTML = images.map((img, idx) => {
-            const imgSchedule = img.schedule || {};
-            const hasSchedule = imgSchedule.enabled && imgSchedule.mode && imgSchedule.mode !== 'always';
-            const scheduleSummary = hasSchedule ? (window.getScheduleSummary ? window.getScheduleSummary(imgSchedule) : 'Scheduled') : 'Always shown';
-
-            return `
-            <div id="img_${escapeAttribute(img.id || idx)}" class="bg-gray-50 p-3 rounded-lg border border-gray-200">
-                <div class="flex items-center justify-between mb-2">
-                    <div class="flex items-center space-x-3 flex-1">
-                        <img src="/${escapeAttribute(String(img.path || '').replace(/^\/+/, ''))}"
-                             alt="${escapeAttribute(img.filename || '')}"
-                             loading="lazy" decoding="async"
-                             class="w-16 h-16 object-cover rounded"
-                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
-                        <div style="display:none;" class="w-16 h-16 bg-gray-200 rounded flex items-center justify-center">
-                            <i class="fas fa-image text-gray-400"></i>
-                        </div>
-                        <div class="flex-1 min-w-0">
-                            <p class="text-sm font-medium text-gray-900 truncate">${escapeHtml(img.original_filename || img.filename || 'Image')}</p>
-                            <p class="text-xs text-gray-500">${window.formatFileSize ? window.formatFileSize(img.size || 0) : (Math.round((img.size || 0) / 1024) + ' KB')} • ${window.formatDate ? window.formatDate(img.uploaded_at) : (img.uploaded_at || '')}</p>
-                            <p class="text-xs text-blue-600 mt-1">
-                                <i class="fas fa-clock mr-1"></i>${scheduleSummary}
-                            </p>
-                        </div>
-                    </div>
-                    <div class="flex items-center space-x-2 ml-4">
-                        <button type="button"
-                                onclick="window.openImageSchedule(${jsStringAttr(fieldId)}, ${jsStringAttr(img.id)}, ${idx})"
-                                class="text-blue-600 hover:text-blue-800 p-2"
-                                title="Schedule this image"
-                                aria-label="Schedule image ${escapeAttribute(img.original_filename || img.filename || '')}">
-                            <i class="fas fa-calendar-alt" aria-hidden="true"></i>
-                        </button>
-                        <button type="button"
-                                onclick="window.deleteUploadedImage(${jsStringAttr(fieldId)}, ${jsStringAttr(img.id)}, ${jsStringAttr(pluginId)})"
-                                class="text-red-600 hover:text-red-800 p-2"
-                                title="Delete image"
-                                aria-label="Delete image ${escapeAttribute(img.original_filename || img.filename || '')}">
-                            <i class="fas fa-trash" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-                <!-- Schedule widget will be inserted here when opened -->
-                <div id="schedule_${escapeAttribute(img.id || idx)}" class="hidden mt-3 pt-3 border-t border-gray-300"></div>
-            </div>
-            `;
-        }).join('');
-    }
-}
-
-window.hideUploadProgress = function(fieldId) {
-    const uploadConfig = window.getUploadConfig(fieldId);
-    const maxFiles = uploadConfig.max_files || 10;
-    const maxSizeMB = uploadConfig.max_size_mb || 5;
-    const allowedTypes = uploadConfig.allowed_types || ['image/png', 'image/jpeg', 'image/bmp', 'image/gif'];
-
-    const dropZone = document.getElementById(`${fieldId}_drop_zone`);
-    if (dropZone) {
-        dropZone.innerHTML = `
-            <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
-            <p class="text-sm text-gray-600">Drag and drop images here or click to browse</p>
-            <p class="text-xs text-gray-500 mt-1">Max ${maxFiles} files, ${maxSizeMB}MB each (PNG, JPG, GIF, BMP)</p>
-        `;
-        dropZone.style.pointerEvents = 'auto';
-    }
-}
-
-function formatDate(dateString) {
-    if (!dateString) return 'Unknown date';
-    try {
-        const date = new Date(dateString);
-        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    } catch (e) {
-        return dateString;
-    }
-}
-
-window.openImageSchedule = function(fieldId, imageId, imageIdx) {
-    const currentImages = getCurrentImages(fieldId);
-    const image = currentImages[imageIdx];
-    if (!image) return;
-
-    const scheduleContainer = document.getElementById(`schedule_${imageId || imageIdx}`);
-    if (!scheduleContainer) return;
-
-    // Toggle visibility
-    const isVisible = !scheduleContainer.classList.contains('hidden');
-
-    if (isVisible) {
-        scheduleContainer.classList.add('hidden');
-        return;
-    }
-
-    scheduleContainer.classList.remove('hidden');
-
-    const schedule = image.schedule || { enabled: false, mode: 'always', start_time: '08:00', end_time: '18:00', days: {} };
-
-    scheduleContainer.innerHTML = `
-        <div class="bg-white rounded-lg border border-blue-200 p-4">
-            <h4 class="text-sm font-semibold text-gray-900 mb-3">
-                <i class="fas fa-clock mr-2"></i>Schedule Settings
-            </h4>
-
-            <!-- Enable Schedule -->
-            <div class="mb-4">
-                <label class="flex items-center">
-                    <input type="checkbox"
-                           id="schedule_enabled_${imageId}"
-                           ${schedule.enabled ? 'checked' : ''}
-                           onchange="window.toggleImageScheduleEnabled('${fieldId}', '${imageId}', ${imageIdx})"
-                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                    <span class="ml-2 text-sm font-medium text-gray-700">Enable schedule for this image</span>
-                </label>
-                <p class="ml-6 text-xs text-gray-500 mt-1">When enabled, this image will only display during scheduled times</p>
-            </div>
-
-            <!-- Schedule Mode -->
-            <div id="schedule_options_${imageId}" class="space-y-4" style="display: ${schedule.enabled ? 'block' : 'none'};">
-                <div>
-                    <label for="schedule_mode_${imageId}" class="block text-sm font-medium text-gray-700 mb-2">Schedule Type</label>
-                    <select id="schedule_mode_${imageId}"
-                            onchange="window.updateImageScheduleMode('${fieldId}', '${imageId}', ${imageIdx})"
-                            class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
-                        <option value="always" ${schedule.mode === 'always' ? 'selected' : ''}>Always Show (No Schedule)</option>
-                        <option value="time_range" ${schedule.mode === 'time_range' ? 'selected' : ''}>Same Time Every Day</option>
-                        <option value="per_day" ${schedule.mode === 'per_day' ? 'selected' : ''}>Different Times Per Day</option>
-                    </select>
-                </div>
-
-                <!-- Time Range Mode -->
-                <div id="time_range_${imageId}" class="grid grid-cols-2 gap-4" style="display: ${schedule.mode === 'time_range' ? 'grid' : 'none'};">
-                    <div>
-                        <label for="schedule_start_${imageId}" class="block text-xs font-medium text-gray-700 mb-1">Start Time</label>
-                        <input type="time"
-                               id="schedule_start_${imageId}"
-                               value="${schedule.start_time || '08:00'}"
-                               onchange="window.updateImageScheduleTime('${fieldId}', '${imageId}', ${imageIdx})"
-                               class="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md">
-                    </div>
-                    <div>
-                        <label for="schedule_end_${imageId}" class="block text-xs font-medium text-gray-700 mb-1">End Time</label>
-                        <input type="time"
-                               id="schedule_end_${imageId}"
-                               value="${schedule.end_time || '18:00'}"
-                               onchange="window.updateImageScheduleTime('${fieldId}', '${imageId}', ${imageIdx})"
-                               class="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md">
-                    </div>
-                </div>
-
-                <!-- Per-Day Mode -->
-                <div id="per_day_${imageId}" style="display: ${schedule.mode === 'per_day' ? 'block' : 'none'};">
-                    <label class="block text-xs font-medium text-gray-700 mb-2">Day-Specific Times</label>
-                    <div class="bg-gray-50 rounded p-3 space-y-2 max-h-64 overflow-y-auto">
-                        ${['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'].map(day => {
-                            const dayConfig = (schedule.days && schedule.days[day]) || { enabled: true, start_time: '08:00', end_time: '18:00' };
-                            return `
-                            <div class="bg-white rounded p-2 border border-gray-200">
-                                <div class="flex items-center justify-between mb-2">
-                                    <label class="flex items-center">
-                                        <input type="checkbox"
-                                               id="day_${day}_${imageId}"
-                                               ${dayConfig.enabled ? 'checked' : ''}
-                                               onchange="window.updateImageScheduleDay('${fieldId}', '${imageId}', ${imageIdx}, '${day}')"
-                                               class="h-3 w-3 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                                        <span class="ml-2 text-xs font-medium text-gray-700 capitalize">${day}</span>
-                                    </label>
-                                </div>
-                                <div class="grid grid-cols-2 gap-2 ml-5" id="day_times_${day}_${imageId}" style="display: ${dayConfig.enabled ? 'grid' : 'none'};">
-                                    <input type="time"
-                                           id="day_${day}_start_${imageId}"
-                                           aria-label="${day} start time"
-                                           value="${dayConfig.start_time || '08:00'}"
-                                           onchange="updateImageScheduleDay('${fieldId}', '${imageId}', ${imageIdx}, '${day}')"
-                                           class="text-xs px-2 py-1 border border-gray-300 rounded"
-                                           ${!dayConfig.enabled ? 'disabled' : ''}>
-                                    <input type="time"
-                                           id="day_${day}_end_${imageId}"
-                                           aria-label="${day} end time"
-                                           value="${dayConfig.end_time || '18:00'}"
-                                           onchange="updateImageScheduleDay('${fieldId}', '${imageId}', ${imageIdx}, '${day}')"
-                                           class="text-xs px-2 py-1 border border-gray-300 rounded"
-                                           ${!dayConfig.enabled ? 'disabled' : ''}>
-                                </div>
-                            </div>
-                            `;
-                        }).join('')}
-                    </div>
-                </div>
-            </div>
-        </div>
-    `;
-}
-
-window.toggleImageScheduleEnabled = function(fieldId, imageId, imageIdx) {
-    const currentImages = window.getCurrentImages(fieldId);
-    const image = currentImages[imageIdx];
-    if (!image) return;
-
-    const checkbox = document.getElementById(`schedule_enabled_${imageId}`);
-    const enabled = checkbox.checked;
-
-    if (!image.schedule) {
-        image.schedule = { enabled: false, mode: 'always', start_time: '08:00', end_time: '18:00', days: {} };
-    }
-
-    image.schedule.enabled = enabled;
-
-    const optionsDiv = document.getElementById(`schedule_options_${imageId}`);
-    if (optionsDiv) {
-        optionsDiv.style.display = enabled ? 'block' : 'none';
-    }
-
-    window.updateImageList(fieldId, currentImages);
-}
-
-window.updateImageScheduleMode = function(fieldId, imageId, imageIdx) {
-    const currentImages = window.getCurrentImages(fieldId);
-    const image = currentImages[imageIdx];
-    if (!image) return;
-
-    if (!image.schedule) {
-        image.schedule = { enabled: true, mode: 'always', start_time: '08:00', end_time: '18:00', days: {} };
-    }
-
-    const modeSelect = document.getElementById(`schedule_mode_${imageId}`);
-    const mode = modeSelect.value;
-
-    image.schedule.mode = mode;
-
-    const timeRangeDiv = document.getElementById(`time_range_${imageId}`);
-    const perDayDiv = document.getElementById(`per_day_${imageId}`);
-
-    if (timeRangeDiv) timeRangeDiv.style.display = mode === 'time_range' ? 'grid' : 'none';
-    if (perDayDiv) perDayDiv.style.display = mode === 'per_day' ? 'block' : 'none';
-
-    window.updateImageList(fieldId, currentImages);
-}
-
-window.updateImageScheduleTime = function(fieldId, imageId, imageIdx) {
-    const currentImages = window.getCurrentImages(fieldId);
-    const image = currentImages[imageIdx];
-    if (!image) return;
-
-    if (!image.schedule) {
-        image.schedule = { enabled: true, mode: 'time_range', start_time: '08:00', end_time: '18:00' };
-    }
-
-    const startInput = document.getElementById(`schedule_start_${imageId}`);
-    const endInput = document.getElementById(`schedule_end_${imageId}`);
-
-    if (startInput) image.schedule.start_time = startInput.value || '08:00';
-    if (endInput) image.schedule.end_time = endInput.value || '18:00';
-
-    window.updateImageList(fieldId, currentImages);
-}
-
-window.updateImageScheduleDay = function(fieldId, imageId, imageIdx, day) {
-    const currentImages = window.getCurrentImages(fieldId);
-    const image = currentImages[imageIdx];
-    if (!image) return;
-
-    if (!image.schedule) {
-        image.schedule = { enabled: true, mode: 'per_day', days: {} };
-    }
-
-    if (!image.schedule.days) {
-        image.schedule.days = {};
-    }
-
-    const checkbox = document.getElementById(`day_${day}_${imageId}`);
-    const startInput = document.getElementById(`day_${day}_start_${imageId}`);
-    const endInput = document.getElementById(`day_${day}_end_${imageId}`);
-
-    const enabled = checkbox ? checkbox.checked : true;
-
-    if (!image.schedule.days[day]) {
-        image.schedule.days[day] = { enabled: true, start_time: '08:00', end_time: '18:00' };
-    }
-
-    image.schedule.days[day].enabled = enabled;
-
-    if (startInput) image.schedule.days[day].start_time = startInput.value || '08:00';
-    if (endInput) image.schedule.days[day].end_time = endInput.value || '18:00';
-
-    const timesDiv = document.getElementById(`day_times_${day}_${imageId}`);
-    if (timesDiv) {
-        timesDiv.style.display = enabled ? 'grid' : 'none';
-        if (startInput) startInput.disabled = !enabled;
-        if (endInput) endInput.disabled = !enabled;
-    }
-
-    window.updateImageList(fieldId, currentImages);
-}
-
-// Expose renderArrayObjectItem, getSchemaProperty, and escapeHtml to window for use by global functions
+// Used by the array-of-objects helpers below, which live outside this IIFE.
 window.renderArrayObjectItem = renderArrayObjectItem;
 window.getSchemaProperty = getSchemaProperty;
-window.escapeHtml = escapeHtml;
-window.escapeAttribute = escapeAttribute;
 
-// Expose GitHub install handlers. These must be assigned inside the IIFE —
-// from outside the IIFE, `typeof attachInstallButtonHandler` evaluates to
-// 'undefined' and the fallback path at the bottom of this file fires a
-// [FALLBACK] attachInstallButtonHandler not available on window warning.
+// Assigned here because the functions are IIFE-local; the load-time and
+// htmx:afterSettle wiring below, outside the IIFE, reaches them through window.
 window.attachInstallButtonHandler = attachInstallButtonHandler;
 window.setupGitHubInstallHandlers = setupGitHubInstallHandlers;
 
 })(); // End IIFE
 
-// Functions to handle array-of-objects
-// Define these at the top level (outside any IIFE) to ensure they're always available
+// Array-of-objects config fields: add and remove items (the inline onclick
+// handlers that renderArrayObjectItem writes call these).
 if (typeof window !== 'undefined') {
     window.addArrayObjectItem = function(fieldId, fullKey, maxItems) {
         const itemsContainer = document.getElementById(fieldId + '_items');
@@ -4983,35 +4022,8 @@ if (typeof window !== 'undefined') {
         if (!itemsSchema || !itemsSchema.properties) return;
 
         const newIndex = currentItems.length;
-        // Use renderArrayObjectItem if available, otherwise create basic HTML
-        let itemHtml = '';
-        if (typeof window.renderArrayObjectItem === 'function') {
-            itemHtml = window.renderArrayObjectItem(fieldId, fullKey, itemsSchema.properties, {}, newIndex, itemsSchema);
-        } else {
-            // Fallback: create basic HTML structure
-            // Note: newItem is {} for newly added items, so this will use schema defaults
-            const newItem = {};
-            itemHtml = `<div class="border border-gray-300 rounded-lg p-4 bg-gray-50 array-object-item" data-index="${newIndex}">`;
-            Object.keys(itemsSchema.properties || {}).forEach(propKey => {
-                const propSchema = itemsSchema.properties[propKey];
-                if (propSchema && propSchema['x-display'] === 'hidden') return;
-                const propValue = newItem[propKey] !== undefined ? newItem[propKey] : propSchema.default;
-                const propLabel = propSchema.title || propKey.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-                itemHtml += `<div class="mb-3"><label class="block text-sm font-medium text-gray-700 mb-1">${escapeHtml(propLabel)}</label>`;
-                if (propSchema.type === 'boolean') {
-                    const checked = propValue ? 'checked' : '';
-                    // No name attribute - rely solely on _data field to prevent key leakage
-                    itemHtml += `<input type="checkbox" data-prop-key="${propKey}" aria-label="${escapeHtml(propLabel)}" ${checked} class="h-4 w-4 text-blue-600" onchange="window.updateArrayObjectData('${fieldId}')">`;
-                } else {
-                    // Escape HTML to prevent XSS
-                    // No name attribute - rely solely on _data field to prevent key leakage
-                    const escapedValue = typeof propValue === 'string' ? propValue.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;') : (propValue || '');
-                    itemHtml += `<input type="text" data-prop-key="${propKey}" aria-label="${escapeHtml(propLabel)}" value="${escapedValue}" class="block w-full px-3 py-2 border border-gray-300 rounded-md" onchange="window.updateArrayObjectData('${fieldId}')">`;
-                }
-                itemHtml += `</div>`;
-            });
-            itemHtml += `<button type="button" onclick="window.removeArrayObjectItem('${fieldId}', ${newIndex})" class="mt-2 px-3 py-2 text-red-600 hover:text-red-800">Remove</button></div>`;
-        }
+        // renderArrayObjectItem is exported by the plugin-manager IIFE above.
+        const itemHtml = window.renderArrayObjectItem(fieldId, fullKey, itemsSchema.properties, {}, newIndex, itemsSchema);
         itemsContainer.insertAdjacentHTML('beforeend', itemHtml);
         window.updateArrayObjectData(fieldId);
 
@@ -5053,9 +4065,8 @@ if (typeof window !== 'undefined') {
                         input.id = newId;
                     }
                 });
-                // Update button onclick attributes - only update the index parameter
-                // Since we use data-index for tracking, we can compute index from closest('.array-object-item')
-                // For now, update onclick strings but be more careful with the regex
+                // The buttons' inline onclick handlers carry the item index, so
+                // rewrite it in each one.
                 itemEl.querySelectorAll('button[onclick]').forEach(button => {
                     const onclick = button.getAttribute('onclick');
                     if (onclick) {
@@ -5104,53 +4115,11 @@ if (typeof window !== 'undefined') {
         }
     };
 
-    window.updateCheckboxGroupData = function(fieldId) {
-        // Update hidden _data input with currently checked values
-        const hiddenInput = document.getElementById(fieldId + '_data');
-        if (!hiddenInput) return;
-
-        const checkboxes = document.querySelectorAll(`input[type="checkbox"][data-checkbox-group="${fieldId}"]`);
-        const selectedValues = [];
-
-        checkboxes.forEach(checkbox => {
-            if (checkbox.checked) {
-                const optionValue = checkbox.getAttribute('data-option-value') || checkbox.value;
-                selectedValues.push(optionValue);
-            }
-        });
-
-        hiddenInput.value = JSON.stringify(selectedValues);
-    };
-
-    // Debug logging (only if pluginDebug is enabled)
-    if (_PLUGIN_DEBUG_EARLY) {
-        debugLog('[ARRAY-OBJECTS] Functions defined on window:', {
-            addArrayObjectItem: typeof window.addArrayObjectItem,
-            removeArrayObjectItem: typeof window.removeArrayObjectItem,
-            updateArrayObjectData: typeof window.updateArrayObjectData,
-            handleArrayObjectFileUpload: typeof window.handleArrayObjectFileUpload,
-            removeArrayObjectFile: typeof window.removeArrayObjectFile
-        });
-    }
 }
 
-// Make currentPluginConfig globally accessible (outside IIFE)
-window.currentPluginConfig = null;
-
 // Force initialization immediately when script loads (for HTMX swapped content)
 debugLog('Plugins script loaded, checking for elements...');
 
-// Verify critical functions are available
-if (_PLUGIN_DEBUG_EARLY) {
-    debugLog('Plugin functions available:', {
-        configurePlugin: typeof window.configurePlugin,
-        togglePlugin: typeof window.togglePlugin,
-        initializePlugins: typeof window.initializePlugins,
-        loadInstalledPlugins: typeof window.loadInstalledPlugins,
-        searchPluginStore: typeof window.searchPluginStore
-    });
-}
-
 // Check GitHub auth status immediately if elements exist (don't wait for full initialization)
 if (window.checkGitHubAuthStatus && document.getElementById('github-auth-warning')) {
     debugLog('[EARLY] Checking GitHub auth status immediately on script load...');
@@ -5162,11 +4131,7 @@ setTimeout(function() {
     if (installedGrid) {
         debugLog('Found installed-plugins-grid, forcing initialization...');
         window.pluginManager.initialized = false;
-        if (typeof initializePluginPageWhenReady === 'function') {
-            initializePluginPageWhenReady();
-        } else if (typeof window.initPluginsPage === 'function') {
-            window.initPluginsPage();
-        }
+        window.initPluginsPage();
     } else {
         debugLog('installed-plugins-grid not found yet, will retry via event listeners');
     }
@@ -5203,16 +4168,7 @@ document.addEventListener('htmx:afterSettle', function() {
     let starlarkDataLoaded = false;
 
     // ── Helpers ─────────────────────────────────────────────────────────────
-    // Quotes too: the result lands in quoted attribute values (data-app-id=,
-    // title=), and the textContent/innerHTML round-trip only escapes &, < and >.
-    function escapeHtml(str) {
-        if (!str) return '';
-        const div = document.createElement('div');
-        div.textContent = str;
-        return div.innerHTML
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#39;');
-    }
+    function escapeHtml(str) { return window.LEDEscape.html(str); }
 
     function isStarlarkInstalled(appId) {
         // Check window.installedPlugins (populated by loadInstalledPlugins)
@@ -5344,11 +4300,8 @@ document.addEventListener('htmx:afterSettle', function() {
             });
     }
 
-    // ── Apply Filters + Sort ────────────────────────────────────────────────
     // ── Filter / Sort / Paginate ────────────────────────────────────────────
-    // Same behaviour, element ids and localStorage keys as the hand-rolled
-    // version this replaces; the machinery is now shared with the store and
-    // the installed-plugins list.
+    // The same ListFilter controller as the store and the installed list.
     function starlarkSortName(app) {
         return (app.name || app.id || '').toLowerCase();
     }
@@ -5532,7 +4485,6 @@ document.addEventListener('htmx:afterSettle', function() {
         }
     }
 
-    // ── Filter UI Updates ───────────────────────────────────────────────────
     // ── Event Listeners ─────────────────────────────────────────────────────
     function setupStarlarkFilterListeners() {
         const ctl = getStarlarkFilter();
@@ -5542,6 +4494,15 @@ document.addEventListener('htmx:afterSettle', function() {
     }
 
     // ── Install / Upload / Pixlet ───────────────────────────────────────────
+    // Reload the installed list (the new app joins it as starlark:<id>), then
+    // redraw the current page of apps so its Installed badge shows. A failed
+    // reload has already been reported by loadInstalledPlugins.
+    function refreshAfterStarlarkChange() {
+        window.pluginManager.loadInstalledPlugins(true)
+            .catch(() => {})
+            .then(() => applyStarlarkFiltersAndSort(true));
+    }
+
     window.installStarlarkApp = function(appId) {
         if (!confirm(`Install Starlark app "${appId}" from Tronbyte repository?`)) return;
 
@@ -5554,11 +4515,7 @@ document.addEventListener('htmx:afterSettle', function() {
         .then(data => {
             if (data.status === 'success') {
                 alert(`Installed: ${data.message || appId}`);
-                // Refresh installed plugins list
-                if (typeof loadInstalledPlugins === 'function') loadInstalledPlugins();
-                else if (typeof window.loadInstalledPlugins === 'function') window.loadInstalledPlugins();
-                // Re-render current page to update installed badges
-                setTimeout(() => applyStarlarkFiltersAndSort(true), 500);
+                refreshAfterStarlarkChange();
             } else {
                 alert(`Install failed: ${data.message || 'Unknown error'}`);
             }
@@ -5598,9 +4555,7 @@ document.addEventListener('htmx:afterSettle', function() {
             .then(data => {
                 if (data.status === 'success') {
                     alert(`Uploaded: ${data.app_id}`);
-                    if (typeof loadInstalledPlugins === 'function') loadInstalledPlugins();
-                    else if (typeof window.loadInstalledPlugins === 'function') window.loadInstalledPlugins();
-                    setTimeout(() => applyStarlarkFiltersAndSort(true), 500);
+                    refreshAfterStarlarkChange();
                 } else {
                     alert('Upload failed: ' + (data.message || 'Unknown error'));
                 }
@@ -5609,12 +4564,6 @@ document.addEventListener('htmx:afterSettle', function() {
     }
 
     // ── Bootstrap ───────────────────────────────────────────────────────────
-    const origInit = window.initializePlugins;
-    window.initializePlugins = function() {
-        if (origInit) origInit();
-        initStarlarkSection();
-    };
-
     document.addEventListener('DOMContentLoaded', initStarlarkSection);
     document.addEventListener('htmx:afterSwap', function(e) {
         if (e.detail && e.detail.target && e.detail.target.id === 'plugins-content') {
diff --git a/web_interface/templates/v3/base.html b/web_interface/templates/v3/base.html
index 39371dac..c1accfa1 100644
--- a/web_interface/templates/v3/base.html
+++ b/web_interface/templates/v3/base.html
@@ -168,54 +168,109 @@
     </script>
     <script src="{{ url_for('static', filename='v3/js/htmx-config.js') }}"></script>
 
-    <!-- Fallback for loading plugins if HTMX fails -->
+    <!-- Direct-fetch fallback for tab panels. Used when HTMX never loads, and
+         by the hx-on::response-error handlers on the Overview, WiFi and
+         Plugin Manager panels when HTMX's own request fails. -->
     <script>
-        function loadPluginsDirect() {
-            const content = document.getElementById('plugins-content');
-            if (content && !content.hasAttribute('data-loaded')) {
-                content.setAttribute('data-loaded', 'true');
-                debugLog('Loading plugins directly via fetch (HTMX fallback)...');
+        (function() {
+            const PANEL_LABELS = {
+                'overview-content': 'the Overview',
+                'wifi-content': 'WiFi setup',
+                'plugins-content': 'the Plugin Manager'
+            };
+
+            // Fetches `url` into the element `id`, runs the partial's inline
+            // scripts, and lets HTMX and Alpine process the new markup. The
+            // scripts run before Alpine sees the content for the same reason
+            // htmx-config.js runs them on htmx:afterSwap: partials define their
+            // x-data component functions in those scripts.
+            window.loadPartialDirect = function(id, url) {
+                const el = document.getElementById(id);
+                if (!el || !url || el.hasAttribute('data-loaded') || el.hasAttribute('data-direct-loading')) return;
+                el.setAttribute('data-direct-loading', 'true');
+                debugLog('Loading ' + url + ' directly via fetch (HTMX fallback)');
                 const controller = new AbortController();
                 const timeout = setTimeout(() => controller.abort(), 10000);
-                fetch('/v3/partials/plugins', { signal: controller.signal })
+                fetch(url, { signal: controller.signal })
                     .then(r => {
                         if (!r.ok) throw new Error(r.status + ' ' + r.statusText);
                         return r.text();
                     })
                     .then(html => {
-                        clearTimeout(timeout);
-                        content.innerHTML = html;
-                        if (typeof htmx !== 'undefined') {
-                            htmx.process(content);
-                        }
-                        // Trigger full initialization chain
-                        if (window.pluginManager) {
-                            window.pluginManager.initialized = false;
-                            window.pluginManager.initializing = false;
-                        }
-                        if (window.initPluginsPage) {
+                        el.innerHTML = html;
+                        el.querySelectorAll('script').forEach(oldScript => {
+                            const script = document.createElement('script');
+                            for (const attr of oldScript.attributes) script.setAttribute(attr.name, attr.value);
+                            script.textContent = oldScript.textContent;
+                            oldScript.replaceWith(script);
+                        });
+                        el.setAttribute('data-loaded', 'true');
+                        if (typeof htmx !== 'undefined') htmx.process(el);
+                        if (window.Alpine) window.Alpine.initTree(el);
+                        if (id === 'plugins-content' && window.initPluginsPage) {
+                            if (window.pluginManager) {
+                                window.pluginManager.initialized = false;
+                                window.pluginManager.initializing = false;
+                            }
                             window.initPluginsPage();
                         }
                     })
                     .catch(err => {
+                        console.error('Failed to load ' + url + ':', err);
+                        const label = PANEL_LABELS[id] || 'this page';
+                        el.innerHTML = '<div class="bg-red-50 border border-red-200 rounded-lg p-4" role="alert"><p class="text-red-800">Couldn’t load ' + label + '. Check that the device is still reachable, then try again.</p><button type="button" class="mt-3 px-3 py-1.5 text-sm font-medium bg-red-600 hover:bg-red-700 text-white rounded-md">Try again</button></div>';
+                        el.querySelector('button').addEventListener('click', () => window.loadPartialDirect(id, url));
+                    })
+                    .finally(() => {
                         clearTimeout(timeout);
-                        console.error('Failed to load plugins:', err);
-                        content.removeAttribute('data-loaded');
-                        content.innerHTML = '<div class="bg-red-50 border border-red-200 rounded-lg p-4" role="alert"><p class="text-red-800">Couldn’t load the Plugin Manager. Check that the device is still reachable, then try again.</p><button type="button" onclick="loadPluginsDirect()" class="mt-3 px-3 py-1.5 text-sm font-medium bg-red-600 hover:bg-red-700 text-white rounded-md">Try again</button></div>';
+                        el.removeAttribute('data-direct-loading');
                     });
-            }
-        }
+            };
 
-        // Fallback if HTMX doesn't load within 5 seconds
-        var _pluginsFallbackTimer = setTimeout(() => {
-            if (typeof htmx === 'undefined') {
-                console.warn('HTMX not loaded after 5 seconds, using direct fetch for plugins');
-                // Load plugins tab content directly regardless of active tab,
-                // so it's ready when the user navigates to it
-                loadPluginsDirect();
+            function activeTab() {
+                const appEl = document.querySelector('[x-data="app()"]');
+                try {
+                    return (window.Alpine && appEl) ? window.Alpine.$data(appEl).activeTab : null;
+                } catch (e) {
+                    return null; // Alpine has not initialised the app yet
+                }
             }
-        }, 5000);
-        window.addEventListener('htmx:ready', function() { clearTimeout(_pluginsFallbackTimer); }, { once: true });
+
+            function loadActiveTabDirect() {
+                const el = document.getElementById((activeTab() || 'overview') + '-content');
+                if (el) window.loadPartialDirect(el.id, el.getAttribute('hx-get'));
+            }
+
+            // HTMX loaded but never initialised, even from the CDN rescue.
+            window.addEventListener('htmx-load-failed', function() {
+                console.warn('HTMX failed to load, loading the active tab directly');
+                setTimeout(loadActiveTabDirect, 2000);
+            });
+
+            // HTMX still missing after 5 seconds: load the active tab, and the
+            // Plugin Manager regardless of tab so the plugin tabs work.
+            const fallbackTimer = setTimeout(function() {
+                if (typeof htmx !== 'undefined') return;
+                console.warn('HTMX not loaded after 5 seconds, loading tabs directly');
+                window.loadPartialDirect('plugins-content', '/v3/partials/plugins');
+                loadActiveTabDirect();
+            }, 5000);
+
+            // AP mode (setting up WiFi) opens on the WiFi tab and can least
+            // afford to wait, so it gets an earlier check.
+            const apTimer = setTimeout(function() {
+                const host = window.location.hostname;
+                if (typeof htmx === 'undefined' && host.startsWith('192.168.4.')) {
+                    console.warn('HTMX not loaded, loading WiFi setup directly');
+                    window.loadPartialDirect('wifi-content', '/v3/partials/wifi');
+                }
+            }, 3000);
+
+            window.addEventListener('htmx:ready', function() {
+                clearTimeout(fallbackTimer);
+                clearTimeout(apTimer);
+            }, { once: true });
+        })();
     </script>
     <!-- Alpine.js app function - defined early so it's available when Alpine initializes -->
     <script src="{{ url_for('static', filename='v3/js/app-early.js') }}"></script>
@@ -246,45 +301,6 @@
         });
     </script>
 
-    <!-- CodeMirror for JSON editing - lazy loaded when needed -->
-    <link rel="preload" href="{{ url_for('static', filename='v3/vendor/codemirror/codemirror.min.css') }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
-    <noscript><link rel="stylesheet" href="{{ url_for('static', filename='v3/vendor/codemirror/codemirror.min.css') }}"></noscript>
-    <link rel="preload" href="{{ url_for('static', filename='v3/vendor/codemirror/theme/monokai.min.css') }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
-    <noscript><link rel="stylesheet" href="{{ url_for('static', filename='v3/vendor/codemirror/theme/monokai.min.css') }}"></noscript>
-    <!-- CodeMirror scripts loaded on demand when JSON editor is opened -->
-    <script>
-        // Lazy load CodeMirror when needed
-        window.loadCodeMirror = function() {
-            if (window.CodeMirror) return Promise.resolve();
-            
-            return new Promise((resolve, reject) => {
-                // Vendored CodeMirror 5.65.2 (note: the previously listed CDN
-                // mode/json/json.min.js never existed — it 404'd on every
-                // editor open; JSON highlighting comes from the javascript
-                // mode, so it's simply dropped here)
-                const scripts = [
-                    '/static/v3/vendor/codemirror/codemirror.min.js',
-                    '/static/v3/vendor/codemirror/mode/javascript/javascript.min.js',
-                    '/static/v3/vendor/codemirror/addon/edit/closebrackets.min.js',
-                    '/static/v3/vendor/codemirror/addon/edit/matchbrackets.min.js'
-                ];
-                
-                let loaded = 0;
-                scripts.forEach((src, index) => {
-                    const script = document.createElement('script');
-                    script.src = src;
-                    script.defer = true;
-                    script.onload = () => {
-                        loaded++;
-                        if (loaded === scripts.length) resolve();
-                    };
-                    script.onerror = reject;
-                    document.head.appendChild(script);
-                });
-            });
-        };
-    </script>
-
     <!-- Font Awesome icons (vendored 6.0.0 — css/all.min.css references
          ../webfonts/ relatively, so both live under v3/vendor/fontawesome/) -->
     <link rel="stylesheet" href="{{ url_for('static', filename='v3/vendor/fontawesome/css/all.min.css') }}">
@@ -548,7 +564,7 @@
             <!-- Second row - Plugin tabs (populated dynamically) -->
             <div id="plugin-tabs-row" class="border-b border-gray-200">
                 <nav aria-label="Plugins" class="-mb-px flex flex-wrap gap-y-2 gap-x-2 lg:gap-x-3 xl:gap-x-4">
-                    <button @click="activeTab = 'plugins'; if (typeof htmx === 'undefined') { $nextTick(() => loadPluginsDirect()); }"
+                    <button @click="activeTab = 'plugins'; if (typeof htmx === 'undefined') { $nextTick(() => loadPartialDirect('plugins-content', '/v3/partials/plugins')); }"
                             :class="activeTab === 'plugins' ? 'nav-tab-active' : ''"
                             class="nav-tab">
                         <i class="fas fa-plug" aria-hidden="true"></i>Plugin Manager
@@ -592,7 +608,7 @@
         <div id="tab-content" class="space-y-6" tabindex="-1">
             <!-- Overview tab -->
             <div x-show="activeTab === 'overview'" x-transition>
-                <div id="overview-content" hx-get="/v3/partials/overview" hx-trigger="loadtab" hx-swap="innerHTML" hx-on::htmx:response-error="loadOverviewDirect()">
+                <div id="overview-content" hx-get="/v3/partials/overview" hx-trigger="loadtab" hx-swap="innerHTML" hx-on::response-error="loadPartialDirect(this.id, this.getAttribute('hx-get'))">
                     <div class="animate-pulse">
                         <div class="bg-white rounded-lg shadow p-6">
                             <div class="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
@@ -601,65 +617,6 @@
                     </div>
                 </div>
             </div>
-            
-            <script>
-                // Fallback: Load overview content directly if HTMX fails
-                function loadOverviewDirect() {
-                    const overviewContent = document.getElementById('overview-content');
-                    if (overviewContent && !overviewContent.hasAttribute('data-loaded')) {
-                        fetch('/v3/partials/overview')
-                            .then(response => {
-                                if (!response.ok) throw new Error(response.status + ' ' + response.statusText);
-                                return response.text();
-                            })
-                            .then(html => {
-                                overviewContent.innerHTML = html;
-                                overviewContent.setAttribute('data-loaded', 'true');
-                                if (typeof htmx !== 'undefined') {
-                                    htmx.process(overviewContent);
-                                }
-                                // Re-initialize Alpine.js for the new content
-                                if (window.Alpine) {
-                                    window.Alpine.initTree(overviewContent);
-                                }
-                            })
-                            .catch(err => {
-                                console.error('Failed to load overview content:', err);
-                                overviewContent.innerHTML = '<div class="bg-red-50 border border-red-200 rounded-lg p-4" role="alert"><p class="text-red-800">Couldn’t load the Overview. Check that the device is still reachable, then try again.</p><button type="button" onclick="loadOverviewDirect()" class="mt-3 px-3 py-1.5 text-sm font-medium bg-red-600 hover:bg-red-700 text-white rounded-md">Try again</button></div>';
-                            });
-                    }
-                }
-                
-                // Listen for HTMX load failure
-                window.addEventListener('htmx-load-failed', function() {
-                    console.warn('HTMX failed to load, setting up direct content loading fallbacks');
-                    // Try to load content directly after a delay
-                    setTimeout(() => {
-                        const appElement = document.querySelector('[x-data="app()"]');
-                        if (appElement && appElement.__x) {
-                            const activeTab = appElement.__x.$data.activeTab || 'overview';
-                            if (activeTab === 'overview') {
-                                loadOverviewDirect();
-                            }
-                        }
-                    }, 2000);
-                });
-                
-                // Also try direct load if HTMX doesn't load within 5 seconds
-                var _overviewFallbackTimer = setTimeout(() => {
-                    if (typeof htmx === 'undefined') {
-                        console.warn('HTMX not loaded after 5 seconds, using direct fetch for content');
-                        const appElement = document.querySelector('[x-data="app()"]');
-                        if (appElement && appElement.__x) {
-                            const activeTab = appElement.__x.$data.activeTab || 'overview';
-                            if (activeTab === 'overview') {
-                                loadOverviewDirect();
-                            }
-                        }
-                    }
-                }, 5000);
-                window.addEventListener('htmx:ready', function() { clearTimeout(_overviewFallbackTimer); }, { once: true });
-            </script>
 
             <!-- General tab -->
             <div x-show="activeTab === 'general'" x-transition>
@@ -683,7 +640,7 @@
                      hx-get="/v3/partials/wifi" 
                      hx-trigger="loadtab" 
                      hx-swap="innerHTML"
-                     hx-on::htmx:response-error="loadWifiDirect()">
+                     hx-on::response-error="loadPartialDirect(this.id, this.getAttribute('hx-get'))">
                     <div class="animate-pulse">
                         <div class="bg-white rounded-lg shadow p-6">
                             <div class="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
@@ -696,42 +653,6 @@
                     </div>
                 </div>
             </div>
-            
-            <script>
-                // Fallback: Load WiFi content directly if HTMX fails
-                function loadWifiDirect() {
-                    const wifiContent = document.getElementById('wifi-content');
-                    if (wifiContent && !wifiContent.hasAttribute('data-loaded')) {
-                        fetch('/v3/partials/wifi')
-                            .then(response => {
-                                if (!response.ok) throw new Error(response.status + ' ' + response.statusText);
-                                return response.text();
-                            })
-                            .then(html => {
-                                wifiContent.innerHTML = html;
-                                wifiContent.setAttribute('data-loaded', 'true');
-                                // Re-initialize Alpine.js for the new content
-                                if (window.Alpine) {
-                                    window.Alpine.initTree(wifiContent);
-                                }
-                            })
-                            .catch(err => {
-                                console.error('Failed to load WiFi content:', err);
-                                wifiContent.innerHTML = '<div class="bg-red-50 border border-red-200 rounded-lg p-4" role="alert"><p class="text-red-800">Couldn’t load WiFi setup. Check that the device is still reachable, then try again.</p><button type="button" onclick="loadWifiDirect()" class="mt-3 px-3 py-1.5 text-sm font-medium bg-red-600 hover:bg-red-700 text-white rounded-md">Try again</button></div>';
-                            });
-                    }
-                }
-                
-                // Also try direct load if HTMX doesn't load within 3 seconds (AP mode detection)
-                setTimeout(() => {
-                    const isAPMode = window.location.hostname === '192.168.4.1' || 
-                                   window.location.hostname.startsWith('192.168.4.');
-                    if (isAPMode && typeof htmx === 'undefined') {
-                        console.warn('HTMX not loaded, using direct fetch for WiFi content');
-                        loadWifiDirect();
-                    }
-                }, 3000);
-            </script>
 
             <!-- Schedule tab -->
             <div x-show="activeTab === 'schedule'" x-transition>
@@ -806,7 +727,7 @@
             <!-- Plugins tab -->
             <div x-show="activeTab === 'plugins'" x-transition>
                 <div id="plugins-content" hx-get="/v3/partials/plugins" hx-trigger="loadtab" hx-swap="innerHTML"
-                     hx-on::response-error="loadPluginsDirect()">
+                     hx-on::response-error="loadPartialDirect(this.id, this.getAttribute('hx-get'))">
                     <div class="animate-pulse">
                         <div class="bg-white rounded-lg shadow p-6">
                             <div class="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
@@ -986,11 +907,10 @@
          their own URLs for plugin-loader.js and debugging. -->
     <script src="{{ widgets_bundle_url() }}" defer></script>
 
-    <!-- plugins_manager.js: loaded LAST on purpose — it defines the live
-         window.* implementations for several plugin actions (installPlugin,
-         uninstallPlugin, executePluginAction, ...) and intentionally wins
-         over same-named definitions in js/app.js and js/app-shell.js. Do not
-         remove or reorder without resolving that overlap first. -->
+    <!-- plugins_manager.js: loaded last. It uses PluginAPI, ListFilter,
+         LEDDialog, the widgets and app-shell.js's updatePlugin at load time
+         or when a card is clicked, so it must follow all of them. No other
+         script defines the same globals. -->
     <script src="{{ url_for('static', filename='v3/plugins_manager.js') }}?v=20260307" defer></script>
     
     <!-- Custom feeds table helpers live in js/widgets/custom-feeds.js (the
@@ -1147,16 +1067,12 @@
                         'services to run the new code');
                 }
             }
-            if (typeof showNotification === 'function') {
-                showNotification(data.message || 'Update complete', data.status || 'success');
-            }
+            showNotification(data.message || 'Update complete', data.status || 'success');
         })
         .catch(function() {
             btn.innerHTML = originalHTML;
             btn.disabled = false;
-            if (typeof showNotification === 'function') {
-                showNotification('Update failed — check your connection', 'error');
-            }
+            showNotification('Update failed — check your connection', 'error');
         });
     };
 
diff --git a/web_interface/templates/v3/partials/backup_restore.html b/web_interface/templates/v3/partials/backup_restore.html
index d742aeba..393ff296 100644
--- a/web_interface/templates/v3/partials/backup_restore.html
+++ b/web_interface/templates/v3/partials/backup_restore.html
@@ -121,11 +121,7 @@
     let inspectedFile = null;
 
     function notify(message, kind) {
-        if (typeof showNotification === 'function') {
-            showNotification(message, kind || 'info');
-        } else {
-            console.log('[backup]', kind || 'info', message);
-        }
+        showNotification(message, kind || 'info');
     }
 
     function formatSize(bytes) {
@@ -136,11 +132,7 @@
         return size.toFixed(i === 0 ? 0 : 1) + ' ' + units[i];
     }
 
-    function escapeHtml(value) {
-        return String(value == null ? '' : value).replace(/[&<>"']/g, function (c) {
-            return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c];
-        });
-    }
+    function escapeHtml(value) { return window.LEDEscape.html(value); }
 
     async function loadPreview() {
         const el = document.getElementById('export-preview');
diff --git a/web_interface/templates/v3/partials/cache.html b/web_interface/templates/v3/partials/cache.html
index 30c3eb98..08d30b04 100644
--- a/web_interface/templates/v3/partials/cache.html
+++ b/web_interface/templates/v3/partials/cache.html
@@ -55,13 +55,12 @@
 </div>
 
 <script>
-// Initialize cache management when partial loads
+// Scoped: this script runs at global scope after every HTMX swap, and the Logs
+// partial has helpers with the same names (showError, escapeHtml). Only
+// deleteCacheFile, which the row buttons call from onclick, is exported.
 (function() {
-    loadCacheFiles();
-    
-    // Event listeners
-    document.getElementById('refresh-cache-btn').addEventListener('click', loadCacheFiles);
-})();
+loadCacheFiles();
+document.getElementById('refresh-cache-btn').addEventListener('click', loadCacheFiles);
 
 function loadCacheFiles() {
     const tbody = document.getElementById('cache-files-tbody');
@@ -190,21 +189,15 @@ function deleteCacheFile(key) {
     .then(response => response.json())
     .then(data => {
         if (data.status === 'success') {
-            if (typeof showNotification !== 'undefined') {
-                showNotification(data.message || 'Cache file deleted successfully', 'success');
-            }
+            showNotification(data.message || 'Cache file deleted successfully', 'success');
             // Reload cache files list
             loadCacheFiles();
         } else {
-            if (typeof showNotification !== 'undefined') {
-                showNotification(data.message || 'Failed to delete cache file', 'error');
-            }
+            showNotification(data.message || 'Failed to delete cache file', 'error');
         }
     })
     .catch(error => {
-        if (typeof showNotification !== 'undefined') {
-            showNotification('Error deleting cache file: ' + error.message, 'error');
-        }
+        showNotification('Error deleting cache file: ' + error.message, 'error');
     });
 }
 
@@ -220,17 +213,8 @@ function showError(message) {
     errorMessage.textContent = message;
 }
 
-// Utility function to escape HTML
-// Quotes too: the result is interpolated into quoted attribute values, and the
-// textContent/innerHTML round-trip only escapes &, < and >.
-function escapeHtml(text) {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
+function escapeHtml(text) { return window.LEDEscape.html(text); }
 
-// Make deleteCacheFile available globally for onclick handlers
 window.deleteCacheFile = deleteCacheFile;
+})();
 </script>
diff --git a/web_interface/templates/v3/partials/display.html b/web_interface/templates/v3/partials/display.html
index 74854d87..3859eda6 100644
--- a/web_interface/templates/v3/partials/display.html
+++ b/web_interface/templates/v3/partials/display.html
@@ -35,7 +35,7 @@
           hx-ext="json-enc"
           hx-headers='{"Content-Type": "application/json"}'
           hx-swap="none"
-          hx-on:htmx:after-request="showDisplaySaveResult(event.detail.xhr)"
+          hx-on:htmx:after-request="showSaveResult(event.detail.xhr, 'Display settings saved', 'Display settings were not saved. Check your connection and try again.')"
           class="space-y-6"
           novalidate
           onsubmit="fixInvalidNumberInputs(this); return true;">
@@ -863,62 +863,12 @@ document.getElementById('brightness').addEventListener('input', function() {
     document.getElementById('brightness-display').textContent = this.value;
 });
 
-// Fix invalid number inputs function (if not already defined globally)
-if (typeof window.fixInvalidNumberInputs !== 'function') {
-    window.fixInvalidNumberInputs = function(form) {
-        if (!form) return;
-        const allInputs = form.querySelectorAll('input[type="number"]');
-        allInputs.forEach(input => {
-            const min = parseFloat(input.getAttribute('min'));
-            const max = parseFloat(input.getAttribute('max'));
-            const value = parseFloat(input.value);
-
-            if (!isNaN(value)) {
-                if (!isNaN(min) && value < min) {
-                    input.value = min;
-                } else if (!isNaN(max) && value > max) {
-                    input.value = max;
-                }
-            }
-        });
-    };
-}
-
-// Report the outcome of a display-settings save. XMLHttpRequest has no
-// `responseJSON` (that's a jQuery property) — read `responseText` and the real
-// status code, otherwise a failed save reports success.
-window.showDisplaySaveResult = function(xhr) {
-    // Only 2xx counts as saved. A network failure reports status 0, which any
-    // `>= 400` test would wave through as success.
-    const httpSuccess = xhr.status >= 200 && xhr.status < 300;
-    let message = httpSuccess
-        ? 'Display settings saved'
-        : 'Display settings were not saved. Check your connection and try again.';
-    let status = httpSuccess ? 'success' : 'error';
-    try {
-        const data = JSON.parse(xhr.responseText);
-        if (data.message) message = data.message;
-        // A body can refine a successful verdict but never overturn a failed one.
-        if (httpSuccess && data.status) status = data.status;
-    } catch {
-        // Non-JSON body — fall back to the status-code verdict above.
-    }
-    showNotification(message, status);
-};
 
 // Vegas Scroll Mode Settings
 (function() {
-    // Escape HTML to prevent XSS
-    function escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = String(text || '');
-        return div.innerHTML;
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
-    // Escape for use in HTML attributes
-    function escapeAttr(text) {
-        return escapeHtml(text).replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    }
+    function escapeAttr(text) { return window.LEDEscape.attr(text); }
 
     // Toggle settings visibility
     const vegasEnabledCheckbox = document.getElementById('vegas_scroll_enabled');
diff --git a/web_interface/templates/v3/partials/durations.html b/web_interface/templates/v3/partials/durations.html
index 89c7b911..5c47266f 100644
--- a/web_interface/templates/v3/partials/durations.html
+++ b/web_interface/templates/v3/partials/durations.html
@@ -11,7 +11,7 @@
           hx-ext="json-enc"
           hx-headers='{"Content-Type": "application/json"}'
           hx-swap="none"
-          hx-on:htmx:after-request="showNotification(event.detail.xhr.responseJSON?.message || 'Durations saved', event.detail.xhr.responseJSON?.status || 'success')"
+          hx-on:htmx:after-request="showSaveResult(event.detail.xhr, 'Durations saved', 'Durations were not saved. Check your connection and try again.')"
           class="space-y-6"
           novalidate
           onsubmit="fixInvalidNumberInputs(this); return true;">
diff --git a/web_interface/templates/v3/partials/fonts.html b/web_interface/templates/v3/partials/fonts.html
index 703f3165..3a6df195 100644
--- a/web_interface/templates/v3/partials/fonts.html
+++ b/web_interface/templates/v3/partials/fonts.html
@@ -164,21 +164,6 @@ function initializeFontsTab() {
     // Reset retry counter on successful init
     initRetryCount = 0;
     
-    // showNotification is implemented by the notification widget
-    // (widgets/notification.js). If it hasn't loaded, queue the message; the
-    // widget shows queued messages as soon as it registers.
-    if (typeof window.showNotification !== 'function') {
-        window.showNotification = function(message, type = 'info') {
-            const registry = window.LEDMatrixWidgets;
-            const widget = registry && typeof registry.get === 'function' ? registry.get('notification') : null;
-            if (widget && typeof widget.show === 'function') {
-                return widget.show(message, typeof type === 'string' ? { type: type } : (type || {}));
-            }
-            (window.__pendingNotifications = window.__pendingNotifications || []).push([message, type]);
-            console.log(`[${String((type && type.type) || type).toUpperCase()}]`, message);
-        };
-    }
-
     debugLog('Initializing font management...');
     initializeFontManagement();
 
@@ -349,14 +334,7 @@ async function loadFontData() {
         // Show error states
         availableContainer.innerHTML = '<div class="text-red-400">Error loading font data. Please refresh the page.</div>';
 
-        // Only show notification if showNotification is available
-        if (typeof showNotification === 'function') {
-            showNotification('Error loading font configuration', 'error');
-        } else if (typeof window.showNotification === 'function') {
-            window.showNotification('Error loading font configuration', 'error');
-        } else {
-            console.error('Error loading font configuration:', error.message);
-        }
+        showNotification('Error loading font configuration', 'error');
     }
 }
 
diff --git a/web_interface/templates/v3/partials/general.html b/web_interface/templates/v3/partials/general.html
index 3414fbde..2f5eb787 100644
--- a/web_interface/templates/v3/partials/general.html
+++ b/web_interface/templates/v3/partials/general.html
@@ -11,24 +11,7 @@
           hx-ext="json-enc"
           hx-headers='{"Content-Type": "application/json"}'
           hx-swap="none"
-          hx-on:htmx:after-request="
-              var xhr = event.detail.xhr;
-              var isSuccess = xhr.status >= 200 && xhr.status < 300;
-              var message = '';
-              var status = 'success';
-              try {
-                  var data = JSON.parse(xhr.responseText);
-                  message = data.message || '';
-                  status = data.status || status;
-              } catch (e) {}
-              if (isSuccess) {
-                  message = message || 'Settings saved';
-              } else {
-                  message = message || 'Failed to save settings';
-                  status = 'error';
-              }
-              showNotification(message, status);
-          "
+          hx-on:htmx:after-request="showSaveResult(event.detail.xhr, 'Settings saved', 'Failed to save settings')"
           class="space-y-6">
         {# Marks this post as the whole form, so an unchecked box saves as
            false. Without it the save endpoint treats absent keys as unchanged
diff --git a/web_interface/templates/v3/partials/logs.html b/web_interface/templates/v3/partials/logs.html
index 81b3c4fb..81facee8 100644
--- a/web_interface/templates/v3/partials/logs.html
+++ b/web_interface/templates/v3/partials/logs.html
@@ -126,8 +126,10 @@
 </div>
 
 <script>
-// Global variables - use window properties to avoid redeclaration errors with HTMX reloads
-// Initialize only if not already defined
+// Scoped: this script runs at global scope after every HTMX swap, and the
+// Cache partial has helpers with the same names (showError, escapeHtml). State
+// that must survive a reload of this partial lives on window._logs* instead.
+(function() {
 if (typeof window._logsEventSource === 'undefined') {
     window._logsEventSource = null;
 }
@@ -624,9 +626,7 @@ function toggleRealtime() {
 
 function refreshLogs() {
     loadLogs();
-    if (typeof showNotification !== 'undefined') {
-        showNotification('Logs refreshed', 'success');
-    }
+    showNotification('Logs refreshed', 'success');
 }
 
 function clearLogs() {
@@ -637,16 +637,12 @@ function clearLogs() {
     }
     showEmptyState();
     updateLogStats();
-    if (typeof showNotification !== 'undefined') {
-        showNotification('Logs cleared', 'info');
-    }
+    showNotification('Logs cleared', 'info');
 }
 
 function downloadLogs() {
     if (window._filteredLogs.length === 0) {
-        if (typeof showNotification !== 'undefined') {
-            showNotification('No logs to download', 'warning');
-        }
+        showNotification('No logs to download', 'warning');
         return;
     }
 
@@ -662,9 +658,7 @@ function downloadLogs() {
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
 
-    if (typeof showNotification !== 'undefined') {
-        showNotification('Logs downloaded', 'success');
-    }
+    showNotification('Logs downloaded', 'success');
 }
 
 // Track if user is near bottom for smart auto-scroll
@@ -776,16 +770,7 @@ function showError(message) {
     }
 }
 
-// Utility function to escape HTML. Quotes too: the result is interpolated into
-// quoted attribute values (option value=, title=), and the
-// textContent/innerHTML round-trip only escapes &, < and >.
-function escapeHtml(text) {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
+function escapeHtml(text) { return window.LEDEscape.html(text); }
 
 function refreshCurrentPluginStatus() {
     fetch('/api/v3/display/current-status')
@@ -920,15 +905,13 @@ function clearPluginErrors() {
     })
         .then(response => response.json())
         .then(data => {
-            if (typeof showNotification !== 'undefined') {
-                showNotification(data.status === 'success' ? 'Plugin errors cleared'
-                    : (data.message || 'Could not clear plugin errors'),
-                    data.status === 'success' ? 'success' : 'error');
-            }
+            showNotification(data.status === 'success' ? 'Plugin errors cleared'
+                : (data.message || 'Could not clear plugin errors'),
+                data.status === 'success' ? 'success' : 'error');
             refreshPluginErrors();
         })
         .catch(() => {
-            if (typeof showNotification !== 'undefined') showNotification('Could not clear plugin errors', 'error');
+            showNotification('Could not clear plugin errors', 'error');
         });
 }
 
@@ -946,4 +929,5 @@ window.addEventListener('beforeunload', function() {
         window._pluginErrorsPollTimer = null;
     }
 });
+})();
 </script>
diff --git a/web_interface/templates/v3/partials/operation_history.html b/web_interface/templates/v3/partials/operation_history.html
index 7f5c14e5..701b2d01 100644
--- a/web_interface/templates/v3/partials/operation_history.html
+++ b/web_interface/templates/v3/partials/operation_history.html
@@ -260,18 +260,10 @@
         return 'bg-gray-100 text-gray-800';
     }
 
-    function escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
+    function escapeHtml(text) { return window.LEDEscape.html(text); }
 
     function showError(message) {
-        if (typeof showNotification === 'function') {
-            showNotification(message, 'error');
-        } else {
-            alert(message);
-        }
+        showNotification(message, 'error');
     }
 
     // Populate plugin filter
diff --git a/web_interface/templates/v3/partials/overview.html b/web_interface/templates/v3/partials/overview.html
index a0a54fc6..0b4f207b 100644
--- a/web_interface/templates/v3/partials/overview.html
+++ b/web_interface/templates/v3/partials/overview.html
@@ -216,11 +216,7 @@
                 if (nowDone) maybeAutoHide();
                 return;
             }
-            var appEl = document.querySelector('[x-data="app()"]') || document.querySelector('[x-data]');
-            // Same two-tier resolution as settings-search.js's getAppData():
-            // _x_dataStack on current Alpine, __x.$data as an older-API fallback.
-            var data = appEl && ((appEl._x_dataStack && appEl._x_dataStack[0]) ||
-                                  (appEl.__x && appEl.__x.$data));
+            var data = window.getApp();
             if (data) {
                 data.activeTab = btn.dataset.tab;
                 if ('mobileNavOpen' in data) data.mobileNavOpen = false;
@@ -443,7 +439,7 @@
             <button hx-post="/api/v3/system/action"
                     hx-vals='{"action": "start_display"}'
                     hx-swap="none"
-                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined') { var m='Display started',s='success'; try { var d=JSON.parse(event.detail.xhr.responseText); m=d.message||m; s=d.status||s; } catch(e) { s=(event.detail.xhr&&event.detail.xhr.status>=400?'error':s); } showNotification(m,s); }"
+                    hx-on:htmx:after-request="var m='Display started',s='success'; try { var d=JSON.parse(event.detail.xhr.responseText); m=d.message||m; s=d.status||s; } catch(e) { s=(event.detail.xhr&&event.detail.xhr.status>=400?'error':s); } showNotification(m,s);"
                     class="inline-flex items-center px-4 py-2 border border-transparent text-base font-semibold rounded-md text-white bg-green-600 hover:bg-green-700">
                 <i class="fas fa-play mr-2"></i>
                 Start Display
@@ -452,7 +448,7 @@
             <button hx-post="/api/v3/system/action"
                     hx-vals='{"action": "stop_display"}'
                     hx-swap="none"
-                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined') { var m='Display stopped',s='success'; try { var d=JSON.parse(event.detail.xhr.responseText); m=d.message||m; s=d.status||s; } catch(e) { s=(event.detail.xhr&&event.detail.xhr.status>=400?'error':s); } showNotification(m,s); }"
+                    hx-on:htmx:after-request="var m='Display stopped',s='success'; try { var d=JSON.parse(event.detail.xhr.responseText); m=d.message||m; s=d.status||s; } catch(e) { s=(event.detail.xhr&&event.detail.xhr.status>=400?'error':s); } showNotification(m,s);"
                     class="inline-flex items-center px-4 py-2 border border-transparent text-base font-semibold rounded-md text-white bg-red-600 hover:bg-red-700">
                 <i class="fas fa-stop mr-2"></i>
                 Stop Display
@@ -462,7 +458,7 @@
                     hx-vals='{"action": "git_pull"}'
                     hx-confirm="This will stash any local changes and update the code. Continue?"
                     hx-swap="none"
-                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined') { var m='Code update completed',s='info'; try { var d=JSON.parse(event.detail.xhr.responseText); m=d.message||m; s=d.status||s; } catch(e) { s=(event.detail.xhr&&event.detail.xhr.status>=400?'error':s); } showNotification(m,s); }"
+                    hx-on:htmx:after-request="var m='Code update completed',s='info'; try { var d=JSON.parse(event.detail.xhr.responseText); m=d.message||m; s=d.status||s; } catch(e) { s=(event.detail.xhr&&event.detail.xhr.status>=400?'error':s); } showNotification(m,s);"
                     class="inline-flex items-center px-4 py-2 border border-gray-300 text-base font-semibold rounded-md text-gray-900 bg-white hover:bg-gray-50">
                 <i class="fas fa-download mr-2"></i>
                 Update Code
@@ -472,7 +468,7 @@
                     hx-vals='{"action": "reboot_system"}'
                     hx-confirm="Are you sure you want to reboot the system?"
                     hx-swap="none"
-                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined') { var m='System rebooting...',s='info'; try { var d=JSON.parse(event.detail.xhr.responseText); m=d.message||m; s=d.status||s; } catch(e) { s=(event.detail.xhr&&event.detail.xhr.status>=400?'error':s); } showNotification(m,s); }"
+                    hx-on:htmx:after-request="var m='System rebooting...',s='info'; try { var d=JSON.parse(event.detail.xhr.responseText); m=d.message||m; s=d.status||s; } catch(e) { s=(event.detail.xhr&&event.detail.xhr.status>=400?'error':s); } showNotification(m,s);"
                     class="inline-flex items-center px-4 py-2 border border-transparent text-base font-semibold rounded-md text-white bg-yellow-600 hover:bg-yellow-700">
                 <i class="fas fa-power-off mr-2"></i>
                 Reboot System
@@ -482,7 +478,7 @@
                     hx-vals='{"action": "shutdown_system"}'
                     hx-confirm="Are you sure you want to shut down the system? This will power off the Raspberry Pi."
                     hx-swap="none"
-                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined') { var m='System shutting down...',s='info'; try { var d=JSON.parse(event.detail.xhr.responseText); m=d.message||m; s=d.status||s; } catch(e) { s=(event.detail.xhr&&event.detail.xhr.status>=400?'error':s); } showNotification(m,s); }"
+                    hx-on:htmx:after-request="var m='System shutting down...',s='info'; try { var d=JSON.parse(event.detail.xhr.responseText); m=d.message||m; s=d.status||s; } catch(e) { s=(event.detail.xhr&&event.detail.xhr.status>=400?'error':s); } showNotification(m,s);"
                     class="inline-flex items-center px-4 py-2 border border-transparent text-base font-semibold rounded-md text-white bg-red-800 hover:bg-red-900">
                 <i class="fas fa-power-off mr-2"></i>
                 Shutdown System
@@ -491,7 +487,7 @@
             <button hx-post="/api/v3/system/action"
                     hx-vals='{"action": "restart_display_service"}'
                     hx-swap="none"
-                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined') { var m='Display service restarted',s='success'; try { var d=JSON.parse(event.detail.xhr.responseText); m=d.message||m; s=d.status||s; } catch(e) { s=(event.detail.xhr&&event.detail.xhr.status>=400?'error':s); } showNotification(m,s); }"
+                    hx-on:htmx:after-request="var m='Display service restarted',s='success'; try { var d=JSON.parse(event.detail.xhr.responseText); m=d.message||m; s=d.status||s; } catch(e) { s=(event.detail.xhr&&event.detail.xhr.status>=400?'error':s); } showNotification(m,s);"
                     class="inline-flex items-center px-4 py-2 border border-gray-300 text-base font-semibold rounded-md text-gray-900 bg-white hover:bg-gray-50">
                 <i class="fas fa-redo mr-2"></i>
                 Restart Display Service
@@ -500,7 +496,7 @@
             <button hx-post="/api/v3/system/action"
                     hx-vals='{"action": "restart_web_service"}'
                     hx-swap="none"
-                    hx-on:htmx:after-request="if (typeof showNotification !== 'undefined') { var m='Web service restarted',s='success'; try { var d=JSON.parse(event.detail.xhr.responseText); m=d.message||m; s=d.status||s; } catch(e) { s=(event.detail.xhr&&event.detail.xhr.status>=400?'error':s); } showNotification(m,s); }"
+                    hx-on:htmx:after-request="var m='Web service restarted',s='success'; try { var d=JSON.parse(event.detail.xhr.responseText); m=d.message||m; s=d.status||s; } catch(e) { s=(event.detail.xhr&&event.detail.xhr.status>=400?'error':s); } showNotification(m,s);"
                     class="inline-flex items-center px-4 py-2 border border-gray-300 text-base font-semibold rounded-md text-gray-900 bg-white hover:bg-gray-50">
                 <i class="fas fa-redo mr-2"></i>
                 Restart Web Service
diff --git a/web_interface/templates/v3/partials/plugin_config.html b/web_interface/templates/v3/partials/plugin_config.html
index ce374557..218f358f 100644
--- a/web_interface/templates/v3/partials/plugin_config.html
+++ b/web_interface/templates/v3/partials/plugin_config.html
@@ -423,11 +423,10 @@
                                             {% if img.get('size') %}{{ (img.get('size') / 1024)|round }} KB{% endif %}
                                             {% if img.get('uploaded_at') %} • {{ img.get('uploaded_at') }}{% endif %}
                                         </p>
-                                        {% if has_schedule %}
-                                        <p class="text-xs text-blue-600 mt-1">
-                                            <i class="fas fa-clock mr-1"></i>Scheduled
+                                        {# file-upload.js rewrites .image-schedule-summary in place when the schedule is edited #}
+                                        <p class="text-xs text-blue-600 mt-1 image-schedule-summary">
+                                            <i class="fas fa-clock mr-1"></i>{{ 'Scheduled' if has_schedule else 'Always shown' }}
                                         </p>
-                                        {% endif %}
                                     </div>
                                 </div>
                                 <div class="flex items-center space-x-2 ml-4">
diff --git a/web_interface/templates/v3/partials/plugins.html b/web_interface/templates/v3/partials/plugins.html
index adb160f1..cec9a472 100644
--- a/web_interface/templates/v3/partials/plugins.html
+++ b/web_interface/templates/v3/partials/plugins.html
@@ -540,18 +540,6 @@
     background-color: #e5e7eb;
 }
 
-/* CodeMirror editor styles */
-.CodeMirror {
-    border: 1px solid #d1d5db;
-    border-radius: 0.375rem;
-    font-size: 14px;
-    height: auto;
-    min-height: 400px;
-}
-
-.CodeMirror.cm-error {
-    border-color: #ef4444;
-}
 
 /* Plugin config view styles */
 .plugin-config-view {
diff --git a/web_interface/templates/v3/partials/schedule.html b/web_interface/templates/v3/partials/schedule.html
index e949cd7c..8b376983 100644
--- a/web_interface/templates/v3/partials/schedule.html
+++ b/web_interface/templates/v3/partials/schedule.html
@@ -148,7 +148,7 @@
             fieldId: 'schedule'
         });
 
-        console.log('[Schedule] Schedule picker widget initialized');
+        debugLog('[Schedule] Schedule picker widget initialized');
     }
 
     // Handle form submission response
@@ -165,28 +165,7 @@
         const type = response.status || 'info';
 
         // Use global notification function if available
-        if (typeof window.showNotification === 'function') {
-            window.showNotification(message, type);
-        } else {
-            // Fallback notification
-            const colors = {
-                success: 'bg-green-500',
-                error: 'bg-red-500',
-                warning: 'bg-yellow-500',
-                info: 'bg-blue-500'
-            };
-
-            const notification = document.createElement('div');
-            notification.className = 'fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 ' + (colors[type] || colors.info) + ' text-white';
-            notification.textContent = message;
-            document.body.appendChild(notification);
-
-            setTimeout(function() {
-                notification.style.transition = 'opacity 0.5s';
-                notification.style.opacity = '0';
-                setTimeout(function() { notification.remove(); }, 500);
-            }, 3000);
-        }
+        window.showNotification(message, type);
     };
 
     // Initialize when DOM is ready or if already loaded
@@ -265,7 +244,7 @@
             fieldId: 'dim_schedule'
         });
 
-        console.log('[DimSchedule] Dim schedule picker widget initialized');
+        debugLog('[DimSchedule] Dim schedule picker widget initialized');
     }
 
     // Handle dim schedule form submission response
@@ -282,28 +261,7 @@
         const type = response.status || 'info';
 
         // Use global notification function if available
-        if (typeof window.showNotification === 'function') {
-            window.showNotification(message, type);
-        } else {
-            // Fallback notification
-            const colors = {
-                success: 'bg-green-500',
-                error: 'bg-red-500',
-                warning: 'bg-yellow-500',
-                info: 'bg-blue-500'
-            };
-
-            const notification = document.createElement('div');
-            notification.className = 'fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 ' + (colors[type] || colors.info) + ' text-white';
-            notification.textContent = message;
-            document.body.appendChild(notification);
-
-            setTimeout(function() {
-                notification.style.transition = 'opacity 0.5s';
-                notification.style.opacity = '0';
-                setTimeout(function() { notification.remove(); }, 500);
-            }, 3000);
-        }
+        window.showNotification(message, type);
     };
 
     // Initialize when DOM is ready
diff --git a/web_interface/templates/v3/partials/starlark_config.html b/web_interface/templates/v3/partials/starlark_config.html
index e099ce1a..46c25055 100644
--- a/web_interface/templates/v3/partials/starlark_config.html
+++ b/web_interface/templates/v3/partials/starlark_config.html
@@ -344,21 +344,15 @@ function forceRenderStarlarkApp(appId) {
         .then(function(r) { return r.json(); })
         .then(function(data) {
             if (data.status === 'success') {
-                if (typeof showNotification === 'function') {
-                    showNotification('Rendered successfully! ' + (data.frame_count || 0) + ' frame(s)', 'success');
-                } else {
-                    alert('Rendered successfully! ' + (data.frame_count || 0) + ' frame(s)');
-                }
+                showNotification('Rendered successfully! ' + (data.frame_count || 0) + ' frame(s)', 'success');
             } else {
                 var msg = 'Render failed: ' + (data.message || 'Unknown error');
-                if (typeof showNotification === 'function') showNotification(msg, 'error');
-                else alert(msg);
+                showNotification(msg, 'error');
             }
         })
         .catch(function(err) {
             var msg = 'Render failed: ' + err.message;
-            if (typeof showNotification === 'function') showNotification(msg, 'error');
-            else alert(msg);
+            showNotification(msg, 'error');
         });
 }
 
@@ -371,22 +365,20 @@ function toggleStarlarkApp(appId, enabled) {
     .then(function(r) { return r.json(); })
     .then(function(data) {
         if (data.status === 'success') {
-            if (typeof loadInstalledPlugins === 'function') loadInstalledPlugins();
-            else if (typeof window.loadInstalledPlugins === 'function') window.loadInstalledPlugins();
+            // A failed reload has already been reported by loadInstalledPlugins.
+            window.pluginManager.loadInstalledPlugins(true).catch(function() {});
             var container = document.getElementById('plugin-config-starlark:' + appId);
             if (container && window.htmx) {
                 htmx.ajax('GET', '/v3/partials/plugin-config/starlark:' + encodeURIComponent(appId), {target: container, swap: 'innerHTML'});
             }
         } else {
             var msg = 'Toggle failed: ' + (data.message || 'Unknown error');
-            if (typeof showNotification === 'function') showNotification(msg, 'error');
-            else alert(msg);
+            showNotification(msg, 'error');
         }
     })
     .catch(function(err) {
         var msg = 'Toggle failed: ' + err.message;
-        if (typeof showNotification === 'function') showNotification(msg, 'error');
-        else alert(msg);
+        showNotification(msg, 'error');
     });
 }
 
@@ -436,8 +428,7 @@ function saveStarlarkConfig(appId) {
     .then(function(r) { return r.json(); })
     .then(function(data) {
         if (data.status === 'success') {
-            if (typeof showNotification === 'function') showNotification('Configuration saved!', 'success');
-            else alert('Configuration saved!');
+            showNotification('Configuration saved!', 'success');
             // Reload partial to reflect updated status
             var container = document.getElementById('plugin-config-starlark:' + appId);
             if (container && window.htmx) {
@@ -445,14 +436,12 @@ function saveStarlarkConfig(appId) {
             }
         } else {
             var msg = 'Save failed: ' + (data.message || 'Unknown error');
-            if (typeof showNotification === 'function') showNotification(msg, 'error');
-            else alert(msg);
+            showNotification(msg, 'error');
         }
     })
     .catch(function(err) {
         var msg = 'Save failed: ' + err.message;
-        if (typeof showNotification === 'function') showNotification(msg, 'error');
-        else alert(msg);
+        showNotification(msg, 'error');
     });
 }
 
diff --git a/web_interface/templates/v3/partials/tools.html b/web_interface/templates/v3/partials/tools.html
index 20788abb..ebed570a 100644
--- a/web_interface/templates/v3/partials/tools.html
+++ b/web_interface/templates/v3/partials/tools.html
@@ -435,9 +435,7 @@
         el.innerHTML = html;
     }
 
-    function escHtml(s) {
-        return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-    }
+    function escHtml(s) { return window.LEDEscape.html(s); }
 
     // ── main action dispatcher ────────────────────────────────────────────────
 
@@ -910,11 +908,7 @@
     };
 
     // ── plugin health panel ──────────────────────────────────────────────────
-    function phEscape(s) {
-        return String(s).replace(/[&<>"']/g, function (c) {
-            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
-        });
-    }
+    function phEscape(s) { return window.LEDEscape.html(s); }
     function phFmtSecs(v) {
         if (typeof v !== 'number' || !isFinite(v)) return '—';
         return v.toFixed(3) + 's';