prismcast 1.10.2 → 1.11.0

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

@@ -2,6 +2,12 @@
  *
  * channels.ts: Client-side JavaScript generator for the PrismCast channels subtab.
  */
+import { ACTIONS } from "../../clientActions.js";
+/**
+ * Generates the channels subtab script block containing the service profile wizard, the browse channels wizard, the tag manager, and the setup wizard, plus the
+ * data-click-action registrations that wire server-rendered buttons to these handlers.
+ * @returns HTML script block with channels subtab functions.
+ */
 export function generateChannelsSubtabScript() {
     return [
         "<script>",
@@ -57,17 +63,26 @@ export function generateChannelsSubtabScript() {
         "          else if(ef.type === 'boolean' && editCs[ef.id]) { strategyFields[ef.id] = true; }",
         "        }",
         "      }",
+        // Rehydrate the rendered profile fields from the registry: boolean flags into flags, text selectors into fieldValues. This is truthy-only capture, so an
+        // explicit-false or explicit-null value of a RENDERED field is not represented (a known, unchanged limitation); every field the wizard does not render survives
+        // via baseProfileFields below.
         "      const flags = {};",
-        "      const wizFlags = window.__wizardFlags;",
-        "      for(const wf of wizFlags) { if(p[wf.id]) flags[wf.id] = true; }",
+        "      const fieldValues = {};",
+        "      for(const wf of window.__wizardFields) {",
+        "        if(wf.type === 'boolean') { if(p[wf.id]) flags[wf.id] = true; }",
+        "        else if(p[wf.id]) { fieldValues[wf.id] = p[wf.id]; }",
+        "      }",
+        // Each domain row keeps its full raw config so unrendered domain-level fields (videoTimeout, loginUrl, maxContinuousPlayback, dismissSelector) ride through a
+        // resave; service and serviceTag drive the rendered inputs.
         "      const domains = (match.domains && match.domains.length > 0) ?",
-        "        match.domains.map((d) => ({ domain: d.domain, service: d.service || '', serviceTag: d.serviceTag || '' })) :",
-        "        [{ domain: '', service: '', serviceTag: '' }];",
+        "        match.domains.map((d) => ({ config: d.config || {}, domain: d.domain, service: d.service || '', serviceTag: d.serviceTag || '' })) :",
+        "        [{ config: {}, domain: '', service: '', serviceTag: '' }];",
+        // Keep the full fetched profile as baseProfileFields. saveProfile starts from a copy of it and deletes only the rendered vocabulary, so unrendered profile-level
+        // fields (channelSelector, clickSelector, fullscreenKey, fullscreenSelector, staticCapture) survive an edit-resave unchanged.
         "      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 || ''",
+        "        baseProfile: p.extends || '', baseProfileFields: p, description: p.description || '',",
+        "        domains: domains, editKey: key, editMode: true, fieldValues: fieldValues, flags: flags,",
+        "        profileName: key, strategy: strat, strategyFields: strategyFields",
         "      };",
         "      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'); }",
@@ -91,7 +106,7 @@ export function generateChannelsSubtabScript() {
         "          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 += '<td>' + escapeHtml(data.name || 'Unnamed') + '</td></tr>';",
         "          html += '<tr><td class=\"import-summary-label\">Profiles</td>';",
         "          html += '<td>' + plural(profileCount, 'profile') + '</td></tr>';",
         "          html += '<tr><td class=\"import-summary-label\">Domains</td>';",
@@ -166,13 +181,13 @@ export function generateChannelsSubtabScript() {
         "          if(dom.service) { serviceName = dom.service; break; }",
         "        }",
         "        const meta = [];",
-        "        if(serviceName) meta.push(esc(serviceName));",
+        "        if(serviceName) meta.push(escapeHtml(serviceName));",
         "        meta.push(plural(domainCount, 'domain'));",
         "        meta.push(plural(channelCount, 'channel'));",
         "        html += '<label class=\"export-profile-item\">';",
-        "        html += '<input type=\"checkbox\" class=\"export-profile-cb\" value=\"' + esc(p.key) + '\" checked>';",
+        "        html += '<input type=\"checkbox\" class=\"export-profile-cb\" value=\"' + escapeHtml(p.key) + '\" checked>';",
         "        html += '<div class=\"export-profile-info\">';",
-        "        html += '<div class=\"export-profile-name\">' + esc(p.key) + '</div>';",
+        "        html += '<div class=\"export-profile-name\">' + escapeHtml(p.key) + '</div>';",
         "        html += '<div class=\"export-profile-meta\">' + meta.join(' &middot; ') + '</div>';",
         "        html += '</div></label>';",
         "      }",
@@ -207,12 +222,8 @@ export function generateChannelsSubtabScript() {
         "  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) {",
-        "    const d = document.createElement('div');",
-        "    d.appendChild(document.createTextNode(str || ''));",
-        "    return d.innerHTML;",
-        "  }",
+        // The escapeHtml used throughout this script is the shared client-escape SSOT installed on window by the shared utilities script, which the page emits before
+        // this one; there is no local copy here.
         // Pluralization helper for UI text: returns "1 domain", "2 domains", etc.
         "  function plural(n, word) {",
         "    return n + ' ' + word + (n === 1 ? '' : 's');",
@@ -244,8 +255,7 @@ export function generateChannelsSubtabScript() {
         "      html += '<div class=\"field-group\">';",
         "      html += '<label class=\"wizard-label\" for=\"wizard-profile-name\">Profile Name</label>';",
         "      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 += '<input type=\"text\" id=\"wizard-profile-name\" value=\"' + escapeHtml(s.profileName) + '\" 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>';",
@@ -267,14 +277,14 @@ export function generateChannelsSubtabScript() {
         "        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>';",
+        "        if(cat.desc) html += '<div class=\"wizard-category-desc\">' + escapeHtml(cat.desc) + '</div>';",
         "        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 + '>';",
-        "          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>';",
+        "          const sumTag = p.summary ? ' <span class=\"profile-option-summary\">(' + escapeHtml(p.summary) + ')</span>' : '';",
+        "          html += '<div><div class=\"profile-option-name\">' + escapeHtml(p.name) + sumTag + '</div>';",
+        "          html += '<div class=\"profile-option-desc\">' + escapeHtml(p.description) + '</div></div>';",
         "          html += '</label>';",
         "        }",
         "        html += '</div>';",
@@ -297,12 +307,12 @@ export function generateChannelsSubtabScript() {
         "        html += '<hr style=\"border: none; border-top: 1px solid var(--border-default); margin: 16px 0;\">';",
         "        for(const f of currentStrat.fields) {",
         "          if(f.type === 'text') {",
-        "            const val = (s.strategyFields[f.id] || '').replaceAll('\"', '&quot;');",
+        "            const val = escapeHtml(s.strategyFields[f.id] || '');",
         "            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.replaceAll('\"', '&quot;') + '\"';",
+        "            if(f.placeholder) html += ' placeholder=\"' + escapeHtml(f.placeholder) + '\"';",
         "            html += '>';",
         "            if(f.hint) html += '<div class=\"field-hint\">' + f.hint + '</div>';",
         "            html += '</div>';",
@@ -317,13 +327,15 @@ export function generateChannelsSubtabScript() {
         "        }",
         "      }",
         "    }",
-        // Step 3: Override Flags. Flags are rendered from the server-side registry (window.__wizardFlags).
+        // Step 3: Profile Fields. Both the boolean flags and the text selectors are rendered from the server-side registry (window.__wizardFields), branching on type:
+        // booleans are checkboxes described by their description, text fields are inputs described by their hint.
         "    if(step === 3) {",
         "      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>';",
-        "      const wizFlags = window.__wizardFlags;",
-        "      for(const f of wizFlags) {",
+        "      const wizFields = window.__wizardFields;",
+        "      for(const f of wizFields) {",
+        "        if(f.type !== 'boolean') continue;",
         "        const checked = s.flags[f.id] ? ' checked' : '';",
         "        html += '<label class=\"wizard-flag\">';",
         "        html += '<input type=\"checkbox\" name=\"flag-' + f.id + '\"' + checked + '>';",
@@ -331,12 +343,17 @@ export function generateChannelsSubtabScript() {
         "        html += '<div class=\"wizard-flag-desc\">' + f.description + '</div></div>';",
         "        html += '</label>';",
         "      }",
-        "      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.replaceAll('\"', '&quot;') +",
-        "        '\" placeholder=\"e.g., .overlay, .ad-banner\">';",
-        "      html += '<div class=\"field-hint\">Overlay elements to hide during capture.</div>';",
-        "      html += '</div>';",
+        "      for(const f of wizFields) {",
+        "        if(f.type !== 'text') continue;",
+        "        const fieldVal = escapeHtml(s.fieldValues[f.id] || '');",
+        "        html += '<div class=\"field-group\" style=\"margin-top: 12px;\">';",
+        "        html += '<label class=\"wizard-label\" for=\"wizard-field-' + f.id + '\">' + f.label +",
+        "          ' <span style=\"color: var(--text-muted);\">(optional)</span></label>';",
+        "        html += '<input type=\"text\" class=\"wizard-field-input\" data-field-id=\"' + f.id + '\" id=\"wizard-field-' + f.id + '\" value=\"' + fieldVal +",
+        "          '\" placeholder=\"' + escapeHtml(f.placeholder || '') + '\">';",
+        "        html += '<div class=\"field-hint\">' + (f.hint || '') + '</div>';",
+        "        html += '</div>';",
+        "      }",
         "    }",
         // Step 4: Domain Mapping.
         "    if(step === 4) {",
@@ -346,16 +363,15 @@ export function generateChannelsSubtabScript() {
         "        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.replaceAll('\"', '&quot;') + '\" placeholder=\"e.g., watch.sling.com\">';",
+        "        html += '<input type=\"text\" class=\"domain-input\" value=\"' + escapeHtml(d.domain) + '\" placeholder=\"e.g., watch.sling.com\">';",
         "        html += '</div>';",
         "        html += '<div class=\"field-group\">';",
         "        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 += '<input type=\"text\" class=\"provider-input\" value=\"' + escapeHtml(d.service) + '\" placeholder=\"e.g., Sling TV\">';",
         "        html += '</div>';",
         "        html += '<div class=\"field-group\">';",
         "        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 += '<input type=\"text\" class=\"provider-tag-input\" value=\"' + escapeHtml(d.serviceTag) + '\" placeholder=\"auto-generated\">';",
         "        html += '<div class=\"field-hint\">Identifier for the service filter. Auto-generated from service name.</div>';",
         "        html += '</div>';",
         "        html += '</div>';",
@@ -366,12 +382,12 @@ export function generateChannelsSubtabScript() {
         "    if(step === 5) {",
         "      html += '<label class=\"wizard-label\">Review</label>';",
         "      html += '<table class=\"wizard-review-table\">';",
-        "      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>';",
-        "      const domainList = s.domains.filter((d) => d.domain).map((d) => esc(d.domain)).join(', ');",
+        "      html += '<tr><td>Profile</td><td>' + escapeHtml(s.profileName) + '</td></tr>';",
+        "      html += '<tr><td>Extends</td><td>' + escapeHtml(s.baseProfile) + '</td></tr>';",
+        "      html += '<tr><td>Strategy</td><td>' + escapeHtml(s.strategy) + '</td></tr>';",
+        "      const domainList = s.domains.filter((d) => d.domain).map((d) => escapeHtml(d.domain)).join(', ');",
         "      html += '<tr><td>Domain(s)</td><td>' + (domainList || 'none') + '</td></tr>';",
-        "      const serviceList = s.domains.filter((d) => d.service).map((d) => esc(d.service)).join(', ');",
+        "      const serviceList = s.domains.filter((d) => d.service).map((d) => escapeHtml(d.service)).join(', ');",
         "      html += '<tr><td>Service</td><td>' + (serviceList || 'none') + '</td></tr>';",
         "      if(s.strategy !== 'none') {",
         "        const reviewStrat = window.__wizardStrategies.find((st) => st.id === s.strategy);",
@@ -379,22 +395,26 @@ export function generateChannelsSubtabScript() {
         "          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>';",
+        "              html += '<tr><td>' + escapeHtml(rf.label.replace(/ \\(CSS\\)/, '')) + '</td><td><code>' + escapeHtml(rv) + '</code></td></tr>';",
         "            } else if(rf.type === 'boolean' && rv) {",
-        "              html += '<tr><td>' + esc(rf.label) + '</td><td>Yes</td></tr>';",
+        "              html += '<tr><td>' + escapeHtml(rf.label) + '</td><td>Yes</td></tr>';",
         "            }",
         "          }",
         "        }",
         "      }",
         "      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>';",
+        "        html += '<tr><td>Flags</td><td>' + escapeHtml(flagNames.join(', ')) + '</td></tr>';",
+        "      }",
+        "      for(const rtf of window.__wizardFields) {",
+        "        if(rtf.type !== 'text') continue;",
+        "        const rtv = s.fieldValues[rtf.id];",
+        "        if(rtv) html += '<tr><td>' + escapeHtml(rtf.label.replace(/ \\(CSS\\)/, '')) + '</td><td><code>' + escapeHtml(rtv) + '</code></td></tr>';",
         "      }",
-        "      if(s.hideSelector) html += '<tr><td>Hide Selector</td><td><code>' + esc(s.hideSelector) + '</code></td></tr>';",
         "      html += '</table>';",
         "      html += '<div class=\"field-group\" style=\"margin-top: 16px;\">';",
         "      html += '<label class=\"wizard-label\" for=\"wizard-description\">Description <span style=\"color: var(--text-muted);\">(optional)</span></label>';",
-        "      html += '<textarea id=\"wizard-description\" placeholder=\"Optional description for documentation.\">' + esc(s.description) + '</textarea>';",
+        "      html += '<textarea id=\"wizard-description\" placeholder=\"Optional description for documentation.\">' + escapeHtml(s.description) + '</textarea>';",
         "      html += '</div>';",
         "    }",
         "    content.innerHTML = html;",
@@ -428,7 +448,7 @@ export function generateChannelsSubtabScript() {
         "        else { delete s.strategyFields[this.getAttribute('data-field')]; }",
         "      });",
         "    }",
-        // Step 3: flag checkboxes and hide selector.
+        // Step 3: flag checkboxes and text selector inputs. Text fields bind by their data-field-id into fieldValues.
         "    const flagCbs = document.querySelectorAll('input[name^=\"flag-\"]');",
         "    for(const flagCb of flagCbs) {",
         "      flagCb.addEventListener('change', function() {",
@@ -436,9 +456,11 @@ export function generateChannelsSubtabScript() {
         "        if(this.checked) { s.flags[flagName] = true; } else { delete s.flags[flagName]; }",
         "      });",
         "    }",
-        "    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 service tag. Per-iteration let bindings from for...of.entries() capture the correct index
+        "    const fieldInputs = document.querySelectorAll('.wizard-field-input[data-field-id]');",
+        "    for(const fieldInput of fieldInputs) {",
+        "      fieldInput.addEventListener('input', function() { s.fieldValues[this.getAttribute('data-field-id')] = this.value; });",
+        "    }",
+        // Step 4: add-domain button and domain inputs with auto-fill for service tag. Per-iteration const 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);",
@@ -490,24 +512,38 @@ export function generateChannelsSubtabScript() {
         // Open the profile builder wizard and reset state for a new profile.
         "  window.openWizard = () => {",
         "    profileWizard.state = {",
-        "      editKey: null, editMode: false, profileName: '', baseProfile: '', strategy: 'none',",
-        "      strategyFields: {}, flags: {}, hideSelector: '',",
-        "      domains: [{ domain: '', service: '', serviceTag: '' }], description: ''",
+        "      baseProfile: '', baseProfileFields: {}, description: '',",
+        "      domains: [{ config: {}, domain: '', service: '', serviceTag: '' }], editKey: null, editMode: false,",
+        "      fieldValues: {}, flags: {}, profileName: '', strategy: 'none', strategyFields: {}",
         "    };",
         "    profileWizard.open({ title: 'New Service Profile' });",
         "  };",
         // Add another domain row to step 4 and re-render.
         "  function addWizardDomain() {",
-        "    profileWizard.state.domains.push({ domain: '', service: '', serviceTag: '' });",
+        "    profileWizard.state.domains.push({ config: {}, domain: '', service: '', serviceTag: '' });",
         "    renderProfileStep(profileWizard.getStep());",
         "  }",
-        // Save the profile to the server.
+        // Save the profile to the server. Concurrent edits of the same profile resolve last-save-wins: the rebuild starts from the snapshot fetched when the wizard opened,
+        // matching the server's whole-replace semantics. The profile is a copy of the full fetched profile (empty for a new one) with only the wizard's rendered vocabulary
+        // deleted and
+        // re-applied, so every field the wizard does not render round-trips unchanged while a cleared rendered field is a real deletion. The server's whole-replace
+        // semantics are unchanged; a field outside the SiteProfile allowlist that rode through here surfaces as an explicit validation error, which is the honest outcome.
         "  window.saveProfile = async (andTest) => {",
         "    const s = profileWizard.state;",
-        "    const profile = { extends: s.baseProfile };",
+        // The wizard's rendered vocabulary: every field id it renders plus the structural keys it owns. Deleting these from the base copy is what makes a cleared field a
+        // deletion; everything else in the copy is preserved verbatim.
+        "    const vocabulary = window.__wizardFields.map((f) => f.id).concat(['extends', 'description', 'channelSelection']);",
+        "    const profile = Object.assign({}, s.baseProfileFields || {});",
+        "    for(const vk of vocabulary) { delete profile[vk]; }",
+        "    profile.extends = s.baseProfile;",
+        // Rebuild channelSelection rather than dropping it: preserve the base's unrendered sub-fields (listSelector, scrollSelector, scrollTarget) by starting from a copy
+        // and removing only the CHOSEN strategy's rendered field ids, so a strategy switch cannot leave stale rendered values behind. When the strategy is 'none' no
+        // channelSelection key is written at all - the sub-fields configure a strategy the user just removed.
         "    if(s.strategy !== 'none') {",
-        "      const cs = { strategy: s.strategy };",
         "      const saveStrat = window.__wizardStrategies.find((st) => st.id === s.strategy);",
+        "      const cs = Object.assign({}, (s.baseProfileFields && s.baseProfileFields.channelSelection) || {});",
+        "      if(saveStrat) { for(const rf of saveStrat.fields) { delete cs[rf.id]; } }",
+        "      cs.strategy = s.strategy;",
         "      if(saveStrat) {",
         "        for(const sf of saveStrat.fields) {",
         "          const sfVal = s.strategyFields[sf.id];",
@@ -517,16 +553,23 @@ export function generateChannelsSubtabScript() {
         "      }",
         "      profile.channelSelection = cs;",
         "    }",
-        "    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;",
+        // Re-apply the rendered profile fields: boolean flags that are set, text selectors that are non-empty. A cleared text field or an unchecked flag simply is not
+        // re-added, which - because the vocabulary was deleted above - deletes it from the round-tripped profile.
+        "    for(const f of window.__wizardFields) {",
+        "      if(f.type === 'boolean') { if(s.flags[f.id]) profile[f.id] = true; }",
+        "      else { const tv = (s.fieldValues[f.id] || '').trim(); if(tv) profile[f.id] = tv; }",
+        "    }",
         "    if(s.description) profile.description = s.description;",
+        // Each domain entry preserves its full raw config (unrendered fields ride through), then re-applies the profile key and the rendered service/serviceTag - deleting
+        // them when the inputs are cleared. A row whose domain string was edited carries its config to the new domain key (rename semantics).
         "    const domains = {};",
         "    for(const d of s.domains) {",
         "      if(d.domain.trim()) {",
-        "        domains[d.domain.trim()] = { profile: s.profileName };",
-        "        if(d.service.trim()) domains[d.domain.trim()].service = d.service.trim();",
-        "        if(d.serviceTag.trim()) domains[d.domain.trim()].serviceTag = d.serviceTag.trim();",
+        "        const entry = Object.assign({}, d.config || {});",
+        "        entry.profile = s.profileName;",
+        "        if(d.service.trim()) entry.service = d.service.trim(); else delete entry.service;",
+        "        if(d.serviceTag.trim()) entry.serviceTag = d.serviceTag.trim(); else delete entry.serviceTag;",
+        "        domains[d.domain.trim()] = entry;",
         "      }",
         "    }",
         "    const body = { domains: domains, key: s.profileName, profile: profile };",
@@ -559,7 +602,8 @@ export function generateChannelsSubtabScript() {
         "    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;",
+        "    if(s.fieldValues.hideSelector) testSelectors.hideSelector = s.fieldValues.hideSelector;",
+        "    if(s.fieldValues.dismissSelector) testSelectors.dismissSelector = s.fieldValues.dismissSelector;",
         "    const testUrl = url.includes('://') ? url : 'https://' + url;",
         "    try {",
         "      const res = await fetch('/config/profiles/test', {",
@@ -600,7 +644,7 @@ export function generateChannelsSubtabScript() {
         "        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 += '<tr><td style=\"padding: 4px 8px;\">' + escapeHtml(name) + '</td>';",
         "        html += '<td style=\"padding: 4px 8px; color: ' + color + ';\">' + text + '</td></tr>';",
         "      }",
         "      html += '</table>';",
@@ -634,7 +678,7 @@ export function generateChannelsSubtabScript() {
         "    const gEl = document.getElementById('browse-guide-urls-data');",
         "    if(gEl) browseGuideUrls = JSON.parse(gEl.textContent || '{}');",
         "  } 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
+        // Browse Channels wizard. 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',",
@@ -692,8 +736,9 @@ export function generateChannelsSubtabScript() {
         "      let html = '<p class=\"wizard-hint\">Select a service to see its available channels.</p>';",
         "      html += '<div class=\"wizard-provider-grid\">';",
         "      for(const p of available) {",
-        "        html += '<div class=\"wizard-provider-card\" data-slug=\"' + esc(p.slug) + '\" data-label=\"' + esc(p.label) + '\">';",
-        "        html += serviceIconHtml(p.domain, esc(p.label), 'provider-icon', 'provider-icon-text', 'both', p.iconUrl || '');",
+        "        html += '<div class=\"wizard-provider-card\" data-slug=\"' + escapeHtml(p.slug) + '\" data-label=\"' + escapeHtml(p.label) + '\">';",
+        // serviceIconHtml escapes its name argument internally through the shared escapeHtml SSOT, so the label is passed raw here; escaping it again would double-encode.
+        "        html += serviceIconHtml(p.domain, p.label, 'provider-icon', 'provider-icon-text', 'both', p.iconUrl || '');",
         "        html += '</div>';",
         "      }",
         "      html += '</div>';",
@@ -711,7 +756,7 @@ export function generateChannelsSubtabScript() {
         "    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>';",
+        "    content.innerHTML = '<div class=\"wizard-spinner\">Discovering channels from ' + escapeHtml(label) + '...</div>';",
         // Fetch discovered channels from the service endpoint.
         "    (async () => {",
         "      try {",
@@ -723,18 +768,19 @@ export function generateChannelsSubtabScript() {
         "      } catch(err) {",
         "        if(browseWizard.state.slug !== slug) return;",
         "        content.innerHTML = '<div class=\"wizard-empty\"><div class=\"wizard-empty-title\">Could not discover channels.</div>' +",
-        "          esc(err.message || 'Check that the browser is running and you are signed in to ' + label + '.') + '</div>';",
+        "          escapeHtml(err.message || 'Check that the browser is running and you are signed in to ' + label + '.') + '</div>';",
         "      }",
         "    })();",
         "  }",
         // 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 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).
+        // When lineup is present but the entry is disabled, the channel is "disabled" regardless of currentTag. Otherwise, when lineup.currentTag matches the
+        // browsed service slug, the channel is "current" (checked); when it 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) {",
         "      document.getElementById('browse-content').innerHTML =",
         "        '<div class=\"wizard-empty\"><div class=\"wizard-empty-title\">No channels found.</div>' +",
-        "        'Make sure you are signed in to ' + esc(label) + ' in the browser.</div>';",
+        "        'Make sure you are signed in to ' + escapeHtml(label) + ' in the browser.</div>';",
         "      return;",
         "    }",
         // Build the channel list HTML with hint, legend, search filter, and three-state checkboxes.
@@ -755,8 +801,8 @@ export function generateChannelsSubtabScript() {
         // Render each discovered channel. The lineup field from the server annotation determines the checkbox state.
         "    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 service), current (already using this service).
+        // Determine the channel's state from the server-provided lineup annotation: new (no lineup data), disabled (predefined but disabled),
+        // switch (exists via a different service), or current (already using this service).
         "      let state = 'new';",
         "      let stateLabel = '';",
         "      if(lu) {",
@@ -773,33 +819,34 @@ export function generateChannelsSubtabScript() {
         "      }",
         "      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;') + '\">';",
+        "      html += '<label class=\"' + itemClass + '\" data-name=\"' + escapeHtml(searchName) + '\">';",
         // Checkbox with data attributes for state tracking and submission.
         "      html += '<input type=\"checkbox\" class=\"browse-channel-cb\"';",
-        "      html += ' data-name=\"' + esc(ch.name).replaceAll('\"', '&quot;') + '\"';",
-        "      html += ' data-selector=\"' + esc(ch.channelSelector).replaceAll('\"', '&quot;') + '\"';",
+        "      html += ' data-name=\"' + escapeHtml(ch.name) + '\"';",
+        "      html += ' data-selector=\"' + escapeHtml(ch.channelSelector) + '\"';",
         "      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) + '\"';",
+        "      if(lu) html += ' data-canonical=\"' + escapeHtml(lu.canonicalKey) + '\" data-has-alternatives=\"' + (lu.hasAlternatives ? 'true' : 'false') + '\"';",
+        "      if(ch.stationId) html += ' data-station-id=\"' + escapeHtml(ch.stationId) + '\"';",
         "      if(state === 'current') html += ' checked';",
         "      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.
         "      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>';",
+        // channelDisplayHtml escapes its name argument internally, so channelName is passed raw; escaping it here too would double-encode.
+        "      html += channelDisplayHtml(lu ? lu.logoUrl || '' : '', channelName, 'browse-channel-logo', 'browse-channel-text', 'both');",
+        "      if(ch.affiliate) html += ' <span class=\"browse-affiliate\">(' + escapeHtml(ch.affiliate) + ')</span>';",
         "      html += '</span>';",
         // Right side: state label and tier badge.
         "      html += '<span class=\"browse-channel-meta\">';",
-        "      if(stateLabel) html += '<span class=\"browse-state-label\">' + esc(stateLabel) + '</span>';",
+        "      if(stateLabel) html += '<span class=\"browse-state-label\">' + escapeHtml(stateLabel) + '</span>';",
         "      if(ch.tier === 'free') html += '<span class=\"browse-tier-badge tier-free\">Free</span>';",
         "      html += '</span>';",
         "      html += '</label>';",
         "    }",
         "    html += '</div>';",
         "    document.getElementById('browse-content').innerHTML = html;",
-        "    browseWizard.setTitle('Browse Channels <span class=\"browse-header-count\">(' + esc(label) + ' \\u2014 ' + channels.length + ' channels)</span>');",
+        "    browseWizard.setTitle('Browse Channels <span class=\"browse-header-count\">(' + escapeHtml(label) + ' \\u2014 ' + channels.length + ' channels)</span>');",
         // 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.
         "    const switchCbs = document.querySelectorAll('.browse-channel-cb[data-original=\"switch\"]');",
@@ -896,8 +943,9 @@ export function generateChannelsSubtabScript() {
         "    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.
+        // Submit channel changes via the modify endpoint. Collects the applicable action for each visible checkbox by comparing its checked/indeterminate state
+        // to data-original: add (new channels checked), enable (disabled channels checked), switch (switched-to channels checked), or remove (current channels
+        // unchecked). Each entry includes an action field so the server can handle them appropriately.
         "  window.submitBrowseChannels = () => {",
         "    const cbs = document.querySelectorAll('.browse-channel-cb');",
         "    const guideUrl = browseGuideUrls[browseWizard.state.slug] || '';",
@@ -1055,24 +1103,18 @@ export function generateChannelsSubtabScript() {
         "      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.
+        // Render the auth waiting state - shows a message while the user authenticates in Chrome. The Done and Skip buttons carry data-click-action attributes; the
+        // project-wide dispatcher routes the clicks through the registerAction handlers installed below.
         "  function renderSetupAuthWaiting() {",
         "    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) +",
+        "    content.innerHTML = '<div class=\"wizard-spinner\">Complete authentication for ' + escapeHtml(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.
-        "    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(); }; }",
-        "    }",
+        "      '<button type=\"button\" class=\"btn btn-primary\" data-click-action=\"" + ACTIONS.authDone + "\">Done</button> ' +",
+        "      '<button type=\"button\" class=\"btn btn-secondary\" data-click-action=\"" + ACTIONS.authSkip + "\">Skip</button></div>';",
         "  }",
         // Render the current setup step content and update navigation buttons. The controller handles step indicator updates and error clearing.
         "  function renderSetupStep(step) {",
@@ -1092,7 +1134,8 @@ export function generateChannelsSubtabScript() {
         "        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 += serviceIconHtml(p.domain || '', esc(p.displayName), 'provider-icon', 'provider-icon-text', 'both', p.iconUrl || '');",
+        // serviceIconHtml escapes its name argument internally, so displayName is passed raw; escaping it here too would double-encode.
+        "        html += serviceIconHtml(p.domain || '', p.displayName, 'provider-icon', 'provider-icon-text', 'both', p.iconUrl || '');",
         "        html += '</label>';",
         "      }",
         "      html += '</div>';",
@@ -1107,10 +1150,10 @@ export function generateChannelsSubtabScript() {
         "      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-name\">' + escapeHtml(label) + '</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 += '<button type=\"button\" class=\"btn btn-primary\" data-click-action=\"" + ACTIONS.authStart + "\">Sign In</button> ';",
+        "      html += '<button type=\"button\" class=\"btn btn-secondary\" data-click-action=\"" + ACTIONS.authSkip + "\">Skip</button>';",
         "      html += '</div>';",
         "    }",
         // Step 3: Summary and finish.
@@ -1123,25 +1166,19 @@ export function generateChannelsSubtabScript() {
         "      html += '</div>';",
         "    }",
         "    content.innerHTML = html;",
-        // Attach event handlers to dynamically-rendered buttons programmatically. Uses data-action attributes to identify buttons without inline onclick.
-        "    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.
+        // a toast. Exposed on window so both channels.ts and config.ts (bulkToggleTag) can use the same code path. No page reload needed. The server's message wins over
+        // the caller's fallback so a mutation response can carry the playlist-reload hint; the fallback covers responses that carry no message.
         "  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); }",
+        "    const toast = data.message || toastMessage;",
+        "    if(toast && window.showToast) { window.showToast(toast); }",
         "  };",
         "  window.openTagManager = () => {",
         "    const modal = document.getElementById('tag-manager-modal');",
@@ -1264,14 +1301,14 @@ export function generateChannelsSubtabScript() {
         "    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>';",
+        "    const label = useExclude ? 'all channels except those tagged <strong>' + unchecked.map((t) => escapeHtml(t)).join(', ') + '</strong>'",
+        "      : 'channels tagged <strong>' + checked.map((t) => escapeHtml(t)).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>' +",
+        "        '<code>' + escapeHtml(url) + '</code>' +",
+        "        '<button type=\"button\" class=\"btn btn-primary btn-sm\" data-click-action=\"" + ACTIONS.copyPlaylistHintUrl + "\">Copy</button>' +",
         "        '</div></div>';",
         "    }});",
         "  };",
@@ -1340,6 +1377,48 @@ export function generateChannelsSubtabScript() {
         "    storageKey: 'prismcast-channels-subtab',",
         "    switchFn: switchChannelsSubtab",
         "  });",
+        /* Action registrations. Each binds an ACTIONS name to a window-exposed handler defined above; the project-wide dispatcher in shared.ts looks up the handler
+         * by name when a click / change / keydown / submit event lands on a matching [data-<event>-action] element. Handlers express only the action's intent -
+         * event mechanics (preventDefault, stopPropagation, dropdown close) live declaratively on the trigger element via the event-type-scoped data-<event>-prevent
+         * -default, data-<event>-stop-propagation, and data-<event>-close-dropdown attributes that the dispatcher processes before the handler runs.
+         */
+        "  window.registerAction('" + ACTIONS.applyTagColumnFilter + "', () => applyTagColumnFilter());",
+        "  window.registerAction('" + ACTIONS.authDone + "', () => setupAuthDone());",
+        "  window.registerAction('" + ACTIONS.authSkip + "', () => setupAuthSkip());",
+        "  window.registerAction('" + ACTIONS.authStart + "', () => setupAuthService());",
+        "  window.registerAction('" + ACTIONS.checkSelectors + "', () => checkSelectors());",
+        "  window.registerAction('" + ACTIONS.copyPlaylistHintUrl + "', () => copyPlaylistHintUrl());",
+        "  window.registerAction('" + ACTIONS.closeExportModal + "', () => closeExportModal());",
+        "  window.registerAction('" + ACTIONS.closeImportModal + "', () => closeImportModal());",
+        "  window.registerAction('" + ACTIONS.closeTagManager + "', () => closeTagManager());",
+        "  window.registerAction('" + ACTIONS.createTag + "', () => createTag());",
+        /* Conditional preventDefault on a specific key. data-keydown-prevent-default would fire on every keystroke; only Enter should be canceled. The conditional
+         * filtering logic lives in the handler since the dispatcher's modifier walk has no per-key scope.
+         */
+        "  window.registerAction('" + ACTIONS.createTagOnEnter + "', (target, event) => {",
+        "    if(event.key === 'Enter') { event.preventDefault(); createTag(); }",
+        "  });",
+        "  window.registerAction('" + ACTIONS.deleteTag + "', (target) => deleteTag(target.dataset.tagName));",
+        "  window.registerAction('" + ACTIONS.deleteUserProfile + "', (target) => deleteUserProfile(target.dataset.profileKey));",
+        "  window.registerAction('" + ACTIONS.editUserProfile + "', (target) => editUserProfile(target.dataset.profileKey));",
+        "  window.registerAction('" + ACTIONS.endProfileTest + "', () => endProfileTest());",
+        "  window.registerAction('" + ACTIONS.executeExport + "', () => executeExport());",
+        "  window.registerAction('" + ACTIONS.executeImport + "', () => executeImport());",
+        "  window.registerAction('" + ACTIONS.finishSetup + "', () => finishSetup());",
+        "  window.registerAction('" + ACTIONS.openBrowseModal + "', () => openBrowseModal());",
+        "  window.registerAction('" + ACTIONS.openSetupWizard + "', () => openSetupWizard());",
+        "  window.registerAction('" + ACTIONS.openTagManager + "', () => openTagManager());",
+        "  window.registerAction('" + ACTIONS.openWizard + "', () => openWizard());",
+        "  window.registerAction('" + ACTIONS.restoreTag + "', (target) => restoreTag(target.dataset.tagName));",
+        "  window.registerAction('" + ACTIONS.saveProfile + "', (target) => saveProfile(target.dataset.withTest === 'true'));",
+        "  window.registerAction('" + ACTIONS.showPlaylistHint + "', (target) => showPlaylistHint(target));",
+        "  window.registerAction('" + ACTIONS.skipSetup + "', () => skipSetup());",
+        "  window.registerAction('" + ACTIONS.startServiceExport + "', () => startServiceExport());",
+        "  window.registerAction('" + ACTIONS.startServiceImport + "', () => startServiceImport());",
+        "  window.registerAction('" + ACTIONS.startTagRename + "', (target) => startTagRename(target, target.dataset.tagName));",
+        "  window.registerAction('" + ACTIONS.submitBrowseChannels + "', () => submitBrowseChannels());",
+        "  window.registerAction('" + ACTIONS.toggleExportAll + "', (target) => toggleExportAll(target));",
+        "  window.registerAction('" + ACTIONS.toggleTagColumnFilter + "', () => toggleTagColumnFilter());",
         "})();",
         "</script>"
     ].join("\n");