prismcast 1.8.0 → 1.9.0

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

@@ -3,9 +3,9 @@
  * 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, getAllProviderTags, getAuthDomainForChannel, getChannelProviderLabel, getChannelProviderTags, getChannelSortKey, getEnabledProviders, getProviderGroup, hasMultipleProviders, isChannelAvailableByProvider, isProviderTagEnabled, resolvePredefinedVariant, resolveProviderKey } from "../../../config/providers.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 } from "../../../config/userChannels.js";
+import { getActiveTagVocabulary, getChannelEffectiveTags, getChannelListing, getChannelLogo, getChannelsParseErrorMessage, getPredefinedScopeCounts, getTagRegistry, getUserChannelsFilePath, hasChannelsParseError, isPredefinedChannel, isPredefinedChannelDisabled, isUserChannel, 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";
@@ -14,22 +14,22 @@ import { PREDEFINED_CHANNELS } from "../../../channels/index.js";
 import { categorizeProfiles } from "../index.js";
 import { generateWizardModal } from "../../components.js";
 /**
- * Generates an annotated provider display span. The client-side page-load script processes these elements via providerIconHtml, rendering the appropriate
- * icon + text combination. The server just emits the text with data attributes — all icon rendering is client-side through the single providerIconHtml path.
- * @param name - The provider display name.
- * @param domain - The provider's domain for icon fallback derivation. Undefined for providers without a known domain.
+ * 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.
+ * @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.
  * @param small - When true, uses the small icon variant for chips.
  * @returns HTML span string with data attributes for client-side processing.
  */
-function providerDisplaySpan(name, domain, iconUrl, small) {
+function serviceDisplaySpan(name, domain, iconUrl, small) {
     const domainAttr = domain ? " data-domain=\"" + escapeHtml(domain) + "\"" : "";
     const iconAttr = iconUrl ? " data-icon-url=\"" + escapeHtml(iconUrl) + "\"" : "";
     const sizeAttr = small ? " data-sm" : "";
     return "<span class=\"provider-display\"" + domainAttr + iconAttr + sizeAttr + ">" + escapeHtml(name) + "</span>";
 }
 // Optional column definitions for the channels table. These columns can be shown or hidden by the user via the column picker. The order here determines the
-// column order in the table, slotted between Provider and Actions.
+// column order in the table, slotted between Service and Actions.
 export const OPTIONAL_COLUMNS = [
     { align: "center", cssClass: "col-chnum", field: "channelNumber", label: "Number", width: "70px" },
     { align: "center", cssClass: "col-hdhr", field: "hdhrEnabled", label: "HDHR", width: "55px" },
@@ -58,10 +58,17 @@ 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) + "\"" : "";
-    lines.push("<div class=\"form-row\">");
-    lines.push("<label for=\"" + id + "\">" + label + "</label>");
+    // 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);
+    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) + "\"" : "";
+    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>" : "";
+    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 +
-        placeholder + " value=\"" + escapeHtml(value) + "\">");
+        placeholder + defaultAttr + " value=\"" + escapeHtml(value) + "\">" + resetBtn);
     lines.push("</div>");
     // When a datalist ID is specified, append an empty <datalist> element outside the form-row flex container. The client-side JavaScript populates it dynamically
     // based on the URL field value.
@@ -81,9 +88,17 @@ function generateTextField(id, name, label, value, options = {}) {
  * @param showHint - Whether to show the hint text with profile reference link.
  * @returns Array of HTML strings for the form row.
  */
-function generateProfileDropdown(id, selectedProfile, profiles, showHint = true) {
+function generateProfileDropdown(id, selectedProfile, profiles, showHint = true, defaultProfile) {
     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);
+    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) + "\"" : "";
+    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>" : "";
     // Helper to generate option elements for a profile.
     const renderOption = (profile) => {
         const selected = (profile.name === selectedProfile) ? " selected" : "";
@@ -91,9 +106,9 @@ function generateProfileDropdown(id, selectedProfile, profiles, showHint = true)
         const displayText = profile.summary ? profile.name + " \u2014 " + profile.summary : profile.name;
         return "<option value=\"" + escapeHtml(profile.name) + "\"" + title + selected + ">" + escapeHtml(displayText) + "</option>";
     };
-    lines.push("<div class=\"form-row\">");
-    lines.push("<label for=\"" + id + "\">Profile</label>");
-    lines.push("<select class=\"form-select field-wide\" id=\"" + id + "\" name=\"profile\">");
+    lines.push("<div class=\"form-row" + modifiedClass + "\">");
+    lines.push(modifiedDot + "<label for=\"" + id + "\">Profile</label>");
+    lines.push("<select class=\"form-select field-wide\" id=\"" + id + "\" name=\"profile\"" + defaultAttr + ">");
     lines.push("<option value=\"\">Autodetect (Recommended)</option>");
     // Fullscreen API profiles (most common).
     if (groups.api.length > 0) {
@@ -135,7 +150,7 @@ function generateProfileDropdown(id, selectedProfile, profiles, showHint = true)
         }
         lines.push("</optgroup>");
     }
-    lines.push("</select>");
+    lines.push("</select>" + resetBtn);
     lines.push("</div>");
     if (showHint) {
         lines.push("<div class=\"hint\">Autodetect uses predefined profiles for known sites. If video doesn't play or fullscreen fails, " +
@@ -248,7 +263,7 @@ function generateProfileReference(profiles) {
     if (groups.custom.length > 0) {
         lines.push("<div class=\"profile-category\">");
         lines.push("<h4>Custom Profiles</h4>");
-        lines.push("<p class=\"category-desc\">User-defined profiles created via the profile builder wizard or imported from provider packs.</p>");
+        lines.push("<p class=\"category-desc\">User-defined profiles created via the profile builder wizard or imported from service packs.</p>");
         lines.push("<dl class=\"profile-list\">");
         for (const profile of groups.custom) {
             lines.push("<dt>" + escapeHtml(profile.name) + "</dt>");
@@ -261,7 +276,7 @@ function generateProfileReference(profiles) {
     return lines.join("\n");
 }
 function generateAdvancedFields(idPrefix, options = {}) {
-    const { channelNumberValue = "", channelSelectorValue = "", hdhrEnabled = true, showHints = true, stationIdValue = "", tagsValue = "" } = options;
+    const { channelNumberValue = "", channelSelectorValue = "", guideTitleValue = "", hdhrEnabled = true, logoUrlValue = "", showHints = true, stationIdValue = "", tagsValue = "" } = options;
     const lines = [];
     // Advanced fields toggle.
     lines.push("<div class=\"advanced-toggle\" onclick=\"document.getElementById('" + idPrefix +
@@ -270,8 +285,15 @@ function generateAdvancedFields(idPrefix, options = {}) {
     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;
-    lines.push(...generateTextField(idPrefix + "-stationId", "stationId", "Station ID", stationIdValue, { hint: stationIdHint, placeholder: showHints ? "e.g., 12345" : undefined }));
-    // Channel selector. The guide-based provider list is derived from the provider module registry so it stays current as providers are added.
+    const defs = options.defaults;
+    lines.push(...generateTextField(idPrefix + "-stationId", "stationId", "Station ID", stationIdValue, { defaultValue: defs?.stationId, hint: stationIdHint, 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 }));
+    // 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" }));
+    // 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 ?
         "Identifies which channel to select on sites that host multiple live streams. Known values are suggested when the URL matches a supported site. " +
@@ -279,23 +301,27 @@ 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, { 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, 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, { hint: channelNumberHint, placeholder: showHints ? "e.g., 501" : undefined }));
+    lines.push(...generateTextField(idPrefix + "-channelNumber", "channelNumber", "Channel Number", channelNumberValue, { defaultValue: defs?.channelNumber, hint: channelNumberHint, 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 = new Set(tagsValue ? tagsValue.split(",").map((t) => t.trim().toLowerCase()).filter((t) => t.length > 0) : []);
+    const currentTags = tagsValue ? tagsValue.split(",").map((t) => t.trim()).filter((t) => t.length > 0) : [];
     if (vocabulary.length > 0) {
-        lines.push("<div class=\"form-row\">");
-        lines.push("<label>Tags</label>");
-        lines.push("<input type=\"hidden\" name=\"tags\" id=\"" + idPrefix + "-tags-hidden\" value=\"" + escapeHtml(tagsValue) + "\">");
+        const tagsModified = (defs?.tags !== undefined) && (defs.tags !== tagsValue);
+        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) + "\"" : "";
+        lines.push("<div class=\"form-row" + tagsModifiedClass + "\">");
+        lines.push(tagsModifiedDot + "<label>Tags</label>");
+        lines.push("<input type=\"hidden\" name=\"tags\" id=\"" + idPrefix + "-tags-hidden\" value=\"" + escapeHtml(tagsValue) + "\"" + tagsDefaultAttr + ">");
         lines.push("<div class=\"tag-checkbox-grid\">");
         for (const tag of vocabulary) {
-            const checked = currentTags.has(tag) ? " checked" : "";
+            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'))\">" +
@@ -310,11 +336,16 @@ 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);
+    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 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\">");
-    lines.push("<label for=\"" + idPrefix + "-hdhrEnabled\">Include in HDHomeRun/Plex Lineup</label>");
+    lines.push("<div class=\"form-row form-row-checkbox" + hdhrModifiedClass + "\">");
+    lines.push(hdhrModifiedDot + "<label for=\"" + idPrefix + "-hdhrEnabled\">Include in HDHomeRun/Plex Lineup</label>");
     lines.push("<input type=\"hidden\" name=\"hdhrEnabled\" value=\"false\">");
-    lines.push("<input type=\"checkbox\" id=\"" + idPrefix + "-hdhrEnabled\" name=\"hdhrEnabled\" value=\"true\"" + hdhrChecked + ">");
+    lines.push("<input type=\"checkbox\" id=\"" + idPrefix + "-hdhrEnabled\" name=\"hdhrEnabled\" value=\"true\"" + hdhrChecked + hdhrDefaultAttr + ">");
     lines.push("</div>");
     if (hdhrHint) {
         lines.push("<div class=\"hint\">" + hdhrHint + "</div>");
@@ -324,8 +355,8 @@ function generateAdvancedFields(idPrefix, options = {}) {
 }
 /**
  * Generates JavaScript variables for channel selector datalist population. Produces three variables: `channelSelectorsByDomain` maps URL hostnames to known
- * channel selector values (from predefined channels and cached provider discovery), `providerByDomain` maps provider guide URL hostnames to provider slugs for
- * client-side async discovery, and `providerGuideUrl` maps provider slugs to their guide URLs for URL correction hints. Embedded as a `<script>` block in the
+ * 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.
  *
  * @returns JavaScript variable declarations ready to embed in a `<script>` tag.
@@ -350,8 +381,8 @@ function generateChannelSelectorData() {
         byDomain[hostname] ??= [];
         byDomain[hostname].push({ label: channel.name ?? selector, stationId: channel.stationId, value: selector });
     }
-    // Merge cached provider-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 provider lineup when precaching or prior discovery has run.
+    // 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] ??= [];
@@ -362,17 +393,18 @@ function generateChannelSelectorData() {
             }
         }
     }
-    // Build the hostname→slug map and slug→guideUrl map for all providers (including those with cold caches) so the client-side fetch can trigger discovery for any
-    // provider domain and the URL hint can suggest the correct guide URL.
-    const providerByDomain = getProviderDomainMap();
-    const providerGuideUrl = getProviderGuideUrls();
+    // 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();
     // Sort entries within each domain alphabetically by label for consistent ordering in the datalist dropdown.
     for (const entries of Object.values(byDomain)) {
         entries.sort((a, b) => a.label.localeCompare(b.label));
     }
     return "var channelSelectorsByDomain = " + JSON.stringify(byDomain) + ";\n" +
-        "var providerByDomain = " + JSON.stringify(providerByDomain) + ";\n" +
-        "var providerGuideUrl = " + JSON.stringify(providerGuideUrl) + ";";
+        "var serviceByDomain = " + JSON.stringify(serviceByDomain) + ";\n" +
+        "var serviceGuideUrl = " + JSON.stringify(serviceGuideUrl) + ";\n" +
+        "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
@@ -424,7 +456,7 @@ export function generateTagManagerBody() {
         "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-z0-9]([a-z0-9-]*[a-z0-9])?\" onkeydown=\"if(event.key==='Enter'){event.preventDefault();createTag();}\">" +
+        "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>" +
         "</div>" +
         "<div id=\"tag-manager-error\" class=\"wizard-error\" style=\"display: none;\"></div>" +
@@ -452,13 +484,13 @@ function generateTagManagementModal() {
     });
 }
 /**
- * Generates the Browse Channels 2-step wizard modal. Step 1 is the provider picker grid, step 2 is channel discovery and management. Channel state detection
- * (new, switch, current) is handled server-side by the annotated discovery response - no client-side matching logic is needed. Provider and guide URL data are
+ * Generates the Browse Channels 2-step wizard modal. Step 1 is the service picker grid, step 2 is channel discovery and management. Channel state detection
+ * (new, switch, current) is handled server-side by the annotated discovery response - no client-side matching logic is needed. Service and guide URL data are
  * embedded as JSON data blocks for the client-side wizard controller.
  * @returns HTML string for the browse modal.
  */
 function generateBrowseModal() {
-    // Build the provider info array from the provider module registry. The client uses this to render the provider picker.
+    // Build the service info array from the provider module registry. The client uses this to render the service picker.
     const providers = getProviderModuleInfo();
     const guideUrls = getProviderGuideUrls();
     return generateWizardModal({
@@ -469,26 +501,26 @@ function generateBrowseModal() {
         ],
         contentId: "browse-content",
         dataBlocks: [
-            "<script type=\"application/json\" id=\"browse-providers-data\">" + JSON.stringify(providers) + "</script>",
+            "<script type=\"application/json\" id=\"browse-services-data\">" + JSON.stringify(providers) + "</script>",
             "<script type=\"application/json\" id=\"browse-guide-urls-data\">" + JSON.stringify(guideUrls) + "</script>"
         ],
-        description: "Manage your channel lineup by provider. Add new channels, switch providers for existing channels, or remove channels you no longer need.",
+        description: "Manage your channel lineup by service. Add new channels, switch services for existing channels, or remove channels you no longer need.",
         id: "browse-modal",
-        steps: ["Provider", "Channels"],
+        steps: ["Service", "Channels"],
         title: "Browse Channels",
         titleId: "browse-title"
     });
 }
 /**
- * Generates the Provider Setup 3-step wizard modal. Steps: Providers (multi-select), Sign In (sequential auth), Channels (summary + finish). The
+ * Generates the Service Setup 3-step wizard modal. Steps: Services (multi-select), Sign In (sequential auth), Channels (summary + finish). The
  * setupCompleted flag is embedded as a data attribute so the client can auto-show the wizard on first visit.
  * @returns HTML string for the setup wizard modal.
  */
 function generateSetupWizardModal() {
-    const enabled = getEnabledProviders();
-    // Build provider data with enabled state from the current provider filter. getAllProviderTags is the single source of truth for provider metadata
-    // (domain, iconUrl, displayName). The enabled field lets the client pre-check providers on re-run without scraping DOM state.
-    const tags = getAllProviderTags()
+    const enabled = getEnabledServices();
+    // Build service data with enabled state from the current service filter. getAllServiceTags is the single source of truth for service metadata
+    // (domain, iconUrl, displayName). The enabled field lets the client pre-check services on re-run without reading DOM state.
+    const tags = getAllServiceTags()
         .filter((t) => t.tag !== "direct")
         .map((t) => ({ ...t, enabled: enabled.includes(t.tag) }));
     return generateWizardModal({
@@ -501,14 +533,14 @@ function generateSetupWizardModal() {
         contentId: "setup-content",
         dataAttributes: { "setup-completed": CONFIG.channels.setupCompleted ? "true" : "false" },
         dataBlocks: [
-            "<script type=\"application/json\" id=\"setup-providers-data\">" + JSON.stringify(tags) + "</script>"
+            "<script type=\"application/json\" id=\"setup-services-data\">" + JSON.stringify(tags) + "</script>"
         ],
-        description: "Set up your streaming providers in three steps: select your services, sign in, and choose your channels.",
+        description: "Set up your streaming services in three steps: select your services, sign in, and choose your channels.",
         errorId: "setup-error",
         id: "setup-modal",
-        steps: ["Providers", "Sign In", "Channels"],
+        steps: ["Services", "Sign In", "Channels"],
         stepsId: "setup-steps",
-        title: "Provider Setup",
+        title: "Service Setup",
         titleId: "setup-title"
     });
 }
@@ -534,60 +566,66 @@ export function generateChannelRowHtml(key, profiles, entry) {
     const isPredefined = isPredefinedChannel(key);
     const isOverride = isPredefined && isUser;
     const isDisabled = isPredefinedChannelDisabled(key);
-    const isAvailableByProvider = isChannelAvailableByProvider(key);
-    // Check if this channel has multiple providers.
-    const providerGroup = getProviderGroup(key);
-    // Build the provider tags data attribute for client-side filtering.
-    const providerTags = getChannelProviderTags(key).join(",");
-    // Generate display row. User channels get one CSS class, disabled predefined get another, provider-filtered get a third.
+    const isAvailableByService = isChannelAvailableByService(key);
+    // Check if this channel has multiple services.
+    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
+    // ("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 = [];
     const rowClasses = [];
-    if (isUser) {
+    if (isOverride) {
+        rowClasses.push("channel-override");
+    }
+    else if (isUser) {
         rowClasses.push("user-channel");
     }
     if (isDisabled) {
         rowClasses.push("channel-disabled");
     }
-    if (!isAvailableByProvider) {
+    if (!isAvailableByService) {
         rowClasses.push("channel-unavailable");
     }
     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.
     const effectiveTags = getChannelEffectiveTags(channel);
     const channelTagsAttr = (effectiveTags.length > 0) ? " data-channel-tags=\"" + escapeHtml(effectiveTags.join(",")) + "\"" : "";
-    displayLines.push("<tr id=\"display-row-" + escapeHtml(key) + "\"" + rowClassAttr + " data-provider-tags=\"" + escapeHtml(providerTags) +
+    displayLines.push("<tr id=\"display-row-" + escapeHtml(key) + "\"" + rowClassAttr + rowTitleAttr + " data-provider-tags=\"" + escapeHtml(serviceTags) +
         "\"" + channelTagsAttr + ">");
     displayLines.push("<td class=\"ch-key\" data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "key")) + "\">" + escapeHtml(key) + "</td>");
     const channelLogoUrl = getChannelLogo(key) ?? "";
     const logoAttr = channelLogoUrl ? " data-logo=\"" + escapeHtml(channelLogoUrl) + "\"" : "";
     displayLines.push("<td data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "name")) + "\"" + logoAttr +
         "><span class=\"channel-name-cell\">" + escapeHtml(channel.name ?? key) + "</span></td>");
-    // Provider column: dropdown for multi-provider channels, static provider name for single-provider. Both states always render a hidden "No available providers"
-    // label alongside the provider content so that client-side filterChannelRows() can toggle between them without a page reload.
-    displayLines.push("<td data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "provider")) + "\">");
-    const labelHidden = isAvailableByProvider ? " style=\"display:none\"" : "";
-    const contentHidden = isAvailableByProvider ? "" : " style=\"display:none\"";
-    displayLines.push("<em class=\"no-provider-label\"" + labelHidden + ">No available providers</em>");
-    if (hasMultipleProviders(key) && providerGroup) {
-        // Multi-provider: render ALL variants with data-provider-tag attributes so client-side JS can filter options when the provider selection changes. Filtered-out
-        // options get the hidden attribute for immediate filtering in Chrome. Safari ignores hidden on option elements, so the page-load JS init calls filterChannelRows()
+    // Service column: dropdown for multi-service channels, static service name for single-service. Both states always render a hidden "No available services"
+    // label alongside the service content so that client-side channelTable.filter() can toggle between them without a page reload.
+    displayLines.push("<td data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "service")) + "\">");
+    const labelHidden = isAvailableByService ? " style=\"display:none\"" : "";
+    const contentHidden = isAvailableByService ? "" : " style=\"display:none\"";
+    displayLines.push("<em class=\"no-provider-label\"" + labelHidden + ">No available services</em>");
+    if (hasMultipleServices(key) && serviceGroup) {
+        // Multi-service: render ALL variants with data-provider-tag attributes so client-side JS can filter options when the service selection changes. Filtered-out
+        // options get the hidden attribute for immediate filtering in Chrome. Safari ignores hidden on option elements, so the page-load JS init calls channelTable.filter()
         // to remove them from the DOM.
-        const currentSelection = resolveProviderKey(key);
+        const currentSelection = resolveServiceKey(key);
         displayLines.push("<select class=\"provider-select\" data-channel=\"" + escapeHtml(key) +
-            "\" title=\"Choose which streaming provider delivers this channel\" onchange=\"updateProviderSelection(this)\"" + contentHidden + ">");
-        for (const variant of providerGroup.variants) {
+            "\" title=\"Choose which streaming service delivers this channel\" onchange=\"updateServiceSelection(this)\"" + contentHidden + ">");
+        for (const variant of serviceGroup.variants) {
             const selected = (variant.key === currentSelection) ? " selected" : "";
-            const optionHidden = !isProviderTagEnabled(variant.tag) ? " hidden" : "";
+            const optionHidden = !isServiceTagEnabled(variant.tag) ? " hidden" : "";
             displayLines.push("<option value=\"" + escapeHtml(variant.key) + "\" data-provider-tag=\"" + escapeHtml(variant.tag) + "\"" + selected + optionHidden + ">" +
                 escapeHtml(variant.label) + "</option>");
         }
         displayLines.push("</select>");
     }
     else {
-        // Single-provider: wrap the provider name in a span so client-side JS can toggle it with the no-provider label. Uses profile-aware label resolution so
-        // channels with explicit profile assignments show the profile's provider name rather than the built-in name for the URL domain.
+        // 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.
         displayLines.push("<span class=\"provider-name\"" + contentHidden + ">" +
-            escapeHtml(getChannelProviderLabel(channel)) + "</span>");
+            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.
@@ -612,7 +650,7 @@ export function generateChannelRowHtml(key, profiles, entry) {
     else {
         const resolved = getProfileForChannel(channel);
         if (resolved.profileName !== "default") {
-            const label = getChannelProviderLabel(channel);
+            const label = getChannelServiceLabel(channel);
             displayLines.push("<td class=\"col-profile\" data-sort-value=\"" + profileSortKey +
                 "\"><span class=\"text-muted\">" + escapeHtml(label + " (auto)") + "</span></td>");
         }
@@ -634,14 +672,14 @@ export function generateChannelRowHtml(key, profiles, entry) {
     displayLines.push("<td>");
     displayLines.push("<div class=\"btn-group\">");
     const escapedKey = escapeHtml(key);
-    // Resolve the auth domain for the currently selected provider variant. Used for both login icon color and health icon lookups.
-    const variantKey = resolveProviderKey(key);
+    // Resolve the auth domain for the currently selected service variant. Used for both login icon color and health icon lookups.
+    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 provider concept.
+    // login coloring because they have no service concept.
     if (!isDisabled) {
         const authTimestamp = (isPredefined || isOverride) ? getDomainAuth(authDomain) : null;
         const loginColorClass = authTimestamp ? " health-success" : "";
@@ -694,8 +732,8 @@ export function generateChannelRowHtml(key, profiles, entry) {
     displayLines.push("</td>");
     displayLines.push("</tr>");
     const displayRow = displayLines.join("\n");
-    // Generate edit form row for all channels. Pre-populate with the currently selected provider's values so the user sees what they're actually streaming, not the
-    // canonical definition which may differ when a provider variant is selected.
+    // Generate edit form row for all channels. Pre-populate with the currently selected service's values so the user sees what they're actually streaming, not the
+    // canonical definition which may differ when a service variant is selected.
     const editLines = [];
     editLines.push("<tr id=\"edit-row-" + escapedKey + "\" style=\"display: none;\">");
     editLines.push("<td colspan=\"" + String(TOTAL_COLUMN_COUNT) + "\">");
@@ -704,24 +742,42 @@ 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;
     // Channel name.
     editLines.push(...generateTextField("edit-name-" + key, "name", "Display Name", channel.name ?? key, {
+        defaultValue: predefined ? (predefined.name ?? key) : undefined,
         hint: "Friendly name shown in the playlist and UI.",
         required: true
     }));
     // Channel URL.
     editLines.push(...generateTextField("edit-url-" + key, "url", "Stream URL", channel.url, {
+        defaultValue: predefined?.url,
         hint: "The URL of the streaming page to capture.",
         required: true,
         type: "url"
     }));
     // Profile dropdown.
-    editLines.push(...generateProfileDropdown("edit-profile-" + key, channel.profile ?? "", profiles));
+    editLines.push(...generateProfileDropdown("edit-profile-" + key, channel.profile ?? "", profiles, true, isOverride ? (predefined?.profile ?? "") : undefined));
     // Advanced fields.
     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
+        } : undefined,
+        guideTitleValue: channel.guideTitle ?? "",
         hdhrEnabled: channel.hdhrEnabled !== false,
+        logoUrlValue: channel.logoUrl ?? "",
         stationIdValue: channel.stationId ?? "",
         tagsValue: effectiveTags.join(", ")
     }));
@@ -760,7 +816,7 @@ export function buildChannelTableState(listing) {
         else {
             predefined++;
         }
-        if (!entry.enabled || !entry.availableByProvider) {
+        if (!entry.enabled || !entry.availableByService) {
             disabled++;
         }
     }
@@ -772,7 +828,7 @@ export function buildChannelTableState(listing) {
     };
 }
 /**
- * Counts channels included and excluded from the HDHomeRun lineup. Only counts enabled, provider-available channels (the same set visible in the table).
+ * Counts channels included and excluded from the HDHomeRun lineup. Only counts enabled, service-available channels (the same set visible in the table).
  * @param listing - The channel listing entries.
  * @returns An object with `enabled` (HDHR-included) and `total` counts.
  */
@@ -780,7 +836,7 @@ function getHdhrCounts(listing) {
     let enabled = 0;
     let total = 0;
     for (const entry of listing) {
-        if (!entry.enabled || !entry.availableByProvider) {
+        if (!entry.enabled || !entry.availableByService) {
             continue;
         }
         total++;
@@ -791,7 +847,7 @@ function getHdhrCounts(listing) {
     return { enabled, total };
 }
 /**
- * Computes per-tag channel counts for the Quick Actions tag bulk toggles. For each tag in the active vocabulary, counts how many enabled, provider-available
+ * 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).
  * @param listing - The channel listing entries.
  * @returns A record mapping tag names to { count, total }, or undefined when hidden.
@@ -814,7 +870,7 @@ function getTagCounts(listing) {
         counts.set(tag, 0);
     }
     for (const entry of listing) {
-        if (!entry.enabled || !entry.availableByProvider) {
+        if (!entry.enabled || !entry.availableByService) {
             continue;
         }
         total++;
@@ -857,21 +913,21 @@ export function buildChannelTablePatch(affectedKeys, profiles) {
     return { counts, hdhrCounts: getHdhrCounts(listing), rows, scopeCounts, tagCounts: getTagCounts(listing) };
 }
 /**
- * Generates the provider filter toolbar HTML with a multi-select dropdown and dismissable chips.
- * @returns HTML string for the provider filter toolbar.
+ * Generates the service filter toolbar HTML with a multi-select dropdown and dismissable chips.
+ * @returns HTML string for the service filter toolbar.
  */
-export function generateProviderFilterToolbar() {
-    const allTags = getAllProviderTags();
-    const enabled = getEnabledProviders();
+export function generateServiceFilterToolbar() {
+    const allTags = getAllServiceTags();
+    const enabled = getEnabledServices();
     const hasFilter = enabled.length > 0;
     const lines = [];
     lines.push("<div class=\"provider-toolbar\">");
-    // Provider filter dropdown and chips. The button follows the toolbar dropdown pattern: icon + label + caret in a single button.
+    // Service filter dropdown and chips. The button follows the toolbar dropdown pattern: icon + label + caret in a single button.
     lines.push("<div class=\"toolbar-group\">");
     lines.push("<div class=\"dropdown provider-dropdown\">");
-    const buttonText = hasFilter ? "Filtered" : "All Providers";
-    lines.push("<button type=\"button\" class=\"btn btn-sm toolbar-dropdown-btn\" id=\"provider-filter-btn\" " +
-        "title=\"Filter channels by streaming provider\" onclick=\"toggleDropdown(this)\">" + ICON_FILTER + " " + buttonText + " &#9662;</button>");
+    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>");
     lines.push("<div class=\"dropdown-menu provider-dropdown-menu\">");
     for (const tagInfo of allTags) {
         const isDirectTag = tagInfo.tag === "direct";
@@ -880,7 +936,7 @@ export function generateProviderFilterToolbar() {
         const disabledAttr = isDirectTag ? " disabled" : "";
         lines.push("<label class=\"provider-option\">");
         lines.push("<input type=\"checkbox\" data-tag=\"" + escapeHtml(tagInfo.tag) + "\"" + checkedAttr + disabledAttr +
-            " onchange=\"toggleProviderTag(this)\"> " + providerDisplaySpan(tagInfo.displayName, tagInfo.domain, tagInfo.iconUrl));
+            " onchange=\"toggleServiceTag(this)\"> " + serviceDisplaySpan(tagInfo.displayName, tagInfo.domain, tagInfo.iconUrl));
         lines.push("</label>");
     }
     lines.push("</div>");
@@ -895,9 +951,9 @@ export function generateProviderFilterToolbar() {
             const chipTag = allTags.find((t) => t.tag === tag);
             const displayName = chipTag?.displayName ?? tag;
             lines.push("<span class=\"provider-chip\" data-tag=\"" + escapeHtml(tag) + "\">" +
-                providerDisplaySpan(displayName, chipTag?.domain, chipTag?.iconUrl, true) +
+                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=\"removeProviderChip('" + escapeHtml(tag) + "')\">&times;</button></span>");
+                escapeHtml(displayName) + "\" onclick=\"removeServiceChip('" + escapeHtml(tag) + "')\">&times;</button></span>");
         }
     }
     lines.push("</div>");
@@ -916,17 +972,17 @@ export function generateProviderFilterToolbar() {
  * @returns HTML string for the Channels panel content.
  */
 export function generateChannelsPanel(channelMessage, channelError, editingChannelKey, showAddForm, formErrors, formValues) {
-    // Get the canonical channel listing (provider 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 provider availability.
+    // 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();
-    // Count channels hidden from the default view: disabled predefined channels OR channels with no available providers.
-    const totalHiddenCount = listing.filter((entry) => !entry.enabled || !entry.availableByProvider).length;
+    // Count channels hidden from the default view: disabled predefined channels OR channels with no available services.
+    const totalHiddenCount = listing.filter((entry) => !entry.enabled || !entry.availableByService).length;
     const lines = [];
     // Panel description.
     lines.push("<div class=\"settings-panel-description\">");
     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>provider 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>provider dropdown</strong> on any multi-provider 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("<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
     // inline SVG icon + label + chevron for visual discoverability. Grouped menus reduce visual clutter and separate channel management from data I/O and bulk
@@ -935,7 +991,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     lines.push("<div class=\"toolbar-group\">");
     // 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-dropdown-btn\" title=\"Add, browse, or set up channels\" " +
+    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>");
     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
@@ -951,32 +1007,32 @@ 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=\"closeDropdowns(); " +
+    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=\"closeDropdowns(); openBrowseModal()\">" + TINTED_BROWSE +
-        " Browse Provider Channels</div>");
-    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"closeDropdowns(); openTagManager()\">" + TINTED_TAG +
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"dropdowns.close(); openBrowseModal()\">" + TINTED_BROWSE +
+        " Browse Service Channels</div>");
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"dropdowns.close(); openTagManager()\">" + TINTED_TAG +
         " Manage Tags</div>");
-    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"closeDropdowns(); openSetupWizard()\">" + TINTED_SETUP +
-        " Provider Setup</div>");
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"dropdowns.close(); openSetupWizard()\">" + 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-dropdown-btn\" title=\"Import or export channel data\" " +
+    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>");
     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=\"closeDropdowns(); document.getElementById('import-channels-file').click()\">" +
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"dropdowns.close(); document.getElementById('import-channels-file').click()\">" +
         TINTED_IMPORT + " Import Channels (JSON)</div>");
-    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"closeDropdowns(); document.getElementById('import-m3u-file').click()\">" +
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"dropdowns.close(); document.getElementById('import-m3u-file').click()\">" +
         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=\"closeDropdowns(); exportChannels()\">" +
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"dropdowns.close(); exportChannels()\">" +
         TINTED_EXPORT + " Export Channels (JSON)</div>");
     lines.push("</div>");
     lines.push("</div>");
@@ -985,7 +1041,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     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-dropdown-btn\" title=\"Bulk operations for predefined channels\" " +
+    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.
@@ -1005,15 +1061,15 @@ 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-provider channels to a single provider.
-    const allTags = getAllProviderTags();
-    const enabled = getEnabledProviders();
+    // Bulk assign select — switch all multi-service channels to a single service.
+    const allTags = getAllServiceTags();
+    const enabled = getEnabledServices();
     const hasFilter = enabled.length > 0;
     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-provider channels to this provider\" " +
-        "onchange=\"if(this.value) { closeDropdowns(); bulkAssignProvider(this.value); this.value = ''; }\">");
-    lines.push("<option value=\"\">Select provider</option>");
+    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 = ''; }\">");
+    lines.push("<option value=\"\">Select service</option>");
     for (const tagInfo of allTags) {
         const hidden = (hasFilter && !enabled.includes(tagInfo.tag) && (tagInfo.tag !== "direct")) ? " hidden" : "";
         lines.push("<option value=\"" + escapeHtml(tagInfo.tag) + "\" data-provider-tag=\"" + escapeHtml(tagInfo.tag) + "\"" + hidden + ">" +
@@ -1031,7 +1087,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     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=\"closeDropdowns(); autoNumberChannels()\">Apply</button>");
+    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.
@@ -1051,8 +1107,8 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     const tagsVisible = visibleCols.has("tags") ? "" : " style=\"display: none;\"";
     const tagsVocabulary = getActiveTagVocabulary();
     if (tagsVocabulary.length > 0) {
-        // Count how many enabled, provider-available channels have each tag.
-        const enabledListing = listing.filter((entry) => entry.enabled && entry.availableByProvider);
+        // Count how many enabled, service-available channels have each tag.
+        const enabledListing = listing.filter((entry) => entry.enabled && entry.availableByService);
         const totalEnabled = enabledListing.length;
         const tagCountMap = new Map();
         for (const tag of tagsVocabulary) {
@@ -1131,12 +1187,12 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     lines.push("<h3>Add New Channel</h3>");
     lines.push("<form id=\"add-channel-form-el\" onsubmit=\"return submitChannelForm(event, 'add')\">");
     lines.push("<input type=\"hidden\" name=\"action\" value=\"add\">");
-    // Provider pills. Clicking a provider auto-fills the URL field, which triggers the existing URL-change infrastructure (datalist population, profile
-    // resolution). The pills use providerDisplaySpan for icon rendering via the shared processProviderDisplays path. Guide-grid providers fill with their
-    // guideUrl; non-guide-grid providers fill with https://{domain}/.
-    const addFormTags = getAllProviderTags();
+    // 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
+    // guideUrl; non-guide-grid services fill with https://{domain}/.
+    const addFormTags = getAllServiceTags();
     const addFormGuideUrls = getProviderGuideUrls();
-    lines.push("<div class=\"form-row\"><label>Provider</label>");
+    lines.push("<div class=\"form-row\"><label>Service</label>");
     lines.push("<div class=\"provider-pills\">");
     for (const tagInfo of addFormTags) {
         if (tagInfo.tag === "direct") {
@@ -1144,11 +1200,11 @@ 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=\"selectProviderPill(this)\">" + providerDisplaySpan(tagInfo.displayName, tagInfo.domain, tagInfo.iconUrl) + "</button>");
+            "\" onclick=\"selectServicePill(this)\">" + serviceDisplaySpan(tagInfo.displayName, tagInfo.domain, tagInfo.iconUrl) + "</button>");
     }
     lines.push("</div>");
     lines.push("</div>");
-    lines.push("<div class=\"hint\">Select a provider to auto-fill the URL, or enter one manually below.</div>");
+    lines.push("<div class=\"hint\">Select a service to auto-fill the URL, or enter one manually below.</div>");
     // Channel key (add form only).
     lines.push(...generateTextField("add-key", "key", "Channel Key", formValues?.get("key") ?? "", {
         hint: "Lowercase letters, numbers, and hyphens only. Used in the URL: /stream/channel-key",
@@ -1169,9 +1225,12 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
         required: true,
         type: "url"
     }));
+    // Inline hint for predefined channel matches. Hidden by default, shown by the URL field change listener in config.ts when the entered URL's domain matches a
+    // predefined channel. This extends the form's existing URL-based intelligence (channelSelector suggestions, stationId auto-fill, profile auto-detection).
+    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, channel selector, channel number, HDHR).
+    // Advanced fields (station ID, guide title, logo URL, channel selector, channel number, tags, HDHR).
     lines.push(...generateAdvancedFields("add", {
         channelNumberValue: formValues?.get("channelNumber") ?? "",
         channelSelectorValue: formValues?.get("channelSelector") ?? "",
@@ -1197,8 +1256,8 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     }
     const sortField = CONFIG.channels.channelSortField;
     const sortDir = CONFIG.channels.channelSortDirection;
-    // Provider filter toolbar with multi-select dropdown and chips.
-    lines.push(generateProviderFilterToolbar());
+    // Service filter toolbar with multi-select dropdown and chips.
+    lines.push(generateServiceFilterToolbar());
     // Channel summary line with predefined/user breakdown, placed directly above the table for visual proximity. The user-count span contains the entire user
     // portion (comma, count, and label) so the client can toggle it by setting textContent. When there are no user channels, the span is empty.
     const userPortion = (userCount > 0) ? ", " + String(userCount) + " user" : "";
@@ -1216,7 +1275,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     const sortableHeaders = [
         { cssClass: "col-key", field: "key", label: "Key" },
         { cssClass: "col-name", field: "name", label: "Name" },
-        { cssClass: "col-provider", field: "provider", label: "Provider" },
+        { 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
@@ -1226,7 +1285,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
         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=\"sortChannelTable('" + hdr.field + "')\">");
+            "\" 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
@@ -1269,7 +1328,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     lines.push("</thead>");
     lines.push("<tbody>");
     // Sort the listing by the user's preferred field and direction before rendering rows. The canonical getChannelListing() order is preserved for other callers.
-    const sortedListing = [...listing].sort((a, b) => compareChannelSort(a.channel, a.key, b.channel, b.key, sortField, sortDir));
+    const sortedListing = listing.toSorted((a, b) => compareChannelSort(a.channel, a.key, b.channel, b.key, sortField, sortDir));
     // Generate rows for all channels using the shared row generator.
     for (const entry of sortedListing) {
         const rowHtml = generateChannelRowHtml(entry.key, profiles, entry);
@@ -1282,10 +1341,10 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     // Embed channel selector data for datalist population. The client-side JavaScript uses this to offer known selector suggestions when the URL matches a
     // multi-channel site like Disney+ or USA Network.
     lines.push("<script>" + generateChannelSelectorData() + "</script>");
-    // Browse Channels modal. The shell is server-rendered using wizard modal CSS classes. The content area (provider picker, channel list) is rendered
-    // client-side after fetching discovered channels from the provider endpoint.
+    // Browse Channels modal. The shell is server-rendered using wizard modal CSS classes. The content area (service picker, channel list) is rendered
+    // client-side after fetching discovered channels from the services endpoint.
     lines.push(generateBrowseModal());
-    // Provider Setup wizard modal. Follows the same wizard pattern as the provider profile builder. Three steps: pick providers, authenticate, browse channels.
+    // Service Setup wizard modal. Follows the same wizard pattern as the service profile builder. Three steps: pick services, authenticate, browse channels.
     // The setupCompleted flag is embedded as a data attribute so the client can auto-show the wizard on first visit.
     lines.push(generateSetupWizardModal());
     // Tag Management modal. A simple dialog for creating, deleting, and restoring organizational tags. Client-side handlers drive the CRUD operations via the