prismcast 1.9.0 → 1.10.0

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

@@ -1,11 +1,7 @@
-/* Copyright(C) 2024-2026, HJD (https://github.com/hjdhjd). All rights reserved.
- *
- * table.ts: Channel table rendering for the PrismCast configuration interface.
- */
 import { ICON_BOLT, ICON_COPY, ICON_DELETE, ICON_DISABLE, ICON_EDIT, ICON_ENABLE, ICON_FILTER, ICON_HEALTH, ICON_LINK, ICON_LOGIN, ICON_MANAGE, ICON_REVERT, ICON_TRANSFER } from "../../icons.js";
 import { compareChannelSort, getAllServiceTags, getAuthDomainForChannel, getChannelServiceLabel, getChannelServiceTags, getChannelSortKey, getEnabledServices, getPredefinedDomainMap, getServiceGroup, hasMultipleServices, isChannelAvailableByService, isServiceTagEnabled, resolvePredefinedVariant, resolveServiceKey } from "../../../config/services.js";
 import { escapeHtml, formatTimeAgo } from "../../../utils/index.js";
-import { getActiveTagVocabulary, getChannelEffectiveTags, getChannelListing, getChannelLogo, getChannelsParseErrorMessage, getPredefinedScopeCounts, getTagRegistry, getUserChannelsFilePath, hasChannelsParseError, isPredefinedChannel, isPredefinedChannelDisabled, isUserChannel, tagsMatch } from "../../../config/userChannels.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 { getProfileForChannel, getProfiles } from "../../../config/profiles.js";
@@ -15,7 +11,7 @@ import { categorizeProfiles } from "../index.js";
 import { generateWizardModal } from "../../components.js";
 /**
  * Generates an annotated service display span. The client-side page-load script processes these elements via serviceIconHtml, rendering the appropriate
- * icon + text combination. The server just emits the text with data attributes — all icon rendering is client-side through the single serviceIconHtml path.
+ * icon + text combination. The server just emits the text with data attributes - all icon rendering is client-side through the single serviceIconHtml path.
  * @param name - The service display name.
  * @param domain - The service's domain for icon fallback derivation. Undefined for services without a known domain.
  * @param iconUrl - Optional explicit icon URL to try before domain-derived fallbacks.
@@ -58,8 +54,9 @@ function generateTextField(id, name, label, value, options = {}) {
     const required = options.required ? " required" : "";
     const pattern = options.pattern ? " pattern=\"" + options.pattern + "\"" : "";
     const placeholder = options.placeholder ? " placeholder=\"" + escapeHtml(options.placeholder) + "\"" : "";
-    // Modification tracking: compare against the predefined default and render the settings form's "modified" visual treatment when they differ.
-    const isModified = (options.defaultValue !== undefined) && (options.defaultValue !== value);
+    // Modification tracking is driven by storage provenance (isCustomized), not value comparison. A field is customized iff the user has explicitly set it on
+    // the canonical or active variant stored entry - that is the single source of truth, supplied by getChannelCustomizations in the storage layer.
+    const isModified = options.isCustomized === true;
     const modifiedClass = isModified ? " modified" : "";
     const modifiedDot = isModified ? "<span class=\"modified-dot\" title=\"Modified from predefined default\"></span>" : "";
     const defaultAttr = (options.defaultValue !== undefined) ? " data-default=\"" + escapeHtml(options.defaultValue) + "\"" : "";
@@ -86,14 +83,16 @@ function generateTextField(id, name, label, value, options = {}) {
  * @param selectedProfile - The currently selected profile (empty string for autodetect).
  * @param profiles - List of available profiles with descriptions and summaries.
  * @param showHint - Whether to show the hint text with profile reference link.
+ * @param defaultProfile - When provided, used as the data-default attribute for the per-field reset button. Should be supplied alongside isCustomized=true.
+ * @param isCustomized - True when the user has explicitly customized the profile field (presence in stored deltas). Drives the modified visual treatment and
+ *   the per-field reset button. Independent of value comparison - storage provenance is the single source of truth.
  * @returns Array of HTML strings for the form row.
  */
-function generateProfileDropdown(id, selectedProfile, profiles, showHint = true, defaultProfile) {
+function generateProfileDropdown(id, selectedProfile, profiles, showHint = true, defaultProfile, isCustomized) {
     const lines = [];
     const groups = categorizeProfiles(profiles);
-    // Modification tracking for the profile dropdown. Same visual treatment as text fields — border accent, dot, and reset button when the current selection
-    // differs from the predefined default.
-    const isModified = (defaultProfile !== undefined) && (defaultProfile !== selectedProfile);
+    // Modification tracking is driven by storage provenance (isCustomized), not value comparison. Symmetric with generateTextField.
+    const isModified = isCustomized === true;
     const modifiedClass = isModified ? " modified" : "";
     const modifiedDot = isModified ? "<span class=\"modified-dot\" title=\"Modified from predefined default\"></span>" : "";
     const defaultAttr = (defaultProfile !== undefined) ? " data-default=\"" + escapeHtml(defaultProfile) + "\"" : "";
@@ -275,6 +274,12 @@ function generateProfileReference(profiles) {
     lines.push("</div>");
     return lines.join("\n");
 }
+/**
+ * Generates HTML for the advanced fields section (station ID, channel selector, channel number, guide title, logo URL, HDHomeRun toggle, tags).
+ * @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 lines = [];
@@ -286,13 +291,16 @@ function generateAdvancedFields(idPrefix, options = {}) {
     // Station ID.
     const stationIdHint = showHints ? "Optional Gracenote station ID for guide data (tvc-guide-stationid)." : undefined;
     const defs = options.defaults;
-    lines.push(...generateTextField(idPrefix + "-stationId", "stationId", "Station ID", stationIdValue, { defaultValue: defs?.stationId, hint: stationIdHint, placeholder: showHints ? "e.g., 12345" : undefined }));
+    const customized = options.customizedFields;
+    lines.push(...generateTextField(idPrefix + "-stationId", "stationId", "Station ID", stationIdValue, { defaultValue: defs?.stationId, hint: stationIdHint, isCustomized: customized?.has("stationId"), placeholder: showHints ? "e.g., 12345" : undefined }));
     // Guide title override. When set, this value replaces the channel name in the M3U playlist's tvg-name attribute and guide placeholder airings.
     const guideTitleHint = showHints ? "Optional title for guide display. When set, overrides the channel name in the M3U playlist (tvg-name)." : undefined;
-    lines.push(...generateTextField(idPrefix + "-guideTitle", "guideTitle", "Guide Title", guideTitleValue, { defaultValue: defs?.guideTitle, hint: guideTitleHint, placeholder: showHints ? "e.g., Flighty Airport Delays" : undefined }));
+    lines.push(...generateTextField(idPrefix + "-guideTitle", "guideTitle", "Guide Title", guideTitleValue, { defaultValue: defs?.guideTitle, hint: guideTitleHint, isCustomized: customized?.has("guideTitle"),
+        placeholder: showHints ? "e.g., Flighty Airport Delays" : undefined }));
     // Custom logo URL. When set, this value is emitted as the tvg-logo attribute in the M3U playlist.
     const logoUrlHint = showHints ? "Optional logo URL for the channel. Overrides any logo derived from Channels DVR." : undefined;
-    lines.push(...generateTextField(idPrefix + "-logoUrl", "logoUrl", "Logo URL", logoUrlValue, { defaultValue: defs?.logoUrl, hint: logoUrlHint, placeholder: showHints ? "https://example.com/logo.png" : undefined, type: "url" }));
+    lines.push(...generateTextField(idPrefix + "-logoUrl", "logoUrl", "Logo URL", logoUrlValue, { defaultValue: defs?.logoUrl, hint: logoUrlHint, isCustomized: customized?.has("logoUrl"),
+        placeholder: showHints ? "https://example.com/logo.png" : undefined, type: "url" }));
     // Channel selector. The guide-based service list is derived from the provider module registry so it stays current as services are added.
     const guideProviderNames = getProviderModuleInfo().map((p) => p.label).sort().join(", ");
     const channelSelectorHint = showHints ?
@@ -301,18 +309,21 @@ function generateAdvancedFields(idPrefix, options = {}) {
             "For tile and thumbnail profiles, right-click the channel element \u2192 Inspect \u2192 copy a unique value matching the profile's selector pattern " +
             "(typically a portion of the image src URL)." :
         undefined;
-    lines.push(...generateTextField(idPrefix + "-channelSelector", "channelSelector", "Channel Selector", channelSelectorValue, { defaultValue: defs?.channelSelector, hint: channelSelectorHint, list: idPrefix + "-selectorList", placeholder: showHints ? "e.g., ESPN" : undefined }));
+    lines.push(...generateTextField(idPrefix + "-channelSelector", "channelSelector", "Channel Selector", channelSelectorValue, { defaultValue: defs?.channelSelector, hint: channelSelectorHint, isCustomized: customized?.has("channelSelector"),
+        list: idPrefix + "-selectorList", placeholder: showHints ? "e.g., ESPN" : undefined }));
     // Channel number for Channels DVR and Plex integration.
     const channelNumberHint = showHints ?
         "Optional numeric channel number for guide matching in Channels DVR and Plex." :
         undefined;
-    lines.push(...generateTextField(idPrefix + "-channelNumber", "channelNumber", "Channel Number", channelNumberValue, { defaultValue: defs?.channelNumber, hint: channelNumberHint, placeholder: showHints ? "e.g., 501" : undefined }));
+    lines.push(...generateTextField(idPrefix + "-channelNumber", "channelNumber", "Channel Number", channelNumberValue, { defaultValue: defs?.channelNumber, hint: channelNumberHint, isCustomized: customized?.has("channelNumber"),
+        placeholder: showHints ? "e.g., 501" : undefined }));
     // Tags field: checkbox grid of the active tag vocabulary. Checked tags are collected into a hidden input as a comma-separated value on form submission.
     // This prevents users from entering tag names that don't exist in the managed vocabulary.
     const vocabulary = getActiveTagVocabulary();
     const currentTags = tagsValue ? tagsValue.split(",").map((t) => t.trim()).filter((t) => t.length > 0) : [];
     if (vocabulary.length > 0) {
-        const tagsModified = (defs?.tags !== undefined) && (defs.tags !== tagsValue);
+        // Tags are an identity field stored on the canonical entry. Customization is presence in the canonical-stored entry, surfaced via customizedFields.
+        const tagsModified = customized?.has("tags") === true;
         const tagsModifiedClass = tagsModified ? " modified" : "";
         const tagsModifiedDot = tagsModified ? "<span class=\"modified-dot\" title=\"Modified from predefined default\"></span>" : "";
         const tagsDefaultAttr = (defs?.tags !== undefined) ? " data-default=\"" + escapeHtml(defs.tags) + "\"" : "";
@@ -336,11 +347,12 @@ function generateAdvancedFields(idPrefix, options = {}) {
     // HDHomeRun lineup inclusion. A hidden input provides the "false" value when the checkbox is unchecked (unchecked checkboxes are not submitted in FormData).
     // When checked, the checkbox value "true" overwrites the hidden input's "false" since it appears later in DOM order.
     const hdhrChecked = hdhrEnabled ? " checked" : "";
-    const hdhrDefaultEnabled = defs?.hdhrEnabled ?? true;
-    const hdhrModified = (defs?.hdhrEnabled !== undefined) && (hdhrEnabled !== hdhrDefaultEnabled);
+    // Customization is presence in stored deltas (identity field, lives on canonical entry); surfaced via customizedFields. The default value (when present)
+    // arrives pre-stringified as "true" or "false" from resetValueFor -> getEffectiveHdhrEnabled, so it goes directly into the data-default attribute.
+    const hdhrModified = customized?.has("hdhrEnabled") === true;
     const hdhrModifiedClass = hdhrModified ? " modified" : "";
     const hdhrModifiedDot = hdhrModified ? "<span class=\"modified-dot\" title=\"Modified from predefined default\"></span>" : "";
-    const hdhrDefaultAttr = (defs?.hdhrEnabled !== undefined) ? " data-default=\"" + String(hdhrDefaultEnabled) + "\"" : "";
+    const hdhrDefaultAttr = (defs?.hdhrEnabled !== undefined) ? " data-default=\"" + defs.hdhrEnabled + "\"" : "";
     const hdhrHint = showHints ? "When unchecked, this channel is hidden from the HDHomeRun lineup and not available in Plex." : undefined;
     lines.push("<div class=\"form-row form-row-checkbox" + hdhrModifiedClass + "\">");
     lines.push(hdhrModifiedDot + "<label for=\"" + idPrefix + "-hdhrEnabled\">Include in HDHomeRun/Plex Lineup</label>");
@@ -350,7 +362,8 @@ function generateAdvancedFields(idPrefix, options = {}) {
     if (hdhrHint) {
         lines.push("<div class=\"hint\">" + hdhrHint + "</div>");
     }
-    lines.push("</div>"); // End advanced fields.
+    // Close the advanced-fields wrapper opened at the top of this builder.
+    lines.push("</div>");
     return lines;
 }
 /**
@@ -370,8 +383,12 @@ function generateChannelSelectorData() {
         }
         // Use the resolved channel (with inheritance from the canonical) so stationId, name, and other inherited fields are populated correctly for variants.
         // The channelSelector is captured from the raw entry (already validated as non-null) to avoid non-null assertions on the resolved channel's optional field.
+        // resolvePredefinedVariant returns a fully-typed ResolvedChannel for both canonical and variant keys; defensive skip for the rare missing-canonical case.
         const selector = raw.channelSelector;
-        const channel = resolvePredefinedVariant(key) ?? raw;
+        const channel = resolvePredefinedVariant(key);
+        if (!channel) {
+            continue;
+        }
         const hostname = new URL(channel.url).hostname;
         seen[hostname] ??= new Set();
         if (seen[hostname].has(selector)) {
@@ -381,19 +398,19 @@ function generateChannelSelectorData() {
         byDomain[hostname] ??= [];
         byDomain[hostname].push({ label: channel.name ?? selector, stationId: channel.stationId, value: selector });
     }
-    // Merge cached service-discovered channels into the domain map. Predefined entries take precedence — we only add discovered channels whose channelSelector
+    // Merge cached service-discovered channels into the domain map. Predefined entries take precedence - we only add discovered channels whose channelSelector
     // value is not already present for that domain. This enriches the datalist with the full service lineup when precaching or prior discovery has run.
     for (const provider of getCachedProviderChannels()) {
-        seen[provider.hostname] ??= new Set();
-        byDomain[provider.hostname] ??= [];
+        const seenForHost = seen[provider.hostname] ??= new Set();
+        const entriesForHost = byDomain[provider.hostname] ??= [];
         for (const entry of provider.entries) {
-            if (!seen[provider.hostname].has(entry.value)) {
-                seen[provider.hostname].add(entry.value);
-                byDomain[provider.hostname].push(entry);
+            if (!seenForHost.has(entry.value)) {
+                seenForHost.add(entry.value);
+                entriesForHost.push(entry);
             }
         }
     }
-    // Build the hostname→slug map and slug→guideUrl map for all services (including those with cold caches) so the client-side fetch can trigger discovery for any
+    // Build the hostname->slug map and slug->guideUrl map for all services (including those with cold caches) so the client-side fetch can trigger discovery for any
     // service domain and the URL hint can suggest the correct guide URL.
     const serviceByDomain = getProviderDomainMap();
     const serviceGuideUrl = getProviderGuideUrls();
@@ -407,7 +424,7 @@ function generateChannelSelectorData() {
         "var predefinedByDomain = " + JSON.stringify(getPredefinedDomainMap()) + ";";
 }
 /**
- * Generates the tag column filter dropdown content. This is the single source of truth for the filter checkbox list — used for both the initial header render
+ * Generates the tag column filter dropdown content. This is the single source of truth for the filter checkbox list - used for both the initial header render
  * and for incremental updates after tag CRUD operations. The dropdown shell (button, dropdown-menu wrapper) is rendered by the header generator; this function
  * provides only the inner content (checkbox labels + "Show All" item).
  * @returns HTML string for the filter dropdown content.
@@ -427,7 +444,7 @@ export function generateTagFilterContent() {
     return lines.join("");
 }
 /**
- * Generates the Tag Management modal body HTML. This is the single source of truth for tag manager content — used for both the initial server render and for
+ * Generates the Tag Management modal body HTML. This is the single source of truth for tag manager content - used for both the initial server render and for
  * incremental updates after tag CRUD operations. The endpoints return this HTML in the response so the client can replace the modal content without a page reload.
  * @returns HTML string for the tag manager body (tag list, input field, deleted tags section).
  */
@@ -443,7 +460,7 @@ export function generateTagManagerBody() {
             "<button type=\"button\" class=\"btn-icon btn-icon-delete\" title=\"Delete tag\" onclick=\"deleteTag('" + escapeHtml(tag) +
             "')\">" + ICON_DELETE + "</button></div>");
     }
-    // Deleted predefined tags section — show restore option for tags the user has deleted.
+    // 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) + "\">" +
@@ -545,7 +562,7 @@ 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.
+ * 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.
@@ -571,7 +588,7 @@ export function generateChannelRowHtml(key, profiles, entry) {
     const serviceGroup = getServiceGroup(key);
     // Build the service tags data attribute for client-side filtering.
     const serviceTags = getChannelServiceTags(key).join(",");
-    // Generate display row. User-created channels and predefined overrides get distinct CSS classes — user-created channels have a subtle background tint
+    // Generate display row. User-created channels and predefined overrides get distinct CSS classes - user-created channels have a subtle background tint
     // ("user-channel"), while predefined overrides get a left-border accent and blue dot indicator via CSS ::before ("channel-override") matching the settings
     // form's visual language for "modified from defaults." Disabled and service-filtered rows get additional classes for opacity and visibility control.
     const displayLines = [];
@@ -590,7 +607,7 @@ export function generateChannelRowHtml(key, profiles, entry) {
     }
     const rowClassAttr = (rowClasses.length > 0) ? " class=\"" + rowClasses.join(" ") + "\"" : "";
     const rowTitleAttr = isOverride ? " title=\"Customized from predefined defaults\"" : "";
-    // Compute effective tags early — used for both the row data attribute (tag column filter) and the Tags column cell rendering below.
+    // Compute effective tags early - used for both the row data attribute (tag column filter) and the Tags column cell rendering below.
     const effectiveTags = getChannelEffectiveTags(channel);
     const channelTagsAttr = (effectiveTags.length > 0) ? " data-channel-tags=\"" + escapeHtml(effectiveTags.join(",")) + "\"" : "";
     displayLines.push("<tr id=\"display-row-" + escapeHtml(key) + "\"" + rowClassAttr + rowTitleAttr + " data-provider-tags=\"" + escapeHtml(serviceTags) +
@@ -635,7 +652,7 @@ export function generateChannelRowHtml(key, profiles, entry) {
         "\" onclick=\"startInlineEdit(this)\">" + (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 = (channel.hdhrEnabled !== false) ? " checked" : "";
+    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>");
@@ -704,7 +721,7 @@ export function generateChannelRowHtml(key, profiles, entry) {
         displayLines.push("<span class=\"btn-icon-placeholder\"></span>");
     }
     // Position 4: enable/disable toggle for predefined channels (regardless of override state), delete for user-defined channels. The enable/disable state and
-    // property overrides are independent concerns — a predefined channel can be disabled AND have customizations, and the toggle always reflects the visibility state.
+    // 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('" +
@@ -742,41 +759,71 @@ export function generateChannelRowHtml(key, profiles, entry) {
     editLines.push("<form id=\"edit-channel-form-" + escapedKey + "\" onsubmit=\"return submitChannelForm(event, 'edit')\">");
     editLines.push("<input type=\"hidden\" name=\"action\" value=\"edit\">");
     editLines.push("<input type=\"hidden\" name=\"key\" value=\"" + escapedKey + "\">");
-    // For override channels, look up the predefined defaults so each field can show the "modified from defaults" indicator when its value differs. This applies
-    // the same visual treatment used by the settings form — border accent, blue dot, and per-field reset button — so users can immediately see which fields they
-    // customized and reset individual fields without reverting the entire channel.
-    const predefined = isOverride ? PREDEFINED_CHANNELS[key] : undefined;
-    const predefinedTags = predefined ? getChannelEffectiveTags(predefined).join(", ") : undefined;
+    // For override channels, fetch the customization provenance once. The accessor returns which fields the user has explicitly customized (across canonical and
+    // active-variant stored entries) and the per-field reset value (looked up from the appropriate predefined entry, with variant-inheritance fallback). This is
+    // the single source of truth for the modified-field treatment - it produces no false positives when service variants are resolved, because storage provenance,
+    // not value comparison, drives the determination.
+    //
+    // For non-override channels (predefined-only or pure user-defined), the customization concept does not apply: predefined-only channels have no user
+    // customizations to mark, and pure user channels have no predefined baseline to compare against. Both paths skip the accessor and pass undefined defaults.
+    const customizations = isOverride ? getChannelCustomizations(key).customizations : undefined;
+    const customizedFields = customizations ? new Set(customizations.keys()) : undefined;
+    // resetValueFor stringifies the raw resetValue from the accessor for use in input data-default attributes. Returns undefined when the field is not
+    // customized, signalling the field generators to skip data-default and the modified treatment entirely. Array values (tags) are joined with ", " to match
+    // the comma-separated form representation; primitive values are stringified normally; null/undefined become the empty string. Field parameter is typed as
+    // CustomizableField so the call sites below get compile-time validation that they reference real customizable fields.
+    const resetValueFor = (field) => {
+        const entry = customizations?.get(field);
+        if (!entry) {
+            return undefined;
+        }
+        const value = entry.resetValue;
+        if ((value === undefined) || (value === null)) {
+            return "";
+        }
+        if (Array.isArray(value)) {
+            return value.join(", ");
+        }
+        if ((typeof value === "string") || (typeof value === "number") || (typeof value === "boolean")) {
+            return String(value);
+        }
+        return "";
+    };
     // Channel name.
     editLines.push(...generateTextField("edit-name-" + key, "name", "Display Name", channel.name ?? key, {
-        defaultValue: predefined ? (predefined.name ?? key) : undefined,
+        defaultValue: resetValueFor("name"),
         hint: "Friendly name shown in the playlist and UI.",
+        isCustomized: customizedFields?.has("name"),
         required: true
     }));
     // Channel URL.
     editLines.push(...generateTextField("edit-url-" + key, "url", "Stream URL", channel.url, {
-        defaultValue: predefined?.url,
+        defaultValue: resetValueFor("url"),
         hint: "The URL of the streaming page to capture.",
+        isCustomized: customizedFields?.has("url"),
         required: true,
         type: "url"
     }));
     // Profile dropdown.
-    editLines.push(...generateProfileDropdown("edit-profile-" + key, channel.profile ?? "", profiles, true, isOverride ? (predefined?.profile ?? "") : undefined));
-    // Advanced fields.
+    editLines.push(...generateProfileDropdown("edit-profile-" + key, channel.profile ?? "", profiles, true, resetValueFor("profile"), customizedFields?.has("profile")));
+    // Advanced fields. Every reset value flows through resetValueFor, which delegates to getChannelCustomizations -> computeResetValue. The accessor applies the
+    // effective-view rules (vocabulary-filtered tags, implicit-true hdhrEnabled) and looks up the right predefined source (canonical or variant with inheritance
+    // fallback) so the form sees a uniformly stringified default for every field.
     editLines.push(...generateAdvancedFields("edit-" + key, {
         channelNumberValue: channel.channelNumber ? String(channel.channelNumber) : "",
         channelSelectorValue: channel.channelSelector ?? "",
-        defaults: predefined ? {
-            channelNumber: predefined.channelNumber ? String(predefined.channelNumber) : "",
-            channelSelector: predefined.channelSelector ?? "",
-            guideTitle: predefined.guideTitle ?? "",
-            hdhrEnabled: predefined.hdhrEnabled !== false,
-            logoUrl: predefined.logoUrl ?? "",
-            stationId: predefined.stationId ?? "",
-            tags: predefinedTags
+        customizedFields,
+        defaults: isOverride ? {
+            channelNumber: resetValueFor("channelNumber"),
+            channelSelector: resetValueFor("channelSelector"),
+            guideTitle: resetValueFor("guideTitle"),
+            hdhrEnabled: resetValueFor("hdhrEnabled"),
+            logoUrl: resetValueFor("logoUrl"),
+            stationId: resetValueFor("stationId"),
+            tags: resetValueFor("tags")
         } : undefined,
         guideTitleValue: channel.guideTitle ?? "",
-        hdhrEnabled: channel.hdhrEnabled !== false,
+        hdhrEnabled: getEffectiveHdhrEnabled(channel),
         logoUrlValue: channel.logoUrl ?? "",
         stationIdValue: channel.stationId ?? "",
         tagsValue: effectiveTags.join(", ")
@@ -798,7 +845,7 @@ export function generateChannelRowHtml(key, profiles, entry) {
     return { displayRow, editRow };
 }
 /**
- * Computes the complete channel table state — summary counts and scope toggle counts — from the current channel listing. This is the server-side single source
+ * Computes the complete channel table state - summary counts and scope toggle counts - from the current channel listing. This is the server-side single source
  * of truth for all count computation, replacing the client-side DOM-scanning approach. Called once per mutation as part of building a patch.
  * @param listing - Optional pre-fetched listing. When omitted, fetches from getChannelListing(). Passing the listing avoids a redundant computation when
  *   buildChannelTablePatch already has it.
@@ -840,7 +887,7 @@ function getHdhrCounts(listing) {
             continue;
         }
         total++;
-        if (entry.channel.hdhrEnabled !== false) {
+        if (getEffectiveHdhrEnabled(entry.channel)) {
             enabled++;
         }
     }
@@ -863,8 +910,6 @@ function getTagCounts(listing) {
     }
     const result = {};
     let total = 0;
-    // Pre-compute the vocabulary Set once for the per-channel effective tags filter.
-    const vocabularySet = new Set(vocabulary);
     const counts = new Map();
     for (const tag of vocabulary) {
         counts.set(tag, 0);
@@ -874,7 +919,9 @@ function getTagCounts(listing) {
             continue;
         }
         total++;
-        const effectiveTags = entry.channel.tags ? entry.channel.tags.filter((tag) => vocabularySet.has(tag)) : [];
+        // Use the canonical helper for vocabulary-filtered tags. Inline filtering would diverge from the rest of the codebase on the case-insensitive matching
+        // policy that getChannelEffectiveTags applies via tagsMatch.
+        const effectiveTags = getChannelEffectiveTags(entry.channel);
         for (const tag of effectiveTags) {
             const current = counts.get(tag);
             if (current !== undefined) {
@@ -972,7 +1019,7 @@ export function generateServiceFilterToolbar() {
  * @returns HTML string for the Channels panel content.
  */
 export function generateChannelsPanel(channelMessage, channelError, editingChannelKey, showAddForm, formErrors, formValues) {
-    // Get the canonical channel listing (service variants already filtered out, sorted by key). This is the single source of truth for merged channel data —
+    // Get the canonical channel listing (service variants already filtered out, sorted by key). This is the single source of truth for merged channel data -
     // it handles predefined/user merging, disabled state, and service availability.
     const listing = getChannelListing();
     const profiles = getProfiles();
@@ -989,7 +1036,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     // operations.
     lines.push("<div class=\"channel-toolbar\">");
     lines.push("<div class=\"toolbar-group\">");
-    // Manage Channels dropdown — primary channel creation and setup actions.
+    // 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>");
@@ -1017,7 +1064,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
         " Service Setup</div>");
     lines.push("</div>");
     lines.push("</div>");
-    // Import / Export dropdown — data I/O operations.
+    // 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>");
@@ -1039,15 +1086,15 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     lines.push("<input type=\"file\" id=\"import-m3u-file\" accept=\".m3u,.m3u8\" style=\"display: none;\" onchange=\"importM3U(this)\">");
     // 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.
+    // 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>");
     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.
+    // 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.
+    // 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 },
@@ -1061,7 +1108,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
             "\">" + String(s.count) + " of " + String(s.total) + " enabled</span></label>");
     }
     lines.push("<div class=\"dropdown-divider\"></div>");
-    // Bulk assign select — switch all multi-service channels to a single service.
+    // Bulk assign select - switch all multi-service channels to a single service.
     const allTags = getAllServiceTags();
     const enabled = getEnabledServices();
     const hasFilter = enabled.length > 0;
@@ -1080,7 +1127,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     // Divider before column-gated quick actions. Hidden when neither the channel number nor HDHR column is visible.
     const dividerVisible = (visibleCols.has("channelNumber") || visibleCols.has("hdhrEnabled")) ? "" : " style=\"display: none;\"";
     lines.push("<div class=\"dropdown-divider\" id=\"quick-action-divider\"" + dividerVisible + "></div>");
-    // Auto-number channels — assign sequential channel numbers to visible channels in current sort order. Visible when the channel number column is shown.
+    // Auto-number channels - assign sequential channel numbers to visible channels in current sort order. Visible when the channel number column is shown.
     const autoNumberVisible = visibleCols.has("channelNumber") ? "" : " style=\"display: none;\"";
     lines.push("<div id=\"quick-action-autonumber\"" + autoNumberVisible + ">");
     lines.push("<div class=\"bulk-assign-row\">");
@@ -1090,7 +1137,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     lines.push("<button type=\"button\" class=\"btn btn-sm btn-secondary\" onclick=\"dropdowns.close(); autoNumberChannels()\">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.
+    // HDHR bulk toggle - tri-state checkbox to enable/disable all channels for the HDHomeRun lineup. Visible when the HDHR column is shown.
     const hdhrVisible = visibleCols.has("hdhrEnabled") ? "" : " style=\"display: none;\"";
     const hdhrCounts = getHdhrCounts(listing);
     const hdhrCheckedAttr = (hdhrCounts.enabled === hdhrCounts.total) ? " checked" : "";
@@ -1102,13 +1149,13 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     lines.push("<span class=\"quick-action-count\" id=\"hdhr-bulk-count\">" + String(hdhrCounts.enabled) + " of " + String(hdhrCounts.total) + "</span>");
     lines.push("</label>");
     lines.push("</div>");
-    // Bulk tag toggles — tristate checkboxes for each tag in the active vocabulary. Visible when the tags column is shown. Each checkbox shows how many enabled
+    // Bulk tag toggles - tristate checkboxes for each tag in the active vocabulary. Visible when the tags column is shown. Each checkbox shows how many enabled
     // channels have the tag, and clicking it adds or removes the tag on all visible channels.
     const tagsVisible = visibleCols.has("tags") ? "" : " style=\"display: none;\"";
     const tagsVocabulary = getActiveTagVocabulary();
     if (tagsVocabulary.length > 0) {
         // Count how many enabled, service-available channels have each tag.
-        const enabledListing = listing.filter((entry) => entry.enabled && entry.availableByService);
+        const enabledListing = listing.filter(isVisibleChannel);
         const totalEnabled = enabledListing.length;
         const tagCountMap = new Map();
         for (const tag of tagsVocabulary) {
@@ -1243,7 +1290,8 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     lines.push("<button type=\"button\" class=\"btn btn-secondary\" onclick=\"document.getElementById('add-channel-form').style.display='none';\">Cancel</button>");
     lines.push("</div>");
     lines.push("</form>");
-    lines.push("</div>"); // End add-channel-form.
+    // Close the add-channel-form wrapper opened at the top of this builder.
+    lines.push("</div>");
     // Profile reference section (hidden by default, toggled via link in profile dropdown hint).
     lines.push(generateProfileReference(profiles));
     // Channels table. Disabled predefined channels are hidden by default and revealed via the "Show disabled" toggle. The wrapper div enables horizontal scrolling on
@@ -1279,7 +1327,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
         ...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;
+    // .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);
@@ -1288,7 +1336,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
             "\" onclick=\"channelTable.sort('" + 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
+        // shows/hides rows based on their data-channel-tags attribute. The dropdown content comes from generateTagFilterContent() - the single source of truth
         // shared with the tag CRUD incremental update path.
         if (hdr.field === "tags") {
             lines.push("<div class=\"dropdown tag-filter-dropdown\" style=\"display: inline;\">");
@@ -1350,7 +1398,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     // Tag Management modal. A simple dialog for creating, deleting, and restoring organizational tags. Client-side handlers drive the CRUD operations via the
     // tag management API endpoints.
     lines.push(generateTagManagementModal());
-    // Inline tag edit portal — a shared dropdown portaled to <body> on first use by getTagPortal() in config.ts. One instance shared across all channel rows;
+    // Inline tag edit portal - a shared dropdown portaled to <body> on first use by getTagPortal() in config.ts. One instance shared across all channel rows;
     // populated dynamically from the clicked cell's data-tags attribute. Positioned via getBoundingClientRect() to escape the table wrapper's overflow:auto clipping.
     const vocabulary = getActiveTagVocabulary();
     lines.push("<div id=\"inline-tag-portal\" class=\"dropdown-menu inline-tag-menu\">");