prismcast 1.10.2 → 1.11.0

package/dist/routes/config/channels/table.js

@@ -3,8 +3,9 @@ import { compareChannelSort, getAllServiceTags, getAuthDomainForChannel, getChan
 import { escapeHtml, formatTimeAgo } from "../../../utils/index.js";
 import { getActiveTagVocabulary, getChannelCustomizations, getChannelEffectiveTags, getChannelListing, getChannelLogo, getChannelsParseErrorMessage, getEffectiveHdhrEnabled, getPredefinedScopeCounts, getTagRegistry, getUserChannelsFilePath, hasChannelsParseError, isPredefinedChannel, isPredefinedChannelDisabled, isUserChannel, isVisibleChannel, tagsMatch } from "../../../config/userChannels.js";
 import { getCachedProviderChannels, getProviderDomainMap, getProviderGuideUrls, getProviderModuleInfo } from "../../../browser/channelSelection.js";
-import { getChannelHealth, getDomainAuth } from "../../../config/health.js";
+import { getChannelHealth, getDomainAuthState } from "../../../config/health.js";
 import { getProfileForChannel, getProfiles } from "../../../config/profiles.js";
+import { ACTIONS } from "../../clientActions.js";
 import { CONFIG } from "../../../config/index.js";
 import { PREDEFINED_CHANNELS } from "../../../channels/index.js";
 import { categorizeProfiles } from "../index.js";
@@ -34,7 +35,7 @@ export const OPTIONAL_COLUMNS = [
     { align: "left", cssClass: "col-selector", field: "channelSelector", label: "Selector", width: "130px" },
     { align: "left", cssClass: "col-tags", field: "tags", label: "Tags", width: "150px" }
 ];
-// Total number of columns in the channels table (4 required + 6 optional).
+// Total number of columns in the channels table: the required columns plus every entry in OPTIONAL_COLUMNS.
 const TOTAL_COLUMN_COUNT = 10;
 // Valid optional column field names.
 export const VALID_OPTIONAL_COLUMNS = new Set(OPTIONAL_COLUMNS.map((c) => c.field));
@@ -61,7 +62,7 @@ function generateTextField(id, name, label, value, options = {}) {
     const modifiedDot = isModified ? "<span class=\"modified-dot\" title=\"Modified from predefined default\"></span>" : "";
     const defaultAttr = (options.defaultValue !== undefined) ? " data-default=\"" + escapeHtml(options.defaultValue) + "\"" : "";
     const resetBtn = isModified ? "<button type=\"button\" class=\"btn-reset\" title=\"Reset to predefined default\" aria-label=\"Reset to predefined default\" " +
-        "onclick=\"resetChannelField('" + id + "')\">&#8635;</button>" : "";
+        "data-click-action=\"" + ACTIONS.resetChannelField + "\" data-field-id=\"" + id + "\">&#8635;</button>" : "";
     lines.push("<div class=\"form-row" + modifiedClass + "\">");
     lines.push(modifiedDot + "<label for=\"" + id + "\">" + label + "</label>");
     lines.push("<input class=\"form-input\" type=\"" + inputType + "\" id=\"" + id + "\" name=\"" + name + "\"" + required + listAttr + pattern +
@@ -97,7 +98,7 @@ function generateProfileDropdown(id, selectedProfile, profiles, showHint = true,
     const modifiedDot = isModified ? "<span class=\"modified-dot\" title=\"Modified from predefined default\"></span>" : "";
     const defaultAttr = (defaultProfile !== undefined) ? " data-default=\"" + escapeHtml(defaultProfile) + "\"" : "";
     const resetBtn = isModified ? "<button type=\"button\" class=\"btn-reset\" title=\"Reset to predefined default\" aria-label=\"Reset to predefined default\" " +
-        "onclick=\"resetChannelField('" + id + "')\">&#8635;</button>" : "";
+        "data-click-action=\"" + ACTIONS.resetChannelField + "\" data-field-id=\"" + id + "\">&#8635;</button>" : "";
     // Helper to generate option elements for a profile.
     const renderOption = (profile) => {
         const selected = (profile.name === selectedProfile) ? " selected" : "";
@@ -154,7 +155,7 @@ function generateProfileDropdown(id, selectedProfile, profiles, showHint = true,
     if (showHint) {
         lines.push("<div class=\"hint\">Autodetect uses predefined profiles for known sites. If video doesn't play or fullscreen fails, " +
             "try experimenting with different profiles. ");
-        lines.push("<a href=\"#\" onclick=\"toggleProfileReference(); return false;\">View profile reference</a></div>");
+        lines.push("<a href=\"#\" data-click-action=\"" + ACTIONS.toggleProfileReference + "\" data-click-prevent-default>View profile reference</a></div>");
     }
     return lines;
 }
@@ -170,7 +171,8 @@ function generateProfileReference(profiles) {
     lines.push("<div id=\"profile-reference\" class=\"profile-reference\" style=\"display: none;\">");
     lines.push("<div class=\"profile-reference-header\">");
     lines.push("<h3>Profile Reference</h3>");
-    lines.push("<button type=\"button\" class=\"profile-reference-close\" aria-label=\"Close\" onclick=\"toggleProfileReference()\">\u2715</button>");
+    lines.push("<button type=\"button\" class=\"profile-reference-close\" aria-label=\"Close\" data-click-action=\"" +
+        ACTIONS.toggleProfileReference + "\">\u2715</button>");
     lines.push("</div>");
     lines.push("<p class=\"reference-intro\">Profiles configure how PrismCast interacts with different video players. Autodetect uses predefined ");
     lines.push("profiles for known sites. If video doesn't play or fullscreen fails, use this reference to experiment with different profiles.</p>");
@@ -275,18 +277,17 @@ function generateProfileReference(profiles) {
     return lines.join("\n");
 }
 /**
- * Generates HTML for the advanced fields section (station ID, channel selector, channel number, guide title, logo URL, HDHomeRun toggle, tags).
+ * Generates HTML for the advanced fields section (station ID, guide title, logo URL, channel selector, channel number, tags, HDHomeRun toggle, force capture).
  * @param idPrefix - Prefix for element IDs ("add" or "edit").
  * @param options - Field values, defaults, and customization metadata. See AdvancedFieldOptions.
  * @returns Array of HTML strings for the advanced fields section.
  */
 function generateAdvancedFields(idPrefix, options = {}) {
-    const { channelNumberValue = "", channelSelectorValue = "", guideTitleValue = "", hdhrEnabled = true, logoUrlValue = "", showHints = true, stationIdValue = "", tagsValue = "" } = options;
+    const { channelNumberValue = "", channelSelectorValue = "", forceCapture = false, guideTitleValue = "", hdhrEnabled = true, logoUrlValue = "", showHints = true, stationIdValue = "", tagsValue = "" } = options;
     const lines = [];
     // Advanced fields toggle.
-    lines.push("<div class=\"advanced-toggle\" onclick=\"document.getElementById('" + idPrefix +
-        "-advanced').classList.toggle('show'); this.textContent = this.textContent === 'Show Advanced Options' ? " +
-        "'Hide Advanced Options' : 'Show Advanced Options';\">Show Advanced Options</div>");
+    lines.push("<div class=\"advanced-toggle\" data-click-action=\"" + ACTIONS.toggleAdvancedFields + "\" data-advanced-id=\"" + idPrefix +
+        "-advanced\">Show Advanced Options</div>");
     lines.push("<div id=\"" + idPrefix + "-advanced\" class=\"advanced-fields\">");
     // Station ID.
     const stationIdHint = showHints ? "Optional Gracenote station ID for guide data (tvc-guide-stationid)." : undefined;
@@ -335,7 +336,7 @@ function generateAdvancedFields(idPrefix, options = {}) {
             const checked = currentTags.some((t) => tagsMatch(t, tag)) ? " checked" : "";
             lines.push("<label class=\"tag-checkbox-label\">" +
                 "<input type=\"checkbox\" class=\"tag-checkbox\" data-tag=\"" + escapeHtml(tag) + "\"" + checked +
-                " onchange=\"updateTagsHidden(this.closest('.form-row'))\">" +
+                " data-change-action=\"" + ACTIONS.updateTagsHidden + "\">" +
                 "<span class=\"tag-badge\">" + escapeHtml(tag) + "</span></label>");
         }
         lines.push("</div>");
@@ -362,15 +363,35 @@ function generateAdvancedFields(idPrefix, options = {}) {
     if (hdhrHint) {
         lines.push("<div class=\"hint\">" + hdhrHint + "</div>");
     }
+    // Force screen capture. There is no hidden-input partner here: this field's default is false, so an unchecked box submitting nothing is unambiguous and the
+    // stored shape stays sparse. The value="true" the checkbox carries is the exact token parseFormBody tests for.
+    const forceCaptureChecked = forceCapture ? " checked" : "";
+    // Customization is presence in stored deltas (identity field, lives on canonical entry); surfaced via customizedFields. The default value arrives
+    // pre-stringified from resetValueFor, which yields the empty string for a field no predefined source declares - and the empty string unchecks the box.
+    const forceCaptureModified = customized?.has("forceCapture") === true;
+    const forceCaptureModifiedClass = forceCaptureModified ? " modified" : "";
+    const forceCaptureModifiedDot = forceCaptureModified ? "<span class=\"modified-dot\" title=\"Modified from predefined default\"></span>" : "";
+    const forceCaptureDefaultAttr = (defs?.forceCapture !== undefined) ? " data-default=\"" + defs.forceCapture + "\"" : "";
+    const forceCaptureHint = showHints ?
+        "When checked, this channel always uses screen capture, skipping native HLS streaming. Useful for sites whose native stream misbehaves." :
+        undefined;
+    lines.push("<div class=\"form-row form-row-checkbox" + forceCaptureModifiedClass + "\">");
+    lines.push(forceCaptureModifiedDot + "<label for=\"" + idPrefix + "-forceCapture\">Force capture</label>");
+    lines.push("<input type=\"checkbox\" id=\"" + idPrefix + "-forceCapture\" name=\"forceCapture\" value=\"true\"" + forceCaptureChecked +
+        forceCaptureDefaultAttr + ">");
+    lines.push("</div>");
+    if (forceCaptureHint) {
+        lines.push("<div class=\"hint\">" + forceCaptureHint + "</div>");
+    }
     // Close the advanced-fields wrapper opened at the top of this builder.
     lines.push("</div>");
     return lines;
 }
 /**
- * Generates JavaScript variables for channel selector datalist population. Produces three variables: `channelSelectorsByDomain` maps URL hostnames to known
+ * Generates JavaScript variables for channel selector datalist population. Produces four variables: `channelSelectorsByDomain` maps URL hostnames to known
  * channel selector values (from predefined channels and cached service discovery), `serviceByDomain` maps service guide URL hostnames to service slugs for
- * client-side async discovery, and `serviceGuideUrl` maps service slugs to their guide URLs for URL correction hints. Embedded as a `<script>` block in the
- * channels panel.
+ * client-side async discovery, `serviceGuideUrl` maps service slugs to their guide URLs for URL correction hints, and `predefinedByDomain` maps domains to
+ * predefined channel summaries so the manual add form can show inline hints without a server round-trip. Embedded as a `<script>` block in the channels panel.
  *
  * @returns JavaScript variable declarations ready to embed in a `<script>` tag.
  */
@@ -433,13 +454,14 @@ export function generateTagFilterContent() {
     const vocabulary = getActiveTagVocabulary();
     const lines = [];
     for (const tag of vocabulary) {
-        lines.push("<label class=\"provider-option\" onclick=\"event.stopPropagation()\">" +
-            "<input type=\"checkbox\" class=\"tag-filter-checkbox\" data-tag=\"" + escapeHtml(tag) + "\" checked onchange=\"applyTagColumnFilter()\"> " +
-            escapeHtml(tag) + "</label>");
+        lines.push("<label class=\"provider-option\" data-click-stop-propagation>" +
+            "<input type=\"checkbox\" class=\"tag-filter-checkbox\" data-tag=\"" + escapeHtml(tag) + "\" checked data-change-action=\"" +
+            ACTIONS.applyTagColumnFilter + "\"> " + escapeHtml(tag) + "</label>");
     }
     if (vocabulary.length > 0) {
         lines.push("<div class=\"dropdown-divider\"></div>");
-        lines.push("<div class=\"dropdown-item\" id=\"tag-filter-toggle\" onclick=\"event.stopPropagation(); toggleTagColumnFilter()\">Show None</div>");
+        lines.push("<div class=\"dropdown-item\" id=\"tag-filter-toggle\" data-click-action=\"" + ACTIONS.toggleTagColumnFilter +
+            "\" data-click-stop-propagation>Show None</div>");
     }
     return lines.join("");
 }
@@ -455,26 +477,27 @@ export function generateTagManagerBody() {
     const tagListItems = [];
     for (const tag of vocabulary) {
         tagListItems.push("<div class=\"tag-manager-item\" data-tag=\"" + escapeHtml(tag) + "\">" +
-            "<span class=\"tag-badge tag-editable\" title=\"Click to rename\" onclick=\"startTagRename(this, '" + escapeHtml(tag) +
-            "')\">" + escapeHtml(tag) + "</span>" +
-            "<button type=\"button\" class=\"btn-icon btn-icon-delete\" title=\"Delete tag\" onclick=\"deleteTag('" + escapeHtml(tag) +
-            "')\">" + ICON_DELETE + "</button></div>");
+            "<span class=\"tag-badge tag-editable\" title=\"Click to rename\" data-click-action=\"" + ACTIONS.startTagRename +
+            "\" data-tag-name=\"" + escapeHtml(tag) + "\">" + escapeHtml(tag) + "</span>" +
+            "<button type=\"button\" class=\"btn-icon btn-icon-delete\" title=\"Delete tag\" data-click-action=\"" +
+            ACTIONS.deleteTag + "\" data-tag-name=\"" + escapeHtml(tag) +
+            "\">" + ICON_DELETE + "</button></div>");
     }
     // Deleted predefined tags section - show restore option for tags the user has deleted.
     const deletedItems = [];
     for (const tag of registry.deletedTags) {
         deletedItems.push("<div class=\"tag-manager-item tag-deleted\" data-tag=\"" + escapeHtml(tag) + "\">" +
             "<span class=\"tag-badge tag-badge-deleted\">" + escapeHtml(tag) + "</span> <span class=\"tag-annotation\">(deleted)</span>" +
-            "<button type=\"button\" class=\"btn-icon\" title=\"Restore tag\" onclick=\"restoreTag('" + escapeHtml(tag) +
-            "')\">" + ICON_REVERT + "</button></div>");
+            "<button type=\"button\" class=\"btn-icon\" title=\"Restore tag\" data-click-action=\"" + ACTIONS.restoreTag + "\" data-tag-name=\"" + escapeHtml(tag) +
+            "\">" + ICON_REVERT + "</button></div>");
     }
     return "<div class=\"tag-manager\">" +
         "<p class=\"wizard-hint\">Create and manage the tag vocabulary. Tags can be assigned to channels via the channel table " +
         "for playlist filtering and organization.</p>" +
         "<div class=\"tag-manager-add\">" +
         "<input type=\"text\" id=\"tag-manager-input\" placeholder=\"New tag name\" maxlength=\"30\" " +
-        "pattern=\"[a-zA-Z0-9]([a-zA-Z0-9 -]*[a-zA-Z0-9])?\" onkeydown=\"if(event.key==='Enter'){event.preventDefault();createTag();}\">" +
-        "<button type=\"button\" class=\"btn btn-primary btn-sm\" onclick=\"createTag()\">Add</button>" +
+        "pattern=\"[a-zA-Z0-9]([a-zA-Z0-9 -]*[a-zA-Z0-9])?\" data-keydown-action=\"" + ACTIONS.createTagOnEnter + "\">" +
+        "<button type=\"button\" class=\"btn btn-primary btn-sm\" data-click-action=\"" + ACTIONS.createTag + "\">Add</button>" +
         "</div>" +
         "<div id=\"tag-manager-error\" class=\"wizard-error\" style=\"display: none;\"></div>" +
         "<div id=\"tag-manager-list\" class=\"tag-manager-list\">" +
@@ -492,11 +515,11 @@ function generateTagManagementModal() {
     return generateWizardModal({
         body: generateTagManagerBody(),
         buttons: [
-            { label: "Done", onclick: "closeTagManager()", position: "right", variant: "primary" }
+            { action: ACTIONS.closeTagManager, label: "Done", position: "right", variant: "primary" }
         ],
+        closeAction: ACTIONS.closeTagManager,
         id: "tag-manager-modal",
         maxWidth: "420px",
-        onClose: "closeTagManager()",
         title: "Manage Tags"
     });
 }
@@ -514,7 +537,7 @@ function generateBrowseModal() {
         buttons: [
             { id: "browse-back", label: "Back", position: "left", role: "back", visible: false },
             { label: "Cancel", position: "right", role: "close" },
-            { id: "browse-add-btn", label: "Apply", onclick: "submitBrowseChannels()", position: "right", variant: "primary", visible: false }
+            { action: ACTIONS.submitBrowseChannels, id: "browse-add-btn", label: "Apply", position: "right", variant: "primary", visible: false }
         ],
         contentId: "browse-content",
         dataBlocks: [
@@ -543,9 +566,9 @@ function generateSetupWizardModal() {
     return generateWizardModal({
         buttons: [
             { id: "setup-back", label: "Back", position: "left", role: "back", visible: false },
-            { id: "setup-skip", label: "Skip Setup", onclick: "skipSetup()", position: "right" },
+            { action: ACTIONS.skipSetup, id: "setup-skip", label: "Skip Setup", position: "right" },
             { id: "setup-next", label: "Next", position: "right", role: "next", variant: "primary" },
-            { id: "setup-finish", label: "Finish", onclick: "finishSetup()", position: "right", variant: "primary", visible: false }
+            { action: ACTIONS.finishSetup, id: "setup-finish", label: "Finish", position: "right", variant: "primary", visible: false }
         ],
         contentId: "setup-content",
         dataAttributes: { "setup-completed": CONFIG.channels.setupCompleted ? "true" : "false" },
@@ -563,9 +586,8 @@ function generateSetupWizardModal() {
 }
 /**
  * Generates the HTML for a single channel's table rows (display row and edit form row). All channels - predefined, override, and user-defined - get both rows.
- * The edit form is pre-populated with the effective (resolved) values so users see what they're changing. When called from generateChannelsPanel() which already
- * has the listing entry, pass it via the entry parameter to avoid redundant getChannelListing() calls. POST handlers that generate a single row omit the
- * parameter to trigger an internal lookup.
+ * The edit form is pre-populated with the effective (resolved) values so users see what they're changing. Callers pass a pre-resolved listing entry via the
+ * entry parameter to avoid redundant getChannelListing() calls; the parameter is optional so an internal lookup remains available as a fallback.
  * @param key - The channel key.
  * @param profiles - List of available profiles with descriptions for the dropdown.
  * @param entry - Optional pre-resolved listing entry. When omitted, looked up from getChannelListing().
@@ -629,7 +651,7 @@ export function generateChannelRowHtml(key, profiles, entry) {
         // to remove them from the DOM.
         const currentSelection = resolveServiceKey(key);
         displayLines.push("<select class=\"provider-select\" data-channel=\"" + escapeHtml(key) +
-            "\" title=\"Choose which streaming service delivers this channel\" onchange=\"updateServiceSelection(this)\"" + contentHidden + ">");
+            "\" title=\"Choose which streaming service delivers this channel\" data-change-action=\"" + ACTIONS.updateServiceSelection + "\"" + contentHidden + ">");
         for (const variant of serviceGroup.variants) {
             const selected = (variant.key === currentSelection) ? " selected" : "";
             const optionHidden = !isServiceTagEnabled(variant.tag) ? " hidden" : "";
@@ -640,25 +662,27 @@ export function generateChannelRowHtml(key, profiles, entry) {
     }
     else {
         // Single-service: wrap the service name in a span so client-side JS can toggle it with the no-service label. Uses profile-aware label resolution so
-        // channels with explicit profile assignments show the profile's service name rather than the built-in name for the URL domain.
+        // channels with explicit profile assignments show the profile's service name rather than the builtin name for the URL domain.
         displayLines.push("<span class=\"provider-name\"" + contentHidden + ">" +
             escapeHtml(getChannelServiceLabel(channel)) + "</span>");
     }
     displayLines.push("</td>");
-    // Optional columns: Number, HDHR, Station ID, Profile, Selector. All five are always rendered; visibility is controlled by CSS classes on the table element.
+    // Optional columns: Number, HDHR, Station ID, Profile, Selector - every optional column except Tags is rendered here individually; Tags is rendered
+    // separately below because it needs dropdown/portal markup. All are always rendered here; visibility is controlled by CSS classes on the table element.
     const cellKey = escapeHtml(key);
     displayLines.push("<td class=\"col-chnum editable-cell\" data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "channelNumber")) +
         "\" data-field=\"channelNumber\" data-key=\"" + cellKey + "\" data-value=\"" + (channel.channelNumber ? escapeHtml(String(channel.channelNumber)) : "") +
-        "\" onclick=\"startInlineEdit(this)\">" + (channel.channelNumber ? escapeHtml(String(channel.channelNumber)) : "<span class=\"text-muted\">&ndash;</span>") +
-        "</td>");
+        "\" data-click-action=\"" + ACTIONS.startInlineEdit + "\">" +
+        (channel.channelNumber ? escapeHtml(String(channel.channelNumber)) : "<span class=\"text-muted\">&ndash;</span>") + "</td>");
     // HDHR column: inline checkbox for quick toggling. The checkbox submits changes via the toggleHdhr() client-side function.
     const hdhrCheckedAttr = getEffectiveHdhrEnabled(channel) ? " checked" : "";
     displayLines.push("<td class=\"col-hdhr\" data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "hdhrEnabled")) +
         "\"><input type=\"checkbox\" data-key=\"" + cellKey + "\"" + hdhrCheckedAttr +
-        " onchange=\"toggleHdhr(this)\" title=\"Include in HDHomeRun/Plex lineup\"></td>");
+        " data-change-action=\"" + ACTIONS.toggleHdhr + "\" title=\"Include in HDHomeRun/Plex lineup\"></td>");
     displayLines.push("<td class=\"col-stationid editable-cell\" data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "stationId")) +
         "\" data-field=\"stationId\" data-key=\"" + cellKey + "\" data-value=\"" + (channel.stationId ? escapeHtml(channel.stationId) : "") +
-        "\" onclick=\"startInlineEdit(this)\">" + (channel.stationId ? escapeHtml(channel.stationId) : "<span class=\"text-muted\">&ndash;</span>") + "</td>");
+        "\" data-click-action=\"" + ACTIONS.startInlineEdit + "\">" +
+        (channel.stationId ? escapeHtml(channel.stationId) : "<span class=\"text-muted\">&ndash;</span>") + "</td>");
     // Profile column: show explicit profile as-is, or the auto-resolved friendly name with "(auto)" suffix in muted style.
     const profileSortKey = escapeHtml(getChannelSortKey(channel, key, "profile"));
     if (channel.profile) {
@@ -684,8 +708,8 @@ export function generateChannelRowHtml(key, profiles, entry) {
         "<span class=\"text-muted\">&ndash;</span>";
     displayLines.push("<td class=\"col-tags editable-cell dropdown\" data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "tags")) +
         "\" data-key=\"" + cellKey + "\" data-tags=\"" + escapeHtml(effectiveTags.join(",")) +
-        "\" onclick=\"toggleInlineTagDropdown(this)\">" + tagsHtml + "</td>");
-    // Actions column with icon buttons. Five positions per row: Edit (always), Login/placeholder, Health/placeholder, context-sensitive, and Copy URL.
+        "\" data-click-action=\"" + ACTIONS.toggleInlineTagDropdown + "\">" + tagsHtml + "</td>");
+    // Actions column with icon buttons, one entry per position below: Edit (always), Login/placeholder, Health/placeholder, context-sensitive, and Copy URL.
     displayLines.push("<td>");
     displayLines.push("<div class=\"btn-group\">");
     const escapedKey = escapeHtml(key);
@@ -693,17 +717,24 @@ export function generateChannelRowHtml(key, profiles, entry) {
     const variantKey = resolveServiceKey(key);
     const authDomain = getAuthDomainForChannel(variantKey);
     // Position 1: Edit (all channels).
-    displayLines.push("<button type=\"button\" class=\"btn-icon btn-icon-edit\" title=\"Edit\" aria-label=\"Edit\" onclick=\"showEditForm('" + escapedKey +
-        "')\">" + ICON_EDIT + "</button>");
-    // Position 2: Login for enabled channels (with domain auth color), placeholder for disabled predefined. Custom channels (user-defined, not predefined) skip
-    // login coloring because they have no service concept.
+    displayLines.push("<button type=\"button\" class=\"btn-icon btn-icon-edit\" title=\"Edit\" aria-label=\"Edit\" " +
+        "data-click-action=\"" + ACTIONS.showEditForm + "\" data-channel-key=\"" + escapedKey + "\">" + ICON_EDIT + "</button>");
+    // Position 2: Login for enabled channels (with tri-state domain auth color: green verified, red needs-sign-in, neutral unknown), placeholder for disabled
+    // predefined. Custom channels (user-defined, not predefined) skip login coloring because they have no service concept.
     if (!isDisabled) {
-        const authTimestamp = (isPredefined || isOverride) ? getDomainAuth(authDomain) : null;
-        const loginColorClass = authTimestamp ? " health-success" : "";
-        const loginTitle = authTimestamp ? "Verified " + formatTimeAgo(authTimestamp) : "Not yet verified";
+        const authState = (isPredefined || isOverride) ? getDomainAuthState(authDomain) : null;
+        const needsLogin = authState?.status === "needsLogin";
+        const loginColorClass = (authState?.status === "verified") ? " health-success" : needsLogin ? " health-failed" : "";
+        // Lead the title with the action so users discover that the icon is interactive...the trailing fact reports the service-scoped auth state, since the
+        // auth domain is shared across every channel of the same service. The needs-sign-in title drops "or test" - signing in IS the remedy being asked for.
+        const serviceLabel = getChannelServiceLabel(channel);
+        const loginTitle = needsLogin ?
+            "Click to open this channel in PrismCast's Chrome to sign in. " + serviceLabel + " needs sign-in (detected " + formatTimeAgo(authState.timestamp) + ")." :
+            "Click to open this channel in PrismCast's Chrome to sign in or test. " + serviceLabel +
+                (authState ? " verified " + formatTimeAgo(authState.timestamp) : " not yet verified") + ".";
         displayLines.push("<button type=\"button\" class=\"btn-icon btn-icon-login" + loginColorClass + "\" data-auth-domain=\"" +
-            escapeHtml(authDomain) + "\" title=\"" + loginTitle + "\" aria-label=\"Login\" " +
-            "onclick=\"startChannelLogin('" + escapedKey + "')\">" + ICON_LOGIN + "</button>");
+            escapeHtml(authDomain) + "\" title=\"" + escapeHtml(loginTitle) + "\" aria-label=\"Login\" " +
+            "data-click-action=\"" + ACTIONS.startChannelLogin + "\" data-channel-key=\"" + escapedKey + "\">" + ICON_LOGIN + "</button>");
     }
     else {
         displayLines.push("<span class=\"btn-icon-placeholder\"></span>");
@@ -713,7 +744,8 @@ export function generateChannelRowHtml(key, profiles, entry) {
         const channelHealthResult = getChannelHealth(key, authDomain);
         const healthColorClass = (channelHealthResult?.status === "success") ? " health-success" : (channelHealthResult?.status === "failed") ? " health-failed" : "";
         const healthTitle = channelHealthResult ?
-            (channelHealthResult.status === "success" ? "Succeeded " : "Failed ") + formatTimeAgo(channelHealthResult.timestamp) : "Not yet tuned";
+            "Last tune " + (channelHealthResult.status === "success" ? "succeeded " : "failed ") + formatTimeAgo(channelHealthResult.timestamp) + "." :
+            "Not yet tuned.";
         displayLines.push("<span class=\"btn-icon btn-icon-health" + healthColorClass + "\" title=\"" + healthTitle +
             "\" aria-label=\"Channel health\">" + ICON_HEALTH + "</span>");
     }
@@ -724,25 +756,27 @@ export function generateChannelRowHtml(key, profiles, entry) {
     // property overrides are independent concerns - a predefined channel can be disabled AND have customizations, and the toggle always reflects the visibility state.
     if (isPredefined) {
         if (isDisabled) {
-            displayLines.push("<button type=\"button\" class=\"btn-icon btn-icon-enable\" title=\"Enable\" aria-label=\"Enable\" onclick=\"togglePredefinedChannel('" +
-                escapedKey + "', true)\">" + ICON_ENABLE + "</button>");
+            displayLines.push("<button type=\"button\" class=\"btn-icon btn-icon-enable\" title=\"Enable\" aria-label=\"Enable\" " +
+                "data-click-action=\"" + ACTIONS.togglePredefinedChannel + "\" data-channel-key=\"" + escapedKey + "\" data-enabled=\"true\">" + ICON_ENABLE + "</button>");
         }
         else {
-            displayLines.push("<button type=\"button\" class=\"btn-icon btn-icon-disable\" title=\"Disable\" aria-label=\"Disable\" onclick=\"togglePredefinedChannel('" +
-                escapedKey + "', false)\">" + ICON_DISABLE + "</button>");
+            displayLines.push("<button type=\"button\" class=\"btn-icon btn-icon-disable\" title=\"Disable\" aria-label=\"Disable\" " +
+                "data-click-action=\"" + ACTIONS.togglePredefinedChannel + "\" data-channel-key=\"" + escapedKey + "\" data-enabled=\"false\">" + ICON_DISABLE + "</button>");
         }
     }
     else if (isUser) {
-        displayLines.push("<button type=\"button\" class=\"btn-icon btn-icon-delete\" title=\"Delete\" aria-label=\"Delete\" onclick=\"deleteChannel('" +
-            escapedKey + "')\">" + ICON_DELETE + "</button>");
+        displayLines.push("<button type=\"button\" class=\"btn-icon btn-icon-delete\" title=\"Delete\" aria-label=\"Delete\" " +
+            "data-click-action=\"" + ACTIONS.deleteChannel + "\" data-channel-key=\"" + escapedKey + "\">" + ICON_DELETE + "</button>");
     }
     // Position 5: Copy URL dropdown (all channels).
     displayLines.push("<div class=\"dropdown copy-dropdown\">");
     displayLines.push("<button type=\"button\" class=\"btn-icon btn-icon-copy\" title=\"Copy stream URL\" aria-label=\"Copy stream URL\" " +
-        "onclick=\"toggleDropdown(this)\">" + ICON_COPY + "</button>");
+        "data-click-action=\"" + ACTIONS.toggleDropdown + "\">" + ICON_COPY + "</button>");
     displayLines.push("<div class=\"dropdown-menu copy-url-menu\">");
-    displayLines.push("<div class=\"dropdown-item\" onclick=\"copyStreamUrl('hls', '" + escapedKey + "')\">Copy HLS URL</div>");
-    displayLines.push("<div class=\"dropdown-item\" onclick=\"copyStreamUrl('mpegts', '" + escapedKey + "')\">Copy MPEG-TS URL</div>");
+    displayLines.push("<div class=\"dropdown-item\" data-click-action=\"" + ACTIONS.copyStreamUrl + "\" data-protocol=\"hls\" data-channel-key=\"" +
+        escapedKey + "\">Copy HLS URL</div>");
+    displayLines.push("<div class=\"dropdown-item\" data-click-action=\"" + ACTIONS.copyStreamUrl + "\" data-protocol=\"mpegts\" data-channel-key=\"" +
+        escapedKey + "\">Copy MPEG-TS URL</div>");
     displayLines.push("</div>");
     displayLines.push("</div>");
     displayLines.push("</div>");
@@ -756,7 +790,7 @@ export function generateChannelRowHtml(key, profiles, entry) {
     editLines.push("<td colspan=\"" + String(TOTAL_COLUMN_COUNT) + "\">");
     editLines.push("<div class=\"channel-form\" style=\"margin: 0;\">");
     editLines.push("<h3>Edit Channel: " + escapedKey + "</h3>");
-    editLines.push("<form id=\"edit-channel-form-" + escapedKey + "\" onsubmit=\"return submitChannelForm(event, 'edit')\">");
+    editLines.push("<form id=\"edit-channel-form-" + escapedKey + "\" data-submit-action=\"" + ACTIONS.submitChannelFormEdit + "\" data-submit-prevent-default>");
     editLines.push("<input type=\"hidden\" name=\"action\" value=\"edit\">");
     editLines.push("<input type=\"hidden\" name=\"key\" value=\"" + escapedKey + "\">");
     // For override channels, fetch the customization provenance once. The accessor returns which fields the user has explicitly customized (across canonical and
@@ -816,12 +850,14 @@ export function generateChannelRowHtml(key, profiles, entry) {
         defaults: isOverride ? {
             channelNumber: resetValueFor("channelNumber"),
             channelSelector: resetValueFor("channelSelector"),
+            forceCapture: resetValueFor("forceCapture"),
             guideTitle: resetValueFor("guideTitle"),
             hdhrEnabled: resetValueFor("hdhrEnabled"),
             logoUrl: resetValueFor("logoUrl"),
             stationId: resetValueFor("stationId"),
             tags: resetValueFor("tags")
         } : undefined,
+        forceCapture: channel.forceCapture === true,
         guideTitleValue: channel.guideTitle ?? "",
         hdhrEnabled: getEffectiveHdhrEnabled(channel),
         logoUrlValue: channel.logoUrl ?? "",
@@ -831,10 +867,11 @@ export function generateChannelRowHtml(key, profiles, entry) {
     // Form buttons.
     editLines.push("<div class=\"form-buttons\">");
     editLines.push("<button type=\"submit\" class=\"btn btn-primary\">Save Changes</button>");
-    editLines.push("<button type=\"button\" class=\"btn btn-secondary\" onclick=\"hideEditForm('" + escapedKey + "')\">Cancel</button>");
+    editLines.push("<button type=\"button\" class=\"btn btn-secondary\" data-click-action=\"" + ACTIONS.hideEditForm +
+        "\" data-channel-key=\"" + escapedKey + "\">Cancel</button>");
     if (isOverride) {
-        editLines.push("<button type=\"button\" class=\"btn btn-secondary btn-revert\" onclick=\"revertChannel('" + escapedKey +
-            "')\">Revert to Defaults</button>");
+        editLines.push("<button type=\"button\" class=\"btn btn-secondary btn-revert\" data-click-action=\"" + ACTIONS.revertChannel + "\" data-channel-key=\"" + escapedKey +
+            "\">Revert to Defaults</button>");
     }
     editLines.push("</div>");
     editLines.push("</form>");
@@ -895,7 +932,8 @@ function getHdhrCounts(listing) {
 }
 /**
  * Computes per-tag channel counts for the Quick Actions tag bulk toggles. For each tag in the active vocabulary, counts how many enabled, service-available
- * channels have that tag in their effective tags. Returns undefined when the tags column is not visible (no tag toggles to update).
+ * channels have that tag in their effective tags. Returns undefined when the tags column is hidden or the active tag vocabulary is empty (no tag toggles to
+ * update).
  * @param listing - The channel listing entries.
  * @returns A record mapping tag names to { count, total }, or undefined when hidden.
  */
@@ -974,7 +1012,7 @@ export function generateServiceFilterToolbar() {
     lines.push("<div class=\"dropdown provider-dropdown\">");
     const buttonText = hasFilter ? "Filtered" : "All Services";
     lines.push("<button type=\"button\" class=\"btn btn-sm toolbar-icon-btn\" id=\"provider-filter-btn\" " +
-        "title=\"Filter channels by streaming service\" onclick=\"toggleDropdown(this)\">" + ICON_FILTER + " " + buttonText + " &#9662;</button>");
+        "title=\"Filter channels by streaming service\" data-click-action=\"" + ACTIONS.toggleDropdown + "\">" + ICON_FILTER + " " + buttonText + " &#9662;</button>");
     lines.push("<div class=\"dropdown-menu provider-dropdown-menu\">");
     for (const tagInfo of allTags) {
         const isDirectTag = tagInfo.tag === "direct";
@@ -983,7 +1021,7 @@ export function generateServiceFilterToolbar() {
         const disabledAttr = isDirectTag ? " disabled" : "";
         lines.push("<label class=\"provider-option\">");
         lines.push("<input type=\"checkbox\" data-tag=\"" + escapeHtml(tagInfo.tag) + "\"" + checkedAttr + disabledAttr +
-            " onchange=\"toggleServiceTag(this)\"> " + serviceDisplaySpan(tagInfo.displayName, tagInfo.domain, tagInfo.iconUrl));
+            " data-change-action=\"" + ACTIONS.toggleServiceTag + "\"> " + serviceDisplaySpan(tagInfo.displayName, tagInfo.domain, tagInfo.iconUrl));
         lines.push("</label>");
     }
     lines.push("</div>");
@@ -1000,7 +1038,7 @@ export function generateServiceFilterToolbar() {
             lines.push("<span class=\"provider-chip\" data-tag=\"" + escapeHtml(tag) + "\">" +
                 serviceDisplaySpan(displayName, chipTag?.domain, chipTag?.iconUrl, true) +
                 "<button type=\"button\" class=\"chip-close\" title=\"Remove " + escapeHtml(displayName) + " from filter\" aria-label=\"Remove " +
-                escapeHtml(displayName) + "\" onclick=\"removeServiceChip('" + escapeHtml(tag) + "')\">&times;</button></span>");
+                escapeHtml(displayName) + "\" data-click-action=\"" + ACTIONS.removeServiceChip + "\" data-tag-name=\"" + escapeHtml(tag) + "\">&times;</button></span>");
         }
     }
     lines.push("</div>");
@@ -1031,7 +1069,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     lines.push("<p>Define and manage streaming channels for the playlist. Customized channels are highlighted.</p>");
     lines.push("<p class=\"description-hint\">Tip: Use the <strong>service filter</strong> above to show only channels from services you subscribe to &mdash; ", "this also controls which channels Channels DVR sees in the playlist. Use the <strong>service dropdown</strong> on any multi-service channel to choose ", "which streaming service delivers it (e.g., Comedy Central via Hulu vs Sling). Click the <strong>edit icon</strong> to customize any channel's name, ", "Gracenote station ID, URL, or other properties.</p>");
     lines.push("</div>");
-    // Toolbar with three dropdown menus: Manage Channels (primary actions), Import/Export (data I/O), and Quick Actions (bulk operations). Each dropdown has an
+    // Toolbar dropdown menus: Manage Channels (primary actions), Import/Export (data I/O), and Quick Actions (bulk operations). Each dropdown has an
     // inline SVG icon + label + chevron for visual discoverability. Grouped menus reduce visual clutter and separate channel management from data I/O and bulk
     // operations.
     lines.push("<div class=\"channel-toolbar\">");
@@ -1039,7 +1077,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     // Manage Channels dropdown - primary channel creation and setup actions.
     lines.push("<div class=\"dropdown\">");
     lines.push("<button type=\"button\" class=\"btn btn-primary btn-sm toolbar-icon-btn\" title=\"Add, browse, or set up channels\" " +
-        "onclick=\"toggleDropdown(this)\">" + ICON_MANAGE + " Manage Channels &#9662;</button>");
+        "data-click-action=\"" + ACTIONS.toggleDropdown + "\">" + ICON_MANAGE + " Manage Channels &#9662;</button>");
     lines.push("<div class=\"dropdown-menu\">");
     // Dropdown item icons: tinted variants of the shared icons for visual differentiation in menu items. Each uses a distinct color so items are scannable at
     // a glance. These are local to this function because the tint colors are context-specific to this dropdown.
@@ -1054,47 +1092,47 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     const TINTED_TAG = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#9b59b6\" stroke-width=\"1.5\" " +
         "stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1.5 8.7V2.5a1 1 0 011-1h6.2a1 1 0 01.7.3l5.1 5.1a1 1 0 010 1.4l-5.5 5.5a1 " +
         "1 0 01-1.4 0L1.8 9.4a1 1 0 01-.3-.7z\"/><circle cx=\"5\" cy=\"5\" r=\"1\"/></svg>";
-    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"dropdowns.close(); " +
-        "document.getElementById('add-channel-form').style.display='block';\">" + TINTED_ADD + " Add Channel</div>");
-    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"dropdowns.close(); openBrowseModal()\">" + TINTED_BROWSE +
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" data-click-action=\"" + ACTIONS.showAddChannelForm + "\" data-click-close-dropdown>" + TINTED_ADD +
+        " Add Channel</div>");
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" data-click-action=\"" + ACTIONS.openBrowseModal + "\" data-click-close-dropdown>" + TINTED_BROWSE +
         " Browse Service Channels</div>");
-    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"dropdowns.close(); openTagManager()\">" + TINTED_TAG +
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" data-click-action=\"" + ACTIONS.openTagManager + "\" data-click-close-dropdown>" + TINTED_TAG +
         " Manage Tags</div>");
-    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"dropdowns.close(); openSetupWizard()\">" + TINTED_SETUP +
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" data-click-action=\"" + ACTIONS.openSetupWizard + "\" data-click-close-dropdown>" + TINTED_SETUP +
         " Service Setup</div>");
     lines.push("</div>");
     lines.push("</div>");
     // Import / Export dropdown - data I/O operations.
     lines.push("<div class=\"dropdown\">");
     lines.push("<button type=\"button\" class=\"btn btn-secondary btn-sm toolbar-icon-btn\" title=\"Import or export channel data\" " +
-        "onclick=\"toggleDropdown(this)\">" + ICON_TRANSFER + " Import / Export &#9662;</button>");
+        "data-click-action=\"" + ACTIONS.toggleDropdown + "\">" + ICON_TRANSFER + " Import / Export &#9662;</button>");
     lines.push("<div class=\"dropdown-menu\">");
     const TINTED_IMPORT = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#5b8def\" stroke-width=\"1.5\" " +
         "stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 2v8M5 7l3 3 3-3\"/><path d=\"M2 11v2a1 1 0 001 1h10a1 1 0 001-1v-2\"/></svg>";
     const TINTED_EXPORT = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#22a563\" stroke-width=\"1.5\" " +
         "stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 10V2M5 5l3-3 3 3\"/><path d=\"M2 11v2a1 1 0 001 1h10a1 1 0 001-1v-2\"/></svg>";
-    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"dropdowns.close(); document.getElementById('import-channels-file').click()\">" +
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" data-click-action=\"" + ACTIONS.triggerChannelsImport + "\" data-click-close-dropdown>" +
         TINTED_IMPORT + " Import Channels (JSON)</div>");
-    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"dropdowns.close(); document.getElementById('import-m3u-file').click()\">" +
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" data-click-action=\"" + ACTIONS.triggerM3uImport + "\" data-click-close-dropdown>" +
         TINTED_IMPORT + " Import M3U Playlist</div>");
     lines.push("<label class=\"dropdown-option\"><input type=\"checkbox\" id=\"m3u-replace-duplicates\"> Replace duplicates on M3U import</label>");
     lines.push("<div class=\"dropdown-divider\"></div>");
-    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"dropdowns.close(); exportChannels()\">" +
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" data-click-action=\"" + ACTIONS.exportChannels + "\" data-click-close-dropdown>" +
         TINTED_EXPORT + " Export Channels (JSON)</div>");
     lines.push("</div>");
     lines.push("</div>");
-    lines.push("<input type=\"file\" id=\"import-m3u-file\" accept=\".m3u,.m3u8\" style=\"display: none;\" onchange=\"importM3U(this)\">");
+    lines.push("<input type=\"file\" id=\"import-m3u-file\" accept=\".m3u,.m3u8\" style=\"display: none;\" data-change-action=\"" + ACTIONS.importM3u + "\">");
     // Visible column set, used by Quick Actions to gate column-dependent options and by the table header to set initial hide classes.
     const visibleCols = new Set(CONFIG.channels.visibleColumns);
     // Quick Actions dropdown - bulk operations for predefined channels.
     lines.push("<div class=\"dropdown quick-actions-dropdown\">");
     lines.push("<button type=\"button\" class=\"btn btn-secondary btn-sm toolbar-icon-btn\" title=\"Bulk operations for predefined channels\" " +
-        "onclick=\"toggleDropdown(this)\">" + ICON_BOLT + " Quick Actions &#9662;</button>");
+        "data-click-action=\"" + ACTIONS.toggleDropdown + "\">" + ICON_BOLT + " Quick Actions &#9662;</button>");
     lines.push("<div class=\"dropdown-menu\">");
     // Compute initial toggle counts for predefined channel scopes. The server is the single source of truth - the client renders what we return here.
     const scopeCounts = getPredefinedScopeCounts();
-    // Three toggle rows: checkbox + label + count. Clicking toggles the group via bulkTogglePredefined(). The onclick uses event.preventDefault() to stop the
-    // native checkbox toggle - the server response drives the update.
+    // One toggle row per predefined scope: checkbox + label + count. Clicking toggles the group via bulkTogglePredefined(). The data-click-prevent-default
+    // attribute stops the native checkbox toggle - the server response drives the update.
     const scopes = [
         { count: scopeCounts.all.enabled, label: "All Predefined", scope: "all", total: scopeCounts.all.total },
         { count: scopeCounts.east.enabled, label: "East Variants", scope: "east", total: scopeCounts.east.total },
@@ -1102,8 +1140,8 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     ];
     for (const s of scopes) {
         const checked = (s.count === s.total) ? " checked" : "";
-        lines.push("<label class=\"provider-option\" onclick=\"event.preventDefault(); bulkTogglePredefined(!this.querySelector('input').checked, '" + s.scope +
-            "')\">" + "<input type=\"checkbox\" class=\"scope-toggle\" data-scope=\"" + s.scope + "\"" + checked + "> " +
+        lines.push("<label class=\"provider-option\" data-click-action=\"" + ACTIONS.bulkTogglePredefined + "\" data-scope=\"" + s.scope + "\" data-click-prevent-default>" +
+            "<input type=\"checkbox\" class=\"scope-toggle\" data-scope=\"" + s.scope + "\"" + checked + "> " +
             s.label + "<span class=\"quick-action-count\" data-scope=\"" + s.scope + "\" data-enabled=\"" + String(s.count) + "\" data-total=\"" + String(s.total) +
             "\">" + String(s.count) + " of " + String(s.total) + " enabled</span></label>");
     }
@@ -1115,7 +1153,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     lines.push("<div class=\"bulk-assign-row\">");
     lines.push("<span>Set all channels to:</span>");
     lines.push("<select id=\"bulk-assign-select\" class=\"bulk-assign-select\" title=\"Switch all multi-service channels to this service\" " +
-        "onchange=\"if(this.value) { dropdowns.close(); bulkAssignService(this.value); this.value = ''; }\">");
+        "data-change-action=\"" + ACTIONS.bulkAssignService + "\">");
     lines.push("<option value=\"\">Select service</option>");
     for (const tagInfo of allTags) {
         const hidden = (hasFilter && !enabled.includes(tagInfo.tag) && (tagInfo.tag !== "direct")) ? " hidden" : "";
@@ -1133,8 +1171,9 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     lines.push("<div class=\"bulk-assign-row\">");
     lines.push("<span>Auto-number from:</span>");
     lines.push("<input type=\"number\" id=\"auto-number-start\" class=\"auto-number-input\" value=\"1\" min=\"0\" max=\"99999\" " +
-        "placeholder=\"Clear\" onclick=\"event.stopPropagation()\">");
-    lines.push("<button type=\"button\" class=\"btn btn-sm btn-secondary\" onclick=\"dropdowns.close(); autoNumberChannels()\">Apply</button>");
+        "placeholder=\"Clear\" data-click-stop-propagation>");
+    lines.push("<button type=\"button\" class=\"btn btn-sm btn-secondary\" data-click-action=\"" + ACTIONS.autoNumberChannels +
+        "\" data-click-close-dropdown>Apply</button>");
     lines.push("</div>");
     lines.push("</div>");
     // HDHR bulk toggle - tri-state checkbox to enable/disable all channels for the HDHomeRun lineup. Visible when the HDHR column is shown.
@@ -1143,7 +1182,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     const hdhrCheckedAttr = (hdhrCounts.enabled === hdhrCounts.total) ? " checked" : "";
     const hdhrIndeterminate = ((hdhrCounts.enabled > 0) && (hdhrCounts.enabled < hdhrCounts.total)) ? " data-indeterminate=\"true\"" : "";
     lines.push("<div id=\"quick-action-hdhr\"" + hdhrVisible + ">");
-    lines.push("<label class=\"provider-option\" onclick=\"event.preventDefault(); bulkToggleHdhr()\">");
+    lines.push("<label class=\"provider-option\" data-click-action=\"" + ACTIONS.bulkToggleHdhr + "\" data-click-prevent-default>");
     lines.push("<input type=\"checkbox\" id=\"hdhr-bulk-toggle\"" + hdhrCheckedAttr + hdhrIndeterminate + "> ");
     lines.push("Include all in HDHR/Plex");
     lines.push("<span class=\"quick-action-count\" id=\"hdhr-bulk-count\">" + String(hdhrCounts.enabled) + " of " + String(hdhrCounts.total) + "</span>");
@@ -1177,8 +1216,8 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
             const count = tagCountMap.get(tag) ?? 0;
             const checkedAttr = (count === totalEnabled) ? " checked" : "";
             const indeterminate = ((count > 0) && (count < totalEnabled)) ? " data-indeterminate=\"true\"" : "";
-            lines.push("<label class=\"provider-option\" onclick=\"event.preventDefault(); bulkToggleTag('" + escapeHtml(tag) +
-                "', !this.querySelector('input').checked)\">" +
+            lines.push("<label class=\"provider-option\" data-click-action=\"" + ACTIONS.bulkToggleTag +
+                "\" data-tag-name=\"" + escapeHtml(tag) + "\" data-click-prevent-default>" +
                 "<input type=\"checkbox\" class=\"tag-bulk-toggle\" data-tag=\"" + escapeHtml(tag) + "\"" + checkedAttr + indeterminate + "> " +
                 escapeHtml(tag) +
                 "<span class=\"quick-action-count\" data-tag-count=\"" + escapeHtml(tag) + "\">" +
@@ -1232,7 +1271,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     const addFormVisible = (showAddForm === true) || (formErrors && formErrors.has("key") && !editingChannelKey);
     lines.push("<div id=\"add-channel-form\" class=\"channel-form\" style=\"display: " + (addFormVisible ? "block" : "none") + ";\">");
     lines.push("<h3>Add New Channel</h3>");
-    lines.push("<form id=\"add-channel-form-el\" onsubmit=\"return submitChannelForm(event, 'add')\">");
+    lines.push("<form id=\"add-channel-form-el\" data-submit-action=\"" + ACTIONS.submitChannelFormAdd + "\" data-submit-prevent-default>");
     lines.push("<input type=\"hidden\" name=\"action\" value=\"add\">");
     // Service pills. Clicking a service auto-fills the URL field, which triggers the existing URL-change infrastructure (datalist population, profile
     // resolution). The pills use serviceDisplaySpan for icon rendering via the shared processServiceDisplays path. Guide-grid services fill with their
@@ -1247,7 +1286,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
         }
         const pillUrl = addFormGuideUrls[tagInfo.tag] ?? (tagInfo.domain ? "https://" + tagInfo.domain + "/" : "");
         lines.push("<button type=\"button\" class=\"provider-pill\" data-slug=\"" + escapeHtml(tagInfo.tag) + "\" data-url=\"" + escapeHtml(pillUrl) +
-            "\" onclick=\"selectServicePill(this)\">" + serviceDisplaySpan(tagInfo.displayName, tagInfo.domain, tagInfo.iconUrl) + "</button>");
+            "\" data-click-action=\"" + ACTIONS.selectServicePill + "\">" + serviceDisplaySpan(tagInfo.displayName, tagInfo.domain, tagInfo.iconUrl) + "</button>");
     }
     lines.push("</div>");
     lines.push("</div>");
@@ -1277,17 +1316,19 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     lines.push("<div id=\"add-predefined-hint\" class=\"hint predefined-hint\" style=\"display: none;\"></div>");
     // Profile dropdown.
     lines.push(...generateProfileDropdown("add-profile", formValues?.get("profile") ?? "", profiles));
-    // Advanced fields (station ID, guide title, logo URL, channel selector, channel number, tags, HDHR).
+    // Advanced fields (station ID, guide title, logo URL, channel selector, channel number, tags, HDHR, force capture). The force-capture read mirrors
+    // parseFormBody's exact-"true" test, so a re-render after a validation error preserves whatever the user had checked.
     lines.push(...generateAdvancedFields("add", {
         channelNumberValue: formValues?.get("channelNumber") ?? "",
         channelSelectorValue: formValues?.get("channelSelector") ?? "",
+        forceCapture: formValues?.get("forceCapture") === "true",
         hdhrEnabled: formValues?.get("hdhrEnabled") !== "false",
         stationIdValue: formValues?.get("stationId") ?? ""
     }));
     // Form buttons.
     lines.push("<div class=\"form-buttons\">");
     lines.push("<button type=\"submit\" class=\"btn btn-primary\">Add Channel</button>");
-    lines.push("<button type=\"button\" class=\"btn btn-secondary\" onclick=\"document.getElementById('add-channel-form').style.display='none';\">Cancel</button>");
+    lines.push("<button type=\"button\" class=\"btn btn-secondary\" data-click-action=\"" + ACTIONS.hideAddChannelForm + "\">Cancel</button>");
     lines.push("</div>");
     lines.push("</form>");
     // Close the add-channel-form wrapper opened at the top of this builder.
@@ -1326,14 +1367,14 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
         { cssClass: "col-provider", field: "provider", label: "Service" },
         ...OPTIONAL_COLUMNS
     ];
-    // All sortable headers use the same DOM structure: <th onclick> wraps a <span class="sort-label"> for the label text. The sort update logic targets
-    // .sort-label to modify only the label - never touching other children like the Tags filter dropdown. Clicking anywhere on the <th> triggers sort;
+    // All sortable headers use the same DOM structure: <th data-click-action> wraps a <span class="sort-label"> for the label text. The sort update logic
+    // targets .sort-label to modify only the label - never touching other children like the Tags filter dropdown. Clicking anywhere on the <th> triggers sort;
     // additional children (like the filter button) use event.stopPropagation() to prevent sort when interacting with them.
     for (const hdr of sortableHeaders) {
         const isActive = (sortField === hdr.field);
         const activeIndicator = isActive ? ((sortDir === "asc") ? " &#9650;" : " &#9660;") : "";
         lines.push("<th class=\"" + hdr.cssClass + " sortable\" data-sort-field=\"" + hdr.field +
-            "\" onclick=\"channelTable.sort('" + hdr.field + "')\">");
+            "\" data-click-action=\"" + ACTIONS.channelTableSort + "\" data-field=\"" + hdr.field + "\">");
         lines.push("<span class=\"sort-label\">" + hdr.label + activeIndicator + "</span>");
         // Tags header: additional filter dropdown alongside the sort label. The dropdown is a client-side-only view filter (transient, not persisted) that
         // shows/hides rows based on their data-channel-tags attribute. The dropdown content comes from generateTagFilterContent() - the single source of truth
@@ -1341,7 +1382,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
         if (hdr.field === "tags") {
             lines.push("<div class=\"dropdown tag-filter-dropdown\" style=\"display: inline;\">");
             lines.push("<button type=\"button\" class=\"btn-icon btn-tag-filter\" title=\"Filter by tag\" " +
-                "onclick=\"event.stopPropagation(); toggleDropdown(this)\">" + ICON_FILTER + "</button>");
+                "data-click-action=\"" + ACTIONS.toggleDropdown + "\" data-click-stop-propagation>" + ICON_FILTER + "</button>");
             lines.push("<div class=\"dropdown-menu\" id=\"tag-filter-menu\">" + generateTagFilterContent() + "</div>");
             lines.push("</div>");
             // Playlist hint icon. Hidden by default, shown by applyTagColumnFilter() when the filter is active. Clicking opens a popover with the playlist URL
@@ -1349,7 +1390,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
             lines.push("<div class=\"dropdown\" style=\"display: inline;\">");
             lines.push("<button type=\"button\" class=\"btn-icon btn-playlist-hint\" id=\"playlist-hint-btn\" " +
                 "title=\"Playlist URL for this filter\" style=\"display: none;\" " +
-                "onclick=\"event.stopPropagation(); showPlaylistHint(this)\">" + ICON_LINK + "</button>");
+                "data-click-action=\"" + ACTIONS.showPlaylistHint + "\" data-click-stop-propagation>" + ICON_LINK + "</button>");
             lines.push("<div class=\"dropdown-menu playlist-hint-menu\"></div>");
             lines.push("</div>");
         }
@@ -1359,15 +1400,15 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     lines.push("<th class=\"col-actions\"><span>Actions</span>");
     lines.push("<div class=\"dropdown column-picker\">");
     lines.push("<button type=\"button\" class=\"btn-icon btn-col-picker\" title=\"Table options\" aria-label=\"Table options\" " +
-        "onclick=\"toggleDropdown(this)\">&#8942;</button>");
+        "data-click-action=\"" + ACTIONS.toggleDropdown + "\">&#8942;</button>");
     lines.push("<div class=\"dropdown-menu column-picker-menu\">");
-    lines.push("<label class=\"provider-option\"><input type=\"checkbox\" id=\"show-disabled-toggle\" onchange=\"toggleDisabledVisibility()\"> " +
+    lines.push("<label class=\"provider-option\"><input type=\"checkbox\" id=\"show-disabled-toggle\" data-change-action=\"" + ACTIONS.toggleDisabledVisibility + "\"> " +
         "Show disabled channels</label>");
     lines.push("<div class=\"dropdown-divider\"></div>");
     for (const col of OPTIONAL_COLUMNS) {
         const checked = visibleCols.has(col.field) ? " checked" : "";
         lines.push("<label class=\"provider-option\"><input type=\"checkbox\" data-col-class=\"" + col.cssClass + "\" data-col-field=\"" + col.field +
-            "\" onchange=\"toggleColumn(this)\"" + checked + "> " + col.label + "</label>");
+            "\" data-change-action=\"" + ACTIONS.toggleColumn + "\"" + checked + "> " + col.label + "</label>");
     }
     lines.push("</div>");
     lines.push("</div>");
@@ -1403,7 +1444,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     const vocabulary = getActiveTagVocabulary();
     lines.push("<div id=\"inline-tag-portal\" class=\"dropdown-menu inline-tag-menu\">");
     for (const tag of vocabulary) {
-        lines.push("<label class=\"provider-option\" onclick=\"event.stopPropagation()\">" +
+        lines.push("<label class=\"provider-option\" data-click-stop-propagation>" +
             "<input type=\"checkbox\" class=\"inline-tag-checkbox\" data-tag=\"" + escapeHtml(tag) + "\"> " + escapeHtml(tag) + "</label>");
     }
     lines.push("</div>");