prismcast 1.7.0 → 1.9.0

package/dist/routes/root/scripts/config.js

@@ -26,34 +26,48 @@ export function generateConfigSubtabScript() {
         "<script>",
         "(function() {",
         // Service mode flag for conditional UI behavior.
-        "  var isServiceMode = " + String(isService) + ";",
+        "  const isServiceMode = " + String(isService) + ";",
         // Preset values for auto-filling bitrate and frame rate.
-        "  var presetValues = {",
+        "  const presetValues = {",
         presetBlocks.join(",\n"),
         "  };",
         // When quality preset changes, auto-fill bitrate and frame rate with preset values.
         "  function onPresetChange(presetId) {",
-        "    var values = presetValues[presetId];",
-        "    if (!values) return;",
-        "    for (var inputId in values) {",
-        "      var input = document.getElementById(inputId);",
-        "      if (input) {",
-        "        input.value = values[inputId];",
+        "    const values = presetValues[presetId];",
+        "    if(!values) return;",
+        "    for(const [ inputId, value ] of Object.entries(values)) {",
+        "      const input = document.getElementById(inputId);",
+        "      if(input) {",
+        "        input.value = value;",
         "        input.dispatchEvent(new Event('input', { bubbles: true }));",
         "      }",
         "    }",
         "  }",
         // Hint appended to success toasts when a channel operation changes M3U playlist content that Channels DVR consumes.
-        "  var PLAYLIST_HINT = ' Reload the playlist in Channels DVR to see this change.';",
+        "  const PLAYLIST_HINT = ' Reload the playlist in Channels DVR to see this change.';",
+        // Pending-toast helpers. sessionStorage access is wrapped here so private browsing mode does not crash showToastAfterReload or the page-load consumer.
+        // The producer serializes the toast, the consumer reads and removes it in one call.
+        "  function setPendingToast(message, type) {",
+        "    try { sessionStorage.setItem('pendingToast', JSON.stringify({ message: message, type: type || 'success' })); }",
+        "    catch(e) {}",
+        "  }",
+        "  function consumePendingToast() {",
+        "    try {",
+        "      const raw = sessionStorage.getItem('pendingToast');",
+        "      if(!raw) return null;",
+        "      sessionStorage.removeItem('pendingToast');",
+        "      return JSON.parse(raw);",
+        "    } catch(e) { console.warn('Pending toast data failed to read or parse.', e); return null; }",
+        "  }",
         // Queue a toast to appear after the next page reload.
         "  function showToastAfterReload(message, type) {",
-        "    sessionStorage.setItem('pendingToast', JSON.stringify({ message: message, type: type || 'success' }));",
+        "    setPendingToast(message, type);",
         "    location.reload();",
         "  }",
         // Interval handle for restart polling.
-        "  var restartPollInterval = null;",
+        "  let restartPollInterval = null;",
         // Track whether a restart is pending (deferred due to active streams).
-        "  var pendingRestart = false;",
+        "  let pendingRestart = false;",
         // Show the pending restart dialog when streams are active.
         "  function showPendingRestartDialog(streamCount) {",
         "    pendingRestart = true;",
@@ -63,9 +77,9 @@ export function generateConfigSubtabScript() {
         "  }",
         // Update the restart dialog when stream count changes. Exposed on window so the status script's streamRemoved handler can trigger it across script blocks.
         "  function updateRestartDialogStatus() {",
-        "    var count = Object.keys(streamData).length;",
+        "    const count = Object.keys(streamData).length;",
         "    document.getElementById('restart-stream-count').textContent = count;",
-        "    if (count === 0 && pendingRestart) {",
+        "    if((count === 0) && pendingRestart) {",
         "      pendingRestart = false;",
         "      document.getElementById('restart-dialog').style.display = 'none';",
         "      triggerRestart();",
@@ -73,21 +87,21 @@ export function generateConfigSubtabScript() {
         "  }",
         "  window.updateRestartDialogStatus = updateRestartDialogStatus;",
         // Cancel the pending restart.
-        "  window.cancelPendingRestart = function() {",
+        "  window.cancelPendingRestart = () => {",
         "    pendingRestart = false;",
         "    document.getElementById('restart-dialog').style.display = 'none';",
         "    showToast('Restart cancelled. Changes will apply on next restart.', 'info');",
         "  };",
         // Force immediate restart despite active streams.
-        "  window.forceRestart = async function() {",
+        "  window.forceRestart = async () => {",
         "    pendingRestart = false;",
         "    document.getElementById('restart-dialog').style.display = 'none';",
         "    try {",
-        "      var res = await fetch('/config/restart-now', { method: 'POST' });",
-        "      if (res.ok) {",
+        "      const res = await fetch('/config/restart-now', { method: 'POST' });",
+        "      if(res.ok) {",
         "        waitForServerRestart();",
         "      } else {",
-        "        var data = await res.json();",
+        "        const data = await res.json();",
         "        throw new Error(data.message || 'Restart failed');",
         "      }",
         "    } catch(err) {",
@@ -97,8 +111,8 @@ export function generateConfigSubtabScript() {
         // Trigger restart (called when streams reach 0).
         "  async function triggerRestart() {",
         "    try {",
-        "      var res = await fetch('/config/restart-now', { method: 'POST' });",
-        "      if (res.ok) {",
+        "      const res = await fetch('/config/restart-now', { method: 'POST' });",
+        "      if(res.ok) {",
         "        waitForServerRestart();",
         "      }",
         "    } catch(err) {",
@@ -107,21 +121,21 @@ export function generateConfigSubtabScript() {
         "  }",
         // Wait for server restart by polling /health, then reload.
         "  function waitForServerRestart() {",
-        "    var attempts = 0;",
-        "    var maxAttempts = 30;",
+        "    let attempts = 0;",
+        "    const maxAttempts = 30;",
         "    showToast('Restarting server...', 'info', 0);",
-        "    if (restartPollInterval) { clearInterval(restartPollInterval); }",
-        "    restartPollInterval = setInterval(async function() {",
+        "    if(restartPollInterval) { clearInterval(restartPollInterval); }",
+        "    restartPollInterval = setInterval(async () => {",
         "      attempts++;",
         "      try {",
-        "        var res = await fetch('/health');",
-        "        if (res.ok) {",
+        "        const res = await fetch('/health');",
+        "        if(res.ok) {",
         "          clearInterval(restartPollInterval);",
         "          restartPollInterval = null;",
         "          showToastAfterReload('Server restarted.', 'success');",
         "        }",
         "      } catch(err) {",
-        "        if (attempts >= maxAttempts) {",
+        "        if(attempts >= maxAttempts) {",
         "          clearInterval(restartPollInterval);",
         "          restartPollInterval = null;",
         "          showToast('Server did not restart within 30 seconds. Please check the server manually.', 'error');",
@@ -131,33 +145,33 @@ export function generateConfigSubtabScript() {
         "  }",
         // Escape HTML entities in text for safe display.
         "  function escapeHtmlText(text) {",
-        "    var div = document.createElement('div');",
+        "    const div = document.createElement('div');",
         "    div.textContent = text;",
         "    return div.innerHTML;",
         "  }",
         // Open the changelog modal and fetch content dynamically. Also checks whether an upgrade button should be shown.
-        "  window.openChangelogModal = async function() {",
-        "    var modal = document.getElementById('changelog-modal');",
-        "    if (!modal) return;",
-        "    var title = modal.querySelector('.changelog-title');",
-        "    var loading = modal.querySelector('.changelog-loading');",
-        "    var content = modal.querySelector('.changelog-content');",
-        "    var error = modal.querySelector('.changelog-error');",
-        "    var upgradeBtn = document.getElementById('changelog-upgrade-btn');",
+        "  window.openChangelogModal = async () => {",
+        "    const modal = document.getElementById('changelog-modal');",
+        "    if(!modal) return;",
+        "    const title = modal.querySelector('.changelog-title');",
+        "    const loading = modal.querySelector('.changelog-loading');",
+        "    const content = modal.querySelector('.changelog-content');",
+        "    const error = modal.querySelector('.changelog-error');",
+        "    const upgradeBtn = document.getElementById('changelog-upgrade-btn');",
         "    modal.style.display = 'flex';",
         "    loading.style.display = 'block';",
         "    content.style.display = 'none';",
         "    error.style.display = 'none';",
-        "    if (upgradeBtn) upgradeBtn.style.display = 'none';",
+        "    if(upgradeBtn) upgradeBtn.style.display = 'none';",
         "    try {",
-        "      var res = await fetch('/version/changelog');",
-        "      var data = await res.json();",
+        "      const res = await fetch('/version/changelog');",
+        "      const data = await res.json();",
         "      loading.style.display = 'none';",
         "      title.textContent = \"What's new in v\" + data.displayVersion;",
-        "      if (data.items && data.items.length > 0) {",
-        "        var html = '<ul class=\"changelog-list\">';",
-        "        for (var i = 0; i < data.items.length; i++) {",
-        "          html += '<li>' + escapeHtmlText(data.items[i]) + '</li>';",
+        "      if(data.items && (data.items.length > 0)) {",
+        "        let html = '<ul class=\"changelog-list\">';",
+        "        for(const item of data.items) {",
+        "          html += '<li>' + escapeHtmlText(item) + '</li>';",
         "        }",
         "        html += '</ul>';",
         "        content.innerHTML = html;",
@@ -165,41 +179,41 @@ export function generateConfigSubtabScript() {
         "      } else {",
         "        error.style.display = 'block';",
         "      }",
-        "      if (data.updateAvailable && upgradeBtn) { upgradeBtn.style.display = ''; }",
+        "      if(data.updateAvailable && upgradeBtn) { upgradeBtn.style.display = ''; }",
         "    } catch(err) {",
         "      loading.style.display = 'none';",
         "      error.style.display = 'block';",
         "    }",
         "  };",
         // Close the changelog modal.
-        "  window.closeChangelogModal = function() {",
-        "    var modal = document.getElementById('changelog-modal');",
-        "    if (modal) { modal.style.display = 'none'; }",
+        "  window.closeChangelogModal = () => {",
+        "    const modal = document.getElementById('changelog-modal');",
+        "    if(modal) { modal.style.display = 'none'; }",
         "  };",
         // Start the upgrade process from the changelog modal. Fetches upgrade info, confirms with the user if there are active streams, then executes the upgrade.
-        "  window.startUpgrade = async function() {",
+        "  window.startUpgrade = async () => {",
         "    try {",
-        "      var infoRes = await fetch('/upgrade/info');",
-        "      var info = await infoRes.json();",
-        "      if (!info.upgradeable) {",
+        "      const infoRes = await fetch('/upgrade/info');",
+        "      const info = await infoRes.json();",
+        "      if(!info.upgradeable) {",
         "        closeChangelogModal();",
-        "        var msg = info.method === 'docker'",
+        "        const msg = info.method === 'docker'",
         "          ? 'Docker containers cannot be upgraded in-place. Pull the latest image and recreate the container.'",
         "          : 'Manual upgrade required: ' + info.upgradeCommand;",
         "        showToast(msg, 'info', 8000);",
         "        return;",
         "      }",
-        "      var streamCount = Object.keys(streamData).length;",
-        "      if (streamCount > 0) {",
-        "        if (!confirm('There are ' + streamCount + ' active stream(s). Upgrading will interrupt them. Continue?')) return;",
+        "      const streamCount = Object.keys(streamData).length;",
+        "      if(streamCount > 0) {",
+        "        if(!confirm('There are ' + streamCount + ' active stream(s). Upgrading will interrupt them. Continue?')) return;",
         "      }",
         "      closeChangelogModal();",
         "      showToast('Upgrading PrismCast...', 'info', 0);",
-        "      var upgradeRes = await fetch('/upgrade', { method: 'POST' });",
-        "      var result = await upgradeRes.json();",
-        "      if (result.success && result.willRestart) {",
+        "      const upgradeRes = await fetch('/upgrade', { method: 'POST' });",
+        "      const result = await upgradeRes.json();",
+        "      if(result.success && result.willRestart) {",
         "        waitForServerRestart();",
-        "      } else if (result.success) {",
+        "      } else if(result.success) {",
         "        showToast('Upgrade complete. Please restart PrismCast manually.', 'success', 8000);",
         "      } else {",
         "        showToast('Upgrade failed: ' + result.message, 'error');",
@@ -209,69 +223,69 @@ export function generateConfigSubtabScript() {
         "    }",
         "  };",
         // Check for updates manually. Updates the version link in-place when a new version is found.
-        "  window.checkForUpdates = async function() {",
-        "    var btn = document.querySelector('.version-check');",
-        "    if (!btn || btn.classList.contains('checking')) return;",
+        "  window.checkForUpdates = async () => {",
+        "    const btn = document.querySelector('.version-check');",
+        "    if(!btn || btn.classList.contains('checking')) return;",
         "    btn.classList.add('checking');",
         "    try {",
-        "      var res = await fetch('/version/check', { method: 'POST' });",
-        "      var data = await res.json();",
+        "      const res = await fetch('/version/check', { method: 'POST' });",
+        "      const data = await res.json();",
         "      btn.classList.remove('checking');",
-        "      if (data.updateAvailable && data.latestVersion) {",
-        "        var link = document.querySelector('.version-container .version');",
-        "        if (link && !link.classList.contains('version-update')) {",
+        "      if(data.updateAvailable && data.latestVersion) {",
+        "        const link = document.querySelector('.version-container .version');",
+        "        if(link && !link.classList.contains('version-update')) {",
         "          link.textContent = 'v' + data.currentVersion + ' \\u2192 v' + data.latestVersion;",
         "          link.classList.add('version-update');",
         "        }",
         "      } else {",
         "        btn.classList.add('up-to-date');",
-        "        setTimeout(function() { btn.classList.remove('up-to-date'); }, 2000);",
+        "        setTimeout(() => { btn.classList.remove('up-to-date'); }, 2000);",
         "      }",
         "    } catch(err) {",
         "      btn.classList.remove('checking');",
         "      btn.classList.add('check-error');",
-        "      setTimeout(function() { btn.classList.remove('check-error'); }, 2000);",
+        "      setTimeout(() => { btn.classList.remove('check-error'); }, 2000);",
         "    }",
         "  };",
         // Clear all field error indicators.
         "  function clearFieldErrors() {",
-        "    var errorInputs = document.querySelectorAll('.form-input.error, .form-select.error');",
-        "    for (var i = 0; i < errorInputs.length; i++) {",
-        "      errorInputs[i].classList.remove('error');",
+        "    const errorInputs = document.querySelectorAll('.form-input.error, .form-select.error');",
+        "    for(const errorInput of errorInputs) {",
+        "      errorInput.classList.remove('error');",
         "    }",
-        "    var errorMsgs = document.querySelectorAll('.form-error.dynamic');",
-        "    for (var j = 0; j < errorMsgs.length; j++) {",
-        "      errorMsgs[j].remove();",
+        "    const errorMsgs = document.querySelectorAll('.form-error.dynamic');",
+        "    for(const errorMsg of errorMsgs) {",
+        "      errorMsg.remove();",
         "    }",
         "  }",
         // Display field-level errors from server response.
         "  function displayFieldErrors(errors) {",
-        "    for (var path in errors) {",
-        "      var inputId = path.replace(/\\./g, '-');",
-        "      var input = document.getElementById(inputId);",
-        "      if (input) {",
+        "    for(const [ path, message ] of Object.entries(errors)) {",
+        "      const inputId = path.replaceAll('.', '-');",
+        "      const input = document.getElementById(inputId);",
+        "      if(input) {",
         "        input.classList.add('error');",
-        "        var errorDiv = document.createElement('div');",
+        "        const errorDiv = document.createElement('div');",
         "        errorDiv.className = 'form-error dynamic';",
-        "        errorDiv.textContent = errors[path];",
+        "        errorDiv.textContent = message;",
         "        input.closest('.form-group').appendChild(errorDiv);",
         "      }",
         "    }",
         "  }",
         // Set a form input's value, handling checkbox and standard input types uniformly.
         "  function setInputValue(input, value) {",
-        "    if (input.type === 'checkbox') {",
+        "    if(input.type === 'checkbox') {",
         "      input.checked = value === 'true';",
         "    } else {",
         "      input.value = value;",
         "    }",
-        "    if (input.hasAttribute('data-checkbox-list')) {",
-        "      var values = JSON.parse(value || '[]');",
-        "      var grid = input.closest('.form-group').querySelector('.checkbox-list-grid');",
-        "      if (grid) {",
-        "        var cbs = grid.querySelectorAll('input[type=\"checkbox\"]');",
-        "        for (var k = 0; k < cbs.length; k++) {",
-        "          cbs[k].checked = values.indexOf(cbs[k].value) !== -1;",
+        "    if(input.hasAttribute('data-checkbox-list')) {",
+        "      const values = JSON.parse(value || '[]');",
+        "      const grid = input.closest('.form-group').querySelector('.checkbox-list-grid');",
+        "      if(grid) {",
+        "        const cbs = grid.querySelectorAll('input[type=\"checkbox\"]');",
+        "        for(const cb of cbs) {",
+        "          cb.checked = values.includes(cb.value);",
         "        }",
         "      }",
         "    }",
@@ -283,189 +297,187 @@ export function generateConfigSubtabScript() {
         // Toggle dependent fields when a boolean checkbox changes. Fields with data-depends-on are visually greyed out and removed from the tab order when the
         // referenced checkbox is unchecked. This function is defined at the top level so that both event handlers and reset functions can call it.
         "  function updateDependentFields(checkboxId) {",
-        "    var checkbox = document.getElementById(checkboxId);",
-        "    if (!checkbox) return;",
-        "    var dependents = document.querySelectorAll('[data-depends-on=\"' + checkboxId + '\"]');",
-        "    for (var i = 0; i < dependents.length; i++) {",
-        "      if (checkbox.checked) {",
-        "        dependents[i].classList.remove('depends-disabled');",
+        "    const checkbox = document.getElementById(checkboxId);",
+        "    if(!checkbox) return;",
+        "    const dependents = document.querySelectorAll('[data-depends-on=\"' + checkboxId + '\"]');",
+        "    for(const dependent of dependents) {",
+        "      if(checkbox.checked) {",
+        "        dependent.classList.remove('depends-disabled');",
         "      } else {",
-        "        dependents[i].classList.add('depends-disabled');",
+        "        dependent.classList.add('depends-disabled');",
         "      }",
-        "      var depInputs = dependents[i].querySelectorAll('input:not([type=\"hidden\"]), select');",
-        "      for (var j = 0; j < depInputs.length; j++) {",
-        "        depInputs[j].tabIndex = checkbox.checked ? 0 : -1;",
+        "      const depInputs = dependent.querySelectorAll('input:not([type=\"hidden\"]), select');",
+        "      for(const depInput of depInputs) {",
+        "        depInput.tabIndex = checkbox.checked ? 0 : -1;",
         "      }",
         "    }",
         "  }",
         // Update modified indicators for a single input.
         "  function updateModifiedIndicator(input) {",
-        "    var defaultVal = input.getAttribute('data-default');",
-        "    var currentVal = getInputValue(input);",
-        "    var formGroup = input.closest('.form-group');",
-        "    if (!formGroup) return;",
-        "    var isModified = currentVal !== defaultVal;",
-        "    var dot = formGroup.querySelector('.modified-dot');",
-        "    var resetBtn = formGroup.querySelector('.btn-reset');",
-        "    if (isModified) {",
+        "    const defaultVal = input.getAttribute('data-default');",
+        "    const currentVal = getInputValue(input);",
+        "    const formGroup = input.closest('.form-group');",
+        "    if(!formGroup) return;",
+        "    const isModified = currentVal !== defaultVal;",
+        "    const dot = formGroup.querySelector('.modified-dot');",
+        "    const resetBtn = formGroup.querySelector('.btn-reset');",
+        "    if(isModified) {",
         "      formGroup.classList.add('modified');",
-        "      if (!dot) {",
-        "        var label = formGroup.querySelector('.form-label');",
-        "        if (label) {",
-        "          var newDot = document.createElement('span');",
+        "      if(!dot) {",
+        "        const label = formGroup.querySelector('.form-label');",
+        "        if(label) {",
+        "          const newDot = document.createElement('span');",
         "          newDot.className = 'modified-dot';",
         "          newDot.title = 'Modified from default';",
         "          label.insertBefore(newDot, label.firstChild);",
         "        }",
         "      }",
-        "      if (!resetBtn) {",
-        "        var row = formGroup.querySelector('.form-row');",
-        "        if (row) {",
-        "          var path = input.getAttribute('name');",
-        "          var btn = document.createElement('button');",
+        "      if(!resetBtn) {",
+        "        const row = formGroup.querySelector('.form-row');",
+        "        if(row) {",
+        "          const path = input.getAttribute('name');",
+        "          const btn = document.createElement('button');",
         "          btn.type = 'button';",
         "          btn.className = 'btn-reset';",
         "          btn.title = 'Reset to default';",
         "          btn.setAttribute('aria-label', 'Reset to default');",
         "          btn.innerHTML = '&#8635;';",
-        "          btn.onclick = function() { resetSetting(path); };",
+        "          btn.onclick = () => { resetSetting(path); };",
         "          row.appendChild(btn);",
         "        }",
         "      }",
         "    } else {",
         "      formGroup.classList.remove('modified');",
-        "      if (dot) dot.remove();",
-        "      if (resetBtn) resetBtn.remove();",
+        "      if(dot) dot.remove();",
+        "      if(resetBtn) resetBtn.remove();",
         "    }",
         "  }",
         // Reset a single setting to its default value (client-side only). Dispatches both input and change events to match browser behavior: input for validation and
         // modified indicator updates, change for cascade handlers (e.g., preset dropdown updating bitrate and frame rate fields).
-        "  window.resetSetting = function(path) {",
-        "    var inputId = path.replace(/\\./g, '-');",
-        "    var input = document.getElementById(inputId);",
-        "    if (!input) return;",
-        "    var defaultVal = input.getAttribute('data-default');",
-        "    if (defaultVal !== null) {",
+        "  window.resetSetting = (path) => {",
+        "    const inputId = path.replaceAll('.', '-');",
+        "    const input = document.getElementById(inputId);",
+        "    if(!input) return;",
+        "    const defaultVal = input.getAttribute('data-default');",
+        "    if(defaultVal !== null) {",
         "      setInputValue(input, defaultVal);",
         "      input.dispatchEvent(new Event('input', { bubbles: true }));",
         "      input.dispatchEvent(new Event('change', { bubbles: true }));",
         "    }",
         "  };",
         // Reset all settings in a tab to defaults (client-side only). Works for both settings and advanced tabs.
-        "  window.resetTabToDefaults = function(tabId) {",
-        "    if (!confirm('Reset all settings in this tab to defaults?')) return;",
-        "    var panel = document.getElementById('subtab-' + tabId);",
-        "    if (!panel) return;",
-        "    var inputs = panel.querySelectorAll('input[data-default], select[data-default]');",
-        "    for (var i = 0; i < inputs.length; i++) {",
-        "      var input = inputs[i];",
-        "      if (!input.disabled) {",
+        "  window.resetTabToDefaults = (tabId) => {",
+        "    if(!confirm('Reset all settings in this tab to defaults?')) return;",
+        "    const panel = document.getElementById('subtab-' + tabId);",
+        "    if(!panel) return;",
+        "    const inputs = panel.querySelectorAll('input[data-default], select[data-default]');",
+        "    for(const input of inputs) {",
+        "      if(!input.disabled) {",
         "        setInputValue(input, input.getAttribute('data-default'));",
         "        updateModifiedIndicator(input);",
         "      }",
         "    }",
-        "    var cbInputs = panel.querySelectorAll('input[type=\"checkbox\"][data-default]');",
-        "    for (var j = 0; j < cbInputs.length; j++) {",
-        "      if (!cbInputs[j].disabled) {",
-        "        updateDependentFields(cbInputs[j].id);",
+        "    const cbInputs = panel.querySelectorAll('input[type=\"checkbox\"][data-default]');",
+        "    for(const cbInput of cbInputs) {",
+        "      if(!cbInput.disabled) {",
+        "        updateDependentFields(cbInput.id);",
         "      }",
         "    }",
         "    showToast('Settings reset to defaults. Click ' + (isServiceMode ? 'Save & Restart' : 'Save Settings') + ' to apply changes.', 'info');",
         "  };",
-        // Toggle collapsible section in Advanced tab.
-        "  window.toggleSection = function(sectionId) {",
-        "    var section = document.querySelector('.advanced-section[data-section=\"' + sectionId + '\"]');",
-        "    if (!section) return;",
-        "    var header = section.querySelector('.section-header');",
-        "    var content = section.querySelector('.section-content');",
-        "    if (!header || !content) return;",
-        "    var isExpanded = content.classList.contains('expanded');",
-        "    if (isExpanded) {",
+        // Read the advanced section expansion state from localStorage. Returns the parsed object or {} if missing or corrupted. Single source of truth for
+        // reading this key — used by both toggleSection (read-modify-write) and initSections (read-only).
+        "  function readAdvancedSectionState() {",
+        "    const stored = safeStorageGet('prismcast-advanced-sections');",
+        "    if(!stored) return {};",
+        "    try { return JSON.parse(stored); }",
+        "    catch(e) { console.warn('Advanced section state failed to parse.', e); return {}; }",
+        "  }",
+        "  window.toggleSection = (sectionId) => {",
+        "    const section = document.querySelector('.advanced-section[data-section=\"' + sectionId + '\"]');",
+        "    if(!section) return;",
+        "    const header = section.querySelector('.section-header');",
+        "    const content = section.querySelector('.section-content');",
+        "    if(!header || !content) return;",
+        "    const isExpanded = content.classList.contains('expanded');",
+        "    if(isExpanded) {",
         "      content.classList.remove('expanded');",
         "      header.classList.remove('expanded');",
         "    } else {",
         "      content.classList.add('expanded');",
         "      header.classList.add('expanded');",
         "    }",
-        "    try {",
-        "      var expanded = JSON.parse(localStorage.getItem('prismcast-advanced-sections') || '{}');",
-        "      expanded[sectionId] = !isExpanded;",
-        "      localStorage.setItem('prismcast-advanced-sections', JSON.stringify(expanded));",
-        "    } catch(e) {}",
+        "    const expanded = readAdvancedSectionState();",
+        "    expanded[sectionId] = !isExpanded;",
+        "    safeStorageSet('prismcast-advanced-sections', JSON.stringify(expanded));",
         "  };",
-        // Initialize section expansion state from localStorage.
+        // Initialize section expansion state from localStorage on page load.
         "  function initSections() {",
-        "    try {",
-        "      var expanded = JSON.parse(localStorage.getItem('prismcast-advanced-sections') || '{}');",
-        "      for (var sectionId in expanded) {",
-        "        if (expanded[sectionId]) {",
-        "          var section = document.querySelector('.advanced-section[data-section=\"' + sectionId + '\"]');",
-        "          if (section) {",
-        "            var header = section.querySelector('.section-header');",
-        "            var content = section.querySelector('.section-content');",
-        "            if (header && content) {",
-        "              header.classList.add('expanded');",
-        "              content.classList.add('expanded');",
-        "            }",
-        "          }",
-        "        }",
+        "    for(const [ sectionId, isExpanded ] of Object.entries(readAdvancedSectionState())) {",
+        "      if(!isExpanded) continue;",
+        "      const section = document.querySelector('.advanced-section[data-section=\"' + sectionId + '\"]');",
+        "      if(!section) continue;",
+        "      const header = section.querySelector('.section-header');",
+        "      const content = section.querySelector('.section-content');",
+        "      if(header && content) {",
+        "        header.classList.add('expanded');",
+        "        content.classList.add('expanded');",
         "      }",
-        "    } catch(e) {}",
+        "    }",
         "  }",
         "  initSections();",
         // Reset all settings to defaults (client-side only).
-        "  window.resetAllToDefaults = function() {",
-        "    if (!confirm('Reset ALL settings to defaults? Click ' + (isServiceMode ? 'Save & Restart' : 'Save Settings') + ' after to apply.')) return;",
-        "    var form = document.getElementById('settings-form');",
-        "    if (!form) return;",
-        "    var inputs = form.querySelectorAll('input[data-default], select[data-default]');",
-        "    for (var i = 0; i < inputs.length; i++) {",
-        "      var input = inputs[i];",
-        "      if (!input.disabled) {",
+        "  window.resetAllToDefaults = () => {",
+        "    if(!confirm('Reset ALL settings to defaults? Click ' + (isServiceMode ? 'Save & Restart' : 'Save Settings') + ' after to apply.')) return;",
+        "    const form = document.getElementById('settings-form');",
+        "    if(!form) return;",
+        "    const inputs = form.querySelectorAll('input[data-default], select[data-default]');",
+        "    for(const input of inputs) {",
+        "      if(!input.disabled) {",
         "        setInputValue(input, input.getAttribute('data-default'));",
         "        updateModifiedIndicator(input);",
         "      }",
         "    }",
-        "    var cbInputs = form.querySelectorAll('input[type=\"checkbox\"][data-default]');",
-        "    for (var j = 0; j < cbInputs.length; j++) {",
-        "      if (!cbInputs[j].disabled) {",
-        "        updateDependentFields(cbInputs[j].id);",
+        "    const cbInputs = form.querySelectorAll('input[type=\"checkbox\"][data-default]');",
+        "    for(const cbInput of cbInputs) {",
+        "      if(!cbInput.disabled) {",
+        "        updateDependentFields(cbInput.id);",
         "      }",
         "    }",
         "    showToast('All settings reset to defaults. Click ' + (isServiceMode ? 'Save & Restart' : 'Save Settings') + ' to apply changes.', 'info');",
         "  };",
         // Submit settings form via AJAX.
-        "  window.submitSettingsForm = async function(event) {",
+        "  window.submitSettingsForm = async (event) => {",
         "    event.preventDefault();",
         "    clearFieldErrors();",
-        "    var form = document.getElementById('settings-form');",
-        "    var saveBtn = document.getElementById('save-btn');",
-        "    if (!form) return false;",
-        "    var formData = new FormData(form);",
-        "    var config = {};",
-        "    for (var pair of formData.entries()) {",
-        "      var path = pair[0];",
-        "      var value = pair[1];",
-        "      var parts = path.split('.');",
-        "      var obj = config;",
-        "      for (var i = 0; i < parts.length - 1; i++) {",
-        "        if (!obj[parts[i]]) obj[parts[i]] = {};",
+        "    const form = document.getElementById('settings-form');",
+        "    const saveBtn = document.getElementById('save-btn');",
+        "    if(!form) return false;",
+        "    const formData = new FormData(form);",
+        "    const config = {};",
+        "    for(const pair of formData.entries()) {",
+        "      const path = pair[0];",
+        "      const value = pair[1];",
+        "      const parts = path.split('.');",
+        "      let obj = config;",
+        "      for(let i = 0; i < (parts.length - 1); i++) {",
+        "        if(!obj[parts[i]]) obj[parts[i]] = {};",
         "        obj = obj[parts[i]];",
         "      }",
-        "      obj[parts[parts.length - 1]] = value;",
+        "      obj[parts.at(-1)] = value;",
         "    }",
-        "    if (saveBtn) saveBtn.classList.add('loading');",
+        "    if(saveBtn) saveBtn.classList.add('loading');",
         "    try {",
-        "      var res = await fetch('/config', {",
-        "        method: 'POST',",
-        "        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
-        "        body: JSON.stringify(config)",
+        "      const res = await fetch('/config', {",
+        "        body: JSON.stringify(config),",
+        "        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },",
+        "        method: 'POST'",
         "      });",
-        "      var data = await res.json();",
-        "      if (saveBtn) saveBtn.classList.remove('loading');",
-        "      if (res.ok && data.success) {",
-        "        if (data.willRestart) {",
-        "          if (data.deferred) {",
+        "      const data = await res.json();",
+        "      if(saveBtn) saveBtn.classList.remove('loading');",
+        "      if(res.ok && data.success) {",
+        "        if(data.willRestart) {",
+        "          if(data.deferred) {",
         "            showPendingRestartDialog(data.activeStreams);",
         "          } else {",
         "            waitForServerRestart();",
@@ -473,25 +485,25 @@ export function generateConfigSubtabScript() {
         "        } else {",
         "          showToast(data.message || 'Configuration saved.', 'info');",
         "        }",
-        "      } else if (data.errors) {",
+        "      } else if(data.errors) {",
         "        displayFieldErrors(data.errors);",
         "        showToast('Please correct the errors below.', 'error');",
         "      } else {",
         "        showToast(data.message || 'Failed to save configuration.', 'error');",
         "      }",
         "    } catch(err) {",
-        "      if (saveBtn) saveBtn.classList.remove('loading');",
+        "      if(saveBtn) saveBtn.classList.remove('loading');",
         "      showToast('Failed to save configuration: ' + err.message, 'error');",
         "    }",
         "    return false;",
         "  };",
         // Export configuration as JSON download.
-        "  window.exportConfig = async function() {",
+        "  window.exportConfig = async () => {",
         "    try {",
-        "      var res = await fetch('/config/export');",
-        "      var blob = await res.blob();",
-        "      var url = window.URL.createObjectURL(blob);",
-        "      var a = document.createElement('a');",
+        "      const res = await fetch('/config/export');",
+        "      const blob = await res.blob();",
+        "      const url = window.URL.createObjectURL(blob);",
+        "      const a = document.createElement('a');",
         "      a.href = url;",
         "      a.download = 'prismcast-config.json';",
         "      document.body.appendChild(a);",
@@ -503,24 +515,24 @@ export function generateConfigSubtabScript() {
         "    }",
         "  };",
         // Import configuration from file.
-        "  window.importConfig = function(fileInput) {",
-        "    var file = fileInput.files[0];",
-        "    if (!file) return;",
-        "    var reader = new FileReader();",
-        "    reader.onload = async function(e) {",
+        "  window.importConfig = (fileInput) => {",
+        "    const file = fileInput.files[0];",
+        "    if(!file) return;",
+        "    const reader = new FileReader();",
+        "    reader.onload = async (e) => {",
         "      try {",
-        "        var config = JSON.parse(e.target.result);",
-        "        if (confirm('Import this configuration? The server may restart to apply changes.')) {",
-        "          var res = await fetch('/config/import', {",
-        "            method: 'POST',",
+        "        const config = JSON.parse(e.target.result);",
+        "        if(confirm('Import this configuration? The server may restart to apply changes.')) {",
+        "          const res = await fetch('/config/import', {",
+        "            body: JSON.stringify(config),",
         "            headers: { 'Content-Type': 'application/json' },",
-        "            body: JSON.stringify(config)",
+        "            method: 'POST'",
         "          });",
-        "          var data = await res.json();",
-        "          if (res.ok && data.success) {",
+        "          const data = await res.json();",
+        "          if(res.ok && data.success) {",
         "            showToast(data.message || 'Configuration imported.', 'success');",
-        "            if (data.willRestart) {",
-        "              if (data.deferred) {",
+        "            if(data.willRestart) {",
+        "              if(data.deferred) {",
         "                showPendingRestartDialog(data.activeStreams);",
         "              } else {",
         "                waitForServerRestart();",
@@ -530,7 +542,7 @@ export function generateConfigSubtabScript() {
         "            throw new Error(data.message || data.error || 'Import failed');",
         "          }",
         "        }",
-        "      } catch (err) {",
+        "      } catch(err) {",
         "        showToast('Failed to import configuration: ' + err.message, 'error');",
         "      }",
         "      fileInput.value = '';",
@@ -538,12 +550,12 @@ export function generateConfigSubtabScript() {
         "    reader.readAsText(file);",
         "  };",
         // Export channels as JSON download.
-        "  window.exportChannels = async function() {",
+        "  window.exportChannels = async () => {",
         "    try {",
-        "      var res = await fetch('/config/channels/export');",
-        "      var blob = await res.blob();",
-        "      var url = window.URL.createObjectURL(blob);",
-        "      var a = document.createElement('a');",
+        "      const res = await fetch('/config/channels/export');",
+        "      const blob = await res.blob();",
+        "      const url = window.URL.createObjectURL(blob);",
+        "      const a = document.createElement('a');",
         "      a.href = url;",
         "      a.download = 'prismcast-channels.json';",
         "      document.body.appendChild(a);",
@@ -555,28 +567,28 @@ export function generateConfigSubtabScript() {
         "    }",
         "  };",
         // Import channels from file.
-        "  window.importChannels = function(fileInput) {",
-        "    var file = fileInput.files[0];",
-        "    if (!file) return;",
-        "    var reader = new FileReader();",
-        "    reader.onload = async function(e) {",
+        "  window.importChannels = (fileInput) => {",
+        "    const file = fileInput.files[0];",
+        "    if(!file) return;",
+        "    const reader = new FileReader();",
+        "    reader.onload = async (e) => {",
         "      try {",
-        "        var channels = JSON.parse(e.target.result);",
-        "        if (confirm('Import these channels? This will replace all existing user channels.')) {",
-        "          var res = await fetch('/config/channels/import', {",
-        "            method: 'POST',",
+        "        const channels = JSON.parse(e.target.result);",
+        "        if(confirm('Import these channels? This will replace all existing user channels.')) {",
+        "          const res = await fetch('/config/channels/import', {",
+        "            body: JSON.stringify(channels),",
         "            headers: { 'Content-Type': 'application/json' },",
-        "            body: JSON.stringify(channels)",
+        "            method: 'POST'",
         "          });",
-        "          var data = await res.json();",
-        "          if (data.success) {",
+        "          const data = await res.json();",
+        "          if(data.success) {",
         "            showToast((data.message || 'Channels imported successfully.') + PLAYLIST_HINT, 'success');",
-        "            if (data.patch) { applyChannelPatch(data.patch); }",
+        "            if(data.patch) { channelTable.applyPatch(data.patch); }",
         "          } else {",
         "            showToast('Failed to import channels: ' + (data.error || 'Unknown error.'), 'error');",
         "          }",
         "        }",
-        "      } catch (err) {",
+        "      } catch(err) {",
         "        showToast('Failed to import channels: ' + err.message, 'error');",
         "      }",
         "      fileInput.value = '';",
@@ -584,39 +596,40 @@ export function generateConfigSubtabScript() {
         "    reader.readAsText(file);",
         "  };",
         // Import channels from M3U playlist file.
-        "  window.importM3U = function(fileInput) {",
-        "    var file = fileInput.files[0];",
-        "    if (!file) return;",
-        "    var replaceCheckbox = document.getElementById('m3u-replace-duplicates');",
-        "    var conflictMode = (replaceCheckbox && replaceCheckbox.checked) ? 'replace' : 'skip';",
-        "    var reader = new FileReader();",
-        "    reader.onload = async function(e) {",
+        "  window.importM3U = (fileInput) => {",
+        "    const file = fileInput.files[0];",
+        "    if(!file) return;",
+        "    const replaceCheckbox = document.getElementById('m3u-replace-duplicates');",
+        "    const conflictMode = (replaceCheckbox && replaceCheckbox.checked) ? 'replace' : 'skip';",
+        "    const reader = new FileReader();",
+        "    reader.onload = async (e) => {",
         "      try {",
-        "        var res = await fetch('/config/channels/import-m3u', {",
-        "          method: 'POST',",
+        "        const res = await fetch('/config/channels/import-m3u', {",
+        "          body: JSON.stringify({ content: e.target.result, conflictMode: conflictMode }),",
         "          headers: { 'Content-Type': 'application/json' },",
-        "          body: JSON.stringify({ content: e.target.result, conflictMode: conflictMode })",
+        "          method: 'POST'",
         "        });",
-        "        var data = await res.json();",
-        "        if (data.success) {",
-        "          var msg = 'M3U Import Complete\\n\\n';",
+        "        const data = await res.json();",
+        "        if(data.success) {",
+        "          let msg = 'M3U Import Complete\\n\\n';",
         "          msg += '\\u2713 ' + data.imported + ' channel(s) imported\\n';",
-        "          if (data.replaced > 0) msg += '\\u21BB ' + data.replaced + ' channel(s) replaced\\n';",
-        "          if (data.skipped > 0) msg += '\\u25CB ' + data.skipped + ' duplicate(s) skipped\\n';",
-        "          if (data.errors && data.errors.length > 0) {",
+        "          if(data.replaced > 0) msg += '\\u21BB ' + data.replaced + ' channel(s) replaced\\n';",
+        "          if(data.skipped > 0) msg += '\\u25CB ' + data.skipped + ' duplicate(s) skipped\\n';",
+        "          if(data.errors && (data.errors.length > 0)) {",
         "            msg += '\\n! ' + data.errors.length + ' error(s):\\n';",
-        "            for (var i = 0; i < Math.min(data.errors.length, 5); i++) {",
+        "            const limit = Math.min(data.errors.length, 5);",
+        "            for(let i = 0; i < limit; i++) {",
         "              msg += '  - ' + data.errors[i] + '\\n';",
         "            }",
-        "            if (data.errors.length > 5) msg += '  ... and ' + (data.errors.length - 5) + ' more\\n';",
+        "            if(data.errors.length > 5) msg += '  ... and ' + (data.errors.length - 5) + ' more\\n';",
         "          }",
-        "          if (data.patch) { applyChannelPatch(data.patch); }",
-        "          showToast(msg + ((data.imported > 0 || data.replaced > 0) ? PLAYLIST_HINT : ''), 'success');",
+        "          if(data.patch) { channelTable.applyPatch(data.patch); }",
+        "          showToast(msg + (((data.imported > 0) || (data.replaced > 0)) ? PLAYLIST_HINT : ''), 'success');",
         "        } else {",
         "          showToast('M3U import failed: ' + (data.error || 'Unknown error'), 'error');",
         "        }",
         "      } catch(err) {",
-        "        console.error('M3U import error:', err);",
+        "        console.error('M3U channel import failed.', err);",
         "        showToast('Failed to import M3U: ' + err.message, 'error');",
         "      }",
         "      fileInput.value = '';",
@@ -625,174 +638,122 @@ export function generateConfigSubtabScript() {
         "  };",
         // Client-side validation for numeric inputs.
         "  function validateInput(input) {",
-        "    var min = input.min !== '' ? Number(input.min) : null;",
-        "    var max = input.max !== '' ? Number(input.max) : null;",
-        "    var value = Number(input.value);",
-        "    var isValid = true;",
-        "    if (input.type === 'number') {",
-        "      if (isNaN(value)) { isValid = false; }",
-        "      else if (min !== null && value < min) { isValid = false; }",
-        "      else if (max !== null && value > max) { isValid = false; }",
-        "    }",
-        "    if (isValid) {",
+        "    const min = input.min !== '' ? Number(input.min) : null;",
+        "    const max = input.max !== '' ? Number(input.max) : null;",
+        "    const value = Number(input.value);",
+        "    let isValid = true;",
+        "    if(input.type === 'number') {",
+        "      if(isNaN(value)) { isValid = false; }",
+        "      else if((min !== null) && (value < min)) { isValid = false; }",
+        "      else if((max !== null) && (value > max)) { isValid = false; }",
+        "    }",
+        "    if(isValid) {",
         "      input.classList.remove('error');",
         "    } else {",
         "      input.classList.add('error');",
         "    }",
         "    return isValid;",
         "  }",
-        // Subtab switching function.
-        "  function switchSubtab(subtab, updateUrl) {",
-        "    var btns = document.querySelectorAll('.subtab-btn');",
-        "    var panels = document.querySelectorAll('.subtab-panel');",
-        "    var settingsButtons = document.getElementById('settings-buttons');",
-        "    for (var i = 0; i < btns.length; i++) {",
-        "      btns[i].classList.remove('active');",
-        "      btns[i].setAttribute('aria-selected', 'false');",
-        "      if (btns[i].getAttribute('data-subtab') === subtab) {",
-        "        btns[i].classList.add('active');",
-        "        btns[i].setAttribute('aria-selected', 'true');",
-        "      }",
-        "    }",
-        "    for (var j = 0; j < panels.length; j++) {",
-        "      panels[j].classList.remove('active');",
-        "      if (panels[j].id === 'subtab-' + subtab) {",
-        "        panels[j].classList.add('active');",
-        "      }",
-        "    }",
-        // Show/hide settings buttons based on subtab (hidden on backup subtab).
-        "    if (settingsButtons) {",
-        "      settingsButtons.style.display = (subtab === 'backup') ? 'none' : 'flex';",
-        "    }",
-        // Update localStorage and URL hash.
-        "    try { localStorage.setItem('prismcast-config-subtab', subtab); } catch(e) {}",
-        "    if (updateUrl !== false) {",
-        "      var newHash = '#config/' + subtab;",
-        "      if (window.location.hash !== newHash) {",
-        "        window.location.hash = newHash;",
-        "      }",
-        "    }",
-        "  }",
-        // Expose for main tab script to use.
+        // Subtab switching via the shared factory. The onSwitch callback handles the config-specific behavior of hiding settings buttons on the backup subtab.
+        "  const switchSubtab = createSubtabSwitcher({",
+        "    btnSelector: '.subtab-btn',",
+        "    dataAttr: 'data-subtab',",
+        "    hashFn: (s) => '#config/' + s,",
+        "    onSwitch: (subtab) => {",
+        "      const settingsButtons = document.getElementById('settings-buttons');",
+        "      if(settingsButtons) settingsButtons.style.display = (subtab === 'backup') ? 'none' : 'flex';",
+        "    },",
+        "    panelPrefix: 'subtab-',",
+        "    panelSelector: '.subtab-panel',",
+        "    storageKey: 'prismcast-config-subtab'",
+        "  });",
         "  window.switchConfigSubtab = switchSubtab;",
-        // Attach click handlers to subtab buttons.
-        "  var subtabBtns = document.querySelectorAll('.subtab-btn');",
-        "  for (var i = 0; i < subtabBtns.length; i++) {",
-        "    subtabBtns[i].addEventListener('click', function() {",
-        "      switchSubtab(this.getAttribute('data-subtab'));",
-        "    });",
-        "  }",
         // Channel edit form show/hide functions.
-        "  window.showEditForm = function(key) {",
-        "    var displayRow = document.getElementById('display-row-' + key);",
-        "    var editRow = document.getElementById('edit-row-' + key);",
-        "    if (displayRow) displayRow.style.display = 'none';",
-        "    if (editRow) {",
+        "  window.showEditForm = (key) => {",
+        "    const displayRow = document.getElementById('display-row-' + key);",
+        "    const editRow = document.getElementById('edit-row-' + key);",
+        "    if(displayRow) displayRow.style.display = 'none';",
+        "    if(editRow) {",
         "      editRow.style.display = '';",
         "      updateSelectorSuggestions('edit-url-' + key, 'edit-' + key + '-selectorList');",
-        "      var urlInput = document.getElementById('edit-url-' + key);",
-        "      if (urlInput && !urlInput.dataset.selectorBound) {",
-        "        urlInput.addEventListener('input', function() { updateSelectorSuggestions('edit-url-' + key, 'edit-' + key + '-selectorList'); });",
+        "      const urlInput = document.getElementById('edit-url-' + key);",
+        "      if(urlInput && !urlInput.dataset.selectorBound) {",
+        "        urlInput.addEventListener('input', () => { updateSelectorSuggestions('edit-url-' + key, 'edit-' + key + '-selectorList'); });",
         "        urlInput.dataset.selectorBound = 'true';",
         "      }",
         "    }",
         "  };",
-        "  window.hideEditForm = function(key) {",
-        "    var displayRow = document.getElementById('display-row-' + key);",
-        "    var editRow = document.getElementById('edit-row-' + key);",
-        "    if (displayRow) displayRow.style.display = '';",
-        "    if (editRow) editRow.style.display = 'none';",
+        "  window.hideEditForm = (key) => {",
+        "    const displayRow = document.getElementById('display-row-' + key);",
+        "    const editRow = document.getElementById('edit-row-' + key);",
+        "    if(displayRow) displayRow.style.display = '';",
+        "    if(editRow) editRow.style.display = 'none';",
+        "  };",
+        // Reset a single channel edit form field to its predefined default. Reads the data-default attribute, sets the value, removes the modified treatment
+        // (border accent, dot, reset button), and dispatches events so dependent handlers (e.g., tag checkbox sync) update. Same pattern as the settings form's
+        // resetSetting() but for channel fields within the edit form.
+        "  window.resetChannelField = (inputId) => {",
+        "    const input = document.getElementById(inputId);",
+        "    if(!input) return;",
+        "    const defaultVal = input.getAttribute('data-default');",
+        "    if(defaultVal === null) return;",
+        "    setInputValue(input, defaultVal);",
+        "    const row = input.closest('.form-row');",
+        "    if(row) {",
+        "      row.classList.remove('modified');",
+        "      const dot = row.querySelector('.modified-dot');",
+        "      if(dot) dot.remove();",
+        "      const btn = row.querySelector('.btn-reset');",
+        "      if(btn) btn.remove();",
+        "    }",
+        "    input.dispatchEvent(new Event('input', { bubbles: true }));",
+        "    input.dispatchEvent(new Event('change', { bubbles: true }));",
         "  };",
-        // Select a provider pill in the add form. Clicking an inactive pill highlights it, fills the URL field, sets profile to autodetect (disabled), and expands
-        // the advanced section (channel selector is essential for provider channels). Clicking the active pill deselects it, clears the URL, and re-enables the
+        // Select a service pill in the add form. Clicking an inactive pill highlights it, fills the URL field, sets profile to autodetect (disabled), and expands
+        // the advanced section (channel selector is essential for service channels). Clicking the active pill deselects it, clears the URL, and re-enables the
         // profile dropdown for manual entry mode.
-        "  window.selectProviderPill = function(btn) {",
-        "    var wasActive = btn.classList.contains('active');",
-        "    var pills = btn.parentElement.querySelectorAll('.provider-pill');",
-        "    for(var i = 0; i < pills.length; i++) pills[i].classList.remove('active');",
+        "  window.selectServicePill = (btn) => {",
+        "    const wasActive = btn.classList.contains('active');",
+        "    const pills = btn.parentElement.querySelectorAll('.provider-pill');",
+        "    for(const pill of pills) pill.classList.remove('active');",
         "    if(!wasActive) btn.classList.add('active');",
-        "    var urlInput = document.getElementById('add-url');",
+        "    const urlInput = document.getElementById('add-url');",
         "    if(urlInput) {",
         "      urlInput.value = wasActive ? '' : (btn.getAttribute('data-url') || '');",
         "      urlInput.dispatchEvent(new Event('input', { bubbles: true }));",
         "    }",
-        "    var profileSelect = document.getElementById('add-profile');",
+        "    const profileSelect = document.getElementById('add-profile');",
         "    if(profileSelect) {",
         "      if(!wasActive) { profileSelect.value = ''; profileSelect.disabled = true; }",
         "      else { profileSelect.disabled = false; }",
         "    }",
         "    if(!wasActive) {",
-        "      var advanced = document.getElementById('add-advanced');",
-        "      var toggle = advanced ? advanced.previousElementSibling : null;",
+        "      const advanced = document.getElementById('add-advanced');",
+        "      const toggle = advanced ? advanced.previousElementSibling : null;",
         "      if(advanced && !advanced.classList.contains('show')) {",
         "        advanced.classList.add('show');",
         "        if(toggle) toggle.textContent = 'Hide Advanced Options';",
         "      }",
         "    }",
         "  };",
-        // Hide the add form and reset all fields and provider pill selection.
-        "  window.hideAddForm = function() {",
-        "    var addForm = document.getElementById('add-channel-form');",
-        "    if (addForm) addForm.style.display = 'none';",
-        "    if (addForm) {",
+        // Hide the add form and reset all fields and service pill selection.
+        "  window.hideAddForm = () => {",
+        "    const addForm = document.getElementById('add-channel-form');",
+        "    if(addForm) addForm.style.display = 'none';",
+        "    if(addForm) {",
         "      addForm.querySelector('form').reset();",
-        "      var pills = addForm.querySelectorAll('.provider-pill');",
-        "      for(var i = 0; i < pills.length; i++) pills[i].classList.remove('active');",
-        "      var profileSelect = addForm.querySelector('#add-profile');",
+        "      const pills = addForm.querySelectorAll('.provider-pill');",
+        "      for(const pill of pills) pill.classList.remove('active');",
+        "      const profileSelect = addForm.querySelector('#add-profile');",
         "      if(profileSelect) profileSelect.disabled = false;",
         "    }",
         "  };",
-        // Insert or replace channel rows in the table. Always removes existing rows with the same key first (handles both edits and overrides of builtin channels).
-        // Uses the current table sort field and direction for correct insertion order.
-        "  window.insertChannelRow = function(html, key) {",
-        "    var tbody = document.querySelector('.channel-table tbody');",
-        "    var table = document.querySelector('.channel-table');",
-        "    if (!tbody || !html || !table) return;",
-        // Remove any existing rows with this key (edit or override of builtin).
-        "    var oldDisplay = document.getElementById('display-row-' + key);",
-        "    var oldEdit = document.getElementById('edit-row-' + key);",
-        "    if (oldEdit) oldEdit.remove();",
-        "    if (oldDisplay) oldDisplay.remove();",
-        // Create temporary container to parse HTML.
-        "    var temp = document.createElement('tbody');",
-        "    temp.innerHTML = html.displayRow + (html.editRow || '');",
-        "    var newDisplayRow = temp.firstElementChild;",
-        "    var newEditRow = temp.children[1] || null;",
-        // Find insertion point using current sort field and direction.
-        "    var sortField = table.getAttribute('data-sort-field') || 'name';",
-        "    var sortDir = table.getAttribute('data-sort-dir') || 'asc';",
-        "    var newVal = getSortValue(newDisplayRow, sortField);",
-        "    var rows = tbody.querySelectorAll('tr[id^=\"display-row-\"]');",
-        "    var inserted = false;",
-        "    for (var i = 0; i < rows.length; i++) {",
-        "      var rowVal = getSortValue(rows[i], sortField);",
-        "      var cmp = (sortDir === 'asc') ? (newVal < rowVal) : (newVal > rowVal);",
-        "      if (cmp) {",
-        "        tbody.insertBefore(newDisplayRow, rows[i]);",
-        "        if (newEditRow) tbody.insertBefore(newEditRow, rows[i]);",
-        "        inserted = true;",
-        "        break;",
-        "      }",
-        "    }",
-        "    if (!inserted) {",
-        "      tbody.appendChild(newDisplayRow);",
-        "      if (newEditRow) tbody.appendChild(newEditRow);",
-        "    }",
-        "    processChannelLogos();",
-        "  };",
-        // Remove channel rows from the table.
-        "  window.removeChannelRow = function(key) {",
-        "    var displayRow = document.getElementById('display-row-' + key);",
-        "    var editRow = document.getElementById('edit-row-' + key);",
-        "    if (displayRow) displayRow.remove();",
-        "    if (editRow) editRow.remove();",
-        "  };",
         // Advanced fields toggle for channel forms.
-        "  window.toggleAdvanced = function(prefix) {",
-        "    var fields = document.getElementById(prefix + '-advanced');",
-        "    var toggle = document.getElementById(prefix + '-toggle');",
-        "    if (fields && toggle) {",
-        "      if (fields.classList.contains('show')) {",
+        "  window.toggleAdvanced = (prefix) => {",
+        "    const fields = document.getElementById(prefix + '-advanced');",
+        "    const toggle = document.getElementById(prefix + '-toggle');",
+        "    if(fields && toggle) {",
+        "      if(fields.classList.contains('show')) {",
         "        fields.classList.remove('show');",
         "        toggle.textContent = '\\u25B6 Show Advanced Options';",
         "      } else {",
@@ -802,22 +763,22 @@ export function generateConfigSubtabScript() {
         "    }",
         "  };",
         // Profile reference toggle.
-        "  window.toggleProfileReference = function() {",
-        "    var ref = document.getElementById('profile-reference');",
-        "    if (ref) {",
+        "  window.toggleProfileReference = () => {",
+        "    const ref = document.getElementById('profile-reference');",
+        "    if(ref) {",
         "      ref.style.display = ref.style.display === 'none' ? 'block' : 'none';",
         "    }",
         "  };",
         // Inline cell editing for channel number and station ID. Clicking an editable cell replaces its content with a text input. Enter or blur saves the value
         // via the existing channel POST endpoint. Escape cancels and restores the original value. The cell's data attributes carry the field name, channel key, and
         // current value so the handler is generic across both fields.
-        "  window.startInlineEdit = function(td) {",
+        "  window.startInlineEdit = (td) => {",
         "    if(td.querySelector('input.inline-edit')) return;",
-        "    var field = td.getAttribute('data-field');",
-        "    var key = td.getAttribute('data-key');",
-        "    var value = td.getAttribute('data-value') || '';",
-        "    var original = td.innerHTML;",
-        "    var input = document.createElement('input');",
+        "    const field = td.getAttribute('data-field');",
+        "    const key = td.getAttribute('data-key');",
+        "    const value = td.getAttribute('data-value') || '';",
+        "    const original = td.innerHTML;",
+        "    const input = document.createElement('input');",
         "    input.type = (field === 'channelNumber') ? 'number' : 'text';",
         "    input.className = 'inline-edit';",
         "    input.value = value;",
@@ -825,52 +786,52 @@ export function generateConfigSubtabScript() {
         "    td.appendChild(input);",
         "    input.focus();",
         "    input.select();",
-        "    var saving = false;",
+        "    let saving = false;",
         "    async function save() {",
         "      if(saving) return;",
         "      saving = true;",
-        "      var newValue = input.value.trim();",
+        "      const newValue = input.value.trim();",
         "      if(newValue === value) { cancel(); return; }",
-        "      var data = { action: 'inline-edit', field: field, key: key, value: newValue };",
+        "      const data = { action: 'inline-edit', field: field, key: key, value: newValue };",
         "      try {",
-        "        var res = await fetch('/config/channels', {",
-        "          method: 'POST',",
-        "          headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
-        "          body: JSON.stringify(data)",
+        "        const res = await fetch('/config/channels', {",
+        "          body: JSON.stringify(data),",
+        "          headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },",
+        "          method: 'POST'",
         "        });",
-        "        var d = await res.json();",
+        "        const d = await res.json();",
         "        if(res.ok && d.success) {",
-        "          if(d.patch) { applyChannelPatch(d.patch); }",
+        "          if(d.patch) { channelTable.applyPatch(d.patch); }",
         "        } else {",
         "          td.innerHTML = original;",
         "          showToast(d.message || 'Failed to save.', 'error');",
         "        }",
         "      } catch(err) {",
-        "        console.error('Inline edit error:', err);",
+        "        console.error('Channel inline edit failed.', err);",
         "        td.innerHTML = original;",
         "        showToast('Failed to save: ' + err.message, 'error');",
         "      }",
         "    }",
         "    function cancel() { td.innerHTML = original; }",
-        "    input.addEventListener('keydown', function(e) {",
+        "    input.addEventListener('keydown', (e) => {",
         "      if(e.key === 'Enter') { e.preventDefault(); save(); }",
         "      else if(e.key === 'Escape') { cancel(); }",
         "    });",
-        "    input.addEventListener('blur', function() { if(!saving) save(); });",
+        "    input.addEventListener('blur', () => { if(!saving) save(); });",
         "  };",
         // Toggle HDHR lineup inclusion for a channel via inline checkbox. Uses the inline-edit endpoint with hdhrEnabled field.
-        "  window.toggleHdhr = async function(checkbox) {",
-        "    var key = checkbox.getAttribute('data-key');",
-        "    var value = checkbox.checked ? 'true' : 'false';",
+        "  window.toggleHdhr = async (checkbox) => {",
+        "    const key = checkbox.getAttribute('data-key');",
+        "    const value = checkbox.checked ? 'true' : 'false';",
         "    try {",
-        "      var res = await fetch('/config/channels', {",
-        "        method: 'POST',",
-        "        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
-        "        body: JSON.stringify({ action: 'inline-edit', field: 'hdhrEnabled', key: key, value: value })",
+        "      const res = await fetch('/config/channels', {",
+        "        body: JSON.stringify({ action: 'inline-edit', field: 'hdhrEnabled', key: key, value: value }),",
+        "        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },",
+        "        method: 'POST'",
         "      });",
-        "      var d = await res.json();",
+        "      const d = await res.json();",
         "      if(res.ok && d.success) {",
-        "        if(d.patch) { applyChannelPatch(d.patch); }",
+        "        if(d.patch) { channelTable.applyPatch(d.patch); }",
         "      } else {",
         "        checkbox.checked = !checkbox.checked;",
         "        showToast(d.message || 'Failed to update HDHR setting.', 'error');",
@@ -881,212 +842,294 @@ export function generateConfigSubtabScript() {
         "    }",
         "  };",
         // Submit channel form via AJAX (add or edit).
-        "  window.submitChannelForm = async function(event, action) {",
+        "  window.submitChannelForm = async (event, action) => {",
         "    event.preventDefault();",
-        "    var form = event.target;",
-        "    var formData = new FormData(form);",
-        "    var data = {};",
-        "    for (var pair of formData.entries()) { data[pair[0]] = pair[1]; }",
+        "    const form = event.target;",
+        "    const formData = new FormData(form);",
+        "    const data = {};",
+        "    for(const pair of formData.entries()) { data[pair[0]] = pair[1]; }",
         "    try {",
-        "      var res = await fetch('/config/channels', {",
-        "        method: 'POST',",
-        "        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
-        "        body: JSON.stringify(data)",
+        "      const res = await fetch('/config/channels', {",
+        "        body: JSON.stringify(data),",
+        "        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },",
+        "        method: 'POST'",
         "      });",
-        "      var d = await res.json();",
-        "      if (res.ok && d.success) {",
+        "      const d = await res.json();",
+        "      if(res.ok && d.success) {",
         "        showToast(d.message, 'success');",
-        "        if (d.patch) { applyChannelPatch(d.patch); }",
-        "        if (action === 'add') {",
+        "        if(d.patch) { channelTable.applyPatch(d.patch); }",
+        "        if(action === 'add') {",
         "          hideAddForm();",
+        "          if(d.serviceWarning) { showServiceFilterWarning(d.serviceWarning); }",
         "        } else {",
         "          hideEditForm(d.key);",
         "        }",
-        "      } else if (d.errors) {",
-        "        var errorMsgs = [];",
-        "        for (var field in d.errors) { errorMsgs.push(field + ': ' + d.errors[field]); }",
+        "      } else if(d.errors) {",
+        "        const errorMsgs = [];",
+        "        for(const [ field, message ] of Object.entries(d.errors)) { errorMsgs.push(field + ': ' + message); }",
         "        showToast('Validation errors: ' + errorMsgs.join(', '), 'error');",
         "      } else {",
         "        showToast(d.message || 'Failed to save channel.', 'error');",
         "      }",
         "    } catch(err) {",
-        "      console.error('Channel save error:', err);",
+        "      console.error('Channel save request failed.', err);",
         "      showToast('Failed to save channel: ' + err.message, 'error');",
         "    }",
         "    return false;",
         "  };",
         // Delete channel via AJAX.
-        "  window.deleteChannel = async function(key) {",
-        "    if (!confirm('Delete channel ' + key + '?')) return;",
+        "  window.deleteChannel = async (key) => {",
+        "    if(!confirm('Delete channel ' + key + '?')) return;",
         "    try {",
-        "      var res = await fetch('/config/channels', {",
-        "        method: 'POST',",
-        "        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
-        "        body: JSON.stringify({ action: 'delete', key: key })",
+        "      const res = await fetch('/config/channels', {",
+        "        body: JSON.stringify({ action: 'delete', key: key }),",
+        "        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },",
+        "        method: 'POST'",
         "      });",
-        "      var d = await res.json();",
-        "      if (res.ok && d.success) {",
+        "      const d = await res.json();",
+        "      if(res.ok && d.success) {",
         "        showToast(d.message, 'success');",
-        "        if (d.patch) { applyChannelPatch(d.patch); }",
+        "        if(d.patch) { channelTable.applyPatch(d.patch); }",
         "      } else {",
         "        showToast(d.message || 'Failed to delete channel.', 'error');",
         "      }",
         "    } catch(err) {",
-        "      console.error('Channel delete error:', err);",
+        "      console.error('Channel delete request failed.', err);",
         "      showToast('Failed to delete channel: ' + err.message, 'error');",
         "    }",
         "  };",
         // Toggle a single predefined channel's enabled/disabled state.
-        "  window.togglePredefinedChannel = async function(key, enable) {",
+        "  window.togglePredefinedChannel = async (key, enable) => {",
         "    try {",
-        "      var res = await fetch('/config/channels/toggle-predefined', {",
-        "        method: 'POST',",
+        "      const res = await fetch('/config/channels/toggle-predefined', {",
+        "        body: JSON.stringify({ key: key, enabled: enable }),",
         "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify({ key: key, enabled: enable })",
+        "        method: 'POST'",
         "      });",
-        "      var result = await res.json();",
-        "      if (result.success) {",
+        "      const result = await res.json();",
+        "      if(result.success) {",
         "        showToast('Channel ' + key + ' ' + (enable ? 'enabled' : 'disabled') + '.' + PLAYLIST_HINT, 'success');",
-        "        if(result.patch) { applyChannelPatch(result.patch); }",
+        "        if(result.patch) { channelTable.applyPatch(result.patch); }",
         "      } else {",
         "        showToast(result.error || 'Failed to toggle channel.', 'error');",
         "      }",
         "    } catch(err) {",
-        "      console.error('Channel toggle error:', err);",
+        "      console.error('Channel toggle request failed.', err);",
         "      showToast('Failed to toggle channel: ' + err.message, 'error');",
         "    }",
         "  };",
-        // Update a channel row's provider selection in-place. Syncs the HTML selected attribute so filterChannelRows() restore logic works correctly. We iterate
+        // Update a channel row's service selection in-place. Syncs the HTML selected attribute so channelTable.filter() restore logic works correctly. We iterate
         // _allOptions (if present) rather than querySelectorAll because filtered-out options are removed from the DOM but still tracked in the array.
-        "  function updateChannelProviderUI(channelKey, variant) {",
-        "    var row = document.getElementById('display-row-' + channelKey);",
-        "    if (!row) return;",
-        "    var sel = row.querySelector('.provider-select');",
-        "    if (!sel) return;",
+        "  function updateChannelServiceUI(channelKey, variant) {",
+        "    const row = document.getElementById('display-row-' + channelKey);",
+        "    if(!row) return;",
+        "    const sel = row.querySelector('.provider-select');",
+        "    if(!sel) return;",
         "    sel.value = variant;",
-        "    var allOpts = sel._allOptions || Array.prototype.slice.call(sel.querySelectorAll('option'));",
-        "    for (var oi = 0; oi < allOpts.length; oi++) {",
-        "      if (allOpts[oi].value === variant) { allOpts[oi].setAttribute('selected', ''); }",
-        "      else { allOpts[oi].removeAttribute('selected'); }",
+        "    const allOpts = sel._allOptions || [...sel.querySelectorAll('option')];",
+        "    for(const opt of allOpts) {",
+        "      if(opt.value === variant) { opt.setAttribute('selected', ''); }",
+        "      else { opt.removeAttribute('selected'); }",
         "    }",
         "  }",
-        // Update provider selection for a multi-provider channel.
-        "  window.updateProviderSelection = async function(selectElement) {",
-        "    var channelKey = selectElement.getAttribute('data-channel');",
-        "    var providerKey = selectElement.value;",
+        // Update service selection for a multi-service channel.
+        "  window.updateServiceSelection = async (selectElement) => {",
+        "    const channelKey = selectElement.getAttribute('data-channel');",
+        "    const serviceKey = selectElement.value;",
         "    try {",
-        "      var res = await fetch('/config/provider', {",
-        "        method: 'POST',",
+        "      const res = await fetch('/config/service', {",
+        "        body: JSON.stringify({ channel: channelKey, service: serviceKey }),",
         "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify({ channel: channelKey, provider: providerKey })",
+        "        method: 'POST'",
         "      });",
-        "      var result = await res.json();",
-        "      if (result.success) {",
-        "        showToast('Provider updated. New streams will use the selected provider.', 'success');",
-        "        if (result.patch) { applyChannelPatch(result.patch); }",
+        "      const result = await res.json();",
+        "      if(result.success) {",
+        "        showToast('Service updated. New streams will use the selected service.', 'success');",
+        "        if(result.patch) { channelTable.applyPatch(result.patch); }",
         "      } else {",
-        "        showToast(result.error || 'Failed to update provider.', 'error');",
+        "        showToast(result.error || 'Failed to update service.', 'error');",
         "      }",
         "    } catch(err) {",
-        "      console.error('Provider update error:', err);",
-        "      showToast('Failed to update provider: ' + err.message, 'error');",
+        "      console.error('Service selection update failed.', err);",
+        "      showToast('Failed to update service: ' + err.message, 'error');",
         "    }",
         "  };",
         // Bulk toggle predefined channels by scope (all, pacific, east).
-        "  window.bulkTogglePredefined = async function(enable, scope) {",
+        "  window.bulkTogglePredefined = async (enable, scope) => {",
         "    try {",
-        "      var res = await fetch('/config/channels/bulk-toggle-predefined', {",
-        "        method: 'POST',",
+        "      const res = await fetch('/config/channels/bulk-toggle-predefined', {",
+        "        body: JSON.stringify({ enabled: enable, scope: scope }),",
         "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify({ enabled: enable, scope: scope })",
+        "        method: 'POST'",
         "      });",
-        "      var result = await res.json();",
-        "      if (result.success) {",
-        "        var labels = { all: 'All predefined', pacific: 'Pacific predefined', east: 'East predefined' };",
+        "      const result = await res.json();",
+        "      if(result.success) {",
+        "        const labels = { all: 'All predefined', pacific: 'Pacific predefined', east: 'East predefined' };",
         "        showToast((labels[scope] || 'Predefined') + ' channels ' + (enable ? 'enabled' : 'disabled') + '.' + PLAYLIST_HINT, 'success');",
-        "        if (result.patch) { applyChannelPatch(result.patch); }",
+        "        if(result.patch) { channelTable.applyPatch(result.patch); }",
         "      } else {",
         "        showToast(result.error || 'Failed to toggle channels.', 'error');",
         "      }",
         "    } catch(err) {",
-        "      console.error('Bulk toggle error:', err);",
+        "      console.error('Bulk channel toggle failed.', err);",
         "      showToast('Failed to toggle channels: ' + err.message, 'error');",
         "    }",
         "  };",
         // Auto-number visible channels sequentially based on the current sort order. Reads the starting number from the input in the Quick Actions dropdown. When
         // the input is empty, clears all channel numbers from visible channels instead of assigning them.
-        "  window.autoNumberChannels = async function() {",
-        "    var startInput = document.getElementById('auto-number-start');",
-        "    var raw = startInput ? startInput.value.trim() : '1';",
-        "    var clear = (raw === '');",
-        "    var start = clear ? 0 : parseInt(raw, 10);",
+        "  window.autoNumberChannels = async () => {",
+        "    const startInput = document.getElementById('auto-number-start');",
+        "    const raw = startInput ? startInput.value.trim() : '1';",
+        "    const clear = (raw === '');",
+        "    let start = clear ? 0 : parseInt(raw, 10);",
         "    if(!clear && (isNaN(start) || (start < 1))) start = 1;",
-        "    var table = document.querySelector('.channel-table');",
-        "    var sortField = table ? (table.getAttribute('data-sort-field') || 'name') : 'name';",
-        "    var sortDir = table ? (table.getAttribute('data-sort-dir') || 'asc') : 'asc';",
-        "    var msg = clear ? 'Clear channel numbers from all visible channels?' " +
+        "    const table = document.querySelector('.channel-table');",
+        "    const sortField = table ? (table.getAttribute('data-sort-field') || 'name') : 'name';",
+        "    const sortDir = table ? (table.getAttribute('data-sort-dir') || 'asc') : 'asc';",
+        "    const msg = clear ? 'Clear channel numbers from all visible channels?' " +
             ": 'Assign channel numbers starting from ' + start + ' to all visible channels in the current sort order? This will overwrite existing numbers.';",
         "    if(!confirm(msg)) return;",
         "    try {",
-        "      var res = await fetch('/config/channels/auto-number', {",
-        "        method: 'POST',",
+        "      const res = await fetch('/config/channels/auto-number', {",
+        "        body: JSON.stringify({ start: start, sortField: sortField, sortDirection: sortDir }),",
         "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify({ start: start, sortField: sortField, sortDirection: sortDir })",
+        "        method: 'POST'",
         "      });",
-        "      var result = await res.json();",
+        "      const result = await res.json();",
         "      if(result.success) {",
         "        showToast(result.message || 'Channels numbered.', 'success');",
-        "        if(result.patch) { applyChannelPatch(result.patch); }",
+        "        if(result.patch) { channelTable.applyPatch(result.patch); }",
         "      } else {",
         "        showToast(result.error || 'Failed to auto-number channels.', 'error');",
         "      }",
         "    } catch(err) {",
-        "      console.error('Auto-number error:', err);",
+        "      console.error('Channel auto-numbering failed.', err);",
         "      showToast('Failed to auto-number channels: ' + err.message, 'error');",
         "    }",
         "  };",
         // Bulk toggle HDHR lineup inclusion for all visible channels. The tri-state checkbox calls this on click: from checked (all enabled) it disables all; from
         // unchecked or indeterminate it enables all.
-        "  window.bulkToggleHdhr = async function() {",
-        "    var toggle = document.getElementById('hdhr-bulk-toggle');",
+        "  window.bulkToggleHdhr = async () => {",
+        "    const toggle = document.getElementById('hdhr-bulk-toggle');",
         "    if(!toggle) return;",
-        "    var enable = !toggle.checked;",
-        "    var msg = enable ? 'Include all visible channels in the HDHomeRun/Plex lineup?' : 'Exclude all visible channels from the HDHomeRun/Plex lineup?';",
+        "    const enable = !toggle.checked;",
+        "    const msg = enable ? 'Include all visible channels in the HDHomeRun/Plex lineup?' : 'Exclude all visible channels from the HDHomeRun/Plex lineup?';",
         "    if(!confirm(msg)) return;",
         "    try {",
-        "      var res = await fetch('/config/channels/hdhr-bulk', {",
-        "        method: 'POST',",
+        "      const res = await fetch('/config/channels/hdhr-bulk', {",
+        "        body: JSON.stringify({ enable: enable }),",
         "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify({ enable: enable })",
+        "        method: 'POST'",
         "      });",
-        "      var result = await res.json();",
+        "      const result = await res.json();",
         "      if(result.success) {",
         "        showToast(result.message || 'HDHR settings updated.', 'success');",
-        "        if(result.patch) { applyChannelPatch(result.patch); }",
+        "        if(result.patch) { channelTable.applyPatch(result.patch); }",
         "      } else {",
         "        showToast(result.error || 'Failed to update HDHR settings.', 'error');",
         "      }",
         "    } catch(err) {",
-        "      console.error('HDHR bulk toggle error:', err);",
+        "      console.error('HDHR bulk toggle failed.', err);",
         "      showToast('Failed to update HDHR settings: ' + err.message, 'error');",
         "    }",
         "  };",
+        // Bulk add or remove a tag on all visible channels. The add parameter controls the direction: true adds the tag, false removes it. The tristate checkbox in
+        // Quick Actions calls this on click — from checked (all have tag) it removes; from unchecked or indeterminate it adds. Uses applyTagResponse (defined in
+        // channels.ts, exposed on window) to update the tag manager modal, filter dropdown, and channel table in one call.
+        "  window.bulkToggleTag = async (tag, add) => {",
+        "    try {",
+        "      const res = await fetch('/config/channels/bulk-tags', {",
+        "        body: JSON.stringify({ action: add ? 'add' : 'remove', tag: tag }),",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        method: 'POST'",
+        "      });",
+        "      const result = await res.json();",
+        "      if(result.success) {",
+        "        if(window.applyTagResponse) { window.applyTagResponse(result, result.message || 'Tags updated.'); }",
+        "      } else {",
+        "        showToast(result.error || 'Failed to update tags.', 'error');",
+        "      }",
+        "    } catch(err) {",
+        "      console.error('Bulk tag update failed.', err);",
+        "      showToast('Failed to update tags: ' + err.message, 'error');",
+        "    }",
+        "  };",
+        // Inline tag edit portal — uses toggleDropdown with lifecycle hooks for batch-save behavior. The before-close hook saves pending changes whenever the
+        // dropdown closes (click-outside, scroll, resize, or next toggle). The onOpen hook populates checkbox state from the cell's data-tags attribute.
+        "  let activeTagDropdown = null;",
+        "  let tagPortal = null;",
+        "  function getTagPortal() {",
+        "    if(!tagPortal) { tagPortal = document.getElementById('inline-tag-portal'); }",
+        "    return tagPortal;",
+        "  }",
+        "  async function saveTagDropdownIfChanged() {",
+        "    if(!activeTagDropdown) return;",
+        "    const portal = getTagPortal();",
+        "    if(!portal) return;",
+        "    const original = activeTagDropdown.original;",
+        "    const key = activeTagDropdown.key;",
+        "    const checkboxes = portal.querySelectorAll('.inline-tag-checkbox');",
+        "    const tags = [];",
+        "    for(const checkbox of checkboxes) {",
+        "      if(checkbox.checked) tags.push(checkbox.getAttribute('data-tag'));",
+        "    }",
+        "    const newValue = tags.toSorted().join(',');",
+        "    activeTagDropdown = null;",
+        "    if(newValue === original) return;",
+        "    try {",
+        "      const res = await fetch('/config/channels', {",
+        "        body: JSON.stringify({ action: 'inline-edit', field: 'tags', key, value: newValue }),",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        method: 'POST'",
+        "      });",
+        "      const d = await res.json();",
+        "      if(d.success && d.patch) { channelTable.applyPatch(d.patch); }",
+        "      else if(!d.success) { showToast(d.message || 'Failed to update tags.', 'error'); }",
+        "    } catch(err) {",
+        "      console.error('Tag edit failed to persist.', err);",
+        "      showToast('Failed to update tags: ' + err.message, 'error');",
+        "    }",
+        "  }",
+        // Register the batch-save hook so all close paths (click-outside, scroll, resize, next toggle) trigger save.
+        "  dropdowns.addHook(saveTagDropdownIfChanged);",
+        "  window.toggleInlineTagDropdown = (td) => {",
+        "    const portal = getTagPortal();",
+        "    if(!portal) return;",
+        "    const isOpen = activeTagDropdown && (activeTagDropdown.td === td);",
+        "    dropdowns.close();",
+        "    if(isOpen) return;",
+        // Populate checkbox state from the cell's data-tags attribute, then toggle the dropdown with the shared portal positioning.
+        "    const currentTags = (td.getAttribute('data-tags') || '').split(',').filter((t) => t.length > 0);",
+        "    const tagSet = {};",
+        "    for(const currentTag of currentTags) tagSet[currentTag] = true;",
+        "    const checkboxes = portal.querySelectorAll('.inline-tag-checkbox');",
+        "    for(const checkbox of checkboxes) {",
+        "      checkbox.checked = !!tagSet[checkbox.getAttribute('data-tag')];",
+        "    }",
+        "    toggleDropdown(td, { menu: portal });",
+        "    activeTagDropdown = { key: td.getAttribute('data-key'), original: currentTags.toSorted().join(','), td };",
+        "  };",
+        // Collect checked tag checkboxes into the hidden tags input for form submission. Called when any tag checkbox changes in the channel edit form.
+        "  window.updateTagsHidden = (formRow) => {",
+        "    const checkboxes = formRow.querySelectorAll('.tag-checkbox:checked');",
+        "    const tags = [];",
+        "    for(const checkbox of checkboxes) tags.push(checkbox.getAttribute('data-tag'));",
+        "    const hidden = formRow.querySelector('input[type=\"hidden\"][name=\"tags\"]');",
+        "    if(hidden) hidden.value = tags.toSorted().join(', ');",
+        "  };",
         // Revert a channel override back to predefined defaults.
-        "  window.revertChannel = async function(key) {",
-        "    if (!confirm('Revert channel ' + key + ' to predefined defaults?')) return;",
+        "  window.revertChannel = async (key) => {",
+        "    if(!confirm('Revert channel ' + key + ' to predefined defaults?')) return;",
         "    try {",
-        "      var res = await fetch('/config/channels', {",
-        "        method: 'POST',",
-        "        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
-        "        body: JSON.stringify({ action: 'revert', key: key })",
+        "      const res = await fetch('/config/channels', {",
+        "        body: JSON.stringify({ action: 'revert', key: key }),",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        method: 'POST'",
         "      });",
-        "      var d = await res.json();",
-        "      if (res.ok && d.success) {",
+        "      const d = await res.json();",
+        "      if(res.ok && d.success) {",
         "        showToast(d.message, 'success');",
-        "        if (d.html) {",
-        "          insertChannelRow(d.html, d.key || key);",
-        "          refilterChannelRows();",
-        "        }",
+        "        if(d.patch) { channelTable.applyPatch(d.patch); }",
         "      } else {",
         "        showToast(d.message || 'Failed to revert channel.', 'error');",
         "      }",
@@ -1094,198 +1137,137 @@ export function generateConfigSubtabScript() {
         "      showToast('Failed to revert channel: ' + err.message, 'error');",
         "    }",
         "  };",
-        // Save the provider filter to the server and update the UI on success.
-        "  async function saveProviderFilter(enabledTags) {",
+        // Save the service filter to the server and update the UI on success.
+        "  async function saveServiceFilter(enabledTags) {",
         "    try {",
-        "      var r = await fetch('/config/provider-filter', {",
-        "        method: 'POST',",
+        "      const r = await fetch('/config/service-filter', {",
+        "        body: JSON.stringify({ enabledServices: enabledTags }),",
         "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify({ enabledProviders: enabledTags })",
+        "        method: 'POST'",
         "      });",
-        "      var result = await r.json();",
-        "      if (result.success) {",
-        "        updateProviderChips(enabledTags);",
-        "        filterChannelRows(enabledTags);",
+        "      const result = await r.json();",
+        "      if(result.success) {",
+        "        updateServiceChips(enabledTags);",
+        "        channelTable.filter(enabledTags);",
         "        updateBulkAssignOptions(enabledTags);",
-        "        updateProviderFilterButton(enabledTags);",
-        "        if(result.patch) { applyChannelPatch(result.patch); }",
-        "        showToast('Provider filter updated.' + PLAYLIST_HINT, 'success');",
+        "        updateServiceFilterButton(enabledTags);",
+        "        if(result.patch) { channelTable.applyPatch(result.patch); }",
+        "        showToast('Service filter updated.' + PLAYLIST_HINT, 'success');",
         "      }",
         "    } catch(err) {",
-        "      console.error('Provider filter error:', err);",
+        "      console.error('Service filter update failed.', err);",
         "      showToast('Failed to update filter: ' + err.message, 'error');",
         "    }",
         "  };",
-        // Provider filter: toggle a provider tag on/off.
-        "  window.toggleProviderTag = function(checkbox) {",
-        "    var menu = checkbox.closest('.provider-dropdown-menu');",
-        "    if (!menu) return;",
-        "    var checkboxes = menu.querySelectorAll('input[type=\"checkbox\"]:not(:disabled)');",
-        "    var enabledTags = [];",
-        "    for (var i = 0; i < checkboxes.length; i++) {",
-        "      if (checkboxes[i].checked) enabledTags.push(checkboxes[i].getAttribute('data-tag'));",
-        "    }",
-        // If all checkboxes are checked, clear the filter (empty array = no filter).
-        "    var allCheckboxes = menu.querySelectorAll('input[type=\"checkbox\"]');",
-        "    var allChecked = true;",
-        "    for (var j = 0; j < allCheckboxes.length; j++) {",
-        "      if (!allCheckboxes[j].checked && !allCheckboxes[j].disabled) { allChecked = false; break; }",
-        "    }",
-        "    if (allChecked) enabledTags = [];",
-        "    saveProviderFilter(enabledTags);",
+        // Show a toast warning when a newly added channel's service isn't in the active filter. Offers a one-click action to enable the service tag.
+        "  function showServiceFilterWarning(warning) {",
+        "    showToast(warning.serviceLabel + ' is not in your active service filter. Channels won\\'t appear in the playlist until enabled.', 'warning', 10000,",
+        "      { label: 'Enable ' + warning.serviceLabel, onclick: () => { enableServiceInFilter(warning.serviceTag); } });",
+        "  }",
+        // Enable a service tag in the filter by adding it to the current set and saving. Called by the service filter warning toast action button.
+        "  async function enableServiceInFilter(tag) {",
+        "    const chips = document.querySelectorAll('#provider-chips .provider-chip[data-tag]');",
+        "    const enabledTags = [];",
+        "    for(const chip of chips) { enabledTags.push(chip.getAttribute('data-tag')); }",
+        "    if(!enabledTags.includes(tag)) { enabledTags.push(tag); }",
+        "    await saveServiceFilter(enabledTags);",
+        "  }",
+        // Service filter: toggle a service tag on/off. The checkbox change has already been applied to the DOM, so getEnabledFilterTags() reads the new state directly.
+        "  window.toggleServiceTag = (checkbox) => {",
+        "    saveServiceFilter(channelTable.getEnabledFilterTags());",
         "  };",
-        // Remove a provider chip (uncheck the tag and update). Orphaned tags (no checkbox in the dropdown) are removed by rebuilding the list from the remaining chips.
-        "  window.removeProviderChip = function(tag) {",
-        "    var menu = document.querySelector('.provider-dropdown-menu');",
-        "    if (!menu) return;",
-        "    var cb = menu.querySelector('input[data-tag=\"' + tag + '\"]');",
-        "    if (cb) { cb.checked = false; toggleProviderTag(cb); return; }",
-        // No checkbox exists for this tag — it is an orphaned entry with no corresponding provider. Build the enabled list from the remaining chips and POST directly.
-        "    var chips = document.querySelectorAll('#provider-chips .provider-chip[data-tag]');",
-        "    var enabledTags = [];",
-        "    for (var i = 0; i < chips.length; i++) {",
-        "      var ct = chips[i].getAttribute('data-tag');",
-        "      if (ct && ct !== tag) enabledTags.push(ct);",
-        "    }",
-        "    saveProviderFilter(enabledTags);",
+        // Remove a service chip (uncheck the tag and update). Orphaned tags (no checkbox in the dropdown) are removed by rebuilding the list from the remaining chips.
+        "  window.removeServiceChip = (tag) => {",
+        "    const menu = document.querySelector('.provider-dropdown-menu');",
+        "    if(!menu) return;",
+        "    const cb = menu.querySelector('input[data-tag=\"' + tag + '\"]');",
+        "    if(cb) { cb.checked = false; toggleServiceTag(cb); return; }",
+        // No checkbox exists for this tag — it is an orphaned entry with no corresponding service. Build the enabled list from the remaining chips and POST directly.
+        "    const chips = document.querySelectorAll('#provider-chips .provider-chip[data-tag]');",
+        "    const enabledTags = [];",
+        "    for(const chip of chips) {",
+        "      const ct = chip.getAttribute('data-tag');",
+        "      if(ct && (ct !== tag)) enabledTags.push(ct);",
+        "    }",
+        "    saveServiceFilter(enabledTags);",
         "  };",
-        // Update the provider filter button text.
-        "  function updateProviderFilterButton(enabledTags) {",
-        "    var btn = document.getElementById('provider-filter-btn');",
-        "    if (!btn) return;",
-        "    btn.innerHTML = (enabledTags.length > 0) ? 'Filtered &#9662;' : 'All Providers &#9662;';",
+        // Update the service filter button text. The filter icon SVG is inlined here because this runs client-side where the server's icon module is not available.
+        "  const filterIcon = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" " +
+            "stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1 2h14l-5 6v5l-4 2V8z\"/></svg>';",
+        "  function updateServiceFilterButton(enabledTags) {",
+        "    const btn = document.getElementById('provider-filter-btn');",
+        "    if(!btn) return;",
+        "    const label = (enabledTags.length > 0) ? 'Filtered' : 'All Services';",
+        "    btn.innerHTML = filterIcon + ' ' + label + ' &#9662;';",
         "  };",
-        // Rebuild the provider chips from the enabled tags.
-        "  function updateProviderChips(enabledTags) {",
-        "    var container = document.getElementById('provider-chips');",
-        "    if (!container) return;",
+        // Rebuild the service chips from the enabled tags.
+        "  function updateServiceChips(enabledTags) {",
+        "    const container = document.getElementById('provider-chips');",
+        "    if(!container) return;",
         "    container.innerHTML = '';",
-        "    if (enabledTags.length === 0) return;",
-        "    var menu = document.querySelector('.provider-dropdown-menu');",
-        "    for (var i = 0; i < enabledTags.length; i++) {",
-        "      var tag = enabledTags[i];",
-        "      if (tag === 'direct') continue;",
-        "      var label = tag;",
-        "      var chipDomain = '';",
-        "      var chipIconUrl = '';",
-        "      if (menu) {",
-        "        var cb = menu.querySelector('input[data-tag=\"' + tag + '\"]');",
-        "        if (cb && cb.parentElement) {",
+        "    if(enabledTags.length === 0) return;",
+        "    const menu = document.querySelector('.provider-dropdown-menu');",
+        "    for(const tag of enabledTags) {",
+        "      if(tag === 'direct') continue;",
+        "      let label = tag;",
+        "      let chipDomain = '';",
+        "      let chipIconUrl = '';",
+        "      if(menu) {",
+        "        const cb = menu.querySelector('input[data-tag=\"' + tag + '\"]');",
+        "        if(cb && cb.parentElement) {",
         "          label = cb.parentElement.textContent.trim();",
-        "          var pd = cb.parentElement.querySelector('.provider-display');",
-        "          if (pd) {",
+        "          const pd = cb.parentElement.querySelector('.provider-display');",
+        "          if(pd) {",
         "            chipDomain = pd.getAttribute('data-domain') || '';",
         "            chipIconUrl = pd.getAttribute('data-icon-url') || '';",
         "          }",
         "        }",
         "      }",
-        "      var chip = document.createElement('span');",
+        "      const chip = document.createElement('span');",
         "      chip.className = 'provider-chip';",
         "      chip.setAttribute('data-tag', tag);",
-        "      var domainAttr = chipDomain ? ' data-domain=\"' + chipDomain + '\"' : '';",
-        "      var iconAttr = chipIconUrl ? ' data-icon-url=\"' + chipIconUrl + '\"' : '';",
+        "      const domainAttr = chipDomain ? ' data-domain=\"' + chipDomain + '\"' : '';",
+        "      const iconAttr = chipIconUrl ? ' data-icon-url=\"' + chipIconUrl + '\"' : '';",
         "      chip.innerHTML = '<span class=\"provider-display\"' + domainAttr + iconAttr + ' data-sm>' + label + '</span>' +",
         "        '<button type=\"button\" class=\"chip-close\" aria-label=\"Remove ' + label +",
-        "        '\" onclick=\"removeProviderChip(\\'' + tag + '\\')\">\\u00d7</button>';",
+        "        '\" onclick=\"removeServiceChip(\\'' + tag + '\\')\">\\u00d7</button>';",
         "      container.appendChild(chip);",
         "    }",
-        "    processProviderDisplays();",
+        "    processServiceDisplays();",
         "  };",
-        // Filter channel rows based on enabled provider tags. Toggles the channel-unavailable class on each row and updates Source column content. Filtered-out options
-        // are removed from the DOM entirely rather than hidden — Safari ignores both the hidden attribute and display:none on option elements because they are rendered by
-        // the OS native widget. All options (visible and removed) are stored in a _allOptions array on each select for reinsertion when the filter changes. Selection
-        // restore priority: (1) the saved choice (HTML selected attribute, kept in sync by updateProviderSelection), (2) the previous visual selection, (3) first option.
-        "  function filterChannelRows(enabledTags) {",
-        "    var rows = document.querySelectorAll('tr[data-provider-tags]');",
-        "    for (var i = 0; i < rows.length; i++) {",
-        "      var tags = rows[i].getAttribute('data-provider-tags').split(',');",
-        "      var available = true;",
-        "      if (enabledTags.length > 0) {",
-        "        available = false;",
-        "        for (var j = 0; j < tags.length; j++) {",
-        "          if (tags[j] === 'direct' || enabledTags.indexOf(tags[j]) !== -1) { available = true; break; }",
-        "        }",
-        "      }",
-        "      if (available) { rows[i].classList.remove('channel-unavailable'); }",
-        "      else { rows[i].classList.add('channel-unavailable'); }",
-        // Update Source column elements: toggle between the no-provider label and the provider content (select or static name).
-        "      var label = rows[i].querySelector('.no-provider-label');",
-        "      var sel = rows[i].querySelector('.provider-select');",
-        "      var name = rows[i].querySelector('.provider-name');",
-        "      if (label) label.style.display = available ? 'none' : '';",
-        "      if (name) name.style.display = available ? '' : 'none';",
-        "      if (sel) {",
-        "        sel.style.display = available ? '' : 'none';",
-        // On first call, snapshot all options (including server-hidden ones) into a persistent array.
-        "        if (!sel._allOptions) { sel._allOptions = Array.prototype.slice.call(sel.querySelectorAll('option')); }",
-        "        var prevValue = sel.value;",
-        "        sel.innerHTML = '';",
-        "        var serverDefault = null;",
-        "        var prevExists = false;",
-        "        for (var k = 0; k < sel._allOptions.length; k++) {",
-        "          var opt = sel._allOptions[k];",
-        "          var oTag = opt.getAttribute('data-provider-tag');",
-        "          var show = (enabledTags.length === 0) || oTag === 'direct' || enabledTags.indexOf(oTag) !== -1;",
-        "          if (show) {",
-        "            sel.appendChild(opt);",
-        "            if (opt.hasAttribute('selected')) serverDefault = opt;",
-        "            if (opt.value === prevValue) prevExists = true;",
-        "          }",
-        "        }",
-        "        if (serverDefault) { sel.value = serverDefault.value; }",
-        "        else if (prevExists) { sel.value = prevValue; }",
-        "        else if (sel.options.length > 0) { sel.selectedIndex = 0; }",
-        "      }",
-        "    }",
-        "  };",
-        // Re-run the provider filter on all channel rows using the current checkbox state. Called after insertChannelRow replaces a row (which loses the filter state).
-        "  function refilterChannelRows() {",
-        "    var menu = document.querySelector('.provider-dropdown-menu');",
-        "    if (!menu) return;",
-        "    var cbs = menu.querySelectorAll('input[type=\"checkbox\"]:not(:disabled)');",
-        "    var enabledTags = [];",
-        "    var allChecked = true;",
-        "    for (var i = 0; i < cbs.length; i++) {",
-        "      if (cbs[i].checked) { enabledTags.push(cbs[i].getAttribute('data-tag')); }",
-        "      else { allChecked = false; }",
-        "    }",
-        "    if (allChecked) { enabledTags = []; }",
-        "    if (enabledTags.length > 0) { filterChannelRows(enabledTags); }",
-        "  }",
-        // Update bulk assign options in the Quick Actions select to only show enabled providers. Toggles the hidden attribute on option elements based on the filter.
+        // Update bulk assign options in the Quick Actions select to only show enabled services. Toggles the hidden attribute on option elements based on the filter.
         "  function updateBulkAssignOptions(enabledTags) {",
-        "    var select = document.getElementById('bulk-assign-select');",
+        "    const select = document.getElementById('bulk-assign-select');",
         "    if(!select) return;",
-        "    var options = select.querySelectorAll('option[data-provider-tag]');",
-        "    for(var i = 0; i < options.length; i++) {",
-        "      var tag = options[i].getAttribute('data-provider-tag');",
-        "      var show = (enabledTags.length === 0) || (tag === 'direct') || (enabledTags.indexOf(tag) !== -1);",
-        "      if(show) options[i].removeAttribute('hidden');",
-        "      else options[i].setAttribute('hidden', '');",
+        "    const options = select.querySelectorAll('option[data-provider-tag]');",
+        "    for(const option of options) {",
+        "      const tag = option.getAttribute('data-provider-tag');",
+        "      const show = (enabledTags.length === 0) || (tag === 'direct') || enabledTags.includes(tag);",
+        "      if(show) option.removeAttribute('hidden');",
+        "      else option.setAttribute('hidden', '');",
         "    }",
         "  };",
-        // Bulk assign all channels to a specific provider. Updates all dropdowns and profile cells in-place.
-        "  window.bulkAssignProvider = async function(providerTag) {",
-        "    if (!providerTag) return;",
+        // Bulk assign all channels to a specific service. Updates all dropdowns and profile cells in-place.
+        "  window.bulkAssignService = async (serviceTag) => {",
+        "    if(!serviceTag) return;",
         "    try {",
-        "      var r = await fetch('/config/provider-bulk-assign', {",
-        "        method: 'POST',",
+        "      const r = await fetch('/config/service-bulk-assign', {",
+        "        body: JSON.stringify({ service: serviceTag }),",
         "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify({ provider: providerTag })",
+        "        method: 'POST'",
         "      });",
-        "      var result = await r.json();",
-        "      if (result.success) {",
-        "        var msg = result.affected + ' of ' + result.total + ' channel(s) updated.';",
-        "        var undoAction = null;",
-        "        if (result.affected > 0 && result.previousSelections) {",
-        "          var prevSelections = result.previousSelections;",
-        "          undoAction = { label: 'Undo', onclick: function() { restoreBulkProviders(prevSelections); } };",
+        "      const result = await r.json();",
+        "      if(result.success) {",
+        "        const msg = result.affected + ' of ' + result.total + ' channel(s) updated.';",
+        "        let undoAction = null;",
+        "        if((result.affected > 0) && result.previousSelections) {",
+        "          const prevSelections = result.previousSelections;",
+        "          undoAction = { label: 'Undo', onclick: () => { restoreBulkServices(prevSelections); } };",
         "        }",
         "        showToast(msg, 'success', undoAction ? 10000 : undefined, undoAction);",
-        "        if (result.selections) {",
-        "          for (var key in result.selections) {",
-        "            var sel = result.selections[key];",
-        "            updateChannelProviderUI(key, sel.variant);",
+        "        if(result.selections) {",
+        "          for(const [ key, sel ] of Object.entries(result.selections)) {",
+        "            updateChannelServiceUI(key, sel.variant);",
         "          }",
         "        }",
         "      } else {",
@@ -1295,21 +1277,20 @@ export function generateConfigSubtabScript() {
         "      showToast('Failed to assign: ' + err.message, 'error');",
         "    }",
         "  };",
-        // Restore previous provider selections (undo bulk assign). Sends the previousSelections map to the server and updates the UI with the restored selections.
-        "  async function restoreBulkProviders(prevSelections) {",
+        // Restore previous service selections (undo bulk assign). Sends the previousSelections map to the server and updates the UI with the restored selections.
+        "  async function restoreBulkServices(prevSelections) {",
         "    try {",
-        "      var r = await fetch('/config/provider-bulk-restore', {",
-        "        method: 'POST',",
+        "      const r = await fetch('/config/service-bulk-restore', {",
+        "        body: JSON.stringify({ selections: prevSelections }),",
         "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify({ selections: prevSelections })",
+        "        method: 'POST'",
         "      });",
-        "      var result = await r.json();",
-        "      if (result.success) {",
+        "      const result = await r.json();",
+        "      if(result.success) {",
         "        showToast('Bulk assign reverted.', 'success');",
-        "        if (result.selections) {",
-        "          for (var key in result.selections) {",
-        "            var sel = result.selections[key];",
-        "            updateChannelProviderUI(key, sel.variant);",
+        "        if(result.selections) {",
+        "          for(const [ key, sel ] of Object.entries(result.selections)) {",
+        "            updateChannelServiceUI(key, sel.variant);",
         "          }",
         "        }",
         "      } else {",
@@ -1321,191 +1302,115 @@ export function generateConfigSubtabScript() {
         "  }",
         // Close dropdowns when clicking outside. After portaling, menus live on <body> outside .dropdown containers, so we also check .dropdown-menu to prevent
         // clicks on menu items (like column picker checkboxes) from triggering close.
-        "  document.addEventListener('click', function(e) {",
-        "    if (!e.target.closest('.dropdown') && !e.target.closest('.dropdown-menu')) closeDropdowns();",
+        "  document.addEventListener('click', (e) => {",
+        "    if(!e.target.closest('.dropdown') && !e.target.closest('.dropdown-menu')) dropdowns.close();",
         "  });",
-        // Copy a stream URL to the clipboard and show a toast notification. The type parameter selects HLS or MPEG-TS format. Uses the modern Clipboard API when
-        // available (secure contexts), falling back to execCommand for plain HTTP access via IP address.
-        "  window.copyStreamUrl = async function(type, key) {",
-        "    closeDropdowns();",
-        "    var url = (type === 'hls') ? (location.origin + '/hls/' + key + '/stream.m3u8') : (location.origin + '/stream/' + key);",
-        "    if (navigator.clipboard && navigator.clipboard.writeText) {",
-        "      try {",
-        "        await navigator.clipboard.writeText(url);",
-        "        showToast('Stream URL copied to clipboard.', 'success');",
-        "      } catch(err) {",
-        "        showToast('Failed to copy URL.', 'error');",
-        "      }",
-        "    } else {",
-        "      var ta = document.createElement('textarea');",
-        "      ta.value = url;",
-        "      ta.style.position = 'fixed';",
-        "      ta.style.opacity = '0';",
-        "      document.body.appendChild(ta);",
-        "      ta.select();",
-        "      try { document.execCommand('copy'); showToast('Stream URL copied to clipboard.', 'success'); }",
-        "      catch(e) { showToast('Failed to copy URL.', 'error'); }",
-        "      document.body.removeChild(ta);",
-        "    }",
+        // Copy a stream URL to the clipboard. The type parameter selects HLS or MPEG-TS format. Delegates to the shared copyToClipboard utility.
+        "  window.copyStreamUrl = (type, key) => {",
+        "    dropdowns.close();",
+        "    const url = (type === 'hls') ? (location.origin + '/hls/' + key + '/stream.m3u8') : (location.origin + '/stream/' + key);",
+        "    copyToClipboard(url, 'Stream URL copied to clipboard.');",
         "  };",
         // Toggle visibility of disabled predefined channels and persist preference.
-        "  window.toggleDisabledVisibility = function() {",
-        "    var table = document.querySelector('.channel-table');",
-        "    var checkbox = document.getElementById('show-disabled-toggle');",
-        "    if (!table || !checkbox) return;",
-        "    if (checkbox.checked) {",
+        "  window.toggleDisabledVisibility = () => {",
+        "    const table = document.querySelector('.channel-table');",
+        "    const checkbox = document.getElementById('show-disabled-toggle');",
+        "    if(!table || !checkbox) return;",
+        "    if(checkbox.checked) {",
         "      table.classList.remove('hide-disabled');",
-        "      localStorage.setItem('prismcast-show-disabled-channels', 'true');",
+        "      safeStorageSet('prismcast-show-disabled-channels', 'true');",
         "    } else {",
         "      table.classList.add('hide-disabled');",
-        "      localStorage.removeItem('prismcast-show-disabled-channels');",
+        "      safeStorageRemove('prismcast-show-disabled-channels');",
         "    }",
         "  };",
         // Toggle visibility of an optional column and persist via background POST.
-        "  window.toggleColumn = function(checkbox) {",
-        "    var table = document.querySelector('.channel-table');",
-        "    if (!table || !checkbox) return;",
-        "    var colClass = checkbox.getAttribute('data-col-class');",
-        "    var hideClass = 'hide-' + colClass;",
-        "    if (checkbox.checked) { table.classList.remove(hideClass); }",
+        "  window.toggleColumn = (checkbox) => {",
+        "    const table = document.querySelector('.channel-table');",
+        "    if(!table || !checkbox) return;",
+        "    const colClass = checkbox.getAttribute('data-col-class');",
+        "    const hideClass = 'hide-' + colClass;",
+        "    if(checkbox.checked) { table.classList.remove(hideClass); }",
         "    else { table.classList.add(hideClass); }",
         // Collect all currently checked columns from the picker menu.
-        "    var menu = document.querySelector('.column-picker-menu');",
-        "    var cols = [];",
-        "    if (menu) {",
-        "      var cbs = menu.querySelectorAll('input[type=\"checkbox\"][data-col-field]');",
-        "      for (var i = 0; i < cbs.length; i++) {",
-        "        if (cbs[i].checked) cols.push(cbs[i].getAttribute('data-col-field'));",
+        "    const menu = document.querySelector('.column-picker-menu');",
+        "    const cols = [];",
+        "    if(menu) {",
+        "      const cbs = menu.querySelectorAll('input[type=\"checkbox\"][data-col-field]');",
+        "      for(const cb of cbs) {",
+        "        if(cb.checked) cols.push(cb.getAttribute('data-col-field'));",
         "      }",
         "    }",
         // Show or hide Quick Action sections gated on column visibility.
-        "    var colField = checkbox.getAttribute('data-col-field');",
-        "    var qaMap = { channelNumber: 'quick-action-autonumber', hdhrEnabled: 'quick-action-hdhr' };",
-        "    var qaId = qaMap[colField];",
+        "    const colField = checkbox.getAttribute('data-col-field');",
+        "    const qaMap = { channelNumber: 'quick-action-autonumber', hdhrEnabled: 'quick-action-hdhr' };",
+        "    const qaId = qaMap[colField];",
         "    if(qaId) {",
-        "      var qaEl = document.getElementById(qaId);",
+        "      const qaEl = document.getElementById(qaId);",
         "      if(qaEl) qaEl.style.display = checkbox.checked ? '' : 'none';",
-        "      var divider = document.getElementById('quick-action-divider');",
-        "      var anyVisible = document.getElementById('quick-action-autonumber')?.style.display !== 'none' ||",
-        "        document.getElementById('quick-action-hdhr')?.style.display !== 'none';",
+        "      const divider = document.getElementById('quick-action-divider');",
+        "      const anyVisible = (document.getElementById('quick-action-autonumber')?.style.display !== 'none') ||",
+        "        (document.getElementById('quick-action-hdhr')?.style.display !== 'none');",
         "      if(divider) divider.style.display = anyVisible ? '' : 'none';",
         "    }",
-        "    fetch('/config/channels/display-prefs', {",
-        "      method: 'POST', headers: { 'Content-Type': 'application/json' },",
-        "      body: JSON.stringify({ visibleColumns: cols })",
-        "    }).catch(function() {});",
-        "  };",
-        // Read the server-stamped sort value from the data-sort-value attribute.
-        "  function getSortValue(row, field) {",
-        "    var colIndex = { key: 0, name: 1, provider: 2, channelNumber: 3, hdhrEnabled: 4, stationId: 5, profile: 6, channelSelector: 7 };",
-        "    var idx = colIndex[field];",
-        "    if (idx === undefined) return '';",
-        "    var cell = row.children[idx];",
-        "    if (!cell) return '';",
-        "    return cell.getAttribute('data-sort-value') || '';",
-        "  }",
-        // Sort the channel table by the specified field. Toggles direction if the same field is clicked again.
-        "  window.sortChannelTable = function(field) {",
-        "    var table = document.querySelector('.channel-table');",
-        "    if (!table) return;",
-        "    var currentField = table.getAttribute('data-sort-field');",
-        "    var currentDir = table.getAttribute('data-sort-dir') || 'asc';",
-        "    var dir = (field === currentField) ? (currentDir === 'asc' ? 'desc' : 'asc') : 'asc';",
-        "    table.setAttribute('data-sort-field', field);",
-        "    table.setAttribute('data-sort-dir', dir);",
-        // Collect display rows and their paired edit rows.
-        "    var tbody = table.querySelector('tbody');",
-        "    var displayRows = tbody.querySelectorAll('tr[id^=\"display-row-\"]');",
-        "    var pairs = [];",
-        "    for (var i = 0; i < displayRows.length; i++) {",
-        "      var dr = displayRows[i];",
-        "      var key = dr.id.replace('display-row-', '');",
-        "      var er = document.getElementById('edit-row-' + key);",
-        "      var name = dr.children[1] ? dr.children[1].textContent.trim().toLowerCase() : '';",
-        "      pairs.push({ displayRow: dr, editRow: er, val: getSortValue(dr, field), name: name });",
-        "    }",
-        // Sort pairs. The channel name is used as a secondary sort key to stabilize rows with identical primary values. The secondary sort is always ascending
-        // regardless of the primary direction so that rows within each group maintain a consistent alphabetical order.
-        "    pairs.sort(function(a, b) {",
-        "      var cmp = (dir === 'asc') ? a.val.localeCompare(b.val) : b.val.localeCompare(a.val);",
-        "      if (cmp !== 0) return cmp;",
-        "      return a.name.localeCompare(b.name);",
-        "    });",
-        // Re-append in sorted order.
-        "    for (var j = 0; j < pairs.length; j++) {",
-        "      tbody.appendChild(pairs[j].displayRow);",
-        "      if (pairs[j].editRow) tbody.appendChild(pairs[j].editRow);",
-        "    }",
-        // Update header indicators.
-        "    var headers = table.querySelectorAll('th.sortable');",
-        "    for (var h = 0; h < headers.length; h++) {",
-        "      var th = headers[h];",
-        "      var hField = th.getAttribute('data-sort-field');",
-        "      var label = th.textContent.replace(/[\\u25B2\\u25BC]/g, '').trim();",
-        "      if (hField === field) { th.innerHTML = label + (dir === 'asc' ? ' &#9650;' : ' &#9660;'); }",
-        "      else { th.textContent = label; }",
-        "    }",
-        // Persist sort preference.
-        "    fetch('/config/channels/display-prefs', {",
-        "      method: 'POST', headers: { 'Content-Type': 'application/json' },",
-        "      body: JSON.stringify({ sortField: field, sortDirection: dir })",
-        "    }).catch(function() {});",
+        "    persistDisplayPrefs({ visibleColumns: cols });",
         "  };",
         // Populate channel selector datalist based on the URL field value. First populates from server-rendered data (predefined channels and cached provider
         // discovery), then asynchronously fetches from the provider discovery endpoint to pick up any channels not yet in the static data.
         "  function updateSelectorSuggestions(urlInputId, datalistId) {",
-        "    var urlInput = document.getElementById(urlInputId);",
-        "    var datalist = document.getElementById(datalistId);",
-        "    if (!urlInput || !datalist) return;",
+        "    const urlInput = document.getElementById(urlInputId);",
+        "    const datalist = document.getElementById(datalistId);",
+        "    if(!urlInput || !datalist) return;",
         "    datalist.innerHTML = '';",
         // Find or create the URL hint element. Placed after the URL input's parent form-row so it sits below the field.
-        "    var hintId = urlInputId + '-url-hint';",
-        "    var hintEl = document.getElementById(hintId);",
-        "    if (!hintEl) {",
+        "    const hintId = urlInputId + '-url-hint';",
+        "    let hintEl = document.getElementById(hintId);",
+        "    if(!hintEl) {",
         "      hintEl = document.createElement('div');",
         "      hintEl.id = hintId;",
         "      hintEl.className = 'hint';",
         "      hintEl.style.marginBottom = '0';",
-        "      var formRow = urlInput.closest('.form-row');",
-        "      if (formRow) { formRow.parentNode.insertBefore(hintEl, formRow.nextSibling); }",
+        "      const formRow = urlInput.closest('.form-row');",
+        "      if(formRow) { formRow.parentNode.insertBefore(hintEl, formRow.nextSibling); }",
         "    }",
         "    hintEl.innerHTML = '';",
         "    hintEl.style.display = 'none';",
-        "    var hostname;",
-        "    var raw = urlInput.value;",
-        "    if (raw && !raw.startsWith('http://') && !raw.startsWith('https://')) { raw = 'https://' + raw; }",
-        "    try { hostname = new URL(raw).hostname; } catch (e) { return; }",
-        "    var alt = hostname.startsWith('www.') ? hostname.substring(4) : 'www.' + hostname;",
+        "    let raw = urlInput.value;",
+        "    if(raw && !raw.startsWith('http://') && !raw.startsWith('https://')) { raw = 'https://' + raw; }",
+        "    const parsed = URL.parse(raw);",
+        "    if(!parsed) return;",
+        "    const hostname = parsed.hostname;",
+        "    const alt = hostname.startsWith('www.') ? hostname.substring(4) : 'www.' + hostname;",
         // Resolve the provider hostname. Try exact match first, then www-variant, then base domain match (e.g., sling.com matches watch.sling.com).
-        "    var exactMatch = (typeof channelSelectorsByDomain !== 'undefined') && channelSelectorsByDomain[hostname];",
-        "    var resolvedHostname = null;",
-        "    if ((typeof providerByDomain !== 'undefined') && providerByDomain[hostname]) { resolvedHostname = hostname; }",
-        "    else if ((typeof providerByDomain !== 'undefined') && providerByDomain[alt]) { resolvedHostname = alt; }",
-        "    else if (typeof providerByDomain !== 'undefined') {",
-        "      var suffix = '.' + hostname;",
-        "      var domainKeys = Object.keys(providerByDomain);",
-        "      for (var d = 0; d < domainKeys.length; d++) {",
-        "        if (domainKeys[d].endsWith(suffix)) { resolvedHostname = domainKeys[d]; break; }",
+        "    const exactMatch = (typeof channelSelectorsByDomain !== 'undefined') && channelSelectorsByDomain[hostname];",
+        "    let resolvedHostname = null;",
+        "    if((typeof serviceByDomain !== 'undefined') && serviceByDomain[hostname]) { resolvedHostname = hostname; }",
+        "    else if((typeof serviceByDomain !== 'undefined') && serviceByDomain[alt]) { resolvedHostname = alt; }",
+        "    else if(typeof serviceByDomain !== 'undefined') {",
+        "      const suffix = '.' + hostname;",
+        "      const domainKeys = Object.keys(serviceByDomain);",
+        "      for(const domainKey of domainKeys) {",
+        "        if(domainKey.endsWith(suffix)) { resolvedHostname = domainKey; break; }",
         "      }",
         "    }",
-        "    var slug = resolvedHostname ? providerByDomain[resolvedHostname] : null;",
-        "    var entries = exactMatch || ((typeof channelSelectorsByDomain !== 'undefined')",
+        "    const slug = resolvedHostname ? serviceByDomain[resolvedHostname] : null;",
+        "    const entries = exactMatch || ((typeof channelSelectorsByDomain !== 'undefined')",
         "      ? (channelSelectorsByDomain[alt] || (resolvedHostname ? channelSelectorsByDomain[resolvedHostname] : null)) : null);",
-        "    if (entries) {",
-        "      for (var i = 0; i < entries.length; i++) {",
-        "        var opt = document.createElement('option');",
-        "        opt.value = entries[i].value;",
-        "        opt.label = entries[i].label;",
+        "    if(entries) {",
+        "      for(const entry of entries) {",
+        "        const opt = document.createElement('option');",
+        "        opt.value = entry.value;",
+        "        opt.label = entry.label;",
         "        datalist.appendChild(opt);",
         "      }",
         "    }",
         // Show a URL hint when the hostname didn't match exactly and we found a provider via fallback.
-        "    if (!exactMatch && slug && (typeof providerGuideUrl !== 'undefined') && providerGuideUrl[slug]) {",
-        "      var suggestedUrl = providerGuideUrl[slug];",
-        "      var link = document.createElement('a');",
+        "    if(!exactMatch && slug && (typeof serviceGuideUrl !== 'undefined') && serviceGuideUrl[slug]) {",
+        "      const suggestedUrl = serviceGuideUrl[slug];",
+        "      const link = document.createElement('a');",
         "      link.href = '#';",
         "      link.textContent = suggestedUrl;",
-        "      link.addEventListener('click', function(e) {",
+        "      link.addEventListener('click', (e) => {",
         "        e.preventDefault();",
         "        urlInput.value = suggestedUrl;",
         "        hintEl.innerHTML = '';",
@@ -1517,117 +1422,129 @@ export function generateConfigSubtabScript() {
         "      hintEl.appendChild(document.createTextNode('?'));",
         "      hintEl.style.display = '';",
         "    }",
-        "    if (!slug) return;",
-        "    var snapshotUrl = urlInput.value;",
-        "    (async function() {",
+        "    if(!slug) return;",
+        "    const snapshotUrl = urlInput.value;",
+        "    (async () => {",
         "      try {",
-        "        var r = await fetch('/providers/' + slug + '/channels');",
-        "        var channels = r.ok ? await r.json() : null;",
-        "        if (!channels || urlInput.value !== snapshotUrl) return;",
-        "        var existing = {};",
-        "        var opts = datalist.querySelectorAll('option');",
-        "        for (var j = 0; j < opts.length; j++) { existing[opts[j].value] = true; }",
-        "        for (var k = 0; k < channels.length; k++) {",
-        "          if (!existing[channels[k].channelSelector]) {",
-        "            var o = document.createElement('option');",
-        "            o.value = channels[k].channelSelector;",
-        "            o.label = channels[k].name;",
+        "        const r = await fetch('/services/' + slug + '/channels');",
+        "        const channels = r.ok ? await r.json() : null;",
+        "        if(!channels || (urlInput.value !== snapshotUrl)) return;",
+        "        const existing = {};",
+        "        const opts = datalist.querySelectorAll('option');",
+        "        for(const opt of opts) { existing[opt.value] = true; }",
+        "        for(const channel of channels) {",
+        "          if(!existing[channel.channelSelector]) {",
+        "            const o = document.createElement('option');",
+        "            o.value = channel.channelSelector;",
+        "            o.label = channel.name;",
         "            datalist.appendChild(o);",
         "          }",
         "        }",
-        "      } catch(err) {}",
+        "      } catch(err) { console.warn('Channel selector suggestions failed to load.', err); }",
         "    })();",
         "  };",
-        // Initialize disabled channel toggle, provider filter, URL input listeners, and pending toast on page load.
-        "  (function() {",
+        // Initialize disabled channel toggle, service filter, URL input listeners, and pending toast on page load.
+        "  (() => {",
         // Show any toast queued by showToastAfterReload() before the last page reload.
-        "    var pending = sessionStorage.getItem('pendingToast');",
-        "    if (pending) {",
-        "      sessionStorage.removeItem('pendingToast');",
-        "      try { var pt = JSON.parse(pending); showToast(pt.message, pt.type); } catch (e) {}",
-        "    }",
-        "    if (localStorage.getItem('prismcast-show-disabled-channels') === 'true') {",
-        "      var table = document.querySelector('.channel-table');",
-        "      var checkbox = document.getElementById('show-disabled-toggle');",
-        "      if (table) table.classList.remove('hide-disabled');",
-        "      if (checkbox) checkbox.checked = true;",
+        "    const pt = consumePendingToast();",
+        "    if(pt) showToast(pt.message, pt.type);",
+        "    if(safeStorageGet('prismcast-show-disabled-channels') === 'true') {",
+        "      const table = document.querySelector('.channel-table');",
+        "      const checkbox = document.getElementById('show-disabled-toggle');",
+        "      if(table) table.classList.remove('hide-disabled');",
+        "      if(checkbox) checkbox.checked = true;",
         "    }",
         // Set indeterminate state on scope toggle checkboxes. HTML has no indeterminate attribute — it must be set via JS on page load. The enabled and total values
         // are read from data attributes on the quick-action-count span, not from the display text — this decouples checkbox state from the text format.
-        "    var scopeSpans = document.querySelectorAll('.quick-action-count[data-enabled][data-total]');",
-        "    for(var si = 0; si < scopeSpans.length; si++) {",
-        "      var span = scopeSpans[si];",
-        "      var enabled = parseInt(span.getAttribute('data-enabled'), 10);",
-        "      var total = parseInt(span.getAttribute('data-total'), 10);",
+        "    const scopeSpans = document.querySelectorAll('.quick-action-count[data-enabled][data-total]');",
+        "    for(const span of scopeSpans) {",
+        "      const enabled = parseInt(span.getAttribute('data-enabled'), 10);",
+        "      const total = parseInt(span.getAttribute('data-total'), 10);",
         "      if((total > 0) && (enabled > 0) && (enabled < total)) {",
-        "        var cb = document.querySelector('.scope-toggle[data-scope=\"' + span.getAttribute('data-scope') + '\"]');",
+        "        const cb = document.querySelector('.scope-toggle[data-scope=\"' + span.getAttribute('data-scope') + '\"]');",
         "        if(cb) cb.indeterminate = true;",
         "      }",
         "    }",
         // Set indeterminate state on the HDHR bulk toggle if data-indeterminate is present.
-        "    var hdhrToggle = document.getElementById('hdhr-bulk-toggle');",
-        "    if(hdhrToggle && hdhrToggle.getAttribute('data-indeterminate') === 'true') hdhrToggle.indeterminate = true;",
-        // Run filterChannelRows on page load when a provider filter is active. The server renders filtered options with the hidden attribute, but Safari ignores it on
+        "    const hdhrToggle = document.getElementById('hdhr-bulk-toggle');",
+        "    if(hdhrToggle && (hdhrToggle.getAttribute('data-indeterminate') === 'true')) hdhrToggle.indeterminate = true;",
+        // Set indeterminate state on tag bulk toggle checkboxes. Same pattern as HDHR — HTML has no indeterminate attribute, so JS must set it on page load.
+        "    const tagToggles = document.querySelectorAll('.tag-bulk-toggle[data-indeterminate=\"true\"]');",
+        "    for(const tagToggle of tagToggles) tagToggle.indeterminate = true;",
+        // Run channelTable.filter() on page load when a service filter is active. The server renders filtered options with the hidden attribute, but Safari ignores it on
         // option elements. This initial pass removes those options from the DOM to enforce the filter.
-        "    var menu = document.querySelector('.provider-dropdown-menu');",
-        "    if (menu) {",
-        "      var cbs = menu.querySelectorAll('input[type=\"checkbox\"]:not(:disabled)');",
-        "      var tags = [];",
-        "      var allChecked = true;",
-        "      for (var ci = 0; ci < cbs.length; ci++) {",
-        "        if (cbs[ci].checked) { tags.push(cbs[ci].getAttribute('data-tag')); }",
-        "        else { allChecked = false; }",
-        "      }",
-        "      if (!allChecked) { filterChannelRows(tags); updateBulkAssignOptions(tags); }",
-        "    }",
-        "    var addUrlInput = document.getElementById('add-url');",
-        "    if (addUrlInput) {",
-        "      addUrlInput.addEventListener('input', function() {",
+        "    const initFilterTags = channelTable.getEnabledFilterTags();",
+        "    if(initFilterTags.length > 0) { channelTable.filter(initFilterTags); updateBulkAssignOptions(initFilterTags); }",
+        "    const addUrlInput = document.getElementById('add-url');",
+        "    if(addUrlInput) {",
+        "      addUrlInput.addEventListener('input', () => {",
         "        updateSelectorSuggestions('add-url', 'add-selectorList');",
-        // Deselect the active provider pill if the user manually edits the URL. Check whether the current URL still matches the active pill's URL — if not, the
+        // Deselect the active service pill if the user manually edits the URL. Check whether the current URL still matches the active pill's URL — if not, the
         // user has overridden the auto-fill and the pill should unhighlight. Also re-enable the profile dropdown since manual URL entry may need a custom profile.
-        "        var activePill = document.querySelector('.provider-pill.active');",
-        "        if(activePill && activePill.getAttribute('data-url') !== addUrlInput.value) {",
+        "        const activePill = document.querySelector('.provider-pill.active');",
+        "        if(activePill && (activePill.getAttribute('data-url') !== addUrlInput.value)) {",
         "          activePill.classList.remove('active');",
-        "          var profileSelect = document.getElementById('add-profile');",
+        "          const profileSelect = document.getElementById('add-profile');",
         "          if(profileSelect) profileSelect.disabled = false;",
         "        }",
+        // Check the entered URL against predefined channel domains. If the domain matches, show an inline hint suggesting the predefined channel. This extends the
+        // form's existing URL-based intelligence (channelSelector suggestions, stationId auto-fill) with predefined channel awareness.
+        "        const predefinedHint = document.getElementById('add-predefined-hint');",
+        "        if(predefinedHint && (typeof predefinedByDomain !== 'undefined')) {",
+        "          const parsedUrl = URL.parse(addUrlInput.value);",
+        "          if(!parsedUrl) {",
+        "            predefinedHint.style.display = 'none';",
+        "          } else {",
+        "            const urlHostname = parsedUrl.hostname;",
+        "            const parts = urlHostname.split('.');",
+        "            const conciseDomain = (parts.length > 2) ? parts.slice(-2).join('.') : urlHostname;",
+        "            const matches = predefinedByDomain[conciseDomain];",
+        "            if(matches && (matches.length > 0)) {",
+        "              const names = matches.map((m) => '<strong>' + esc(m.name) + '</strong> (' + m.serviceCount + ' service' +",
+        "                ((m.serviceCount === 1) ? '' : 's') + ')');",
+        "              predefinedHint.innerHTML = names.join(', ') + ' available as predefined ' + ((matches.length === 1) ? 'channel' : 'channels') +",
+        "                ' with multi-service support. <a href=\"#\" onclick=\"event.preventDefault(); openBrowseModal();\">Browse predefined channels</a>';",
+        "              predefinedHint.style.display = '';",
+        "            } else {",
+        "              predefinedHint.style.display = 'none';",
+        "            }",
+        "          }",
+        "        }",
         "      });",
         "      updateSelectorSuggestions('add-url', 'add-selectorList');",
         "    }",
         // Auto-fill station ID when the channelSelector matches a known entry with a stationId. Reads from the same channelSelectorsByDomain data used by the
         // datalist. The data-auto attribute tracks whether the current value was auto-filled — user edits clear it, preventing overwrites of intentional input.
-        "    var addSelectorInput = document.getElementById('add-channelSelector');",
-        "    var addStationInput = document.getElementById('add-stationId');",
-        "    if (addSelectorInput && addStationInput) {",
-        "      addStationInput.addEventListener('input', function() { addStationInput.removeAttribute('data-auto'); });",
-        "      addSelectorInput.addEventListener('input', function() {",
-        "        if (addStationInput.value && !addStationInput.hasAttribute('data-auto')) return;",
-        "        var urlInput = document.getElementById('add-url');",
-        "        if (!urlInput || !urlInput.value) return;",
-        "        try {",
-        "          var hostname = new URL(urlInput.value).hostname;",
-        "          var entries = (typeof channelSelectorsByDomain !== 'undefined') ? channelSelectorsByDomain[hostname] : null;",
-        "          if (!entries) return;",
-        "          var match = entries.find(function(e) { return e.value === addSelectorInput.value; });",
-        "          if (match && match.stationId) { addStationInput.value = match.stationId; addStationInput.setAttribute('data-auto', '1'); }",
-        "          else if (addStationInput.hasAttribute('data-auto')) { addStationInput.value = ''; addStationInput.removeAttribute('data-auto'); }",
-        "        } catch(e) {}",
+        "    const addSelectorInput = document.getElementById('add-channelSelector');",
+        "    const addStationInput = document.getElementById('add-stationId');",
+        "    if(addSelectorInput && addStationInput) {",
+        "      addStationInput.addEventListener('input', () => { addStationInput.removeAttribute('data-auto'); });",
+        "      addSelectorInput.addEventListener('input', () => {",
+        "        if(addStationInput.value && !addStationInput.hasAttribute('data-auto')) return;",
+        "        const urlInput = document.getElementById('add-url');",
+        "        if(!urlInput || !urlInput.value) return;",
+        "        const parsed = URL.parse(urlInput.value);",
+        "        if(!parsed) return;",
+        "        const entries = (typeof channelSelectorsByDomain !== 'undefined') ? channelSelectorsByDomain[parsed.hostname] : null;",
+        "        if(!entries) return;",
+        "        const match = entries.find((e) => e.value === addSelectorInput.value);",
+        "        if(match && match.stationId) { addStationInput.value = match.stationId; addStationInput.setAttribute('data-auto', '1'); }",
+        "        else if(addStationInput.hasAttribute('data-auto')) { addStationInput.value = ''; addStationInput.removeAttribute('data-auto'); }",
         "      });",
         "    }",
         "  })();",
         // Login modal state tracking.
-        "  var loginStatusInterval = null;",
+        "  let loginStatusInterval = null;",
         // Start login mode for a channel. Opens browser window and shows modal.
-        "  window.startChannelLogin = async function(channel) {",
+        "  window.startChannelLogin = async (channel) => {",
         "    try {",
-        "      var res = await fetch('/auth/login', {",
-        "        method: 'POST',",
+        "      const res = await fetch('/auth/login', {",
+        "        body: JSON.stringify({ channel }),",
         "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify({ channel: channel })",
+        "        method: 'POST'",
         "      });",
-        "      var result = await res.json();",
-        "      if (result.success) {",
+        "      const result = await res.json();",
+        "      if(result.success) {",
         "        showToast('Browser window opened. Complete authentication.', 'info');",
         "        showLoginModal();",
         "        startLoginStatusPolling();",
@@ -1639,7 +1556,7 @@ export function generateConfigSubtabScript() {
         "    }",
         "  };",
         // End login mode. Closes browser tab and hides modal.
-        "  window.endLogin = async function() {",
+        "  window.endLogin = async () => {",
         "    stopLoginStatusPolling();",
         "    try {",
         "      await fetch('/auth/done', { method: 'POST' });",
@@ -1652,85 +1569,88 @@ export function generateConfigSubtabScript() {
         "  };",
         // Show the login modal.
         "  function showLoginModal() {",
-        "    var modal = document.getElementById('login-modal');",
-        "    if (modal) modal.style.display = 'flex';",
+        "    const modal = document.getElementById('login-modal');",
+        "    if(modal) modal.style.display = 'flex';",
         "  }",
         // Hide the login modal.
         "  function hideLoginModal() {",
-        "    var modal = document.getElementById('login-modal');",
-        "    if (modal) modal.style.display = 'none';",
+        "    const modal = document.getElementById('login-modal');",
+        "    if(modal) modal.style.display = 'none';",
         "  }",
-        // Start polling login status to detect when tab is closed externally.
+        // Start polling login status to detect when tab is closed externally. Errors are logged only on the first failure per polling session — a dead endpoint
+        // would otherwise spam the console at 1Hz. The flag resets at each startLoginStatusPolling() call so subsequent sessions get a fresh log.
         "  function startLoginStatusPolling() {",
         "    stopLoginStatusPolling();",
-        "    loginStatusInterval = setInterval(async function() {",
+        "    let errorLogged = false;",
+        "    loginStatusInterval = setInterval(async () => {",
         "      try {",
-        "        var res = await fetch('/auth/status');",
-        "        var status = await res.json();",
-        "        if (!status.active) {",
+        "        const res = await fetch('/auth/status');",
+        "        const status = await res.json();",
+        "        errorLogged = false;",
+        "        if(!status.active) {",
         "          stopLoginStatusPolling();",
         "          hideLoginModal();",
         "          showToast('Login session ended.', 'info');",
         "        }",
-        "      } catch(err) {}",
+        "      } catch(err) {",
+        "        if(!errorLogged) { console.warn('Login status poll failed; suppressing further logs until next success.', err); errorLogged = true; }",
+        "      }",
         "    }, 1000);",
         "  }",
         // Stop polling login status.
         "  function stopLoginStatusPolling() {",
-        "    if (loginStatusInterval) {",
+        "    if(loginStatusInterval) {",
         "      clearInterval(loginStatusInterval);",
         "      loginStatusInterval = null;",
         "    }",
         "  }",
         // Attach validation and modified indicator handlers to form inputs.
-        "  var form = document.getElementById('settings-form');",
-        "  if (form) {",
-        "    var inputs = form.querySelectorAll('input, select');",
-        "    for (var k = 0; k < inputs.length; k++) {",
-        "      var eventType = inputs[k].type === 'checkbox' ? 'change' : 'input';",
-        "      inputs[k].addEventListener(eventType, function() {",
+        "  const form = document.getElementById('settings-form');",
+        "  if(form) {",
+        "    const inputs = form.querySelectorAll('input, select');",
+        "    for(const input of inputs) {",
+        "      const eventType = input.type === 'checkbox' ? 'change' : 'input';",
+        "      input.addEventListener(eventType, function() {",
         "        validateInput(this);",
         "        updateModifiedIndicator(this);",
         "      });",
         "    }",
         // Wire up all checkboxes that have dependent fields. The updateDependentFields function is defined at the top level alongside the other helpers.
-        "    var checkboxes = form.querySelectorAll('input[type=\"checkbox\"]');",
-        "    for (var c = 0; c < checkboxes.length; c++) {",
-        "      (function(cb) {",
-        "        cb.addEventListener('change', function() { updateDependentFields(cb.id); });",
-        "      })(checkboxes[c]);",
+        "    const checkboxes = form.querySelectorAll('input[type=\"checkbox\"]');",
+        "    for(const cb of checkboxes) {",
+        "      cb.addEventListener('change', () => { updateDependentFields(cb.id); });",
         "    }",
         // Attach preset change handler to auto-fill bitrate and frame rate.
-        "    var presetSelect = document.getElementById('streaming-qualityPreset');",
-        "    if (presetSelect) {",
+        "    const presetSelect = document.getElementById('streaming-qualityPreset');",
+        "    if(presetSelect) {",
         "      presetSelect.addEventListener('change', function() { onPresetChange(this.value); });",
         "    }",
         "  }",
         // Checkbox list: collect checked values into the hidden input and update the modified indicator. Called by onchange on individual checkboxes within a
         // checkbox-list-grid. The hidden input holds the JSON-encoded array and participates in the standard form submission.
-        "  window.updateCheckboxList = function(checkbox) {",
-        "    var group = checkbox.closest('.form-group');",
-        "    if (!group) return;",
-        "    var hidden = group.querySelector('[data-checkbox-list]');",
-        "    if (!hidden) return;",
-        "    var grid = group.querySelector('.checkbox-list-grid');",
-        "    if (!grid) return;",
-        "    var cbs = grid.querySelectorAll('input[type=\"checkbox\"]');",
-        "    var values = [];",
-        "    for (var i = 0; i < cbs.length; i++) {",
-        "      if (cbs[i].checked) values.push(cbs[i].value);",
+        "  window.updateCheckboxList = (checkbox) => {",
+        "    const group = checkbox.closest('.form-group');",
+        "    if(!group) return;",
+        "    const hidden = group.querySelector('[data-checkbox-list]');",
+        "    if(!hidden) return;",
+        "    const grid = group.querySelector('.checkbox-list-grid');",
+        "    if(!grid) return;",
+        "    const cbs = grid.querySelectorAll('input[type=\"checkbox\"]');",
+        "    const values = [];",
+        "    for(const cb of cbs) {",
+        "      if(cb.checked) values.push(cb.value);",
         "    }",
         "    hidden.value = JSON.stringify(values);",
         "    updateModifiedIndicator(hidden);",
         "  };",
         // Initialize subtab on load: hash > localStorage > default.
-        "  var initialSubtab = window.initialHashSubtab;",
-        "  if (!initialSubtab) {",
-        "    try { initialSubtab = localStorage.getItem('prismcast-config-subtab'); } catch(e) {}",
-        "  }",
-        "  if (initialSubtab && document.querySelector('.subtab-btn[data-subtab=\"' + initialSubtab + '\"]')) {",
-        "    switchSubtab(initialSubtab, false);",
-        "  }",
+        "  initSubtab({",
+        "    btnSelector: '.subtab-btn',",
+        "    dataAttr: 'data-subtab',",
+        "    hashVar: window.initialHashSubtab,",
+        "    storageKey: 'prismcast-config-subtab',",
+        "    switchFn: switchSubtab",
+        "  });",
         "})();",
         "</script>"
     ].join("\n");