prismcast 1.6.0 → 1.8.0

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

@@ -43,42 +43,6 @@ export function generateConfigSubtabScript() {
         "      }",
         "    }",
         "  }",
-        // Show a toast notification. Auto-dismiss durations: success/info = 5s, warning = 8s, error = no auto-dismiss. Optional action: { label, onclick } appends an
-        // inline button between the message text and the close button.
-        "  function showToast(message, type, duration, action) {",
-        "    var container = document.getElementById('toast-container');",
-        "    if (!container) return;",
-        "    var toast = document.createElement('div');",
-        "    toast.className = 'toast ' + (type || 'info');",
-        "    toast.textContent = message;",
-        "    toast.setAttribute('role', (type === 'error' || type === 'warning') ? 'alert' : 'status');",
-        "    if (action && action.label) {",
-        "      var actionBtn = document.createElement('button');",
-        "      actionBtn.type = 'button';",
-        "      actionBtn.className = 'toast-action';",
-        "      actionBtn.textContent = action.label;",
-        "      actionBtn.onclick = function() { if (action.onclick) action.onclick(); dismissToast(toast); };",
-        "      toast.appendChild(actionBtn);",
-        "    }",
-        "    var closeBtn = document.createElement('button');",
-        "    closeBtn.type = 'button';",
-        "    closeBtn.className = 'toast-close';",
-        "    closeBtn.textContent = '\\u00d7';",
-        "    closeBtn.setAttribute('aria-label', 'Dismiss');",
-        "    closeBtn.onclick = function() { dismissToast(toast); };",
-        "    toast.appendChild(closeBtn);",
-        "    container.appendChild(toast);",
-        "    var ms = duration !== undefined ? duration : type === 'error' ? 0 : type === 'warning' ? 8000 : 5000;",
-        "    if (ms > 0) { setTimeout(function() { dismissToast(toast); }, ms); }",
-        "  }",
-        // Expose showToast globally so other script blocks (e.g., channels-subtab IIFE) can use the toast system.
-        "  window.showToast = showToast;",
-        // Dismiss a toast with slide-out animation.
-        "  function dismissToast(toast) {",
-        "    if (toast.classList.contains('toast-exit')) return;",
-        "    toast.classList.add('toast-exit');",
-        "    toast.addEventListener('animationend', function() { if (toast.parentNode) toast.parentNode.removeChild(toast); });",
-        "  }",
         // 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.';",
         // Queue a toast to appear after the next page reload.
@@ -115,34 +79,31 @@ export function generateConfigSubtabScript() {
         "    showToast('Restart cancelled. Changes will apply on next restart.', 'info');",
         "  };",
         // Force immediate restart despite active streams.
-        "  window.forceRestart = function() {",
+        "  window.forceRestart = async function() {",
         "    pendingRestart = false;",
         "    document.getElementById('restart-dialog').style.display = 'none';",
-        "    fetch('/config/restart-now', { method: 'POST' })",
-        "      .then(function(response) {",
-        "        if (response.ok) {",
-        "          waitForServerRestart();",
-        "        } else {",
-        "          return response.json().then(function(data) {",
-        "            throw new Error(data.message || 'Restart failed');",
-        "          });",
-        "        }",
-        "      })",
-        "      .catch(function(err) {",
-        "        showToast('Failed to restart: ' + err.message, 'error');",
-        "      });",
+        "    try {",
+        "      var res = await fetch('/config/restart-now', { method: 'POST' });",
+        "      if (res.ok) {",
+        "        waitForServerRestart();",
+        "      } else {",
+        "        var data = await res.json();",
+        "        throw new Error(data.message || 'Restart failed');",
+        "      }",
+        "    } catch(err) {",
+        "      showToast('Failed to restart: ' + err.message, 'error');",
+        "    }",
         "  };",
         // Trigger restart (called when streams reach 0).
-        "  function triggerRestart() {",
-        "    fetch('/config/restart-now', { method: 'POST' })",
-        "      .then(function(response) {",
-        "        if (response.ok) {",
-        "          waitForServerRestart();",
-        "        }",
-        "      })",
-        "      .catch(function() {",
-        "        showToast('Failed to trigger restart. Please restart manually.', 'error');",
-        "      });",
+        "  async function triggerRestart() {",
+        "    try {",
+        "      var res = await fetch('/config/restart-now', { method: 'POST' });",
+        "      if (res.ok) {",
+        "        waitForServerRestart();",
+        "      }",
+        "    } catch(err) {",
+        "      showToast('Failed to trigger restart. Please restart manually.', 'error');",
+        "    }",
         "  }",
         // Wait for server restart by polling /health, then reload.
         "  function waitForServerRestart() {",
@@ -150,23 +111,22 @@ export function generateConfigSubtabScript() {
         "    var maxAttempts = 30;",
         "    showToast('Restarting server...', 'info', 0);",
         "    if (restartPollInterval) { clearInterval(restartPollInterval); }",
-        "    restartPollInterval = setInterval(function() {",
+        "    restartPollInterval = setInterval(async function() {",
         "      attempts++;",
-        "      fetch('/health')",
-        "        .then(function(response) {",
-        "          if (response.ok) {",
-        "            clearInterval(restartPollInterval);",
-        "            restartPollInterval = null;",
-        "            showToastAfterReload('Server restarted.', 'success');",
-        "          }",
-        "        })",
-        "        .catch(function() {",
-        "          if (attempts >= maxAttempts) {",
-        "            clearInterval(restartPollInterval);",
-        "            restartPollInterval = null;",
-        "            showToast('Server did not restart within 30 seconds. Please check the server manually.', 'error');",
-        "          }",
-        "        });",
+        "      try {",
+        "        var res = await fetch('/health');",
+        "        if (res.ok) {",
+        "          clearInterval(restartPollInterval);",
+        "          restartPollInterval = null;",
+        "          showToastAfterReload('Server restarted.', 'success');",
+        "        }",
+        "      } catch(err) {",
+        "        if (attempts >= maxAttempts) {",
+        "          clearInterval(restartPollInterval);",
+        "          restartPollInterval = null;",
+        "          showToast('Server did not restart within 30 seconds. Please check the server manually.', 'error');",
+        "        }",
+        "      }",
         "    }, 1000);",
         "  }",
         // Escape HTML entities in text for safe display.
@@ -176,7 +136,7 @@ export function generateConfigSubtabScript() {
         "    return div.innerHTML;",
         "  }",
         // Open the changelog modal and fetch content dynamically. Also checks whether an upgrade button should be shown.
-        "  window.openChangelogModal = function() {",
+        "  window.openChangelogModal = async function() {",
         "    var modal = document.getElementById('changelog-modal');",
         "    if (!modal) return;",
         "    var title = modal.querySelector('.changelog-title');",
@@ -189,28 +149,27 @@ export function generateConfigSubtabScript() {
         "    content.style.display = 'none';",
         "    error.style.display = 'none';",
         "    if (upgradeBtn) upgradeBtn.style.display = 'none';",
-        "    fetch('/version/changelog')",
-        "      .then(function(res) { return res.json(); })",
-        "      .then(function(data) {",
-        "        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>';",
-        "          }",
-        "          html += '</ul>';",
-        "          content.innerHTML = html;",
-        "          content.style.display = 'block';",
-        "        } else {",
-        "          error.style.display = 'block';",
+        "    try {",
+        "      var res = await fetch('/version/changelog');",
+        "      var 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.updateAvailable && upgradeBtn) { upgradeBtn.style.display = ''; }",
-        "      })",
-        "      .catch(function() {",
-        "        loading.style.display = 'none';",
+        "        html += '</ul>';",
+        "        content.innerHTML = html;",
+        "        content.style.display = 'block';",
+        "      } else {",
         "        error.style.display = 'block';",
-        "      });",
+        "      }",
+        "      if (data.updateAvailable && upgradeBtn) { upgradeBtn.style.display = ''; }",
+        "    } catch(err) {",
+        "      loading.style.display = 'none';",
+        "      error.style.display = 'block';",
+        "    }",
         "  };",
         // Close the changelog modal.
         "  window.closeChangelogModal = function() {",
@@ -218,65 +177,61 @@ export function generateConfigSubtabScript() {
         "    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 = function() {",
-        "    fetch('/upgrade/info')",
-        "      .then(function(res) { return res.json(); })",
-        "      .then(function(info) {",
-        "        if (!info.upgradeable) {",
-        "          closeChangelogModal();",
-        "          var 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;",
-        "        }",
+        "  window.startUpgrade = async function() {",
+        "    try {",
+        "      var infoRes = await fetch('/upgrade/info');",
+        "      var info = await infoRes.json();",
+        "      if (!info.upgradeable) {",
         "        closeChangelogModal();",
-        "        showToast('Upgrading PrismCast...', 'info', 0);",
-        "        return fetch('/upgrade', { method: 'POST' })",
-        "          .then(function(res) { return res.json(); })",
-        "          .then(function(result) {",
-        "            if (result.success && result.willRestart) {",
-        "              waitForServerRestart();",
-        "            } else if (result.success) {",
-        "              showToast('Upgrade complete. Please restart PrismCast manually.', 'success', 8000);",
-        "            } else {",
-        "              showToast('Upgrade failed: ' + result.message, 'error');",
-        "            }",
-        "          });",
-        "      })",
-        "      .catch(function(err) {",
-        "        showToast('Upgrade failed: ' + err.message, 'error');",
-        "      });",
+        "        var 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;",
+        "      }",
+        "      closeChangelogModal();",
+        "      showToast('Upgrading PrismCast...', 'info', 0);",
+        "      var upgradeRes = await fetch('/upgrade', { method: 'POST' });",
+        "      var result = await upgradeRes.json();",
+        "      if (result.success && result.willRestart) {",
+        "        waitForServerRestart();",
+        "      } else if (result.success) {",
+        "        showToast('Upgrade complete. Please restart PrismCast manually.', 'success', 8000);",
+        "      } else {",
+        "        showToast('Upgrade failed: ' + result.message, 'error');",
+        "      }",
+        "    } catch(err) {",
+        "      showToast('Upgrade failed: ' + err.message, 'error');",
+        "    }",
         "  };",
         // Check for updates manually. Updates the version link in-place when a new version is found.
-        "  window.checkForUpdates = function() {",
+        "  window.checkForUpdates = async function() {",
         "    var btn = document.querySelector('.version-check');",
         "    if (!btn || btn.classList.contains('checking')) return;",
         "    btn.classList.add('checking');",
-        "    fetch('/version/check', { method: 'POST' })",
-        "      .then(function(res) { return res.json(); })",
-        "      .then(function(data) {",
-        "        btn.classList.remove('checking');",
-        "        if (data.updateAvailable && data.latestVersion) {",
-        "          var 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);",
+        "    try {",
+        "      var res = await fetch('/version/check', { method: 'POST' });",
+        "      var 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')) {",
+        "          link.textContent = 'v' + data.currentVersion + ' \\u2192 v' + data.latestVersion;",
+        "          link.classList.add('version-update');",
         "        }",
-        "      })",
-        "      .catch(function() {",
-        "        btn.classList.remove('checking');",
-        "        btn.classList.add('check-error');",
-        "        setTimeout(function() { btn.classList.remove('check-error'); }, 2000);",
-        "      });",
+        "      } else {",
+        "        btn.classList.add('up-to-date');",
+        "        setTimeout(function() { 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);",
+        "    }",
         "  };",
         // Clear all field error indicators.
         "  function clearFieldErrors() {",
@@ -480,7 +435,7 @@ export function generateConfigSubtabScript() {
         "    showToast('All settings reset to defaults. Click ' + (isServiceMode ? 'Save & Restart' : 'Save Settings') + ' to apply changes.', 'info');",
         "  };",
         // Submit settings form via AJAX.
-        "  window.submitSettingsForm = function(event) {",
+        "  window.submitSettingsForm = async function(event) {",
         "    event.preventDefault();",
         "    clearFieldErrors();",
         "    var form = document.getElementById('settings-form');",
@@ -500,132 +455,129 @@ export function generateConfigSubtabScript() {
         "      obj[parts[parts.length - 1]] = value;",
         "    }",
         "    if (saveBtn) saveBtn.classList.add('loading');",
-        "    fetch('/config', {",
-        "      method: 'POST',",
-        "      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
-        "      body: JSON.stringify(config)",
-        "    })",
-        "    .then(function(response) { return response.json().then(function(data) { return { ok: response.ok, data: data }; }); })",
-        "    .then(function(result) {",
+        "    try {",
+        "      var res = await fetch('/config', {",
+        "        method: 'POST',",
+        "        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
+        "        body: JSON.stringify(config)",
+        "      });",
+        "      var data = await res.json();",
         "      if (saveBtn) saveBtn.classList.remove('loading');",
-        "      if (result.ok && result.data.success) {",
-        "        if (result.data.willRestart) {",
-        "          if (result.data.deferred) {",
-        "            showPendingRestartDialog(result.data.activeStreams);",
+        "      if (res.ok && data.success) {",
+        "        if (data.willRestart) {",
+        "          if (data.deferred) {",
+        "            showPendingRestartDialog(data.activeStreams);",
         "          } else {",
         "            waitForServerRestart();",
         "          }",
         "        } else {",
-        "          showToast(result.data.message || 'Configuration saved.', 'info');",
+        "          showToast(data.message || 'Configuration saved.', 'info');",
         "        }",
-        "      } else if (result.data.errors) {",
-        "        displayFieldErrors(result.data.errors);",
+        "      } else if (data.errors) {",
+        "        displayFieldErrors(data.errors);",
         "        showToast('Please correct the errors below.', 'error');",
         "      } else {",
-        "        showToast(result.data.message || 'Failed to save configuration.', 'error');",
+        "        showToast(data.message || 'Failed to save configuration.', 'error');",
         "      }",
-        "    })",
-        "    .catch(function(err) {",
+        "    } catch(err) {",
         "      if (saveBtn) saveBtn.classList.remove('loading');",
         "      showToast('Failed to save configuration: ' + err.message, 'error');",
-        "    });",
+        "    }",
         "    return false;",
         "  };",
         // Export configuration as JSON download.
-        "  window.exportConfig = function() {",
-        "    fetch('/config/export')",
-        "      .then(function(response) { return response.blob(); })",
-        "      .then(function(blob) {",
-        "        var url = window.URL.createObjectURL(blob);",
-        "        var a = document.createElement('a');",
-        "        a.href = url;",
-        "        a.download = 'prismcast-config.json';",
-        "        document.body.appendChild(a);",
-        "        a.click();",
-        "        document.body.removeChild(a);",
-        "        window.URL.revokeObjectURL(url);",
-        "      })",
-        "      .catch(function(err) { showToast('Failed to export configuration: ' + err.message, 'error'); });",
+        "  window.exportConfig = async function() {",
+        "    try {",
+        "      var res = await fetch('/config/export');",
+        "      var blob = await res.blob();",
+        "      var url = window.URL.createObjectURL(blob);",
+        "      var a = document.createElement('a');",
+        "      a.href = url;",
+        "      a.download = 'prismcast-config.json';",
+        "      document.body.appendChild(a);",
+        "      a.click();",
+        "      document.body.removeChild(a);",
+        "      window.URL.revokeObjectURL(url);",
+        "    } catch(err) {",
+        "      showToast('Failed to export configuration: ' + err.message, 'error');",
+        "    }",
         "  };",
         // Import configuration from file.
         "  window.importConfig = function(fileInput) {",
         "    var file = fileInput.files[0];",
         "    if (!file) return;",
         "    var reader = new FileReader();",
-        "    reader.onload = function(e) {",
+        "    reader.onload = async function(e) {",
         "      try {",
         "        var config = JSON.parse(e.target.result);",
         "        if (confirm('Import this configuration? The server may restart to apply changes.')) {",
-        "          fetch('/config/import', {",
+        "          var res = await fetch('/config/import', {",
         "            method: 'POST',",
         "            headers: { 'Content-Type': 'application/json' },",
         "            body: JSON.stringify(config)",
-        "          })",
-        "          .then(function(response) { return response.json().then(function(data) { return { ok: response.ok, data: data }; }); })",
-        "          .then(function(result) {",
-        "            if (result.ok && result.data.success) {",
-        "              showToast(result.data.message || 'Configuration imported.', 'success');",
-        "              if (result.data.willRestart) {",
-        "                if (result.data.deferred) {",
-        "                  showPendingRestartDialog(result.data.activeStreams);",
-        "                } else {",
-        "                  waitForServerRestart();",
-        "                }",
+        "          });",
+        "          var data = await res.json();",
+        "          if (res.ok && data.success) {",
+        "            showToast(data.message || 'Configuration imported.', 'success');",
+        "            if (data.willRestart) {",
+        "              if (data.deferred) {",
+        "                showPendingRestartDialog(data.activeStreams);",
+        "              } else {",
+        "                waitForServerRestart();",
         "              }",
-        "            } else {",
-        "              throw new Error(result.data.message || result.data.error || 'Import failed');",
         "            }",
-        "          })",
-        "          .catch(function(err) { showToast('Failed to import configuration: ' + err.message, 'error'); });",
+        "          } else {",
+        "            throw new Error(data.message || data.error || 'Import failed');",
+        "          }",
         "        }",
         "      } catch (err) {",
-        "        showToast('Invalid JSON file: ' + err.message, 'error');",
+        "        showToast('Failed to import configuration: ' + err.message, 'error');",
         "      }",
         "      fileInput.value = '';",
         "    };",
         "    reader.readAsText(file);",
         "  };",
         // Export channels as JSON download.
-        "  window.exportChannels = function() {",
-        "    fetch('/config/channels/export')",
-        "      .then(function(response) { return response.blob(); })",
-        "      .then(function(blob) {",
-        "        var url = window.URL.createObjectURL(blob);",
-        "        var a = document.createElement('a');",
-        "        a.href = url;",
-        "        a.download = 'prismcast-channels.json';",
-        "        document.body.appendChild(a);",
-        "        a.click();",
-        "        document.body.removeChild(a);",
-        "        window.URL.revokeObjectURL(url);",
-        "      })",
-        "      .catch(function(err) { showToast('Failed to export channels: ' + err.message, 'error'); });",
+        "  window.exportChannels = async function() {",
+        "    try {",
+        "      var res = await fetch('/config/channels/export');",
+        "      var blob = await res.blob();",
+        "      var url = window.URL.createObjectURL(blob);",
+        "      var a = document.createElement('a');",
+        "      a.href = url;",
+        "      a.download = 'prismcast-channels.json';",
+        "      document.body.appendChild(a);",
+        "      a.click();",
+        "      document.body.removeChild(a);",
+        "      window.URL.revokeObjectURL(url);",
+        "    } catch(err) {",
+        "      showToast('Failed to export channels: ' + err.message, 'error');",
+        "    }",
         "  };",
         // Import channels from file.
         "  window.importChannels = function(fileInput) {",
         "    var file = fileInput.files[0];",
         "    if (!file) return;",
         "    var reader = new FileReader();",
-        "    reader.onload = function(e) {",
+        "    reader.onload = async function(e) {",
         "      try {",
         "        var channels = JSON.parse(e.target.result);",
         "        if (confirm('Import these channels? This will replace all existing user channels.')) {",
-        "          fetch('/config/channels/import', {",
+        "          var res = await fetch('/config/channels/import', {",
         "            method: 'POST',",
         "            headers: { 'Content-Type': 'application/json' },",
         "            body: JSON.stringify(channels)",
-        "          })",
-        "          .then(function(response) {",
-        "            if (response.ok) {",
-        "              showToastAfterReload('Channels imported successfully.' + PLAYLIST_HINT, 'success');",
-        "            } else {",
-        "              return response.text().then(function(text) { throw new Error(text); });",
-        "            }",
-        "          })",
-        "          .catch(function(err) { showToast('Failed to import channels: ' + err.message, 'error'); });",
+        "          });",
+        "          var data = await res.json();",
+        "          if (data.success) {",
+        "            showToast((data.message || 'Channels imported successfully.') + PLAYLIST_HINT, 'success');",
+        "            if (data.patch) { applyChannelPatch(data.patch); }",
+        "          } else {",
+        "            showToast('Failed to import channels: ' + (data.error || 'Unknown error.'), 'error');",
+        "          }",
         "        }",
         "      } catch (err) {",
-        "        showToast('Invalid JSON file: ' + err.message, 'error');",
+        "        showToast('Failed to import channels: ' + err.message, 'error');",
         "      }",
         "      fileInput.value = '';",
         "    };",
@@ -638,14 +590,14 @@ export function generateConfigSubtabScript() {
         "    var replaceCheckbox = document.getElementById('m3u-replace-duplicates');",
         "    var conflictMode = (replaceCheckbox && replaceCheckbox.checked) ? 'replace' : 'skip';",
         "    var reader = new FileReader();",
-        "    reader.onload = function(e) {",
-        "      fetch('/config/channels/import-m3u', {",
-        "        method: 'POST',",
-        "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify({ content: e.target.result, conflictMode: conflictMode })",
-        "      })",
-        "      .then(function(response) { return response.json(); })",
-        "      .then(function(data) {",
+        "    reader.onload = async function(e) {",
+        "      try {",
+        "        var res = await fetch('/config/channels/import-m3u', {",
+        "          method: 'POST',",
+        "          headers: { 'Content-Type': 'application/json' },",
+        "          body: JSON.stringify({ content: e.target.result, conflictMode: conflictMode })",
+        "        });",
+        "        var data = await res.json();",
         "        if (data.success) {",
         "          var msg = 'M3U Import Complete\\n\\n';",
         "          msg += '\\u2713 ' + data.imported + ' channel(s) imported\\n';",
@@ -658,13 +610,15 @@ export function generateConfigSubtabScript() {
         "            }",
         "            if (data.errors.length > 5) msg += '  ... and ' + (data.errors.length - 5) + ' more\\n';",
         "          }",
-        "          if (data.imported > 0 || data.replaced > 0) { showToastAfterReload(msg + PLAYLIST_HINT, 'success'); }",
-        "          else { showToast(msg, 'success'); }",
+        "          if (data.patch) { applyChannelPatch(data.patch); }",
+        "          showToast(msg + ((data.imported > 0 || data.replaced > 0) ? PLAYLIST_HINT : ''), 'success');",
         "        } else {",
         "          showToast('M3U import failed: ' + (data.error || 'Unknown error'), 'error');",
         "        }",
-        "      })",
-        "      .catch(function(err) { showToast('Failed to import M3U: ' + err.message, 'error'); });",
+        "      } catch(err) {",
+        "        console.error('M3U import error:', err);",
+        "        showToast('Failed to import M3U: ' + err.message, 'error');",
+        "      }",
         "      fileInput.value = '';",
         "    };",
         "    reader.readAsText(file);",
@@ -749,13 +703,44 @@ export function generateConfigSubtabScript() {
         "    if (displayRow) displayRow.style.display = '';",
         "    if (editRow) editRow.style.display = 'none';",
         "  };",
-        // Hide add form and show the Add Channel button.
+        // 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
+        // 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');",
+        "    if(!wasActive) btn.classList.add('active');",
+        "    var 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');",
+        "    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;",
+        "      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');",
-        "    var addBtn = document.getElementById('add-channel-btn');",
         "    if (addForm) addForm.style.display = 'none';",
-        "    if (addBtn) addBtn.style.display = 'inline-block';",
-        "    if (addForm) addForm.querySelector('form').reset();",
+        "    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');",
+        "      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.
@@ -793,7 +778,7 @@ export function generateConfigSubtabScript() {
         "      tbody.appendChild(newDisplayRow);",
         "      if (newEditRow) tbody.appendChild(newEditRow);",
         "    }",
-        "    updateDisabledCount();",
+        "    processChannelLogos();",
         "  };",
         // Remove channel rows from the table.
         "  window.removeChannelRow = function(key) {",
@@ -801,7 +786,6 @@ export function generateConfigSubtabScript() {
         "    var editRow = document.getElementById('edit-row-' + key);",
         "    if (displayRow) displayRow.remove();",
         "    if (editRow) editRow.remove();",
-        "    updateDisabledCount();",
         "  };",
         // Advanced fields toggle for channel forms.
         "  window.toggleAdvanced = function(prefix) {",
@@ -824,84 +808,153 @@ export function generateConfigSubtabScript() {
         "      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) {",
+        "    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');",
+        "    input.type = (field === 'channelNumber') ? 'number' : 'text';",
+        "    input.className = 'inline-edit';",
+        "    input.value = value;",
+        "    td.innerHTML = '';",
+        "    td.appendChild(input);",
+        "    input.focus();",
+        "    input.select();",
+        "    var saving = false;",
+        "    async function save() {",
+        "      if(saving) return;",
+        "      saving = true;",
+        "      var newValue = input.value.trim();",
+        "      if(newValue === value) { cancel(); return; }",
+        "      var 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)",
+        "        });",
+        "        var d = await res.json();",
+        "        if(res.ok && d.success) {",
+        "          if(d.patch) { applyChannelPatch(d.patch); }",
+        "        } else {",
+        "          td.innerHTML = original;",
+        "          showToast(d.message || 'Failed to save.', 'error');",
+        "        }",
+        "      } catch(err) {",
+        "        console.error('Inline edit error:', err);",
+        "        td.innerHTML = original;",
+        "        showToast('Failed to save: ' + err.message, 'error');",
+        "      }",
+        "    }",
+        "    function cancel() { td.innerHTML = original; }",
+        "    input.addEventListener('keydown', function(e) {",
+        "      if(e.key === 'Enter') { e.preventDefault(); save(); }",
+        "      else if(e.key === 'Escape') { cancel(); }",
+        "    });",
+        "    input.addEventListener('blur', function() { 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';",
+        "    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 })",
+        "      });",
+        "      var d = await res.json();",
+        "      if(res.ok && d.success) {",
+        "        if(d.patch) { applyChannelPatch(d.patch); }",
+        "      } else {",
+        "        checkbox.checked = !checkbox.checked;",
+        "        showToast(d.message || 'Failed to update HDHR setting.', 'error');",
+        "      }",
+        "    } catch(err) {",
+        "      checkbox.checked = !checkbox.checked;",
+        "      showToast('Failed to update HDHR setting: ' + err.message, 'error');",
+        "    }",
+        "  };",
         // Submit channel form via AJAX (add or edit).
-        "  window.submitChannelForm = function(event, action) {",
+        "  window.submitChannelForm = async function(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]; }",
-        "    fetch('/config/channels', {",
-        "      method: 'POST',",
-        "      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
-        "      body: JSON.stringify(data)",
-        "    })",
-        "    .then(function(response) { return response.json().then(function(d) { return { ok: response.ok, data: d }; }); })",
-        "    .then(function(result) {",
-        "      if (result.ok && result.data.success) {",
-        "        showToast(result.data.message, 'success');",
-        "        if (result.data.html) {",
-        "          insertChannelRow(result.data.html, result.data.key);",
-        "          refilterChannelRows();",
-        "        }",
+        "    try {",
+        "      var res = await fetch('/config/channels', {",
+        "        method: 'POST',",
+        "        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
+        "        body: JSON.stringify(data)",
+        "      });",
+        "      var d = await res.json();",
+        "      if (res.ok && d.success) {",
+        "        showToast(d.message, 'success');",
+        "        if (d.patch) { applyChannelPatch(d.patch); }",
         "        if (action === 'add') {",
         "          hideAddForm();",
         "        } else {",
-        "          hideEditForm(result.data.key);",
+        "          hideEditForm(d.key);",
         "        }",
-        "      } else if (result.data.errors) {",
+        "      } else if (d.errors) {",
         "        var errorMsgs = [];",
-        "        for (var field in result.data.errors) { errorMsgs.push(field + ': ' + result.data.errors[field]); }",
+        "        for (var field in d.errors) { errorMsgs.push(field + ': ' + d.errors[field]); }",
         "        showToast('Validation errors: ' + errorMsgs.join(', '), 'error');",
         "      } else {",
-        "        showToast(result.data.message || 'Failed to save channel.', 'error');",
+        "        showToast(d.message || 'Failed to save channel.', 'error');",
         "      }",
-        "    })",
-        "    .catch(function(err) { showToast('Failed to save channel: ' + err.message, 'error'); });",
+        "    } catch(err) {",
+        "      console.error('Channel save error:', err);",
+        "      showToast('Failed to save channel: ' + err.message, 'error');",
+        "    }",
         "    return false;",
         "  };",
         // Delete channel via AJAX.
-        "  window.deleteChannel = function(key) {",
+        "  window.deleteChannel = async function(key) {",
         "    if (!confirm('Delete channel ' + key + '?')) return;",
-        "    fetch('/config/channels', {",
-        "      method: 'POST',",
-        "      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
-        "      body: JSON.stringify({ action: 'delete', key: key })",
-        "    })",
-        "    .then(function(response) { return response.json().then(function(d) { return { ok: response.ok, data: d }; }); })",
-        "    .then(function(result) {",
-        "      if (result.ok && result.data.success) {",
-        "        showToast(result.data.message, 'success');",
-        "        if (result.data.html) {",
-        "          insertChannelRow(result.data.html, result.data.key || key);",
-        "          refilterChannelRows();",
-        "        } else {",
-        "          removeChannelRow(result.data.key || key);",
-        "        }",
+        "    try {",
+        "      var res = await fetch('/config/channels', {",
+        "        method: 'POST',",
+        "        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
+        "        body: JSON.stringify({ action: 'delete', key: key })",
+        "      });",
+        "      var d = await res.json();",
+        "      if (res.ok && d.success) {",
+        "        showToast(d.message, 'success');",
+        "        if (d.patch) { applyChannelPatch(d.patch); }",
         "      } else {",
-        "        showToast(result.data.message || 'Failed to delete channel.', 'error');",
+        "        showToast(d.message || 'Failed to delete channel.', 'error');",
         "      }",
-        "    })",
-        "    .catch(function(err) { showToast('Failed to delete channel: ' + err.message, 'error'); });",
+        "    } catch(err) {",
+        "      console.error('Channel delete error:', err);",
+        "      showToast('Failed to delete channel: ' + err.message, 'error');",
+        "    }",
         "  };",
         // Toggle a single predefined channel's enabled/disabled state.
-        "  window.togglePredefinedChannel = function(key, enable) {",
-        "    fetch('/config/channels/toggle-predefined', {",
-        "      method: 'POST',",
-        "      headers: { 'Content-Type': 'application/json' },",
-        "      body: JSON.stringify({ key: key, enabled: enable })",
-        "    })",
-        "    .then(function(response) { return response.json(); })",
-        "    .then(function(result) {",
+        "  window.togglePredefinedChannel = async function(key, enable) {",
+        "    try {",
+        "      var res = await fetch('/config/channels/toggle-predefined', {",
+        "        method: 'POST',",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        body: JSON.stringify({ key: key, enabled: enable })",
+        "      });",
+        "      var result = await res.json();",
         "      if (result.success) {",
         "        showToast('Channel ' + key + ' ' + (enable ? 'enabled' : 'disabled') + '.' + PLAYLIST_HINT, 'success');",
-        "        updateChannelRowDisabledState(key, !enable);",
-        "        if(result.counts) { updateScopeToggles(result.counts); }",
+        "        if(result.patch) { applyChannelPatch(result.patch); }",
         "      } else {",
         "        showToast(result.error || 'Failed to toggle channel.', 'error');",
         "      }",
-        "    })",
-        "    .catch(function(err) { showToast('Failed to toggle channel: ' + err.message, 'error'); });",
+        "    } catch(err) {",
+        "      console.error('Channel toggle error:', 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
         // _allOptions (if present) rather than querySelectorAll because filtered-out options are removed from the DOM but still tracked in the array.
@@ -918,186 +971,228 @@ export function generateConfigSubtabScript() {
         "    }",
         "  }",
         // Update provider selection for a multi-provider channel.
-        "  window.updateProviderSelection = function(selectElement) {",
+        "  window.updateProviderSelection = async function(selectElement) {",
         "    var channelKey = selectElement.getAttribute('data-channel');",
         "    var providerKey = selectElement.value;",
-        "    fetch('/config/provider', {",
-        "      method: 'POST',",
-        "      headers: { 'Content-Type': 'application/json' },",
-        "      body: JSON.stringify({ channel: channelKey, provider: providerKey })",
-        "    })",
-        "    .then(function(response) { return response.json(); })",
-        "    .then(function(result) {",
+        "    try {",
+        "      var res = await fetch('/config/provider', {",
+        "        method: 'POST',",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        body: JSON.stringify({ channel: channelKey, provider: providerKey })",
+        "      });",
+        "      var result = await res.json();",
         "      if (result.success) {",
         "        showToast('Provider updated. New streams will use the selected provider.', 'success');",
-        "        if (result.html) { insertChannelRow(result.html, channelKey); refilterChannelRows(); }",
+        "        if (result.patch) { applyChannelPatch(result.patch); }",
         "      } else {",
         "        showToast(result.error || 'Failed to update provider.', 'error');",
         "      }",
-        "    })",
-        "    .catch(function(err) { showToast('Failed to update provider: ' + err.message, 'error'); });",
+        "    } catch(err) {",
+        "      console.error('Provider update error:', err);",
+        "      showToast('Failed to update provider: ' + err.message, 'error');",
+        "    }",
         "  };",
         // Bulk toggle predefined channels by scope (all, pacific, east).
-        "  window.bulkTogglePredefined = function(enable, scope) {",
-        "    fetch('/config/channels/bulk-toggle-predefined', {",
-        "      method: 'POST',",
-        "      headers: { 'Content-Type': 'application/json' },",
-        "      body: JSON.stringify({ enabled: enable, scope: scope })",
-        "    })",
-        "    .then(function(response) { return response.json(); })",
-        "    .then(function(result) {",
+        "  window.bulkTogglePredefined = async function(enable, scope) {",
+        "    try {",
+        "      var res = await fetch('/config/channels/bulk-toggle-predefined', {",
+        "        method: 'POST',",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        body: JSON.stringify({ enabled: enable, scope: scope })",
+        "      });",
+        "      var result = await res.json();",
         "      if (result.success) {",
         "        var labels = { all: 'All predefined', pacific: 'Pacific predefined', east: 'East predefined' };",
         "        showToast((labels[scope] || 'Predefined') + ' channels ' + (enable ? 'enabled' : 'disabled') + '.' + PLAYLIST_HINT, 'success');",
-        "        if (result.keys) {",
-        "          for (var i = 0; i < result.keys.length; i++) { setRowDisabledState(result.keys[i], !enable); }",
-        "        }",
-        "        updateDisabledCount();",
-        "        if(result.counts) { updateScopeToggles(result.counts); }",
+        "        if (result.patch) { applyChannelPatch(result.patch); }",
         "      } else {",
         "        showToast(result.error || 'Failed to toggle channels.', 'error');",
         "      }",
-        "    })",
-        "    .catch(function(err) { showToast('Failed to toggle channels: ' + err.message, 'error'); });",
+        "    } catch(err) {",
+        "      console.error('Bulk toggle error:', err);",
+        "      showToast('Failed to toggle channels: ' + err.message, 'error');",
+        "    }",
         "  };",
-        // Update scope toggle checkboxes and count labels from server-provided counts. Pure renderer — no client-side arithmetic.
-        "  function updateScopeToggles(counts) {",
-        "    var scopes = ['all', 'east', 'pacific'];",
-        "    for(var i = 0; i < scopes.length; i++) {",
-        "      var s = scopes[i];",
-        "      if(!counts[s]) continue;",
-        "      var cb = document.querySelector('.scope-toggle[data-scope=\"' + s + '\"]');",
-        "      var span = document.querySelector('.quick-action-count[data-scope=\"' + s + '\"]');",
-        "      if(cb) {",
-        "        cb.checked = (counts[s].enabled === counts[s].total);",
-        "        cb.indeterminate = (counts[s].enabled > 0) && (counts[s].enabled < counts[s].total);",
+        // 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);",
+        "    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?' " +
+            ": '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',",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        body: JSON.stringify({ start: start, sortField: sortField, sortDirection: sortDir })",
+        "      });",
+        "      var result = await res.json();",
+        "      if(result.success) {",
+        "        showToast(result.message || 'Channels numbered.', 'success');",
+        "        if(result.patch) { applyChannelPatch(result.patch); }",
+        "      } else {",
+        "        showToast(result.error || 'Failed to auto-number channels.', 'error');",
         "      }",
-        "      if(span) { span.textContent = counts[s].enabled + ' of ' + counts[s].total + ' enabled'; }",
+        "    } catch(err) {",
+        "      console.error('Auto-number error:', err);",
+        "      showToast('Failed to auto-number channels: ' + err.message, 'error');",
         "    }",
-        "  }",
-        // SVG icon strings for dynamic DOM manipulation when toggling button states.
-        "  var ICON_LOGIN_SVG = '<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=\"M6.5 2H3.5a1 1 0 00-1 1v10a1 1 0 001 1h3\"/><path d=\"M10.5 11l3-3-3-3\"/>" +
-            "<path d=\"M13.5 8H6.5\"/></svg>';",
-        "  var ICON_ENABLE_SVG = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" " +
-            "stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6\"/><path d=\"M5.5 8l2 2 3.5-4\"/></svg>';",
-        "  var ICON_DISABLE_SVG = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" " +
-            "stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6\"/><path d=\"M5.5 5.5l5 5\"/></svg>';",
-        // Revert a channel override back to predefined defaults.
-        "  window.revertChannel = function(key) {",
-        "    if (!confirm('Revert channel ' + key + ' to predefined defaults?')) return;",
-        "    fetch('/config/channels', {",
-        "      method: 'POST',",
-        "      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },",
-        "      body: JSON.stringify({ action: 'revert', key: key })",
-        "    })",
-        "    .then(function(response) { return response.json().then(function(d) { return { ok: response.ok, data: d }; }); })",
-        "    .then(function(result) {",
-        "      if (result.ok && result.data.success) {",
-        "        showToast(result.data.message, 'success');",
-        "        if (result.data.html) {",
-        "          insertChannelRow(result.data.html, result.data.key || key);",
-        "          refilterChannelRows();",
-        "        }",
+        "  };",
+        // 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');",
+        "    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?';",
+        "    if(!confirm(msg)) return;",
+        "    try {",
+        "      var res = await fetch('/config/channels/hdhr-bulk', {",
+        "        method: 'POST',",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        body: JSON.stringify({ enable: enable })",
+        "      });",
+        "      var result = await res.json();",
+        "      if(result.success) {",
+        "        showToast(result.message || 'HDHR settings updated.', 'success');",
+        "        if(result.patch) { applyChannelPatch(result.patch); }",
         "      } else {",
-        "        showToast(result.data.message || 'Failed to revert channel.', 'error');",
+        "        showToast(result.error || 'Failed to update HDHR settings.', 'error');",
         "      }",
-        "    })",
-        "    .catch(function(err) { showToast('Failed to revert channel: ' + err.message, 'error'); });",
+        "    } catch(err) {",
+        "      console.error('HDHR bulk toggle error:', err);",
+        "      showToast('Failed to update HDHR settings: ' + err.message, 'error');",
+        "    }",
         "  };",
-        // Set a channel row's disabled state without triggering count updates. Uses icon buttons. Used by bulkTogglePredefined for efficient bulk updates.
-        "  function setRowDisabledState(key, disabled) {",
-        "    var row = document.getElementById('display-row-' + key);",
-        "    if (!row) return;",
-        "    var btnGroup = row.querySelector('.btn-group');",
-        "    if (!btnGroup) return;",
-        "    if (disabled) {",
-        "      row.classList.add('channel-disabled');",
-        "      row.classList.remove('user-channel');",
-        // Replace login icon with placeholder.
-        "      var loginBtn = btnGroup.querySelector('.btn-icon-login');",
-        "      if (loginBtn) {",
-        "        var placeholder = document.createElement('span');",
-        "        placeholder.className = 'btn-icon-placeholder';",
-        "        loginBtn.replaceWith(placeholder);",
-        "      }",
-        // Swap disable icon to enable icon.
-        "      var disableBtn = btnGroup.querySelector('.btn-icon-disable');",
-        "      if (disableBtn) {",
-        "        disableBtn.className = 'btn-icon btn-icon-enable';",
-        "        disableBtn.title = 'Enable';",
-        "        disableBtn.setAttribute('aria-label', 'Enable');",
-        "        disableBtn.innerHTML = ICON_ENABLE_SVG;",
-        "        disableBtn.setAttribute('onclick', \"togglePredefinedChannel('\" + key + \"', true)\");",
-        "      }",
-        "    } else {",
-        "      row.classList.remove('channel-disabled');",
-        // Swap enable icon to disable icon.
-        "      var enableBtn = btnGroup.querySelector('.btn-icon-enable');",
-        "      if (enableBtn) {",
-        // Replace placeholder with login icon button.
-        "        var placeholder = btnGroup.querySelector('.btn-icon-placeholder');",
-        "        if (placeholder) {",
-        "          var newLoginBtn = document.createElement('button');",
-        "          newLoginBtn.type = 'button';",
-        "          newLoginBtn.className = 'btn-icon btn-icon-login';",
-        "          newLoginBtn.title = 'Login';",
-        "          newLoginBtn.setAttribute('aria-label', 'Login');",
-        "          newLoginBtn.innerHTML = ICON_LOGIN_SVG;",
-        "          newLoginBtn.setAttribute('onclick', \"startChannelLogin('\" + key + \"')\");",
-        "          placeholder.replaceWith(newLoginBtn);",
-        "        }",
-        "        enableBtn.className = 'btn-icon btn-icon-disable';",
-        "        enableBtn.title = 'Disable';",
-        "        enableBtn.setAttribute('aria-label', 'Disable');",
-        "        enableBtn.innerHTML = ICON_DISABLE_SVG;",
-        "        enableBtn.setAttribute('onclick', \"togglePredefinedChannel('\" + key + \"', false)\");",
+        // 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 function(tag, add) {",
+        "    try {",
+        "      var res = await fetch('/config/channels/bulk-tags', {",
+        "        method: 'POST',",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        body: JSON.stringify({ action: add ? 'add' : 'remove', tag: tag })",
+        "      });",
+        "      var 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 error:', 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.
+        "  var activeTagDropdown = null;",
+        "  var tagPortal = null;",
+        "  function getTagPortal() {",
+        "    if(!tagPortal) { tagPortal = document.getElementById('inline-tag-portal'); }",
+        "    return tagPortal;",
         "  }",
-        // Update a single channel row's disabled state and refresh counts. Used by individual togglePredefinedChannel.
-        "  function updateChannelRowDisabledState(key, disabled) {",
-        "    setRowDisabledState(key, disabled);",
-        "    updateDisabledCount();",
+        "  function saveTagDropdownIfChanged() {",
+        "    if(!activeTagDropdown) return;",
+        "    var portal = getTagPortal();",
+        "    if(!portal) return;",
+        "    var original = activeTagDropdown.original;",
+        "    var key = activeTagDropdown.key;",
+        "    var checkboxes = portal.querySelectorAll('.inline-tag-checkbox');",
+        "    var tags = [];",
+        "    for(var i = 0; i < checkboxes.length; i++) {",
+        "      if(checkboxes[i].checked) tags.push(checkboxes[i].getAttribute('data-tag'));",
+        "    }",
+        "    var newValue = tags.sort().join(',');",
+        "    activeTagDropdown = null;",
+        "    if(newValue === original) return;",
+        "    fetch('/config/channels', {",
+        "      method: 'POST',",
+        "      headers: { 'Content-Type': 'application/json' },",
+        "      body: JSON.stringify({ action: 'inline-edit', field: 'tags', key: key, value: newValue })",
+        "    }).then(function(res) { return res.json(); }).then(function(d) {",
+        "      if(d.success && d.patch) { applyChannelPatch(d.patch); }",
+        "      else if(!d.success) { showToast(d.message || 'Failed to update tags.', 'error'); }",
+        "    }).catch(function(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.
+        "  closeDropdowns.addHook(saveTagDropdownIfChanged);",
+        "  window.toggleInlineTagDropdown = function(td) {",
+        "    var portal = getTagPortal();",
+        "    if(!portal) return;",
+        "    var isOpen = activeTagDropdown && (activeTagDropdown.td === td);",
+        "    closeDropdowns();",
+        "    if(isOpen) return;",
+        // Populate checkbox state from the cell's data-tags attribute, then toggle the dropdown with the shared portal positioning.
+        "    var currentTags = (td.getAttribute('data-tags') || '').split(',').filter(function(t) { return t.length > 0; });",
+        "    var tagSet = {};",
+        "    for(var i = 0; i < currentTags.length; i++) tagSet[currentTags[i]] = true;",
+        "    var checkboxes = portal.querySelectorAll('.inline-tag-checkbox');",
+        "    for(var j = 0; j < checkboxes.length; j++) {",
+        "      checkboxes[j].checked = !!tagSet[checkboxes[j].getAttribute('data-tag')];",
+        "    }",
+        "    toggleDropdown(td, { menu: portal });",
+        "    activeTagDropdown = { key: td.getAttribute('data-key'), original: currentTags.sort().join(','), td: td };",
         "  };",
-        // Update the channel summary counts (total, enabled, disabled, predefined/user breakdown) shown above the channel table.
-        "  function updateDisabledCount() {",
-        "    var totalRows = document.querySelectorAll('.channel-table tbody tr[id^=\"display-row-\"]').length;",
-        "    var hiddenRows = document.querySelectorAll('tr.channel-disabled:not(.user-channel), tr.channel-unavailable');",
-        "    var disabledCount = hiddenRows.length;",
-        "    var enabledCount = totalRows - disabledCount;",
-        "    var userRows = document.querySelectorAll('.channel-table tbody tr.user-channel[id^=\"display-row-\"]').length;",
-        "    var predefinedRows = totalRows - userRows;",
-        "    var totalEl = document.getElementById('total-count');",
-        "    var enabledEl = document.getElementById('enabled-count');",
-        "    var disabledEl = document.getElementById('disabled-count');",
-        "    var predefinedEl = document.getElementById('predefined-count');",
-        "    var userEl = document.getElementById('user-count');",
-        "    if (totalEl) totalEl.textContent = String(totalRows);",
-        "    if (enabledEl) enabledEl.textContent = String(enabledCount);",
-        "    if (disabledEl) disabledEl.textContent = String(disabledCount);",
-        "    if (predefinedEl) predefinedEl.textContent = String(predefinedRows);",
-        "    if (userEl) userEl.textContent = (userRows > 0) ? ', ' + String(userRows) + ' user' : '';",
+        // 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 = function(formRow) {",
+        "    var checkboxes = formRow.querySelectorAll('.tag-checkbox:checked');",
+        "    var tags = [];",
+        "    for(var i = 0; i < checkboxes.length; i++) tags.push(checkboxes[i].getAttribute('data-tag'));",
+        "    var hidden = formRow.querySelector('input[type=\"hidden\"][name=\"tags\"]');",
+        "    if(hidden) hidden.value = tags.sort().join(', ');",
+        "  };",
+        // Revert a channel override back to predefined defaults.
+        "  window.revertChannel = async function(key) {",
+        "    if(!confirm('Revert channel ' + key + ' to predefined defaults?')) return;",
+        "    try {",
+        "      var res = await fetch('/config/channels', {",
+        "        method: 'POST',",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        body: JSON.stringify({ action: 'revert', key: key })",
+        "      });",
+        "      var d = await res.json();",
+        "      if(res.ok && d.success) {",
+        "        showToast(d.message, 'success');",
+        "        if(d.patch) { applyChannelPatch(d.patch); }",
+        "      } else {",
+        "        showToast(d.message || 'Failed to revert channel.', 'error');",
+        "      }",
+        "    } catch(err) {",
+        "      showToast('Failed to revert channel: ' + err.message, 'error');",
+        "    }",
         "  };",
         // Save the provider filter to the server and update the UI on success.
-        "  function saveProviderFilter(enabledTags) {",
-        "    fetch('/config/provider-filter', {",
-        "      method: 'POST',",
-        "      headers: { 'Content-Type': 'application/json' },",
-        "      body: JSON.stringify({ enabledProviders: enabledTags })",
-        "    })",
-        "    .then(function(r) { return r.json(); })",
-        "    .then(function(result) {",
+        "  async function saveProviderFilter(enabledTags) {",
+        "    try {",
+        "      var r = await fetch('/config/provider-filter', {",
+        "        method: 'POST',",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        body: JSON.stringify({ enabledProviders: enabledTags })",
+        "      });",
+        "      var result = await r.json();",
         "      if (result.success) {",
         "        updateProviderChips(enabledTags);",
         "        filterChannelRows(enabledTags);",
         "        updateBulkAssignOptions(enabledTags);",
         "        updateProviderFilterButton(enabledTags);",
-        "        updateDisabledCount();",
+        "        if(result.patch) { applyChannelPatch(result.patch); }",
         "        showToast('Provider filter updated.' + PLAYLIST_HINT, 'success');",
         "      }",
-        "    })",
-        "    .catch(function(err) { showToast('Failed to update filter: ' + err.message, 'error'); });",
+        "    } catch(err) {",
+        "      console.error('Provider filter error:', err);",
+        "      showToast('Failed to update filter: ' + err.message, 'error');",
+        "    }",
         "  };",
         // Provider filter: toggle a provider tag on/off.
         "  window.toggleProviderTag = function(checkbox) {",
@@ -1132,11 +1227,14 @@ export function generateConfigSubtabScript() {
         "    }",
         "    saveProviderFilter(enabledTags);",
         "  };",
-        // Update the provider filter button text.
+        // Update the provider filter button text. The filter icon SVG is inlined here because this runs client-side where the server's icon module is not available.
+        "  var 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 updateProviderFilterButton(enabledTags) {",
         "    var btn = document.getElementById('provider-filter-btn');",
-        "    if (!btn) return;",
-        "    btn.innerHTML = (enabledTags.length > 0) ? 'Filtered &#9662;' : 'All Providers &#9662;';",
+        "    if(!btn) return;",
+        "    var label = (enabledTags.length > 0) ? 'Filtered' : 'All Providers';",
+        "    btn.innerHTML = filterIcon + ' ' + label + ' &#9662;';",
         "  };",
         // Rebuild the provider chips from the enabled tags.
         "  function updateProviderChips(enabledTags) {",
@@ -1149,17 +1247,30 @@ export function generateConfigSubtabScript() {
         "      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) label = cb.parentElement.textContent.trim();",
+        "        if (cb && cb.parentElement) {",
+        "          label = cb.parentElement.textContent.trim();",
+        "          var pd = cb.parentElement.querySelector('.provider-display');",
+        "          if (pd) {",
+        "            chipDomain = pd.getAttribute('data-domain') || '';",
+        "            chipIconUrl = pd.getAttribute('data-icon-url') || '';",
+        "          }",
+        "        }",
         "      }",
         "      var chip = document.createElement('span');",
         "      chip.className = 'provider-chip';",
         "      chip.setAttribute('data-tag', tag);",
-        "      chip.innerHTML = label + '<button type=\"button\" class=\"chip-close\" aria-label=\"Remove ' + label +",
+        "      var domainAttr = chipDomain ? ' data-domain=\"' + chipDomain + '\"' : '';",
+        "      var 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>';",
         "      container.appendChild(chip);",
         "    }",
+        "    processProviderDisplays();",
         "  };",
         // 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
@@ -1222,25 +1333,28 @@ export function generateConfigSubtabScript() {
         "    if (allChecked) { enabledTags = []; }",
         "    if (enabledTags.length > 0) { filterChannelRows(enabledTags); }",
         "  }",
-        // Update bulk assign items in the Quick Actions menu to only show enabled providers. Toggles display on .bulk-assign-item elements based on the active filter.
+        // 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.
         "  function updateBulkAssignOptions(enabledTags) {",
-        "    var items = document.querySelectorAll('.bulk-assign-item');",
-        "    for (var i = 0; i < items.length; i++) {",
-        "      var tag = items[i].getAttribute('data-provider-tag');",
+        "    var 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);",
-        "      items[i].style.display = show ? '' : 'none';",
+        "      if(show) options[i].removeAttribute('hidden');",
+        "      else options[i].setAttribute('hidden', '');",
         "    }",
         "  };",
         // Bulk assign all channels to a specific provider. Updates all dropdowns and profile cells in-place.
-        "  window.bulkAssignProvider = function(providerTag) {",
+        "  window.bulkAssignProvider = async function(providerTag) {",
         "    if (!providerTag) return;",
-        "    fetch('/config/provider-bulk-assign', {",
-        "      method: 'POST',",
-        "      headers: { 'Content-Type': 'application/json' },",
-        "      body: JSON.stringify({ provider: providerTag })",
-        "    })",
-        "    .then(function(r) { return r.json(); })",
-        "    .then(function(result) {",
+        "    try {",
+        "      var r = await fetch('/config/provider-bulk-assign', {",
+        "        method: 'POST',",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        body: JSON.stringify({ provider: providerTag })",
+        "      });",
+        "      var result = await r.json();",
         "      if (result.success) {",
         "        var msg = result.affected + ' of ' + result.total + ' channel(s) updated.';",
         "        var undoAction = null;",
@@ -1258,18 +1372,19 @@ export function generateConfigSubtabScript() {
         "      } else {",
         "        showToast(result.error || 'Failed to assign.', 'error');",
         "      }",
-        "    })",
-        "    .catch(function(err) { showToast('Failed to assign: ' + err.message, 'error'); });",
+        "    } catch(err) {",
+        "      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.
-        "  function restoreBulkProviders(prevSelections) {",
-        "    fetch('/config/provider-bulk-restore', {",
-        "      method: 'POST',",
-        "      headers: { 'Content-Type': 'application/json' },",
-        "      body: JSON.stringify({ selections: prevSelections })",
-        "    })",
-        "    .then(function(r) { return r.json(); })",
-        "    .then(function(result) {",
+        "  async function restoreBulkProviders(prevSelections) {",
+        "    try {",
+        "      var r = await fetch('/config/provider-bulk-restore', {",
+        "        method: 'POST',",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        body: JSON.stringify({ selections: prevSelections })",
+        "      });",
+        "      var result = await r.json();",
         "      if (result.success) {",
         "        showToast('Bulk assign reverted.', 'success');",
         "        if (result.selections) {",
@@ -1281,69 +1396,20 @@ export function generateConfigSubtabScript() {
         "      } else {",
         "        showToast(result.error || 'Failed to revert.', 'error');",
         "      }",
-        "    })",
-        "    .catch(function(err) { showToast('Failed to revert: ' + err.message, 'error'); });",
+        "    } catch(err) {",
+        "      showToast('Failed to revert: ' + err.message, 'error');",
+        "    }",
         "  }",
-        // Close all open dropdown menus and remove the scroll and resize listeners.
-        "  function closeDropdowns() {",
-        "    var menus = document.querySelectorAll('.dropdown-menu.show');",
-        "    for (var i = 0; i < menus.length; i++) menus[i].classList.remove('show');",
-        "    window.removeEventListener('scroll', closeDropdowns, true);",
-        "    window.removeEventListener('resize', closeDropdowns);",
-        "  };",
-        "  window.closeDropdowns = closeDropdowns;",
-        // Toggle a dropdown menu open or closed. On first call for a given button, the menu is detached from its .dropdown parent and portaled to <body> with
-        // position: fixed. This allows the menu to escape overflow: auto containers like the channel table wrapper. On every open, the menu is positioned relative
-        // to the button's bounding rect, with edge-of-viewport clamping and above-button flip when it would extend below the viewport.
-        "  window.toggleDropdown = function(btn) {",
-        "    var menu = btn._portalMenu;",
-        "    var isOpen = menu && menu.classList.contains('show');",
-        "    closeDropdowns();",
-        "    if (isOpen) return;",
-        "    if (!menu) {",
-        "      menu = btn.nextElementSibling;",
-        "      if (!menu) return;",
-        "      btn._portalMenu = menu;",
-        "      document.body.appendChild(menu);",
-        "      menu.style.position = 'fixed';",
-        "      menu.style.marginTop = '0';",
-        "    }",
-        "    menu.classList.add('show');",
-        "    var rect = btn.getBoundingClientRect();",
-        "    var top = rect.bottom + 2;",
-        "    var left = rect.left;",
-        "    if (left + menu.offsetWidth > window.innerWidth - 4) left = rect.right - menu.offsetWidth;",
-        "    if (left < 4) left = 4;",
-        "    if (top + menu.offsetHeight > window.innerHeight - 4) top = rect.top - menu.offsetHeight - 2;",
-        "    menu.style.top = top + 'px';",
-        "    menu.style.left = left + 'px';",
-        "    window.addEventListener('scroll', closeDropdowns, true);",
-        "    window.addEventListener('resize', closeDropdowns);",
-        "  };",
         // 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();",
         "  });",
-        // 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.
+        // Copy a stream URL to the clipboard. The type parameter selects HLS or MPEG-TS format. Delegates to the shared copyToClipboard utility.
         "  window.copyStreamUrl = function(type, key) {",
         "    closeDropdowns();",
         "    var url = (type === 'hls') ? (location.origin + '/hls/' + key + '/stream.m3u8') : (location.origin + '/stream/' + key);",
-        "    if (navigator.clipboard && navigator.clipboard.writeText) {",
-        "      navigator.clipboard.writeText(url).then(function() { showToast('Stream URL copied to clipboard.', 'success'); })",
-        "        .catch(function() { 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);",
-        "    }",
+        "    copyToClipboard(url, 'Stream URL copied to clipboard.');",
         "  };",
         // Toggle visibility of disabled predefined channels and persist preference.
         "  window.toggleDisabledVisibility = function() {",
@@ -1375,18 +1441,36 @@ export function generateConfigSubtabScript() {
         "        if (cbs[i].checked) cols.push(cbs[i].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];",
+        "    if(qaId) {",
+        "      var 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';",
+        "      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.
+        // Read the server-stamped sort value from the data-sort-value attribute. The column index is derived from the header row's data-sort-field attributes rather
+        // than a hardcoded map — new columns are automatically supported without updating client-side code.
+        "  var colIndexCache = null;",
         "  function getSortValue(row, field) {",
-        "    var colIndex = { key: 0, name: 1, provider: 2, channelNumber: 3, stationId: 4, profile: 5, channelSelector: 6 };",
-        "    var idx = colIndex[field];",
-        "    if (idx === undefined) return '';",
+        "    if(!colIndexCache) {",
+        "      colIndexCache = {};",
+        "      var ths = document.querySelectorAll('.channel-table th[data-sort-field]');",
+        "      for(var i = 0; i < ths.length; i++) { colIndexCache[ths[i].getAttribute('data-sort-field')] = i; }",
+        "    }",
+        "    var idx = colIndexCache[field];",
+        "    if(idx === undefined) return '';",
         "    var cell = row.children[idx];",
-        "    if (!cell) return '';",
+        "    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.
@@ -1421,14 +1505,16 @@ export function generateConfigSubtabScript() {
         "      tbody.appendChild(pairs[j].displayRow);",
         "      if (pairs[j].editRow) tbody.appendChild(pairs[j].editRow);",
         "    }",
-        // Update header indicators.
+        // Update header sort indicators. Targets .sort-label within each <th> so other children (like the tag filter dropdown) are untouched.
         "    var headers = table.querySelectorAll('th.sortable');",
-        "    for (var h = 0; h < headers.length; h++) {",
+        "    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; }",
+        "      var sortLabel = th.querySelector('.sort-label');",
+        "      if(!sortLabel) continue;",
+        "      var label = sortLabel.textContent.replace(/[\\u25B2\\u25BC]/g, '').trim();",
+        "      if(hField === field) { sortLabel.innerHTML = label + (dir === 'asc' ? ' &#9650;' : ' &#9660;'); }",
+        "      else { sortLabel.textContent = label; }",
         "    }",
         // Persist sort preference.
         "    fetch('/config/channels/display-prefs', {",
@@ -1504,9 +1590,10 @@ export function generateConfigSubtabScript() {
         "    }",
         "    if (!slug) return;",
         "    var snapshotUrl = urlInput.value;",
-        "    fetch('/providers/' + slug + '/channels')",
-        "      .then(function(r) { return r.ok ? r.json() : null; })",
-        "      .then(function(channels) {",
+        "    (async function() {",
+        "      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');",
@@ -1519,8 +1606,8 @@ export function generateConfigSubtabScript() {
         "            datalist.appendChild(o);",
         "          }",
         "        }",
-        "      })",
-        "      .catch(function() {});",
+        "      } catch(err) {}",
+        "    })();",
         "  };",
         // Initialize disabled channel toggle, provider filter, URL input listeners, and pending toast on page load.
         "  (function() {",
@@ -1536,17 +1623,24 @@ export function generateConfigSubtabScript() {
         "      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.
-        "    var scopeToggles = document.querySelectorAll('.scope-toggle');",
-        "    for(var si = 0; si < scopeToggles.length; si++) {",
-        "      var st = scopeToggles[si];",
-        "      var total = parseInt(st.getAttribute('data-total'), 10);",
-        "      var span = document.querySelector('.quick-action-count[data-scope=\"' + st.getAttribute('data-scope') + '\"]');",
-        "      if(span && total > 0) {",
-        "        var count = parseInt(span.textContent, 10);",
-        "        if(!isNaN(count) && (count > 0) && (count < total)) { st.indeterminate = 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);",
+        "      if((total > 0) && (enabled > 0) && (enabled < total)) {",
+        "        var 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;",
+        // 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.
+        "    var tagToggles = document.querySelectorAll('.tag-bulk-toggle[data-indeterminate=\"true\"]');",
+        "    for(var ti = 0; ti < tagToggles.length; ti++) tagToggles[ti].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
         // option elements. This initial pass removes those options from the DOM to enforce the filter.
         "    var menu = document.querySelector('.provider-dropdown-menu');",
@@ -1562,21 +1656,51 @@ export function generateConfigSubtabScript() {
         "    }",
         "    var addUrlInput = document.getElementById('add-url');",
         "    if (addUrlInput) {",
-        "      addUrlInput.addEventListener('input', function() { updateSelectorSuggestions('add-url', 'add-selectorList'); });",
+        "      addUrlInput.addEventListener('input', function() {",
+        "        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
+        // 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) {",
+        "          activePill.classList.remove('active');",
+        "          var profileSelect = document.getElementById('add-profile');",
+        "          if(profileSelect) profileSelect.disabled = false;",
+        "        }",
+        "      });",
         "      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) {}",
+        "      });",
+        "    }",
         "  })();",
         // Login modal state tracking.
         "  var loginStatusInterval = null;",
         // Start login mode for a channel. Opens browser window and shows modal.
-        "  window.startChannelLogin = function(channel) {",
-        "    fetch('/auth/login', {",
-        "      method: 'POST',",
-        "      headers: { 'Content-Type': 'application/json' },",
-        "      body: JSON.stringify({ channel: channel })",
-        "    })",
-        "    .then(function(response) { return response.json(); })",
-        "    .then(function(result) {",
+        "  window.startChannelLogin = async function(channel) {",
+        "    try {",
+        "      var res = await fetch('/auth/login', {",
+        "        method: 'POST',",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        body: JSON.stringify({ channel: channel })",
+        "      });",
+        "      var result = await res.json();",
         "      if (result.success) {",
         "        showToast('Browser window opened. Complete authentication.', 'info');",
         "        showLoginModal();",
@@ -1584,18 +1708,21 @@ export function generateConfigSubtabScript() {
         "      } else {",
         "        showToast(result.error || 'Failed to start login.', 'error');",
         "      }",
-        "    })",
-        "    .catch(function(err) { showToast('Failed to start login: ' + err.message, 'error'); });",
+        "    } catch(err) {",
+        "      showToast('Failed to start login: ' + err.message, 'error');",
+        "    }",
         "  };",
         // End login mode. Closes browser tab and hides modal.
-        "  window.endLogin = function() {",
+        "  window.endLogin = async function() {",
         "    stopLoginStatusPolling();",
-        "    fetch('/auth/done', { method: 'POST' })",
-        "    .then(function() {",
+        "    try {",
+        "      await fetch('/auth/done', { method: 'POST' });",
         "      hideLoginModal();",
         "      showToast('Authentication complete.', 'success');",
-        "    })",
-        "    .catch(function(err) { showToast('Error ending login: ' + err.message, 'error'); hideLoginModal(); });",
+        "    } catch(err) {",
+        "      showToast('Error ending login: ' + err.message, 'error');",
+        "      hideLoginModal();",
+        "    }",
         "  };",
         // Show the login modal.
         "  function showLoginModal() {",
@@ -1610,17 +1737,16 @@ export function generateConfigSubtabScript() {
         // Start polling login status to detect when tab is closed externally.
         "  function startLoginStatusPolling() {",
         "    stopLoginStatusPolling();",
-        "    loginStatusInterval = setInterval(function() {",
-        "      fetch('/auth/status')",
-        "      .then(function(response) { return response.json(); })",
-        "      .then(function(status) {",
+        "    loginStatusInterval = setInterval(async function() {",
+        "      try {",
+        "        var res = await fetch('/auth/status');",
+        "        var status = await res.json();",
         "        if (!status.active) {",
         "          stopLoginStatusPolling();",
         "          hideLoginModal();",
         "          showToast('Login session ended.', 'info');",
         "        }",
-        "      })",
-        "      .catch(function() { });",
+        "      } catch(err) {}",
         "    }, 1000);",
         "  }",
         // Stop polling login status.