prismcast 1.7.0 → 1.9.0

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

@@ -6,116 +6,90 @@ export function generateChannelsSubtabScript() {
     return [
         "<script>",
         "(function() {",
-        // Channels subtab switching function. Scoped to .channels-subtab-btn / .channels-subtab-panel to avoid colliding with Config tab subtabs.
-        "  function switchChannelsSubtab(subtab, updateUrl) {",
-        "    var btns = document.querySelectorAll('.channels-subtab-btn');",
-        "    var panels = document.querySelectorAll('.channels-subtab-panel');",
-        "    for(var i = 0; i < btns.length; i++) {",
-        "      btns[i].classList.remove('active');",
-        "      btns[i].setAttribute('aria-selected', 'false');",
-        "      if(btns[i].getAttribute('data-channels-subtab') === subtab) {",
-        "        btns[i].classList.add('active');",
-        "        btns[i].setAttribute('aria-selected', 'true');",
-        "      }",
-        "    }",
-        "    for(var j = 0; j < panels.length; j++) {",
-        "      panels[j].classList.remove('active');",
-        "      if(panels[j].id === 'channels-subtab-' + subtab) {",
-        "        panels[j].classList.add('active');",
-        "      }",
-        "    }",
-        "    try { localStorage.setItem('prismcast-channels-subtab', subtab); } catch(e) {}",
-        "    if(updateUrl !== false) {",
-        "      var newHash = (subtab === 'channels') ? '#channels' : '#channels/' + subtab;",
-        "      if(window.location.hash !== newHash) {",
-        "        window.location.hash = newHash;",
-        "      }",
-        "    }",
-        "  }",
-        // Expose for main tab script hashchange handler.
+        // Channels subtab switching via the shared factory.
+        "  const switchChannelsSubtab = createSubtabSwitcher({",
+        "    btnSelector: '.channels-subtab-btn',",
+        "    dataAttr: 'data-channels-subtab',",
+        "    hashFn: (s) => (s === 'channels') ? '#channels' : '#channels/' + s,",
+        "    panelPrefix: 'channels-subtab-',",
+        "    panelSelector: '.channels-subtab-panel',",
+        "    storageKey: 'prismcast-channels-subtab'",
+        "  });",
         "  window.switchChannelsSubtab = switchChannelsSubtab;",
-        // Attach click handlers to channels subtab buttons.
-        "  var btns = document.querySelectorAll('.channels-subtab-btn');",
-        "  for(var i = 0; i < btns.length; i++) {",
-        "    btns[i].addEventListener('click', function() {",
-        "      switchChannelsSubtab(this.getAttribute('data-channels-subtab'));",
-        "    });",
-        "  }",
         // Replace the Custom Profiles panel content with server-rendered HTML. Called after profile mutations to update the panel without a page reload.
-        // Re-runs processProviderDisplays() so dynamically swapped provider icon elements render correctly.
+        // Re-runs processServiceDisplays() so dynamically swapped service icon elements render correctly.
         "  function applyProfilePanel(html) {",
-        "    var panel = document.querySelector('#channels-subtab-custom-profiles .section');",
+        "    const panel = document.querySelector('#channels-subtab-custom-profiles .section');",
         "    if(panel) {",
         "      panel.innerHTML = html;",
-        "      if(window.processProviderDisplays) { processProviderDisplays(); }",
+        "      if(window.processServiceDisplays) { processServiceDisplays(); }",
         "    }",
         "  }",
         // Delete a user profile with confirmation.
-        "  window.deleteUserProfile = async function(key) {",
+        "  window.deleteUserProfile = async (key) => {",
         "    if(!confirm('Delete profile \"' + key + '\" and all its domain mappings?')) return;",
         "    try {",
-        "      var res = await fetch('/config/profiles/' + encodeURIComponent(key), { method: 'DELETE' });",
-        "      var data = await res.json();",
+        "      const res = await fetch('/config/profiles/' + encodeURIComponent(key), { method: 'DELETE' });",
+        "      const data = await res.json();",
         "      if(data.success) {",
         "        showToast(data.message || 'Profile deleted.', 'success');",
         "        if(data.panelHtml) { applyProfilePanel(data.panelHtml); }",
         "      } else { showToast('Failed to delete profile: ' + (data.error || 'Unknown error.'), 'error'); }",
-        "    } catch(err) { console.error('Profile delete error:', err); showToast('Failed to delete profile.', 'error'); }",
+        "    } catch(err) { console.error('Profile delete request failed.', err); showToast('Failed to delete profile.', 'error'); }",
         "  };",
         // Edit an existing user profile by pre-populating the wizard.
-        "  window.editUserProfile = async function(key) {",
+        "  window.editUserProfile = async (key) => {",
         "    try {",
-        "      var res = await fetch('/config/profiles');",
-        "      var data = await res.json();",
+        "      const res = await fetch('/config/profiles');",
+        "      const data = await res.json();",
         "      if(!data.success) { showToast('Failed to load profiles.', 'error'); return; }",
-        "      var profiles = data.profiles || [];",
-        "      var match = profiles.find(function(p) { return p.key === key; });",
+        "      const profiles = data.profiles || [];",
+        "      const match = profiles.find((p) => p.key === key);",
         "      if(!match || !match.profile) { showToast('Profile not found.', 'error'); return; }",
-        "      var p = match.profile;",
-        "      var editCs = p.channelSelection || {};",
-        "      var strat = editCs.strategy || 'none';",
-        "      var strategyFields = {};",
-        "      var editStrat = window.__wizardStrategies.find(function(st) { return st.id === strat; });",
+        "      const p = match.profile;",
+        "      const editCs = p.channelSelection || {};",
+        "      const strat = editCs.strategy || 'none';",
+        "      const strategyFields = {};",
+        "      const editStrat = window.__wizardStrategies.find((st) => st.id === strat);",
         "      if(editStrat) {",
-        "        for(var i = 0; i < editStrat.fields.length; i++) {",
-        "          var ef = editStrat.fields[i];",
+        "        for(const ef of editStrat.fields) {",
         "          if(ef.type === 'text' && editCs[ef.id]) { strategyFields[ef.id] = editCs[ef.id]; }",
         "          else if(ef.type === 'boolean' && editCs[ef.id]) { strategyFields[ef.id] = true; }",
         "        }",
         "      }",
-        "      var flags = {};",
-        "      var wizFlags = window.__wizardFlags;",
-        "      for(var i = 0; i < wizFlags.length; i++) { if(p[wizFlags[i].id]) flags[wizFlags[i].id] = true; }",
-        "      var domains = (match.domains && match.domains.length > 0) ?",
-        "        match.domains.map(function(d) { return { domain: d.domain, provider: d.provider || '', providerTag: d.providerTag || '' }; }) :",
-        "        [{ domain: '', provider: '', providerTag: '' }];",
+        "      const flags = {};",
+        "      const wizFlags = window.__wizardFlags;",
+        "      for(const wf of wizFlags) { if(p[wf.id]) flags[wf.id] = true; }",
+        "      const domains = (match.domains && match.domains.length > 0) ?",
+        "        match.domains.map((d) => ({ domain: d.domain, service: d.service || '', serviceTag: d.serviceTag || '' })) :",
+        "        [{ domain: '', service: '', serviceTag: '' }];",
         "      profileWizard.state = {",
         "        editKey: key, editMode: true, profileName: key,",
         "        baseProfile: p.extends || '', strategy: strat,",
         "        strategyFields: strategyFields, flags: flags,",
         "        hideSelector: p.hideSelector || '', domains: domains, description: p.description || ''",
         "      };",
-        "      profileWizard.open({ highestStep: 5, title: 'Edit Provider Profile' });",
-        "    } catch(e) { showToast('Failed to load profile data.', 'error'); }",
+        "      profileWizard.open({ highestStep: 5, title: 'Edit Service Profile' });",
+        "    } catch(e) { console.error('Profile data failed to load.', e); showToast('Failed to load profile data.', 'error'); }",
         "  };",
         // Pending import data stored while the import preview modal is open.
-        "  var pendingImportData = null;",
-        // Import a provider pack via file picker — shows a preview modal before importing.
-        "  window.startProviderImport = function() {",
-        "    var input = document.createElement('input');",
+        "  let pendingImportData = null;",
+        // Import a service pack via file picker — shows a preview modal before importing.
+        "  window.startServiceImport = () => {",
+        "    const input = document.createElement('input');",
         "    input.type = 'file';",
         "    input.accept = '.json,application/json';",
-        "    input.onchange = function() {",
+        "    input.onchange = () => {",
         "      if(!input.files || !input.files[0]) return;",
-        "      var reader = new FileReader();",
-        "      reader.onload = function() {",
+        "      const reader = new FileReader();",
+        "      reader.onload = () => {",
         "        try {",
-        "          var data = JSON.parse(reader.result);",
+        "          const data = JSON.parse(reader.result);",
         "          pendingImportData = data;",
-        "          var profileCount = data.profiles ? Object.keys(data.profiles).length : 0;",
-        "          var domainCount = data.domains ? Object.keys(data.domains).length : 0;",
-        "          var channelCount = data.channels ? Object.keys(data.channels).length : 0;",
-        "          var html = '<table class=\"import-summary-table\">';",
+        "          const profileCount = data.profiles ? Object.keys(data.profiles).length : 0;",
+        "          const domainCount = data.domains ? Object.keys(data.domains).length : 0;",
+        "          const channelCount = data.channels ? Object.keys(data.channels).length : 0;",
+        "          let html = '<table class=\"import-summary-table\">';",
         "          html += '<tr><td class=\"import-summary-label\">Pack name</td>';",
         "          html += '<td>' + esc(data.name || 'Unnamed') + '</td></tr>';",
         "          html += '<tr><td class=\"import-summary-label\">Profiles</td>';",
@@ -129,11 +103,12 @@ export function generateChannelsSubtabScript() {
         "            html += '<div class=\"export-divider\"></div>';",
         "            html += '<label class=\"export-option-label\">';",
         "            html += '<input type=\"checkbox\" id=\"import-include-channels\" checked> Include ' + plural(channelCount, 'channel') + '</label>';",
-        "            html += '<div class=\"export-hint\">Import the channel definitions from this pack. Uncheck to import only the provider profiles and domains.</div>';",
+        "            html += '<div class=\"export-hint\">Import the channel definitions from this pack. Uncheck to import only the service profiles and domains.</div>';",
         "          }",
         "          document.getElementById('import-modal-body').innerHTML = html;",
         "          document.getElementById('import-modal').style.display = 'flex';",
         "        } catch(e) {",
+        "          console.error('Service pack JSON failed to parse.', e);",
         "          showToast('Invalid JSON file.', 'error');",
         "        }",
         "      };",
@@ -142,28 +117,28 @@ export function generateChannelsSubtabScript() {
         "    input.click();",
         "  };",
         // Close the import preview modal.
-        "  window.closeImportModal = function() {",
+        "  window.closeImportModal = () => {",
         "    document.getElementById('import-modal').style.display = 'none';",
         "    pendingImportData = null;",
         "  };",
         // Execute the import after the user confirms in the preview modal.
-        "  window.executeImport = async function() {",
+        "  window.executeImport = async () => {",
         "    if(!pendingImportData) return;",
-        "    var skipChannels = false;",
-        "    var cb = document.getElementById('import-include-channels');",
+        "    let skipChannels = false;",
+        "    const cb = document.getElementById('import-include-channels');",
         "    if(cb && !cb.checked) skipChannels = true;",
-        "    var body = Object.assign({}, pendingImportData);",
+        "    const body = { ...pendingImportData };",
         "    if(skipChannels) body.skipChannels = true;",
         "    try {",
-        "      var res = await fetch('/config/profiles/import', {",
-        "        method: 'POST',",
+        "      const res = await fetch('/config/profiles/import', {",
+        "        body: JSON.stringify(body),",
         "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify(body)",
+        "        method: 'POST'",
         "      });",
-        "      var result = await res.json();",
+        "      const result = await res.json();",
         "      closeImportModal();",
         "      if(result.success) {",
-        "        var msg = 'Imported ' + plural(result.summary.profilesAdded, 'profile') + ', ' +",
+        "        let msg = 'Imported ' + plural(result.summary.profilesAdded, 'profile') + ', ' +",
         "          plural(result.summary.domainsAdded, 'domain') + ', ' + plural(result.summary.channelsAdded, 'channel') + '.';",
         "        if(result.warnings && result.warnings.length > 0) msg += ' Warnings: ' + result.warnings.join('; ');",
         "        showToast(msg, 'success');",
@@ -171,28 +146,27 @@ export function generateChannelsSubtabScript() {
         "      } else {",
         "        showToast('Import failed: ' + (result.error || 'Unknown error.'), 'error');",
         "      }",
-        "    } catch(err) { console.error('Provider pack import error:', err); closeImportModal(); showToast('Import request failed.', 'error'); }",
+        "    } catch(err) { console.error('Service pack import request failed.', err); closeImportModal(); showToast('Import request failed.', 'error'); }",
         "  };",
-        // Export a provider pack. Opens a modal with profile checklist and options. Shows provider name prominently for each profile with domain and channel counts.
+        // Export a service pack. Opens a modal with profile checklist and options. Shows service name prominently for each profile with domain and channel counts.
         // The select-all row is hidden when there is only one profile since the single checkbox makes it redundant.
-        "  window.startProviderExport = async function() {",
+        "  window.startServiceExport = async () => {",
         "    try {",
-        "      var res = await fetch('/config/profiles');",
-        "      var data = await res.json();",
-        "      var profiles = data.profiles || [];",
+        "      const res = await fetch('/config/profiles');",
+        "      const data = await res.json();",
+        "      const profiles = data.profiles || [];",
         "      if(profiles.length === 0) { showToast('No user profiles to export.', 'error'); return; }",
-        "      var listDiv = document.getElementById('export-profile-list');",
-        "      var html = '';",
-        "      for(var i = 0; i < profiles.length; i++) {",
-        "        var p = profiles[i];",
-        "        var domainCount = p.domains ? p.domains.length : 0;",
-        "        var channelCount = p.channelCount || 0;",
-        "        var providerName = '';",
-        "        for(var di = 0; di < (p.domains || []).length; di++) {",
-        "          if(p.domains[di].provider) { providerName = p.domains[di].provider; break; }",
+        "      const listDiv = document.getElementById('export-profile-list');",
+        "      let html = '';",
+        "      for(const p of profiles) {",
+        "        const domainCount = p.domains ? p.domains.length : 0;",
+        "        const channelCount = p.channelCount || 0;",
+        "        let serviceName = '';",
+        "        for(const dom of (p.domains || [])) {",
+        "          if(dom.service) { serviceName = dom.service; break; }",
         "        }",
-        "        var meta = [];",
-        "        if(providerName) meta.push(esc(providerName));",
+        "        const meta = [];",
+        "        if(serviceName) meta.push(esc(serviceName));",
         "        meta.push(plural(domainCount, 'domain'));",
         "        meta.push(plural(channelCount, 'channel'));",
         "        html += '<label class=\"export-profile-item\">';",
@@ -207,35 +181,35 @@ export function generateChannelsSubtabScript() {
         "      document.getElementById('export-select-all-row').style.display = (profiles.length > 1) ? '' : 'none';",
         "      document.getElementById('export-include-channels').checked = false;",
         "      document.getElementById('export-modal').style.display = 'flex';",
-        "    } catch(e) { showToast('Failed to load profiles.', 'error'); }",
+        "    } catch(e) { console.error('Profiles failed to load for export.', e); showToast('Failed to load profiles.', 'error'); }",
         "  };",
         // Toggle all export profile checkboxes.
-        "  window.toggleExportAll = function(master) {",
-        "    var cbs = document.querySelectorAll('.export-profile-cb');",
-        "    for(var i = 0; i < cbs.length; i++) cbs[i].checked = master.checked;",
+        "  window.toggleExportAll = (master) => {",
+        "    const cbs = document.querySelectorAll('.export-profile-cb');",
+        "    for(const cb of cbs) cb.checked = master.checked;",
         "  };",
         // Close the export modal.
-        "  window.closeExportModal = function() {",
+        "  window.closeExportModal = () => {",
         "    document.getElementById('export-modal').style.display = 'none';",
         "  };",
         // Execute the export by building the download URL from the selected profiles.
-        "  window.executeExport = function() {",
-        "    var cbs = document.querySelectorAll('.export-profile-cb:checked');",
+        "  window.executeExport = () => {",
+        "    const cbs = document.querySelectorAll('.export-profile-cb:checked');",
         "    if(cbs.length === 0) { showToast('Select at least one profile.', 'error'); return; }",
-        "    var keys = [];",
-        "    for(var i = 0; i < cbs.length; i++) keys.push(cbs[i].value);",
-        "    var url = '/config/profiles/export?profile=' + encodeURIComponent(keys.join(',')) + '&domains=1';",
+        "    const keys = [];",
+        "    for(const cb of cbs) keys.push(cb.value);",
+        "    let url = '/config/profiles/export?profile=' + encodeURIComponent(keys.join(',')) + '&domains=1';",
         "    if(document.getElementById('export-include-channels').checked) url += '&channels=1';",
         "    closeExportModal();",
         "    window.location.href = url;",
         "  };",
-        // Auto-generate a provider tag from a provider name: lowercase, strip non-alphanumeric.
-        "  function autoProviderTag(name) {",
+        // Auto-generate a service tag from a service name: lowercase, strip non-alphanumeric.
+        "  function autoServiceTag(name) {",
         "    return name.toLowerCase().replace(/[^a-z0-9]/g, '');",
         "  }",
         // HTML-escape user input for safe innerHTML insertion in the review step.
         "  function esc(str) {",
-        "    var d = document.createElement('div');",
+        "    const d = document.createElement('div');",
         "    d.appendChild(document.createTextNode(str || ''));",
         "    return d.innerHTML;",
         "  }",
@@ -245,7 +219,7 @@ export function generateChannelsSubtabScript() {
         "  }",
         // Profile builder wizard. Uses the shared wizard controller for step navigation, indicator updates, and error display. The state object holds wizard-specific
         // form data (profile name, base profile, strategy, flags, domains, description).
-        "  var profileWizard = createWizardController({",
+        "  const profileWizard = createWizardController({",
         "    contentId: 'wizard-content',",
         "    errorId: 'wizard-error',",
         "    modalId: 'wizard-modal',",
@@ -256,28 +230,28 @@ export function generateChannelsSubtabScript() {
         "  });",
         // Render the current profile wizard step into the content area. Manages button visibility and delegates to the step-specific content renderer.
         "  function renderProfileStep(step) {",
-        "    var content = document.getElementById('wizard-content');",
+        "    const content = document.getElementById('wizard-content');",
         "    if(!content) return;",
         // Show/hide navigation buttons based on the current step.
         "    if(step > 1) { profileWizard.show('wizard-back'); } else { profileWizard.hide('wizard-back'); }",
         "    if(step < 5) { profileWizard.show('wizard-next'); } else { profileWizard.hide('wizard-next'); }",
         "    if(step === 5) { profileWizard.show('wizard-save'); profileWizard.show('wizard-save-test'); }",
         "    else { profileWizard.hide('wizard-save'); profileWizard.hide('wizard-save-test'); }",
-        "    var html = '';",
-        "    var s = profileWizard.state;",
+        "    let html = '';",
+        "    const s = profileWizard.state;",
         // Step 1: Base Profile.
         "    if(step === 1) {",
         "      html += '<div class=\"field-group\">';",
         "      html += '<label class=\"wizard-label\" for=\"wizard-profile-name\">Profile Name</label>';",
-        "      var nameReadonly = s.editMode ? ' readonly style=\"opacity: 0.6; cursor: not-allowed;\"' : '';",
-        "      html += '<input type=\"text\" id=\"wizard-profile-name\" value=\"' + s.profileName.replace(/\"/g, '&quot;') +",
-        "        '\" placeholder=\"e.g., myProvider\"' + nameReadonly + '>';",
+        "      const nameReadonly = s.editMode ? ' readonly style=\"opacity: 0.6; cursor: not-allowed;\"' : '';",
+        "      html += '<input type=\"text\" id=\"wizard-profile-name\" value=\"' + s.profileName.replaceAll('\"', '&quot;') +",
+        "        '\" placeholder=\"e.g., myService\"' + nameReadonly + '>';",
         "      html += '<div class=\"field-hint\">' + (s.editMode ? 'Profile name cannot be changed.' :",
         "        'Unique identifier. Letters, numbers, and hyphens only.') + '</div>';",
         "      html += '</div>';",
         "      html += '<label class=\"wizard-label\">Base Profile</label>';",
-        "      var profiles = window.__wizardProfiles || {};",
-        "      var cats = [",
+        "      const profiles = window.__wizardProfiles || {};",
+        "      const cats = [",
         "        { key: 'api', title: 'Fullscreen API',",
         "          desc: 'For single-channel sites that require JavaScript\\'s requestFullscreen() API instead of keyboard shortcuts.' },",
         "        { key: 'keyboard', title: 'Keyboard Fullscreen',",
@@ -288,19 +262,17 @@ export function generateChannelsSubtabScript() {
         "          desc: 'For non-standard use cases like static pages without video.' },",
         "        { key: 'custom', title: 'Custom', desc: '' }",
         "      ];",
-        "      for(var ci = 0; ci < cats.length; ci++) {",
-        "        var cat = cats[ci];",
-        "        var items = (profiles[cat.key] || []).filter(function(p) { return !s.editMode || p.name !== s.editKey; });",
+        "      for(const cat of cats) {",
+        "        const items = (profiles[cat.key] || []).filter((p) => !s.editMode || p.name !== s.editKey);",
         "        if(items.length === 0) continue;",
         "        html += '<div class=\"wizard-profile-category\">';",
         "        html += '<h4>' + cat.title + '</h4>';",
         "        if(cat.desc) html += '<div class=\"wizard-category-desc\">' + esc(cat.desc) + '</div>';",
-        "        for(var pi = 0; pi < items.length; pi++) {",
-        "          var p = items[pi];",
-        "          var checked = (s.baseProfile === p.name) ? ' checked' : '';",
+        "        for(const p of items) {",
+        "          const checked = (s.baseProfile === p.name) ? ' checked' : '';",
         "          html += '<label class=\"wizard-profile-option\">';",
         "          html += '<input type=\"radio\" name=\"baseProfile\" value=\"' + p.name + '\"' + checked + '>';",
-        "          var sumTag = p.summary ? ' <span class=\"profile-option-summary\">(' + esc(p.summary) + ')</span>' : '';",
+        "          const sumTag = p.summary ? ' <span class=\"profile-option-summary\">(' + esc(p.summary) + ')</span>' : '';",
         "          html += '<div><div class=\"profile-option-name\">' + esc(p.name) + sumTag + '</div>';",
         "          html += '<div class=\"profile-option-desc\">' + esc(p.description) + '</div></div>';",
         "          html += '</label>';",
@@ -311,33 +283,31 @@ export function generateChannelsSubtabScript() {
         // Step 2: Channel Selection Strategy. Strategies and their fields are rendered from the server-side registry (window.__wizardStrategies).
         "    if(step === 2) {",
         "      html += '<label class=\"wizard-label\">Channel Selection Strategy</label>';",
-        "      var strategies = window.__wizardStrategies;",
-        "      for(var si = 0; si < strategies.length; si++) {",
-        "        var st = strategies[si];",
-        "        var checked = (s.strategy === st.id) ? ' checked' : '';",
+        "      const strategies = window.__wizardStrategies;",
+        "      for(const st of strategies) {",
+        "        const checked = (s.strategy === st.id) ? ' checked' : '';",
         "        html += '<label class=\"wizard-strategy-option\">';",
         "        html += '<input type=\"radio\" name=\"strategy\" value=\"' + st.id + '\"' + checked + '>';",
         "        html += '<div><div class=\"wizard-strategy-label\">' + st.name + '</div>';",
         "        html += '<div class=\"wizard-strategy-desc\">' + st.description + '</div></div>';",
         "        html += '</label>';",
         "      }",
-        "      var currentStrat = strategies.find(function(st) { return st.id === s.strategy; });",
+        "      const currentStrat = strategies.find((st) => st.id === s.strategy);",
         "      if(currentStrat && currentStrat.fields.length > 0) {",
         "        html += '<hr style=\"border: none; border-top: 1px solid var(--border-default); margin: 16px 0;\">';",
-        "        for(var fi = 0; fi < currentStrat.fields.length; fi++) {",
-        "          var f = currentStrat.fields[fi];",
+        "        for(const f of currentStrat.fields) {",
         "          if(f.type === 'text') {",
-        "            var val = (s.strategyFields[f.id] || '').replace(/\"/g, '&quot;');",
-        "            var optLabel = f.required ? '' : ' <span style=\"color: var(--text-muted);\">(optional)</span>';",
+        "            const val = (s.strategyFields[f.id] || '').replaceAll('\"', '&quot;');",
+        "            const optLabel = f.required ? '' : ' <span style=\"color: var(--text-muted);\">(optional)</span>';",
         "            html += '<div class=\"field-group\">';",
         "            html += '<label class=\"wizard-label\" for=\"wizard-sf-' + f.id + '\">' + f.label + optLabel + '</label>';",
         "            html += '<input type=\"text\" id=\"wizard-sf-' + f.id + '\" data-field=\"' + f.id + '\" value=\"' + val + '\"';",
-        "            if(f.placeholder) html += ' placeholder=\"' + f.placeholder.replace(/\"/g, '&quot;') + '\"';",
+        "            if(f.placeholder) html += ' placeholder=\"' + f.placeholder.replaceAll('\"', '&quot;') + '\"';",
         "            html += '>';",
         "            if(f.hint) html += '<div class=\"field-hint\">' + f.hint + '</div>';",
         "            html += '</div>';",
         "          } else if(f.type === 'boolean') {",
-        "            var boolChecked = s.strategyFields[f.id] ? ' checked' : '';",
+        "            const boolChecked = s.strategyFields[f.id] ? ' checked' : '';",
         "            html += '<label class=\"wizard-flag\">';",
         "            html += '<input type=\"checkbox\" data-field=\"' + f.id + '\"' + boolChecked + '>';",
         "            html += '<div><div class=\"wizard-flag-label\">' + f.label + '</div>';",
@@ -352,10 +322,9 @@ export function generateChannelsSubtabScript() {
         "      html += '<label class=\"wizard-label\">Profile Flags</label>';",
         "      html += '<div class=\"field-hint\" style=\"margin-bottom: 12px;\">These override the base profile. ' +",
         "        'Only change what differs from ' + s.baseProfile + '.</div>';",
-        "      var wizFlags = window.__wizardFlags;",
-        "      for(var fi = 0; fi < wizFlags.length; fi++) {",
-        "        var f = wizFlags[fi];",
-        "        var checked = s.flags[f.id] ? ' checked' : '';",
+        "      const wizFlags = window.__wizardFlags;",
+        "      for(const f of wizFlags) {",
+        "        const checked = s.flags[f.id] ? ' checked' : '';",
         "        html += '<label class=\"wizard-flag\">';",
         "        html += '<input type=\"checkbox\" name=\"flag-' + f.id + '\"' + checked + '>';",
         "        html += '<div><div class=\"wizard-flag-label\">' + f.label + '</div>';",
@@ -364,7 +333,7 @@ export function generateChannelsSubtabScript() {
         "      }",
         "      html += '<div class=\"field-group\" style=\"margin-top: 12px;\">';",
         "      html += '<label class=\"wizard-label\" for=\"wizard-hide-selector\">Hide Selector (CSS) <span style=\"color: var(--text-muted);\">(optional)</span></label>';",
-        "      html += '<input type=\"text\" id=\"wizard-hide-selector\" value=\"' + s.hideSelector.replace(/\"/g, '&quot;') +",
+        "      html += '<input type=\"text\" id=\"wizard-hide-selector\" value=\"' + s.hideSelector.replaceAll('\"', '&quot;') +",
         "        '\" placeholder=\"e.g., .overlay, .ad-banner\">';",
         "      html += '<div class=\"field-hint\">Overlay elements to hide during capture.</div>';",
         "      html += '</div>';",
@@ -373,22 +342,21 @@ export function generateChannelsSubtabScript() {
         "    if(step === 4) {",
         "      html += '<label class=\"wizard-label\">Domain Mapping</label>';",
         "      html += '<div class=\"field-hint\" style=\"margin-bottom: 12px;\">Map a streaming site domain to this profile.</div>';",
-        "      for(var di = 0; di < s.domains.length; di++) {",
-        "        var d = s.domains[di];",
+        "      for(const [ di, d ] of s.domains.entries()) {",
         "        html += '<div class=\"wizard-domain-row\" data-domain-idx=\"' + di + '\">';",
         "        html += '<div class=\"field-group\">';",
         "        html += '<label class=\"wizard-label\">Domain</label>';",
-        "        html += '<input type=\"text\" class=\"domain-input\" value=\"' + d.domain.replace(/\"/g, '&quot;') + '\" placeholder=\"e.g., watch.sling.com\">';",
+        "        html += '<input type=\"text\" class=\"domain-input\" value=\"' + d.domain.replaceAll('\"', '&quot;') + '\" placeholder=\"e.g., watch.sling.com\">';",
         "        html += '</div>';",
         "        html += '<div class=\"field-group\">';",
-        "        html += '<label class=\"wizard-label\">Provider Name</label>';",
-        "        html += '<input type=\"text\" class=\"provider-input\" value=\"' + d.provider.replace(/\"/g, '&quot;') + '\" placeholder=\"e.g., Sling TV\">';",
+        "        html += '<label class=\"wizard-label\">Service Name</label>';",
+        "        html += '<input type=\"text\" class=\"provider-input\" value=\"' + d.service.replaceAll('\"', '&quot;') + '\" placeholder=\"e.g., Sling TV\">';",
         "        html += '</div>';",
         "        html += '<div class=\"field-group\">';",
-        "        html += '<label class=\"wizard-label\">Provider Tag <span style=\"color: var(--text-muted);\">(auto-filled)</span></label>';",
-        "        html += '<input type=\"text\" class=\"provider-tag-input\" value=\"' + d.providerTag.replace(/\"/g, '&quot;') +",
+        "        html += '<label class=\"wizard-label\">Service Tag <span style=\"color: var(--text-muted);\">(auto-filled)</span></label>';",
+        "        html += '<input type=\"text\" class=\"provider-tag-input\" value=\"' + d.serviceTag.replaceAll('\"', '&quot;') +",
         "          '\" placeholder=\"auto-generated\">';",
-        "        html += '<div class=\"field-hint\">Identifier for the provider filter. Auto-generated from provider name.</div>';",
+        "        html += '<div class=\"field-hint\">Identifier for the service filter. Auto-generated from service name.</div>';",
         "        html += '</div>';",
         "        html += '</div>';",
         "      }",
@@ -401,16 +369,15 @@ export function generateChannelsSubtabScript() {
         "      html += '<tr><td>Profile</td><td>' + esc(s.profileName) + '</td></tr>';",
         "      html += '<tr><td>Extends</td><td>' + esc(s.baseProfile) + '</td></tr>';",
         "      html += '<tr><td>Strategy</td><td>' + esc(s.strategy) + '</td></tr>';",
-        "      var domainList = s.domains.filter(function(d) { return d.domain; }).map(function(d) { return esc(d.domain); }).join(', ');",
+        "      const domainList = s.domains.filter((d) => d.domain).map((d) => esc(d.domain)).join(', ');",
         "      html += '<tr><td>Domain(s)</td><td>' + (domainList || 'none') + '</td></tr>';",
-        "      var providerList = s.domains.filter(function(d) { return d.provider; }).map(function(d) { return esc(d.provider); }).join(', ');",
-        "      html += '<tr><td>Provider</td><td>' + (providerList || 'none') + '</td></tr>';",
+        "      const serviceList = s.domains.filter((d) => d.service).map((d) => esc(d.service)).join(', ');",
+        "      html += '<tr><td>Service</td><td>' + (serviceList || 'none') + '</td></tr>';",
         "      if(s.strategy !== 'none') {",
-        "        var reviewStrat = window.__wizardStrategies.find(function(st) { return st.id === s.strategy; });",
+        "        const reviewStrat = window.__wizardStrategies.find((st) => st.id === s.strategy);",
         "        if(reviewStrat) {",
-        "          for(var ri = 0; ri < reviewStrat.fields.length; ri++) {",
-        "            var rf = reviewStrat.fields[ri];",
-        "            var rv = s.strategyFields[rf.id];",
+        "          for(const rf of reviewStrat.fields) {",
+        "            const rv = s.strategyFields[rf.id];",
         "            if(rf.type === 'text' && rv) {",
         "              html += '<tr><td>' + esc(rf.label.replace(/ \\(CSS\\)/, '')) + '</td><td><code>' + esc(rv) + '</code></td></tr>';",
         "            } else if(rf.type === 'boolean' && rv) {",
@@ -419,7 +386,7 @@ export function generateChannelsSubtabScript() {
         "          }",
         "        }",
         "      }",
-        "      var flagNames = Object.keys(s.flags).filter(function(k) { return s.flags[k]; });",
+        "      const flagNames = Object.keys(s.flags).filter((k) => s.flags[k]);",
         "      if(flagNames.length > 0) {",
         "        html += '<tr><td>Flags</td><td>' + esc(flagNames.join(', ')) + '</td></tr>';",
         "      }",
@@ -436,68 +403,65 @@ export function generateChannelsSubtabScript() {
         "  }",
         // Attach event handlers to dynamically rendered profile wizard inputs.
         "  function attachProfileHandlers() {",
-        "    var s = profileWizard.state;",
+        "    const s = profileWizard.state;",
         // Step 1: profile name and base profile radio.
-        "    var nameInput = document.getElementById('wizard-profile-name');",
+        "    const nameInput = document.getElementById('wizard-profile-name');",
         "    if(nameInput) nameInput.addEventListener('input', function() { s.profileName = this.value; });",
-        "    var radios = document.querySelectorAll('input[name=\"baseProfile\"]');",
-        "    for(var i = 0; i < radios.length; i++) {",
-        "      radios[i].addEventListener('change', function() { s.baseProfile = this.value; });",
+        "    const radios = document.querySelectorAll('input[name=\"baseProfile\"]');",
+        "    for(const radio of radios) {",
+        "      radio.addEventListener('change', function() { s.baseProfile = this.value; });",
         "    }",
         // Step 2: strategy radio and strategy field inputs. Text and boolean fields are bound by data-field attribute. Strategy radio triggers a re-render to show
         // the selected strategy's fields.
-        "    var stratRadios = document.querySelectorAll('input[name=\"strategy\"]');",
-        "    for(var i = 0; i < stratRadios.length; i++) {",
-        "      stratRadios[i].addEventListener('change', function() { s.strategy = this.value; renderProfileStep(profileWizard.getStep()); });",
+        "    const stratRadios = document.querySelectorAll('input[name=\"strategy\"]');",
+        "    for(const stratRadio of stratRadios) {",
+        "      stratRadio.addEventListener('change', function() { s.strategy = this.value; renderProfileStep(profileWizard.getStep()); });",
         "    }",
-        "    var sfTextInputs = document.querySelectorAll('#wizard-content input[type=\"text\"][data-field]');",
-        "    for(var i = 0; i < sfTextInputs.length; i++) {",
-        "      sfTextInputs[i].addEventListener('input', function() { s.strategyFields[this.getAttribute('data-field')] = this.value; });",
+        "    const sfTextInputs = document.querySelectorAll('#wizard-content input[type=\"text\"][data-field]');",
+        "    for(const sfTextInput of sfTextInputs) {",
+        "      sfTextInput.addEventListener('input', function() { s.strategyFields[this.getAttribute('data-field')] = this.value; });",
         "    }",
-        "    var sfCheckInputs = document.querySelectorAll('#wizard-content input[type=\"checkbox\"][data-field]');",
-        "    for(var i = 0; i < sfCheckInputs.length; i++) {",
-        "      sfCheckInputs[i].addEventListener('change', function() {",
+        "    const sfCheckInputs = document.querySelectorAll('#wizard-content input[type=\"checkbox\"][data-field]');",
+        "    for(const sfCheckInput of sfCheckInputs) {",
+        "      sfCheckInput.addEventListener('change', function() {",
         "        if(this.checked) { s.strategyFields[this.getAttribute('data-field')] = true; }",
         "        else { delete s.strategyFields[this.getAttribute('data-field')]; }",
         "      });",
         "    }",
         // Step 3: flag checkboxes and hide selector.
-        "    var flagCbs = document.querySelectorAll('input[name^=\"flag-\"]');",
-        "    for(var i = 0; i < flagCbs.length; i++) {",
-        "      flagCbs[i].addEventListener('change', function() {",
-        "        var flagName = this.name.replace('flag-', '');",
+        "    const flagCbs = document.querySelectorAll('input[name^=\"flag-\"]');",
+        "    for(const flagCb of flagCbs) {",
+        "      flagCb.addEventListener('change', function() {",
+        "        const flagName = this.name.replace('flag-', '');",
         "        if(this.checked) { s.flags[flagName] = true; } else { delete s.flags[flagName]; }",
         "      });",
         "    }",
-        "    var hideInput = document.getElementById('wizard-hide-selector');",
+        "    const hideInput = document.getElementById('wizard-hide-selector');",
         "    if(hideInput) hideInput.addEventListener('input', function() { s.hideSelector = this.value; });",
-        // Step 4: add-domain button and domain inputs with auto-fill for provider tag.
-        "    var addDomainBtn = document.getElementById('wizard-add-domain-btn');",
+        // Step 4: add-domain button and domain inputs with auto-fill for service tag. Per-iteration let bindings from for...of.entries() capture the correct index
+        // in each closure — no IIFE wrapper needed.
+        "    const addDomainBtn = document.getElementById('wizard-add-domain-btn');",
         "    if(addDomainBtn) addDomainBtn.addEventListener('click', addWizardDomain);",
-        "    var domainRows = document.querySelectorAll('.wizard-domain-row');",
-        "    for(var i = 0; i < domainRows.length; i++) {",
-        "      (function(idx) {",
-        "        var row = domainRows[idx];",
-        "        var domInput = row.querySelector('.domain-input');",
-        "        var provInput = row.querySelector('.provider-input');",
-        "        var tagInput = row.querySelector('.provider-tag-input');",
-        "        if(domInput) domInput.addEventListener('input', function() { s.domains[idx].domain = this.value; });",
-        "        if(provInput) provInput.addEventListener('input', function() {",
-        "          s.domains[idx].provider = this.value;",
-        "          var tag = autoProviderTag(this.value);",
-        "          s.domains[idx].providerTag = tag;",
-        "          if(tagInput) tagInput.value = tag;",
-        "        });",
-        "        if(tagInput) tagInput.addEventListener('input', function() { s.domains[idx].providerTag = this.value; });",
-        "      })(i);",
+        "    for(const [ idx, row ] of document.querySelectorAll('.wizard-domain-row').entries()) {",
+        "      const domInput = row.querySelector('.domain-input');",
+        "      const provInput = row.querySelector('.provider-input');",
+        "      const tagInput = row.querySelector('.provider-tag-input');",
+        "      if(domInput) domInput.addEventListener('input', function() { s.domains[idx].domain = this.value; });",
+        "      if(provInput) provInput.addEventListener('input', function() {",
+        "        s.domains[idx].service = this.value;",
+        "        const tag = autoServiceTag(this.value);",
+        "        s.domains[idx].serviceTag = tag;",
+        "        if(tagInput) tagInput.value = tag;",
+        "      });",
+        "      if(tagInput) tagInput.addEventListener('input', function() { s.domains[idx].serviceTag = this.value; });",
         "    }",
         // Step 5: description textarea.
-        "    var descInput = document.getElementById('wizard-description');",
+        "    const descInput = document.getElementById('wizard-description');",
         "    if(descInput) descInput.addEventListener('input', function() { s.description = this.value; });",
         "  }",
         // Validate the current profile wizard step. Returns an error message or empty string if valid.
         "  function validateProfileStep(step) {",
-        "    var s = profileWizard.state;",
+        "    const s = profileWizard.state;",
         "    if(step === 1) {",
         "      if(!s.editMode) {",
         "        if(!s.profileName.trim()) return 'Profile name is required.';",
@@ -508,10 +472,9 @@ export function generateChannelsSubtabScript() {
         "      if(!s.baseProfile) return 'Select a base profile.';",
         "    }",
         "    if(step === 2) {",
-        "      var valStrat = window.__wizardStrategies.find(function(st) { return st.id === s.strategy; });",
+        "      const valStrat = window.__wizardStrategies.find((st) => st.id === s.strategy);",
         "      if(valStrat) {",
-        "        for(var vi = 0; vi < valStrat.fields.length; vi++) {",
-        "          var vf = valStrat.fields[vi];",
+        "        for(const vf of valStrat.fields) {",
         "          if(vf.required && (vf.type === 'text') && !(s.strategyFields[vf.id] || '').trim()) {",
         "            return vf.label.replace(/ \\(CSS\\)/, '') + ' is required for the ' + valStrat.name + ' strategy.';",
         "          }",
@@ -519,63 +482,61 @@ export function generateChannelsSubtabScript() {
         "      }",
         "    }",
         "    if(step === 4) {",
-        "      var hasDomain = s.domains.some(function(d) { return d.domain.trim(); });",
+        "      const hasDomain = s.domains.some((d) => d.domain.trim());",
         "      if(!hasDomain) return 'At least one domain is required.';",
         "    }",
         "    return '';",
         "  }",
         // Open the profile builder wizard and reset state for a new profile.
-        "  window.openWizard = function() {",
+        "  window.openWizard = () => {",
         "    profileWizard.state = {",
         "      editKey: null, editMode: false, profileName: '', baseProfile: '', strategy: 'none',",
         "      strategyFields: {}, flags: {}, hideSelector: '',",
-        "      domains: [{ domain: '', provider: '', providerTag: '' }], description: ''",
+        "      domains: [{ domain: '', service: '', serviceTag: '' }], description: ''",
         "    };",
-        "    profileWizard.open({ title: 'New Provider Profile' });",
+        "    profileWizard.open({ title: 'New Service Profile' });",
         "  };",
         // Add another domain row to step 4 and re-render.
         "  function addWizardDomain() {",
-        "    profileWizard.state.domains.push({ domain: '', provider: '', providerTag: '' });",
+        "    profileWizard.state.domains.push({ domain: '', service: '', serviceTag: '' });",
         "    renderProfileStep(profileWizard.getStep());",
         "  }",
         // Save the profile to the server.
-        "  window.saveProfile = async function(andTest) {",
-        "    var s = profileWizard.state;",
-        "    var profile = { extends: s.baseProfile };",
+        "  window.saveProfile = async (andTest) => {",
+        "    const s = profileWizard.state;",
+        "    const profile = { extends: s.baseProfile };",
         "    if(s.strategy !== 'none') {",
-        "      var cs = { strategy: s.strategy };",
-        "      var saveStrat = window.__wizardStrategies.find(function(st) { return st.id === s.strategy; });",
+        "      const cs = { strategy: s.strategy };",
+        "      const saveStrat = window.__wizardStrategies.find((st) => st.id === s.strategy);",
         "      if(saveStrat) {",
-        "        for(var si = 0; si < saveStrat.fields.length; si++) {",
-        "          var sf = saveStrat.fields[si];",
-        "          var sfVal = s.strategyFields[sf.id];",
+        "        for(const sf of saveStrat.fields) {",
+        "          const sfVal = s.strategyFields[sf.id];",
         "          if(sf.type === 'text' && sfVal) { cs[sf.id] = sfVal; }",
         "          else if(sf.type === 'boolean' && sfVal) { cs[sf.id] = true; }",
         "        }",
         "      }",
         "      profile.channelSelection = cs;",
         "    }",
-        "    var flagKeys = Object.keys(s.flags).filter(function(k) { return s.flags[k]; });",
-        "    for(var i = 0; i < flagKeys.length; i++) { profile[flagKeys[i]] = true; }",
+        "    const flagKeys = Object.keys(s.flags).filter((k) => s.flags[k]);",
+        "    for(const fk of flagKeys) { profile[fk] = true; }",
         "    if(s.hideSelector) profile.hideSelector = s.hideSelector;",
         "    if(s.description) profile.description = s.description;",
-        "    var domains = {};",
-        "    for(var i = 0; i < s.domains.length; i++) {",
-        "      var d = s.domains[i];",
+        "    const domains = {};",
+        "    for(const d of s.domains) {",
         "      if(d.domain.trim()) {",
         "        domains[d.domain.trim()] = { profile: s.profileName };",
-        "        if(d.provider.trim()) domains[d.domain.trim()].provider = d.provider.trim();",
-        "        if(d.providerTag.trim()) domains[d.domain.trim()].providerTag = d.providerTag.trim();",
+        "        if(d.service.trim()) domains[d.domain.trim()].service = d.service.trim();",
+        "        if(d.serviceTag.trim()) domains[d.domain.trim()].serviceTag = d.serviceTag.trim();",
         "      }",
         "    }",
-        "    var body = { domains: domains, key: s.profileName, profile: profile };",
+        "    const body = { domains: domains, key: s.profileName, profile: profile };",
         "    try {",
-        "      var res = await fetch('/config/profiles', {",
-        "        method: 'POST',",
+        "      const res = await fetch('/config/profiles', {",
+        "        body: JSON.stringify(body),",
         "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify(body)",
+        "        method: 'POST'",
         "      });",
-        "      var data = await res.json();",
+        "      const data = await res.json();",
         "      if(data.success) {",
         "        profileWizard.close();",
         "        if(data.panelHtml) { applyProfilePanel(data.panelHtml); }",
@@ -586,27 +547,27 @@ export function generateChannelsSubtabScript() {
         "        profileWizard.setError(data.error || 'Failed to save profile.');",
         "      }",
         "    } catch(err) {",
-        "      console.error('Profile save error:', err);",
+        "      console.error('Profile save request failed.', err);",
         "      profileWizard.setError('Request failed.');",
         "    }",
         "  };",
         // Test flow: open a browser to a URL with the profile applied and allow selector checking.
-        "  var testSelectors = {};",
+        "  let testSelectors = {};",
         // Start a profile test by opening the browser to a URL.
-        "  window.startProfileTest = async function(url) {",
-        "    var s = profileWizard.state;",
+        "  window.startProfileTest = async (url) => {",
+        "    const s = profileWizard.state;",
         "    testSelectors = {};",
         "    if(s.strategy !== 'none' && s.strategyFields.matchSelector) testSelectors.matchSelector = s.strategyFields.matchSelector;",
         "    if(s.strategyFields.playSelector) testSelectors.playSelector = s.strategyFields.playSelector;",
         "    if(s.hideSelector) testSelectors.hideSelector = s.hideSelector;",
-        "    var testUrl = url.indexOf('://') === -1 ? 'https://' + url : url;",
+        "    const testUrl = url.includes('://') ? url : 'https://' + url;",
         "    try {",
-        "      var res = await fetch('/config/profiles/test', {",
-        "        method: 'POST',",
+        "      const res = await fetch('/config/profiles/test', {",
+        "        body: JSON.stringify({ url: testUrl }),",
         "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify({ url: testUrl })",
+        "        method: 'POST'",
         "      });",
-        "      var data = await res.json();",
+        "      const data = await res.json();",
         "      if(data.success) {",
         "        document.getElementById('test-modal').style.display = 'flex';",
         "        document.getElementById('test-selector-results').style.display = 'none';",
@@ -615,31 +576,30 @@ export function generateChannelsSubtabScript() {
         "      } else {",
         "        showToast('Failed to start test: ' + (data.error || 'Unknown error.'), 'error');",
         "      }",
-        "    } catch(e) { showToast('Failed to start test.', 'error'); }",
+        "    } catch(e) { console.error('Profile test failed to start.', e); showToast('Failed to start test.', 'error'); }",
         "  };",
         // Check CSS selectors against the live page.
-        "  window.checkSelectors = async function() {",
+        "  window.checkSelectors = async () => {",
         "    if(Object.keys(testSelectors).length === 0) return;",
         "    try {",
-        "      var res = await fetch('/config/profiles/test/check', {",
-        "        method: 'POST',",
+        "      const res = await fetch('/config/profiles/test/check', {",
+        "        body: JSON.stringify({ selectors: testSelectors }),",
         "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify({ selectors: testSelectors })",
+        "        method: 'POST'",
         "      });",
-        "      var data = await res.json();",
-        "      var resultsDiv = document.getElementById('test-selector-results');",
+        "      const data = await res.json();",
+        "      const resultsDiv = document.getElementById('test-selector-results');",
         "      if(!data.success || !data.results) {",
         "        resultsDiv.innerHTML = '<p style=\"color: var(--status-error-text);\">Check failed.</p>';",
         "        resultsDiv.style.display = 'block';",
         "        return;",
         "      }",
-        "      var html = '<table style=\"width: 100%; font-size: 13px; margin: 12px 0;\">';",
-        "      var names = Object.keys(data.results);",
-        "      for(var i = 0; i < names.length; i++) {",
-        "        var name = names[i];",
-        "        var r = data.results[name];",
-        "        var color = r.valid && r.count > 0 ? 'var(--status-success-text)' : 'var(--status-error-text)';",
-        "        var text = !r.valid ? 'Invalid selector' : r.count + ' element(s)';",
+        "      let html = '<table style=\"width: 100%; font-size: 13px; margin: 12px 0;\">';",
+        "      const names = Object.keys(data.results);",
+        "      for(const name of names) {",
+        "        const r = data.results[name];",
+        "        const color = r.valid && r.count > 0 ? 'var(--status-success-text)' : 'var(--status-error-text)';",
+        "        const text = !r.valid ? 'Invalid selector' : r.count + ' element(s)';",
         "        html += '<tr><td style=\"padding: 4px 8px;\">' + esc(name) + '</td>';",
         "        html += '<td style=\"padding: 4px 8px; color: ' + color + ';\">' + text + '</td></tr>';",
         "      }",
@@ -647,59 +607,59 @@ export function generateChannelsSubtabScript() {
         "      resultsDiv.innerHTML = html;",
         "      resultsDiv.style.display = 'block';",
         "    } catch(e) {",
-        "      var resultsDiv = document.getElementById('test-selector-results');",
+        "      const resultsDiv = document.getElementById('test-selector-results');",
         "      resultsDiv.innerHTML = '<p style=\"color: var(--status-error-text);\">Check request failed.</p>';",
         "      resultsDiv.style.display = 'block';",
         "    }",
         "  };",
         // End the test flow and close the test dialog.
-        "  window.endProfileTest = async function() {",
+        "  window.endProfileTest = async () => {",
         "    try {",
-        "      var res = await fetch('/config/profiles/test/done', { method: 'POST' });",
-        "      var data = await res.json();",
+        "      const res = await fetch('/config/profiles/test/done', { method: 'POST' });",
+        "      const data = await res.json();",
         "      document.getElementById('test-modal').style.display = 'none';",
         "      if(data.panelHtml) { applyProfilePanel(data.panelHtml); }",
         "    } catch(err) {",
-        "      console.error('End profile test error:', err);",
+        "      console.error('Profile test end request failed.', err);",
         "      document.getElementById('test-modal').style.display = 'none';",
         "    }",
         "  };",
-        // Read embedded JSON data for the browse modal. Provider list and guide URLs are embedded server-side. Channel state (lineup matching) is provided by
+        // Read embedded JSON data for the browse modal. Service list and guide URLs are embedded server-side. Channel state (lineup matching) is provided by
         // the annotated discovery response, not by embedded data.
-        "  var browseProviders = [];",
-        "  var browseGuideUrls = {};",
+        "  let browseServices = [];",
+        "  let browseGuideUrls = {};",
         "  try {",
-        "    var pEl = document.getElementById('browse-providers-data');",
-        "    if(pEl) browseProviders = JSON.parse(pEl.textContent || '[]');",
-        "    var gEl = document.getElementById('browse-guide-urls-data');",
+        "    const pEl = document.getElementById('browse-services-data');",
+        "    if(pEl) browseServices = JSON.parse(pEl.textContent || '[]');",
+        "    const gEl = document.getElementById('browse-guide-urls-data');",
         "    if(gEl) browseGuideUrls = JSON.parse(gEl.textContent || '{}');",
-        "  } catch(e) {}",
-        // Browse Channels wizard. Two steps: Provider (picker grid) and Channels (discovery + channel list). Uses the shared wizard controller for step navigation
-        // and indicator updates. The state object tracks the selected provider slug and label, and the filtered provider list for the current session.
-        "  var browseWizard = createWizardController({",
+        "  } catch(e) { console.warn('Embedded browse services data failed to parse.', e); }",
+        // Browse Channels wizard. Two steps: Service (picker grid) and Channels (discovery + channel list). Uses the shared wizard controller for step navigation
+        // and indicator updates. The state object tracks the selected service slug and label, and the filtered service list for the current session.
+        "  const browseWizard = createWizardController({",
         "    contentId: 'browse-content',",
         "    modalId: 'browse-modal',",
         "    onRender: renderBrowseStep,",
-        "    onValidate: function(step) { return (step === 1 && !browseWizard.state.slug) ? 'Select a provider.' : ''; },",
+        "    onValidate: (step) => (step === 1 && !browseWizard.state.slug) ? 'Select a service.' : '',",
         "    stepCount: 2,",
         "    titleId: 'browse-title'",
         "  });",
-        // Open the browse modal. If only one provider is available (or in the filter), skip step 1 and open directly on step 2 with the provider pre-selected.
-        "  window.openBrowseModal = function() {",
-        // Determine which providers to show. Filter to providers that are enabled in the provider filter if a filter is active.
-        "    var enabledFilter = [];",
-        "    var chips = document.querySelectorAll('.provider-chip');",
-        "    for(var i = 0; i < chips.length; i++) {",
-        "      var tag = chips[i].getAttribute('data-tag');",
+        // Open the browse modal. If only one service is available (or in the filter), skip step 1 and open directly on step 2 with the service pre-selected.
+        "  window.openBrowseModal = () => {",
+        // Determine which services to show. Filter to services that are enabled in the service filter if a filter is active.
+        "    const enabledFilter = [];",
+        "    const chips = document.querySelectorAll('.provider-chip');",
+        "    for(const chip of chips) {",
+        "      const tag = chip.getAttribute('data-tag');",
         "      if(tag) enabledFilter.push(tag);",
         "    }",
-        "    var available = browseProviders;",
+        "    let available = browseServices;",
         "    if(enabledFilter.length > 0) {",
-        "      available = browseProviders.filter(function(p) { return enabledFilter.indexOf(p.slug) !== -1; });",
+        "      available = browseServices.filter((p) => enabledFilter.includes(p.slug));",
         "    }",
-        // If no discoverable providers match the filter, show all providers.
-        "    if(available.length === 0) available = browseProviders;",
-        // If exactly one provider is available, skip the picker and go straight to channel discovery on step 2.
+        // If no discoverable services match the filter, show all services.
+        "    if(available.length === 0) available = browseServices;",
+        // If exactly one service is available, skip the picker and go straight to channel discovery on step 2.
         "    if(available.length === 1) {",
         "      browseWizard.state = { available: available, label: available[0].label, slug: available[0].slug };",
         "      browseWizard.open({ highestStep: 2, step: 2 });",
@@ -708,57 +668,56 @@ export function generateChannelsSubtabScript() {
         "    browseWizard.state = { available: available, label: null, slug: null };",
         "    browseWizard.open();",
         "  };",
-        // Select a provider from the picker grid and advance to step 2.
-        "  function selectBrowseProvider(slug, label) {",
+        // Select a service from the picker grid and advance to step 2.
+        "  function selectBrowseService(slug, label) {",
         "    browseWizard.state.slug = slug;",
         "    browseWizard.state.label = label;",
         "    browseWizard.next();",
         "  }",
-        // Render the current browse step. Step 1: provider picker grid. Step 2: channel discovery and list.
+        // Render the current browse step. Step 1: service picker grid. Step 2: channel discovery and list.
         "  function renderBrowseStep(step) {",
-        "    var content = document.getElementById('browse-content');",
-        // Show/hide navigation buttons. Back is only available on step 2 when there are multiple providers.
+        "    const content = document.getElementById('browse-content');",
+        // Show/hide navigation buttons. Back is only available on step 2 when there are multiple services.
         "    if(step > 1 && browseWizard.state.available.length > 1) { browseWizard.show('browse-back'); }",
         "    else { browseWizard.hide('browse-back'); }",
         // Reset title and apply button on each render.
         "    browseWizard.setTitle('Browse Channels');",
         "    browseWizard.hide('browse-add-btn');",
-        // Step 1: Provider picker grid. Clear the provider selection so the user must pick again (prevents the step indicator from jumping to step 2 with a stale
-        // provider after navigating back).
+        // Step 1: Service picker grid. Clear the service selection so the user must pick again (prevents the step indicator from jumping to step 2 with a stale
+        // service after navigating back).
         "    if(step === 1) {",
         "      browseWizard.state.slug = null;",
         "      browseWizard.state.label = null;",
-        "      var available = browseWizard.state.available;",
-        "      var html = '<p class=\"wizard-hint\">Select a provider to see its available channels.</p>';",
+        "      const available = browseWizard.state.available;",
+        "      let html = '<p class=\"wizard-hint\">Select a service to see its available channels.</p>';",
         "      html += '<div class=\"wizard-provider-grid\">';",
-        "      for(var j = 0; j < available.length; j++) {",
-        "        var p = available[j];",
+        "      for(const p of available) {",
         "        html += '<div class=\"wizard-provider-card\" data-slug=\"' + esc(p.slug) + '\" data-label=\"' + esc(p.label) + '\">';",
-        "        html += providerIconHtml(p.domain, esc(p.label), 'provider-icon', 'provider-icon-text', 'both', p.iconUrl || '');",
+        "        html += serviceIconHtml(p.domain, esc(p.label), 'provider-icon', 'provider-icon-text', 'both', p.iconUrl || '');",
         "        html += '</div>';",
         "      }",
         "      html += '</div>';",
         "      content.innerHTML = html;",
-        // Attach click handlers to provider cards programmatically. The handler reads slug and label from data attributes, avoiding inline onclick and global scope.
-        "      var cards = content.querySelectorAll('.wizard-provider-card');",
-        "      for(var ci = 0; ci < cards.length; ci++) {",
-        "        cards[ci].addEventListener('click', function() {",
-        "          selectBrowseProvider(this.getAttribute('data-slug'), this.getAttribute('data-label'));",
+        // Attach click handlers to service cards programmatically. The handler reads slug and label from data attributes, avoiding inline onclick and global scope.
+        "      const cards = content.querySelectorAll('.wizard-provider-card');",
+        "      for(const card of cards) {",
+        "        card.addEventListener('click', function() {",
+        "          selectBrowseService(this.getAttribute('data-slug'), this.getAttribute('data-label'));",
         "        });",
         "      }",
         "      return;",
         "    }",
         // Step 2: Fetch discovered channels and render the channel list.
-        "    var slug = browseWizard.state.slug;",
-        "    var label = browseWizard.state.label;",
+        "    const slug = browseWizard.state.slug;",
+        "    const label = browseWizard.state.label;",
         // Show a spinner while fetching channels.
         "    content.innerHTML = '<div class=\"wizard-spinner\">Discovering channels from ' + esc(label) + '...</div>';",
-        // Fetch discovered channels from the provider endpoint.
-        "    (async function() {",
+        // Fetch discovered channels from the service endpoint.
+        "    (async () => {",
         "      try {",
-        "        var r = await fetch('/providers/' + encodeURIComponent(slug) + '/channels?lineup=true');",
-        "        if(!r.ok) { var d = await r.json(); throw new Error(d.error || 'Discovery failed.'); }",
-        "        var channels = await r.json();",
+        "        const r = await fetch('/services/' + encodeURIComponent(slug) + '/channels?lineup=true');",
+        "        if(!r.ok) { const d = await r.json(); throw new Error(d.error || 'Discovery failed.'); }",
+        "        const channels = await r.json();",
         "        if(browseWizard.state.slug !== slug) return;",
         "        renderBrowseChannelList(channels, slug, label);",
         "      } catch(err) {",
@@ -769,7 +728,7 @@ export function generateChannelsSubtabScript() {
         "    })();",
         "  }",
         // Render the channel list with three-state checkboxes. Each discovered channel carries an optional lineup field from the server's annotation layer.
-        // When lineup is present, the channel exists in the user's lineup. When lineup.currentTag matches the browsed provider slug, the channel is "current"
+        // When lineup is present, the channel exists in the user's lineup. When lineup.currentTag matches the browsed service slug, the channel is "current"
         // (checked). When lineup is present but the tag differs, the channel is "switch" (indeterminate). When lineup is absent, the channel is "new" (empty).
         "  function renderBrowseChannelList(channels, slug, label) {",
         "    if(!channels || channels.length === 0) {",
@@ -779,8 +738,8 @@ export function generateChannelsSubtabScript() {
         "      return;",
         "    }",
         // Build the channel list HTML with hint, legend, search filter, and three-state checkboxes.
-        "    var html = '';",
-        "    html += '<p class=\"wizard-hint\">Check to add or switch to this provider. Uncheck to remove. Changes take effect when you click Apply.</p>';",
+        "    let html = '';",
+        "    html += '<p class=\"wizard-hint\">Check to add or switch to this service. Uncheck to remove. Changes take effect when you click Apply.</p>';",
         "    html += '<div class=\"browse-toolbar\">';",
         "    html += '<label class=\"browse-select-all\">';",
         "    html += '<input type=\"checkbox\" id=\"browse-select-all-cb\">';",
@@ -789,18 +748,17 @@ export function generateChannelsSubtabScript() {
         "    html += '</div>';",
         "    html += '<div class=\"browse-legend\">';",
         "    html += '<span class=\"browse-legend-item\"><input type=\"checkbox\" disabled> New channel</span>';",
-        "    html += '<span class=\"browse-legend-item\"><input type=\"checkbox\" class=\"browse-legend-indeterminate\" disabled> Available via another provider</span>';",
-        "    html += '<span class=\"browse-legend-item\"><input type=\"checkbox\" checked disabled> Active on this provider</span>';",
+        "    html += '<span class=\"browse-legend-item\"><input type=\"checkbox\" class=\"browse-legend-indeterminate\" disabled> Available via another service</span>';",
+        "    html += '<span class=\"browse-legend-item\"><input type=\"checkbox\" checked disabled> Active on this service</span>';",
         "    html += '</div>';",
         "    html += '<div class=\"browse-channel-list\" id=\"browse-channel-list\">';",
         // Render each discovered channel. The lineup field from the server annotation determines the checkbox state.
-        "    for(var i = 0; i < channels.length; i++) {",
-        "      var ch = channels[i];",
-        "      var lu = ch.lineup;",
+        "    for(const ch of channels) {",
+        "      const lu = ch.lineup;",
         // Determine the channel's state from the server-provided lineup annotation. Four states: new (no lineup data), disabled (predefined but disabled),
-        // switch (exists via a different provider), current (already using this provider).
-        "      var state = 'new';",
-        "      var stateLabel = '';",
+        // switch (exists via a different service), current (already using this service).
+        "      let state = 'new';",
+        "      let stateLabel = '';",
         "      if(lu) {",
         "        if(!lu.enabled) {",
         "          state = 'disabled';",
@@ -810,16 +768,16 @@ export function generateChannelsSubtabScript() {
         "          stateLabel = lu.source === 'predefined' ? 'Predefined' : 'User channel';",
         "        } else {",
         "          state = 'switch';",
-        "          stateLabel = 'via ' + lu.currentProvider;",
+        "          stateLabel = 'via ' + lu.currentService;",
         "        }",
         "      }",
-        "      var itemClass = 'browse-channel-item browse-state-' + state;",
-        "      var searchName = ((lu && lu.displayName) ? lu.displayName : ch.name).toLowerCase();",
-        "      html += '<label class=\"' + itemClass + '\" data-name=\"' + esc(searchName).replace(/\"/g, '&quot;') + '\">';",
+        "      const itemClass = 'browse-channel-item browse-state-' + state;",
+        "      const searchName = ((lu && lu.displayName) ? lu.displayName : ch.name).toLowerCase();",
+        "      html += '<label class=\"' + itemClass + '\" data-name=\"' + esc(searchName).replaceAll('\"', '&quot;') + '\">';",
         // Checkbox with data attributes for state tracking and submission.
         "      html += '<input type=\"checkbox\" class=\"browse-channel-cb\"';",
-        "      html += ' data-name=\"' + esc(ch.name).replace(/\"/g, '&quot;') + '\"';",
-        "      html += ' data-selector=\"' + esc(ch.channelSelector).replace(/\"/g, '&quot;') + '\"';",
+        "      html += ' data-name=\"' + esc(ch.name).replaceAll('\"', '&quot;') + '\"';",
+        "      html += ' data-selector=\"' + esc(ch.channelSelector).replaceAll('\"', '&quot;') + '\"';",
         "      html += ' data-original=\"' + state + '\"';",
         "      if(lu) html += ' data-canonical=\"' + esc(lu.canonicalKey) + '\" data-has-alternatives=\"' + (lu.hasAlternatives ? 'true' : 'false') + '\"';",
         "      if(ch.stationId) html += ' data-station-id=\"' + esc(ch.stationId) + '\"';",
@@ -827,7 +785,7 @@ export function generateChannelsSubtabScript() {
         "      html += '>';",
         // Channel name with optional logo and affiliate. When the channel matches a lineup entry, use the predefined display name so the browse modal shows the
         // same names as the channels table. For new channels (no lineup match), use the raw discovery name.
-        "      var channelName = (lu && lu.displayName) ? lu.displayName : ch.name;",
+        "      const channelName = (lu && lu.displayName) ? lu.displayName : ch.name;",
         "      html += '<span class=\"browse-channel-name\">';",
         "      html += channelDisplayHtml(lu ? lu.logoUrl || '' : '', esc(channelName), 'browse-channel-logo', 'browse-channel-text', 'both');",
         "      if(ch.affiliate) html += ' <span class=\"browse-affiliate\">(' + esc(ch.affiliate) + ')</span>';",
@@ -842,21 +800,21 @@ export function generateChannelsSubtabScript() {
         "    html += '</div>';",
         "    document.getElementById('browse-content').innerHTML = html;",
         "    browseWizard.setTitle('Browse Channels <span class=\"browse-header-count\">(' + esc(label) + ' \\u2014 ' + channels.length + ' channels)</span>');",
-        // Set indeterminate state on checkboxes for channels that exist via a different provider. The indeterminate property cannot be set via HTML attributes —
+        // Set indeterminate state on checkboxes for channels that exist via a different service. The indeterminate property cannot be set via HTML attributes —
         // it must be set via JavaScript after the elements are in the DOM.
-        "    var switchCbs = document.querySelectorAll('.browse-channel-cb[data-original=\"switch\"]');",
-        "    for(var j = 0; j < switchCbs.length; j++) switchCbs[j].indeterminate = true;",
+        "    const switchCbs = document.querySelectorAll('.browse-channel-cb[data-original=\"switch\"]');",
+        "    for(const sc of switchCbs) sc.indeterminate = true;",
         // Set the legend's indeterminate checkbox visual.
-        "    var legendInd = document.querySelector('.browse-legend-indeterminate');",
+        "    const legendInd = document.querySelector('.browse-legend-indeterminate');",
         "    if(legendInd) legendInd.indeterminate = true;",
         // Attach event handlers programmatically to keep them scoped to the IIFE closure.
-        "    var selectAllCb = document.getElementById('browse-select-all-cb');",
+        "    const selectAllCb = document.getElementById('browse-select-all-cb');",
         "    if(selectAllCb) selectAllCb.addEventListener('change', function() { toggleBrowseSelectAll(this.checked); });",
-        "    var searchInput = document.getElementById('browse-search');",
+        "    const searchInput = document.getElementById('browse-search');",
         "    if(searchInput) searchInput.addEventListener('input', filterBrowseChannels);",
-        "    var channelCbs = document.querySelectorAll('.browse-channel-cb');",
-        "    for(var ci = 0; ci < channelCbs.length; ci++) {",
-        "      channelCbs[ci].addEventListener('change', function() { onBrowseCheckboxChange(this); });",
+        "    const channelCbs = document.querySelectorAll('.browse-channel-cb');",
+        "    for(const cb of channelCbs) {",
+        "      cb.addEventListener('change', function() { onBrowseCheckboxChange(this); });",
         "    }",
         // Show the apply button and update counts.
         "    browseWizard.show('browse-add-btn');",
@@ -867,8 +825,8 @@ export function generateChannelsSubtabScript() {
         // disabled channels stay empty on uncheck.
         "  function onBrowseCheckboxChange(cb) {",
         "    if(!cb.checked) {",
-        "      var original = cb.getAttribute('data-original');",
-        "      var hasAlt = cb.getAttribute('data-has-alternatives') === 'true';",
+        "      const original = cb.getAttribute('data-original');",
+        "      const hasAlt = cb.getAttribute('data-has-alternatives') === 'true';",
         "      if((original === 'switch') || ((original === 'current') && hasAlt)) {",
         "        cb.indeterminate = true;",
         "      }",
@@ -876,19 +834,18 @@ export function generateChannelsSubtabScript() {
         "    updateBrowseCount();",
         "  }",
         // Toggle all actionable checkboxes. Select-all checks all channels and clears indeterminate. Deselect-all unchecks new and disabled channels, and restores
-        // switch channels and current channels with alternatives to indeterminate (indicating the channel exists but is not selected for this provider).
+        // switch channels and current channels with alternatives to indeterminate (indicating the channel exists but is not selected for this service).
         "  function toggleBrowseSelectAll(checked) {",
-        "    var cbs = document.querySelectorAll('.browse-channel-cb');",
-        "    for(var i = 0; i < cbs.length; i++) {",
-        "      var cb = cbs[i];",
-        "      var original = cb.getAttribute('data-original');",
-        "      var row = cb.closest('.browse-channel-item');",
+        "    const cbs = document.querySelectorAll('.browse-channel-cb');",
+        "    for(const cb of cbs) {",
+        "      const original = cb.getAttribute('data-original');",
+        "      const row = cb.closest('.browse-channel-item');",
         "      if(row && row.style.display === 'none') continue;",
         "      if(checked) {",
         "        cb.checked = true;",
         "        cb.indeterminate = false;",
         "      } else {",
-        "        var hasAlt = cb.getAttribute('data-has-alternatives') === 'true';",
+        "        const hasAlt = cb.getAttribute('data-has-alternatives') === 'true';",
         "        cb.checked = false;",
         "        cb.indeterminate = (original === 'switch') || ((original === 'current') && hasAlt);",
         "      }",
@@ -897,143 +854,142 @@ export function generateChannelsSubtabScript() {
         "  }",
         // Filter the channel list by search text. Hides rows whose channel name does not contain the search term.
         "  function filterBrowseChannels() {",
-        "    var query = (document.getElementById('browse-search').value || '').toLowerCase();",
-        "    var rows = document.querySelectorAll('.browse-channel-item');",
-        "    for(var i = 0; i < rows.length; i++) {",
-        "      var name = rows[i].getAttribute('data-name') || '';",
-        "      rows[i].style.display = (!query || name.indexOf(query) !== -1) ? '' : 'none';",
+        "    const query = (document.getElementById('browse-search').value || '').toLowerCase();",
+        "    const rows = document.querySelectorAll('.browse-channel-item');",
+        "    for(const row of rows) {",
+        "      const name = row.getAttribute('data-name') || '';",
+        "      row.style.display = (!query || name.includes(query)) ? '' : 'none';",
         "    }",
         "  }",
         // Update the apply button text with categorized action counts. Computes add, switch, and remove counts based on checkbox state vs data-original.
         "  function updateBrowseCount() {",
-        "    var cbs = document.querySelectorAll('.browse-channel-cb');",
-        "    var addCount = 0;",
-        "    var switchCount = 0;",
-        "    var removeCount = 0;",
-        "    for(var i = 0; i < cbs.length; i++) {",
-        "      var cb = cbs[i];",
-        "      var original = cb.getAttribute('data-original');",
-        "      var row = cb.closest('.browse-channel-item');",
+        "    const cbs = document.querySelectorAll('.browse-channel-cb');",
+        "    let addCount = 0;",
+        "    let switchCount = 0;",
+        "    let removeCount = 0;",
+        "    for(const cb of cbs) {",
+        "      const original = cb.getAttribute('data-original');",
+        "      const row = cb.closest('.browse-channel-item');",
         "      if(row && row.style.display === 'none') continue;",
         "      if((original === 'new' || original === 'disabled') && cb.checked) addCount++;",
         "      if(original === 'switch' && cb.checked && !cb.indeterminate) switchCount++;",
         "      if(original === 'current' && !cb.checked) removeCount++;",
         "    }",
-        "    var btn = document.getElementById('browse-add-btn');",
-        "    var total = addCount + switchCount + removeCount;",
-        "    var parts = [];",
+        "    const btn = document.getElementById('browse-add-btn');",
+        "    const total = addCount + switchCount + removeCount;",
+        "    const parts = [];",
         "    if(addCount > 0) parts.push('add ' + addCount);",
         "    if(switchCount > 0) parts.push('switch ' + switchCount);",
         "    if(removeCount > 0) parts.push('remove ' + removeCount);",
         "    btn.textContent = total > 0 ? 'Apply (' + parts.join(', ') + ')' : 'Apply';",
         "    btn.disabled = total === 0;",
         // Update select-all checkbox state.
-        "    var allCbs = document.querySelectorAll('.browse-channel-cb');",
-        "    var allChecked = true;",
-        "    var visibleCount = 0;",
-        "    for(var j = 0; j < allCbs.length; j++) {",
-        "      var r = allCbs[j].closest('.browse-channel-item');",
+        "    const allCbs = document.querySelectorAll('.browse-channel-cb');",
+        "    let allChecked = true;",
+        "    let visibleCount = 0;",
+        "    for(const ac of allCbs) {",
+        "      const r = ac.closest('.browse-channel-item');",
         "      if(r && r.style.display === 'none') continue;",
         "      visibleCount++;",
-        "      if(!allCbs[j].checked) allChecked = false;",
+        "      if(!ac.checked) allChecked = false;",
         "    }",
-        "    var selectAll = document.getElementById('browse-select-all-cb');",
+        "    const selectAll = document.getElementById('browse-select-all-cb');",
         "    if(selectAll) selectAll.checked = (visibleCount > 0) && allChecked;",
         "  }",
         // Submit channel changes via the modify endpoint. Collects action types: add (new channels checked), enable (disabled channels checked), switch
         // remove (current channels unchecked). Each entry includes an action field so the server can handle them appropriately.
-        "  window.submitBrowseChannels = function() {",
-        "    var cbs = document.querySelectorAll('.browse-channel-cb');",
-        "    var guideUrl = browseGuideUrls[browseWizard.state.slug] || '';",
-        "    var entries = [];",
-        "    for(var i = 0; i < cbs.length; i++) {",
-        "      var cb = cbs[i];",
-        "      var original = cb.getAttribute('data-original');",
-        "      var row = cb.closest('.browse-channel-item');",
+        "  window.submitBrowseChannels = () => {",
+        "    const cbs = document.querySelectorAll('.browse-channel-cb');",
+        "    const guideUrl = browseGuideUrls[browseWizard.state.slug] || '';",
+        "    const entries = [];",
+        "    for(const cb of cbs) {",
+        "      const original = cb.getAttribute('data-original');",
+        "      const row = cb.closest('.browse-channel-item');",
         "      if(row && row.style.display === 'none') continue;",
-        "      var action = null;",
+        "      let action = null;",
         "      if(original === 'new' && cb.checked) action = 'add';",
         "      if(original === 'disabled' && cb.checked) action = 'enable';",
         "      if(original === 'switch' && cb.checked && !cb.indeterminate) action = 'switch';",
         "      if(original === 'current' && !cb.checked) action = 'remove';",
         "      if(!action) continue;",
-        "      var entry = {",
+        "      const entry = {",
         "        action: action,",
         "        canonicalKey: cb.getAttribute('data-canonical') || '',",
         "        channelSelector: cb.getAttribute('data-selector'),",
         "        name: cb.getAttribute('data-name'),",
-        "        providerSlug: browseWizard.state.slug,",
+        "        serviceSlug: browseWizard.state.slug,",
         "        url: guideUrl",
         "      };",
-        "      var sid = cb.getAttribute('data-station-id');",
+        "      const sid = cb.getAttribute('data-station-id');",
         "      if(sid) entry.stationId = sid;",
         "      entries.push(entry);",
         "    }",
         "    if(entries.length === 0) return;",
         // Disable the button to prevent double submission.
-        "    var btn = document.getElementById('browse-add-btn');",
+        "    const btn = document.getElementById('browse-add-btn');",
         "    btn.disabled = true;",
         "    btn.textContent = 'Applying...';",
-        "    (async function() {",
+        "    (async () => {",
         "      try {",
-        "        var res = await fetch('/config/channels/modify', {",
-        "          method: 'POST',",
+        "        const res = await fetch('/config/channels/modify', {",
+        "          body: JSON.stringify({ channels: entries }),",
         "          headers: { 'Content-Type': 'application/json' },",
-        "          body: JSON.stringify({ channels: entries })",
+        "          method: 'POST'",
         "        });",
-        "        var data = await res.json();",
+        "        const data = await res.json();",
         "        if(data.success) {",
         "          browseWizard.close();",
         "          showToast(data.message || 'Channels added.', 'success');",
-        "          if(data.patch) { applyChannelPatch(data.patch); }",
+        "          if(data.patch) { channelTable.applyPatch(data.patch); }",
+        "          if(data.serviceWarning && typeof showServiceFilterWarning === 'function') { showServiceFilterWarning(data.serviceWarning); }",
         "        } else {",
         "          btn.disabled = false;",
         "          updateBrowseCount();",
         "          showToast('Failed to add channels: ' + (data.error || 'Unknown error.'), 'error');",
         "        }",
         "      } catch(err) {",
-        "        console.error('Browse channels error:', err);",
+        "        console.error('Browse channels request failed.', err);",
         "        btn.disabled = false;",
         "        updateBrowseCount();",
         "        showToast('Failed to add channels.', 'error');",
         "      }",
         "    })();",
         "  };",
-        // Read embedded provider data for the setup wizard. Each entry includes domain, iconUrl, displayName, tag, and enabled state from the server.
-        "  var setupProviders = [];",
+        // Read embedded service data for the setup wizard. Each entry includes domain, iconUrl, displayName, tag, and enabled state from the server.
+        "  let setupServices = [];",
         "  try {",
-        "    var spEl = document.getElementById('setup-providers-data');",
-        "    if(spEl) setupProviders = JSON.parse(spEl.textContent || '[]');",
-        "  } catch(e) {}",
-        // Validate the current setup step. Step 1 collects selected providers, validates at least one is selected, and saves the provider filter to the server
+        "    const spEl = document.getElementById('setup-services-data');",
+        "    if(spEl) setupServices = JSON.parse(spEl.textContent || '[]');",
+        "  } catch(e) { console.warn('Embedded setup services data failed to parse.', e); }",
+        // Validate the current setup step. Step 1 collects selected services, validates at least one is selected, and saves the service filter to the server
         // asynchronously. Returns a Promise that resolves to an error string or empty string. Step 2+ always passes (no validation needed).
         "  async function validateSetupStep(step) {",
         "    if(step === 1) {",
-        "      var selected = [];",
-        "      var cbs = document.querySelectorAll('.setup-provider-cb:checked');",
-        "      for(var i = 0; i < cbs.length; i++) selected.push(cbs[i].value);",
-        "      if(selected.length === 0) return 'Select at least one provider.';",
-        "      setupWizard.state.selectedProviders = selected;",
+        "      const selected = [];",
+        "      const cbs = document.querySelectorAll('.setup-provider-cb:checked');",
+        "      for(const cb of cbs) selected.push(cb.value);",
+        "      if(selected.length === 0) return 'Select at least one service.';",
+        "      setupWizard.state.selectedServices = selected;",
         "      setupWizard.state.authIndex = 0;",
         "      try {",
-        "        await fetch('/config/provider-filter', {",
-        "          method: 'POST',",
+        "        await fetch('/config/service-filter', {",
+        "          body: JSON.stringify({ enabledServices: selected }),",
         "          headers: { 'Content-Type': 'application/json' },",
-        "          body: JSON.stringify({ enabledProviders: selected })",
+        "          method: 'POST'",
         "        });",
         "        return '';",
-        "      } catch(e) { return 'Failed to save provider selection.'; }",
+        "      } catch(e) { return 'Failed to save service selection.'; }",
         "    }",
         "    return '';",
         "  }",
-        // Provider Setup wizard. Uses the shared wizard controller for step navigation and indicator updates. The state object tracks selected providers and
+        // Service Setup wizard. Uses the shared wizard controller for step navigation and indicator updates. The state object tracks selected services and
         // the current auth index for the sequential sign-in flow.
-        "  var setupWizard = createWizardController({",
+        "  const setupWizard = createWizardController({",
         "    contentId: 'setup-content',",
         "    errorId: 'setup-error',",
         "    modalId: 'setup-modal',",
-        "    onClose: function() {",
-        "      if(setupWizard.getStep() === 2) { fetch('/auth/done', { method: 'POST' }).catch(function() {}); }",
+        "    onClose: () => {",
+        "      if(setupWizard.getStep() === 2) { fetch('/auth/done', { method: 'POST' }).catch((err) => { console.warn('Auth done notification failed.', err); }); }",
         "    },",
         "    onRender: renderSetupStep,",
         "    onValidate: validateSetupStep,",
@@ -1041,163 +997,349 @@ export function generateChannelsSubtabScript() {
         "    stepsId: 'setup-steps',",
         "    titleId: 'setup-title'",
         "  });",
-        // Open the setup wizard and render the first step. Pre-populate selected providers from the embedded enabled state so re-running the wizard shows the
-        // current provider filter as pre-checked.
-        "  window.openSetupWizard = function() {",
-        "    var preSelected = setupProviders.filter(function(p) { return p.enabled; }).map(function(p) { return p.tag; });",
-        "    setupWizard.state = { selectedProviders: preSelected, authIndex: 0 };",
+        // Open the setup wizard and render the first step. Pre-populate selected services from the embedded enabled state so re-running the wizard shows the
+        // current service filter as pre-checked.
+        "  window.openSetupWizard = () => {",
+        "    const preSelected = setupServices.filter((p) => p.enabled).map((p) => p.tag);",
+        "    setupWizard.state = { selectedServices: preSelected, authIndex: 0 };",
         "    setupWizard.open();",
         "  };",
         // Skip the entire setup flow and mark as completed.
-        "  window.skipSetup = async function() {",
-        "    try { await fetch('/config/channels/setup-completed', { method: 'POST', headers: { 'Content-Type': 'application/json' } }); }",
-        "    catch(e) {}",
+        "  window.skipSetup = async () => {",
+        "    try { await fetch('/config/channels/setup-completed', { headers: { 'Content-Type': 'application/json' }, method: 'POST' }); }",
+        "    catch(e) { console.warn('Setup completion failed to persist on skip.', e); }",
         "    setupWizard.close();",
         "  };",
-        // Authenticate the current provider in step 2. Opens the browser and shows a waiting prompt.
-        "  async function setupAuthProvider() {",
-        "    var slug = setupWizard.state.selectedProviders[setupWizard.state.authIndex];",
-        "    var provider = setupProviders.find(function(p) { return p.tag === slug; });",
-        "    var url = provider && provider.domain ? 'https://' + provider.domain + '/' : '';",
+        // Authenticate the current service in step 2. Opens the browser and shows a waiting prompt.
+        "  async function setupAuthService() {",
+        "    const slug = setupWizard.state.selectedServices[setupWizard.state.authIndex];",
+        "    const svc = setupServices.find((p) => p.tag === slug);",
+        "    const url = svc && svc.domain ? 'https://' + svc.domain + '/' : '';",
         "    if(!url) { setupAdvanceAuth(); return; }",
         "    try {",
-        "      var res = await fetch('/auth/login', {",
-        "        method: 'POST',",
+        "      const res = await fetch('/auth/login', {",
+        "        body: JSON.stringify({ url: url }),",
         "        headers: { 'Content-Type': 'application/json' },",
-        "        body: JSON.stringify({ url: url })",
+        "        method: 'POST'",
         "      });",
-        "      var data = await res.json();",
+        "      const data = await res.json();",
         "      if(data.success) renderSetupAuthWaiting();",
         "      else showToast('Failed to start login: ' + (data.error || 'Unknown error.'), 'error');",
-        "    } catch(e) { showToast('Failed to start login.', 'error'); }",
+        "    } catch(e) { console.error('Login start request failed.', e); showToast('Failed to start login.', 'error'); }",
         "  }",
-        // Mark the current provider auth as done and advance to the next.
+        // Mark the current service auth as done and advance to the next.
         "  function setupAuthDone() {",
-        "    fetch('/auth/done', { method: 'POST' }).catch(function() {});",
+        "    fetch('/auth/done', { method: 'POST' }).catch((err) => { console.warn('Auth done notification failed.', err); });",
         "    setupAdvanceAuth();",
         "  }",
-        // Skip the current provider auth and advance.
+        // Skip the current service auth and advance.
         "  function setupAuthSkip() {",
-        "    fetch('/auth/done', { method: 'POST' }).catch(function() {});",
+        "    fetch('/auth/done', { method: 'POST' }).catch((err) => { console.warn('Auth done notification failed.', err); });",
         "    setupAdvanceAuth();",
         "  }",
-        // Advance to the next provider or to step 3 if all are done.
+        // Advance to the next service or to step 3 if all are done.
         "  function setupAdvanceAuth() {",
         "    setupWizard.state.authIndex++;",
-        "    if(setupWizard.state.authIndex >= setupWizard.state.selectedProviders.length) {",
+        "    if(setupWizard.state.authIndex >= setupWizard.state.selectedServices.length) {",
         "      setupWizard.next();",
         "    } else {",
         "      renderSetupStep(setupWizard.getStep());",
         "    }",
         "  }",
         // Finish the setup wizard. Mark as completed and refresh the channel table.
-        "  window.finishSetup = async function() {",
+        "  window.finishSetup = async () => {",
         "    try {",
-        "      var res = await fetch('/config/channels/setup-completed', { method: 'POST', headers: { 'Content-Type': 'application/json' } });",
-        "      var data = await res.json();",
+        "      const res = await fetch('/config/channels/setup-completed', { headers: { 'Content-Type': 'application/json' }, method: 'POST' });",
+        "      const data = await res.json();",
         "      setupWizard.close();",
-        "      if(data.patch) { applyChannelPatch(data.patch); }",
-        "    } catch(err) { console.error('Setup finish error:', err); setupWizard.close(); }",
+        "      if(data.patch) { channelTable.applyPatch(data.patch); }",
+        "    } catch(err) { console.error('Setup finish request failed.', err); setupWizard.close(); }",
         "  };",
         // Render the auth waiting state - shows a message while the user authenticates in Chrome.
         "  function renderSetupAuthWaiting() {",
-        "    var slug = setupWizard.state.selectedProviders[setupWizard.state.authIndex];",
-        "    var provider = setupProviders.find(function(p) { return p.tag === slug; });",
-        "    var label = provider ? provider.displayName : slug;",
-        "    var content = document.getElementById('setup-content');",
+        "    const slug = setupWizard.state.selectedServices[setupWizard.state.authIndex];",
+        "    const svc = setupServices.find((p) => p.tag === slug);",
+        "    const label = svc ? svc.displayName : slug;",
+        "    const content = document.getElementById('setup-content');",
         "    content.innerHTML = '<div class=\"wizard-spinner\">Complete authentication for ' + esc(label) +",
         "      ' in the Chrome browser window...</div>' +",
         "      '<div class=\"wizard-step-centered-compact\">' +",
         "      '<button type=\"button\" class=\"btn btn-primary\" data-action=\"auth-done\">Done</button> ' +",
         "      '<button type=\"button\" class=\"btn btn-secondary\" data-action=\"auth-skip\">Skip</button></div>';",
         // Attach handlers to the auth waiting buttons programmatically.
-        "    var waitActions = content.querySelectorAll('[data-action]');",
-        "    for(var wi = 0; wi < waitActions.length; wi++) {",
-        "      (function(btn) {",
-        "        var action = btn.getAttribute('data-action');",
-        "        if(action === 'auth-done') { btn.onclick = function() { setupAuthDone(); }; }",
-        "        else if(action === 'auth-skip') { btn.onclick = function() { setupAuthSkip(); }; }",
-        "      })(waitActions[wi]);",
+        "    const waitActions = content.querySelectorAll('[data-action]');",
+        "    for(const btn of waitActions) {",
+        "      const action = btn.getAttribute('data-action');",
+        "      if(action === 'auth-done') { btn.onclick = () => { setupAuthDone(); }; }",
+        "      else if(action === 'auth-skip') { btn.onclick = () => { setupAuthSkip(); }; }",
         "    }",
         "  }",
         // Render the current setup step content and update navigation buttons. The controller handles step indicator updates and error clearing.
         "  function renderSetupStep(step) {",
-        "    var content = document.getElementById('setup-content');",
+        "    const content = document.getElementById('setup-content');",
         // Show/hide navigation buttons based on the current step.
         "    if(step > 1) { setupWizard.show('setup-back'); } else { setupWizard.hide('setup-back'); }",
         "    if(step < 3) { setupWizard.show('setup-next'); setupWizard.show('setup-skip'); }",
         "    else { setupWizard.hide('setup-next'); setupWizard.hide('setup-skip'); }",
         "    if(step === 3) { setupWizard.show('setup-finish'); } else { setupWizard.hide('setup-finish'); }",
-        "    var html = '';",
-        // Step 1: Provider selection with multi-select cards.
+        "    let html = '';",
+        // Step 1: Service selection with multi-select cards.
         "    if(step === 1) {",
         "      html += '<p class=\"wizard-hint\">Select the streaming services you subscribe to. " +
             "This determines which channels are available in your lineup.</p>';",
         "      html += '<div class=\"wizard-provider-grid\">';",
-        "      for(var j = 0; j < setupProviders.length; j++) {",
-        "        var p = setupProviders[j];",
-        "        var checked = (setupWizard.state.selectedProviders.indexOf(p.tag) !== -1) ? ' checked' : '';",
+        "      for(const p of setupServices) {",
+        "        const checked = setupWizard.state.selectedServices.includes(p.tag) ? ' checked' : '';",
         "        html += '<label class=\"wizard-provider-card\">';",
         "        html += '<input type=\"checkbox\" class=\"setup-provider-cb\" value=\"' + p.tag + '\"' + checked + '>';",
-        "        html += providerIconHtml(p.domain || '', esc(p.displayName), 'provider-icon', 'provider-icon-text', 'both', p.iconUrl || '');",
+        "        html += serviceIconHtml(p.domain || '', esc(p.displayName), 'provider-icon', 'provider-icon-text', 'both', p.iconUrl || '');",
         "        html += '</label>';",
         "      }",
         "      html += '</div>';",
         "    }",
         // Step 2: Sequential authentication prompts.
         "    if(step === 2) {",
-        "      var slug = setupWizard.state.selectedProviders[setupWizard.state.authIndex];",
-        "      var provider = setupProviders.find(function(p) { return p.tag === slug; });",
-        "      var label = provider ? provider.displayName : slug;",
-        "      var total = setupWizard.state.selectedProviders.length;",
-        "      var current = setupWizard.state.authIndex + 1;",
-        "      html += '<p class=\"wizard-hint\">Sign in to each provider in the Chrome browser window. " +
+        "      const slug = setupWizard.state.selectedServices[setupWizard.state.authIndex];",
+        "      const svc = setupServices.find((p) => p.tag === slug);",
+        "      const label = svc ? svc.displayName : slug;",
+        "      const total = setupWizard.state.selectedServices.length;",
+        "      const current = setupWizard.state.authIndex + 1;",
+        "      html += '<p class=\"wizard-hint\">Sign in to each service in the Chrome browser window. " +
             "PrismCast uses your login session to access live streams.</p>';",
         "      html += '<div class=\"wizard-step-centered\">';",
         "      html += '<p class=\"wizard-step-provider-name\">' + esc(label) + '</p>';",
-        "      html += '<p class=\"wizard-step-provider-count\">Provider ' + current + ' of ' + total + '</p>';",
+        "      html += '<p class=\"wizard-step-provider-count\">Service ' + current + ' of ' + total + '</p>';",
         "      html += '<button type=\"button\" class=\"btn btn-primary\" data-action=\"auth-start\">Sign In</button> ';",
         "      html += '<button type=\"button\" class=\"btn btn-secondary\" data-action=\"auth-skip\">Skip</button>';",
         "      html += '</div>';",
         "    }",
         // Step 3: Summary and finish.
         "    if(step === 3) {",
-        "      html += '<p class=\"wizard-hint\">Your providers are ready. Click Finish to complete setup. " +
+        "      html += '<p class=\"wizard-hint\">Your services are ready. Click Finish to complete setup. " +
             "You can browse and manage channels anytime using the Browse Channels button.</p>';",
         "      html += '<div class=\"wizard-step-centered\">';",
-        "      html += '<p class=\"wizard-step-summary\">Selected ' + setupWizard.state.selectedProviders.length + ' provider' +",
-        "        (setupWizard.state.selectedProviders.length === 1 ? '' : 's') + '.</p>';",
+        "      html += '<p class=\"wizard-step-summary\">Selected ' + setupWizard.state.selectedServices.length + ' service' +",
+        "        (setupWizard.state.selectedServices.length === 1 ? '' : 's') + '.</p>';",
         "      html += '</div>';",
         "    }",
         "    content.innerHTML = html;",
         // Attach event handlers to dynamically-rendered buttons programmatically. Uses data-action attributes to identify buttons without inline onclick.
-        "    var actions = content.querySelectorAll('[data-action]');",
-        "    for(var ai = 0; ai < actions.length; ai++) {",
-        "      (function(btn) {",
-        "        var action = btn.getAttribute('data-action');",
-        "        if(action === 'auth-start') { btn.onclick = function() { setupAuthProvider(); }; }",
-        "        else if(action === 'auth-skip') { btn.onclick = function() { setupAuthSkip(); }; }",
-        "        else if(action === 'auth-done') { btn.onclick = function() { setupAuthDone(); }; }",
-        "      })(actions[ai]);",
+        "    const actions = content.querySelectorAll('[data-action]');",
+        "    for(const btn of actions) {",
+        "      const action = btn.getAttribute('data-action');",
+        "      if(action === 'auth-start') { btn.onclick = () => { setupAuthService(); }; }",
+        "      else if(action === 'auth-skip') { btn.onclick = () => { setupAuthSkip(); }; }",
+        "      else if(action === 'auth-done') { btn.onclick = () => { setupAuthDone(); }; }",
         "    }",
         "  }",
+        // Tag Management Modal.
+        // Single function for applying tag mutation responses. Updates the tag manager modal body, the column header filter dropdown, the channel table patch, and shows
+        // a toast. Exposed on window so both channels.ts and config.ts (bulkToggleTag) can use the same code path. No page reload needed.
+        "  window.applyTagResponse = (data, toastMessage) => {",
+        "    const contentDiv = document.getElementById('tag-manager-modal-content');",
+        "    if(contentDiv && data.modalBody) { contentDiv.innerHTML = data.modalBody; }",
+        "    const filterMenu = document.getElementById('tag-filter-menu');",
+        "    if(filterMenu && data.filterContent) { filterMenu.innerHTML = data.filterContent; applyTagColumnFilter(); }",
+        "    if(data.patch) { channelTable.applyPatch(data.patch); }",
+        "    if(toastMessage && window.showToast) { window.showToast(toastMessage); }",
+        "  };",
+        "  window.openTagManager = () => {",
+        "    const modal = document.getElementById('tag-manager-modal');",
+        "    if(modal) { modal.style.display = 'flex'; }",
+        "  };",
+        "  window.closeTagManager = () => {",
+        "    const modal = document.getElementById('tag-manager-modal');",
+        "    if(modal) { modal.style.display = 'none'; }",
+        "  };",
+        // Create a new tag via the API, then update the modal incrementally and show a toast.
+        "  window.createTag = async () => {",
+        "    const input = document.getElementById('tag-manager-input');",
+        "    const errorDiv = document.getElementById('tag-manager-error');",
+        "    const tag = input ? input.value.trim() : '';",
+        "    if(!tag) return;",
+        "    errorDiv.style.display = 'none';",
+        "    try {",
+        "      const res = await fetch('/config/tags', {",
+        "        body: JSON.stringify({ tag }),",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        method: 'POST'",
+        "      });",
+        "      const data = await res.json();",
+        "      if(!data.success) {",
+        "        errorDiv.textContent = data.error || 'Failed to create tag.';",
+        "        errorDiv.style.display = '';",
+        "        return;",
+        "      }",
+        "      applyTagResponse(data, 'Tag created: ' + tag);",
+        "    } catch(err) {",
+        "      console.error('Tag creation request failed.', err);",
+        "      errorDiv.textContent = 'Failed to create tag.';",
+        "      errorDiv.style.display = '';",
+        "    }",
+        "  };",
+        // Delete a tag via the API, then update the modal and channel table incrementally.
+        "  window.deleteTag = async (tag) => {",
+        "    try {",
+        "      const res = await fetch('/config/tags/' + encodeURIComponent(tag), { method: 'DELETE' });",
+        "      const data = await res.json();",
+        "      if(!data.success) {",
+        "        showToast(data.error || 'Failed to delete tag.', 'error');",
+        "        return;",
+        "      }",
+        "      applyTagResponse(data, 'Tag deleted: ' + tag);",
+        "    } catch(err) {",
+        "      console.error('Tag deletion request failed.', err);",
+        "      showToast('Failed to delete tag.', 'error');",
+        "    }",
+        "  };",
+        // Restore a deleted predefined tag via the API, then update the modal and channel table incrementally.
+        "  window.restoreTag = async (tag) => {",
+        "    try {",
+        "      const res = await fetch('/config/tags/restore', {",
+        "        body: JSON.stringify({ tag }),",
+        "        headers: { 'Content-Type': 'application/json' },",
+        "        method: 'POST'",
+        "      });",
+        "      const data = await res.json();",
+        "      if(!data.success) {",
+        "        showToast(data.error || 'Failed to restore tag.', 'error');",
+        "        return;",
+        "      }",
+        "      applyTagResponse(data, 'Tag restored: ' + tag);",
+        "    } catch(err) {",
+        "      console.error('Tag restore request failed.', err);",
+        "      showToast('Failed to restore tag.', 'error');",
+        "    }",
+        "  };",
+        // Tag Column Filter — client-side view filter that shows/hides rows based on their data-channel-tags attribute. Transient (not persisted, resets on page load).
+        // All tag checkboxes start checked (show all). Unchecking a tag hides rows that don't have ANY of the remaining checked tags.
+        "  window.applyTagColumnFilter = () => {",
+        "    const checkboxes = document.querySelectorAll('.tag-filter-checkbox');",
+        "    const checkedTags = [];",
+        "    let allChecked = true;",
+        "    for(const checkbox of checkboxes) {",
+        "      if(checkbox.checked) { checkedTags.push(checkbox.getAttribute('data-tag')); }",
+        "      else { allChecked = false; }",
+        "    }",
+        "    const rows = document.querySelectorAll('tr[id^=\"display-row-\"]');",
+        "    for(const row of rows) {",
+        "      const editRow = document.getElementById(row.id.replace('display-row-', 'edit-row-'));",
+        "      if(allChecked) {",
+        "        row.classList.remove('tag-filtered');",
+        "        if(editRow) editRow.classList.remove('tag-filtered');",
+        "        continue;",
+        "      }",
+        "      const tags = row.getAttribute('data-channel-tags');",
+        "      const channelTags = tags ? tags.split(',') : [];",
+        "      const visible = channelTags.some((ct) => checkedTags.includes(ct));",
+        "      row.classList.toggle('tag-filtered', !visible);",
+        "      if(editRow) editRow.classList.toggle('tag-filtered', !visible);",
+        "    }",
+        // Show or hide the playlist hint icon based on filter state. When the filter is active, users can click the icon to see the corresponding playlist URL.
+        "    const hintBtn = document.getElementById('playlist-hint-btn');",
+        "    if(hintBtn) { hintBtn.style.display = allChecked ? 'none' : ''; }",
+        // Update the toggle label to reflect the current state: "Show All" when some are unchecked, "Show None" when all are checked.
+        "    const toggle = document.getElementById('tag-filter-toggle');",
+        "    if(toggle) { toggle.textContent = allChecked ? 'Show None' : 'Show All'; }",
+        "  };",
+        // Toggle all tag filter checkboxes. When all are checked, uncheck all. When any are unchecked, check all. Matches the browse modal's Select All pattern.
+        "  window.toggleTagColumnFilter = () => {",
+        "    const checkboxes = document.querySelectorAll('.tag-filter-checkbox');",
+        "    let allChecked = true;",
+        "    for(const checkbox of checkboxes) { if(!checkbox.checked) { allChecked = false; break; } }",
+        "    for(const checkbox of checkboxes) { checkbox.checked = !allChecked; }",
+        "    applyTagColumnFilter();",
+        "  };",
+        // Playlist hint popover. Builds the content dynamically from the current filter state and shows it using the existing dropdown portal pattern. Uses whichever
+        // form (include or exclude) produces a shorter URL. The label names the specific tags so the user sees exactly what the URL produces.
+        "  window.showPlaylistHint = (btn) => {",
+        "    const checkboxes = document.querySelectorAll('.tag-filter-checkbox');",
+        "    const checked = [];",
+        "    const unchecked = [];",
+        "    for(const checkbox of checkboxes) {",
+        "      const tag = checkbox.getAttribute('data-tag');",
+        "      if(checkbox.checked) { checked.push(tag); }",
+        "      else { unchecked.push(tag); }",
+        "    }",
+        "    const useExclude = unchecked.length < checked.length;",
+        "    const tagParam = useExclude ? unchecked.map((t) => '-' + t).join(',') : checked.join(',');",
+        "    const url = location.origin + '/playlist?tag=' + tagParam;",
+        "    const label = useExclude ? 'all channels except those tagged <strong>' + unchecked.join(', ') + '</strong>'",
+        "      : 'channels tagged <strong>' + checked.join(', ') + '</strong>';",
+        "    toggleDropdown(btn, { onOpen: (menu) => {",
+        "      menu.innerHTML = '<div class=\"playlist-hint-content\">' +",
+        "        '<p>Playlist URL for Channels DVR: ' + label + '.</p>' +",
+        "        '<div class=\"playlist-hint-url\">' +",
+        "        '<code>' + url + '</code>' +",
+        "        '<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"copyPlaylistHintUrl()\">Copy</button>' +",
+        "        '</div></div>';",
+        "    }});",
+        "  };",
+        // Copy the playlist hint URL to the clipboard. Thin wrapper that reads the URL from the popover's code element and delegates to the shared copyToClipboard utility.
+        "  window.copyPlaylistHintUrl = () => {",
+        "    const code = document.querySelector('.playlist-hint-content code');",
+        "    if(code) { copyToClipboard(code.textContent, 'Playlist URL copied to clipboard.'); }",
+        "  };",
+        // Inline tag rename — replaces the tag pill with an input field. The original span is saved so it can be restored on cancel or error without a page reload.
+        "  window.startTagRename = (span, oldTag) => {",
+        "    const originalSpan = span;",
+        "    const input = document.createElement('input');",
+        "    input.type = 'text';",
+        "    input.value = oldTag;",
+        "    input.className = 'tag-rename-input';",
+        "    input.maxLength = 30;",
+        "    let submitted = false;",
+        "    function restore() { if(input.parentNode) input.replaceWith(originalSpan); }",
+        "    async function submit() {",
+        "      if(submitted) return;",
+        "      submitted = true;",
+        "      const newTag = input.value.trim();",
+        "      if(!newTag || (newTag === oldTag)) { restore(); return; }",
+        "      try {",
+        "        const res = await fetch('/config/tags/rename', {",
+        "          body: JSON.stringify({ newTag, oldTag }),",
+        "          headers: { 'Content-Type': 'application/json' },",
+        "          method: 'POST'",
+        "        });",
+        "        const data = await res.json();",
+        "        if(!data.success) {",
+        "          restore();",
+        "          showToast(data.error || 'Failed to rename tag.', 'error');",
+        "          return;",
+        "        }",
+        "        applyTagResponse(data, 'Tag renamed: ' + oldTag + ' \\u2192 ' + newTag);",
+        "      } catch(err) {",
+        "        console.error('Tag rename request failed.', err);",
+        "        restore();",
+        "        showToast('Failed to rename tag.', 'error');",
+        "      }",
+        "    }",
+        "    input.onkeydown = (e) => {",
+        "      if(e.key === 'Enter') { e.preventDefault(); submit(); }",
+        "      if(e.key === 'Escape') { e.preventDefault(); restore(); }",
+        "    };",
+        "    input.onblur = () => { submit(); };",
+        "    span.replaceWith(input);",
+        "    input.focus();",
+        "    input.select();",
+        "  };",
         // Auto-show the setup wizard on first visit if setupCompleted is false.
-        "  var setupModal = document.getElementById('setup-modal');",
+        "  const setupModal = document.getElementById('setup-modal');",
         "  if(setupModal && setupModal.getAttribute('data-setup-completed') === 'false') {",
         "    openSetupWizard();",
         "  }",
-        // Process channel logos and provider icons on page load. These shared functions are also called after DOM mutations (row insertion, chip rebuild) to ensure
+        // Process channel logos and service icons on page load. These shared functions are also called after DOM mutations (row insertion, chip rebuild) to ensure
         // dynamically added elements get the same icon rendering as the initial server-rendered content.
-        "  processChannelLogos();",
-        "  processProviderDisplays();",
+        "  channelTable.processLogos();",
+        "  processServiceDisplays();",
         // Initialize channels subtab on load: hash > localStorage > default.
-        "  var initialSubtab = window.initialChannelsHashSubtab;",
-        "  if(!initialSubtab) {",
-        "    try { initialSubtab = localStorage.getItem('prismcast-channels-subtab'); } catch(e) {}",
-        "  }",
-        "  if(initialSubtab && document.querySelector('.channels-subtab-btn[data-channels-subtab=\"' + initialSubtab + '\"]')) {",
-        "    switchChannelsSubtab(initialSubtab, false);",
-        "  }",
+        "  initSubtab({",
+        "    btnSelector: '.channels-subtab-btn',",
+        "    dataAttr: 'data-channels-subtab',",
+        "    hashVar: window.initialChannelsHashSubtab,",
+        "    storageKey: 'prismcast-channels-subtab',",
+        "    switchFn: switchChannelsSubtab",
+        "  });",
         "})();",
         "</script>"
     ].join("\n");