@bnhf/prismcast 1.3.4-2026.2.19

package/dist/routes/config.js

@@ -0,0 +1,1977 @@
+import { CONFIG, getDefaults, validatePositiveInt, validatePositiveNumber } from "../config/index.js";
+import { CONFIG_METADATA, filterDefaults, getAdvancedSections, getConfigFilePath, getEnvOverrides, getNestedValue, getSettingsTabSections, getUITabs, isEqualToDefault, loadUserConfig, saveUserConfig, setNestedValue } from "../config/userConfig.js";
+import { LOG, escapeHtml, formatError, generateChannelKey, isRunningAsService, parseM3U } from "../utils/index.js";
+import { getAllProviderTags, getCanonicalKey, getChannelProviderTags, getEnabledProviders, getProviderDisplayName, getProviderGroup, getProviderSelection, getProviderTagForChannel, getResolvedChannel, hasMultipleProviders, isChannelAvailableByProvider, isProviderTagEnabled, resolveProviderKey, setEnabledProviders, setProviderSelection } from "../config/providers.js";
+import { getChannelListing, getChannelsParseErrorMessage, getDisabledPredefinedChannels, getPredefinedChannels, getUserChannels, getUserChannelsFilePath, hasChannelsParseError, isPredefinedChannel, isPredefinedChannelDisabled, isUserChannel, loadUserChannels, saveProviderSelections, saveUserChannels, validateChannelKey, validateChannelName, validateChannelProfile, validateChannelUrl, validateImportedChannels } from "../config/userChannels.js";
+import { PREDEFINED_CHANNELS } from "../channels/index.js";
+import { closeBrowser } from "../browser/index.js";
+import { getPresetOptionsWithDegradation } from "../config/presets.js";
+import { getProfiles } from "../config/profiles.js";
+import { getStreamCount } from "../streaming/registry.js";
+/**
+ * Schedules a server restart after a brief delay to allow the response to be sent. This is used after configuration changes that require a restart to take effect.
+ * Returns information about whether the server will auto-restart (depends on whether running as a service). If streams are active and running as a service, the restart
+ * is deferred until streams end, allowing the client to show a dialog and let the user choose to wait or force restart.
+ * @param reason - A description of why the server is restarting, used in the log message.
+ * @returns Information about the restart including the message to display and whether auto-restart will occur.
+ */
+function scheduleServerRestart(reason) {
+    const willRestart = isRunningAsService();
+    // When not running as a service, we can't auto-restart. Notify the user that a manual restart is required.
+    if (!willRestart) {
+        LOG.info("Configuration saved %s. Manual restart required for changes to take effect.", reason);
+        return {
+            activeStreams: 0,
+            deferred: false,
+            message: "Configuration saved. Please restart PrismCast for changes to take effect.",
+            willRestart: false
+        };
+    }
+    // Check for active streams. If streams are active, defer the restart to avoid interrupting recordings or live viewing.
+    const activeStreams = getStreamCount();
+    if (activeStreams > 0) {
+        LOG.info("Configuration saved %s. Restart deferred until %d active stream(s) end.", reason, activeStreams);
+        return {
+            activeStreams,
+            deferred: true,
+            message: "Configuration saved. " + String(activeStreams) + " stream(s) are active.",
+            willRestart: true
+        };
+    }
+    // No active streams - restart immediately. Close the browser first to avoid orphan Chrome processes.
+    setTimeout(() => {
+        LOG.info("Exiting for service manager restart %s.", reason);
+        void closeBrowser().then(() => { process.exit(0); }).catch(() => { process.exit(1); });
+    }, 500);
+    return {
+        activeStreams: 0,
+        deferred: false,
+        message: "Configuration saved. Server is restarting...",
+        willRestart: true
+    };
+}
+/**
+ * Generates HTML for a text input form field with label and optional hint.
+ * @param id - The input element ID.
+ * @param name - The input name attribute.
+ * @param label - The label text.
+ * @param value - The current value.
+ * @param options - Additional options (hint, list, pattern, placeholder, required, type).
+ * @returns Array of HTML strings for the form row.
+ */
+function generateTextField(id, name, label, value, options = {}) {
+    const lines = [];
+    const inputType = options.type ?? "text";
+    const listAttr = options.list ? " list=\"" + options.list + "\"" : "";
+    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>");
+    lines.push("<input class=\"form-input\" type=\"" + inputType + "\" id=\"" + id + "\" name=\"" + name + "\"" + required + listAttr + pattern +
+        placeholder + " value=\"" + escapeHtml(value) + "\">");
+    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.
+    if (options.list) {
+        lines.push("<datalist id=\"" + options.list + "\"></datalist>");
+    }
+    if (options.hint) {
+        lines.push("<div class=\"hint\">" + options.hint + "</div>");
+    }
+    return lines;
+}
+/**
+ * Groups profiles by their declared category for UI display. Each profile declares its own category (api, keyboard, multiChannel, special) and this helper
+ * simply filters by that field. The display order (api, keyboard, special, multiChannel) is determined by the caller.
+ * @param profiles - List of available profiles with category, descriptions, and summaries.
+ * @returns Object with profiles grouped by category.
+ */
+function categorizeProfiles(profiles) {
+    return {
+        api: profiles.filter((p) => (p.category === "api")),
+        keyboard: profiles.filter((p) => (p.category === "keyboard")),
+        multiChannel: profiles.filter((p) => (p.category === "multiChannel")),
+        special: profiles.filter((p) => (p.category === "special"))
+    };
+}
+/**
+ * Generates HTML for the profile dropdown field with descriptions as tooltips and summaries inline.
+ * @param id - The select element ID.
+ * @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.
+ * @returns Array of HTML strings for the form row.
+ */
+function generateProfileDropdown(id, selectedProfile, profiles, showHint = true) {
+    const lines = [];
+    const groups = categorizeProfiles(profiles);
+    // Helper to generate option elements for a profile.
+    const renderOption = (profile) => {
+        const selected = (profile.name === selectedProfile) ? " selected" : "";
+        const title = profile.description ? " title=\"" + escapeHtml(profile.description) + "\"" : "";
+        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("<option value=\"\">Autodetect (Recommended)</option>");
+    // Fullscreen API profiles (most common).
+    if (groups.api.length > 0) {
+        lines.push("<optgroup label=\"Fullscreen API\">");
+        for (const profile of groups.api) {
+            lines.push(renderOption(profile));
+        }
+        lines.push("</optgroup>");
+    }
+    // Keyboard fullscreen profiles.
+    if (groups.keyboard.length > 0) {
+        lines.push("<optgroup label=\"Keyboard Fullscreen\">");
+        for (const profile of groups.keyboard) {
+            lines.push(renderOption(profile));
+        }
+        lines.push("</optgroup>");
+    }
+    // Special profiles.
+    if (groups.special.length > 0) {
+        lines.push("<optgroup label=\"Special\">");
+        for (const profile of groups.special) {
+            lines.push(renderOption(profile));
+        }
+        lines.push("</optgroup>");
+    }
+    // Multi-channel profiles (at the end).
+    if (groups.multiChannel.length > 0) {
+        lines.push("<optgroup label=\"Multi-Channel (needs selector)\">");
+        for (const profile of groups.multiChannel) {
+            lines.push(renderOption(profile));
+        }
+        lines.push("</optgroup>");
+    }
+    lines.push("</select>");
+    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, " +
+            "try experimenting with different profiles. ");
+        lines.push("<a href=\"#\" onclick=\"toggleProfileReference(); return false;\">View profile reference</a></div>");
+    }
+    return lines;
+}
+/**
+ * Generates HTML for the profile reference section. This collapsible section provides detailed documentation for all available profiles, grouped by category to
+ * help users understand which profile to select for their site.
+ * @param profiles - List of available profiles with descriptions and summaries.
+ * @returns HTML string for the profile reference section.
+ */
+function generateProfileReference(profiles) {
+    const lines = [];
+    const groups = categorizeProfiles(profiles);
+    lines.push("<div id=\"profile-reference\" class=\"profile-reference\" style=\"display: none;\">");
+    lines.push("<div class=\"profile-reference-header\">");
+    lines.push("<h3>Profile Reference</h3>");
+    lines.push("<a href=\"#\" class=\"profile-reference-close\" onclick=\"toggleProfileReference(); return false;\">\u2715</a>");
+    lines.push("</div>");
+    lines.push("<p class=\"reference-intro\">Profiles configure how PrismCast interacts with different video players. Autodetect uses predefined ");
+    lines.push("profiles for known sites. If video doesn't play or fullscreen fails, use this reference to experiment with different profiles.</p>");
+    // Fullscreen API profiles (most common).
+    if (groups.api.length > 0) {
+        lines.push("<div class=\"profile-category\">");
+        lines.push("<h4>Fullscreen API Profiles</h4>");
+        lines.push("<p class=\"category-desc\">For single-channel sites that require JavaScript's requestFullscreen() API instead of keyboard shortcuts.</p>");
+        lines.push("<dl class=\"profile-list\">");
+        for (const profile of groups.api) {
+            lines.push("<dt>" + escapeHtml(profile.name) + "</dt>");
+            lines.push("<dd>" + escapeHtml(profile.description) + "</dd>");
+        }
+        lines.push("</dl>");
+        lines.push("</div>");
+    }
+    // Keyboard fullscreen profiles.
+    if (groups.keyboard.length > 0) {
+        lines.push("<div class=\"profile-category\">");
+        lines.push("<h4>Keyboard Fullscreen Profiles</h4>");
+        lines.push("<p class=\"category-desc\">For single-channel sites that use the 'f' key to toggle fullscreen mode.</p>");
+        lines.push("<dl class=\"profile-list\">");
+        for (const profile of groups.keyboard) {
+            lines.push("<dt>" + escapeHtml(profile.name) + "</dt>");
+            lines.push("<dd>" + escapeHtml(profile.description) + "</dd>");
+        }
+        lines.push("</dl>");
+        lines.push("</div>");
+    }
+    // Special profiles.
+    if (groups.special.length > 0) {
+        lines.push("<div class=\"profile-category\">");
+        lines.push("<h4>Special Profiles</h4>");
+        lines.push("<p class=\"category-desc\">For non-standard use cases like static pages without video.</p>");
+        lines.push("<dl class=\"profile-list\">");
+        for (const profile of groups.special) {
+            lines.push("<dt>" + escapeHtml(profile.name) + "</dt>");
+            lines.push("<dd>" + escapeHtml(profile.description) + "</dd>");
+        }
+        lines.push("</dl>");
+        lines.push("</div>");
+    }
+    // Multi-channel profiles (requires channel selector) - at the end since these are more advanced.
+    if (groups.multiChannel.length > 0) {
+        lines.push("<div class=\"profile-category\">");
+        lines.push("<h4>Multi-Channel Profiles</h4>");
+        lines.push("<p class=\"category-desc\">For sites that host multiple live channels on a single page. These profiles require a channel selector ");
+        lines.push("to identify which channel to tune to. Set the Channel Selector field in Advanced Options when using these profiles.</p>");
+        lines.push("<dl class=\"profile-list\">");
+        for (const profile of groups.multiChannel) {
+            lines.push("<dt>" + escapeHtml(profile.name) + "</dt>");
+            lines.push("<dd>" + escapeHtml(profile.description) + "</dd>");
+        }
+        lines.push("</dl>");
+        // Per-strategy guidance for finding Channel Selector values. Organized by strategy type since the same strategy can be used across multiple profiles.
+        lines.push("<h4 class=\"selector-guide-heading\">Finding Your Channel Selector</h4>");
+        lines.push("<p class=\"category-desc\">Predefined channels already have Channel Selector values set. For custom channels, the value depends on the ");
+        lines.push("profile's strategy type:</p>");
+        lines.push("<dl class=\"profile-list\">");
+        lines.push("<dt>apiMultiVideo, keyboardDynamicMultiVideo (image URL)</dt>");
+        lines.push("<dd>Right-click the channel's image on the site \u2192 Inspect Element \u2192 find the &lt;img&gt; tag \u2192 copy a unique portion ");
+        lines.push("of the <code>src</code> URL that identifies the channel (e.g., \"espn\" from a URL containing \"poster_linear_espn_none\").</dd>");
+        lines.push("<dt>foxLive (station code)</dt>");
+        lines.push("<dd>Inspect a channel logo in the guide \u2192 find the <code>&lt;button&gt;</code> inside <code>GuideChannelLogo</code> \u2192 use ");
+        lines.push("the <code>title</code> attribute value (e.g., BTN, FOXD2C, FS1, FS2, FWX).</dd>");
+        lines.push("<dt>hboMax (channel name)</dt>");
+        lines.push("<dd>Inspect a channel tile in the HBO rail \u2192 find the <code>&lt;p aria-hidden=\"true\"&gt;</code> element \u2192 use the text ");
+        lines.push("content (e.g., HBO, HBO Comedy, HBO Drama, HBO Hits, HBO Movies).</dd>");
+        lines.push("<dt>huluLive (channel name)</dt>");
+        lines.push("<dd>Inspect a channel entry in the guide \u2192 find the <code>data-testid</code> attribute starting with ");
+        lines.push("<code>live-guide-channel-kyber-</code> \u2192 use the portion after that prefix. The name may differ from the logo shown ");
+        lines.push("(e.g., the full name rather than an abbreviation). For local affiliates (ABC, CBS, FOX, NBC), use the network name \u2014 PrismCast ");
+        lines.push("resolves the local station automatically.</dd>");
+        lines.push("<dt>slingLive (channel name)</dt>");
+        lines.push("<dd>Inspect a channel entry in the guide \u2192 find the <code>data-testid</code> attribute starting with <code>channel-</code> ");
+        lines.push("\u2192 use the portion after that prefix. The name may differ from the logo shown (e.g., \"FOX Sports 1\" not \"FS1\"). For local ");
+        lines.push("affiliates (ABC, CBS, FOX, NBC), use the network name \u2014 PrismCast resolves the local station automatically.</dd>");
+        lines.push("<dt>youtubeTV (channel name)</dt>");
+        lines.push("<dd>Inspect a channel thumbnail in the guide \u2192 find the <code>aria-label</code> attribute on the ");
+        lines.push("<code>ytu-endpoint</code> element \u2192 use the name after \"watch \" (e.g., <code>aria-label=\"watch CNN\"</code> \u2192 CNN). ");
+        lines.push("For locals, use the network name (e.g., NBC) \u2014 affiliates like \"NBC 5\" are resolved automatically. PBS resolves to the ");
+        lines.push("local affiliate in major markets.</dd>");
+        lines.push("</dl>");
+        lines.push("</div>");
+    }
+    lines.push("</div>");
+    return lines.join("\n");
+}
+/**
+ * Generates HTML for the advanced fields section (station ID, channel selector, and channel number).
+ * @param idPrefix - Prefix for element IDs ("add" or "edit").
+ * @param stationIdValue - Current station ID value.
+ * @param channelSelectorValue - Current channel selector value.
+ * @param channelNumberValue - Current channel number value.
+ * @param showHints - Whether to show hint text.
+ * @returns Array of HTML strings for the advanced fields section.
+ */
+function generateAdvancedFields(idPrefix, stationIdValue, channelSelectorValue, channelNumberValue, showHints = true) {
+    const lines = [];
+    // Advanced fields toggle.
+    lines.push("<div class=\"advanced-toggle\" onclick=\"document.getElementById('" + idPrefix +
+        "-advanced').classList.toggle('show'); this.textContent = this.textContent === 'Show Advanced Options' ? " +
+        "'Hide Advanced Options' : 'Show Advanced Options';\">Show Advanced Options</div>");
+    lines.push("<div 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.
+    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. " +
+            "For guide-based profiles (Fox, HBO Max, Hulu, Sling, YouTube TV), use the channel name or station code from the guide. " +
+            "For image-based profiles, right-click a channel image \u2192 Inspect \u2192 copy a unique 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 }));
+    // Channel number for HDHomeRun/Plex integration.
+    const channelNumberHint = showHints ?
+        "Optional numeric channel number for Plex guide matching when HDHomeRun emulation is enabled. Leave empty for auto-assignment." :
+        undefined;
+    lines.push(...generateTextField(idPrefix + "-channelNumber", "channelNumber", "Channel Number", channelNumberValue, { hint: channelNumberHint, placeholder: showHints ? "e.g., 501" : undefined }));
+    lines.push("</div>"); // End advanced fields.
+    return lines;
+}
+/**
+ * Generates a JavaScript object literal mapping URL hostnames to known channel selector values from predefined channels. This data is embedded as a `<script>` block
+ * in the channels panel so the client-side datalist can offer suggestions based on the URL the user enters.
+ *
+ * @returns A JavaScript variable declaration string ready to embed in a `<script>` tag.
+ */
+function generateChannelSelectorData() {
+    const byDomain = {};
+    for (const channel of Object.values(PREDEFINED_CHANNELS)) {
+        if (!channel.channelSelector) {
+            continue;
+        }
+        const hostname = new URL(channel.url).hostname;
+        byDomain[hostname] ??= [];
+        byDomain[hostname].push({ label: channel.name ?? channel.channelSelector, value: channel.channelSelector });
+    }
+    // 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) + ";";
+}
+/**
+ * Generates the HTML for a single channel's table rows (display row and optional edit form row).
+ * @param key - The channel key.
+ * @param profiles - List of available profiles with descriptions for the dropdown.
+ * @returns Object with displayRow and editRow HTML strings.
+ */
+export function generateChannelRowHtml(key, profiles) {
+    // Look up channel from user channels first (they override predefined), then predefined channels.
+    const userChannels = getUserChannels();
+    const predefinedChannels = getPredefinedChannels();
+    const channel = userChannels[key] ?? predefinedChannels[key];
+    // If channel doesn't exist, return empty rows (shouldn't happen in normal use).
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!channel) {
+        return { displayRow: "", editRow: null };
+    }
+    // Resolve the selected provider's channel data for display purposes (profile column). This ensures the profile shown reflects the currently selected provider.
+    const resolvedKey = resolveProviderKey(key);
+    const resolvedChannel = getResolvedChannel(resolvedKey);
+    const displayChannel = resolvedChannel ?? channel;
+    const isUser = isUserChannel(key);
+    const isPredefined = isPredefinedChannel(key);
+    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 displayLines = [];
+    const rowClasses = [];
+    if (isUser) {
+        rowClasses.push("user-channel");
+    }
+    if (isDisabled) {
+        rowClasses.push("channel-disabled");
+    }
+    if (!isAvailableByProvider) {
+        rowClasses.push("channel-unavailable");
+    }
+    const rowClassAttr = (rowClasses.length > 0) ? " class=\"" + rowClasses.join(" ") + "\"" : "";
+    displayLines.push("<tr id=\"display-row-" + escapeHtml(key) + "\"" + rowClassAttr + " data-provider-tags=\"" + escapeHtml(providerTags) + "\">");
+    displayLines.push("<td><code>" + escapeHtml(key) + "</code></td>");
+    displayLines.push("<td>" + escapeHtml(channel.name ?? key) + "</td>");
+    // Source 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>");
+    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()
+        // to remove them from the DOM.
+        const currentSelection = getProviderSelection(key) ?? key;
+        displayLines.push("<select class=\"provider-select\" data-channel=\"" + escapeHtml(key) + "\" onchange=\"updateProviderSelection(this)\"" +
+            contentHidden + ">");
+        for (const variant of providerGroup.variants) {
+            const selected = (variant.key === currentSelection) ? " selected" : "";
+            const tag = getProviderTagForChannel(variant.key);
+            const optionHidden = !isProviderTagEnabled(tag) ? " hidden" : "";
+            displayLines.push("<option value=\"" + escapeHtml(variant.key) + "\" data-provider-tag=\"" + escapeHtml(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.
+        displayLines.push("<span class=\"provider-name\"" + contentHidden + ">" +
+            escapeHtml(channel.provider ?? getProviderDisplayName(channel.url)) + "</span>");
+    }
+    displayLines.push("</td>");
+    displayLines.push("<td>" + (displayChannel.profile ? escapeHtml(displayChannel.profile) : "<em>auto</em>") + "</td>");
+    // Actions column.
+    displayLines.push("<td>");
+    displayLines.push("<div class=\"btn-group\">");
+    // Login button appears for enabled channels only.
+    if (!isDisabled) {
+        displayLines.push("<button type=\"button\" class=\"btn btn-secondary btn-sm\" onclick=\"startChannelLogin('" + escapeHtml(key) + "')\">Login</button>");
+    }
+    if (isUser) {
+        // User channels: Edit/Delete buttons.
+        displayLines.push("<button type=\"button\" class=\"btn btn-edit btn-sm\" onclick=\"showEditForm('" + escapeHtml(key) + "')\">Edit</button>");
+        displayLines.push("<button type=\"button\" class=\"btn btn-delete btn-sm\" onclick=\"deleteChannel('" + escapeHtml(key) + "')\">Delete</button>");
+    }
+    else if (isPredefined) {
+        // Predefined channels: Enable/Disable button.
+        if (isDisabled) {
+            displayLines.push("<button type=\"button\" class=\"btn btn-enable btn-sm\" onclick=\"togglePredefinedChannel('" + escapeHtml(key) +
+                "', true)\">Enable</button>");
+        }
+        else {
+            displayLines.push("<button type=\"button\" class=\"btn btn-disable btn-sm\" onclick=\"togglePredefinedChannel('" + escapeHtml(key) +
+                "', false)\">Disable</button>");
+        }
+    }
+    displayLines.push("</div>");
+    displayLines.push("</td>");
+    displayLines.push("</tr>");
+    const displayRow = displayLines.join("\n");
+    // Generate edit form row for user channels.
+    let editRow = null;
+    if (isUser) {
+        const editLines = [];
+        editLines.push("<tr id=\"edit-row-" + escapeHtml(key) + "\" style=\"display: none;\">");
+        editLines.push("<td colspan=\"5\">");
+        editLines.push("<div class=\"channel-form\" style=\"margin: 0;\">");
+        editLines.push("<h3>Edit Channel: " + escapeHtml(key) + "</h3>");
+        editLines.push("<form id=\"edit-channel-form-" + escapeHtml(key) + "\" onsubmit=\"return submitChannelForm(event, 'edit')\">");
+        editLines.push("<input type=\"hidden\" name=\"action\" value=\"edit\">");
+        editLines.push("<input type=\"hidden\" name=\"key\" value=\"" + escapeHtml(key) + "\">");
+        // Channel name.
+        editLines.push(...generateTextField("edit-name-" + key, "name", "Display Name", channel.name ?? key, {
+            hint: "Friendly name shown in the playlist and UI.",
+            required: true
+        }));
+        // Channel URL.
+        editLines.push(...generateTextField("edit-url-" + key, "url", "Stream URL", channel.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));
+        // Advanced fields.
+        editLines.push(...generateAdvancedFields("edit-" + key, channel.stationId ?? "", channel.channelSelector ?? "", channel.channelNumber ? String(channel.channelNumber) : ""));
+        // Form buttons.
+        editLines.push("<div class=\"form-buttons\">");
+        editLines.push("<button type=\"submit\" class=\"btn btn-primary\">Save Changes</button>");
+        editLines.push("<button type=\"button\" class=\"btn btn-secondary\" onclick=\"hideEditForm('" + escapeHtml(key) + "')\">Cancel</button>");
+        editLines.push("</div>");
+        editLines.push("</form>");
+        editLines.push("</div>");
+        editLines.push("</td>");
+        editLines.push("</tr>");
+        editRow = editLines.join("\n");
+    }
+    return { displayRow, editRow };
+}
+/**
+ * Formats a value for display, converting numbers to human-readable strings where appropriate.
+ * @param value - The value to format.
+ * @returns Formatted string for display.
+ */
+function formatValueForDisplay(value, settingType) {
+    if ((value === null) || (value === undefined)) {
+        return "";
+    }
+    if (typeof value === "number") {
+        // Format large numbers with commas for readability, except for port numbers where commas would be confusing.
+        if ((value >= 1000) && (settingType !== "port")) {
+            return value.toLocaleString();
+        }
+        return String(value);
+    }
+    if (typeof value === "string") {
+        return value;
+    }
+    // Config values are always primitives (string, number, boolean). Numbers and strings are handled above.
+    return String(value);
+}
+/**
+ * Converts a stored value to a display value using the setting's displayDivisor.
+ * @param value - The stored value.
+ * @param setting - The setting metadata.
+ * @returns The display value.
+ */
+function toDisplayValue(value, setting) {
+    if ((value === null) || (value === undefined)) {
+        return null;
+    }
+    if ((typeof value === "number") && setting.displayDivisor) {
+        const displayValue = value / setting.displayDivisor;
+        // Determine precision: explicit displayPrecision, or 2 for floats, or 1 for integers with displayDivisor (to handle values like 1500ms → 1.5s).
+        const precision = setting.displayPrecision ?? ((setting.type === "float") ? 2 : 1);
+        return Number(displayValue.toFixed(precision));
+    }
+    // Boolean values pass through as strings for display.
+    if (typeof value === "boolean") {
+        return String(value);
+    }
+    return value;
+}
+/**
+ * Gets the effective unit to display for a setting.
+ * @param setting - The setting metadata.
+ * @returns The unit string to display.
+ */
+function getDisplayUnit(setting) {
+    return setting.displayUnit ?? setting.unit;
+}
+/**
+ * Mapping of units that require pluralization to their singular and plural forms. Abbreviations like "ms", "kbps", "fps" do not need pluralization and are not
+ * included here. Uses Partial<Record> to indicate that not all string keys have values.
+ */
+const UNIT_PLURALIZATION = {
+    minutes: { plural: "minutes", singular: "minute" },
+    seconds: { plural: "seconds", singular: "second" }
+};
+/**
+ * Formats a unit string with correct pluralization based on the value. Returns singular form when value is 1, plural otherwise. Units not in the pluralization
+ * mapping (abbreviations) pass through unchanged.
+ * @param value - The numeric value to check for pluralization.
+ * @param unit - The unit string to format.
+ * @returns The correctly pluralized unit string.
+ */
+function formatUnitForValue(value, unit) {
+    const forms = UNIT_PLURALIZATION[unit];
+    if (!forms) {
+        return unit;
+    }
+    return (value === 1) ? forms.singular : forms.plural;
+}
+/**
+ * Gets the effective min value for display (converted if displayDivisor is set).
+ * @param setting - The setting metadata.
+ * @returns The min value for the input field.
+ */
+function getDisplayMin(setting) {
+    if ((setting.min === undefined) || !setting.displayDivisor) {
+        return setting.min;
+    }
+    return setting.min / setting.displayDivisor;
+}
+/**
+ * Gets the effective max value for display (converted if displayDivisor is set).
+ * @param setting - The setting metadata.
+ * @returns The max value for the input field.
+ */
+function getDisplayMax(setting) {
+    if ((setting.max === undefined) || !setting.displayDivisor) {
+        return setting.max;
+    }
+    return setting.max / setting.displayDivisor;
+}
+/**
+ * Determines the appropriate width class for a form field (input or select) based on the setting type, constraints, and displayed value range. Width is proportional
+ * to the actual displayed content rather than raw stored values, accounting for displayDivisor conversion.
+ * @param setting - The setting metadata.
+ * @returns CSS class name for field width (field-narrow, field-medium, or field-wide).
+ */
+function getFieldWidthClass(setting) {
+    // Ports always get narrow (max 5 digits: 65535).
+    if (setting.type === "port") {
+        return "field-narrow";
+    }
+    // For selects (settings with validValues), determine width based on content.
+    if (setting.validValues && (setting.validValues.length > 0)) {
+        // Quality preset dropdown needs wide width because it displays dynamic degradation text like "1080p (limited to 720p High)" which is much longer than the
+        // static validValues entries.
+        if (setting.path === "streaming.qualityPreset") {
+            return "field-wide";
+        }
+        const maxLength = Math.max(...setting.validValues.map((v) => v.length));
+        // Short options (e.g., "none", "all", "errors") get narrow width.
+        if (maxLength <= 8) {
+            return "field-narrow";
+        }
+        // Medium options (e.g., "filtered") get medium width.
+        if (maxLength <= 12) {
+            return "field-medium";
+        }
+        // Long options get wide width.
+        return "field-wide";
+    }
+    // For numeric types, calculate displayed digit count to determine width.
+    if ((setting.type === "integer") || (setting.type === "float")) {
+        // Calculate the displayed max value, accounting for displayDivisor conversion.
+        let displayMax = setting.max;
+        if ((displayMax !== undefined) && setting.displayDivisor) {
+            displayMax = displayMax / setting.displayDivisor;
+        }
+        // If no max is defined, default to medium width as a safe middle ground.
+        if (displayMax === undefined) {
+            return "field-medium";
+        }
+        // Count digits needed for the displayed max value. For floats, add characters for decimal point and fractional digits.
+        let digitCount = Math.max(1, Math.floor(Math.log10(Math.abs(displayMax))) + 1);
+        if (setting.type === "float") {
+            digitCount = digitCount + 3;
+        }
+        // 1-4 digits get narrow (e.g., port, small counts, converted timeouts like "30" seconds).
+        if (digitCount <= 4) {
+            return "field-narrow";
+        }
+        // 5-7 digits get medium (e.g., larger bitrates).
+        if (digitCount <= 7) {
+            return "field-medium";
+        }
+        // 8+ digits get wide.
+        return "field-wide";
+    }
+    // Hosts and paths get wide width. Hosts can be IP addresses like "192.168.100.100" (15 chars) or hostnames.
+    if ((setting.type === "host") || (setting.type === "path")) {
+        return "field-wide";
+    }
+    // Generic strings get wide width.
+    return "field-wide";
+}
+/**
+ * Generates HTML for a single setting form field. Supports text inputs, number inputs, and select dropdowns based on the setting type and validValues.
+ * @param setting - The setting metadata.
+ * @param currentValue - The current effective value (in storage units).
+ * @param defaultValue - The default value (in storage units).
+ * @param envOverride - The environment variable value if overridden, undefined otherwise.
+ * @param validationError - Validation error message if any.
+ * @returns HTML string for the form field.
+ */
+function generateSettingField(setting, currentValue, defaultValue, envOverride, validationError) {
+    const isDisabled = (envOverride !== undefined) || (setting.disabledReason !== undefined);
+    const inputId = setting.path.replace(/\./g, "-");
+    const hasError = validationError !== undefined;
+    const isModified = !isDisabled && !isEqualToDefault(currentValue, defaultValue);
+    // Convert values for display.
+    const displayValue = toDisplayValue(currentValue, setting);
+    const displayDefault = toDisplayValue(defaultValue, setting);
+    const displayUnit = getDisplayUnit(setting);
+    const displayMin = getDisplayMin(setting);
+    const displayMax = getDisplayMax(setting);
+    // Determine if this should be a select dropdown.
+    const hasValidValues = setting.validValues && (setting.validValues.length > 0);
+    // Check if this setting depends on a boolean toggle that is currently disabled. The depends-disabled class applies a visual grey-out without actually
+    // disabling the inputs, so values are still submitted during save.
+    const dependsOnId = setting.dependsOn ? setting.dependsOn.replace(/\./g, "-") : undefined;
+    const isDependencyDisabled = setting.dependsOn ? !getNestedValue(CONFIG, setting.dependsOn) : false;
+    // Build CSS classes for the form group.
+    const groupClasses = ["form-group"];
+    if (isDisabled) {
+        groupClasses.push("disabled");
+    }
+    if (isModified) {
+        groupClasses.push("modified");
+    }
+    if (isDependencyDisabled) {
+        groupClasses.push("depends-disabled");
+    }
+    // Build the opening div with optional data-depends-on attribute for client-side toggle behavior.
+    const dependsAttr = dependsOnId ? " data-depends-on=\"" + dependsOnId + "\"" : "";
+    const lines = [
+        "<div class=\"" + groupClasses.join(" ") + "\"" + dependsAttr + ">",
+        "<div class=\"form-row\">",
+        "<label class=\"form-label\" for=\"" + inputId + "\">"
+    ];
+    // Add modified indicator before label text.
+    if (isModified) {
+        lines.push("<span class=\"modified-dot\" title=\"Modified from default\"></span>");
+    }
+    lines.push(escapeHtml(setting.label));
+    if (envOverride !== undefined) {
+        lines.push("<span class=\"env-badge\">ENV</span>");
+    }
+    lines.push("</label>");
+    // Track if the selected preset is degraded (used for inline message).
+    let selectedPresetDegradedTo = null;
+    if (hasValidValues) {
+        // Render as select dropdown.
+        const selectAttrs = [
+            "class=\"form-select " + getFieldWidthClass(setting) + (hasError ? " error" : "") + "\"",
+            "id=\"" + inputId + "\"",
+            "name=\"" + setting.path + "\"",
+            "data-default=\"" + escapeHtml(String(displayDefault ?? "")) + "\""
+        ];
+        if (isDisabled) {
+            selectAttrs.push("disabled");
+        }
+        if (isDependencyDisabled) {
+            selectAttrs.push("tabindex=\"-1\"");
+        }
+        lines.push("<select " + selectAttrs.join(" ") + ">");
+        // Special handling for quality preset dropdown to show degradation info.
+        if (setting.path === "streaming.qualityPreset") {
+            const presetOptions = getPresetOptionsWithDegradation();
+            for (const option of presetOptions.options) {
+                const presetId = option.preset.id;
+                const isSelected = presetId === currentValue;
+                const selected = isSelected ? " selected" : "";
+                // Build the display label with degradation annotation if applicable.
+                let label = option.preset.name;
+                if (option.degradedTo) {
+                    label = label + " (limited to " + option.degradedTo.name + ")";
+                    // Track if the selected preset is degraded.
+                    if (isSelected) {
+                        selectedPresetDegradedTo = option.degradedTo.name;
+                    }
+                }
+                lines.push("<option value=\"" + escapeHtml(presetId) + "\"" + selected + ">" + escapeHtml(label) + "</option>");
+            }
+        }
+        else {
+            // Standard dropdown for non-preset fields.
+            for (const validValue of setting.validValues ?? []) {
+                // For boolean types, compare string validValue with stringified currentValue to handle boolean-to-string comparison.
+                const isSelected = (setting.type === "boolean") ?
+                    (validValue === String(currentValue)) :
+                    (validValue === currentValue);
+                const selected = isSelected ? " selected" : "";
+                lines.push("<option value=\"" + escapeHtml(validValue) + "\"" + selected + ">" + escapeHtml(validValue) + "</option>");
+            }
+        }
+        lines.push("</select>");
+    }
+    else if (setting.type === "boolean") {
+        // Render boolean as a checkbox. A hidden input with value "false" precedes the checkbox so that unchecking submits "false" rather than omitting the field
+        // entirely (which would cause the server to skip it and fall back to the default).
+        const isChecked = (currentValue === true) || (currentValue === "true");
+        const defaultStr = defaultValue ? "true" : "false";
+        lines.push("<input type=\"hidden\" name=\"" + setting.path + "\" value=\"false\">");
+        const checkboxAttrs = [
+            "class=\"form-checkbox\"",
+            "type=\"checkbox\"",
+            "id=\"" + inputId + "\"",
+            "name=\"" + setting.path + "\"",
+            "value=\"true\"",
+            "data-default=\"" + escapeHtml(defaultStr) + "\""
+        ];
+        if (isChecked) {
+            checkboxAttrs.push("checked");
+        }
+        if (isDisabled) {
+            checkboxAttrs.push("disabled");
+        }
+        if (isDependencyDisabled) {
+            checkboxAttrs.push("tabindex=\"-1\"");
+        }
+        lines.push("<input " + checkboxAttrs.join(" ") + ">");
+    }
+    else {
+        // Render as input field.
+        const inputType = (setting.type === "float") ? "number" : (((setting.type === "integer") || (setting.type === "port")) ? "number" : "text");
+        // Calculate step based on type and displayDivisor. When displayDivisor is set, step must match the storage granularity to ensure HTML5 validation passes
+        // (the check is: (value - min) % step === 0). For example, ms→seconds with divisor 1000 needs step 0.001 so any millisecond value is valid.
+        let step = "1";
+        if (setting.displayDivisor) {
+            step = String(1 / setting.displayDivisor);
+        }
+        else if (setting.type === "float") {
+            step = "0.01";
+        }
+        const inputAttrs = [
+            "class=\"form-input " + getFieldWidthClass(setting) + (hasError ? " error" : "") + "\"",
+            "type=\"" + inputType + "\"",
+            "id=\"" + inputId + "\"",
+            "name=\"" + setting.path + "\"",
+            "data-default=\"" + escapeHtml(String(displayDefault ?? "")) + "\""
+        ];
+        // Add value.
+        if (displayValue !== null) {
+            inputAttrs.push("value=\"" + escapeHtml(String(displayValue)) + "\"");
+        }
+        // Add step for numbers.
+        if (inputType === "number") {
+            inputAttrs.push("step=\"" + step + "\"");
+        }
+        // Add min/max if specified (using display values).
+        if (displayMin !== undefined) {
+            inputAttrs.push("min=\"" + String(displayMin) + "\"");
+        }
+        if (displayMax !== undefined) {
+            inputAttrs.push("max=\"" + String(displayMax) + "\"");
+        }
+        // Disable if overridden by env var.
+        if (isDisabled) {
+            inputAttrs.push("disabled");
+        }
+        if (isDependencyDisabled) {
+            inputAttrs.push("tabindex=\"-1\"");
+        }
+        lines.push("<input " + inputAttrs.join(" ") + ">");
+    }
+    // Add unit label if present.
+    if (displayUnit) {
+        lines.push("<span class=\"form-unit\">" + escapeHtml(displayUnit) + "</span>");
+    }
+    // Add reset button for modified settings.
+    if (isModified) {
+        lines.push("<button type=\"button\" class=\"btn-reset\" onclick=\"resetSetting('" + escapeHtml(setting.path) +
+            "')\" title=\"Reset to default\">&#8635;</button>");
+    }
+    lines.push("</div>");
+    // Add description.
+    lines.push("<div class=\"form-description\">" + escapeHtml(setting.description) + "</div>");
+    // Add disabled reason warning when a setting is locked out due to an upstream issue.
+    if (setting.disabledReason) {
+        lines.push("<div class=\"form-warning\">" + escapeHtml(setting.disabledReason) + "</div>");
+    }
+    // Add inline message for degraded preset.
+    if (selectedPresetDegradedTo) {
+        lines.push("<div class=\"form-warning\">Your display cannot support this resolution. Streams will use " +
+            escapeHtml(selectedPresetDegradedTo) + " instead.</div>");
+    }
+    // Add default value hint with properly pluralized unit.
+    let defaultDisplay;
+    if (displayDefault === null) {
+        defaultDisplay = "autodetect";
+    }
+    else if (typeof displayDefault === "number") {
+        defaultDisplay = formatValueForDisplay(displayDefault, setting.type);
+    }
+    else {
+        defaultDisplay = displayDefault;
+    }
+    // Format the unit with correct pluralization based on the default value.
+    let formattedUnit = "";
+    if (displayUnit && (typeof displayDefault === "number")) {
+        formattedUnit = " " + formatUnitForValue(displayDefault, displayUnit);
+    }
+    else if (displayUnit) {
+        formattedUnit = " " + displayUnit;
+    }
+    lines.push("<div class=\"form-default\">Default: " + escapeHtml(defaultDisplay) + formattedUnit + "</div>");
+    // Add env var override notice if applicable.
+    if (isDisabled && setting.envVar && envOverride) {
+        lines.push("<div class=\"form-env\">Overridden by environment variable: <code>" + escapeHtml(setting.envVar) + "=" +
+            escapeHtml(envOverride) + "</code></div>");
+    }
+    // Add validation error if present.
+    if (hasError) {
+        lines.push("<div class=\"form-error\">" + escapeHtml(validationError) + "</div>");
+    }
+    lines.push("</div>");
+    return lines.join("\n");
+}
+/**
+ * Validates a single setting value (in storage units, after conversion from display units).
+ * @param setting - The setting metadata.
+ * @param value - The value to validate (in storage units).
+ * @returns Validation error message if invalid, undefined if valid.
+ */
+function validateSettingValue(setting, value) {
+    // Allow empty string for path type (means null/autodetect).
+    if ((setting.type === "path") && ((value === "") || (value === null))) {
+        return undefined;
+    }
+    // Validate string type with validValues.
+    if ((setting.type === "string") && setting.validValues && (setting.validValues.length > 0)) {
+        if (!setting.validValues.includes(value)) {
+            return setting.label + " must be one of: " + setting.validValues.join(", ");
+        }
+        return undefined;
+    }
+    // Validate based on type.
+    switch (setting.type) {
+        case "boolean": {
+            // After parseFormValue, value should be a boolean. No additional validation needed since the dropdown constrains input.
+            return undefined;
+        }
+        case "integer":
+        case "port": {
+            const numValue = Number(value);
+            const error = validatePositiveInt(setting.label, numValue, setting.min, setting.max);
+            return error ?? undefined;
+        }
+        case "float": {
+            const numValue = Number(value);
+            const error = validatePositiveNumber(setting.label, numValue, setting.min, setting.max);
+            return error ?? undefined;
+        }
+        case "host": {
+            if ((typeof value !== "string") || (value.trim() === "")) {
+                return setting.label + " must be a non-empty string";
+            }
+            return undefined;
+        }
+        case "path": {
+            // Path can be any string or empty.
+            return undefined;
+        }
+        case "string": {
+            // String without validValues - no validation needed.
+            return undefined;
+        }
+        default: {
+            return undefined;
+        }
+    }
+}
+/**
+ * Parses a form value into the appropriate type for a setting, converting from display units to storage units if necessary.
+ * @param setting - The setting metadata.
+ * @param value - The raw string value from the form (in display units).
+ * @returns The parsed value (in storage units).
+ */
+function parseFormValue(setting, value) {
+    // Handle empty values for path type.
+    if ((setting.type === "path") && (value.trim() === "")) {
+        return null;
+    }
+    switch (setting.type) {
+        case "boolean": {
+            // Convert string "true" to boolean true, anything else to false.
+            return value === "true";
+        }
+        case "integer":
+        case "port": {
+            const displayValue = parseFloat(value);
+            // Convert from display units to storage units if displayDivisor is set.
+            if (setting.displayDivisor) {
+                return Math.round(displayValue * setting.displayDivisor);
+            }
+            return parseInt(value, 10);
+        }
+        case "float": {
+            const displayValue = parseFloat(value);
+            // Convert from display units to storage units if displayDivisor is set.
+            if (setting.displayDivisor) {
+                return displayValue * setting.displayDivisor;
+            }
+            return displayValue;
+        }
+        case "host":
+        case "path":
+        case "string": {
+            return value;
+        }
+        default: {
+            return value;
+        }
+    }
+}
+/**
+ * Generates the provider filter toolbar HTML with a multi-select dropdown, dismissable chips, and a bulk-assign dropdown.
+ * @returns HTML string for the provider filter toolbar.
+ */
+export function generateProviderFilterToolbar() {
+    const allTags = getAllProviderTags();
+    const enabled = getEnabledProviders();
+    const hasFilter = enabled.length > 0;
+    const lines = [];
+    lines.push("<div class=\"provider-toolbar\">");
+    // Left group: Provider filter dropdown and chips.
+    lines.push("<div class=\"toolbar-group\">");
+    lines.push("<span class=\"toolbar-label\">Providers:</span>");
+    lines.push("<div class=\"dropdown provider-dropdown\">");
+    const buttonText = hasFilter ? "Filtered" : "All Providers";
+    lines.push("<button type=\"button\" class=\"btn btn-sm\" id=\"provider-filter-btn\" onclick=\"toggleDropdown(this)\">" + buttonText + " &#9662;</button>");
+    lines.push("<div class=\"dropdown-menu provider-dropdown-menu\">");
+    for (const tagInfo of allTags) {
+        const isDirectTag = tagInfo.tag === "direct";
+        const isChecked = isDirectTag || !hasFilter || enabled.includes(tagInfo.tag);
+        const checkedAttr = isChecked ? " checked" : "";
+        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)\"> " + escapeHtml(tagInfo.displayName));
+        lines.push("</label>");
+    }
+    lines.push("</div>");
+    lines.push("</div>");
+    // Chips container for active filter tags.
+    lines.push("<div class=\"provider-chips\" id=\"provider-chips\">");
+    if (hasFilter) {
+        for (const tag of enabled) {
+            if (tag === "direct") {
+                continue;
+            }
+            const displayName = allTags.find((t) => t.tag === tag)?.displayName ?? tag;
+            lines.push("<span class=\"provider-chip\" data-tag=\"" + escapeHtml(tag) + "\">" + escapeHtml(displayName) +
+                "<button type=\"button\" class=\"chip-close\" onclick=\"removeProviderChip('" + escapeHtml(tag) + "')\">&times;</button></span>");
+        }
+    }
+    lines.push("</div>");
+    lines.push("</div>");
+    // Spacer.
+    lines.push("<div class=\"toolbar-spacer\"></div>");
+    // Right group: Bulk assign dropdown.
+    lines.push("<div class=\"toolbar-group\">");
+    lines.push("<span class=\"toolbar-label\">Set all channels to:</span>");
+    lines.push("<select class=\"form-select bulk-assign-select\" id=\"bulk-assign\" onchange=\"bulkAssignProvider(this)\">");
+    lines.push("<option value=\"\" disabled selected>Choose provider...</option>");
+    // Render all provider options so the client-side _allOptions snapshot captures them for reinsertion when the filter 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 updateBulkAssignOptions() to remove them
+    // from the DOM.
+    for (const tagInfo of allTags) {
+        const optionHidden = (hasFilter && !enabled.includes(tagInfo.tag) && (tagInfo.tag !== "direct")) ? " hidden" : "";
+        lines.push("<option value=\"" + escapeHtml(tagInfo.tag) + "\"" + optionHidden + ">" + escapeHtml(tagInfo.displayName) + "</option>");
+    }
+    lines.push("</select>");
+    lines.push("</div>");
+    lines.push("</div>");
+    return lines.join("\n");
+}
+/**
+ * Generates the Channels panel HTML content.
+ * @param channelMessage - Optional message to display (success or error).
+ * @param channelError - If true, display as error; otherwise as success.
+ * @param editingChannelKey - If set, show the edit form for this channel.
+ * @param showAddForm - If true, show the add channel form.
+ * @param formErrors - Validation errors for the channel form.
+ * @param formValues - Form values to re-populate after validation error.
+ * @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.
+    const listing = getChannelListing();
+    const profiles = getProfiles();
+    const disabledPredefined = getDisabledPredefinedChannels();
+    const predefinedCount = Object.keys(getPredefinedChannels()).length;
+    const allDisabled = disabledPredefined.length === predefinedCount;
+    // 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;
+    const lines = [];
+    // Panel description.
+    lines.push("<div class=\"settings-panel-description\">");
+    lines.push("<p>Define and manage streaming channels for the playlist. Your custom channels are highlighted.</p>");
+    lines.push("<p class=\"description-hint\">Tip: To override a predefined channel, add a custom channel with the same key. When adding or editing a channel, ", "select a profile to see the Profile Reference with site-specific guidance for known providers.</p>");
+    lines.push("</div>");
+    // Toolbar with channel operations and display controls.
+    lines.push("<div class=\"channel-toolbar\">");
+    // Left group: channel operations. Import uses a dropdown menu to consolidate M3U and JSON import into a single button.
+    lines.push("<div class=\"toolbar-group\">");
+    lines.push("<button type=\"button\" class=\"btn btn-primary btn-sm\" id=\"add-channel-btn\" onclick=\"document.getElementById('add-channel-form')", ".style.display='block'; this.style.display='none';\">Add Channel</button>");
+    lines.push("<div class=\"dropdown\">");
+    lines.push("<button type=\"button\" class=\"btn btn-secondary btn-sm\" onclick=\"toggleDropdown(this)\">Import &#9662;</button>");
+    lines.push("<div class=\"dropdown-menu\">");
+    lines.push("<div class=\"dropdown-item\" onclick=\"closeDropdowns(); document.getElementById('import-channels-file').click()\">Channels (JSON)</div>");
+    lines.push("<div class=\"dropdown-divider\"></div>");
+    lines.push("<div class=\"dropdown-item\" onclick=\"closeDropdowns(); document.getElementById('import-m3u-file').click()\">M3U Playlist</div>");
+    lines.push("<label class=\"dropdown-option\"><input type=\"checkbox\" id=\"m3u-replace-duplicates\"> Replace duplicates</label>");
+    lines.push("</div>");
+    lines.push("</div>");
+    lines.push("<button type=\"button\" class=\"btn btn-secondary btn-sm\" onclick=\"exportChannels()\">Export</button>");
+    lines.push("<input type=\"file\" id=\"import-m3u-file\" accept=\".m3u,.m3u8\" style=\"display: none;\" onchange=\"importM3U(this)\">");
+    lines.push("</div>");
+    // Spacer.
+    lines.push("<div class=\"toolbar-spacer\"></div>");
+    // Right group: display controls.
+    lines.push("<div class=\"toolbar-group\">");
+    if (allDisabled) {
+        lines.push("<button type=\"button\" class=\"btn btn-secondary btn-sm\" id=\"bulk-toggle-btn\" ", "onclick=\"toggleAllPredefined(true)\">Enable All Predefined</button>");
+    }
+    else {
+        lines.push("<button type=\"button\" class=\"btn btn-secondary btn-sm\" id=\"bulk-toggle-btn\" ", "onclick=\"toggleAllPredefined(false)\">Disable All Predefined</button>");
+    }
+    lines.push("<label class=\"toggle-label\"><input type=\"checkbox\" id=\"show-disabled-toggle\" onchange=\"toggleDisabledVisibility()\"> ", "Show disabled (<span id=\"disabled-count\">" + String(totalHiddenCount) + "</span>)</label>");
+    lines.push("</div>");
+    lines.push("</div>");
+    // Show channels file parse error if applicable.
+    if (hasChannelsParseError()) {
+        lines.push("<div class=\"error\">");
+        lines.push("<div class=\"error-title\">Channels File Error</div>");
+        lines.push("The channels file at <code>" + escapeHtml(getUserChannelsFilePath()) + "</code> contains invalid JSON and could not be loaded. ");
+        lines.push("User channels are disabled. Fix the file manually or add a new channel to create a valid file.");
+        const parseError = getChannelsParseErrorMessage();
+        if (parseError) {
+            lines.push("<br><br>Error: <code>" + escapeHtml(parseError) + "</code>");
+        }
+        lines.push("</div>");
+    }
+    // Show channel message if present.
+    if (channelMessage) {
+        const messageClass = channelError ? "error" : "success";
+        const titleClass = channelError ? "error-title" : "success-title";
+        const title = channelError ? "Error" : "Success";
+        lines.push("<div class=\"" + messageClass + "\">");
+        lines.push("<div class=\"" + titleClass + "\">" + title + "</div>");
+        lines.push(escapeHtml(channelMessage));
+        lines.push("</div>");
+    }
+    // Show validation errors if present.
+    if (formErrors && (formErrors.size > 0)) {
+        lines.push("<div class=\"error\">");
+        lines.push("<div class=\"error-title\">Validation Errors</div>");
+        lines.push("Please correct the following errors:");
+        lines.push("<ul>");
+        for (const [field, error] of formErrors) {
+            lines.push("<li><strong>" + escapeHtml(field) + "</strong>: " + escapeHtml(error) + "</li>");
+        }
+        lines.push("</ul>");
+        lines.push("</div>");
+    }
+    // Add channel form (hidden by default unless showAddForm is true or there are form errors for a new channel).
+    const addFormVisible = (showAddForm === true) || (formErrors && formErrors.has("key") && !editingChannelKey);
+    lines.push("<div id=\"add-channel-form\" class=\"channel-form\" style=\"display: " + (addFormVisible ? "block" : "none") + ";\">");
+    lines.push("<h3>Add New Channel</h3>");
+    lines.push("<form id=\"add-channel-form-el\" onsubmit=\"return submitChannelForm(event, 'add')\">");
+    lines.push("<input type=\"hidden\" name=\"action\" value=\"add\">");
+    // 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",
+        pattern: "[a-z0-9-]+",
+        placeholder: "e.g., my-channel",
+        required: true
+    }));
+    // Channel name.
+    lines.push(...generateTextField("add-name", "name", "Display Name", formValues?.get("name") ?? "", {
+        hint: "Friendly name shown in the playlist and UI.",
+        placeholder: "e.g., My Channel",
+        required: true
+    }));
+    // Channel URL.
+    lines.push(...generateTextField("add-url", "url", "Stream URL", formValues?.get("url") ?? "", {
+        hint: "The URL of the streaming page to capture.",
+        placeholder: "https://example.com/live",
+        required: true,
+        type: "url"
+    }));
+    // Profile dropdown.
+    lines.push(...generateProfileDropdown("add-profile", formValues?.get("profile") ?? "", profiles));
+    // Advanced fields (station ID, channel selector, channel number).
+    lines.push(...generateAdvancedFields("add", formValues?.get("stationId") ?? "", formValues?.get("channelSelector") ?? "", formValues?.get("channelNumber") ?? ""));
+    // Form buttons.
+    lines.push("<div class=\"form-buttons\">");
+    lines.push("<button type=\"submit\" class=\"btn btn-primary\">Add Channel</button>");
+    lines.push("<button type=\"button\" class=\"btn btn-secondary\" onclick=\"document.getElementById('add-channel-form').style.display='none'; ", "document.getElementById('add-channel-btn').style.display='inline-block';\">Cancel</button>");
+    lines.push("</div>");
+    lines.push("</form>");
+    lines.push("</div>"); // End add-channel-form.
+    // Provider filter toolbar with multi-select dropdown, chips, and bulk assign. Placed after the add channel form so the form flows directly from its trigger button.
+    lines.push(generateProviderFilterToolbar());
+    // 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
+    // small screens.
+    lines.push("<div class=\"channel-table-wrapper\">");
+    lines.push("<table class=\"channel-table hide-disabled\">");
+    lines.push("<thead>");
+    lines.push("<tr>");
+    lines.push("<th class=\"col-key\">Key</th>");
+    lines.push("<th class=\"col-name\">Name</th>");
+    lines.push("<th class=\"col-source\">Source</th>");
+    lines.push("<th class=\"col-profile\">Profile</th>");
+    lines.push("<th class=\"col-actions\">Actions</th>");
+    lines.push("</tr>");
+    lines.push("</thead>");
+    lines.push("<tbody>");
+    // Generate rows for all channels using the shared row generator.
+    for (const entry of listing) {
+        const rowHtml = generateChannelRowHtml(entry.key, profiles);
+        lines.push(rowHtml.displayRow);
+        if (rowHtml.editRow) {
+            lines.push(rowHtml.editRow);
+        }
+    }
+    lines.push("</tbody>");
+    lines.push("</table>");
+    lines.push("</div>");
+    // 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>");
+    return lines.join("\n");
+}
+/**
+ * Generates the content for the Settings tab with non-collapsible section headers.
+ * @param validationErrors - Map of setting path to validation error message.
+ * @param formValues - Map of setting path to submitted form value.
+ * @returns HTML string for the Settings tab content.
+ */
+export function generateSettingsTabContent(validationErrors, formValues) {
+    const sections = getSettingsTabSections();
+    const tabs = getUITabs();
+    const settingsTab = tabs.find((t) => t.id === "settings");
+    const defaults = getDefaults();
+    const envOverrides = getEnvOverrides();
+    const lines = [];
+    // Panel header with description and reset button.
+    lines.push("<div class=\"panel-header\">");
+    lines.push("<p class=\"settings-panel-description\">" + escapeHtml(settingsTab?.description ?? "Configure common options.") + "</p>");
+    lines.push("<a href=\"#\" class=\"panel-reset\" onclick=\"resetTabToDefaults('settings'); return false;\">Reset to Defaults</a>");
+    lines.push("</div>");
+    // Generate each section with a header.
+    for (const section of sections) {
+        lines.push("<div class=\"settings-section\">");
+        lines.push("<div class=\"settings-section-header\">" + escapeHtml(section.displayName) + "</div>");
+        // Generate setting fields for this section.
+        for (const setting of section.settings) {
+            const currentValue = formValues?.get(setting.path) ?? getNestedValue(CONFIG, setting.path);
+            const defaultValue = getNestedValue(defaults, setting.path);
+            const envOverride = envOverrides.get(setting.path);
+            const validationError = validationErrors?.get(setting.path);
+            lines.push(generateSettingField(setting, currentValue, defaultValue, envOverride, validationError));
+        }
+        lines.push("</div>");
+    }
+    return lines.join("\n");
+}
+/**
+ * Generates the content for a collapsible section within the Advanced tab.
+ * @param section - The section definition.
+ * @param validationErrors - Map of setting path to validation error message.
+ * @param formValues - Map of setting path to submitted form value.
+ * @returns HTML string for the section.
+ */
+export function generateCollapsibleSection(section, validationErrors, formValues) {
+    const defaults = getDefaults();
+    const envOverrides = getEnvOverrides();
+    const lines = [];
+    const settingCount = section.settings.length;
+    // Section container.
+    lines.push("<div class=\"advanced-section\" data-section=\"" + escapeHtml(section.id) + "\">");
+    // Section header with chevron, title, and count.
+    lines.push("<div class=\"section-header\" onclick=\"toggleSection('" + escapeHtml(section.id) + "')\">");
+    lines.push("<span class=\"section-chevron\">&#9654;</span>");
+    lines.push("<span class=\"section-title\">" + escapeHtml(section.displayName) + "</span>");
+    lines.push("<span class=\"section-count\">(" + String(settingCount) + " setting" + (settingCount === 1 ? "" : "s") + ")</span>");
+    lines.push("</div>");
+    // Section content (collapsed by default).
+    lines.push("<div class=\"section-content\">");
+    // Generate setting fields for this section.
+    for (const setting of section.settings) {
+        const currentValue = formValues?.get(setting.path) ?? getNestedValue(CONFIG, setting.path);
+        const defaultValue = getNestedValue(defaults, setting.path);
+        const envOverride = envOverrides.get(setting.path);
+        const validationError = validationErrors?.get(setting.path);
+        lines.push(generateSettingField(setting, currentValue, defaultValue, envOverride, validationError));
+    }
+    lines.push("</div>"); // End section-content.
+    lines.push("</div>"); // End advanced-section.
+    return lines.join("\n");
+}
+/**
+ * Generates the content for the Advanced tab with collapsible sections.
+ * @param validationErrors - Map of setting path to validation error message.
+ * @param formValues - Map of setting path to submitted form value.
+ * @returns HTML string for the Advanced tab content.
+ */
+export function generateAdvancedTabContent(validationErrors, formValues) {
+    const sections = getAdvancedSections();
+    const tabs = getUITabs();
+    const advancedTab = tabs.find((t) => t.id === "advanced");
+    const lines = [];
+    // Panel header with description and reset button.
+    lines.push("<div class=\"panel-header\">");
+    lines.push("<p class=\"settings-panel-description\">" + escapeHtml(advancedTab?.description ?? "Expert tuning options.") + "</p>");
+    lines.push("<a href=\"#\" class=\"panel-reset\" onclick=\"resetTabToDefaults('advanced'); return false;\">Reset All to Defaults</a>");
+    lines.push("</div>");
+    // Generate each collapsible section.
+    for (const section of sections) {
+        lines.push(generateCollapsibleSection(section, validationErrors, formValues));
+    }
+    return lines.join("\n");
+}
+/**
+ * Generates the config path display for settings.
+ * @returns HTML string with config path.
+ */
+export function generateSettingsFormFooter() {
+    return "<div class=\"config-path\">Configuration file: <code>" + escapeHtml(getConfigFilePath()) + "</code></div>";
+}
+/**
+ * Checks if there are any environment variable overrides for configuration settings.
+ * @returns True if any settings are overridden by environment variables.
+ */
+export function hasEnvOverrides() {
+    return getEnvOverrides().size > 0;
+}
+/**
+ * Configures the configuration endpoints. The GET /config endpoint has been removed - configuration is now accessed via hash navigation on the main page
+ * (e.g., /#config/server). Channels are accessed via /#channels. POST endpoints remain for form submission handling.
+ * @param app - The Express application.
+ */
+export function setupConfigEndpoint(app) {
+    // POST /config - Save configuration and restart. Returns JSON response.
+    app.post("/config", async (req, res) => {
+        try {
+            const envOverrides = getEnvOverrides();
+            const validationErrors = {};
+            const newConfig = {};
+            // Process each setting from the nested JSON structure.
+            for (const settings of Object.values(CONFIG_METADATA)) {
+                for (const setting of settings) {
+                    // Skip settings overridden by environment variables.
+                    if (envOverrides.has(setting.path)) {
+                        continue;
+                    }
+                    // Get the value from the nested JSON body using the setting path.
+                    const rawValue = getNestedValue(req.body, setting.path);
+                    // Skip undefined values (not submitted).
+                    if (rawValue === undefined) {
+                        continue;
+                    }
+                    // Parse the value (convert from display units to storage units if needed).
+                    const parsedValue = parseFormValue(setting, String(rawValue));
+                    // Validate the value.
+                    const validationError = validateSettingValue(setting, parsedValue);
+                    if (validationError) {
+                        validationErrors[setting.path] = validationError;
+                        continue;
+                    }
+                    // Add to new config.
+                    setNestedValue(newConfig, setting.path, parsedValue);
+                }
+            }
+            // If there are validation errors, return them as JSON.
+            if (Object.keys(validationErrors).length > 0) {
+                res.status(400).json({ errors: validationErrors, success: false });
+                return;
+            }
+            // The settings form only submits CONFIG_METADATA scalar values. The config file also stores complex fields managed by their own endpoints: disabled channel
+            // list, enabled provider filter, and the auto-generated HDHomeRun device ID. We must preserve these from the existing file, otherwise saving settings wipes them.
+            const existingResult = await loadUserConfig();
+            const existingConfig = existingResult.config;
+            if (Array.isArray(existingConfig.channels?.disabledPredefined) && (existingConfig.channels.disabledPredefined.length > 0)) {
+                newConfig.channels ??= {};
+                newConfig.channels.disabledPredefined = existingConfig.channels.disabledPredefined;
+            }
+            if (Array.isArray(existingConfig.channels?.enabledProviders) && (existingConfig.channels.enabledProviders.length > 0)) {
+                newConfig.channels ??= {};
+                newConfig.channels.enabledProviders = existingConfig.channels.enabledProviders;
+            }
+            if ((typeof existingConfig.hdhr?.deviceId === "string") && (existingConfig.hdhr.deviceId.length > 0)) {
+                newConfig.hdhr ??= {};
+                newConfig.hdhr.deviceId = existingConfig.hdhr.deviceId;
+            }
+            // Filter out values that match defaults to keep the config file clean.
+            const filteredConfig = filterDefaults(newConfig);
+            // Save the configuration.
+            await saveUserConfig(filteredConfig);
+            // Schedule restart after response is sent and return success response with restart info.
+            const restartResult = scheduleServerRestart("to apply configuration changes");
+            res.json({
+                activeStreams: restartResult.activeStreams,
+                deferred: restartResult.deferred,
+                message: restartResult.message,
+                success: true,
+                willRestart: restartResult.willRestart
+            });
+        }
+        catch (error) {
+            LOG.error("Failed to save configuration: %s", formatError(error));
+            res.status(500).json({ message: "Failed to save configuration: " + formatError(error), success: false });
+        }
+    });
+    // GET /config/export - Export current configuration as JSON.
+    app.get("/config/export", async (_req, res) => {
+        try {
+            const result = await loadUserConfig();
+            res.setHeader("Content-Type", "application/json");
+            res.setHeader("Content-Disposition", "attachment; filename=\"prismcast-config.json\"");
+            res.send(JSON.stringify(result.config, null, 2) + "\n");
+        }
+        catch (error) {
+            LOG.error("Failed to export configuration: %s", formatError(error));
+            res.status(500).json({ error: "Failed to export configuration: " + formatError(error) });
+        }
+    });
+    // POST /config/import - Import configuration from JSON.
+    app.post("/config/import", async (req, res) => {
+        try {
+            // Cast to unknown first for runtime validation, then to UserConfig after validation.
+            const rawConfig = req.body;
+            // Basic validation - ensure it's an object.
+            if ((typeof rawConfig !== "object") || (rawConfig === null) || Array.isArray(rawConfig)) {
+                res.status(400).json({ error: "Invalid configuration format: expected an object." });
+                return;
+            }
+            const importedConfig = rawConfig;
+            // Validate each setting in the imported config.
+            const validationErrors = [];
+            for (const [category, settings] of Object.entries(CONFIG_METADATA)) {
+                const categoryConfig = importedConfig[category];
+                if (categoryConfig === undefined) {
+                    continue;
+                }
+                if ((typeof categoryConfig !== "object") || (categoryConfig === null)) {
+                    validationErrors.push("Invalid " + category + " configuration: expected an object.");
+                    continue;
+                }
+                for (const setting of settings) {
+                    const pathParts = setting.path.split(".");
+                    let value = importedConfig;
+                    for (const part of pathParts) {
+                        if ((value === null) || (value === undefined) || (typeof value !== "object")) {
+                            value = undefined;
+                            break;
+                        }
+                        value = value[part];
+                    }
+                    if (value === undefined) {
+                        continue;
+                    }
+                    // Validate the value.
+                    const error = validateSettingValue(setting, value);
+                    if (error) {
+                        validationErrors.push(setting.label + ": " + error);
+                    }
+                }
+            }
+            if (validationErrors.length > 0) {
+                res.status(400).json({ error: "Validation errors:\n" + validationErrors.join("\n") });
+                return;
+            }
+            // Filter out values that match defaults to keep the config file clean.
+            const filteredConfig = filterDefaults(importedConfig);
+            // Save the imported configuration.
+            await saveUserConfig(filteredConfig);
+            // Schedule restart after response is sent and return success response with restart info.
+            const restartResult = scheduleServerRestart("after configuration import");
+            res.json({
+                activeStreams: restartResult.activeStreams,
+                deferred: restartResult.deferred,
+                message: restartResult.message,
+                success: true,
+                willRestart: restartResult.willRestart
+            });
+        }
+        catch (error) {
+            LOG.error("Failed to import configuration: %s", formatError(error));
+            res.status(500).json({ error: "Failed to import configuration: " + formatError(error) });
+        }
+    });
+    // POST /config/restart-now - Force immediate server restart regardless of active streams.
+    app.post("/config/restart-now", (_req, res) => {
+        if (!isRunningAsService()) {
+            res.status(400).json({ message: "Cannot restart: not running as a service.", success: false });
+            return;
+        }
+        LOG.info("Forced restart requested via API.");
+        res.json({ message: "Server is restarting...", success: true });
+        // Close the browser first to avoid orphan Chrome processes.
+        setTimeout(() => {
+            LOG.info("Exiting for forced service manager restart.");
+            void closeBrowser().then(() => { process.exit(0); }).catch(() => { process.exit(1); });
+        }, 500);
+    });
+    // GET /config/channels/export - Export user channels as JSON.
+    app.get("/config/channels/export", (_req, res) => {
+        try {
+            const userChannels = getUserChannels();
+            res.setHeader("Content-Type", "application/json");
+            res.setHeader("Content-Disposition", "attachment; filename=\"prismcast-channels.json\"");
+            res.send(JSON.stringify(userChannels, null, 2) + "\n");
+        }
+        catch (error) {
+            LOG.error("Failed to export channels: %s", formatError(error));
+            res.status(500).json({ error: "Failed to export channels: " + formatError(error) });
+        }
+    });
+    // POST /config/channels/import - Import channels from JSON, replacing all existing user channels.
+    app.post("/config/channels/import", async (req, res) => {
+        try {
+            const rawData = req.body;
+            // Validate the imported channels.
+            const validProfiles = getProfiles().map((p) => p.name);
+            const validationResult = validateImportedChannels(rawData, validProfiles);
+            if (!validationResult.valid) {
+                res.status(400).json({ error: "Validation errors:\n" + validationResult.errors.join("\n") });
+                return;
+            }
+            // Save the imported channels, replacing all existing user channels.
+            await saveUserChannels(validationResult.channels);
+            const channelCount = Object.keys(validationResult.channels).length;
+            // Send success response. Changes take effect immediately due to hot-reloading in saveUserChannels().
+            res.json({ message: "Imported " + String(channelCount) + " channel" + (channelCount === 1 ? "" : "s") + " successfully.", success: true });
+        }
+        catch (error) {
+            LOG.error("Failed to import channels: %s", formatError(error));
+            res.status(500).json({ error: "Failed to import channels: " + formatError(error) });
+        }
+    });
+    // POST /config/channels/import-m3u - Import channels from M3U playlist file.
+    app.post("/config/channels/import-m3u", async (req, res) => {
+        try {
+            const body = req.body;
+            const content = body.content;
+            const conflictMode = body.conflictMode ?? "skip";
+            // Validate content is provided.
+            if (!content || (typeof content !== "string") || (content.trim() === "")) {
+                res.status(400).json({ error: "No M3U content provided.", success: false });
+                return;
+            }
+            // Validate conflict mode.
+            if ((conflictMode !== "skip") && (conflictMode !== "replace")) {
+                res.status(400).json({ error: "Invalid conflict mode. Must be 'skip' or 'replace'.", success: false });
+                return;
+            }
+            // Parse the M3U content.
+            const parseResult = parseM3U(content);
+            // Check for empty result.
+            if (parseResult.channels.length === 0) {
+                res.status(400).json({
+                    error: "No channels found in M3U file." + (parseResult.errors.length > 0 ? " Parse errors: " + parseResult.errors.join("; ") : ""),
+                    success: false
+                });
+                return;
+            }
+            // Load existing user channels.
+            const loadResult = await loadUserChannels();
+            const existingChannels = loadResult.parseError ? {} : loadResult.channels;
+            // Track import statistics.
+            const conflicts = [];
+            const importErrors = [];
+            const seenKeys = new Set();
+            let imported = 0;
+            let replaced = 0;
+            let skipped = 0;
+            // Process each parsed channel.
+            for (const m3uChannel of parseResult.channels) {
+                // Generate the channel key from the name.
+                const key = generateChannelKey(m3uChannel.name);
+                // Validate the generated key.
+                if (!key || (key.length === 0)) {
+                    importErrors.push("Could not generate key for channel '" + m3uChannel.name + "'.");
+                    continue;
+                }
+                // Skip duplicate keys within the same M3U file (first occurrence wins).
+                if (seenKeys.has(key)) {
+                    continue;
+                }
+                seenKeys.add(key);
+                // Validate the URL.
+                const urlError = validateChannelUrl(m3uChannel.url);
+                if (urlError) {
+                    importErrors.push("Channel '" + m3uChannel.name + "': " + urlError);
+                    continue;
+                }
+                // Validate the name.
+                const nameError = validateChannelName(m3uChannel.name);
+                if (nameError) {
+                    importErrors.push("Channel '" + m3uChannel.name + "': " + nameError);
+                    continue;
+                }
+                // Check for conflicts with existing channels.
+                if (key in existingChannels) {
+                    conflicts.push(key);
+                    if (conflictMode === "skip") {
+                        skipped++;
+                        continue;
+                    }
+                    // Replace mode - count as replaced instead of imported.
+                    replaced++;
+                }
+                else {
+                    imported++;
+                }
+                // Build the channel object.
+                const channel = {
+                    name: m3uChannel.name,
+                    url: m3uChannel.url
+                };
+                // Add station ID if present.
+                if (m3uChannel.stationId) {
+                    channel.stationId = m3uChannel.stationId;
+                }
+                // Add to channels collection.
+                existingChannels[key] = channel;
+            }
+            // Save the updated channels.
+            await saveUserChannels(existingChannels);
+            // Log the import.
+            LOG.info("M3U import completed: %d imported, %d replaced, %d skipped.", imported, replaced, skipped);
+            // Build response.
+            res.json({
+                conflicts,
+                errors: [...parseResult.errors, ...importErrors],
+                imported,
+                replaced,
+                skipped,
+                success: true
+            });
+        }
+        catch (error) {
+            LOG.error("Failed to import M3U channels: %s", formatError(error));
+            res.status(500).json({ error: "Failed to import channels: " + formatError(error), success: false });
+        }
+    });
+    // POST /config/channels/toggle-predefined - Toggle a single predefined channel's enabled/disabled state.
+    app.post("/config/channels/toggle-predefined", async (req, res) => {
+        try {
+            const body = req.body;
+            const key = body.key?.trim();
+            const enabled = body.enabled;
+            // Validate key is provided.
+            if (!key) {
+                res.status(400).json({ error: "Channel key is required.", success: false });
+                return;
+            }
+            // Validate enabled is provided.
+            if (typeof enabled !== "boolean") {
+                res.status(400).json({ error: "Enabled state (true/false) is required.", success: false });
+                return;
+            }
+            // Validate the channel exists as a predefined channel.
+            if (!isPredefinedChannel(key)) {
+                res.status(400).json({ error: "Channel '" + key + "' is not a predefined channel.", success: false });
+                return;
+            }
+            // Load current config.
+            const configResult = await loadUserConfig();
+            const userConfig = configResult.config;
+            // Initialize channels.disabledPredefined if not present.
+            userConfig.channels ??= {};
+            userConfig.channels.disabledPredefined ??= [];
+            const disabledSet = new Set(userConfig.channels.disabledPredefined);
+            if (enabled) {
+                // Enable: remove from disabled list.
+                disabledSet.delete(key);
+            }
+            else {
+                // Disable: add to disabled list.
+                disabledSet.add(key);
+            }
+            // Update and save config.
+            userConfig.channels.disabledPredefined = [...disabledSet].sort();
+            await saveUserConfig(userConfig);
+            // Update the runtime CONFIG to reflect the change immediately.
+            CONFIG.channels.disabledPredefined = userConfig.channels.disabledPredefined;
+            LOG.info("Predefined channel '%s' %s.", key, enabled ? "enabled" : "disabled");
+            res.json({ enabled, key, success: true });
+        }
+        catch (error) {
+            LOG.error("Failed to toggle predefined channel: %s", formatError(error));
+            res.status(500).json({ error: "Failed to toggle channel: " + formatError(error), success: false });
+        }
+    });
+    // POST /config/provider - Update provider selection for a multi-provider channel.
+    app.post("/config/provider", async (req, res) => {
+        try {
+            const body = req.body;
+            const channelKey = body.channel?.trim();
+            const providerKey = body.provider?.trim();
+            // Validate channel key is provided.
+            if (!channelKey) {
+                res.status(400).json({ error: "Channel key is required.", success: false });
+                return;
+            }
+            // Validate provider key is provided.
+            if (!providerKey) {
+                res.status(400).json({ error: "Provider key is required.", success: false });
+                return;
+            }
+            // Canonicalize the channel key to ensure selections are stored under the canonical key, not variant keys.
+            const canonicalKey = getCanonicalKey(channelKey);
+            // Validate the channel has provider options.
+            const providerGroup = getProviderGroup(canonicalKey);
+            if (!providerGroup) {
+                res.status(400).json({ error: "Channel '" + canonicalKey + "' does not have multiple providers.", success: false });
+                return;
+            }
+            // Validate the provider key is valid for this channel.
+            const validProviderKeys = providerGroup.variants.map((v) => v.key);
+            if (!validProviderKeys.includes(providerKey)) {
+                res.status(400).json({ error: "Invalid provider '" + providerKey + "' for channel '" + canonicalKey + "'.", success: false });
+                return;
+            }
+            // Update the provider selection.
+            setProviderSelection(canonicalKey, providerKey);
+            // Save to disk.
+            await saveProviderSelections();
+            // Get the resolved channel to return its profile for UI update.
+            const resolvedChannel = getResolvedChannel(providerKey);
+            const profile = resolvedChannel?.profile ?? null;
+            LOG.info("Provider selection for '%s' changed to '%s'.", canonicalKey, providerKey);
+            res.json({ channel: canonicalKey, profile, provider: providerKey, success: true });
+        }
+        catch (error) {
+            LOG.error("Failed to update provider selection: %s", formatError(error));
+            res.status(500).json({ error: "Failed to update provider: " + formatError(error), success: false });
+        }
+    });
+    // POST /config/channels/toggle-all-predefined - Toggle all predefined channels' enabled/disabled state.
+    app.post("/config/channels/toggle-all-predefined", async (req, res) => {
+        try {
+            const body = req.body;
+            const enabled = body.enabled;
+            // Validate enabled is provided.
+            if (typeof enabled !== "boolean") {
+                res.status(400).json({ error: "Enabled state (true/false) is required.", success: false });
+                return;
+            }
+            // Load current config.
+            const configResult = await loadUserConfig();
+            const userConfig = configResult.config;
+            // Initialize channels.disabledPredefined if not present.
+            userConfig.channels ??= {};
+            const predefinedKeys = Object.keys(getPredefinedChannels());
+            let affected;
+            if (enabled) {
+                // Enable all: clear the disabled list.
+                affected = userConfig.channels.disabledPredefined?.length ?? 0;
+                userConfig.channels.disabledPredefined = [];
+            }
+            else {
+                // Disable all: add all predefined channel keys.
+                const previousCount = userConfig.channels.disabledPredefined?.length ?? 0;
+                userConfig.channels.disabledPredefined = predefinedKeys.sort();
+                affected = predefinedKeys.length - previousCount;
+            }
+            await saveUserConfig(userConfig);
+            // Update the runtime CONFIG to reflect the change immediately.
+            CONFIG.channels.disabledPredefined = userConfig.channels.disabledPredefined;
+            LOG.info("All predefined channels %s (%d affected).", enabled ? "enabled" : "disabled", affected);
+            res.json({ affected, enabled, success: true });
+        }
+        catch (error) {
+            LOG.error("Failed to toggle all predefined channels: %s", formatError(error));
+            res.status(500).json({ error: "Failed to toggle channels: " + formatError(error), success: false });
+        }
+    });
+    // POST /config/provider-filter - Update the provider filter (enabled provider tags).
+    app.post("/config/provider-filter", async (req, res) => {
+        try {
+            const body = req.body;
+            const tags = body.enabledProviders;
+            // Validate tags is an array.
+            if (!Array.isArray(tags)) {
+                res.status(400).json({ error: "enabledProviders must be an array.", success: false });
+                return;
+            }
+            // Validate all tags are known.
+            const knownTags = new Set(getAllProviderTags().map((t) => t.tag));
+            for (const tag of tags) {
+                if (!knownTags.has(tag)) {
+                    res.status(400).json({ error: "Unknown provider tag: " + tag, success: false });
+                    return;
+                }
+            }
+            // Update module-level state.
+            setEnabledProviders(tags);
+            // Update runtime CONFIG.
+            CONFIG.channels.enabledProviders = [...tags];
+            // Save to config file.
+            const configResult = await loadUserConfig();
+            const userConfig = configResult.config;
+            userConfig.channels ??= {};
+            userConfig.channels.enabledProviders = tags;
+            await saveUserConfig(filterDefaults(userConfig));
+            LOG.info("Provider filter updated: %s.", tags.length > 0 ? tags.join(", ") : "all providers");
+            res.json({ enabledProviders: tags, success: true });
+        }
+        catch (error) {
+            LOG.error("Failed to update provider filter: %s", formatError(error));
+            res.status(500).json({ error: "Failed to update provider filter: " + formatError(error), success: false });
+        }
+    });
+    // POST /config/provider-bulk-assign - Set all channels to a specific provider.
+    app.post("/config/provider-bulk-assign", async (req, res) => {
+        try {
+            const body = req.body;
+            const providerTag = body.provider?.trim();
+            // Validate provider tag.
+            if (!providerTag) {
+                res.status(400).json({ error: "Provider tag is required.", success: false });
+                return;
+            }
+            let affected = 0;
+            const previousSelections = {};
+            const selections = {};
+            // Iterate all channels and set those with a matching variant.
+            const listing = getChannelListing();
+            for (const entry of listing) {
+                const group = getProviderGroup(entry.key);
+                if (!group || (group.variants.length <= 1)) {
+                    continue;
+                }
+                // Find a variant matching the requested provider tag.
+                const matchingVariant = group.variants.find((v) => (getProviderTagForChannel(v.key) === providerTag));
+                if (matchingVariant) {
+                    // Snapshot the current selection before overwriting so the client can offer undo.
+                    const currentVariant = getProviderSelection(entry.key);
+                    previousSelections[entry.key] = currentVariant ?? null;
+                    setProviderSelection(entry.key, matchingVariant.key);
+                    affected++;
+                    // Collect the resolved profile name for client-side UI update.
+                    const resolvedChannel = getResolvedChannel(matchingVariant.key);
+                    selections[entry.key] = { profile: resolvedChannel?.profile ?? null, variant: matchingVariant.key };
+                }
+            }
+            // Save to disk.
+            await saveProviderSelections();
+            LOG.info("Bulk assign to '%s': %d of %d channels affected.", providerTag, affected, listing.length);
+            res.json({ affected, previousSelections, selections, success: true, total: listing.length });
+        }
+        catch (error) {
+            LOG.error("Failed to bulk assign provider: %s", formatError(error));
+            res.status(500).json({ error: "Failed to bulk assign provider: " + formatError(error), success: false });
+        }
+    });
+    // POST /config/provider-bulk-restore - Restore previous provider selections (undo bulk assign).
+    app.post("/config/provider-bulk-restore", async (req, res) => {
+        try {
+            const body = req.body;
+            const previousSelections = body.selections;
+            if (!previousSelections || (typeof previousSelections !== "object")) {
+                res.status(400).json({ error: "Selections map is required.", success: false });
+                return;
+            }
+            let restored = 0;
+            const selections = {};
+            for (const [key, variantKey] of Object.entries(previousSelections)) {
+                const group = getProviderGroup(key);
+                if (!group) {
+                    continue;
+                }
+                // A null value means the channel was using the default (canonical) selection. Restoring by setting the selection to the canonical key clears the override.
+                if (variantKey === null) {
+                    setProviderSelection(key, key);
+                }
+                else {
+                    // Validate the variant belongs to this channel's provider group before restoring.
+                    const isValid = group.variants.some((v) => (v.key === variantKey));
+                    if (!isValid) {
+                        continue;
+                    }
+                    setProviderSelection(key, variantKey);
+                }
+                restored++;
+                // Build the same selection response format as bulk assign for client-side UI updates.
+                const effectiveKey = variantKey ?? key;
+                const resolvedChannel = getResolvedChannel(effectiveKey);
+                selections[key] = { profile: resolvedChannel?.profile ?? null, variant: effectiveKey };
+            }
+            // Save to disk.
+            await saveProviderSelections();
+            LOG.info("Bulk restore: %d channel(s) reverted.", restored);
+            res.json({ restored, selections, success: true });
+        }
+        catch (error) {
+            LOG.error("Failed to bulk restore providers: %s", formatError(error));
+            res.status(500).json({ error: "Failed to bulk restore providers: " + formatError(error), success: false });
+        }
+    });
+    // POST /config/channels - Handle channel add, edit, delete operations. Returns JSON response.
+    app.post("/config/channels", async (req, res) => {
+        try {
+            const body = req.body;
+            const action = body.action;
+            const key = body.key?.trim();
+            const profiles = getProfiles();
+            // Handle delete action.
+            if (action === "delete") {
+                if (!key) {
+                    res.status(400).json({ message: "Channel key is required for delete.", success: false });
+                    return;
+                }
+                if (!isUserChannel(key)) {
+                    res.status(400).json({ message: "Cannot delete '" + key + "': it is not a user-defined channel.", success: false });
+                    return;
+                }
+                // Delete the channel.
+                const result = await loadUserChannels();
+                if (result.parseError) {
+                    res.status(400).json({ message: "Cannot delete channel: channels file contains invalid JSON.", success: false });
+                    return;
+                }
+                Reflect.deleteProperty(result.channels, key);
+                await saveUserChannels(result.channels);
+                LOG.info("User channel '%s' deleted.", key);
+                // If a predefined channel exists with the same key, generate its HTML so the client can replace the user channel row with the predefined version instead of
+                // just removing it. Without this, deleting a user override of a predefined channel would leave the predefined channel invisible until a page refresh.
+                const predefined = isPredefinedChannel(key) ? generateChannelRowHtml(key, profiles) : undefined;
+                // Return success response with key for client-side DOM update. Changes take effect immediately due to hot-reloading in saveUserChannels().
+                res.json({ html: predefined, key, message: "Channel '" + key + "' deleted successfully.", success: true });
+                return;
+            }
+            // Handle add and edit actions.
+            if ((action !== "add") && (action !== "edit")) {
+                res.status(400).json({ message: "Invalid channel action.", success: false });
+                return;
+            }
+            // Key is required for both add and edit actions.
+            if (!key) {
+                res.status(400).json({ message: "Channel key is required.", success: false });
+                return;
+            }
+            // Validate channel fields.
+            const formErrors = {};
+            // Collect form values.
+            const name = body.name?.trim() ?? "";
+            const url = body.url?.trim() ?? "";
+            const profile = body.profile?.trim() ?? "";
+            const stationId = body.stationId?.trim() ?? "";
+            const channelSelector = body.channelSelector?.trim() ?? "";
+            const channelNumberStr = body.channelNumber?.trim() ?? "";
+            // Validate channel number if provided.
+            if (channelNumberStr) {
+                const num = parseInt(channelNumberStr, 10);
+                if (Number.isNaN(num) || (num < 1) || (num > 99999)) {
+                    formErrors.channelNumber = "Channel number must be between 1 and 99999.";
+                }
+                else {
+                    // Check for duplicate channel numbers across all channels.
+                    const allChannels = { ...getPredefinedChannels(), ...getUserChannels() };
+                    for (const [existingKey, existingChannel] of Object.entries(allChannels)) {
+                        if ((existingChannel.channelNumber === num) && (existingKey !== key)) {
+                            formErrors.channelNumber = "Channel number " + String(num) + " is already used by '" + existingKey + "'.";
+                            break;
+                        }
+                    }
+                }
+            }
+            // Validate key (only for add action, not edit).
+            if (action === "add") {
+                const keyError = validateChannelKey(key, true);
+                if (keyError) {
+                    formErrors.key = keyError;
+                }
+            }
+            // Validate name.
+            const nameError = validateChannelName(name);
+            if (nameError) {
+                formErrors.name = nameError;
+            }
+            // Validate URL.
+            const urlError = validateChannelUrl(url);
+            if (urlError) {
+                formErrors.url = urlError;
+            }
+            // Validate profile (if specified).
+            const profileError = validateChannelProfile(profile, profiles.map((p) => p.name));
+            if (profileError) {
+                formErrors.profile = profileError;
+            }
+            // If validation errors, return them as JSON.
+            if (Object.keys(formErrors).length > 0) {
+                res.status(400).json({ errors: formErrors, success: false });
+                return;
+            }
+            // Load existing user channels.
+            const result = await loadUserChannels();
+            if (result.parseError) {
+                // If channels file is corrupt, start fresh on add (which will create a valid file).
+                if (action === "add") {
+                    result.channels = {};
+                }
+                else {
+                    res.status(400).json({ message: "Cannot edit channel: channels file contains invalid JSON.", success: false });
+                    return;
+                }
+            }
+            // Build the channel object.
+            const channel = {
+                name,
+                url
+            };
+            if (profile) {
+                channel.profile = profile;
+            }
+            if (stationId) {
+                channel.stationId = stationId;
+            }
+            if (channelSelector) {
+                channel.channelSelector = channelSelector;
+            }
+            if (channelNumberStr) {
+                channel.channelNumber = parseInt(channelNumberStr, 10);
+            }
+            // Add or update the channel.
+            result.channels[key] = channel;
+            await saveUserChannels(result.channels);
+            const actionLabel = (action === "add") ? "added" : "updated";
+            LOG.info("User channel '%s' %s.", key, actionLabel);
+            // Generate HTML for the channel row so the client can update the DOM without a full page reload.
+            const rowHtml = generateChannelRowHtml(key, profiles);
+            // Return success response with HTML for client-side DOM update. Changes take effect immediately due to hot-reloading in saveUserChannels().
+            res.json({
+                html: { displayRow: rowHtml.displayRow, editRow: rowHtml.editRow },
+                isNew: action === "add",
+                key,
+                message: "Channel '" + key + "' " + actionLabel + " successfully.",
+                success: true
+            });
+        }
+        catch (error) {
+            LOG.error("Failed to save channel: %s", formatError(error));
+            res.status(500).json({ message: "Failed to save channel: " + formatError(error), success: false });
+        }
+    });
+}
+//# sourceMappingURL=config.js.map