prismcast 1.5.2 → 1.7.0

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

@@ -2,15 +2,31 @@
  *
  * table.ts: Channel table rendering for the PrismCast configuration interface.
  */
-import { compareChannelSort, getAllProviderTags, getChannelProviderLabel, getChannelProviderTags, getChannelSortKey, getEnabledProviders, getProviderGroup, getProviderSelection, getProviderTagForChannel, getResolvedChannel, hasMultipleProviders, isChannelAvailableByProvider, isProviderTagEnabled, resolveProviderKey } from "../../../config/providers.js";
+import { compareChannelSort, getAllProviderTags, getAuthDomainForChannel, getChannelProviderLabel, getChannelProviderTags, getChannelSortKey, getEnabledProviders, getProviderGroup, hasMultipleProviders, isChannelAvailableByProvider, isProviderTagEnabled, resolvePredefinedVariant, resolveProviderKey } from "../../../config/providers.js";
 import { escapeHtml, formatTimeAgo } from "../../../utils/index.js";
-import { getCachedProviderChannels, getProviderDomainMap, getProviderGuideUrls } from "../../../browser/channelSelection.js";
-import { getChannelHealth, getProviderAuth } from "../../../config/health.js";
-import { getChannelListing, getChannelsParseErrorMessage, getPredefinedScopeCounts, getUserChannelsFilePath, hasChannelsParseError, isPredefinedChannel, isPredefinedChannelDisabled, isUserChannel } from "../../../config/userChannels.js";
+import { getCachedProviderChannels, getProviderDomainMap, getProviderGuideUrls, getProviderModuleInfo } from "../../../browser/channelSelection.js";
+import { getChannelHealth, getDomainAuth } from "../../../config/health.js";
+import { getChannelListing, getChannelLogo, getChannelsParseErrorMessage, getPredefinedScopeCounts, getUserChannelsFilePath, hasChannelsParseError, isPredefinedChannel, isPredefinedChannelDisabled, isUserChannel } from "../../../config/userChannels.js";
 import { getProfileForChannel, getProfiles } from "../../../config/profiles.js";
 import { CONFIG } from "../../../config/index.js";
 import { PREDEFINED_CHANNELS } from "../../../channels/index.js";
 import { categorizeProfiles } from "../index.js";
+import { generateWizardModal } from "../../components.js";
+/**
+ * Generates an annotated provider display span. The client-side page-load script processes these elements via providerIconHtml, rendering the appropriate
+ * icon + text combination. The server just emits the text with data attributes — all icon rendering is client-side through the single providerIconHtml path.
+ * @param name - The provider display name.
+ * @param domain - The provider's domain for icon fallback derivation. Undefined for providers without a known domain.
+ * @param iconUrl - Optional explicit icon URL to try before domain-derived fallbacks.
+ * @param small - When true, uses the small icon variant for chips.
+ * @returns HTML span string with data attributes for client-side processing.
+ */
+function providerDisplaySpan(name, domain, iconUrl, small) {
+    const domainAttr = domain ? " data-domain=\"" + escapeHtml(domain) + "\"" : "";
+    const iconAttr = iconUrl ? " data-icon-url=\"" + escapeHtml(iconUrl) + "\"" : "";
+    const sizeAttr = small ? " data-sm" : "";
+    return "<span class=\"provider-display\"" + domainAttr + iconAttr + sizeAttr + ">" + escapeHtml(name) + "</span>";
+}
 // SVG icon constants for channel action buttons. Each icon is 14x14px with a 16x16 viewBox, stroke-based with currentColor, and uses round line caps/joins.
 export const ICON_EDIT = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" " +
     "stroke-linejoin=\"round\"><path d=\"M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z\"/></svg>";
@@ -33,12 +49,13 @@ const ICON_COPY = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"
 // column order in the table, slotted between Provider and Actions.
 export const OPTIONAL_COLUMNS = [
     { align: "center", cssClass: "col-chnum", field: "channelNumber", label: "Number", width: "70px" },
+    { align: "center", cssClass: "col-hdhr", field: "hdhrEnabled", label: "HDHR", width: "55px" },
     { align: "center", cssClass: "col-stationid", field: "stationId", label: "Station ID", width: "100px" },
     { align: "left", cssClass: "col-profile", field: "profile", label: "Profile", width: "130px" },
     { align: "left", cssClass: "col-selector", field: "channelSelector", label: "Selector", width: "130px" }
 ];
-// Total number of columns in the channels table (4 required + 4 optional).
-const TOTAL_COLUMN_COUNT = 8;
+// Total number of columns in the channels table (4 required + 5 optional).
+const TOTAL_COLUMN_COUNT = 9;
 // Valid optional column field names.
 export const VALID_OPTIONAL_COLUMNS = new Set(OPTIONAL_COLUMNS.map((c) => c.field));
 /**
@@ -259,16 +276,8 @@ function generateProfileReference(profiles) {
     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) {
+function generateAdvancedFields(idPrefix, options = {}) {
+    const { channelNumberValue = "", channelSelectorValue = "", hdhrEnabled = true, showHints = true, stationIdValue = "" } = options;
     const lines = [];
     // Advanced fields toggle.
     lines.push("<div class=\"advanced-toggle\" onclick=\"document.getElementById('" + idPrefix +
@@ -278,10 +287,11 @@ function generateAdvancedFields(idPrefix, stationIdValue, channelSelectorValue,
     // 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.
+    // Channel selector. The guide-based provider list is derived from the provider module registry so it stays current as providers are added.
+    const guideProviderNames = getProviderModuleInfo().map((p) => p.label).sort().join(", ");
     const channelSelectorHint = showHints ?
         "Identifies which channel to select on sites that host multiple live streams. Known values are suggested when the URL matches a supported site. " +
-            "For guide-based profiles (Fox, HBO Max, Hulu, Sling, YouTube TV), use the channel name or station code from the guide. " +
+            "For guide-based profiles (" + guideProviderNames + "), use the channel name or station code from the guide. " +
             "For tile and thumbnail profiles, right-click the channel element \u2192 Inspect \u2192 copy a unique value matching the profile's selector pattern " +
             "(typically a portion of the image src URL)." :
         undefined;
@@ -291,6 +301,18 @@ function generateAdvancedFields(idPrefix, stationIdValue, channelSelectorValue,
         "Optional numeric channel number for guide matching in Channels DVR and Plex." :
         undefined;
     lines.push(...generateTextField(idPrefix + "-channelNumber", "channelNumber", "Channel Number", channelNumberValue, { hint: channelNumberHint, placeholder: showHints ? "e.g., 501" : undefined }));
+    // HDHomeRun lineup inclusion. A hidden input provides the "false" value when the checkbox is unchecked (unchecked checkboxes are not submitted in FormData).
+    // When checked, the checkbox value "true" overwrites the hidden input's "false" since it appears later in DOM order.
+    const hdhrChecked = hdhrEnabled ? " checked" : "";
+    const hdhrHint = showHints ? "When unchecked, this channel is hidden from the HDHomeRun lineup and not available in Plex." : undefined;
+    lines.push("<div class=\"form-row form-row-checkbox\">");
+    lines.push("<label for=\"" + idPrefix + "-hdhrEnabled\">Include in HDHomeRun/Plex Lineup</label>");
+    lines.push("<input type=\"hidden\" name=\"hdhrEnabled\" value=\"false\">");
+    lines.push("<input type=\"checkbox\" id=\"" + idPrefix + "-hdhrEnabled\" name=\"hdhrEnabled\" value=\"true\"" + hdhrChecked + ">");
+    lines.push("</div>");
+    if (hdhrHint) {
+        lines.push("<div class=\"hint\">" + hdhrHint + "</div>");
+    }
     lines.push("</div>"); // End advanced fields.
     return lines;
 }
@@ -305,18 +327,22 @@ function generateAdvancedFields(idPrefix, stationIdValue, channelSelectorValue,
 function generateChannelSelectorData() {
     const byDomain = {};
     const seen = {};
-    for (const channel of Object.values(PREDEFINED_CHANNELS)) {
-        if (!channel.channelSelector) {
+    for (const [key, raw] of Object.entries(PREDEFINED_CHANNELS)) {
+        if (!raw.channelSelector) {
             continue;
         }
+        // Use the resolved channel (with inheritance from the canonical) so stationId, name, and other inherited fields are populated correctly for variants.
+        // The channelSelector is captured from the raw entry (already validated as non-null) to avoid non-null assertions on the resolved channel's optional field.
+        const selector = raw.channelSelector;
+        const channel = resolvePredefinedVariant(key) ?? raw;
         const hostname = new URL(channel.url).hostname;
         seen[hostname] ??= new Set();
-        if (seen[hostname].has(channel.channelSelector)) {
+        if (seen[hostname].has(selector)) {
             continue;
         }
-        seen[hostname].add(channel.channelSelector);
+        seen[hostname].add(selector);
         byDomain[hostname] ??= [];
-        byDomain[hostname].push({ label: channel.name ?? channel.channelSelector, value: channel.channelSelector });
+        byDomain[hostname].push({ label: channel.name ?? selector, stationId: channel.stationId, value: selector });
     }
     // Merge cached provider-discovered channels into the domain map. Predefined entries take precedence — we only add discovered channels whose channelSelector
     // value is not already present for that domain. This enriches the datalist with the full provider lineup when precaching or prior discovery has run.
@@ -342,6 +368,67 @@ function generateChannelSelectorData() {
         "var providerByDomain = " + JSON.stringify(providerByDomain) + ";\n" +
         "var providerGuideUrl = " + JSON.stringify(providerGuideUrl) + ";";
 }
+/**
+ * Generates the Browse Channels 2-step wizard modal. Step 1 is the provider picker grid, step 2 is channel discovery and management. Channel state detection
+ * (new, switch, current) is handled server-side by the annotated discovery response - no client-side matching logic is needed. Provider and guide URL data are
+ * embedded as JSON data blocks for the client-side wizard controller.
+ * @returns HTML string for the browse modal.
+ */
+function generateBrowseModal() {
+    // Build the provider info array from the provider module registry. The client uses this to render the provider picker.
+    const providers = getProviderModuleInfo();
+    const guideUrls = getProviderGuideUrls();
+    return generateWizardModal({
+        buttons: [
+            { id: "browse-back", label: "Back", position: "left", role: "back", visible: false },
+            { label: "Cancel", position: "right", role: "close" },
+            { id: "browse-add-btn", label: "Apply", onclick: "submitBrowseChannels()", position: "right", variant: "primary", visible: false }
+        ],
+        contentId: "browse-content",
+        dataBlocks: [
+            "<script type=\"application/json\" id=\"browse-providers-data\">" + JSON.stringify(providers) + "</script>",
+            "<script type=\"application/json\" id=\"browse-guide-urls-data\">" + JSON.stringify(guideUrls) + "</script>"
+        ],
+        description: "Manage your channel lineup by provider. Add new channels, switch providers for existing channels, or remove channels you no longer need.",
+        id: "browse-modal",
+        steps: ["Provider", "Channels"],
+        title: "Browse Channels",
+        titleId: "browse-title"
+    });
+}
+/**
+ * Generates the Provider Setup 3-step wizard modal. Steps: Providers (multi-select), Sign In (sequential auth), Channels (summary + finish). The
+ * setupCompleted flag is embedded as a data attribute so the client can auto-show the wizard on first visit.
+ * @returns HTML string for the setup wizard modal.
+ */
+function generateSetupWizardModal() {
+    const enabled = getEnabledProviders();
+    // Build provider data with enabled state from the current provider filter. getAllProviderTags is the single source of truth for provider metadata
+    // (domain, iconUrl, displayName). The enabled field lets the client pre-check providers on re-run without scraping DOM state.
+    const tags = getAllProviderTags()
+        .filter((t) => t.tag !== "direct")
+        .map((t) => ({ ...t, enabled: enabled.includes(t.tag) }));
+    return generateWizardModal({
+        buttons: [
+            { id: "setup-back", label: "Back", position: "left", role: "back", visible: false },
+            { id: "setup-skip", label: "Skip Setup", onclick: "skipSetup()", position: "right" },
+            { id: "setup-next", label: "Next", position: "right", role: "next", variant: "primary" },
+            { id: "setup-finish", label: "Finish", onclick: "finishSetup()", position: "right", variant: "primary", visible: false }
+        ],
+        contentId: "setup-content",
+        dataAttributes: { "setup-completed": CONFIG.channels.setupCompleted ? "true" : "false" },
+        dataBlocks: [
+            "<script type=\"application/json\" id=\"setup-providers-data\">" + JSON.stringify(tags) + "</script>"
+        ],
+        description: "Set up your streaming providers in three steps: select your services, sign in, and choose your channels.",
+        errorId: "setup-error",
+        id: "setup-modal",
+        steps: ["Providers", "Sign In", "Channels"],
+        stepsId: "setup-steps",
+        title: "Provider Setup",
+        titleId: "setup-title"
+    });
+}
 /**
  * Generates the HTML for a single channel's table rows (display row and edit form row). All channels — predefined, override, and user-defined — get both rows.
  * The edit form is pre-populated with the effective (resolved) values so users see what they're changing. When called from generateChannelsPanel() which already
@@ -360,10 +447,6 @@ export function generateChannelRowHtml(key, profiles, entry) {
         return { displayRow: "", editRow: "" };
     }
     const channel = listing.channel;
-    // Resolve the selected provider's channel data for display purposes (edit form pre-population). This ensures the values shown reflect 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 isOverride = isPredefined && isUser;
@@ -388,7 +471,10 @@ export function generateChannelRowHtml(key, profiles, entry) {
     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 class=\"ch-key\" data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "key")) + "\">" + escapeHtml(key) + "</td>");
-    displayLines.push("<td data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "name")) + "\">" + escapeHtml(channel.name ?? key) + "</td>");
+    const channelLogoUrl = getChannelLogo(key) ?? "";
+    const logoAttr = channelLogoUrl ? " data-logo=\"" + escapeHtml(channelLogoUrl) + "\"" : "";
+    displayLines.push("<td data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "name")) + "\"" + logoAttr +
+        "><span class=\"channel-name-cell\">" + escapeHtml(channel.name ?? key) + "</span></td>");
     // Provider column: dropdown for multi-provider channels, static provider name for single-provider. Both states always render a hidden "No available providers"
     // label alongside the provider content so that client-side filterChannelRows() can toggle between them without a page reload.
     displayLines.push("<td data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "provider")) + "\">");
@@ -399,14 +485,13 @@ export function generateChannelRowHtml(key, profiles, entry) {
         // 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 + ">");
+        const currentSelection = resolveProviderKey(key);
+        displayLines.push("<select class=\"provider-select\" data-channel=\"" + escapeHtml(key) +
+            "\" title=\"Choose which streaming provider delivers this channel\" onchange=\"updateProviderSelection(this)\"" + contentHidden + ">");
         for (const variant of providerGroup.variants) {
             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 + ">" +
+            const optionHidden = !isProviderTagEnabled(variant.tag) ? " hidden" : "";
+            displayLines.push("<option value=\"" + escapeHtml(variant.key) + "\" data-provider-tag=\"" + escapeHtml(variant.tag) + "\"" + selected + optionHidden + ">" +
                 escapeHtml(variant.label) + "</option>");
         }
         displayLines.push("</select>");
@@ -418,22 +503,29 @@ export function generateChannelRowHtml(key, profiles, entry) {
             escapeHtml(getChannelProviderLabel(channel)) + "</span>");
     }
     displayLines.push("</td>");
-    // Optional columns: Number, Station ID, Profile, Selector. All four are always rendered; visibility is controlled by CSS classes on the table element.
-    displayLines.push("<td class=\"col-chnum\" data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "channelNumber")) + "\">" +
-        (channel.channelNumber ? escapeHtml(String(channel.channelNumber)) : "") + "</td>");
-    displayLines.push("<td class=\"col-stationid\" data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "stationId")) + "\">" +
-        (channel.stationId ? escapeHtml(channel.stationId) : "") + "</td>");
-    // Profile column: show explicit profile as-is, or the auto-resolved friendly name with "(auto)" suffix in muted style. The sort key resolves the selected
-    // provider variant internally via getChannelSortKey. The display content uses displayChannel because profile resolution is URL-dependent and a canonical's URL
-    // may differ from the selected variant's.
+    // Optional columns: Number, HDHR, Station ID, Profile, Selector. All five are always rendered; visibility is controlled by CSS classes on the table element.
+    const cellKey = escapeHtml(key);
+    displayLines.push("<td class=\"col-chnum editable-cell\" data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "channelNumber")) +
+        "\" data-field=\"channelNumber\" data-key=\"" + cellKey + "\" data-value=\"" + (channel.channelNumber ? escapeHtml(String(channel.channelNumber)) : "") +
+        "\" onclick=\"startInlineEdit(this)\">" + (channel.channelNumber ? escapeHtml(String(channel.channelNumber)) : "<span class=\"text-muted\">&ndash;</span>") +
+        "</td>");
+    // HDHR column: inline checkbox for quick toggling. The checkbox submits changes via the toggleHdhr() client-side function.
+    const hdhrCheckedAttr = (channel.hdhrEnabled !== false) ? " checked" : "";
+    displayLines.push("<td class=\"col-hdhr\" data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "hdhrEnabled")) +
+        "\"><input type=\"checkbox\" data-key=\"" + cellKey + "\"" + hdhrCheckedAttr +
+        " onchange=\"toggleHdhr(this)\" title=\"Include in HDHomeRun/Plex lineup\"></td>");
+    displayLines.push("<td class=\"col-stationid editable-cell\" data-sort-value=\"" + escapeHtml(getChannelSortKey(channel, key, "stationId")) +
+        "\" data-field=\"stationId\" data-key=\"" + cellKey + "\" data-value=\"" + (channel.stationId ? escapeHtml(channel.stationId) : "") +
+        "\" onclick=\"startInlineEdit(this)\">" + (channel.stationId ? escapeHtml(channel.stationId) : "<span class=\"text-muted\">&ndash;</span>") + "</td>");
+    // Profile column: show explicit profile as-is, or the auto-resolved friendly name with "(auto)" suffix in muted style.
     const profileSortKey = escapeHtml(getChannelSortKey(channel, key, "profile"));
-    if (displayChannel.profile) {
-        displayLines.push("<td class=\"col-profile\" data-sort-value=\"" + profileSortKey + "\">" + escapeHtml(displayChannel.profile) + "</td>");
+    if (channel.profile) {
+        displayLines.push("<td class=\"col-profile\" data-sort-value=\"" + profileSortKey + "\">" + escapeHtml(channel.profile) + "</td>");
     }
     else {
-        const resolved = getProfileForChannel(displayChannel);
+        const resolved = getProfileForChannel(channel);
         if (resolved.profileName !== "default") {
-            const label = getChannelProviderLabel(displayChannel);
+            const label = getChannelProviderLabel(channel);
             displayLines.push("<td class=\"col-profile\" data-sort-value=\"" + profileSortKey +
                 "\"><span class=\"text-muted\">" + escapeHtml(label + " (auto)") + "</span></td>");
         }
@@ -447,20 +539,20 @@ export function generateChannelRowHtml(key, profiles, entry) {
     displayLines.push("<td>");
     displayLines.push("<div class=\"btn-group\">");
     const escapedKey = escapeHtml(key);
-    // Resolve the provider tag for the currently selected provider variant. Used for both login icon color and health icon lookups.
+    // Resolve the auth domain for the currently selected provider variant. Used for both login icon color and health icon lookups.
     const variantKey = resolveProviderKey(key);
-    const providerTag = getProviderTagForChannel(variantKey);
+    const authDomain = getAuthDomainForChannel(variantKey);
     // Position 1: Edit (all channels).
     displayLines.push("<button type=\"button\" class=\"btn-icon btn-icon-edit\" title=\"Edit\" aria-label=\"Edit\" onclick=\"showEditForm('" + escapedKey +
         "')\">" + ICON_EDIT + "</button>");
-    // Position 2: Login for enabled channels (with provider auth color), placeholder for disabled predefined. Custom channels (user-defined, not predefined) skip
+    // Position 2: Login for enabled channels (with domain auth color), placeholder for disabled predefined. Custom channels (user-defined, not predefined) skip
     // login coloring because they have no provider concept.
     if (!isDisabled) {
-        const authTimestamp = (isPredefined || isOverride) ? getProviderAuth(providerTag) : null;
+        const authTimestamp = (isPredefined || isOverride) ? getDomainAuth(authDomain) : null;
         const loginColorClass = authTimestamp ? " health-success" : "";
         const loginTitle = authTimestamp ? "Verified " + formatTimeAgo(authTimestamp) : "Not yet verified";
-        displayLines.push("<button type=\"button\" class=\"btn-icon btn-icon-login" + loginColorClass + "\" data-provider-tag=\"" +
-            escapeHtml(providerTag) + "\" title=\"" + loginTitle + "\" aria-label=\"Login\" " +
+        displayLines.push("<button type=\"button\" class=\"btn-icon btn-icon-login" + loginColorClass + "\" data-auth-domain=\"" +
+            escapeHtml(authDomain) + "\" title=\"" + loginTitle + "\" aria-label=\"Login\" " +
             "onclick=\"startChannelLogin('" + escapedKey + "')\">" + ICON_LOGIN + "</button>");
     }
     else {
@@ -468,7 +560,7 @@ export function generateChannelRowHtml(key, profiles, entry) {
     }
     // Position 3: Channel health indicator. Shows last tune result via color. Non-interactive (span, not button). Disabled channels get a placeholder instead.
     if (!isDisabled) {
-        const channelHealthResult = getChannelHealth(key, providerTag);
+        const channelHealthResult = getChannelHealth(key, authDomain);
         const healthColorClass = (channelHealthResult?.status === "success") ? " health-success" : (channelHealthResult?.status === "failed") ? " health-failed" : "";
         const healthTitle = channelHealthResult ?
             (channelHealthResult.status === "success" ? "Succeeded " : "Failed ") + formatTimeAgo(channelHealthResult.timestamp) : "Not yet tuned";
@@ -524,20 +616,25 @@ export function generateChannelRowHtml(key, profiles, entry) {
     editLines.push("<input type=\"hidden\" name=\"action\" value=\"edit\">");
     editLines.push("<input type=\"hidden\" name=\"key\" value=\"" + escapedKey + "\">");
     // Channel name.
-    editLines.push(...generateTextField("edit-name-" + key, "name", "Display Name", displayChannel.name ?? key, {
+    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", displayChannel.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, displayChannel.profile ?? "", profiles));
+    editLines.push(...generateProfileDropdown("edit-profile-" + key, channel.profile ?? "", profiles));
     // Advanced fields.
-    editLines.push(...generateAdvancedFields("edit-" + key, displayChannel.stationId ?? "", displayChannel.channelSelector ?? "", displayChannel.channelNumber ? String(displayChannel.channelNumber) : ""));
+    editLines.push(...generateAdvancedFields("edit-" + key, {
+        channelNumberValue: channel.channelNumber ? String(channel.channelNumber) : "",
+        channelSelectorValue: channel.channelSelector ?? "",
+        hdhrEnabled: channel.hdhrEnabled !== false,
+        stationIdValue: channel.stationId ?? ""
+    }));
     // Form buttons.
     editLines.push("<div class=\"form-buttons\">");
     editLines.push("<button type=\"submit\" class=\"btn btn-primary\">Save Changes</button>");
@@ -550,6 +647,80 @@ export function generateChannelRowHtml(key, profiles, entry) {
     const editRow = editLines.join("\n");
     return { displayRow, editRow };
 }
+/**
+ * Computes the complete channel table state — summary counts and scope toggle counts — from the current channel listing. This is the server-side single source
+ * of truth for all count computation, replacing the client-side DOM-scanning approach. Called once per mutation as part of building a patch.
+ * @param listing - Optional pre-fetched listing. When omitted, fetches from getChannelListing(). Passing the listing avoids a redundant computation when
+ *   buildChannelTablePatch already has it.
+ * @returns The channel table counts and scope toggle counts.
+ */
+export function buildChannelTableState(listing) {
+    listing ??= getChannelListing();
+    let predefined = 0;
+    let user = 0;
+    let disabled = 0;
+    for (const entry of listing) {
+        if ((entry.source === "user") || (entry.source === "override")) {
+            user++;
+        }
+        else {
+            predefined++;
+        }
+        if (!entry.enabled || !entry.availableByProvider) {
+            disabled++;
+        }
+    }
+    const total = listing.length;
+    const enabled = total - disabled;
+    return {
+        counts: { disabled, enabled, predefined, total, user },
+        scopeCounts: getPredefinedScopeCounts()
+    };
+}
+/**
+ * Counts channels included and excluded from the HDHomeRun lineup. Only counts enabled, provider-available channels (the same set visible in the table).
+ * @param listing - The channel listing entries.
+ * @returns An object with `enabled` (HDHR-included) and `total` counts.
+ */
+function getHdhrCounts(listing) {
+    let enabled = 0;
+    let total = 0;
+    for (const entry of listing) {
+        if (!entry.enabled || !entry.availableByProvider) {
+            continue;
+        }
+        total++;
+        if (entry.channel.hdhrEnabled !== false) {
+            enabled++;
+        }
+    }
+    return { enabled, total };
+}
+/**
+ * Builds a complete channel table patch for the given set of affected channel keys. Generates row HTML for keys that exist in the listing (update action) and
+ * remove actions for keys that no longer exist. Includes the current summary counts and scope toggle counts. This is the single function mutation endpoints
+ * call to construct their patch response.
+ * @param affectedKeys - The channel keys that were added, modified, or removed by the mutation.
+ * @param profiles - Available profiles for the edit form dropdown.
+ * @returns A complete ChannelTablePatch ready for client-side application.
+ */
+export function buildChannelTablePatch(affectedKeys, profiles) {
+    const listing = getChannelListing();
+    const listingByKey = new Map(listing.map((entry) => [entry.key, entry]));
+    const rows = [];
+    for (const key of affectedKeys) {
+        const entry = listingByKey.get(key);
+        if (entry) {
+            const rowHtml = generateChannelRowHtml(key, profiles, entry);
+            rows.push({ action: "update", displayRow: rowHtml.displayRow, editRow: rowHtml.editRow, key });
+        }
+        else {
+            rows.push({ action: "remove", key });
+        }
+    }
+    const { counts, scopeCounts } = buildChannelTableState(listing);
+    return { counts, hdhrCounts: getHdhrCounts(listing), rows, scopeCounts };
+}
 /**
  * Generates the provider filter toolbar HTML with a multi-select dropdown and dismissable chips.
  * @returns HTML string for the provider filter toolbar.
@@ -565,7 +736,8 @@ export function generateProviderFilterToolbar() {
     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("<button type=\"button\" class=\"btn btn-sm\" id=\"provider-filter-btn\" title=\"Filter channels by streaming provider\" " +
+        "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";
@@ -574,7 +746,7 @@ export function generateProviderFilterToolbar() {
         const disabledAttr = isDirectTag ? " disabled" : "";
         lines.push("<label class=\"provider-option\">");
         lines.push("<input type=\"checkbox\" data-tag=\"" + escapeHtml(tagInfo.tag) + "\"" + checkedAttr + disabledAttr +
-            " onchange=\"toggleProviderTag(this)\"> " + escapeHtml(tagInfo.displayName));
+            " onchange=\"toggleProviderTag(this)\"> " + providerDisplaySpan(tagInfo.displayName, tagInfo.domain, tagInfo.iconUrl));
         lines.push("</label>");
     }
     lines.push("</div>");
@@ -586,10 +758,12 @@ export function generateProviderFilterToolbar() {
             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\" aria-label=\"Remove " + escapeHtml(displayName) + "\" onclick=\"removeProviderChip('" + escapeHtml(tag) +
-                "')\">&times;</button></span>");
+            const chipTag = allTags.find((t) => t.tag === tag);
+            const displayName = chipTag?.displayName ?? tag;
+            lines.push("<span class=\"provider-chip\" data-tag=\"" + escapeHtml(tag) + "\">" +
+                providerDisplaySpan(displayName, chipTag?.domain, chipTag?.iconUrl, true) +
+                "<button type=\"button\" class=\"chip-close\" title=\"Remove " + escapeHtml(displayName) + " from filter\" aria-label=\"Remove " +
+                escapeHtml(displayName) + "\" onclick=\"removeProviderChip('" + escapeHtml(tag) + "')\">&times;</button></span>");
         }
     }
     lines.push("</div>");
@@ -620,29 +794,72 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     lines.push("<p>Define and manage streaming channels for the playlist. Customized channels are highlighted.</p>");
     lines.push("<p class=\"description-hint\">Tip: Use the <strong>provider filter</strong> above to show only channels from services you subscribe to &mdash; ", "this also controls which channels Channels DVR sees in the playlist. Use the <strong>provider dropdown</strong> on any multi-provider channel to choose ", "which streaming service delivers it (e.g., Comedy Central via Hulu vs Sling). Click the <strong>edit icon</strong> to customize any channel's name, ", "Gracenote station ID, URL, or other properties.</p>");
     lines.push("</div>");
-    // Toolbar with channel operations.
+    // Toolbar with three dropdown menus: Manage Channels (primary actions), Import/Export (data I/O), and Quick Actions (bulk operations). Each dropdown has an
+    // inline SVG icon + label + chevron for visual discoverability. Grouped menus reduce visual clutter and separate channel management from data I/O and bulk
+    // operations.
+    // Toolbar-level SVG icons (14x14, stroke-based, currentColor). Defined here since they're toolbar-specific and not reused elsewhere.
+    const ICON_MANAGE = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" " +
+        "stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"1.5\" y=\"5\" width=\"13\" height=\"9.5\" rx=\"1.5\"/>" +
+        "<path d=\"M7 4.5L3.5 1\"/><path d=\"M9 4.5L12.5 1\"/></svg>";
+    const ICON_TRANSFER = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" " +
+        "stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 5h10M10 2l3 3-3 3\"/><path d=\"M13 11H3M6 8l-3 3 3 3\"/></svg>";
+    const ICON_BOLT = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" " +
+        "stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 1.5L4 9h4l-1 5.5L12 7H8l1-5.5z\"/></svg>";
     lines.push("<div class=\"channel-toolbar\">");
-    // 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>");
+    // Manage Channels dropdown — primary channel creation and setup actions.
     lines.push("<div class=\"dropdown\">");
-    lines.push("<button type=\"button\" class=\"btn btn-secondary btn-sm\" onclick=\"toggleDropdown(this)\">Import &#9662;</button>");
+    lines.push("<button type=\"button\" class=\"btn btn-primary btn-sm toolbar-dropdown-btn\" title=\"Add, browse, or set up channels\" " +
+        "onclick=\"toggleDropdown(this)\">" + ICON_MANAGE + " Manage Channels &#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>");
+    // Dropdown item icons (14x14, stroke-based, tinted for visual context). Each icon uses a distinct color to differentiate menu items at a glance.
+    const ICON_ADD = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#22a563\" stroke-width=\"1.5\" " +
+        "stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3v10M3 8h10\"/></svg>";
+    const ICON_BROWSE = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#5b8def\" stroke-width=\"1.5\" " +
+        "stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"5\" height=\"5\" rx=\"1\"/><rect x=\"9\" y=\"2\" width=\"5\" " +
+        "height=\"5\" rx=\"1\"/><rect x=\"2\" y=\"9\" width=\"5\" height=\"5\" rx=\"1\"/><rect x=\"9\" y=\"9\" width=\"5\" height=\"5\" rx=\"1\"/></svg>";
+    const ICON_SETUP = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#9b8cd8\" stroke-width=\"1.5\" " +
+        "stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"2.5\"/><path d=\"M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2M3.1 " +
+        "3.1l1.4 1.4M11.5 11.5l1.4 1.4M3.1 12.9l1.4-1.4M11.5 4.5l1.4-1.4\"/></svg>";
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"closeDropdowns(); " +
+        "document.getElementById('add-channel-form').style.display='block';\">" + ICON_ADD + " Add Channel</div>");
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"closeDropdowns(); openBrowseModal()\">" + ICON_BROWSE +
+        " Browse Provider Channels</div>");
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"closeDropdowns(); openSetupWizard()\">" + ICON_SETUP +
+        " Provider Setup</div>");
+    lines.push("</div>");
+    lines.push("</div>");
+    // Import / Export dropdown — data I/O operations.
+    lines.push("<div class=\"dropdown\">");
+    lines.push("<button type=\"button\" class=\"btn btn-secondary btn-sm toolbar-dropdown-btn\" title=\"Import or export channel data\" " +
+        "onclick=\"toggleDropdown(this)\">" + ICON_TRANSFER + " Import / Export &#9662;</button>");
+    lines.push("<div class=\"dropdown-menu\">");
+    const ICON_IMPORT = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#5b8def\" stroke-width=\"1.5\" " +
+        "stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 2v8M5 7l3 3 3-3\"/><path d=\"M2 11v2a1 1 0 001 1h10a1 1 0 001-1v-2\"/></svg>";
+    const ICON_EXPORT = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#22a563\" stroke-width=\"1.5\" " +
+        "stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 10V2M5 5l3-3 3 3\"/><path d=\"M2 11v2a1 1 0 001 1h10a1 1 0 001-1v-2\"/></svg>";
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"closeDropdowns(); document.getElementById('import-channels-file').click()\">" +
+        ICON_IMPORT + " Import Channels (JSON)</div>");
+    lines.push("<div class=\"dropdown-item dropdown-item-icon\" onclick=\"closeDropdowns(); document.getElementById('import-m3u-file').click()\">" +
+        ICON_IMPORT + " Import M3U Playlist</div>");
+    lines.push("<label class=\"dropdown-option\"><input type=\"checkbox\" id=\"m3u-replace-duplicates\"> Replace duplicates on M3U import</label>");
     lines.push("<div class=\"dropdown-divider\"></div>");
-    lines.push("<div class=\"dropdown-item\" 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 class=\"dropdown-item dropdown-item-icon\" onclick=\"closeDropdowns(); exportChannels()\">" +
+        ICON_EXPORT + " Export Channels (JSON)</div>");
     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)\">");
+    // Visible column set, used by Quick Actions to gate column-dependent options and by the table header to set initial hide classes.
+    const visibleCols = new Set(CONFIG.channels.visibleColumns);
+    // Quick Actions dropdown — bulk operations for predefined channels.
     lines.push("<div class=\"dropdown quick-actions-dropdown\">");
-    lines.push("<button type=\"button\" class=\"btn btn-secondary btn-sm\" onclick=\"toggleDropdown(this)\">Quick Actions &#9662;</button>");
+    lines.push("<button type=\"button\" class=\"btn btn-secondary btn-sm toolbar-dropdown-btn\" title=\"Bulk operations for predefined channels\" " +
+        "onclick=\"toggleDropdown(this)\">" + ICON_BOLT + " Quick Actions &#9662;</button>");
     lines.push("<div class=\"dropdown-menu\">");
     // Compute initial toggle counts for predefined channel scopes. The server is the single source of truth — the client renders what we return here.
     const scopeCounts = getPredefinedScopeCounts();
-    // Three toggle rows: checkbox + label + "X of Y enabled" count. Clicking toggles the group via bulkTogglePredefined(). The onclick uses event.preventDefault()
-    // to stop the native checkbox toggle — the server response drives the update.
+    // Three toggle rows: checkbox + label + count. Clicking toggles the group via bulkTogglePredefined(). The onclick uses event.preventDefault() to stop the
+    // native checkbox toggle — the server response drives the update.
     const scopes = [
         { count: scopeCounts.all.enabled, label: "All Predefined", scope: "all", total: scopeCounts.all.total },
         { count: scopeCounts.east.enabled, label: "East Variants", scope: "east", total: scopeCounts.east.total },
@@ -651,19 +868,52 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     for (const s of scopes) {
         const checked = (s.count === s.total) ? " checked" : "";
         lines.push("<label class=\"provider-option\" onclick=\"event.preventDefault(); bulkTogglePredefined(!this.querySelector('input').checked, '" + s.scope +
-            "')\">" + "<input type=\"checkbox\" class=\"scope-toggle\" data-scope=\"" + s.scope + "\" data-total=\"" + String(s.total) + "\"" + checked + "> " +
-            s.label + "<span class=\"quick-action-count\" data-scope=\"" + s.scope + "\">" + String(s.count) + " of " + String(s.total) + " enabled</span></label>");
+            "')\">" + "<input type=\"checkbox\" class=\"scope-toggle\" data-scope=\"" + s.scope + "\"" + checked + "> " +
+            s.label + "<span class=\"quick-action-count\" data-scope=\"" + s.scope + "\" data-enabled=\"" + String(s.count) + "\" data-total=\"" + String(s.total) +
+            "\">" + String(s.count) + " of " + String(s.total) + " enabled</span></label>");
     }
     lines.push("<div class=\"dropdown-divider\"></div>");
-    // Bulk assign items — one per provider. Items whose tag is filtered out are hidden so updateBulkAssignOptions() can toggle them when the filter changes.
+    // Bulk assign select — switch all multi-provider channels to a single provider.
     const allTags = getAllProviderTags();
     const enabled = getEnabledProviders();
     const hasFilter = enabled.length > 0;
+    lines.push("<div class=\"bulk-assign-row\">");
+    lines.push("<span>Set all channels to:</span>");
+    lines.push("<select id=\"bulk-assign-select\" class=\"bulk-assign-select\" title=\"Switch all multi-provider channels to this provider\" " +
+        "onchange=\"if(this.value) { closeDropdowns(); bulkAssignProvider(this.value); this.value = ''; }\">");
+    lines.push("<option value=\"\">Select provider</option>");
     for (const tagInfo of allTags) {
-        const hidden = (hasFilter && !enabled.includes(tagInfo.tag) && (tagInfo.tag !== "direct")) ? " style=\"display: none;\"" : "";
-        lines.push("<div class=\"dropdown-item bulk-assign-item\" data-provider-tag=\"" + escapeHtml(tagInfo.tag) + "\"" + hidden +
-            " onclick=\"closeDropdowns(); bulkAssignProvider('" + escapeHtml(tagInfo.tag) + "')\">Set all to " + escapeHtml(tagInfo.displayName) + "</div>");
+        const hidden = (hasFilter && !enabled.includes(tagInfo.tag) && (tagInfo.tag !== "direct")) ? " hidden" : "";
+        lines.push("<option value=\"" + escapeHtml(tagInfo.tag) + "\" data-provider-tag=\"" + escapeHtml(tagInfo.tag) + "\"" + hidden + ">" +
+            escapeHtml(tagInfo.displayName) + "</option>");
     }
+    lines.push("</select>");
+    lines.push("</div>");
+    // Divider before column-gated quick actions. Hidden when neither the channel number nor HDHR column is visible.
+    const dividerVisible = (visibleCols.has("channelNumber") || visibleCols.has("hdhrEnabled")) ? "" : " style=\"display: none;\"";
+    lines.push("<div class=\"dropdown-divider\" id=\"quick-action-divider\"" + dividerVisible + "></div>");
+    // Auto-number channels — assign sequential channel numbers to visible channels in current sort order. Visible when the channel number column is shown.
+    const autoNumberVisible = visibleCols.has("channelNumber") ? "" : " style=\"display: none;\"";
+    lines.push("<div id=\"quick-action-autonumber\"" + autoNumberVisible + ">");
+    lines.push("<div class=\"bulk-assign-row\">");
+    lines.push("<span>Auto-number from:</span>");
+    lines.push("<input type=\"number\" id=\"auto-number-start\" class=\"auto-number-input\" value=\"1\" min=\"0\" max=\"99999\" " +
+        "placeholder=\"Clear\" onclick=\"event.stopPropagation()\">");
+    lines.push("<button type=\"button\" class=\"btn btn-sm btn-secondary\" onclick=\"closeDropdowns(); autoNumberChannels()\">Apply</button>");
+    lines.push("</div>");
+    lines.push("</div>");
+    // HDHR bulk toggle — tri-state checkbox to enable/disable all channels for the HDHomeRun lineup. Visible when the HDHR column is shown.
+    const hdhrVisible = visibleCols.has("hdhrEnabled") ? "" : " style=\"display: none;\"";
+    const hdhrCounts = getHdhrCounts(listing);
+    const hdhrCheckedAttr = (hdhrCounts.enabled === hdhrCounts.total) ? " checked" : "";
+    const hdhrIndeterminate = ((hdhrCounts.enabled > 0) && (hdhrCounts.enabled < hdhrCounts.total)) ? " data-indeterminate=\"true\"" : "";
+    lines.push("<div id=\"quick-action-hdhr\"" + hdhrVisible + ">");
+    lines.push("<label class=\"provider-option\" onclick=\"event.preventDefault(); bulkToggleHdhr()\">");
+    lines.push("<input type=\"checkbox\" id=\"hdhr-bulk-toggle\"" + hdhrCheckedAttr + hdhrIndeterminate + "> ");
+    lines.push("Include all in HDHR/Plex");
+    lines.push("<span class=\"quick-action-count\" id=\"hdhr-bulk-count\">" + String(hdhrCounts.enabled) + " of " + String(hdhrCounts.total) + "</span>");
+    lines.push("</label>");
+    lines.push("</div>");
     lines.push("</div>");
     lines.push("</div>");
     lines.push("</div>");
@@ -712,6 +962,24 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     lines.push("<h3>Add New Channel</h3>");
     lines.push("<form id=\"add-channel-form-el\" onsubmit=\"return submitChannelForm(event, 'add')\">");
     lines.push("<input type=\"hidden\" name=\"action\" value=\"add\">");
+    // Provider pills. Clicking a provider auto-fills the URL field, which triggers the existing URL-change infrastructure (datalist population, profile
+    // resolution). The pills use providerDisplaySpan for icon rendering via the shared processProviderDisplays path. Guide-grid providers fill with their
+    // guideUrl; non-guide-grid providers fill with https://{domain}/.
+    const addFormTags = getAllProviderTags();
+    const addFormGuideUrls = getProviderGuideUrls();
+    lines.push("<div class=\"form-row\"><label>Provider</label>");
+    lines.push("<div class=\"provider-pills\">");
+    for (const tagInfo of addFormTags) {
+        if (tagInfo.tag === "direct") {
+            continue;
+        }
+        const pillUrl = addFormGuideUrls[tagInfo.tag] ?? (tagInfo.domain ? "https://" + tagInfo.domain + "/" : "");
+        lines.push("<button type=\"button\" class=\"provider-pill\" data-slug=\"" + escapeHtml(tagInfo.tag) + "\" data-url=\"" + escapeHtml(pillUrl) +
+            "\" onclick=\"selectProviderPill(this)\">" + providerDisplaySpan(tagInfo.displayName, tagInfo.domain, tagInfo.iconUrl) + "</button>");
+    }
+    lines.push("</div>");
+    lines.push("</div>");
+    lines.push("<div class=\"hint\">Select a provider to auto-fill the URL, or enter one manually below.</div>");
     // 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",
@@ -734,22 +1002,24 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     }));
     // 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") ?? ""));
+    // Advanced fields (station ID, channel selector, channel number, HDHR).
+    lines.push(...generateAdvancedFields("add", {
+        channelNumberValue: formValues?.get("channelNumber") ?? "",
+        channelSelectorValue: formValues?.get("channelSelector") ?? "",
+        hdhrEnabled: formValues?.get("hdhrEnabled") !== "false",
+        stationIdValue: formValues?.get("stationId") ?? ""
+    }));
     // Form buttons.
     lines.push("<div class=\"form-buttons\">");
     lines.push("<button type=\"submit\" class=\"btn btn-primary\">Add Channel</button>");
-    lines.push("<button type=\"button\" class=\"btn btn-secondary\" onclick=\"document.getElementById('add-channel-form').style.display='none'; ", "document.getElementById('add-channel-btn').style.display='inline-block';\">Cancel</button>");
+    lines.push("<button type=\"button\" class=\"btn btn-secondary\" onclick=\"document.getElementById('add-channel-form').style.display='none';\">Cancel</button>");
     lines.push("</div>");
     lines.push("</form>");
     lines.push("</div>"); // End add-channel-form.
-    // Provider filter toolbar with multi-select dropdown and chips. 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. Table classes dynamically include hide-col-* for each hidden optional column.
-    const visibleCols = new Set(CONFIG.channels.visibleColumns);
     const tableClasses = ["channel-table", "hide-disabled"];
     for (const col of OPTIONAL_COLUMNS) {
         if (!visibleCols.has(col.field)) {
@@ -758,13 +1028,17 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     }
     const sortField = CONFIG.channels.channelSortField;
     const sortDir = CONFIG.channels.channelSortDirection;
-    // Channel summary line with predefined/user breakdown. The user-count span contains the entire user portion (comma, count, and label) so the client can
-    // toggle it by setting textContent. When there are no user channels, the span is empty to avoid "0 user" noise.
+    // Provider filter toolbar with multi-select dropdown and chips.
+    lines.push(generateProviderFilterToolbar());
+    // Channel summary line with predefined/user breakdown, placed directly above the table for visual proximity. The user-count span contains the entire user
+    // portion (comma, count, and label) so the client can toggle it by setting textContent. When there are no user channels, the span is empty.
     const userPortion = (userCount > 0) ? ", " + String(userCount) + " user" : "";
     lines.push("<div class=\"channel-summary\"><span id=\"total-count\">" + String(totalCount) + "</span> channels " +
         "(<span id=\"predefined-count\">" + String(predefinedCount) + "</span> predefined<span id=\"user-count\">" + userPortion + "</span>) &middot; " +
         "<span id=\"enabled-count\">" + String(enabledCount) + "</span> enabled &middot; " +
         "<span id=\"disabled-count\">" + String(totalHiddenCount) + "</span> disabled</div>");
+    // Channels table. The wrapper uses fit-content so it shrinks when columns are hidden, with max-width: 100% to prevent viewport overflow. Centered via auto
+    // margins. Dropdown menus escape the container via portal to <body>.
     lines.push("<div class=\"channel-table-wrapper\">");
     lines.push("<table class=\"" + tableClasses.join(" ") + "\" data-sort-field=\"" + sortField + "\" data-sort-dir=\"" + sortDir + "\">");
     lines.push("<thead>");
@@ -782,7 +1056,7 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
         lines.push("<th class=\"" + hdr.cssClass + " sortable\" data-sort-field=\"" + hdr.field + "\" onclick=\"sortChannelTable('" + hdr.field + "')\">" +
             hdr.label + indicator + "</th>");
     }
-    // Actions header with table options dropdown.
+    // Actions header with table options dropdown (kebab menu). Contains the show-disabled toggle and column visibility checkboxes.
     lines.push("<th class=\"col-actions\"><span>Actions</span>");
     lines.push("<div class=\"dropdown column-picker\">");
     lines.push("<button type=\"button\" class=\"btn-icon btn-col-picker\" title=\"Table options\" aria-label=\"Table options\" " +
@@ -816,6 +1090,12 @@ export function generateChannelsPanel(channelMessage, channelError, editingChann
     // Embed channel selector data for datalist population. The client-side JavaScript uses this to offer known selector suggestions when the URL matches a
     // multi-channel site like Disney+ or USA Network.
     lines.push("<script>" + generateChannelSelectorData() + "</script>");
+    // Browse Channels modal. The shell is server-rendered using wizard modal CSS classes. The content area (provider picker, channel list) is rendered
+    // client-side after fetching discovered channels from the provider endpoint.
+    lines.push(generateBrowseModal());
+    // Provider Setup wizard modal. Follows the same wizard pattern as the provider profile builder. Three steps: pick providers, authenticate, browse channels.
+    // The setupCompleted flag is embedded as a data attribute so the client can auto-show the wizard on first visit.
+    lines.push(generateSetupWizardModal());
     return lines.join("\n");
 }
 //# sourceMappingURL=table.js.map